@font-face {
  font-family: 'Manrope-Regular';
  src: 
      url('Manrope-VariableFont_wght.ttf') format('truetype');
       font-weight: 400;
       font-display: swap;
       font-style:normal;


       
}

.hidden_div {
  width: 0vw !important;
  height: 0vh !important;
  visibility: hidden !important;
  


}



@font-face {
  font-family: 'Manrope-SemiBold';
  src: 
      url('Manrope-Light.ttf') format('truetype');

       font-display: swap;
       font-style: normal;
}

.hidden_div {
  width: 0vw !important;
  height: 0vh !important;
  visibility: hidden !important;
  


}


.hidden_div > div {
  visibility: hidden;
}

:root {
  --purple-dark: #371437;
  --purple-medium: #5F415F;
  --purple-light: #A08CA0;    
  --grey-background: #e1e1e1;
  --auth-background: #d6d6d6;
  --white: rgb(255, 255, 255);
  --table-header: rgb(235, 234, 234);
  --table-content: rgb(255, 255, 255);
  --table-row-hover: #b7a5b7;
  /* --grey-background: #bbbbc0;
  --auth-background: #ceced0;
  --white: rgb(244, 244, 244);
    --black: rgb(40, 40, 40);
  --table-header: #a3a3a7; */
 
  --white-hover: rgb(230, 230, 230);
  --black: rgb(40, 40, 40);
  

  
  --red: darkred;
  --red-hover: rgb(179, 4, 4);
  --red-border: rgb(113, 1, 1);
  --gold: #fff3cd;
  --gold-border: #664d03;
  --green: #daffcd;
  --green-border: #036626;
  --border-color: rgb(176, 176, 176);

  --border-radius: clamp(9px, 0.7vw,9px);
  --font-size-header: clamp(17px,1.3vw,20px);
  --font-size-header_small: clamp(15px,1vw,15px);
  --font-size-button: clamp(11px, 0.7vw, 12px);
  --font-size-body: clamp(13px, 0.9vw, 13px);
  --font-size-tab: clamp(11px,0.7vw,12px);
  --border-width: min(0.1vw,1px);

  --login-container-width: clamp(300px, 20vw,400px);
  --login-container-height_stretched: clamp(500px, 80vh, 800px);
  --login-container-height: clamp(500px, 65vh, 600px);
  --modal-radius: clamp(9px,0.7vw, 9px);
  --button-height: clamp(32px, 2.2vw,32px);
  --button-height-large: clamp(32px, 2.5vw,37px);
  --button-img: clamp(20px, 1.2vw,23px);
  --tab-img: clamp(21px, 1.4vw, 23px);

  --input-field-height: clamp(30px, 5vh, 40px);
  --input-field-height-multi: clamp(30px, 10vh, 80px);

  --banner-height: clamp(40px,7vh,50px);


  --sidebar-width: clamp(190px,13vw, 250px);
  --tab-width: clamp(150px, 11vw, 180px);
  --tab-width-collapsed: clamp(40px, 3vw, 50px);
  --scrollbar-width: 11px;

  --page-header-buttons: clamp(76px, 11vh, 100px);
  /* --page-header-buttons: 13vh; */


  /* --page-content-width: min(100vw, 100vw - var(--tab-width) - 0.1vw); */

  --page-content-width: min(100vw, 100vw - var(--tab-width) - 0.1vw);

  --page-content-width-collapsed: min(100vw, 100vw - var(--tab-width-collapsed) - 0.1vw);

  --min-page-content-width: 900px;
  --min-page-content-height: 5000px;
  --notice-height: calc(1.1*var(--button-height));
  /* TOOLTIP */
  --bs-emphasis-color: white !important;
  --bs-tooltip-bg: white !important;


  /* POPOVER */
  --bs-border-color-translucent: transparent !important;
  --bs-body-bg: white !important;
  --bs-body-color: black !important;
  --bs-popover-border-color: white !important;

  --page-content-height: calc(100vh - var(--banner-height) - 1*var(--notice-height) + var(--border-width));
  --assistant-tab-color: rgb(61, 61, 61);
  --border-color-tabs: #69696b;
  --label-gradient: linear-gradient(45deg, var(--purple-dark), var(--purple-medium), var(--purple-light));
  }


/* 
#_dash-app-content {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  height: 100vh !important;
} */

#react-entry-point {
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden;
}
body {
  color: black !important;


  background-color: var(--grey-background);

  font-family: 'Manrope-Regular', sans-serif;

  font-size: var(--font-size-body);


  padding: 0rem;
  margin: 0rem;
  color: black;
  letter-spacing: 0.01vw;
  height: 100vh !important;
  width: 100vw !important;
  overflow: hidden;

  left: 0;
  top:0 !important;

}
#body_mobile {
  display: none !important;
  /* display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  height: 100% !important;
  justify-content: center !important;
  align-items: center !important; */

}


.modal-xl {
  min-width: 800px !important;
  width: 70vw;

}

.modal-lg {
  min-width: 600px !important;
  width: 50vw !important;
}

.modal-sm {
  min-width: 500px !important;
  width: 50vw !important;
}


/* @media only screen and (max-width: 1020px) { */
@media only screen and (max-width: 600px) {
  #body {
    display: none;
  }
  #body_mobile {
    /* display: none !important; */
    padding: 5vw;
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    height: 100vh !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 20px;
    text-align: center;
    z-index: 1000;
  
  }
  .modal-content {
    display: none;
    visibility: hidden;
  }
  .fade.modal.show {
    display: none;
    opacity: 0;
    visibility: hidden;
  }

  #modal_load_project_init {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    animation: none;
    transition: none;

  }
  #modal_load_project_init::after {
    content: "Bitte erweitern Sie Ihr Browserfenster, um diese Anwendung anzuzeigen." !important;
    font-size: 20px;
    display:block;
    visibility: visible;
    opacity: 1;
    text-align: center;
  


  }
  .popover {
    display: none;
    visibility: hidden;
    color: black !important;

  }



  .popover-body, .popover-body > #text {
    color: black !important;
  }
  /* .fade.modal-backdrop.show {
    z-index: 0;
    background-color: var(--grey-background);
    opacity: 0;
  } */

}


/* @media only screen and (max-height: 500px) { */
@media only screen and (max-height: 500px) {
  #body {
    display: none;
  }
  #body_mobile {
    /* display: none !important; */
    display: flex !important;
    flex-direction: column !important;
    width: 100vw !important;
    padding: 5vw;
    height: 100vh !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 20px;
    text-align: center;
    z-index: 1000;
  
  }
  .modal-content {
    display: none;
    visibility: hidden;
  }
  .fade.modal.show {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
  #modal_load_project_init {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    animation: none;
    transition: none;
  }
  #modal_load_project_init::after {
    /* TBD ENGLISH */
    content: "Bitte erweitern Sie Ihr Browserfenster, um diese Anwendung anzuzeigen." !important;
    font-size: 20px;
    display:block;
    visibility: visible;
    opacity: 1;
    text-align: center;
  


  }
  .popover {
    display: none;
    visibility: hidden;
  }
  
  /* .fade.modal-backdrop.show {
    z-index: 0;
    background-color: transparent;
    opacity: 0;
  } */
}
p {
  margin: 0rem;
}
#body, #body_outer {
  min-width: 100vw;
  max-width: 100vw;
  min-height: 100vh;
  max-height: 100vh;
  padding: 0rem;
  margin: 0rem;


}

/* Banner */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */

#banner {
  display: flex;
  flex-direction: row;
  height: 100%;
  padding: 0rem;
  margin-left: 0px;
  background-color: inherit;
  color: black;
  border-bottom: 0px solid white; 

  min-width: 100vw !important;
  max-width: 100vw !important;
}

#banner_elements {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  min-height: var(--banner-height) !important;
  max-height: var(--banner-height) !important;

  border-bottom: var(--border-width) solid var(--border-color);
  border-top: none !important;
  /* width: var(--page-content-width) !important; */

  margin-left: var(--tab-width) !important;
  transition: margin-left 0.3s ease-in-out;
  width: 100%;
  /* transition: width 0.3s ease-in-out; */
  /* transition: width 0.3s ease; Adjust the duration and easing as desired */

}

#banner_elements > div {
  margin: 0rem;
  padding: 0rem;
  background-color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  background-color: inherit;
}

#banner_elements > div > Img {
  height: 3vh;

}

#notice {
  position: absolute;
    bottom: 0;
    left: 0;
    
    font-size: calc(0.8 * var(--font-size-button));

    
    margin-bottom: 0vh;
    z-index: 1000;
    color: rgb(62, 61, 61);
    height: calc(var(--notice-height));
    background-color: inherit;
    margin-bottom: 0px !important;
    width: 100%;
    /* pointer-events: none; */
    transition: margin-left 0.3s ease-in-out; /* Smooth width transition */
    background-color: red !important;
    background-color: var(--grey-background) !important;
    background-color: transparent !important;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    margin-top: 0px !important;
    width: var(--page-content-width) !important;
    margin-left: var(--tab-width) !important;
    background-color: blue;
    text-align:left;
 
 

}

#notice_link {
  color: rgb(62, 61, 61) !important;
  padding-left: 0vw !important;

}
#notice_link:hover {
  text-decoration: none;
}

.notice_row {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center;
  align-items: flex-start;
  text-align: left;
  padding-left: 1vw;
}

.notice_row > div {
  width: 100%;
  text-overflow: ellipsis;
  word-wrap: break-word;
  max-width: 1000px;
}
/* 
#app_title {

  display: flex;
  padding: 0rem;
  background-color: inherit;
  margin: 0rem;


  padding-left: 1vw;



} */


#app_title {

  /* font-size: var(--font-size-header); */

  font-family: 'Manrope-Regular' !important;
  margin: 0;
  padding: 0;

  /* Create a gradient and clip it to the text: */
  color: var(--purple-medium);
  padding-left: 1vw;
  /* letter-spacing: 0.08vw; */
  font-size: var(--font-size-button) !important;
  font-size: var(--font-size-header) !important;
  color: black;
}



#testversion_notice {
  font-size: var(--font-size-body);

  padding-left: 1vw;
}



#logo_ocos Img {

  height: calc(0.55 * var(--banner-height));
  margin-left: 0rem;
  margin: 0rem !important;
  padding: 0rem !important;
}

.logo_container {
  margin: 0rem;
  margin-left: 0rem;
  padding-left:0rem !important;

  background-color: inherit;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content:center;
  width: calc(var(--tab-width)) !important;

  text-align: center;
  border-bottom: var(--border-width) solid var(--border-color-tabs) !important;
  min-height: var(--banner-height) !important;
  max-height: var(--banner-height) !important;
  /* padding-left: calc(0.5*var(--tab-width-collapsed) - 0.5 * 0.55 * var(--banner-height)) !important;
  padding-right:0vw !important; */
  transition: width 0.3s ease-in-out; /* Smooth width transition */
  margin: 0rem !important;
  background-color: var(--black) !important;
  border-right: var(--border-width) solid var(--border-color);
  



}
.tab_dividider.no_pad_top {
  height: 0px !important;
}

.container_right_align {
  display:flex;
  flex-direction: row;
  width: 100%;
  align-items: flex-end !important;
  background-color: inherit !important;
  padding-right: 1vw !important;

  align-items: flex-end;
}

#container_right_align_logout {
  display: flex;
  flex-direction: row !important;
  justify-content: flex-end !important;
  align-items: center !important;
}



.container_right_align_dynamic_width, .container_right_align_dynamic_width_tree {
  display:flex;
  
  flex-direction: row;
  width: 100%;
  align-items: flex-end !important;
  background-color: inherit !important;
  padding-right: 0vw !important;


  /* flex: 1; */


  align-items: flex-start !important;
  justify-content: flex-end !important;
  background-color: transparent !important;
}

.horizontal_half_container_wide {
  /* flex: 1; */
  /* flex: 0 0 auto; */
  flex-direction: column;
  width: 200%;
  padding: 0rem !important;
  background-color: transparent;

}



.button_row {

  background-color: inherit !important;
  display: flex;
  flex-direction: row;
}

.button_column {
  background-color: inherit;
  display: flex;
  flex-direction: column;

}


/* Tabs */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */


#tabs_and_page {
  display: flex;
  flex-direction: row;
  margin-top: 0vh;
  margin-left: 0vw;
  margin-right: 0vw;
  justify-content: flex-start;
  align-items:flex-start;
  min-width: 100vw !important;
  max-width: 100vw !important;





}


.tab_container, .tab_container_nocollapse {
  background-color: inherit;
  padding: 0rem;
  margin: 0rem;
  width: 100%;
  margin-top: 0vh;
  border:none;
  margin-bottom: 0vh;
  color: white !important;

}

.tab_container_nocollapse {
  overflow: hidden;
}


.tab_container_nocollapse:disabled {
  pointer-events: none;
  color: var(--border-color-tabs) !important;
}

.tab_container_nocollapse:disabled > div > Img {
  filter: brightness(0) saturate(100%) invert(45%) sepia(5%) saturate(116%) hue-rotate(202deg) brightness(87%) contrast(88%) !important;
  background-color: transparent;
}
.tab_container_selected {

  background-color:#5F415F !important;

}
#div_container_admin, #mailto-link {
  width: 100%;
}

#tabs {
  height: 100vh !important;
  margin-top: calc(-1*var(--banner-height));
  background-color: var(--black);
  
  z-index: 100;

  word-wrap: break-word;

  /* min-height: 90vh !important;
  max-height: 90vh !important; */
  /* display: flex;
  flex-direction: column; */


}

#page_tabs {
  height: 100% !important;
  background-color: inherit !important;

  width: 100%;
  overflow-y: auto;
  background-color: transparent !important;
  margin: 0px !important;
  padding: 0px !important;
  min-height: calc(100vh - var(--banner-height) - var(--notice-height)) !important;
  max-height: calc(100vh - var(--banner-height) - var(--notice-height)) !important;


}

#page_tabs::-webkit-scrollbar {
  width: calc(0.8*var(--scrollbar-width)) !important;
}

#tabs_inner {
  margin-top: 0vh;
  margin-bottom: 0vh;
  margin-left: 0rem;
  margin-right: 0rem;
  background-color: inherit;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  /* background-color:var(--black); */
  width: var(--tab-width);
  height: 100%;

  transition: width 0.3s ease-in-out; /* Smooth width transition */
  min-height: 100vh !important;
  max-height: 100vh !important;
  z-index: 1000 !important;
  
  border-right: var(--border-width) solid var(--border-color);




}

#collapse_sidebar {
  height: var(--banner-height) !important;

  padding: 0rem !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0rem !important;
  border-top: var(--border-width) solid var(--border-color-tabs) !important;
}
/* 

#collapse_sidebar {
  background-color: blue !important;
} */

.divider_between {

  margin-bottom: 0rem;
  border-top: var(--border-width) solid var(--border-color-tabs) !important;
  height: var(--border-width) !important;

  
  z-index: 1000;
  width: 100%;
  margin-top:-0.5vh !important;
  margin-bottom: 1.5vh !important;
}
.dashed_line_divider {
  margin-bottom: 0rem;
  border-bottom: var(--border-width) solid var(--border-color-tabs) !important;
  height: 0.5vh !important;
  z-index: 1000;
  width: 100%;
}

.dashed_line_divider_no_pad {
  margin-bottom: 0rem;
  border-bottom: var(--border-width) solid var(--border-color-tabs) !important;
  height: 0vh !important;
  z-index: 1000;
  width: 100%;
}

.tab_divider {
  margin-bottom: 0.5vh;
  height: 0.5vh !important;
  z-index: 1000;
  width: 100%;
}


.tabelement,.tabelement_nocollapse {
  padding-top: 0px;
  padding-bottom: 0px;
  border: none;
  background-color: inherit;
  text-align: center;
  display: flex;
  flex-direction: row;
  
  align-items: center;
  background-color: inherit;

  margin-top: 0vh;
  margin-bottom: 0vh;
  padding-left: clamp(10px,0.8vw, 10px);
  font-size: calc(1 * var(--font-size-tab)) !important;

  word-wrap:none;
  white-space: nowrap;
  height: calc(1.2*var(--button-height-large));
}

.tabelement Img, .tabelement_nocollapse Img {

  height: var(--tab-img) !important;
  width: var(--tab-img) !important;
  /* width: 1.2vw !important; */
}
.tab_container:hover, .tab_container_nocollapse:hover {
  background-color: var(--purple-light) !important;
}

.tab_container:hover > .tabelement > p, .tab_container_nocollapse:hover > .tabelement > p {
  padding-left: max(0.5vw,15px);
  transition: padding-left 0.3s ease;
}

.tab_container:hover > .tabelement_nocollapse > p {
  padding-left: max(0.5vw,15px);
  transition: padding-left 0.3s ease;
}
.tab_container_nocollapse:hover > .tabelement_nocollapse > p {
  padding-left: max(0.5vw,15px);
  transition: padding-left 0.3s ease;
}


.tab_header {
  padding-left: 10px;
  font-size: var(--font-size-header_small);

  padding-top: 0.4vw;
  padding-bottom: 10px;
  color: var(--border-color-tabs);
  overflow: hidden;
  white-space: nowrap;
  overflow: hidden;
}

.no_pad_top {
  padding-top: 0vw;
  margin-top: 0vw;
}
/* Page */ 
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */


#page {

  background-color: inherit;
  margin-left: 0vw;
  margin-right: 0vw;
  width:100%;
  margin-bottom: 0vh;
  margin-top: 0vh;
  padding: 0rem;
  width: 100% !important;
  height: var(--page-content-height) !important;

  border-bottom: var(--border-width) solid var(--border-color);

}

#page {
  overflow-x: auto !important;
  overflow-y: hidden;
}





#page_content {
  background-color: inherit;
  color: black;
  height: calc(var(--page-content-height) - var(--scrollbar-width)) !important;
  padding: 0vh;
  margin: 0vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;

  width: calc(var(--page-content-width)) !important;
  min-width: var(--min-page-content-width) !important;
  
  border-top: None !important;
  background-color: inherit !important;
  margin-bottom: 0vh !important;
  animation: flyInFromLeft 0.5s ease-in-out !important;  
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-gutter: auto;
  transition: width 0.3s ease-in-out;


}



.tab_text, .tab_text_nocollapse {
  margin: 0px;
  background-color: inherit;
  padding: 0px;
  padding-left: min(10px,0.5vw);
  background: none;

}
.tab_text {
  text-overflow: ellipsis;
  font-size: calc(1 * var(--font-size-tab)) !important;
}



.page_header {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: var(--page-header-buttons) !important;
  background-color: inherit;
  padding: 0vw;
  width: 100% !important;


}



.page_header_horizontal {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: var(--page-header-buttons);
  background-color: inherit;
  padding: 1vh 1vw;
  background-color: inherit;
  animation: flyInFromLeft 0.5s ease-in-out !important;  
  overflow: hidden;


}



.page_subheader_text {
  font-size: var(--font-size-body);
  border-radius: 0px !important;
  padding-right: 5px;



}
.page_body {
  display: flex;
  flex-direction: column;
  width: 100%;

  background-color: inherit;
  padding: 0vw;
  background-color: inherit !important;
  margin-bottom: 0vh;
  animation: flyInFromLeft 0.5s ease-in-out !important;  
  height: calc(var(--page-content-height) - var(--page-header-buttons)) !important;
  overflow: hidden;
}



.margin_right_sidebar {
  padding-right: 13.5vw !important;
  background-color: inherit !important;
}


.page_header_text,.title {
  font-size: calc(1*var(--font-size-header_small));

  font-weight:200;

}







/* SIDEBAR */

.sidebar_and_page_container {
  display: flex;
  flex-direction: row;
  height: calc(var(--page-content-height) - var(--scrollbar-width)) !important;
  margin-bottom: 0vh !important;
  width: 100% !important;

 

  background-color: inherit !important;
  overflow-x: hidden;
  overflow-y: hidden;

  /* height: var(--page-content-height) !important; */

}

.sidebar_and_page_container::-webkit-scrollbar {
  width: var(--scrollbar-width) !important;  /* For vertical scrollbars */
  height: var(--scrollbar-width) !important; /* For horizontal scrollbars */
}
.sidebar {
  background-color: inherit !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: calc(var(--page-content-height) - var(--scrollbar-width)) !important;
  margin: 0px !important;
  padding: 0px !important;
  margin-top: 0vh !important;
  border-left: var(--border-width) solid var(--border-color);
  width: var(--sidebar-width) !important;
  animation: flyInFromRight 0.5s ease-in-out; 
  margin-bottom: calc(-3 * var(--scrollbar-width)) !important;
  box-shadow: none !important;
  

}





/* Reusable Classes */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* BUTTONs */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Layout */
/*–––––––––––––––––––––– */
.button_icon {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;

  height: var(--button-height) !important;
  min-width: var(--button-height) !important;
  width: var(--button-height) !important;

  border: none;
  border-radius: 0px;
  background-color: inherit;
  border-radius: 0vw;

  font-size: var(--font-size-button);
  color: white;
  background-color: inherit;
}


.button_icon Img {
  width: 1.4vw;
  height: 1.4vw;
  height: min(1.4vw, 25px) !important;
  width: min(1.4vw,25px) !important;

  height: var(--button-img) !important;
  width: var(--button-img) !important;
  background-color: transparent;
}


.button_text_only {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: none;
  font-size: var(--font-size-button) !important;

  height: 100%;
  color: white;
  padding:0rem;
  margin: 0rem;
  border-radius: 0px;

  height: var(--button-height) !important;
  background-color: inherit;
  width: clamp(100px, 8.5vw, 140px) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}




.button_text_only_dynamic {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  border: none;

  font-size: var(--font-size-button);
  height: 100%;
  color: white;
  padding:0rem;
  margin: 0rem;
  border-radius: 0px;
  height: var(--button-height)!important;

  background-color: inherit;
  padding-left: 0vw;
  padding-right: 0vw;
  white-space: nowrap;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis !important;
  min-width: 50px !important;
  /* z-index: 1000 !important; */

}
.button_text_only.button_with_background, .button_text_only.button_with_background_light, .button_text_only.button_with_background_super_light {
  background: var(--label-gradient);
}


.button_text_only.red_button {
  background: none;
}

.button_icon_and_text_container {
  display: flex;
  flex-direction: row;
  height: 100%;
  background-color: inherit;
  border: none;
  justify-content: center;
  padding: 0rem !important;
  margin: 0rem !important;
  padding-left: 0.1vw !important;
  padding-right: max(0.5vw,10px) !important;
  border-right: none !important;

  height: var(--button-height) !important;
  overflow: hidden;
  text-overflow: ellipsis !important;
}



.button_left {
  display: flex !important;
  flex-direction: row !important;
  justify-content: flex-start;
  align-items: center;
  height: var(--button-height);
  width: 100%;
  
}

.button_pad {
  padding-left: 0.5vw;
  padding-right: 0.5vw;
}


.button_placeholder {
  display: flex;
  flex-direction: row;
  width: 100%;
}

/* Color */
/*–––––––––––––––––––––– */

/* Colored */

.button_colored_img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(65%) saturate(2067%) hue-rotate(276deg) brightness(92%) contrast(94%);
  height: 1vw !important;
  width: 1vw !important;
  margin-left: 0.5vw;
  margin-right: 0.5vw;


}

.ag-row-even,.ag-row-odd {
  border-top: calc(2*var(--border-with)) solid white !important;
  border-bottom: calc(2*var(--border-with))   solid white !important;
  background-color: var(--table-content) !important;
}

.ag-center-cols-viewport {
  background-color: var(--table-content) !important;
}
.ag-row-even {
  border-bottom: var(--border-with) solid white !important;
}

.icon_white {
  filter: invert(97%) sepia(3%) saturate(11%) hue-rotate(67deg) brightness(104%) contrast(103%);

}

.icon_grey {
  filter: brightness(0) saturate(100%) invert(29%) sepia(84%) saturate(25%) hue-rotate(55deg) brightness(96%) contrast(105%);
  /* #4f4f4f */
}

.button_colored Img {
  filter: brightness(0) saturate(100%) invert(8%) sepia(65%) saturate(2067%) hue-rotate(276deg) brightness(92%) contrast(94%);
}

.button_with_background {
  background-color: var(--purple-dark) !important;
  
}
.button_with_background_light {
  background-color: var(--purple-medium) !important;
}

.button_with_background_super_light {
  background-color: var(--purple-light) !important;
}

.button_hover:hover {
    background-color: var(--purple-light) !important;
    background: var(--purple-light) !important;

  }



.button_hover_medium:hover {
  background-color: var(--purple-medium) !important;
  background: var(--purple-medium) !important;
}

.button_hover_dark:hover {
  background-color: var(--purple-dark) !important;
  background: var(--purple-dark) !important;
}
.button_hover_dark_focus:focus, .button_hover_dark_focus:hover {
  background-color: var(--purple-dark) !important;
  background: var(--purple-dark) !important;
}
.button_hover:disabled {
  background-color: transparent;
  visibility: hidden;
  height: 0vh;
}

.button_hover:disabled:hover {
  background-color: transparent;
}



.button_black_text {
  color: black !important;
}

.red_button {
  background-color: var(--red) !important;
}

.red_button:hover {
  background-color: var(--red-hover) !important;
}
/* Border-Radius */
/*–––––––––––––––––––––– */
.button_radius {
  border-radius: var(--border-radius) !important;

}

.button_radius_left {
  border-top-left-radius: var(--border-radius) !important;
  border-bottom-left-radius: var(--border-radius) !important;
}

.button_radius_right {
  border-top-right-radius: var(--border-radius) !important;
  border-bottom-right-radius: var(--border-radius) !important;
}



/* Border */
/*–––––––––––––––––––––– */

.button_border_right {
  border-right: var(--border-width) solid var(--border-color) !important;
}
.button_border_top {
  border-top: var(--border-width) solid var(--border-color) !important;
}

.button_border_right_colored {
  border-right: var(--border-width) solid var(--purple-dark) !important;
}

.button_border_left {
  border-left: var(--border-width) solid var(--border-color);
  border-color: white !important;
}



.disabled_button_visible {
  pointer-events: none;


}

.disabled_button_visible:hover {
  background-color: transparent;
}

/* AG GRID */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */






.hidden_header_ag {
  visibility: visible;
  color: var(--table-header);
}
.ag-theme-alpine input:focus,
.ag-theme-alpine .ag-input-field-input:focus, .ag-theme-alpine .ag-picker-field-wrapper:focus-within, .ag-date-picker input:focus, .ag-theme-alpine .flatpickr-day.selected,
.ag-theme-alpine .flatpickr-day.startRange,
.ag-theme-alpine .flatpickr-day.endRange {
    outline: none;
    box-shadow: none !important;
    border-color: var(--purple-light) !important;
    box-shadow: 0 0 5px 2px var(--purple-light) !important; /* blue with 20% opacity */
}


.ag-header-cell, .ag-header-group-cell {

  border-left: var(--border-width) solid var(--border-color) !important;

  box-shadow: none !important;
  font-family: 'Manrope-Regular' !important;
}

.ag-pinned-left-header {
  background-color: var(--purple-light) !important;
  border-bottom: var(--border-width) solid var(--border-color) !important;
}

.row-selected-class-ag-grid {
  background-color: var(--purple-light) !important;

}

.hidden-checkbox-ag-grid:before.ag-cell.ag-cell-not-inline-editing.ag-cell-normal-height .g-column-first.center-aligned-cell.ag-cell-value {
  background-color: red !important;
  color: green !important;
}
.center-aligned-header .ag-header-cell-label {
  justify-content: center;
}
.ag-column-first {
  border-left: none !important;
  border-right: none !important;
}


.ag-header-viewport {
  background-color: var(--table-header);

}



.ag_grid_button_cell_container > button, .ag_grid_button_cell_container_img {
  background-color: transparent !important;
  
  width: 100%!important;
  height: auto !important;
  max-width: calc(1*var(--button-img)) !important;
  height: var(--button-img) !important;
  width: calc(1*var(--button-img)) !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  /* padding: 0px !important;
  margin: 0px !important;
  margin: 0px !important;
  padding: 0px !important; */
  padding: 0px !important;

}




.ag_grid_button_cell_container {
  height: 100% !important;


  background-color: transparent !important;

  width: 100%!important;
  display: flex;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  height: var(--button-height) !important;
  max-height: var(--button-height) !important;
  width: var(--button-height) !important;
  max-width: var(--button-height) !important;

  padding: 0px !important;
  border: none !important;

}

.ag_grid_button_cell_container:hover {
  background-color: var(--purple-dark) !important;
}

.ag_grid_button_cell_container:hover > Img {
  filter: invert(97%) sepia(3%) saturate(11%) hue-rotate(67deg) brightness(104%) contrast(103%);
}


.disabled_button_ag_grid:hover > .ag_grid_button_cell_container > Img {
  filter: none !important;
}
.disabled_button_ag_grid:hover, .disabled_button_ag_grid:hover > button {
  background-color: transparent !important;
  cursor: default;
}

/* .ag-body-horizontal-scroll-viewport, .ag-horizontal-right-spacer {
  visibility: visible;

} */
/* .ag-center-cols-viewport {
  overflow: scroll !important;
} */




.selected-row {
  background-color: purple !important;
}

.ag-row-hover {
  background-color: var(--table-row-hover) !important;
  color: black;
}

.ag-root-wrapper {
  border: calc(0*var(--border-width)) solid var(--border-color) !important;
  border-radius: var(--border-radius) !important;
  

    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset !important;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset !important;
            box-shadow:0 1px 4px rgba(0, 0, 0, .6), 0 0 40px rgba(0, 0, 0, 0.1) inset !important;
  border-bottom: none !important;
  border-bottom: none !important;
  font-family: 'Manrope-Regular' !important;
}


.ag-theme-alpine {
  font-family: 'Manrope-Regular' !important;

  --ag-background-color: var(--grey-background) !important;

  --ag-alpine-active-color: var(--purple-medium) !important;
  --ag-row-hover-color: transparent !important;
  --ag-odd-row-background-color: var(--grey-background) !important;
  --ag-selected-row-background-color: transparent !important;
  --ag-border-color: var(--border-color) !important;
  --ag-checkbox-checked-color: var(--purple-medium) !important;
  --ag-range-selection-border-color: transparent !important;
  font-size: var(--font-size-body) !important;


}

.ag-theme-alpine .ag-cell {
  font-size: var(--font-size-body) !important;
  font-family: 'Manrope-Regular';
}
.ag-cell {
  border-bottom: var(--border-width) solid var(--border-color) !important;
  border-left: var(--border-width) dotted var(--border-color) !important;
}

.ag-column-first {
  border-left: none !important;
}


.ag-column-last {
  border-right: var(--border-width) solid var(--border-color) !important;
  border-right: none !important;
}
.ag-header-container {
  background-color: var(--table-header) !important;
  border-right: none !important;

}

.ag-paging-panel {
  background-color: var(--table-header) !important;
  border-top: var(--border-width) solid var(--border-color);
  border-bottom: var(--border-width) solid var(--border-color);
}

.ag-filter-body-wrapper {
  background-color: var(--table-header) !important;
}

.ag-picker-field-display {
  background-color: white !important;
}


.ag-picker-field-wrapper {
  background-color: white !important;
}

.ag-list {
  background-color: white !important;
}

.ag-input-field-input, .ag-text-field-input {
  background-color: white !important;
}

.ag-picker-has-focus {
  box-shadow: none !important;
  border-color: inherit !important;
}



/* CONTAINERS */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */
.dropdown_container_two_thirds {

  background-color: inherit;
  display: flex !important;
  flex-direction: column !important;
  /* justify-content: center !important; */
  align-items: center !important;
  width: 70%;
  margin-bottom: 0vh;
  height: 100% !important;
}

.dropdown_container_full {

  background-color: inherit;
  display: flex !important;
  flex-direction: column !important;
  /* justify-content: center !important; */
  align-items: center !important;
  width: 100%;
  margin-bottom: 0vh;
}

.dropdown_container_half {
  background-color: inherit;
  width: 50%;
  margin-bottom: 0vh;
}
.dropdown_container_half_centered {
  background-color: inherit;
  display: flex;
  flex-direction: row;
  justify-content: center;

  width: 100%;
  margin-bottom: 0vh;
}
.dropdown_container_half_centered > div {
  width: 50%;
}
.dropdown_container_half_centered > input {
  width: 50%;
}


.horizontal_half_container {

  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0rem !important;

}

.centered_text {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}


.centered_element {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.button_row_right_align {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-end;
}

.button_row_center_align {
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: center;
}

.overflow_scroll {
  overflow: scroll;
}




.document {
  background-color: white !important;
  color: black !important;
  width: 100% !important;
  margin-bottom: 0vw !important;
  visibility: visible !important;

  overflow: scroll !important;
  padding: 2vw 2vw !important;
  font-weight:lighter !important;
  font-family: 'Avenir Next LT Pro', sans-serif !important;


  font-size: var(--font-size-body) !important;

  border-radius: var(--border-radius)!important;
  line-height: 1.6 !important;
  font-family: 'Manrope-Regular', sans-serif !important;
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
  word-break:normal !important;
}

.document > pre > code {
  display: none !important;
}
Pre {
  display: block;
  line-height: 1.6 !important;
  font-family: 'Manrope-Regular', sans-serif !important;

  font-size: var(--font-size-body);
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
  word-break:normal !important;

}


.document a {
  text-decoration: none !important;
  color: black !important;
}


/* ANIMATIONS */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */
@keyframes bounce {
  0%, 100% {
      transform: translateY(0);
  }
  50% {
      transform: translateY(-10px); /* Control the height of the bounce */
  }
}


@keyframes process {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}


@keyframes growAndFade {
  0% {
    transform: translateY(100%); /* Start off the screen to the right */
    opacity: 0;
    visibility: hidden;

  }
  30% {
    transform: translateX(0);
    opacity: 1 !important;
    visibility: visible;
  }

  80% {
    transform: translateX(0);
    opacity: 0 !important;
    visibility: visible;
  }
}
/* POPOVERS */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */

.popover {
  font-family: 'Manrope-Regular' !important;
  font-size: var(--font-size-body);
  max-width: 15vw !important; 
  width: max(200px, 15vw) !important;

  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
  !important;
  opacity: 1 !important;
}

.complex_popover {
  padding: 1vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 1005 !important;
  font-family: 'Manrope-Regular';
  text-align: center;
}

.complex_popover > .popover-arrow {
  visibility: visible !important;

}



/* MODAL */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */


.modal-content {
  border-radius: var(--border-radius) !important;
  
  background-color: transparent;
  text-overflow: ellipsis;
}
.modal_header > div  {
  overflow-x: hidden;
  text-overflow: ellipsis;

}
.btn-close {
  background-color: transparent;
  box-shadow: none !important;

  background-color: transparent !important;
  box-shadow: none !important;
  color: white !important;
}
.modal-header {

  background-color: var(--auth-background) !important;
  font-family: 'Manrope-Regular';
  border-top-left-radius: var(--modal-radius) !important;
  border-top-right-radius: var(--modal-radius) !important;
  border-bottom: var(--border-width) solid rgba(0, 0, 0, 0.274);
}

.modal_border_bottom {
  border-bottom-left-radius: var(--modal-radius) !important;
  border-bottom-right-radius: var(--modal-radius) !important;
}


.modal-body {
  border:none;

  border-radius: 0vw;
  margin: 0rem !important;
  padding: 0vw !important;
  background-color: var(--auth-background) !important;
  border-top: none;
  padding: min(2vw,30px) !important;
  max-height: 85vh;
  overflow: visible;


}

#modalbody_change_document_selection, #modalbody_change_document_selection_assistants, #modalbody_change_document_selection_extraction {
  overflow: auto;
}
#ag_grid_knowledge_base_chat {
  height: 50vh !important;
}






.modal-footer {
  background-color: var(--auth-background);
  border: 0px solid white;
  padding: 0rem !important;
  margin: 0rem !important;
  display: flex;
  flex-direction: row;
  width: 100%;
  justify-content: flex-end;
  align-items: flex-end;
  padding: min(1vw,15px) !important;
  /* padding-left: 1vw !important;
  padding-right: 1vw !important;
  padding-bottom: 1vw !important; */
  border-bottom-left-radius: var(--modal-radius) !important;
  border-bottom-right-radius: var(--modal-radius) !important;
  border:none !important;
  background-color: inherit;
  border-top: var(--border-width) solid rgba(0, 0, 0, 0.274) !important;
  background-color: var(--auth-background);
}


.fade.modal.show {
  background-color: #282828d5;
  opacity: 1;
  z-index:1000;
}
.fade.modal.show:has(#modal_load_project_init) {
  background-color: var(--black) !important;
}

.fade.modal-backdrop.show {
  z-index: 0;
  background-color: var(--grey-background);
  opacity: 1;
}

/* SCROLLBAR */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */

::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  background-color:transparent;


}

@-moz-document url-prefix() {
  .scrollbar_visible {
    scrollbar-width: var(--scrollbar-width);
    scrollbar-color: #858484 transparent;
  }
}

::-webkit-scrollbar-thumb {
  /* background: rgba(118,206,217,255);*/
  background-color: #858484 !important;
  opacity: 0;
  opacity: 0 !important;
  


  border-radius: 30px;
  z-index: 1000;
}


::-webkit-scrollbar-corner {
  /*
  background-image: url(resources/corner.png);
  background-repeat: no-repeat;
  */
  background-color: transparent;
  z-index: 1000;
  }


  ::-webkit-scrollbar-track {
    background: transparent !important;
    border:none;
    border-radius: 50px;
    border-color: black;
    z-index: 1000;
  }


  .scrollbar_visible::-webkit-scrollbar {
    width: var(--scrollbar-width) !important;  /* For vertical scrollbars */
    height: var(--scrollbar-width) !important; /* For horizontal scrollbars */
    overflow: auto !important;

}



/* SPECIAL STYLES */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */


.three_d {
  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
  !important

}
.three_d_symmetric
{
    /* position:relative; */
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, .6), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}


/* INPUT FIELDS */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */

.input_field {
  display: flex;
  flex-direction: row;
  align-items: center !important;
  justify-content: center !important;
  width: 100%;
  border: var(--border-width) solid var(--border-color);
  padding-left: 0.5vw;
  font-family: 'Manrope-Regular', sans-serif;
  height: var(--input-field-height) !important;
  
  border: none;

  font-size: var(--font-size-body);
}

.input_field:disabled {
  background-color: white !important;
  color: black !important;
}


/* MARGINS */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */

.margin_right {
  margin-right: 0.5vw !important;
}
.margin_bottom {
  margin-bottom: 0.5vw !important;
}
.half_br {
  height: 0.5vh !important;
}




/* WARNING MESSAGE */


#warning_message, #confirm_message, #error_message {
  position: absolute;
  background-color: var(--red);
  display: flex;
  flex-direction: row;
  color: white !important;
  width: 20vw;
  left: 45vw;
  right: 45vw;
  top: 3vh;
  min-width: 300px;
  padding: 0vw;
  border-radius: var(--border-radius);
  background-color: #fff3cd !important;
  border: var(--border-width) solid #664d03 !important;
  text-align: center;
  z-index:4000 !important;


}


#confirm_message {
  background-color: var(--green) !important;
  border: var(--border-width) solid var(--green-border) !important;
}

#error_message {
  /* background-color: rgb(252, 151, 151) !important;
  border: var(--border-width) solid var(--red-border) !important; */
  width: 40vw;
  left: 35vw;
  right: 35vw;
}



#warning_message_contents, #confirm_message_contents, #error_message_contents {
  display: flex;
  flex-direction: row;
  width: 100%;
  color: var(--gold-border);
  background-color: inherit;
  border-radius: 0vw;
  margin-top: 0.3vw;
  margin-bottom: 0.3vw;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  text-align: left;
}

#confirm_message_contents {
  color: var(--green-border) !important;
}

/* #error_message_contents {
  color: var(--red) !important;
} */




#close_warning_button, #close_confirm_button, #close_error_button {
  height: var(--button-height) !important;
  width: var(--button-height) !important;
  display:flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  border: none;
  background-color: transparent;
}

#close_warning_button > Img, #close_confirm_button > Img, #close_error_button > Img {
  height: var(--button-img);
}

.warning_fade {
  animation: bounce 0.8s linear;
}


p a {
  color: inherit;
  text-decoration: none;
}


/* Sliders */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */

.rc-slider-track {
  background-color: var(--purple-medium);
  padding: 0rem;
  margin: 0rem;
}


.rc-slider-disabled .rc-slider-track {
  background-color: blue;
  padding: 0rem;
  margin: 0rem;
  }
  .rc-slider-rail {
  background-color: #BEBEC3;
  padding: 0rem;
  margin: 0rem;
  
  }


  .rc-slider-handle {
    background-color: white;
    border-color: black;
    border: solid 2px black !important;
    
  }
  
  .rc-slider-handle:active {
    background-color: white;
    border-color: black;
    border: solid 2px black !important;
    box-shadow: none !important;
    
  }
  .rc-slider-handle:hover {
    background-color: white;
    border-color: black;
    border: solid 2px black;
    
  }
  .rc-slider-handle-click-focused:focus {
    background-color: white;
    border-color: black;
    border: solid 2px black;
    
  }
  
  
  .rc-slider-dot-active {
    border-color: white;
  }
  
  .rc-slider-disabled .rc-slider-track {
    background-color: var(--purple-medium) !important;
  }
  
  
  .rc-slider-dot {
    border-color: inherit;
    border:none;
    background-color: inherit;
  }




/* Dropdowns */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* WHEN DROPPED DOWN */
.Select--multi {
  width: 100%;

}
/*
.Select--multi > .Select-control {
  height: 5vh !important;
}
.Select-multi-value-wrapper {
  height: 5vh !important;
} */

.Select {
  height: var(--input-field-height) !important;
}
.Select > div {


  font-size: var(--font-size-body);
}


.Select-control:focus {
  box-shadow: none !important;
  border:none !important;
}

.Select-input {
  height: var(--input-field-height) !important;
}


.dash-dropdown, .Select--single {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  justify-content: center;
  height: var(--input-field-height) !important;
  text-align: left !important;
  background-color: inherit;
 
}

.dash-dropdown {
  height: var(--input-field-height) !important;
  margin: 0px !important;
}
.Select-value-label {
  background-color: inherit !important;
  padding: 0rem !important;
  margin: 0rem !important;
}

.Select-control {
  border: none !important;
  height: 100% !important;
}

.Select-value-icon {
  background-color: white;
  border-color: var(--purple-medium) !important;
  color: var(--purple-medium);
}
.Select-value {
  border-color: var(--purple-medium) !important;
  width: 90%;
  overflow: hidden;
}

/* WHEN DROPPED DOWN */
.Select-multi-value-wrapper, .Select-control, .Select-menu-outer div, .Select-control, .Select-control > span, .Select, .Select-value-label, .Select-clear-zone, .Select.is-focused:not(.is-open) > .Select-control {
  background-color: white;
  color: black;
  font-weight:400;
  border-color: black;
  border-bottom: 1px solid white !important;
  border-radius: 0vw !important;
  
}
/* .Select-control {
  height: var(--input-field-height) !important;
} */

.Select-multi-value-wrapper {
  height: 2vw; /* Adjust this value as needed */
  height: var(--input-field-height) !important;
  background-color: white !important;
  width: 100% !important;
    overflow-y:scroll !important;
    font-family: 'Manrope-Regular', sans-serif !important;

}

.Select-arrow, .Select-arrow-zone {

  background-color: inherit;
}

/*Placeholder*/
.Select--single > .Select-control .Select-value, .Select-placeholder {

  border-radius: 0px;

  cursor: pointer;

}

/*Dropdown arrow + delete button*/
.Select-control, .Select-control > span {
  color: black;
  background: inherit !important;
  height: var(--input-field-height) !important;
}


.Select-value-label {
  color: black !important;
  margin: 0rem !important;
  padding: 0rem !important
}
.Select--single {
  height: var(--input-field-height) !important;
}

.Select-value-label, .Select-placeholder{
  height: 100% !important;
  
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
}


/* 
.Select-placeholder {
  padding 0rem !important
} */

.Select--single>.Select-control .Select-value {
  margin: 0rem !important;
}

/* .Select-control, .Select-multi-value-wrapper, .Select-menu-outer div {
  background-color: #1d9c14;
  border: 2px solid red;

} */

.Select-value {
  background-color: inherit !important;
  border-color: inherit;
}

.Select-value:active, .Select-value > .is-clearable, .Select-value > .is-searchable {
  background-color: inherit !important;
  border-color: inherit;
}


.Select-value {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  flex-direction: row;

}

/* Reorder the label to come after the remove icon */
.Select-value-label {
  order: 2 !important;
}

/* Target the remove icon */
.Select-value-icon {
  order: 0 !important;
  margin-right: 5px; /* Add some spacing between the icon and label */
}



.Select-menu-outer {
  z-index: 1000;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  width: 100% !important;
  margin: 0px !important;
}

/* APP PAGE */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */
#modalbody_load_project_init, #modalbody_load_project,#modalbody_load_project_copy {
  display: flex;
  flex-direction: column;
  align-items: center !important;
  justify-content: flex-start !important;
  


}



.centered_button_stretched {
  width: 100%;
  background-color: inherit;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
#modal_header_load_project_init > .btn-close {
  visibility: hidden !important;
}

.button_row_thirds {

  background-color: inherit !important;
  display: flex;
  flex-direction: row;
  width: 100%;
  padding: 0rem;
  margin: 0rem;
}

/* .fade.modal.show {
  background-color: #282828d5;
  opacity: 1;
  z-index:1000;
} */


.loading {
  display: block;
  padding: 0rem !important;
  margin: 0rem !important;
  height: 100%;
}
/* 
.hljs {
  background-color: transparent !important;
  color: black !important;
  margin: 0rem !important;
  padding: 0rem !important;
  display: block;
  font-family: 'Satoshi-Regular';
  font-weight: 400 !important;
  font-weight: 0.9vw !important;
}

.hljs-keyword {
  color: black !important;
} */
pre {
  background-color: transparent !important;
  border: none !important;
  color: black !important;
  margin: 0rem !important;
  padding: 0rem !important;
  font-family: 'Manrope-Regular';
  font-weight: 400 !important;
  font-weight: 0.9vw !important;
}



.link {
  color: var(--purple-dark) !important;
  font-weight: bold;
  text-decoration: none;
}
.link:hover {
  color: var(--purple-light) !important;
}


/* TABLES PAGE */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */


table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 0px solid #ddd;
	margin-bottom: 1vh;
  }
  
  /* Table header styles */
  table th {
	background-color: var(--purple-light);
	color: white;
	padding: 10px;
	text-align: left;
	border-bottom: 2px solid #ddd;
	font-weight: bold;
  }


  
  /* Rounded edges for header */
  table th:first-child {
	border-top-left-radius: 10px;
  }
  
  table th:last-child {
	border-top-right-radius: 10px;
  }
  
  /* Table row styles */
  table td {
	padding: 10px;
	border-bottom: var(--border-width) solid #ddd;
	border-right: var(--border-width) solid #ddd;
	border-left: var(--border-width) solid #ddd;
  }
  
  /* Accentuation between rows */
  table tr:nth-child(even) {
	background-color: #ededed;
  }


  
  /* Last row styles */
  table tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
  }
  
  table tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
  }




table tr:hover {
	background-color: var(--auth-background);
}



tbody td:last-child {
    border-left: none;
}



/* HEADERS */
/*–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1 {
	margin: 10px 0px 10px 0px;

  font-size: 16px !important;
  
	font-weight: bold;
}
h2 {
	margin: 10px 0px 10px 0px;

  font-size: 15px !important;
	font-weight: bold;
}
h3 {
	margin: 10px 0px 10px 0px;

  font-size: 14px !important;
	font-weight: bold;
}
h4 {
	margin: 10px 0px 10px 0px;

  font-size: var(--font-size-body) !important;
	font-weight: bold;
}

h5 {
	margin: 10px 0px 10px 0px;
 
  font-size: 13px !important;
  font-size: var(--font-size-body) !important;
	font-weight: bold;
}


/* SPINNERS */

#page_body_knowledge_base > :nth-child(3) {
  display: flex;
  flex-direction: column;
  height: var(--page-content-height) !important;

  background-color: inherit;

}

/* LOADING Screen */
.custom_spinner, .custom_spinner_white {
  height: calc(1.5*var(--button-height)) !important;
  
  background-color: transparent !important;
  width: calc(1.5*var(--button-height)) !important;
  background-image: url("spinner_logo.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;

  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0rem !important;
  padding: 0rem !important;
  padding: 0vh !important;

  padding: 0px !important;
  z-index: 1000 !important;


}

.custom_spinner_icon {
  height: calc(var(--button-height)) !important;
  
  background-color: transparent !important;
  width: calc(var(--button-height)) !important;
  background-image: url("spinner_logo.png") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;

  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0rem !important;
  padding: 0rem !important;
  padding: 0vh !important;

  padding: 0px !important;
  z-index: 1000 !important;

}



.custom_spinner::after, .custom_spinner_icon::after, .custom_spinner_white::after {
  visibility: hidden;
}


.spinner-border {
  --bs-spinner-animation-speed: 1s !important;
  border-width: 1.3px;
  color: var(--purple-dark);

}
.custom_spinner_white {

  background-image: url("spinner_logo.png") !important;
  filter: invert(97%) sepia(3%) saturate(11%) hue-rotate(67deg) brightness(104%) contrast(103%);
  color: black !important;

}


.custom_spinner *, .custom_spinner_icon *, .custom_spinner_white * {
  display: none !important;
}

.spinner {
  width: 10px !important;
  height: 10px !important;
}


textarea:focus {
  outline: none !important;
  
}

textarea {
  border: none;
  padding-left: 0.5vw !important;
  padding-left: 0.5vw !important;
  padding-right: 0.5vw !important;
  padding: 0.5vw !important;
}

.one_vh_placeholder {
  height: 1vh !important;
  min-height: 1vh !important;
}

#modal_open_extraktionen {
  overflow: hidden;

  /* max-height: 70vh !important; */
}


#feedback_load_project_copy {
  text-align: center;
  margin-top: 2vh !important;
}
@keyframes flyInFromLeft {
  0% {
    transform: translateX(-100%); /* Start off-screen to the left */
    opacity: 0; /* Optional: start with the element being invisible */
  }
  100% {
    transform: translateX(0); /* End at the original position */
    opacity: 1; /* Optional: fully visible */
  }
}

@keyframes flyInFromRight {
  0% {
    transform: translateX(100%); /* Start off-screen to the right */
    opacity: 0; /* Optional: start with the element being invisible */
  }
  100% {
    transform: translateX(0); /* End at the original position */
    opacity: 1; /* Optional: fully visible */
  }
}

@keyframes flyInFromBottom {
  0% {
    transform: translateY(100%); /* Start off-screen at the bottom */
    opacity: 0; /* Optional: start with the element being invisible */
  }
  100% {
    transform: translateY(0); /* End at the original position */
    opacity: 1; /* Optional: fully visible */
  }
}

.fly-in-bottom {
  animation: flyInFromBottom 0.5s ease-out; /* 1s duration, ease-out timing function */
  opacity: 1; /* Ensure the element is visible at the end of the animation */
}



@keyframes borderAnimation {
  0% {
      border: var(--border-width) solid transparent;
      border-top-color: var(--purple-dark);
  }
  25% {
      border: var(--border-width) solid transparent;
      border-right-color: var(--purple-dark);
  }
  50% {
      border: var(--border-width) solid transparent;
      border-bottom-color: var(--purple-dark);
  }
  75% {
      border: var(--border-width) solid transparent;
      border-left-color: var(--purple-dark);
  }
  100% {
      border: var(--border-width) solid transparent;
      border-top-color: var(--purple-dark);
  }
}    

@keyframes glow-border {
  0% {
    border-color: var(--purple-dark);
    box-shadow: 0 0 2.5px var(--purple-dark), 
                0 0 5px var(--purple-dark), 
                0 0 7.5px var(--purple-dark), 
                0 0 10px var(--purple-dark);
  }
  50% {
    border-color: var(--purple-medium);
    box-shadow: 0 0 5px var(--purple-medium), 
                0 0 10px var(--purple-medium), 
                0 0 15px var(--purple-medium), 
                0 0 20px var(--purple-medium);
  }
  100% {
    border-color: var(--purple-light);
    box-shadow: 0 0 2.5px var(--purple-light), 
                0 0 5px var(--purple-light), 
                0 0 7.5px var(--purple-light), 
                0 0 10px var(--purple-light);
  }
}


.border-animation {
  display: inline-block;
  padding: 0vw 0vw;
  border-left: var(--border-width) solid transparent;
  border-radius: calc(0.5*var(--border-radius));
  animation: glow-border 1s ease-in-out;
  background-color: transparent;
  overflow: hidden;
  width: 100% !important;
  background-color: yellow !important;
  margin:-1vh -1vw !important;
  padding: 1vh 1vw !important;
}

/* .border-animation > Pre > Span{
  background: yellow !important;
}

.border-animation > span {
  border-radius: var(--border-radius);
  background-color: white !important;

} */

.border-animation > .markdown_highlight_knowledge_table > div > table {

  margin: -0vw 0vw 0vw 0vw;
  padding-right: 0vw !important;
  padding-right: 0vw !important;
  width: calc(100%) !important;
}

.fade-in {
  opacity: 0; /* Start fully transparent */
  animation: fadeInAnimation 1s forwards; /* Apply the animation */
}

@keyframes fadeInAnimation {
  to {
      opacity: 1; /* End fully visible */
  }
}
.hr {
  display: flex;
  flex-direction: row;
  width: 100%;
}


#client_logo {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  height: 100% !important;
  width: 20% !important;
}

#client_logo > Img {
  height: 70% !important;
}
#header_init {
  text-align: center !important;
}

/* #collapse_sidebar_button {
  filter: brightness(0) saturate(100%) invert(63%) sepia(0%) saturate(159%) hue-rotate(194deg) brightness(89%) contrast(83%);
} */

#collapse_sidebar_button {
  background-color: var(--purple-medium) !important;
}

#collapse_sidebar_button:hover {
  filter: none;
}



.rotate-image {
  transition: transform 0.3s ease; /* Adjust the duration and easing as desired */
  transform: rotate(-180deg);
}

.rotate-image2 {
  transition: transform 0.3s ease; /* Adjust the duration and easing as desired */
  /* transform: rotate(180deg); */
}




#collapse_sidebar {

  width: var(--tab-width);
  display: flex;
  flex-direction: row;
  justify-content: center;
  /* display: none; */


  align-items: flex-end;
  margin-top: 1vh;
  transition: width 0.3s ease-in-out; /* Smooth width transition */
  
}


#collapse_sidebar > button {
  width: min(2vw,40px) !important;
  height: min(2vw,40px) !important;

  width: var(--button-height) !important;
  
  height: var(--button-height) !important;

  width: calc(0.55 * var(--banner-height)) !important;
  height: calc(0.55 * var(--banner-height)) !important;

  display: flex;
  flex-direction: column;
  justify-content: center !important;
  background-color: var(--grey-background) !important;
  border: none;
  align-items: center !important;
  border-radius: var(--border-radius);
  


}

#drag_container_extraktionen, #drag_container {
        
  /* min-width: 92vw !important;
  max-width: 92vw !important; */
  width: calc(100vw - var(--tab-width-collapsed) - 0.1vw - 1.9vw) !important;


}

#collapse_sidebar > button:hover {
  background-color: var(--purple-light) !important;
}
#collapse_sidebar > button > Img {
  width: calc(0.55 * 0.7* var(--banner-height)) !important;
  /* width: var(--button-img) !important; */
  aspect-ratio: 1 !important;

}
#collapse_sidebar > button::before {
  background-color: (0, 0, 0, 0.9) !important;
}

#logout_popover {
  text-align: center;
}

.active.nav-link {
  background-color: var(--purple-light) !important;
  color: white !important;
  border-bottom: var(--border-width) solid white !important;
}

.ag-body-horizontal-scroll-viewport {
  height: 100% !important;
}
.ag-body-horizontal-scroll-viewport::-webkit-scrollbar {
  width: var(--scrollbar-width) !important;
  height: var(--scrollbar-width) !important;
  background-color:transparent;
}


.ag-body-vertical-scroll-viewport::-webkit-scrollbar {
  width: var(--scrollbar-width) !important;
  height: var(--scrollbar-width) !important;
  background-color:transparent;
}

pre {
  border-radius: 0px !important;
}

#current_project {
  padding-top:0vh;
  margin-right: 0.5vw;
  font-size: var(--font-size-button);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;

}

/* 
#tab_container_process_amanagement Img {

} */

#tab_container_process_amanagement Img {

  height: var(--tab-img) !important;
  width: var(--tab-img) !important;
  /* width: 1.2vw !important; */
}

.popover_dropdown_menu {
  width: clamp(200px, 15vw,250px) !important;
  min-width: 200px !important;
  margin: 0rem;
  padding: 0rem;
  border-radius: 0px !important;
  background-color: var(--black) !important;

  border: var(--border-width) solid var(--border-color);
  border-left: none;
}



.tab_container_no_pad{
  margin-bottom: 0px !important;
}


.header_and_body_tree_settings {
  border-right: none !important
}

.text_colored_green {
  color: var(--green)
}

/* COLLAPSING BUTTONS */
@media only screen and (max-width: 1200px) {



  .horizontal_half_container_wide {
    width: 200%;

  } 
  

  .button_hide_responsive {
    display: none !important;
    padding-right: 0vw !important;
  }

  .button_hide_responsive_large {
    padding-right: 0vw !important;
    padding-left: 0vw !important;
  }



  #add_element_button > div, #delete_element_button > div, #save_load_button_tree > div {
    display: none !important;
    width: 100% !important;
  }

  #add_element_button, #delete_element_button, #save_load_button_tree {

    width: 6vw !important;
  }

  .container_right_align_dynamic_width {
    width: 16vw;
    
  }
  .container_right_align_dynamic_width_tree {
    width: 50vw; 
    background-color: inherit !important;
  }
  .page_header_horizontal_short_tree {
    width: 100%;
  }



  .text_hide_textbausteine {
      display: none !important;
      padding: 0rem !important;
      margin: 0rem !important;
  }
  #textbausteine_view_button, #template_view_button {
      width: var(--button-height) !important;
  }

  #save_alle_textbaustein.button_icon_and_text_container, #load_textbausteine.button_icon_and_text_container, #empty_textbaustein.button_icon_and_text_container, #filter_textbaustein.button_icon_and_text_container, #textbausteine_view_button.button_icon_and_text_container, #template_view_button.button_icon_and_text_container {
      padding: 0rem !important;
  }

  #container_view_textbausteine {
      
      margin-right: calc(-1*var(--button-height) - 0.5 * var(--border-width)) !important;
    }


}


.br_placeholder {
  min-height: 4vh !important;
  max-height: 4vh !important;
  margin-bottom: 1vh !important;
}


.scrollbar_horizontal {
  overflow-x: auto;
  overflow-y: hidden;
}
.scrollbar_horizontal::-webkit-scrollbar {
  width: var(--scrollbar-width) !important;  /* For vertical scrollbars */
  height: var(--scrollbar-width) !important; /* For horizontal scrollbars */
}

@media only screen and (max-width: 800px) {
  #app_title, .page_header_text {
    font-size: var(--font-size-body) !important;
  }

}


.center-aligned-cell {
  display: flex !important;
  flex-direction: row !important;
  height: 100% !important;
  width: 100%;
  text-align: center;
  justify-content: center !important;
  align-items: center !important;
  background-color: inherit !important;

  margin: 0rem !important;
  padding: 0px !important;

}

.center-aligned-cell > button {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  justify-content: center !important;
  align-items: center !important;
}


code {

  border-radius: var(--border-radius) !important;
  background-color: rgb(244, 244, 244);
  border: var(--border-width) solid var(--border-color) !important;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow:    0 1px 3px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
box-shadow:         0 1px 3px rgba(0, 0, 0, 0.3), 0 0 10px rgba(0, 0, 0, 0.1) inset;
  overflow: hidden;
  padding: 2px 5px;
  margin: 2px 3px !important;
  border: none !important;
  font-family: Consolas, 'Courier New', monospace

}


/* Datei: assets/style.css */
/* Datei: assets/style.css */


.tippy-box[data-theme~='custom_tooltip_tippy'] {
  background-color: white !important;
  color: black !important;
  border: 1px solid white !important;
  font-family: 'Manrope-Regular' !important;
  font-size: var(--font-size-body) !important;

  border-radius: var(--border-radius) !important;

  box-shadow:
  0 2.8px 2.2px rgba(0, 0, 0, 0.034),
  0 6.7px 5.3px rgba(0, 0, 0, 0.048),
  0 12.5px 10px rgba(0, 0, 0, 0.06),
  0 22.3px 17.9px rgba(0, 0, 0, 0.072),
  0 41.8px 33.4px rgba(0, 0, 0, 0.086),
  0 100px 80px rgba(0, 0, 0, 0.12)
  !important;

  max-width: 60vw !important;
  text-align: left;
  padding: 0.5rem !important;
  opacity: 1;
  color: black !important;
  text-overflow: hidden !important;

}

/* Move overflow control to the content area */
.tippy-box[data-theme~='custom_tooltip_tippy'] .tippy-content {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.tippy-box[data-theme~='custom_tooltip_tippy'] .tippy-arrow {
  display: block !important; /* Force arrow visibility */
}

.tippy-box[data-theme~='custom_tooltip_tippy'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: white;
  
}
.tippy-box[data-theme~='custom_tooltip_tippy'][data-placement^='bottom'] > .tippy-arrow::before {
  border-bottom-color: white;
}
.tippy-box[data-theme~='custom_tooltip_tippy'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: white;
}
.tippy-box[data-theme~='custom_tooltip_tippy'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: white;
}

strong, h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  font-family: 'Manrope-SemiBold', sans-serif;
}


.disabled_button_styled:disabled {
  visibility: visible !important;
  background-color: lightgray !important;

}
.disabled_button_styled:disabled > Img {
  filter: brightness(0) saturate(100%) invert(29%) sepia(84%) saturate(25%) hue-rotate(55deg) brightness(96%) contrast(105%);
}
.disabled_button_styled:disabled:hover {
  background-color: lightgray !important;

}

textarea {
  color: black !important;
  background-color: white;
}

input {
  color: black !important;
  background-color: white;
}


.br {
  min-height: 15px;
  height: 15px;
  background-color: transparent !important;
}


/* 
.fade.modal.show > div {
  max-width: 100vh !important;
  overflow: auto;
}
.modal-dialog {
  display: flex !important;
  flex-direction: row !important;
  width: 100vw !important;
  height: 100vh !important;
  justify-content: center !important;
  align-items: center !important;
  margin: 0px !important;
  padding: 0px !important;
} */



.dash-input:disabled, .dash-dropdown >.is-disabled > div,.dash-dropdown >.is-disabled > .Select-control > .Select-multi-value-wrapper, .dash-dropdown >.is-disabled, .dash-dropdown >.is-disabled > .Select-control, .dash-dropdown >.is-disabled > .Select-control, .dash-dropdown >.is-disabled > .Select-control > .Select-arrow-zone, .dash-dropdown >.is-disabled, .dash-dropdown >.is-disabled > .Select-control, .dash-dropdown >.is-disabled > .Select-control > .Select-multi-value-wrapper > .Select-value > .Select-value-label {
  background-color: var(--grey-background) !important;
  border-color: var(--grey-background) !important;
}

.document Img {
  display: none;
}


/* 
.button_hover:hover > button > img, .button_hover:hover > div > img {

background-color: transparent !important;

transform: rotate(360deg);

  }

.button_hover > button > img, .button_hover:hover > div > img {
  transition: transform 0.3s ease;
}


.button_hover_dark:hover > button > img, .button_hover_dark:hover > div > img {

background-color: transparent !important;

transform: rotate(360deg);

  }

.button_hover_dark > button > img, .button_hover_dark:hover > div > img {
  transition: transform 0.3s ease;
}


.button_hover_medium:hover > button > img, .button_hover_dark:hover > div > img {

background-color: transparent !important;

transform: rotate(360deg);

  }

.button_hover_medium > button > img, .button_hover_medium:hover > div > img {
  transition: transform 0.3s ease;
} */


mjx-table {
  font-family: "Manrope-Regular";
  font-size: var(--font-size-body)
}


.hide_when_disabled:disabled {
  display: none !important;
}

.notifier-note {
    display: none !important;
}

#symbol, .modebar-btn.plotlyjsicon.modebar-btn--logo {
  display: none !important;
  pointer-events: none !important;
}



/* POPOVER FIXES */
.popover, .complex_popover {
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.popover.fade:not(.show), .complex_popover.fade:not(.show) {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease-out, visibility 0.3s ease-out !important;
  transition-delay: 0.2s !important; 
}


.popover.fade, .complex_popover.fade {
  transition: opacity 0.3s ease-out 0.3s, visibility 0.3s ease-out 0.3s !important;
}


.popover:not(:focus-within), .complex_popover:not(:focus-within) {
    opacity: 0;
    visibility: visible;
    transition-delay: 0.2s !important; 
}