/* Roboto Font */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

@font-face {
  font-family: 'Roboto';
  src: url('../fonts/Roboto-Regular.woff') format('woff'),
  url('../fonts/Roboto-Medium.woff') format('woff'),
  url('../fonts/Roboto-Bold.woff') format('woff');
  font-weight: 400;
  font-style: normal;
} */

/* ========== FONT-FACE: BW Gradual ========== */
@font-face {
  font-family: 'BW Gradual';
  src: url('../fonts/bw-gradual/BwGradualDEMO-Regular.otf') format('otf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BW Gradual';
  src: url('../fonts/bw-gradual/BwGradualDEMO-Medium.otf') format('otf');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'BW Gradual';
  src: url('../fonts/bw-gradual/BwGradualDEMO-Bold.otf') format('otf');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========== FONT-FACE: DM Sans ========== */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-Regular.ttf') format('ttf');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans/DMSans-BoldItalic.ttf') format('ttf');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
      --font-heading: 'BW Gradual', sans-serif;
	    --font-body: 'DM Sans', sans-serif;

      --deep-teal-1: #002e38;
      --deep-teal-2: #004651;
      --deep-teal-3: #005c68;

      --green: #00ffa4;
      --light-teal-1: #81c0c4;
      --light-teal-2: #abd5d8;
      --light-teal-3: #dae9eb;

      --white: #fff;
      --purple: #865fff;
      --orange: #ffa96e;
}

html{scroll-behavior: smooth;}
body {background-color: var(--white) !important;color: var(--deep-teal-1);font-family: var(--font-body);font-weight: 400;}
h1,h2,h3,h4,h5,h6 {font-family: var(--font-heading);color: var(--deep-teal-1);}

.navbar-prod{display: none;}
.navbar-development,.navbar-local{background-color: var(--white);color: #403e92;}
.navbar-stage{background-color: #dc3545;color: var(--white);}
.navbar-qa{background-color: var(--deep-teal-3);color: var(--white);}
.navbar-preprod{background-color: var(--purple);color: var(--white);}

.navbar-prod + header{top: 0;}
.navbar-prod ~ .container-fluid .bd-sidebar {top: 66px;}
.navbar-prod ~ .bd-layout, .navbar-prod ~ .container-fluid{margin-top: 66px;}
.navbar-prod + header #switch-account-container {top: 73px;}
.navbar-prod + header #hamburger-menu-content {top: 43px;}

#logo img,.bd-navbar .navbar-brand img{max-height: 20px;width: auto;}

.top-nav{position: fixed;left: 0;right: 0;top: 0;z-index: 9;}
.top-nav ul{display: flex;justify-content: center;list-style-type: none;margin-bottom: 0;padding-left: 0;}
.top-nav li{margin: 0 1rem;}
.top-nav li span{font-weight: bold;}

header {position: fixed;left: 0;right: 0;top: 24px;z-index: 9;}
header #textnavHeaderLoggedIn .name {font-size: 0.875rem;color: var(--light-teal-1);margin-right: .5rem;}

#mySidenav .accordion .accordion-body {padding: 1rem;background-color: var(--light-teal-3);}
#mySidenav .accordion .accordion-body ul li a,#mySidenav .accordion .accordion-body ul li a:hover {margin: 0;font-size: .85rem;color: var(--deep-teal-1) !important;}
#mySidenav .accordion .accordion-body ul li a.active-link,#mySidenav .accordion .accordion-body ul li a.bd-links-link:hover, #mySidenav .accordion .accordion-body ul li a.bd-links-link:focus, #mySidenav .accordion .accordion-body ul li a.bd-links-link.active {color: var(--white);font-weight: bold;}

#mySidenav .accordion{height: auto;max-height: 95%;overflow-y: auto;}
#mySidenav .accordion-item .accordion-header .accordion-button h3{margin: 0;font-size: 0.938rem;}
#mySidenav .accordion-item .accordion-header .accordion-button{padding: .5em .5em .5em .7em;background-color: var(--deep-teal-3);color: var(--white);}
#mySidenav .accordion-item,#mySidenav .accordion-item .accordion-header .accordion-button{border-radius: 0;}
.accordion-button:focus{box-shadow: none;}
#mySidenav .accordion-item:first-child h2 a{text-decoration: none;}
#mySidenav .accordion-item:first-child .accordion-header .accordion-button::after{display: none;}
.feature-table .accordion-button,.accordion .accordion-button{padding-left: 1.25rem !important;padding-right: 1.25rem !important;}
.accordion-button:not(.collapsed)::after{background-image: url(../images/minus-solid.svg);width: .75rem;height: .75rem;background-size: .75rem;}
.accordion-button::after{background-image: url(../images/plus-solid.svg);width: .75rem;height: .75rem;background-size: .75rem;}

.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr{border-radius: 0;}
.bd-sidebar{overflow-y: hidden !important;}

.bd-layout,header + .container-fluid{margin-top: 75px;margin-bottom: 29px;}
.bd-title#content,.edit-main.search-main .bd-title{font-size: 1.5rem;color: var(--deep-teal-1);}


/* Filter Form */
.filter-form .input-container {display: flex;gap: 10px;margin-bottom: 1rem;}
.form-control:focus,.form-check-input:focus,.form-select:focus {box-shadow: none !important;}
.filter-form .btn-secondary,.filter-form .btn-primary{font-size: 0.875rem;width: 100px;margin: .25rem;}
.btn-primary,.btn-secondary,.btn-success,.form-check-label{font-size: 0.875rem;}
#selectAllBtn + label{font-size: 1rem;color: var(--deep-teal-1);}
p.text-danger{font-size: .875rem;}

.bd-intro button{font-size: 0.875rem;margin: 0 .5rem .25rem;}

table.dataTable tbody td:last-child span{margin: 0 4px;cursor: pointer;}
table.dataTable tbody td:last-child span i,.fa-trash-alt.delete-icon,.fa-check-square.active-icon{font-size: 1.5rem;}

table.dataTable tbody td:last-child span .fa-pen-to-square,table.dataTable tbody td:last-child span .fa-file-import{color: #0d6efd;}
table.dataTable tbody td:last-child span .fa-eye,.fa-check-square.active-icon{color: var(--deep-teal-3);}
table.dataTable tbody td:last-child span .fa-trash,.fa-trash-alt.delete-icon{color: #dc3545;}
table.dataTable tbody td:last-child span .fa-gears{color: var(--deep-teal-1);}
table.dataTable tbody td:last-child span .fa-route{color: #8540f5;}
table.dataTable tbody td:last-child span .fa-list-check{color: #ffc107;}

.dataTables_length,.dataTables_info,.dataTables_paginate{color: var(--deep-teal-1) !important;}

.cell a {text-decoration: none;}

/* Unauthenticated Login Page */
#unauthenticated header + div{height: calc(100vh - 117px);}
#unauthenticated .order-1 {height: 100%;display: flex;flex-direction: column;justify-content: center;margin: auto;text-align: center;background-color: var(--light-teal-2);}
#unauthenticated .card{width: 360px;margin: 0 auto;}
#unauthenticated h1{font-size: 2.1rem;}
#unauthenticated .card .card-header {background-color: var(--deep-teal-3);}
#unauthenticated h1{font-size: 1.25rem;color: var(--white);}

.card .card-header {border-color: var(--light-teal-1);}

/* Customize the scrollbar */
::-webkit-scrollbar {
  width: 10px; /* Width of the scrollbar */
  height: 10px; /* Height of the scrollbar */
}

::-webkit-scrollbar-track {
  background: var(--light-teal-3); /* Background of the scrollbar track */
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--light-teal-1); /* Color of the scrollbar thumb */
  border-radius: 5px;
  border: 2px solid var(--light-teal-3); /* Adds space around thumb for better appearance */
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--light-teal-1); /* Darker color on hover */
}

/* Optional for Firefox */
/* * {
  scrollbar-width: thin;  */
/* Sets width of scrollbar */
/* scrollbar-color: var(--light-teal-1) var(--light-teal-3); */
/* thumb color and track color */
/* } */

.filter-form .form-group,.form-group {display: flex;flex-direction: column;margin-bottom: 1.5rem;}
#request-dlr.form-check-input{margin-top: -1px;margin-right: 5px;}

/* Simple CSS spinner */
#spinner {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);border: 16px solid var(--light-teal-1);border-radius: 50%;border-top: 16px solid #3498db;width: 120px;height: 120px;animation: spin 2s linear infinite;z-index: 999;}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Footer */
footer {position: fixed;width: 100%;bottom: 0;z-index: 9;border-top: 1px solid var(--light-teal-1);}

.error{color: #dc3545;font-size: 0.875rem;}

.sidenav {
  padding-top: 15px;
  height: 100%;
  /* width: 0; */
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  /* background-color: var(--light-teal-1); */
  overflow-x: hidden;
  /* transition: 0.5s; */
  /* padding-top: 60px; */
  transform: translateX(-100%);
  transition: transform 0.3s ease; /* Smooth animation */
  width: 250px;
}

/* .sidenav a { */
  /* transition: 0.3s; */
/* } */

#main {transition: margin-left .5s;}

#mySidenav.is-active{border: 1px solid var(--light-teal-1);
  height: calc(100% - 90px);
  border-top: 0;transform: translateX(0);
  padding-top: 0;
  margin-top: 1rem;}
#main.is-active{margin-left: 240px;}

#feature thead th,#activity thead th,#generic-table thead th,#userTable tr th{
  position: sticky;
  top: 0;
  /* z-index: 2;  */
  /* Ensure it stays above table content */
  border-top-width: 1px;
  /* border-color: var(--light-teal-1); */
  font-size: .85rem;
  color: var(--deep-teal-1);
  padding: .75rem;
}

#feature tbody td,#activity tbody td,#generic-table tbody td,#userTable td{line-height: 1.462;font-size: .813rem;color: var(--deep-teal-1);}

/* #filter-form-accounts .form-check{margin: auto 0;} */

.card{border: 1px solid var(--light-teal-1);}
.form-label,.card .card-body .form-check-label{font-size: .8rem;color: var(--deep-teal-1);font-weight: 600;}
.card .card-title{color: var(--deep-teal-1);}
/* .card .card-body{background-color: var(--light-teal-3);} */
.card .card-body .form-check-label{margin-top: 3px;color: var(--deep-teal-1);}
.form-control,.form-select,.select2-selection__rendered{font-size: .875rem;color: var(--deep-teal-1) !important;line-height: 1.6;border-radius: .35rem;padding: .6rem;}
.select2-container .select2-selection--single{height: 43px !important;}
.select2-container--default .select2-selection--single .select2-selection__arrow{top: 10px !important;}
.form-select {
  padding-right: 25px; /* Space for the caret */
  text-overflow: ellipsis; /* Add three dots */
  white-space: nowrap; /* Keep text on a single line */
  overflow: hidden; /* Hide overflowing text */
  appearance: none; /* Hide default browser caret */
  -webkit-appearance: none; 
  -moz-appearance: none;
  background-size: 12px; /* Adjust icon size */
}

h4#results-heading{font-size: 1.25rem;color: var(--deep-teal-1);word-wrap: break-word;word-break: break-word;margin-right: 1rem;overflow: auto;max-height: 100px;}
#status-messages{word-wrap: break-word;word-break: break-word;overflow: auto;max-height: 100px;font-weight: bold;width: 100%;}
/* .alert-danger,.alert-warning{background-color: #dc3545;color: var(--white);border: 1px solid #dc3545;} */
.alert-success{background-color: var(--deep-teal-1);color: var(--white);border: 1px solid var(--deep-teal-1);}
#block-action + .create-new-record {width: 110px;margin: auto;}

.feedback {color: #dc3545;}
.radlist {margin-top: 30px;}
.section-header {font-size: 1.25rem;font-weight: 600;margin-top: 20px;margin-bottom: 20px;}
#custom-datetime-start, #custom-datetime-end {font-size: .75rem;}
.reminder {font-size: 0.8rem;color: var(--light-teal-3);padding-left: 34px;}
.full_width{width: 100%;}

/* Optional: Add some extra styling */
.section-box {
  border: 0px solid var(--light-teal-2);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
}
.section-box .section-header {
  font-size: 1.25rem;
  margin-bottom: 15px;
  font-weight: bolder;
}
.section-box label {
  font-size: 1rem;
  color: var(--deep-teal-1);
  font-weight: bold;
  margin-bottom: 10px;
  margin-top: 15px;
}
.section-box input,
.section-box select,
.section-box textarea,
.section-box button {margin-bottom: 20px ;}




.secondary-content {
  display: none;
  padding: 10px;
  background-color: var(--light-teal-3);
  display: flex;
  flex-wrap: wrap;
}
.secondary-content div {
  flex: 1 1 25%; /* 4 columns */
  padding: 10px;
  box-sizing: border-box;
}


.center-container {
  display: grid;
  place-items: center; /* Center both horizontally and vertically */
}

#new-record-button{border-color: transparent !important;}
#new-record-button .fa-solid:focus-visible {outline: none;}
#new-record-button:disabled .fa-circle-plus{color: var(--light-teal-3) !important;}

#new-subaccount-button{color: var(--deep-teal-3);
    border: 1px solid;
    border-radius: 50%;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;}

.btn-no-bg {
  background-color: transparent;
  border: none;
  color: inherit; /* inherit color from parent or set explicitly */
  padding: 0; /* Remove padding if needed
padding: 0; /* Remove padding if needed */
}

/* Filter Form CSS */

.text-field {
  position: relative;
}

/* .filter-form .text-field input {
  display: inline-block;
  border: thin solid var(--light-teal-3);
  border-bottom: solid medium #999;
  color: var(--light-teal-2);
  background-color: var(--light-teal-3);
  padding: 10px 10px 10px 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
} */

/* .filter-form input:focus {
      border: thin solid var(--green);
      border-bottom: solid medium var(--green);
      background-color: var(--white);
} */

.text-field label {
  position: absolute;
  /* pointer-events: none; */
  left: 10px;
  top: 10px;
  transition: 0.2s;
}

.text-field input:focus ~ label,.text-field input ~ label,.text-field select:focus ~ label,.text-field select ~ label,.text-field select:disabled ~ label,.text-field input:disabled ~ label,
.text-field textarea:focus ~ label,.text-field textarea ~ label,.text-field select:focus ~ label,.text-field select ~ label,.text-field select:disabled ~ label,.text-field textarea:disabled ~ label
{
  top: -10px;
  left: 8px;
  font-size: small;
  background-color: var(--white);
  /* background: linear-gradient(to bottom, var(--light-teal-3) 56%, var(--white) 47%); */
  padding:0 5px 0 5px;
  width: auto;
}

.user-role-admin #mySidenav .accordion-item:first-child .accordion-button::after{display: none;}
.user-role-admin #mySidenav .accordion-item:first-child a{text-decoration: none;}
.user-role-admin #mySidenav .accordion-item a .accordion-button{background-color: var(--deep-teal-3);color: var(--white);}
.user-role-admin #mySidenav .accordion-item:first-child a.active-link .accordion-button{background-color: var(--deep-teal-3);}

.user-role-parent header{top: 0;}
.user-role-parent #mySidenav.is-active{margin-top: 0;}
.user-role-parent .bd-layout,.user-role-parent header + .container-fluid {margin-top: 55px;}

.form-select:disabled,.form-control:disabled {background-color: var(--light-teal-3);}

#feature,#activity,#generic-table{max-height: 700px;overflow-y: auto;display: block;margin-bottom: 1rem;}

#accordionPanelsStayOpenExample .accordion-header .accordion-button h4{font-size: 1rem;color: var(--white);margin-bottom: 0;}


.accordion-button:not(.collapsed),.accordion-item .accordion-button.collapsed{background-color: var(--deep-teal-3);color: var(--white);font-weight: bold;}

.accordion-body{color: var(--deep-teal-1);}
.filter-form .btn{line-height: 1;border-radius: 50rem;}

.btn-primary {color: var(--white);background-color: var(--deep-teal-3);border-color: var(--deep-teal-3);}
.btn-primary:hover {color: var(--deep-teal-3);background-color: var(--white);border-color: var(--deep-teal-3);}

.btn-secondary {color: var(--white);background-color: var(--light-teal-1);border-color: var(--light-teal-1);}
.btn-secondary:hover {color: var(--light-teal-1);background-color: var(--white);border-color: var(--light-teal-1);}

.btn-success {color: var(--white);background-color: var(--deep-teal-1);border-color: var(--deep-teal-1);}
.btn-success:hover {color: var(--deep-teal-1);background-color: var(--white);border-color: var(--deep-teal-1);}

/* .btn-danger {color: var(--white);background-color: var(--orange);border-color: var(--orange);}
.btn-danger:hover {color: var(--orange);background-color: var(--white);border-color: var(--orange);} */

.fa-circle-plus{color: var(--deep-teal-1);}

#expand-all,#collapse-all{font-size: .825rem;line-height: 1;border-radius: 50rem;}
#login{background-color: var(--light-teal-1);color: var(--white);border-color: var(--light-teal-1);font-weight: 700;}
#login:hover{background-color: var(--white);color: var(--light-teal-1);border-color: var(--light-teal-1);}

.fa-circle-info{color: var(--deep-teal-1);}

/* OR vertical line */
.line-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.codes .line-container::before,
.codes .line-container::after {
  content: "";
  width: 1px;
  height: 100px;
  background-color: var(--light-teal-2);
  display: block;
}

.codes .text {
  font-size: 18px;
  font-weight: bold;
  margin: 5px 0;
  color: var(--light-teal-2);
}

.codes .row.justify-content-between .row:first-child{width: 33%;}
.codes .row.justify-content-between .row:last-child{width: 66%;}

/* LongCodes OR vertical line */

.longcodes .longcodes-line::before,
.longcodes .longcodes-line::after {
  content: "";
  width: 1px;
  height: 10px;
  background-color: var(--light-teal-2);
  display: block;
}

.longcodes .text {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: var(--light-teal-2);
}

.longcodes .d-flex.justify-content-between .row{width: 50%;}

.form-check-input, .userAuthChecks,.form-check-input:focus,input[type="checkbox"]{
  background-color: var(--white);
  border-color: var(--deep-teal-3);
  width: 1.25rem;
  height: 1.25rem;
  border-width: thin;
  margin-top: 0;
}
.form-check-input:checked {
    background-color: var(--deep-teal-3);
    border-color: var(--deep-teal-3);
}
.form-check-input:checked[type="checkbox"],input[type="checkbox"]:checked {
  --bs-form-check-bg-image: url('../images/tick.png');
  background-image: var(--bs-form-check-bg-image);
  background-size: contain; /* Ensures the image fits within the checkbox */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-position: center; /* Centers the image */
  background-color: var(--white);
  border-color: var(--deep-teal-3);
  margin-top: 0;
}
.form-check-input:active{filter: none;}
.form-check-input:disabled {
  background-color: var(--light-teal-3);
  /* border-color: var(--light-teal-3); */
}

/* Route Actions OR vertical line */

.routeactions .line-container::before,
.routeactions .line-container::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: var(--light-teal-3);
  display: block;
}

.routeactions .text {
  font-size: 18px;
  font-weight: bold;
  margin: 0;
  color: var(--light-teal-3);
}

.routeactions .right-panel,.routeactions .left-panel{width: 48%;}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 16px;
}

#reply-help ~ label span,#reply-stop ~ label span{color: #72cff2;}

span.blue{color: var(--deep-teal-1);}

.select2-container--default .select2-selection--single{border: 1px solid #dee2e6 !important;}

.checkbox-grid{display: flex;flex-wrap: wrap;}
.checkbox-grid .form-check-input{margin-top: 0;}