/* Customize the label (the container) */
.container {
  display: block;
  position: relative;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Hide the browser's default checkbox */
.container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 25px;
  width: 25px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.container .checkmark:after {
  left: 9px;
  top: 5px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

/* Small checkbox */
.small-checkbox {
  transform: scale(0.2);
}

.projects-quadrant-departure{
  /* border-width: 1px; */
  /* border-color: #008000; */
  /* border: solid green; */
  color: #70be74;
  padding: 0px 5px;
}


.projects-quadrant-return{
  /* border-width: 1px;
  border: solid red; */
  color: #e55858;
  padding: 0px 5px;

}
/* Segmented control */
.segmented-control {
  display: flex;
  justify-content:center;
  margin: 0px !important;
  padding: 0px !important; 
  background-color: #fafafa !important;
  border-radius: 15px !important; /* Add rounded corners to the selected label */

  }

  .segmented-control input[type="radio"] {
  display: none;

  }

  .segmented-control label {
    display: block;
    padding: 5px 10px;
    cursor: pointer;
    text-align: center;
    flex-grow: 1;
    font-size: 13px;
    margin: 0px !important;

  }

  .segmented-control label.small {
    font-size: 12px !important;
    width: 120px !important;
    min-width: 80px !important;
    max-width: 120px !important;
    padding: 2px 5px !important;
  }
  
  .segmented-control input[type="radio"]:checked + label {
  background-color: var(--header-color);
  color: #fff;
  border-radius: 15px; /* Add rounded corners to the selected label */
  font-weight: bold; /* Make the label bold when checked */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  width: 150px !important;

  }
  .segmented-control input [type="radio"]:checked + label {
    /* background-color: #7ca6c2; */
    /* color: #fff; */
    /* border-radius: 15px; Add rounded corners to the selected label */
    /* font-weight: bold; Make the label bold when checked */
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); */
    width: 80px !important;
  
    }
/* Segmented control */
.segmented-control-title{
  display: flex;
  margin: 0px 0px;
  }

  .segmented-control-title input[type="radio"] {
  display: none;

  }

.segmented-control-title label {
  color: #ccc;
  white-space: pre;
  text-align: left;
  font-size: 17px !important;
  margin: 5px !important;
  padding: 0px !important;
}

.segmented-control-title input[type="radio"]:checked + label {
color: #467797;
font-weight: bold; /* Make the label bold when checked */
}

.small-segment{
  font-size: 12px !important;
  padding: 2px 5px !important;
  width: 110px !important;
  min-width: 110px !important;
  max-width: 110px !important;
}
.lightest{
  background-color: aliceblue !important;
}

.lighter{
  background-color: #7ca6c2 !important;
}

.default{
  background-color: #467797 !important;
}

.font-10{
    font-size: 14px !important;
}
.font-10-bold{
    font-size: 14px !important;
    font-weight: bold;
    text-align: left;
}

.default-text{
  font-size: 16px !important;
  color: white !important;
  font-weight: bold;

}

.border-container{
    border: solid 1px #ccc !important;
    padding-left: 2px !important;
    background-color:  #ece4e4e3;
    
}
.border-container-head{
    border: solid 1px #ccc !important;
    padding-left: 2px !important;
    background-color: #7ca6c2;
    text-align: left;
}
.collapsible-body {
    padding-top: 0px !important;
}

/* Your custom checkbox styling */
.custom-checkbox {
  position: relative;
  display: inline-block;
  width: 12px; /* Set the width of the square container */
  height: 12px; /* Set the height of the square container */
}

.custom-checkbox input[type="checkbox"] {
  opacity: 0;
  position: absolute;
}

.custom-checkbox span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* box-sizing: border-box; */
  /* border: 2px solid #26a69a; */
  /* border-radius: 3px; */
}

.custom-checkbox input[type="checkbox"]:checked + span:before {
  content: "";
  position: absolute;
  top: -5px; /* Adjust the top position to center the checkmark vertically */
  left: 3px; /* Adjust the left position to center the checkmark horizontally */
  width: 8px; /* Set the width of the checkmark */
  height: 20px; /* Set the height of the checkmark */
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #26a69a;
  border-bottom: 2px solid #26a69a;
  transform: rotate(40deg);
  backface-visibility: hidden;
  transform-origin: 100% 100%;
}

  /* Custom table cell */
.hover-td-cell{
  cursor: pointer;
}

  
.collapsible {
  border-top: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  margin: 0rem 0 0rem 0; }

.collapsible-header-expanded {
  display: flex;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  line-height: 5px !important;
  padding: 5px !important;
  background-color: #fff;
  border-bottom: 1px solid #ddd; 

}
  .collapsible-header:focus {
    outline: 0; }
  .collapsible-header i {
    width: 2rem;
    font-size: 1.6rem;
    display: inline-block;
    text-align: center;
    margin-right: 1rem; }

.keyboard-focused .collapsible-header:focus {
  background-color: #eee; }

.collapsible-body {
  display: none;
  border-bottom: 1px solid #ddd;
  box-sizing: border-box;
  padding: 0px !important;
  padding-bottom: 0px !important;
  padding-top: 0px !important;
}

.rounded-blue-btn, .rounded-red-btn, .rounded-green-btn, .rounded-gray-btn, .rounded-darkgreen-btn, .rounded-darkblue-btn, .rounded-darkgray-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  /* width: 32px !important; Adjust the size as needed */
  /* height: 32px !important; Adjust the size as needed */
  border-radius: 50% !important;
  color: white !important; /* Change the text color as needed */
  text-decoration: none !important;
  font-size: 24px !important; /* Adjust the font size as needed */
  transition: background-color 0.3s ease !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important; /* Add an inset shadow inside the border */
}
.large-btn {
  /* font-size: 36px !important; Set the font size to 36px */
  height: 32px !important;
  width: 32px !important;
}

.rounded-green-btn {
  background-color: #A5D6A7 !important; /* Change the background color as needed */
}

.rounded-darkgreen-btn {
  background-color: #70be74 !important; /* Change the background color as needed */
}

.rounded-darkblue-btn {
  background-color: #467797 !important; /* Change the background color as needed */
}

.rounded-darkgray-btn {
  background-color: gray !important; /* Change the background color as needed */
}
.rounded-red-btn {
  background-color: #F48FB1 !important; /* Change the background color as needed */
}

.rounded-blue-btn {
  background-color: #7ca6c2 !important; /* Change the background color as needed */
}

.rounded-blue-btn {
  background-color: #7ca6c2 !important; /* Change the background color as needed */
}

.rounded-gray-btn {
  background-color: #ccc !important; /* Change the background color as needed */
}

.rounded-blue-btn:hover {
  background-color: #467797 !important; /* Change the hover background color as needed */
}

.rounded-red-btn:hover {
  background-color: red !important; /* Change the hover background color as needed */
}

.rounded-green-btn:hover {
  background-color: #70be74 !important; /* Change the hover background color as needed */
}

.rounded-darkgreen-btn:hover {
  background-color: #A5D6A7 !important; /* Change the hover background color as needed */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important; /* Add an inset shadow inside the border */
}

.rounded-darkblue-btn:hover {
  background-color: gray !important; /* Change the hover background color as needed */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important; /* Add an inset shadow inside the border */
}
.rounded-gray-btn:hover {
  background-color: gray !important; /* Change the hover background color as needed */
}

.rounded-darkgray-btn:hover {
  background-color: #ccc !important; /* Change the hover background color as needed */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important; /* Add an inset shadow inside the border */

}
.rounded-green-btn i, .rounded-red-btn i, .rounded-blue-btn i, .rounded-gray-btn i, .rounded-darkgreen-btn i, .rounded-darkblue-btn i, .rounded-darkgray-btn i {
  padding: 0 !important; /* Adjust the padding to zero to match your example */
}

.icon-left {
  margin-right: -5px !important; /* Adjust the negative margin for the left icon */
}

.icon-right {
  margin-left: -5px !important; /* Adjust the negative margin for the right icon */
}

.icon-center {
  margin: 0px !important; /* Adjust the negative margin for the right icon */
}

.shadowed-blue-btn, .shadowed-red-btn, .shadowed-green-btn, .shadowed-gray-btn, .shadowed-tan-btn  {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: default !important;
  /* width: 32px !important; Adjust the size as needed */
  /* height: 32px !important; Adjust the size as needed */
  border-radius: 0px !important;
  color: white !important; /* Change the text color as needed */
  text-decoration: none !important;
  font-size: 24px !important; /* Adjust the font size as needed */
  transition: background-color 0.3s ease !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5) !important; /* Add an inset shadow inside the border */
}


.shadowed-green-btn {
  background-color: #A5D6A7 !important; /* Change the background color as needed */
}

.shadowed-red-btn {
  background-color: #F48FB1 !important; /* Change the background color as needed */
}

.shadowed-blue-btn {
  background-color: #7ca6c2 !important; /* Change the background color as needed */
}
.shadowed-gray-btn {
  background-color: #ccc !important; /* Change the background color as needed */
}

.shadowed-tan-btn {
  background-color: tan !important; /* Change the background color as needed */
}

.shadowed-blue-btn:hover {
  background-color: #467797 !important; /* Change the hover background color as needed */
}

.shadowed-red-btn:hover {
  background-color: red !important; /* Change the hover background color as needed */
}

.shadowed-green-btn:hover {
  background-color: #70be74 !important; /* Change the hover background color as needed */
}
.shadowed-gray-btn:hover {
  background-color: gray !important; /* Change the hover background color as needed */
}

.shadowed-tan-btn:hover {
  background-color: #d2c68c !important; /* Change the hover background color as needed */
}
.shadowed-green-btn i, .shadowed-red-btn i, .shadowed-blue-btn i, .shadowed-gray-btn i, .shadowed-tan-btn i{
  margin: 0 !important; /* Adjust the margin to zero to match your example */
  padding: 0 !important; /* Adjust the padding to zero to match your example */
  font-size: 16px !important;
}

.tooltiped-modal {
  z-index: 9999999 !important;
}

.material-icons-middle{
  padding-top: 5px !important;
  padding-left: 2px !important;
  padding-right: 2px !important;
  vertical-align: middle !important;
    }

.switch-1 label input[type=checkbox]:checked+.lever {
  background-color: rgb(207, 233, 255);
}
.switch-1 label input[type=checkbox]:checked+.lever:after {
  background-color: #7ca6c2;
}

.switch-2 label input[type=checkbox]:checked+.lever {
  background-color: #7ca6c2;
}
.switch-2 label input[type=checkbox]:checked+.lever:after {
  background-color: #467797;
}

.px-titles{
  font-family: "Open Sans", verdana, arial, sans-serif;
  font-size: 17px;
  color: #2a3f5f;
  opacity: 1;
  font-weight: normal;
  white-space: pre;
}

.section-title{
  font-size: 24px;
  color: var(--text-color);
  padding-bottom: 5px;
  margin-bottom: 0px;
  height: min-content !important;
}

.section-title.lined{
  border-bottom: 2px solid silver;

}
.divider {
  height: 100%;
  width: 1px;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.tiny-checkbox [type="checkbox"] + span:not(.lever)::before {
  /* Unchecked box */
  width: 13px !important; /* Adjust the width for the unchecked box */
  height: 13px !important; /* Adjust the height for the unchecked box */
  margin-top: 7px !important;
}

.tiny-checkbox [type="checkbox"]:checked + span:not(.lever)::before {
  /* Checked box */
  width: 8px !important; /* Adjust the width for the checked box */
  height: 14px !important; /* Adjust the height for the checked box */
  margin-top: 10px !important;
}

.tiny-checkbox [type="checkbox"] + span:not(.lever)::after {
  top: 2px; /* Adjust the position if needed */
  padding: 0px !important;

}

.tiny-checkbox [type="checkbox"] + span:not(.lever) {
  /* Span text */
  font-size: 13px; /* Adjust the font size */
  padding-left: 5px !important;
  margin-left: 0px !important;

}
/* THIS WHEN THERE IS TEXT AND WANT TO DISPLAY THE CHECBOX ON THE LEFT */
.tiny-checkbox.left-style [type="checkbox"] + span:not(.lever)::before {
  margin-left: -15px;
}
.h-box {
  padding: 0px 5px !important;
}

.v-box {
  padding: 5px 0px !important;
  margin: 0px !important;
  height: 100%;
}

.v-bottom-box {
  padding: 5px 0px 0px 0px !important;
  margin: 0px !important;
}

.hv-box{
  padding: 5px 5px !important;
  margin: 0px !important;
}

.v-box-larger{
  padding: 10px 0px 0px 0px !important;
  margin: auto !important;
}

.v-expand{
  display: flex; 
  flex-grow: 1; 
}

/* Styles for mobile devices */
.middle-box {
  padding-left: 7px !important;
  padding-right: 7px !important;
}

/* Remove padding for mobile devices (screen width <= 600px) */
@media only screen and (max-width: 600px) {
  .middle-box {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

.raw-pad {
  padding: 0px !important;
  margin: 0px !important;
}

.h{
  height: 100%;
}

.v{
  width: 100%;
}

/* Slider */
#project-slider {
  height: 10px;
  }

#project-slider .noUi-connect {
    background: #7ca6c2;
}

#project-slider .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px; /* half the width */
    border-radius: 9px;
}

/* Slider adjust format to be tighten */
.noUi-value-horizontal{
  font-size: smaller;
  top: 18% !important

}
.noUi-marker-horizontal{
  height: 5px !important;
}
.noUi-tooltip{
  font-size: smaller;
  border: 0px !important;
  background-color: transparent !important;
  padding-bottom: 0px !important;
  color: #9e9e9e !important;
}

.noUi-handle::after{
  height: 0px !important;
  width: 0px !important;
  background: transparent !important;
}
.noUi-handle::before{
  height: 0px !important;
  width: 0px !important;
  background: transparent !important;
}


.legend-container {
  display: flex;
  overflow-x: auto;
  padding-left: 10px !important;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-right: 10px; /* Adjust margin as needed */
}

.color-box {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  margin-top: 3px;
}

/* Slider */
#modal-slider {
  height: 10px !important;
  }

.noUi-connect {
    background: #7ca6c2 !important;
}

.noUi-handle {
    height: 18px !important;
    width: 18px !important;
    top: -5px !important;
    right: -9px !important; /* half the width */
    border-radius: 9px !important;
  
}
.noUi-pips-horizontal {
  height: 25px !important;
}

input[type="text"]:not(.browser-default){
  height: 2rem !important;
  background-color: white !important;
}

input[type="password"]:not(.browser-default){
  height: 2.5rem !important;
  background-color: white !important;
}

.bordered {
  border: 1px solid silver;
}

.gray-placeholder::placeholder {
  color: gray !important;
}

.custom-toast {
    background-color: #467797;
    color: #fff; 
    font-weight: bold;
  }

.organigram-title {
    font-size: large !important;
    color: white !important;
    background-color: #7ca6c2 !important;
    margin: 0 !important;
    padding: 0 !important;
    justify-content: space-between !important;
    display: flex !important;
}

/* Modal input */

.collapsible-white-header {
  font-size: 17px;
  margin-left: 10px;
  margin-bottom: 3px;
  color: white;
  white-space: nowrap;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 45px);
  grid-template-rows: repeat(2, 33px); 
  margin: 0px !important;
  padding: 2px !important;
  border-radius: 20px !important;

}

.grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%; 
  height: 100%; 
  margin: 0; 
  min-width: 45px;
  min-height: 33px;
}

.grid-item:nth-child(1) {
  border-top-left-radius: 7px !important;
}

.grid-item:nth-child(2) {
  border-top-right-radius: 7px !important;
}

.grid-item:nth-child(3) {
  border-bottom-left-radius: 7px !important;
}

.grid-item:nth-child(4) {
  border-bottom-right-radius: 7px !important;
}

.card-info{
  padding-left: 10px; 
  font-style: italic;
}

.collap_contacts_container{
  padding: 0px !important; 
  flex-grow: 1 !important; 
  overflow: auto !important;
}

body {
  display: flex; 
  flex-direction: column; 
  min-height: 100vh;  
  background-color: var(--default-color) !important;
  transition: background-color var(--transition-duration), color var(--transition-duration);
}

.content {
  flex: 1;
  padding-top: 15px;
}

footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: var(--header-color);
}
.checkbox {
  display: none;
}

/* Applied on projects_jobs_table.html */
.truncate-th {
  color: #585858;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 0px !important;
}

/* Style for the normal size */
.normal-size {
  height: 300px;
  overflow-y: auto;
  transform: scale(1); /* Default scale is 1 (100%) */
  transform-origin: 0 0; /* Set the transformation origin to top-left */
  font-size: 14px; /* Default font size */
}

/* Style for the reduced size */
.reduced-size {
  border-radius: 10px; 
  padding-bottom: 10px !important;
  padding-left: 0px !important;
  margin-left: 0px !important;
  font-size: 11px; /* Adjust the font size for the reduced size */
  overflow-y: auto;
}


/* !CODEWO STYLE */

:root  {
  --default-color: #fafafa;
  --codewo-logo-color: #fb5d5d;
  --logo-color: #fb5d5d;
  --logo_text-color: #fafafa;
  /* --text-color: dimgrey;   */
  --text-color: #505050;

  --text-dark: dimgrey;

  /* Footer */
  --footer_text-color: white;

  /* Navbar */
  --header-color: #467797;

  /* CV toolbar */
  --toolbar-icon-bg-color: #424242;

  /* Cards */
  --card-bg-color: var(--default-color);
  --card-title-color: #fb5d5d;
  --card-content-color: dimgrey;

  /* Modals */
  --modal-bg-color: var(--default-color);
  --detailed-item-bg: white;
  --cell-border: 1px solid #ffffff3d;
  --outter-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
  --inner-shadow: inset 0px -2px 46px;
  --light-inner-shadow: inset 0px 0px 1.5px #e0e0e0;
  --inner-bg: var(--header-color);
  --inner-color: #d1caca;
  --submit-hover-color: var(--header-color);

  /* List */
  --icon-color: var(--header-color);
  --selected-list-color: var(--logo-color);
  --no-selected-list-color: var(--text-color);


  --transition-duration: 0.5s;
  --light-border: #e0e0e0 !important
}

body.dark-theme  {
  --default-color: #424242;
  --codewo-logo-color: #fb5d5d;
  --logo-color: #fb5d5d;
  --logo_text-color: #b9b9b9;
  --text-color: white;
  --text-dark: dimgrey;
  --col: aqua;
  /* Footer */
  --footer_text-color: #b9b9b9;

  /* Navbar */
  --header-color: dimgrey; /* #696969 */

  /* CV toolbar */
  --toolbar-icon-bg-color: white;

  /* Cards */
  --card-bg-color: var(--default-color);
  --card-title-color: #b9b9b9;
  --card-content-color: #b9b9b9;
    
  /* Modals */
  --modal-bg-color: var(--header-color);
  --detailed-item-bg: #7d7d7d;
  --cell-border: 1px solid #9999993d;
  --outter-shadow: 0 0 5px rgb(108, 108, 108);
  --inner-shadow: inset 0px -2px 25px;
  --light-inner-shadow: inset 0px 0px 1.5px #e0e0e0;
  --inner-bg: var(--default-color);
  --inner-color: black;
  --submit-hover-color: var(--card-bg-color);

  /* List */
  --icon-color: var(--text-color);
  --selected-list-color: #ff8b8b;
  --no-selected-list-color: var(--card-bg-color);
  --transition-duration: 0.5s;
  --light-border: #e0e0e0 !important

}

.errorlist.nonfield{
  color: var(--codewo-logo-color) !important;
}
.p input{
  background-color: white;
}
.small{
  font-size: 20px;
}
.smaller{
  font-size: 16px;
}
.logo-image {
  padding-right: 10px;
  padding-left: 10px;
  border-right-width: 2px;
  height: inherit !important;
  height: 50px !important;
  /* border-right-style: solid; */
  /* margin-right: 10px; */
}

.screen-div{
  height: calc(100vh - 64px);
}

#cv-file{
  height: calc(100% - 73px - 64px);
  width: 90%;
}

.contact-card-item{
  font-size:22px;
  padding-left: 10px;
  color: var(--footer_text-color) !important;
}

#detailed-content{
  height: 100%; 
  padding: 10px !important; 
}

#detailed-title{
  display: flex;
  justify-content: center;
  border-radius: 5px;
  background-color: var(--detailed-item-bg);
}
/*! DETAILED MODAL */
#detailed-modal{
  height: 90%; 
  width: 85% !important;
  border-radius: 5px !important;
}


.detailed-item-card{
  background-color: var(--detailed-item-bg); 
  padding: 10px !important; 
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3) !important;
  overflow-y: auto;
  border-radius: 5px;
  color: var(--text-color);
  height: calc(100% - 38px);
  min-height: calc(100% - 38px);

  }

.degraded-bg{

  border-radius: 15px;
  box-shadow: var(--outter-shadow);
}
.degraded-bg > div{
  padding: 2px;
}

.degraded-bg > div > div{
  border-radius: 14px;
  box-shadow: var(--inner-shadow);
  background-color: var(--inner-bg);
  color: var(--inner-color);
}

.degraded-bg-metal{
  border-radius: 15px;
  box-shadow: var(--outter-shadow);
}
.degraded-bg-metal > div{
  padding: 2px;
}

.degraded-bg-metal > div > div{
  border-radius: 14px;
  box-shadow: var(--inner-shadow);
  background-color: var(--outter-bg);
  color: var(--inner-color);
}
/* Media query for phones */
@media (max-width: 600px) {
  .detailed-item-card {
      display: flex;
      flex-direction: column;
      /* Remove max-height */
      max-height: none;
  }
}

.detailed-div{
  height: 100%;
}
@media (max-width: 600px) {
  .detailed-div {
      height: auto;
      padding-bottom: 10px !important;
  }
}
.section-subtitle{
  border-bottom: 2px dotted var(--text-color);
  color: var(--text-color);
  opacity: 0.5;
}

.subtext{
  color: var(--text-color);
  padding-left: 5px;
  padding-bottom: 15px !important;
  overflow-y: auto;
  max-height: max-content !important;
  min-height: 50px !important;

}

#detailed-media{
    max-height:  calc(100% - 38px); 
  }

/*!LIST ITEMS */

.outter-li-header{
  background-color: transparent !important;
  color: var(--icon-color);
  font-weight: 600;
  padding-left: 5px !important;
}
.collapsible-header.outter-header{
  background-color: var(--detailed-item-bg) !important;

}
.inner-li-header{
  color: var(--no-selected-list-color);
  background-color: var(--detailed-item-bg);
  cursor: pointer;
}

/* To remove */
.inner-li-header.selected {
  font-weight: bold;
  color: var(--selected-list-color);
}
.flex-container {
  width: 100%;
  display: flex;
  align-items: center;
  height: 42px;
}

.media-header {
  /* border: 1px solid var(--text-color) !important; */
  /* border-radius: 5px !important; */
  /* justify-content: center !important; */
  /* background-color: var(--default-color) !important; */
  color: var(--icon-color);
  font-weight: 600;
  padding-left: 5px !important;
  cursor: pointer;
}

.media-li-container{
  overflow-y: auto;
  margin-top: -3px !important;
  padding-top: 0px !important;
}
.media-li-container > ul {
  margin-top: 10px !important;
}
#detailed-videos, #detailed-images, #detailed-docs{
  margin-top: 10px !important;

}
.media-li{
  margin-left: 10px;
  cursor: pointer
}
.media-li.selected{
  font-weight: bold;
  color: var(--selected-list-color);
}

.media-li:hover{
  font-weight: 500;
}

#video-player{
  border-radius: 6px !important;
}
/* TINTMCE */
/* 
  For tinymce, as the strong items are not bold enough to distinguis heads from 
  bold data on the page htmls
*/

strong {
  font-weight: 700 !important;
}

/* List items within tinymce components */
#detailed-description ul:not(.browser-default) > li {
  list-style-type: disc;
  margin-left: 20px !important;
}

.detailed-list {
  columns: 2; /* Define dos columnas */
  -webkit-columns: 2; /* Para compatibilidad con navegadores basados en Webkit */
  -moz-columns: 2; /* Para compatibilidad con Firefox */
  column-fill: balance; /* Balancea el contenido entre las columnas */
}

.detailed-list li {
  /* list-style-type: disc !important; */
  margin-left: 5px !important;
  text-overflow: ellipsis; /* Muestra '...' cuando el texto se trunca */
  white-space: nowrap; /* Evita el salto de línea */
  max-height: 1.5em; /* Ajusta esta altura según tus necesidades */
  overflow: hidden;
}


h2{
  color: var(--text-color) !important;
}

.no-media-text{
  color: var(--card-content-color) !important;
  font-style: italic;
  margin-left: 20px !important;
}





/* VIDEO BOX */
.detailed-item-card > .raw-pad.col.s12.m12 {
  padding-bottom: 0px 10px !important; 
}

.detailed-item-card > div > .responsive-video {
  width: 100%; 
  border-radius: 6px;
}





/* SELECT-BUTTONS */
.select-options {
  display: flex;
  gap: 5px; /* Space between the options */
  padding: 5px; /* Space between the group container and its children */
  height: 100%; /* Adjust this or set a fixed height as needed */
  align-items: center; /* Center the options vertically */
  justify-content: space-around; /* Center the options horizontally */
  min-height: 40px;
  height: 40px;
}

.select-option {
  height: calc(100% - 10px); /* Make the height fill the group height, minus padding (top + bottom) */
  aspect-ratio: 1; /* Ensure the element remains a perfect circle */
  border-radius: 50%; /* Make it circular */
  background-color: gray; /* Default background color */
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.select-option.selected {
  background-color: #70be74; /* Selected background color */
}

/* DIVS & CONTAINERS */
.centered{
  justify-content: center !important;
  justify-items: center !important;
}


















/* Language modal */
#language-modal {
  height: auto !important;
  position: absolute !important;
  top: 40% !important;  
  border-radius: 15px;
  box-shadow: var(--outter-shadow)
}

#language-modal > .modal-content{
  padding: 2px;

}

#language-modal > .modal-content > div{
  border-radius: 14px;
  box-shadow: var(--inner-shadow);
  background-color: var(--inner-bg);
  color: var(--inner-color);
}
#language-modal h6{
  color: white !important;
  font-weight: 600;
  border: var(--cell-border);
  margin: 0px !important;
  padding: 0px !important;
  line-height: 46px;
}















/* Login modal */
#login-modal{
  height: auto !important;
  position: absolute !important;
  top: 30% !important;  
  border-radius: 15px;
  box-shadow: var(--outter-shadow);
  width: 400px;
}

@media (max-width: 600px){
  #login-modal{
    width:90%;
  }
}


#login-modal > .modal-content{
  padding: 2px;
}

#login-modal > .modal-content > div{
  border-radius: 14px;
  box-shadow: var(--inner-shadow);
  background-color: var(--inner-bg);
  color: var(--inner-color);
}

#login-modal p{
  margin: 0px !important;
  padding: 10px !important;
}

#login-modal label{
  color: white !important;
  font-size: medium !important;
  font-weight: bold;
}

#login-modal button{
  margin-bottom: 10px !important;
  background-color: var(--outter-shadow) !important;
  font-weight: bold;
}

#login-modal button:hover{
  margin-bottom: 10px !important;
  background-color: white !important;
  font-weight: bold;
  color: var(--submit-hover-color) !important;
}

#login-modal input:focus{
  border-bottom: 1px solid #fff !important;
  box-shadow: 0 1px 0 0 #fff !important;
}

/* Animations */
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000;
  opacity: 0;
  z-index: 9999;
  transition: opacity 0.3s ease;
}
/* Define a keyframes animation for fading in */
@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

/* Apply the fade-in animation to the .fade-in class */
.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

/* Cards */
.left-card{
  border-radius: 0px 14px 14px 0px !important;
}

.left-card div{
  border-radius: 0px 14px 14px 0px !important;
}


.navbar-title{
  font-family: "Caveat", serif;
  font-optical-sizing: auto;
  font-weight:400;
  font-style: normal;
  font-size: larger;
}
/* SCROLL BOXES */
.scroll-box {
  overflow-y: auto;  /* Enables scrolling */
  scrollbar-width: none;  /* Hides scrollbar in Firefox */
}
.scroll-box ::-webkit-scrollbar {
  display: none;  /* Hides scrollbar in WebKit browsers (Chrome, Safari, Edge) */
}

/* HOVERABLE */
.hoverable:hover {
  box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 4px 10px 0 rgba(0, 0, 0, 0.19); 
}