/* Root Variables */
:root {
  --bs-primary: #5965FF; /* Bright Blue */
  --bs-primary-light: #7380FF; /* Softer Primary */
  --bs-primary-dark: #3A48CC; /* Deeper Primary */

  --bs-warning: #B35EFF; /* Soft Purple */
  --bs-warning-light: #D6A5FF; /* Lighter Purple */
  --bs-warning-dark: #8D44CC; /* Deeper Purple */

  --bs-info: #4F75FF; /* Cool Blue */
  --bs-info-light: #7C94FF; /* Lighter Cool Blue */
  --bs-info-dark: #3A58CC; /* Deeper Cool Blue */

  --bs-danger: #DC3545; /* Standard Bootstrap Red */
  --bs-danger-light: #E100A75; /* Softer Red */
  --bs-danger-dark: #A52A35; /* Darker Red */

  --bs-success: #2D8CFF; /* Blue-Green */
  --bs-success-light: #5BA9FF; /* Softer Blue-Green */
  --bs-success-dark: #1F6BCC; /* Darker Blue-Green */
}

  
  /* Button Overrides */
  
  /* Primary Buttons */
  .btn-primary {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
  }
  
  .btn-primary:hover,
  .btn-primary:focus {
    background-color: var(--bs-primary-dark) !important;
    border-color: var(--bs-primary-dark) !important;
    color: #fff !important;
  }
  
  /* Secondary Buttons (Optional: Derived from Primary) */
  .btn-secondary {
    border-color: var(--bs-primary-light) !important;
    color: var(--color-primary) !important;
    background-color: transparent !important;
  }
  
  .btn-secondary:hover,
  .btn-secondary:focus {
    background-color: var(--bs-primary-dark) !important;
    border-color: var(--bs-primary-dark) !important;
    color: #fff !important;
  }
  
  /* Success Buttons */
  .btn-success {
    background-color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
    color: #fff !important;
  }
  
  .btn-success:hover,
  .btn-success:focus {
    background-color: var(--bs-success-dark) !important;
    border-color: var(--bs-success-dark) !important;
    color: #fff !important;
  }

/* Lighter Success Buttons */
.btn-success-secondary {
  background-color: var(--bs-success-light, #d4edda) !important; /* Use lighter success color */
  border-color: var(--bs-success-light, #c3e6cb) !important;
  color: #fff !important;
}

.btn-success-secondary:hover,
.btn-success-secondary:focus {
  background-color: var(--bs-success-dark) !important;
  border-color: var(--bs-success-dark) !important;
  color: #fff !important;
}


  
  /* Warning Buttons */
  .btn-warning {
    background-color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
    color: #fff !important;
  }
  
  .btn-warning:hover,
  .btn-warning:focus {
    background-color: var(--bs-warning-dark) !important;
    border-color: var(--bs-warning-dark) !important;
    color: #fff !important;
  }
  
  /* Info Buttons */
  .btn-info {
    background-color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
    color: #fff !important;
  }
  
  .btn-info:hover,
  .btn-info:focus {
    background-color: var(--bs-info-dark) !important;
    border-color: var(--bs-info-dark) !important;
    color: #fff !important;
  }
  
  /* Danger Buttons */
  .btn-danger {
    background-color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
    color: #fff !important;
  }
  
  .btn-danger:hover,
  .btn-danger:focus {
    background-color: var(--bs-danger-dark) !important;
    border-color: var(--bs-danger-dark) !important;
    color: #fff !important;
  }
  
  /* Outlined Buttons */
  
  /* Outlined Primary */
  .btn-outline-primary {
    color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }
  
  .btn-outline-primary:hover,
  .btn-outline-primary:focus {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-color: var(--bs-primary-dark) !important;
  }
  
  /* Outlined Success */
  .btn-outline-success {
    color: var(--bs-success) !important;
    border-color: var(--bs-success) !important;
  }
  
  .btn-outline-success:hover,
  .btn-outline-success:focus {
    background-color: var(--bs-success) !important;
    color: #fff !important;
    border-color: var(--bs-success-dark) !important;
  }
  
  /* Outlined Warning */
  .btn-outline-warning {
    color: var(--bs-warning) !important;
    border-color: var(--bs-warning) !important;
  }
  
  .btn-outline-warning:hover,
  .btn-outline-warning:focus {
    background-color: var(--bs-warning) !important;
    color: #fff !important;
    border-color: var(--bs-warning-dark) !important;
  }
  
  /* Outlined Info */
  .btn-outline-info {
    color: var(--bs-info) !important;
    border-color: var(--bs-info) !important;
  }
  
  .btn-outline-info:hover,
  .btn-outline-info:focus {
    background-color: var(--bs-info) !important;
    color: #fff !important;
    border-color: var(--bs-info-dark) !important;
  }
  
  /* Outlined Danger */
  .btn-outline-danger {
    color: var(--bs-danger) !important;
    border-color: var(--bs-danger) !important;
  }
  
  .btn-outline-danger:hover,
  .btn-outline-danger:focus {
    background-color: var(--bs-danger) !important;
    color: #fff !important;
    border-color: var(--bs-danger-dark) !important;
  }
  
  /* Link Buttons */
  
  /* Primary Link */
  .btn-link {
    color: var(--bs-primary) !important;
  }
  
  .btn-link:hover,
  .btn-link:focus {
    color: var(--bs-primary-dark) !important;
    text-decoration: none !important;
  }
  
  /* Success Link */
  .btn-link-success {
    color: var(--bs-success) !important;
  }
  
  .btn-link-success:hover,
  .btn-link-success:focus {
    color: var(--bs-success-dark) !important;
    text-decoration: none !important;
  }
  
  /* Warning Link */
  .btn-link-warning {
    color: var(--bs-warning) !important;
  }
  
  .btn-link-warning:hover,
  .btn-link-warning:focus {
    color: var(--bs-warning-dark) !important;
    text-decoration: none !important;
  }
  
  /* Info Link */
  .btn-link-info {
    color: var(--bs-info) !important;
  }
  
  .btn-link-info:hover,
  .btn-link-info:focus {
    color: var(--bs-info-dark) !important;
    text-decoration: none !important;
  }
  
  /* Danger Link */
  .btn-link-danger {
    color: var(--bs-danger) !important;
  }
  
  .btn-link-danger:hover,
  .btn-link-danger:focus {
    color: var(--bs-danger-dark) !important;
    text-decoration: none !important;
  }
  
  
  /* Ensure .btn-link works with your primary color */
  .btn-link {
    color: var(--bs-primary) !important;
    text-decoration: underline !important;
  }
  
  .btn-link:hover,
  .btn-link:focus {
    color: var(--bs-primary-dark) !important;
    text-decoration: none !important;
  }
  
  /* Progress Bar */
  .progress-bar {
    background-color: var(--bs-primary) !important;
  }
  
  .progress-bar-striped {
    background-image: linear-gradient(
      45deg,
      var(--bs-primary-light),
      var(--bs-primary)
    ) !important;
  }
  
  /* Links */
  a {
    color: var(--bs-primary) !important;
  }
  
  a:hover,
  a:focus {
    color: var(--bs-primary-dark) !important;
    text-decoration: underline !important;
  }
  
  /* Alerts */
  .alert-primary {
    background-color: var(--bs-primary-lightest) !important;
    color: var(--bs-primary-darker) !important;
    border-color: var(--bs-primary-light) !important;
  }
  
  /* Inputs */
  input[type="checkbox"]:checked,
  input[type="radio"]:checked {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
  }
  
  input:focus,
  textarea:focus,
  select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(155, 54, 64, 0.5) !important;
  }
  
  /* Background Utilities */
  .bg-primary {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
  }
  
  .bg-primary-light {
    background-color: var(--bs-primary-light) !important;
    color: #fff !important;
  }
  
  /* Text Utilities */
  .text-primary {
    color: var(--bs-primary) !important;
  }
  







  .navbar-brand{
    color: #ffffff !important;
  }















html {
    /**
     *      Declaring html element resets the browser's default rem size
     *      Not using css clamp so we avoid a max-value if users zoom in
     *      At 300px vw font-size is 15.96px & at 1920px vw it's 21.144px   **/
    font-size: 16px; /* fallback rule */
    /* font-size: calc(1rem + 0.2vw); */
}
header {
    padding: 10px 0px;
    background-color: #ffffff;
}

.header-logo-wrapper{
  padding-bottom: 5px;
}

  
/* Sticky Header */
.navbar {
    position: sticky;
    background-color: #5965ff;
    top: 0;
    z-index: 1020;
}
.dropdown-toggle::after {
    color: #fff; /* Set the arrow color to white */
}
/* Sidebar Layout */
#sidebarMenu {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

/* Sticky Sidebar */
.sidebar-sticky {
    position: sticky;
    top: 100px;
    max-height: calc(100vh - 100px);
    overflow-y: hidden; /* Enable scrollbar space */
    overflow-x: hidden;
    margin-right: 0;
}

/* Sidebar Logo */
.sidebar-logo {
    padding: 15px 0;
    text-align: center;
    flex-shrink: 0; /* Prevent the logo from shrinking */
    background-color: #ffffff;;
}

.sidebar-logo img.logo-img {
    /* max-height: 100px; */
    width: auto;
    margin: 0 auto;
    display: block;
}

/* Custom Scrollbar for WebKit Browsers */
.sidebar-sticky::-webkit-scrollbar {
    width: 8px; /* Set scrollbar width */
    opacity: 0; /* Hide scrollbar by default */
    transition: opacity 0.3s ease; /* Smooth opacity transition */
}

.sidebar-sticky:hover::-webkit-scrollbar {
    opacity: 1; /* Show scrollbar on hover */
}

/* Scrollbar Thumb */
.sidebar-sticky::-webkit-scrollbar-thumb {
    background-color: #888;
    border-radius: 4px;
}

.sidebar-sticky:hover::-webkit-scrollbar-thumb:hover {
    background-color: #555;
}

/* Scrollbar Track */
.sidebar-sticky::-webkit-scrollbar-track {
    background-color: #f1f1f1;
}

/* Firefox Scrollbar (Always Visible but Faded) */


.sidebar-content{
    height: calc(100dvh);
    max-height: calc(100vh - 20px);
    overflow-y: auto; /* Enable scrollbar space */
    overflow-x: hidden;
    padding-right: 8px; /* Consistent padding for scrollbar */
    margin-right: 0;
    padding-bottom: 25px;
}

.sidebar-content {
    scrollbar-width: thin; /* Thin scrollbar */
    scrollbar-color: transparent transparent; /* Default transparent scrollbar */
    transition: scrollbar-color 0.3s ease; /* Smooth transition */
}

.sidebar-content:hover {
    scrollbar-color: #888 #f1f1f1; /* Show visible scrollbar thumb and track */
}

/* Adjustments for Admin Bar */
body.admin-bar header.navbar {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar header.navbar {
        top: 46px;
    }
}

body.admin-bar #sidebarMenu .sidebar-sticky {
    top: 0;
    height: calc(100dvh);
    max-height: calc(100dvh - 15px);
}

@media screen and (max-width: 782px) {
    .sidebar-content{
        height: auto;
        max-height: calc(100vh - 100px);
        overflow-y: auto; /* Enable scrollbar space */
        overflow-x: hidden;
        padding-right: 8px; /* Consistent padding for scrollbar */
        margin-right: 0;
        padding-bottom: 25px;
    }    
    body.admin-bar #sidebarMenu .sidebar-sticky {
        top: calc(100px + 46px);
        height: auto;
    }
}


/* Sidebar Sticky Footer */
.sidebar-footer {
    border-top: 1px solid #ddd; /* Optional: Separator line */
    padding: 15px 0;
    text-align: center;
    background-color: #f8f9fa; /* Optional: Background color */
    flex-shrink: 0; /* Prevent the footer from shrinking */
}

.sidebar-footer a {
    color: #888;
    text-decoration: none;
    font-size: 14px;
}

.sidebar-footer a:hover {
    color: #555;
    text-decoration: underline;
}

.sidebar-footer i {
    margin-right: 5px;
}

footer{
  background-color: var(--bs-primary);
  color: #fff;
}


main{
    min-height: calc(100dvh - 100px - 88px) ;
}
body.admin-bar main{
    min-height: calc(100dvh - 100px - 88px - 32px) ;
}


.sidebar-content .nav li.menu-item{
    padding: .5rem .5rem;
    border-bottom: 1px solid #dee2e6;
}
.sidebar-content .nav li.menu-item:last-child{
  border-bottom: 1px solid transparent;
}

.sidebar-content .nav li.menu-item a{
    text-decoration: none;
    font-size: 1rem;
    color: #333333;
}

.sidebar-content .nav li.menu-item a i{
  color: #5965ff;
}
.sidebar-content .nav li.menu-item.current.active a i{
  /* color: #ffffff !important; */
}


.sidebar-section-header{
    margin-top: 1rem;
    padding: 1rem .5rem;
    font-weight: bold;
    font-size: .9rem;
    background: linear-gradient(to bottom, #dcdcdc, #e8e8e8, #dcdcdc);
    border-bottom: 1px solid #c9c9c9;
}


.sidebar-section-header.recommendation{
  margin-top: 1rem;
  padding: 1rem .5rem;
  font-weight: bold;
  font-size: .9rem;
  background: linear-gradient(to bottom, #9f9e9e, #9f9e9e, #9f9e9e);
  border-bottom: 1px solid #c9c9c9;
}


.accordion.inner-sub-accordion .accordion-item{
    background-color: transparent !important;
}

.report-view {
    max-width: 800px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
}

.report-view .section-header {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 15px;
    text-transform: uppercase;
    color: #555;
    border-bottom: 1px solid #ddd;
    padding-bottom: 5px;
}

.report-view .row {
    margin-bottom: 10px;
}

.report-view .label {
    font-weight: bold;
    color: #333;
}

.report-view .value {
    color: #555;
}

.divider {
    margin: 20px 0;
    border-bottom: 1px dashed #ddd;
}


.nav.child-menu-item-wrapper{
  display: block;
}

.menu-item a{
  color: #333 !important;
  text-decoration: none;
}

.menu-item:hover {
  background-color: #f9f9f9; /* Optional: Adds hover effect */
}


.menu-item:hover .child-menu-item:hover  {
  background-color: #c9c6c6; /* Optional: Adds hover effect */
}

/* Styles for parent <li> */
.menu-item {
  position: relative;
  padding: 15px 10px; /* Adds clickable padding around the <li> */
  list-style: none; /* Removes bullet points */
}

.menu-item a {
  display: block; /* Makes the <a> fill the <li> */
  text-decoration: none; /* Removes underline from the links */
  color: inherit; /* Ensures the link inherits text color */
}

.menu-item a:hover {

text-decoration: none;
}


.menu-item:hover a {

  text-decoration: none !important;
  }

/* Styles for child <li> */
.child-menu-item {
  position: relative;
  padding: 10px; /* Adds clickable padding to child <li> */
  list-style: none;
}

.child-menu-item a {
  display: block;
  text-decoration: none;
  color: inherit;
}

.child-menu-item a:hover {
  text-decoration: none;
}



main .content{
  padding: 1rem;
}

.sidebar-section-header a {
  text-decoration: none;
}



.collapse-header{

}

.collapse-item {
  border-top: 1px solid #dee2e6;
  margin-top: .5rem;
}

.link-jump-section{
  cursor: pointer;
}

.link-jump-section {
  position: relative;
  padding-left: 45px; /* Add space for the icon */
}

.link-jump-section::before {
  content: "\f101"; /* Unicode for 'fa-angle-double-right' */
  font-family: 'Font Awesome 5 Pro'; /* Use the correct font family */
  font-weight: 900; /* 900 for solid icons */
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%); /* Vertically center the icon */
  margin-right: 8px; /* Add spacing between the icon and text */
}

.menu-item.current{
  background-color: #dad7d7;
}

.menu-item.current.recommendation{
  background-color: #D6DAFF;
}

.menu-item.current .current, .menu-item.current .active{
  background-color: var(--bs-primary) !important;
  color: #ffffff !important;
}
.menu-item.current .current a, .menu-item.current .active a{
  color: #ffffff !important;
}


.menu-item.first-level-menu-item.current, .menu-item.first-level-menu-item.active{
  /* background-color: var(--bs-primary) !important; */
  /* color: #ffffff !important; */
}
.menu-item.first-level-menu-item.current a, .menu-item.first-level-menu-item.active a{
  /* color: #ffffff !important; */
}
.menu-item.first-level-menu-item.current a, .menu-item.first-level-menu-item.active a i{
  color: var(--bs-primary) !important;
}







.form-control-border-bottom {
  border: none;
  border-bottom: 1px solid #ced4da;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  margin-bottom: 15px;
}

.form-control-border-bottom:focus {
  border-bottom-color: #495057; /* Change the bottom border color when focused */
  box-shadow: none; /* Remove the default Bootstrap box shadow */
}


.switch-toggle {
  float: left;
  background: #b7b7b7;

}
.switch-toggle input {
 position: absolute;
 opacity: 0;
}
.switch-toggle input + label {
  padding: 5px 5px;
  font-size: .9rem;
  float: left;
  cursor: pointer;
  min-width: 30px;
  text-align: center;
  border: 1px solid #f9f9f9

}
.switch-toggle input:checked + label {
 background: var(--bs-primary);
 color: var(--color-text-dark);
}

.switch-toggle input:checked + label i {
  color: #ffffff;
}

.switch-toggle input + label i {
  color: var(--bs-primary);
}


.inline-toolbar-wrapper{
  padding: 10px 5px;
  background-color: #f5f5f5;
}

.menu-item a i{
 width: 25px;
}




.menu-item {
  position: relative; /* Parent element for positioning */
}

.collapse-header {
  display: flex;
  align-items: center;
  width: 100%; /* Full width clickable area */
  cursor: pointer;
  position: relative; /* Ensure child elements can use absolute positioning */
}

.collapse-header::after {
  font-family: 'Font Awesome 5 Pro'; /* Use the correct font family */
  content: "\f107"; /* Downward arrow */
  font-size: 1rem;
  position: absolute;
  right: 10px; /* Position arrow at the end of the header */
  top: 50%; /* Vertically center the arrow */
  transform: translateY(-50%);
  transition: transform 0.3s ease;
}

.collapse-header[aria-expanded="true"]::after {

  font-family: 'Font Awesome 5 Pro'; /* Use the correct font family */
  content: "\f106"; /* Upward arrow */
  transform: translateY(-50%) rotate(180deg);
}



h1{
  color: var(--bs-primary);

}

.uploaded_files_wrapper ul{
  list-style: none;
  padding-left: 5px;
  padding-bottom: 1.2rem;
}


.uploaded_files_wrapper ul li img{
  max-height: 150px;
  width: auto;
  max-width: 180px;
  padding: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  border: 1px solid #cccccc;
}

.option-items:nth-child(odd) {
  background-color: #f9f9f9; /* Light gray for odd rows */
}

.option-items:nth-child(even) {
  background-color: #ffffff; /* White for even rows */
}

/* Optional: Add some padding for better visibility */
.option-items {
  padding: 15px 10px 10px;
  border-radius: 5px; /* Optional for a rounded look */
}

.form-label {
  font-weight: 600;
}

.action-button-row-wrapper {
  position: sticky;
  bottom: 0;
  z-index: 1000; /* Ensure it stays above other elements */
  background-color: white; /* Optional: Set a background color to match your design */
  padding: 10px; /* Optional: Add padding if needed */
}



/*
[+] GENERAL STYLE
*/

.navbar-brand{
  font-weight: 700 !important;
}
  .navbar-brand:hover{
    color: #ffffff !important;
    text-decoration: none !important;

  }

  .page-title{
    font-size: 2.5rem;
    font-weight: 700;
    border-bottom: #a5a5a5 1px solid;
    padding-bottom: 1.2rem;
    margin-bottom: 1.5rem;
  }

  a.btn{
    text-decoration: none !important;
  }
  
  .sidebar-logo .navbar-brand.white-label img.logo-img{
    width: 100%;
    max-width: 150px;
  }

  .navbar-brand.white-label .company-name-siderbar{
    color: #333;
    font-weight: 500;
    text-align: center;
  }

  .hide-for-new{
    display: none;
  }
    
  .disabled-link {
      pointer-events: none;
      cursor: default; /* Changes cursor to indicate it is not clickable */
      color: gray !important; /* Optional: Change the color to indicate it is disabled */
      text-decoration: none; /* Optional: Remove underline */
  }


/*
[-] GENERAL STYLE
*/

/*
[+] DASHBOARD STYLE
*/
.dashboard-page-wrapper{
  max-width: 1450px;
}

.dashboard-label-counter{
  font-size: 3.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
  margin-top: 1rem;
  font-weight: bold;
  line-height: .5;
}
.dashboard-label-counter small{
  font-size: 1.25rem;
  font-weight: 600;
  color: #717171;
}

.dashboard-card-action-wrapper {
  display: flex;
  justify-content: flex-end; /* Align single item to the right */
}

.dashboard-card-action-wrapper > *:nth-child(2) ~ * {
  justify-content: space-between; /* Justify content if more than one item */
}

.dashboard-card-action-wrapper a.btn{
  margin-left: 15px;
}

.card {
  display: flex;
  flex-direction: column; /* Ensure consistent layout */
  /*height: 100%;*/ /* Make cards the same height */
}

.card-body {
  flex-grow: 1; /* Allow the body to stretch and take up the remaining space */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Ensure proper spacing for elements */
}

.card-header {
  min-height: 60px; /* Set a minimum height for headers */
  text-align: center; /* Center align text */
  display: flex;
  align-items: center; /* Vertically align text in the middle */
  justify-content: center; /* Center horizontally */
  text-wrap: balance;
}

.dashboard-card-header{
  font-weight: 500;
  color: #717171;
}



.dashboard-label-counter {
  text-align: center; /* Center-align the counter for a balanced layout */
}


.activity-wrapper{
  height: 200px;
  overflow-y: scroll;
}


.tooltip.show {
  opacity: 1 !important; /* Ensure tooltip is fully visible */
}
.tooltip .tooltip-inner {
  max-width: 600px !important; /* Adjust width */
  white-space: normal; /* Allow text wrapping */
  text-align: left; /* Align text for better readability */
  padding: 10px; /* Add some padding */
  font-size: 14px; /* Adjust font size */
  width: 500px !important;
  background-color: #ffffff !important; /* Set background to white */
  color: #333 !important; /* Set text color */
  border: 1px solid #ddd !important; /* Light gray border */
  border-radius: 5px; /* Optional: Rounded corners */
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1) !important; /* Add shadow */
  opacity: 1;
}

.tooltip .tooltip-arrow::before {
  border-top-color: #ffffff !important; /* Match arrow color to tooltip */
  border-bottom-color: #ffffff !important; 
}

.avatar-img {
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  object-fit: cover; /* Prevents distortion and centers the image */
  object-position: center;
  display: block;
}

.avatar-placeholder {
  width: 32px; 
  height: 32px; 
  border-radius: 50%; 
  background-color: #6c757d;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: bold;
}

.form-footnote{
  font-size: 1rem;
}


.reset-radio-wrapper {
  margin-top: 10px;
  z-index: 1;
}
.reset-radio {
  display: inline-block;
  font-size: 12px;
  color: #dc3545; /* Red color */
  cursor: pointer;
  text-decoration: none;
  transition: color 0.3s ease;
}
.reset-radio:hover {
  color: #a71d2a; /* Darker red on hover */
}

.file-upload-wrapper.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){
  border-top-left-radius: 50% !important;
  border-bottom-left-radius: 50% !important;
}

#signature-container {
  margin-bottom: 20px;
}
#signature-container canvas {
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  background-color: #cfcfcf;
  cursor: crosshair;
}



#header-menu .menu-item{
  padding: 0px;
}
#header-menu .menu-item:hover, #header-menu .menu-item:focus{
  background-color: transparent !important;
}

#header-menu .menu-item a{
  font-size: 1rem;
  color: #ffffff !important;
}

#header-menu .menu-item a:hover{
  font-size: 1rem;
  color: #333 !important;
}


.breadcrumb-item.active a{
  text-decoration: none;
  color: #333 !important;
}

ul.space-list li a.space-list-item{
  text-decoration: none;
  color: var(--bs-secondary) !important;
}

ul.space-list li a.space-list-item:hover{
  text-decoration: underline;
  color: var(--bs-primary) !important;
}



.cross-relation-form-accordion-button{
  background-color: var(--bs-primary);
  color: #ffffff;
  font-size: 1.2rem;
}

@font-face { /* latin */
	font-family: "Roboto Flex";
	font-weight: 100 1000;
	font-stretch: 50% 200%;
	font-display: swap;
	src: url( https://skunkworks.webriggers.net/me-app-dev/template/customify-child/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].woff2 ) format( 'woff2-variations' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --color-primary: #5271FF;
	--color-secondary: #4c83b6;
	--color-primary-light: #E3E8FF;
	--color-dark: #27415a;
	--color-accent: var( --color-info );
	--color-light: #ffffff;
	--color-tertiary: #6283ab;
	--color-grad-1: #7a8fa9;
	--color-grad-2: #8fa1b7;
	--color-grad-3: #bcc5d3;
	--color-gray: #dddddd;
	--color-light-gray: #fefefe;
	--color-lightest-gray: #f0f1f9;
	--color-info: var( --color-tertiary );
	--color-theme-black: #12171d;
	--color-text: var( --color-theme-black );
	--color-text-dark: var(--color-white);
	--color-success: #5c8037;
	--color-warning: #ab7d00;
	--color-danger: #b50707;
	--system-sans:  "San Francisco", "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;
	--font-rem: 16px;
	--form-element-border-radius: 0;
}
html {
	font-size: 16px;
}

body.is-theme-purple {
  --color-primary: #5271FF;
	--color-secondary: #4c83b6;
	--color-primary-light: #E3E8FF;
	--color-dark: #27415a;
	--color-accent: var( --color-info );
	--color-light: #ffffff;
	--color-tertiary: #6283ab;
	--color-grad-1: #7a8fa9;
	--color-grad-2: #8fa1b7;
	--color-grad-3: #bcc5d3;
	--color-gray: #dddddd;
	--color-light-gray: #fefefe;
	--color-lightest-gray: #f0f1f9;
	--color-info: var( --color-tertiary );
	--color-theme-black: #12171d;
	--color-text: var( --color-theme-black );
	--color-text-dark: var(--color-white);
	--color-success: #5c8037;
	--color-warning: #ab7d00;
	--color-danger: #b50707;
	--system-sans:  "San Francisco", "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;
	--font-rem: 16px;
	--form-element-border-radius: 0;
}

body.is-theme-pill {
  --color-primary: #007C76;
	--color-secondary: #22625f;
	--color-primary-light: #daefed;
	--color-dark: #27575a;
	--color-accent: var( --color-info );
	--color-light: #ffffff;
	--color-tertiary: #62aaab;
	--color-grad-1: #7a8fa9;
	--color-grad-2: #8fa1b7;
	--color-grad-3: #bcc5d3;
	--color-gray: #dddddd;
	--color-light-gray: #fefefe;
	--color-lightest-gray: #f0f1f9;
	--color-info: var( --color-tertiary );
	--color-theme-black: #12171d;
	--color-text: var( --color-theme-black );
	--color-text-dark: var(--color-white);
	--color-success: #5c8037;
	--color-warning: #ab7d00;
	--color-danger: #b50707;
	--system-sans:  "San Francisco", "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;
	--font-rem: 16px;
	--form-element-border-radius: 5px;
}

body.is-theme-dark {
  --color-primary: #2d5599;
	--color-secondary: #27416e;
	--color-primary-light: #6179a0;
	--color-dark: #132545;
	--color-accent: var( --color-info );
	--color-light: #ffffff;
	--color-tertiary: #46669d;
	--color-grad-1: #7a8fa9;
	--color-grad-2: #8fa1b7;
	--color-grad-3: #bcc5d3;
	--color-gray: #dddddd;
	--color-light-gray: #fefefe;
	--color-lightest-gray: #f0f1f9;
	--color-info: var( --color-tertiary );
	--color-theme-black: #1e1e1e;
	--color-text: var( --color-theme-black );
	--color-text-dark: var(--color-white);
	--color-success: #5c8037;
	--color-warning: #ab7d00;
	--color-danger: #b50707;
	--system-sans:  "San Francisco", "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;
	--font-rem: 16px;
	--form-element-border-radius: 5px;

  .menu-item:hover {
    background-color: var(--color-primary-light) !important;
  }
}

body.is-theme-light {
  --color-primary: #365c7f;
	--color-secondary: #4c83b6;
	--color-dark: #27415a;
	--color-accent: var( --color-info );
	--color-tertiary: #6283ab;
	--color-grad-1: #7a8fa9;
	--color-grad-2: #8fa1b7;
	--color-grad-3: #bcc5d3;
	--color-light-gray: #e8ecf0;
	--color-lightest-gray: #f0f1f9;
	--color-info: var( --color-tertiary );
	--color-theme-black: #12171d;
	--color-text: var( --color-theme-black );
	--color-success: #5c8037;
	--color-warning: #ab7d00;
	--color-danger: #b50707;
	--system-sans:  "San Francisco", "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;
	--font-rem: 18px;
	--form-element-border-radius: .4em;
}

/* bootstrap resets */
body {
	--bs-body-color: var( --color-text );
	--bs-primary: var( --color-primary );
	--bs-primary-light: var( --color-secondary );
	--bs-primary-dark: var( --color-info );
	--bs-primary-info: var( --color-info );
	--bs-success: var( --color-success );
	--bs-warning: var( --color-warning );
	--bs-danger: var( --color-danger );
	--bs-gray-500: var( --color-grad-3 );
	--bs-gray-300: var( --color-light-gray );
	--bs-light: var( --color-lightest-gray );
	--bs-dark: var( --color-themeblack );
	--bs-border-radius-sm: var( --form-element-border-radius );
	--bs-btn-border-radius: var( --form-element-border-radius );
	--bs-accordion-btn-padding-y: .5ch;
	--bs-accordion-btn-padding-x: 1ch;
	--bs-accordion-btn-bg: var( --color-light-gray );
	--bs-accordion-active-bg: var( --color-lightest-gray );
	.btn-dark {
		background-color: var( --color-info ) !important;
	}
	.btn-info {
		background-color: var( --color-tertiary ) !important;
	}
	.btn-primary {
		background-color: var( --color-primary ) !important;
	}
	
	.btn-light {
		background-color: var( --color-light-gray ) !important;
	}
}


body {
	font-family: "Robot Flex", var( --system-sans );
	font-size: var( --font-rem );
}
/* Type Scale: Major Second */
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
	font-weight: 500;
	margin: 0;
	color: var( --color-dark );
}
h1, .h1 {
	font-size: 1.802rem;
}
h2, .h2 {
	font-size: 1.602rem;
}
h3, .h2 {
	font-size: 1.424rem;
}
h4, h4 {
	font-size: 1.266rem;
}
h5, .h5 {
	font-size: 1.125rem;
}

.is-theme-purple {
  /* layout: header */
  header {
    padding: 0;
    display: flex;
    border-bottom: 1px solid var(--color-gray);
    > .container-fluid {
      width: 14rem;
      padding: .5rem .75rem;
    }
    > .navbar {
      width: calc( 100vw - 14rem );
      background: var( --color-light );
      color: var( --color-lightest-gray );
      box-shadow: none !important;
    }
    .avatar-placeholder {
      background: var( --color-info );
    }
  }

  .sidebar-content .nav li.menu-item a i {
    color: var(--color-primary);
  }

  footer.py-4 {
    background-color: var( --color-primary );
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
  }
  footer p {
    margin: 0;
  }

  /* layout: sidebar / main */
  #sidebarMenu {
    width: 265px;
  }
  body > .container-fluid > .row > main.col-md-9.ms-sm-auto.col-lg-10.px-md-4 {
    width: calc( 100vw - 300px ) !important;
    padding: 0 .75rem !important;
  }

  .sidebar-section-header {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--color-light);
    background: var( --color-primary );
  }

  .sidebar-sticky {
    top: 0;
  }

  .menu-item.first-level-menu-item.active {
    background-color: var(--color-primary-light);
  }

  .sidebar-logo {
    max-height: 5rem;
    padding: .25rem .5rem !important;
  }
  .sidebar-logo .logo-img {
    max-height: 4.5rem;
    max-width: 90% !important;
    margin: 0 !important;
    width: unset !important;
  }
  main > .content {
    padding: 2rem;
  }
  .me-client-form.inner-container-wrapper {
    margin: 0 !important;
  }
  .form-header-wrapper {
    margin-bottom: -36px;
    width: fit-content;
    z-index: 1;
    nav {
      font-size: 16px;
    }
    h1 {
      color: var(--color-text);
    }
  }


  #sidebarMenu {
    ul.nav li.first-level-menu-item, ul.nav:not(:has(#accordionMenu)) > li {
      padding: .5rem 1rem !important;
    }
    h5 {
      margin-top: 0 !important;
    }
    li.menu-item {
      padding: .5rem 1rem !important;
    }
    li li:has(.collapse-item) {
      padding: .5em .2em .5em .4em!important;
    }
    li.menu-item:hover > a > i.fa-circle {
      color: var( --color-primary ) !important;
    }
    .sidebar-content {
      padding-right: 0 !important;
    }
    .sidebar-content .nav li.menu-item a i:not(.fa-circle) {
      color: var( --color-primary );
    }
    .collapse-header::after {
      right: .3em;
    }
    .sidebar-content .menu-item i.fa-dot-circle::before {
      color: var( --color-primary );
    }
    .sidebar-content .menu-item i.fa-dot-circle::after,
    .sidebar-content .menu-item i.fa-circle {
      color: var( --color-primary-light ) !important;
    }
    .menu-item.current .current, .menu-item.current .active {
      background-color: var(--color-secondary) !important;
    }
    .menu-item.current .current a, .menu-item.current .active a {
      color: #fff !important;
      font-weight: 400;
      letter-spacing: -0.012em;
    }
    .menu-item.current, .menu-item.active i.fa-dot-circle::after {
        color: var( --color-lightest-gray ) !important;
        opacity: .95;
    }
    .menu-item a > i {
      width: unset;
    }
  }


  .me-client-form.inner-container-wrapper {
    > .container-fluid {
      padding: 0;
      --bs-gutter-x: 0;
    }
    .gx-5 {
      --bs-gutter-x: 8px;
    }
    .mb-4 {
      margin-bottom: 0 !important;
    }
    .mt-2 {
      margin-top: 0 !important;
    }
    font-weight: 300;
    label {
      font-weight: 450;
    }
    .other-wrapper > label,
    .form-check-label {
      font-weight: 400;
    }
  }
  .me-client-form.inner-container-wrapper	> .container-fluid > .row > div:last-child {
    padding: 4rem .75rem !important;
  }


  .inline-toolbar-wrapper {
    padding: 0;
    background: var( --color-light );
    border-bottom: 2px solid var( --color-grad-3 );
    font-size: .85rem;
    .mb-2 {
      margin-bottom: 0 !important;
    }
    .form-group {
      padding: .3rem .2rem;
      margin-bottom: 0;
    }
  }

  .switch-toggle.switch-candy {
    background: transparent;
    label {
      margin: 0;
      border-radius: var( --bs-border-radius-sm );
    }
    label:last-child {
      margin-right: 0;
    }

    label .fa {
      line-height: 1rem;
      min-width: 1.4rem;
      text-align: center;
    }
  }

  .default-group-wrapper {
      .btn-secondary {
      border: 1px solid var(--color-primary) !important;
      color: var(--color-primary) !important;
      background-color: transparent !important;
    }
    .btn-secondary:hover {
      background-color: var(--color-primary-light) !important;
    }
  }

  #main-form-wrapper {
    select, input, textarea {
      background-color: var( --color-light-gray );
      border: 1px solid var( --color-grad-2 );
      border-radius: var( --form-element-border-radius );
      margin-bottom: 0;
    }
    textarea {
      min-height: 5.3em;
    }
    input[type="radio"] {
      border-radius: 50% !important;
      border-color: var( --color-info );
    }
    input[type="checkbox"] {
      border-radius: .15em;
      border-color: var( --color-info );
    }
    select:focus, input:focus {
      background-color: var( --color-lightest-gray );
    }
    .form-label {
      margin-bottom: 0;
    }
    .row .col-md-12.d-flex:has(.switch-candy) {
      align-items: center;
    }
  }


    .accordion-item {
      padding-bottom: .2rem;
    }
    .accordion-item:has( .show ) {
      padding-bottom: 1.25rem !important;
    }
    .accordion-item > .row {
      padding: .5rem !important;
    }
    select.measurement-input {
      font-size: .9rem;
      max-width: 8ch;
      padding: .5rem 2ch .5rem .25rem;
      background-position-x: 95%;
    }
    h2.accordion-header button {
      background-color: var( --color-secondary ) !important;
      font-weight: 500;
      padding: .6rem .5rem;
    }
  h2.accordion-header button[aria-expanded="true"] {
      color: #fff;	
  }
    h2.accordion-header button.collapsed {
      background-color: var( --color-lightest-gray ) !important;
      color: var( --color-dark );
      font-weight: 400;
    }
    .accordion-button::after {
      background-color: #fff;
      border-radius: 50%;
      border: 2px solid #fff;
      background-size: 1rem;
      background-position-y: .05em;
    }

    .accordion-collapse {
      padding: .5rem !important;
    }


  .action-button-row-wrapper {
    border-top: 2px solid var( --color-gray );
    margin-left: -.75rem;
    margin-right: -.75rem;
    padding: .75rem .5rem .5rem;
    > div {
      margin-top: 0 !important;
      padding: 0;
    }
    .justify-content-end {
      font-size: 0;
      gap: 8px;
    }
    #btn_save_next {
      border: 1px solid var(--color-primary) !important;
      background-color: var(--color-primary) !important;
      order: 2;
    }
    #btn_save_next:hover {
      border: 1px solid var(--color-primary) !important;
      background-color: var(--color-primary) !important;
      opacity: 0.8;
    }
    #btn_save_complete {
      border: 1px solid var(--color-primary) !important;
      color: var(--color-primary) !important;
      background-color: transparent !important;
    }
    #btn_save_complete:hover {
      background-color: var(--color-primary-light) !important;
    }
    
    .btn {
      border-radius: var(--form-element-border-radius);
      font-size: var(--font-rem);
    }
  }



  .col-md-12:has( .field-element-wrapper ):has(:nth-child(5)) > .row {
    flex-direction: column;
  }
  .col-md-12:has( .field-element-wrapper ):has(:nth-child(5)) > .row > div {
    width: 100%;
  }
  .col-md-12:has(.form-check) .field-element-wrapper:has(> *:nth-child(5)) {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 0;
    gap: .2rem .5em;
    padding-left: 3.5%;
  }
  .col-md-12:has(.form-check) .field-element-wrapper:has(> *:nth-child(5)) > div {
    flex-basis: 32%;
    margin: 0;
  }


  .other-wrapper {
    flex-basis: 100% !important;
    display: flex;
    flex-wrap: wrap;
    gap: .2em .5em;
  }
  .other-wrapper > label {
    align-content: center;
  }

  .other-wrapper > label,
  .col-md-12:not(:has( .field-element-wrapper ):has(:nth-child(4))) > .row div:first-child {
    flex-grow: 0;
  }
  .col-md-12:not(:has( .field-element-wrapper ):has(:nth-child(4))) > .row div:first-child:has(label.form-label) {
    min-width: 25ch;
  }

  .row.gx-5.mt-1:has(h4[id^="section-"]) > div:empty {
    padding:0;
  }
  .row.gx-5.mt-1 h4[id^="section-"] {
    display: inline-block;
    padding: .25em .5em;
    border-radius: 0;
    background: var(--bs-primary);
    color: white;
    position: relative;
    width: 100%;
    text-align: center;
  }


  .row.gx-5.mt-1:has(.file-upload-wrapper) {
    align-items: center;
  }
  .row.gx-5.mt-1:has(.file-upload-wrapper) > div:first-child {
    flex-basis: 25%;
    flex-grow: 1;
  }
  .row.gx-5.mt-1:has(.file-upload-wrapper) > .field-element-wrapper {
    flex-basis: 73%;
    flex-grow: 2;
  }
  .row.gx-5.mt-1 .file-upload-wrapper.mb-3, .form-group:has(> .file-upload-wrapper) {
    margin-bottom: 0 !important;
  }
  .field-element-wrapper > .form-group > .file-upload-wrapper {
    width: 100% !important;
  }

  /** dont apply on div.convent with class .page **/

  .content:not(.page) .container-fluid > .row {
    flex-wrap: nowrap;
  }

  #header-menu .menu-item > a {
      color: var(--color-dark) !important;
  }
}

.is-theme-pill {
  /* layout: header */
  header {
    padding: 0;
    display: flex;
    border-bottom: 1px solid var(--color-gray);
    > .container-fluid {
      width: 14rem;
      padding: .5rem .75rem;
    }
    > .navbar {
      width: calc( 100vw - 14rem );
      background: var( --color-light );
      color: var( --color-lightest-gray );
      box-shadow: none !important;
    }
    .avatar-placeholder {
      background: var( --color-info );
    }
  }

  .sidebar-content .nav li.menu-item a i {
    color: var(--color-primary);
  }

  footer.py-4 {
    background-color: var( --color-primary );
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
  }
  footer p {
    margin: 0;
  }

  /* layout: sidebar / main */
  #sidebarMenu {
    width: 270px;
  }
  body > .container-fluid > .row > main.col-md-9.ms-sm-auto.col-lg-10.px-md-4 {
    width: calc( 100vw - 300px ) !important;
    padding: 0 .75rem !important;
  }

  .sidebar-section-header {
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--color-light);
    background: var( --color-primary );
  }

  .sidebar-sticky {
    top: 0;
  }

  .menu-item.first-level-menu-item.active {
    background-color: var(--color-primary-light);
  }

  .sidebar-logo {
    max-height: 5rem;
    padding: .25rem .5rem !important;
  }
  .sidebar-logo .logo-img {
    max-height: 4.5rem;
    max-width: 90% !important;
    margin: 0 !important;
    width: unset !important;
  }
  main > .content {
    padding: 2rem;
  }
  .me-client-form.inner-container-wrapper {
    margin: 0 !important;
  }
  .form-header-wrapper {
    margin-bottom: -36px;
    width: fit-content;
    z-index: 1;
    nav {
      font-size: 16px;
    }
    h1 {
      color: var(--color-text);
    }
  }


  #sidebarMenu {
    ul.nav li.first-level-menu-item, ul.nav:not(:has(#accordionMenu)) > li {
      padding: .5rem 1rem !important;
    }
    h5 {
      margin-top: 0 !important;
    }
    li.menu-item {
      padding: .5rem 1rem !important;
    }
    li li:has(.collapse-item) {
      padding: .5em .2em .5em .4em!important;
    }
    li.menu-item:hover > a > i.fa-circle {
      color: var( --color-primary ) !important;
    }
    .sidebar-content {
      padding-right: 0 !important;
    }
    .sidebar-content .nav li.menu-item a i:not(.fa-circle) {
      color: var( --color-primary );
    }
    .collapse-header::after {
      right: .3em;
    }
    .sidebar-content .menu-item i.fa-dot-circle::before {
      color: var( --color-primary );
    }
    .sidebar-content .menu-item i.fa-dot-circle::after,
    .sidebar-content .menu-item i.fa-circle {
      color: var( --color-primary-light ) !important;
    }
    .menu-item.current .current, .menu-item.current .active {
      background-color: var(--color-secondary) !important;
    }
    .menu-item.current .current a, .menu-item.current .active a {
      color: #fff !important;
      font-weight: 400;
      letter-spacing: -0.012em;
    }
    .menu-item.current, .menu-item.active i.fa-dot-circle::after {
        color: var( --color-lightest-gray ) !important;
        opacity: .95;
    }
    .menu-item a > i {
      width: unset;
    }
  }


  .me-client-form.inner-container-wrapper {
    > .container-fluid {
      padding: 0;
      --bs-gutter-x: 0;
    }
    .gx-5 {
      --bs-gutter-x: 8px;
    }
    .mb-4 {
      margin-bottom: 0 !important;
    }
    .mt-2 {
      margin-top: 0 !important;
    }
    font-weight: 300;
    label {
      font-weight: 450;
    }
    .other-wrapper > label,
    .form-check-label {
      font-weight: 400;
    }
  }
  .me-client-form.inner-container-wrapper	> .container-fluid > .row > div:last-child {
    padding: 4rem .75rem !important;
  }

  .inline-toolbar-wrapper {
    padding: 0;
    background: var( --color-light );
    border-bottom: 2px solid var( --color-grad-3 );
    font-size: .85rem;
    .mb-2 {
      margin-bottom: 0 !important;
    }
    .form-group {
      padding: .3rem .2rem;
      margin-bottom: 0;
    }
  }

  .switch-toggle.switch-candy {
    background: transparent;
    label {
      margin: 0;
      border-radius: var( --bs-border-radius-sm );
    }
    label:last-child {
      margin-right: 0;
    }

    label .fa {
      line-height: 1rem;
      min-width: 1.4rem;
      text-align: center;
    }
  }

  .default-group-wrapper {
      .btn-secondary {
      border: 1px solid var(--color-primary) !important;
      color: var(--color-primary) !important;
      background-color: transparent !important;
    }
    .btn-secondary:hover {
      background-color: var(--color-primary-light) !important;
    }
  }

  #main-form-wrapper {
    select, input, textarea {
      background-color: var( --color-light-gray );
      border: 1px solid var( --color-grad-2 );
      border-radius: var( --form-element-border-radius );
      margin-bottom: 0;
    }
    textarea {
      min-height: 5.3em;
    }
    input[type="radio"] {
      border-radius: 50% !important;
      border-color: var( --color-info );
    }
    input[type="checkbox"] {
      border-radius: .15em;
      border-color: var( --color-info );
    }
    select:focus, input:focus {
      background-color: var( --color-lightest-gray );
    }
    .form-label {
      margin-bottom: 0;
    }
    .row .col-md-12.d-flex:has(.switch-candy) {
      align-items: center;
    }
  }


    .accordion-item {
      padding-bottom: .2rem;
    }
    .accordion-item:has( .show ) {
      padding-bottom: 1.25rem !important;
    }
    .accordion-item > .row {
      padding: .5rem !important;
    }
    select.measurement-input {
      font-size: .9rem;
      max-width: 8ch;
      padding: .5rem 2ch .5rem .25rem;
      background-position-x: 95%;
    }
    h2.accordion-header button {
      background-color: var( --color-secondary ) !important;
      font-weight: 500;
      padding: .6rem .5rem;
    }
  h2.accordion-header button[aria-expanded="true"] {
      color: #fff;	
  }
    h2.accordion-header button.collapsed {
      background-color: var( --color-lightest-gray ) !important;
      color: var( --color-dark );
      font-weight: 400;
    }
    .accordion-button::after {
      background-color: #fff;
      border-radius: 50%;
      border: 2px solid #fff;
      background-size: 1rem;
      background-position-y: .05em;
    }

    .accordion-collapse {
      padding: .5rem !important;
    }


  .action-button-row-wrapper {
    border-top: 2px solid var( --color-gray );
    margin-left: -.75rem;
    margin-right: -.75rem;
    padding: .75rem .5rem .5rem;
    > div {
      margin-top: 0 !important;
      padding: 0;
    }
    .justify-content-end {
      font-size: 0;
      gap: 8px;
    }
    #btn_save_next {
      border: 1px solid var(--color-primary) !important;
      background-color: var(--color-primary) !important;
      order: 2;
    }
    #btn_save_next:hover {
      border: 1px solid var(--color-primary) !important;
      background-color: var(--color-primary) !important;
      opacity: 0.8;
    }
    #btn_save_complete {
      border: 1px solid var(--color-primary) !important;
      color: var(--color-primary) !important;
      background-color: transparent !important;
    }
    #btn_save_complete:hover {
      background-color: var(--color-primary-light) !important;
    }
    
    .btn {
      border-radius: var(--form-element-border-radius);
      font-size: var(--font-rem);
    }
  }



  .col-md-12:has( .field-element-wrapper ):has(:nth-child(5)) > .row {
    flex-direction: column;
  }
  .col-md-12:has( .field-element-wrapper ):has(:nth-child(5)) > .row > div {
    width: 100%;
  }
  .col-md-12:has(.form-check) .field-element-wrapper:has(> *:nth-child(5)) {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 0;
    gap: .2rem .5em;
    padding-left: 3.5%;
  }
  .col-md-12:has(.form-check) .field-element-wrapper:has(> *:nth-child(5)) > div {
    flex-basis: 32%;
    margin: 0;
  }


  .other-wrapper {
    flex-basis: 100% !important;
    display: flex;
    flex-wrap: wrap;
    gap: .2em .5em;
  }
  .other-wrapper > label {
    align-content: center;
  }

  .other-wrapper > label,
  .col-md-12:not(:has( .field-element-wrapper ):has(:nth-child(4))) > .row div:first-child {
    flex-grow: 0;
  }
  .col-md-12:not(:has( .field-element-wrapper ):has(:nth-child(4))) > .row div:first-child:has(label.form-label) {
    min-width: 25ch;
  }

  .row.gx-5.mt-1:has(h4[id^="section-"]) > div:empty {
    padding:0;
  }
  .row.gx-5.mt-1 .field-element-wrapper {
    position: relative;
    margin-top: 1.5rem !important;
  }
  .row.gx-5.mt-1 h4[id^="section-"] {
    display: inline-block;
    padding: .25em .5em;
    border-radius: 0;
    background: var(--color-primary-light);
    border: 2px solid var(--bs-dark-border-subtle);
    border-radius: 5px;
    margin: 0 !important;
  }

  .row.gx-5.mt-1 h4[id^="section-"]::after {
        display: inline-flex;
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        width: calc(100% - 50px);
        height: 2px;
        background: var(--bs-dark-border-subtle);
        z-index: -1;
  }

  .row.gx-5.mt-1:has(.file-upload-wrapper) {
    align-items: center;
  }
  .row.gx-5.mt-1:has(.file-upload-wrapper) > div:first-child {
    flex-basis: 25%;
    flex-grow: 1;
  }
  .row.gx-5.mt-1:has(.file-upload-wrapper) > .field-element-wrapper {
    flex-basis: 73%;
    flex-grow: 2;
  }
  .row.gx-5.mt-1 .file-upload-wrapper.mb-3, .form-group:has(> .file-upload-wrapper) {
    margin-bottom: 0 !important;
  }
  .field-element-wrapper > .form-group > .file-upload-wrapper {
    width: 100% !important;
  }

  .container-fluid > .row {
    flex-wrap: nowrap;
  }

  #header-menu .menu-item > a {
      color: var(--color-dark) !important;
  }
}

.is-theme-dark {
  background-color: var(--color-theme-black);
  color: #f5f5f5;

  /* Typography */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li {
      color: #f5f5f5;
  }

  .breadcrumb-item.active a {
    color: var(--color-text-dark);
  }
  
  .inline-toolbar-wrapper {
    background: transparent;
  }

  .menu-item.current {
    background-color:var(--color-dark);
  }

  .form-control:focus {
    color: var(--color-text-dark);
  }

  .sidebar-content .nav li.menu-item {
    padding: 0.5rem 1rem;
    border: none;
  }

  .sidebar-content .nav li.menu-item a {
    color: var(--color-text-dark) !important;
  }

  .sidebar-content .nav li.menu-item.current a {
    color: var(--color-text-dark) !important;
  }

  .sidebar-section-header {
    background: var(--color-primary);
  }

  .navbar {
    background-color: var(--color-primary);
  }

  .sidebar-content .nav li.menu-item a i {
    color: var(--color-gray);
  }

  .sidebar-content .nav li.menu-item a i.fa-circle {
    color: var(--color-primary);
  }

  .sidebar-content .nav li.menu-item:hover a i.fa-circle {
    color: var(--color-text-dark);
  }

  /* Links */
  a {
      color: #80cbc4;
  }
  a:hover {
      color: #4db6ac;
  }

  /* Buttons */
  button,
  input[type="submit"],
  .wp-block-button__link {
      background-color: #333;
      color: #fff;
      border-bottom: 1px solid #555;
  }

  button:hover,
  input[type="submit"]:hover,
  .wp-block-button__link:hover {
      background-color: #444;
      border-color: #666;
  }

  /* Forms */
  input,
  textarea,
  select {
      background-color: #1e1e1e;
      color: #f5f5f5;
      border-bottom: 1px solid #444;
  }

  /* Navigation */
  nav,
  .menu,
  .main-navigation {
      background-color: #1a1a1a;
  }

  nav a,
  .menu a {
      color: #f5f5f5;
  }

  /* Header / Footer */
  header,
  footer {
      background-color: #1c1c1c;
      color: #eee;
  }

  .action-button-row-wrapper {
    background: transparent;
  }

  .breadcrumb-item.active a {
    color: var(--color-text-dark);
  }

  /* Gutenberg Blocks */
  .wp-block {
      background-color: transparent;
      color: inherit;
  }

  .wp-block-quote {
      border-left: 4px solid #4db6ac;
      background-color: #1e1e1e;
  }

  /* Tables */
  table {
      background-color: #1e1e1e;
      color: #fff;
  }
  table thead {
      background-color: #2a2a2a;
  }
  table td,
  table th {
      border: 1px solid #444;
  }
}

.is-theme-light {
  /* layout: header */
  header {
    padding: 0;
    display: flex;
    > .container-fluid {
      width: 14rem;
      padding: .5rem .75rem;
    }
    > .navbar {
      width: calc( 100vw - 14rem );
      background: var( --color-primary );
      color: var( --color-lightest-gray );
    }
    .avatar-placeholder {
      background: var( --color-info );
    }
  }

  footer.py-4 {
    background-color: var( --color-primary );
    padding-top: .75rem !important;
    padding-bottom: .75rem !important;
  }
  footer p {
    margin: 0;
  }

  /* layout: sidebar / main */
  #sidebarMenu {
    font-size: .95rem;
    .sidebar-content .nav li.menu-item a {
      font-size: .95rem;
    }
  }
  body > .container-fluid > .row > main.col-md-9.ms-sm-auto.col-lg-10.px-md-4 {
    width: calc( 100vw - 14rem ) !important;
    padding: 0 .75rem !important;
    border-left: 1px solid var( --color-grad-3 );
  }


  .sidebar-logo {
    max-height: 5rem;
    padding: .25rem .5rem !important;
  }
  .sidebar-logo .logo-img {
    max-height: 4.5rem;
    max-width: 90% !important;
    margin: 0 !important;
    width: unset !important;
  }
  main > .content {
    padding: 2rem;
  }
  .me-client-form.inner-container-wrapper {
    margin: 0 !important;
  }
  .form-header-wrapper {
    nav {
      font-size: 16px;
    }
  }


  #sidebarMenu {
    ul.nav li.first-level-menu-item, ul.nav:not(:has(#accordionMenu)) > li {
      padding: .5rem !important;
    }
    h5 {
      background-color: var( --color-grad-3 );
    color: var( --color-dark );
    border-top: 4px solid var( --color-grad-1 );
      margin-top: 0 !important;
    }
    li.menu-item {
      background-color: var( --color-lightest-gray );
      padding: .5em 1px 0 .3em !important;
    }
    li.menu-item:hover,
    .accordion li.menu-item:has( a[aria-expanded="true"] ) {
      background-color: var( --color-grad-3 );
    }
    li li:has(.collapse-item) {
      padding: .5em .2em .5em .4em!important;
    }
    li.menu-item:hover > a {
      font-weight: 400;
      letter-spacing: -0.012em;
    }
    li.menu-item:hover > a > i.fa-circle {
      color: var( --color-secondary ) !important;
    }
    ul > .accordion > li > a {
      padding: 0 .45em .5em .2em;
    }
    .sidebar-content .nav li.menu-item a i {
      color: var( --color-primary );
    }
    ul.nav:not(:has(#accordionMenu)) > li:has(.d-flex) {
      padding-right: .3em !important;
    }
    .collapse-header::after {
      right: .3em;
    }
    .accordion > li .collapse-header {
    margin-left: .4em;
    width: calc( 100% - .4em );
  }
    .accordion > li > .collapse {
      border-left: 4px solid var( --color-dark );
      border-bottom: 4px solid var( --color-dark );
      margin: 0 !important;
      border-radius: 0 0 0 4px;
    }
    .accordion > li {
      padding-left: 0 !important;
    }
    .sidebar-content .menu-item i.fa-dot-circle::before {
      color: var( --color-primary );
    }
    .sidebar-content .menu-item i.fa-dot-circle::after,
    .sidebar-content .menu-item i.fa-circle {
      color: var( --color-grad-2 ) !important;
    }
    .menu-item.current .current, .menu-item.current .active {
      background-color: var(--color-secondary) !important;
    }
    .menu-item.current .current a, .menu-item.current .active a {
      color: #fff !important;
      font-weight: 400;
      letter-spacing: -0.012em;
    }
    .menu-item.current, .menu-item.active i.fa-dot-circle::after {
        color: var( --color-lightest-gray ) !important;
        opacity: .95;
    }
    .menu-item a > i {
      width: unset;
    }
  }


  .me-client-form.inner-container-wrapper {
    > .container-fluid {
      padding: 0;
      --bs-gutter-x: 0;
    }
    .gx-5 {
      --bs-gutter-x: 8px;
    }
    .mb-4 {
      margin-bottom: 0 !important;
    }
    .mt-2 {
      margin-top: 0 !important;
    }
    font-weight: 300;
    label {
      font-weight: 450;
    }
    .other-wrapper > label,
    .form-check-label {
      font-weight: 300;
    }
  }
  .me-client-form.inner-container-wrapper	> .container-fluid > .row > div:last-child {
    padding: 4rem .75rem !important;
  }


  .inline-toolbar-wrapper {
    padding: 0;
    background: var( --color-lightest-gray );
    border-bottom: 2px solid var( --color-grad-3 );
    font-size: .85rem;
    .mb-2 {
      margin-bottom: 0 !important;
    }
    .form-group {
      padding: .3rem .2rem;
      margin-bottom: 0;
    }
  }

  .switch-toggle.switch-candy {
    background: transparent;
    label {
      margin-right: .6rem;
      border-radius: var( --bs-border-radius-sm );
    }
    label:last-child {
      margin-right: 0;
    }

    label .fa {
      line-height: 1rem;
      min-width: 1.4rem;
      text-align: center;
    }
  }

  #main-form-wrapper {
    select, input, textarea {
      background-color: var( --color-light-gray );
      border: 1px solid var( --color-grad-2 );
      border-radius: var( --form-element-border-radius );
      margin-bottom: 0;
    }
    textarea {
      min-height: 5.3em;
    }
    input[type="radio"] {
      border-radius: 50% !important;
      border-color: var( --color-info );
    }
    input[type="checkbox"] {
      border-radius: .15em;
      border-color: var( --color-info );
    }
    select:focus, input:focus {
      background-color: var( --color-lightest-gray );
    }
    .form-label {
      margin-bottom: 0;
    }
    .row .col-md-12.d-flex:has(.switch-candy) {
      align-items: center;
    }
  }


    .accordion-item {
      padding-bottom: .2rem;
    }
    .accordion-item:has( .show ) {
      padding-bottom: 1.25rem !important;
    }
    .accordion-item > .row {
      padding: .5rem !important;
    }
    select.measurement-input {
      font-size: .9rem;
      max-width: 8ch;
      padding: .5rem 2ch .5rem .25rem;
      background-position-x: 95%;
    }
    h2.accordion-header button {
      background-color: var( --color-secondary ) !important;
      font-weight: 500;
      padding: .6rem .5rem;
    }
  h2.accordion-header button[aria-expanded="true"] {
      color: #fff;	
  }
    h2.accordion-header button.collapsed {
      background-color: var( --color-lightest-gray ) !important;
      color: var( --color-dark );
      font-weight: 400;
    }
    .accordion-button::after {
      background-color: #fff;
      border-radius: 50%;
      border: 2px solid #fff;
      background-size: 1rem;
      background-position-y: .05em;
    }
    .accordion-button:not(.collapsed)::after {
    }
    .accordion-collapse {
      padding: .5rem !important;
    }


  .action-button-row-wrapper {
    border-top: 5px solid var( --color-primary );
    margin-left: -.75rem;
    margin-right: -.75rem;
    padding: .75rem .5rem .5rem;
    > div {
      margin-top: 0 !important;
      padding: 0;
    }
  }



  .col-md-12:has( .field-element-wrapper ):has(:nth-child(5)) > .row {
    flex-direction: column;
  }
  .col-md-12:has( .field-element-wrapper ):has(:nth-child(5)) > .row > div {
    width: 100%;
  }
  .col-md-12:has(.form-check) .field-element-wrapper:has(> *:nth-child(5)) {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 0;
    gap: .2rem .5em;
    padding-left: 3.5%;
  }
  .col-md-12:has(.form-check) .field-element-wrapper:has(> *:nth-child(5)) > div {
    flex-basis: 32%;
    margin: 0;
  }


  .other-wrapper {
    flex-basis: 100% !important;
    display: flex;
    flex-wrap: wrap;
    gap: .2em .5em;
  }
  .other-wrapper > label {
    align-content: center;
  }
  .col-md-12:not(:has( .field-element-wrapper ):has(:nth-child(4))) > .row {
    gap: .2em .5em;
  }
  .other-wrapper > label,
  .col-md-12:not(:has( .field-element-wrapper ):has(:nth-child(4))) > .row div:first-child {
    width: fit-content;
    flex-grow: 0;
  }
  .col-md-12:not(:has( .field-element-wrapper ):has(:nth-child(4))) > .row div:first-child:has(label.form-label) {
    min-width: 25ch;
  }

  .row.gx-5.mt-1:has(h4[id^="section-"]) {
    gap: 0;
    border-bottom: 2px solid var( --color-secondary );
  }
  .row.gx-5.mt-1:has(h4[id^="section-"]) > div:empty {
    padding:0;
  }
  .row.gx-5.mt-1 h4[id^="section-"] {
    border: 2px solid var( --color-secondary );
    display: inline-block;
    padding: .15em .5em 0;
    margin-left: .25em;
    border-radius: .65em .65em 0 0;
    border-bottom-color: #fff;
    position: relative;
    bottom: -3px;
  }


  .row.gx-5.mt-1:has(.file-upload-wrapper) {
    align-items: center;
  }
  .row.gx-5.mt-1:has(.file-upload-wrapper) > div:first-child {
    flex-basis: 25%;
    flex-grow: 1;
  }
  .row.gx-5.mt-1:has(.file-upload-wrapper) > .field-element-wrapper {
    flex-basis: 73%;
    flex-grow: 2;
  }
  .row.gx-5.mt-1 .file-upload-wrapper.mb-3, .form-group:has(> .file-upload-wrapper) {
    margin-bottom: 0 !important;
  }
  .field-element-wrapper > .form-group > .file-upload-wrapper {
    width: 100% !important;
  }
}

/* Chrome, Safari, Edge, Opera */
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

input[type="checkbox"]:focus {
  outline: none;
}


/* File: wp-content/themes/myhomefx/css/icons.css */

.icon-health {
  display: inline-block;
  width: 24px;
  height: 24px;
  background-color: currentColor;         /* Use the icon color from parent styles */
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.icon-back-pain {
  -webkit-mask-image: url('/wp-content/plugins/me-myothomefx/frontend/assets/icons/back-pain-24px.svg');
  mask-image: url('/wp-content/plugins/me-myothomefx/frontend/assets/icons/back-pain-24px.svg');
}

.icon-autoimmune-disease {
  -webkit-mask-image: url('/wp-content/plugins/me-myothomefx/frontend/assets/icons/autoimmune-disease-24px.svg');
  mask-image: url('/wp-content/plugins/me-myothomefx/frontend/assets/icons/autoimmune-disease-24px.svg');
}


#recommendation-right-menu-wrapper .accordion .accordion-item:first-of-type, #recommendation-right-menu-wrapper .accordion .accordion-item{
  border: 0;

}

#recommendation-right-menu-wrapper  .menu-item a i.fa-circle{
  opacity: 0.4 !important;
}

#section-related-assessment-areas-header,
#section-embed-recommendation-header {
    display: flex;
    align-items: center;
    border: none;
    padding: 0;
    margin-top: 2rem;
}

#section-related-assessment-areas-header::before,
#section-embed-recommendation-header::before {
    content: '';
    flex: 0;
}

#section-related-assessment-areas-header::after,
#section-embed-recommendation-header::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background-color: #ccc;
    margin-left: 0rem;
}

#section-related-assessment-areas-header > span,
#section-embed-recommendation-header > span {
    display: inline-block;
    padding: 0.25rem 1rem 0.40rem;
    background-color: #f8f9fa;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-weight: bold;
    min-width: 350px;
}


.sidebar-content::-webkit-scrollbar {
    width: 0; /* Hide scrollbar for Chrome, Safari, Edge */
}

/* Show scrollbar on hover */
.sidebar-content:hover {
    scrollbar-width: thin;      /* Firefox */
}
.sidebar-content:hover::-webkit-scrollbar {
    width: 8px;                 /* Chrome, Safari, Edge */
}
.sidebar-content:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.4);
    border-radius: 4px;
}
.sidebar-content:hover::-webkit-scrollbar-track {
    background: transparent;
}


.show_group_item{
  cursor: pointer;
}

.group_item_wrapper{
  padding-left: 25px;
}