@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

a:hover {
    background-color: transparent !important;
    color: var(--secondary);
}
a:active {
    background-color: transparent !important;
    color: var(--white);
}
body {
    font-family: Montserrat, sans-serif, FontAwesome;
    font-size: 13px;
    font-weight: 500;
}
header, main {
    width: 100%;
    max-width: 100% !important;
}
header div a {
    color: var(--white);
    text-decoration: none;
    font-weight: 300;
    font-size: 16px;
}
input {
    border: 0 none;
    border-radius: 10px;
    padding: 5px;
}

#dropdownAdministrationUl {
    min-width: 260px;
}
#dropdownSystemUl {
    min-width: 215px;
}
#headerLogo {
    height: 42px;
    width: 42px;
    display: inline-block;
}
#headerMenu {
    display: inline-block;
    margin-top: -20px;
}
#CookieAlertOffcanvas {
    background-color: var(--whiteBG);
}

.currentPageHeader {
    text-decoration: underline;
}
a.active {
    color: #333333 !important;
    background-color: var(--whiteBG);
}

.bigButton {
    /*font-size: 5rem; !* Adjust the font size as needed *!*/
    /*padding: 20px 40px; !* Adjust padding for larger buttons *!*/
    transform: scale(1.5);
}

.card-body{
    color: black;
    background-color: var(--white);
}

.colPicker{
    height: 50px;
    width: 50px;
}

/*custom modal styling*/
.diplaModal .modal-content {
    background-color: var(--white);
}

.diplaModal .modal-title {
    color: black;
}
.diplaModal .modal-header {
    border-bottom: var(--bs-modal-footer-border-width) transparent var(--whiteBG);
    padding-bottom: 0px;
}

.diplaModal .modal-footer {
    border-top: var(--bs-modal-footer-border-width) transparent var(--whiteBG);
    padding-top: 8px;
    padding-bottom: 8px;

}
/*custom modal END*/

.dropdown-item {
    color: var(--primary);
}

.dropdown-item.active, .dropdown-item:active{
    background-color: var(--whiteBG)
}

/*.dropdown-item.active:hover{*/
/*    background-color: var(--white) !important;*/
/*}*/

.dropdown-menu {
    border-color: lightgray;
    background-color: var(--white);
}



.dropdown-menu li a {
    font-size: 13px !important;
}

.dropdown-menu li:hover,li:focus {
    background: white;
    /*border-radius: 0.25rem; same as rounded border, doesnt look nice on top/bottom*/
    /*border-radius: 0.725rem; !* exaggerated border for nicer formatting *!*/

     /*makes background box align but also ruins text format a bit*/
    margin-left: 5%;
    margin-right: 5%;
}

.dropdown-menu li:hover a,li:focus a {
    color: var(--primary);

}

.dropdown-menu {
    z-index: 99999 !important;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: fixed;
    left: 95%;
}

.dropdown-menu > li:hover > .dropdown-submenu {
    display: block;
}

.dt-buttons {
    margin-left: -8px;
}

.form-control:disabled {
    background-color: var(--whiteBG);
}

/*we can attempt to add a checkmark with our own custom coloured one but this means we also have to find a way to hide the old default one first*/
/*.form-check {*/
/*    background: #FFFFFF url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23fd7e14" d="M192 384c-8.188 0-16.38-3.125-22.62-9.375l-160-160c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L192 306.8l137.4-137.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-160 160C208.4 380.9 200.2 384 192 384z"/></svg>') right 1rem center/8px 15px no-repeat;*/
/*    stroke: #fd7e14 !important;*/
/*}*/

::placeholder {
    color: var(--primary);
    font-weight: normal;
}

.bold-placeholder::placeholder {
    font-weight: bold;
}

.headerDropdown{
    display: inline-block !important;
}
.headerDropdown hr {
    background-color: var(--primary);
}

.nav-tabs .tab-pane{
    border:solid 1px black;

}

.nav-link:focus, .nav-link:hover, .nav-link:active {
    color: var(--primary);
}

.nav-tabs {
    margin-left: 54px;
    border-bottom: 0px;
    border:transparent; !important;
}

.nav-tabs li a {
    background-color: var(--whiteBG) !important;
    color: var(--primary);
    border-color: transparent !important;
    text-transform: uppercase;
}

.nav-tabs li a:hover{
    background-color: var(--tabBg) !important;
}

.nav-tabs li a.active  {
    background-color: var(--white) !important;
    color: var(--primary) !important;
}

/*TABLE FORMATTING START*/


/*.dataTables_wrapper .dataTables_scroll {*/
/*    margin-left: 50px;*/
/*}*/

.dataTables_wrapper .dataTables_scrollHead{
    /*padding-left: 20px;*/
}
.dataTables_wrapper .dataTables_scrollBody{
    /*padding-left: 30px;*/
}


/*table.dataTable thead>tr>th.sorting, table.dataTable thead>tr>th.sorting_asc, table.dataTable thead>tr>th.sorting_desc, table.dataTable thead>tr>th.sorting_asc_disabled, table.dataTable thead>tr>th.sorting_desc_disabled, table.dataTable thead>tr>td.sorting, table.dataTable thead>tr>td.sorting_asc, table.dataTable thead>tr>td.sorting_desc, table.dataTable thead>tr>td.sorting_asc_disabled, table.dataTable thead>tr>td.sorting_desc_disabled{*/
/*    padding-left: 50px;*/
/*}*/

div.dtfc-left-top-blocker, div.dtfc-right-top-blocker {
    background-color: inherit;
}

#example_wrapper > div > div.dataTables_scrollHead > div > table > thead > tr.headerFields > th.select-checkbox.sorting_disabled.sorting_asc.dtfc-fixed-left {
    position: relative !important;
}

table.dataTable.table-striped>tbody>tr.selected>* {
    box-shadow: inset 0 0 0 9999px var(--tabBg);
}
table.dataTable.table-striped>tbody>tr.odd.selected>* {
    box-shadow: inset 0 0 0 9999px var(--tabBg);
}
table.dataTable td {
    margin-left: 50px !important;
}
table.dataTable thead th, table.dataTable thead td {
    border-bottom: 1px solid var(--whiteBG);
}

table.dataTable tbody tr:nth-child(odd){
    background-color: white;
}
table.dataTable tbody tr:nth-child(even){
    background-color: var(--whiteBG);
}

table.dataTable tbody tr>.dtfc-fixed-left, table.dataTable tbody tr>.dtfc-fixed-right {
    background-color: inherit;
}

table.dataTable thead tr>.dtfc-fixed-left, table.dataTable thead tr>.dtfc-fixed-right, table.dataTable tfoot tr>.dtfc-fixed-left, table.dataTable tfoot tr>.dtfc-fixed-right {
    background-color: inherit;
}


table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
    content: "✓";
    font-size: 20px;
    margin-top: -25px;
    margin-left: -6px;
    text-align: center;
    text-shadow: 1px 1px var(--primary), -1px -1px var(--primary), 1px -1px var(--primary), -1px 1px var(--primary);
    /*text-shadow: 1px 1px #b0bed9, -1px -1px #b0bed9, 1px -1px #b0bed9, -1px 1px #b0bed9;*/
}

.tableFilterIcon {
    max-width: none;
    height: 20px;
    vertical-align: unset;
}

.tabTitle {
    color: black;
    margin-left: 15px;
    margin-bottom: 5px;
}

.table-striped>tbody>tr:nth-of-type(even)>* {
    color: var(--bs-table-striped-color);
}
tbody > tr > td.select-checkbox.sorting_1 {
    width: 21px !important;
}

table.dataTable tbody td.select-checkbox:before, table.dataTable tbody th.select-checkbox:before {
    /*margin-left: 6px;*/
}

table.dataTable tr.selected td.select-checkbox:after, table.dataTable tr.selected th.select-checkbox:after {
    /*margin-left: 6px;*/
}

.table>:not(caption)>*>* {
    background-color: transparent;
}

/*TABLE FORMATTING END*/

.wideHr {
    height: 3px !important;
    background-color: var(--secondary);
}

/*styling for inputs that dont conform to form rules*/
.writeOnly{
    background-color: white !important;
}

/*Bootstrap Overrides*/

:root {
    /*--primary: #69BCB6;*/
    /*--primaryBG: #56B3AD;*/
    --primary: #5BA49E;
    --primaryBG: #56B3AD;
    --primaryLite: #69BCB6;
    --primaryExtraLite: #BEE2DF;
    --tablePrimaryLite: #A2D5D2;
    --tablePrimaryExtraLite: #BEE2DF;
    --secondary: #666666;
    --purewhite: #ffffff;
    --white: #F4F4F4;
    --whiteBG: #E2E2E2;
    --red: #C0666E;
    --hoverBG: #DFDDDD;
    --tabBg: #C1C1C1;
    --textBg: #E6E6E6;
    --bsBlack: #212529;
    --bsGray: #6c757d;
    --layerForeFill: #E6D2BB;
    --layerForeBorder: #CF9451;
    --layerForeOverlayFill: #E1B4B4;
    --layerForeOverlayBorder: #7A1313;
    --tableGroupPrimary: #c48b12;
    --tableElementGroupPrimary: #d0623d;
    --tableElementDetailPrimary: #40706C;
    --tableElementPsuedoPrimary: #AD4050;
    --tableAdInfoPrimary: #54a66e;
    --tableRegistrationsPrimary: #694b60;
    --tableWfPrimary: #AF556B;
    --tableWoPrimary: #46dccd;
}

/*big checkbox bootstrap override*/
:root label.checkbox-bootstrap input[type=checkbox] {
    /* hide original check box */
    opacity: 0;
    position: relative;
    /* find the nearest span with checkbox-spacing class and draw custom checkbox */
    /* draw checkmark before the span placeholder when original hidden input is checked */
    /* disabled checkbox style */
    /* disabled and checked checkbox style */
    /* when the checkbox is focused with tab key show dots arround */
}
:root label.checkbox-bootstrap input[type=checkbox] + span.checkbox-spacing {
    width: 14px;
    height: 14px;
    border: 1px solid;
    border-radius: 3px;
    /*checkbox border color*/
    border-color: #737373;
    background-color: white !important;
    display: inline-block;
    cursor: pointer;
    margin: 0 7px 0 -20px;
    vertical-align: middle;
    text-align: center;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-spacing {
    background: white;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked + span.checkbox-spacing:before {
    display: inline-block;
    position: relative;
    vertical-align: text-top;
    width: 5px;
    height: 9px;
    /*checkmark arrow color*/
    border: solid white;
    border-width: 0 2px 2px 0;
    /*can be done with post css autoprefixer*/
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    content: "";
}
:root label.checkbox-bootstrap input[type=checkbox]:disabled + span.checkbox-spacing {
    background: white;
    border-color: white;
}
:root label.checkbox-bootstrap input[type=checkbox]:checked:disabled + span.checkbox-spacing {
    background:  white;
    border-color: white;
}
:root label.checkbox-bootstrap input[type=checkbox]:focus:not(:hover) + span.checkbox-spacing {
    outline: 1px dotted black;
}
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox] + span.checkbox-spacing {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    /*checkbox border color*/
    border: 2px solid var(--primaryLite);
}
:root label.checkbox-bootstrap.checkbox-lg input[type=checkbox]:checked + span.checkbox-spacing:before {
    width: 9px;
    height: 10px;
    /*checkmark arrow color*/
    border: solid var(--primaryLite);
    border-width: 0 3px 3px 0;
}

.form-select{
    display: block;
    width: 100%;
    padding: 0.375rem 0.75rem !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-primary {
    background-color: var(--primary);
    border-color: var(--primaryBG);
}
.btn-primary:hover {
    background-color: var(--primary) !important;
    border-color: var(--primaryBG);
}
.btn-primary:focus {
    background-color: var(--primary);
    border-color: var(--primaryBG);
}
.btn-primary:disabled {
    background-color: var(--primary);
    border-color: var(--primaryBG);
}

.btn-outline-primary {
    color: var(--primary);
    background-color: transparent;
    border-color: var(--primaryBG);
}
.btn-outline-primary:hover {
    color: var(--primary);
    background-color: transparent;
    border-color: var(--primaryBG);
}
.btn-outline-primary:focus {
    color: var(--primary);
    background-color: transparent;
    border-color: var(--primaryBG);
}
.btn-outline-primary:disabled {
    color: var(--primary);
    background-color: transparent;
    border-color: var(--primaryBG);
}

.btn-danger {
    background-color: var(--red);
    border-color : var(--red);
}
.btn-danger:hover {
    background-color: var(--red);
    border-color : var(--red);
}
.btn-danger:focus {
    background-color: var(--red);
    border-color : var(--red);
}

.btn-link{
    color: var(--primaryBG);
}

.btn-selection:disabled {
    background-color: var(--bsGray);
    border-color: var(--bsGray);
}

.btn-light-imp {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--primaryLite);
    font-weight: 400;
    font-size: 18px;
}
.btn-light-imp:active{
    color: white;
    background-color: var(--primary);
}
.btn-light-imp:hover {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}
.btn-light-imp:focus {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}
.btn-light-imp:disabled {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}
.btn-light-imp-qs {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
    font-weight: 400;
    font-size: 18px;
    width: calc(100% - 80px);
}
.btn-light-imp-qs:active{
    color: white;
    background-color: var(--primary);
}
.btn-light-imp-qs:hover {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}
.btn-light-imp-qs:focus {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}
.btn-light-imp-qs:disabled {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}

.btn-light-imp-w {
    color: var(--primary) !important;
    background-color: var(--purewhite) !important;
    border-color:  var(--bs-border-color) !important;
    font-weight: 400 !important;
    font-size: 18px !important;
}
.btn-light-imp-w:active{
    color: white !important;
    background-color: var(--primary) !important;
}
.btn-light-imp-w:hover {
    color: var(--primary);
    background-color: var(--purewhite) !important;
    border-color:  var(--white);
}
.btn-light-imp-w:focus {
    color: var(--primary);
    background-color: var(--purewhite);
    border-color:  var(--white);
}
.btn-light-imp-w:disabled {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}

.btn-light {
     color: var(--primary);
     background-color: var(--white);
     border-color:  var(--primaryLite);
     font-weight: 400;
     font-size: 18px;
 }
.btn-light-big-border {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--primaryLite);
    border-width: medium;
    font-weight: 400;
    font-size: 18px;
}
.btn-light:active{
    color: white !important;
    background-color: var(--primary);
}
.btn-light:hover {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}
.btn-light:focus {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}
.btn-light:disabled {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}

.btn-light-no-bgc {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--primaryLite) !important;
    font-weight: 400 !important;
    font-size: 18px !important;
}

.btn-light-no-bgc:disabled {
    color: var(--primary);
    background-color: var(--white);
    border-color:  var(--white);
}

.btn-xs {
    color: var(--primary);
    border: transparent;
    background-color: var(--white);
}

.btn-form {
    border-radius: 6px;
    border: none;
    font-size: 16px;
    line-height: 24px;
    padding: .375rem .75rem;
    height: 44px;
    cursor: pointer;
}

.btn-form:disabled {
    display: none;
    background-color: var(--primaryExtraLite);
    cursor: default;
}

.btn-form:hover:not(:disabled) {
    background-color: var(--primaryLite);
}

.btn-no-styles {
    background: transparent;
    border: none;
    color: var(--primary);
    width: 100%;
}

.btn-no-styles:disabled {
    color: var(--secondary);
}

.btn-flex {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
}

.dropdown-menu.custom-dropdown li:hover {
    margin-left: 0;
    margin-right: 0;
}

.dropdown-menu.custom-dropdown li {
    background: transparent;
}

dropdown-menu.custom-dropdown li.disabled:hover {
    background: transparent;
}

.bg-primary {
    background-color:var(--primary) !important;
}
.bg-light {
    background-color: var(--white) !important;
}
.bg-danger {
    background-color:var(--red) !important;
    color:var(--white) !important
}
.txt-danger {
    color:var(--red) !important;
}
/*!*fix for bootstrap xl-10 styling being weird at 1200-1215px~~ */
.col-xl-10 {
flex: 0 0 auto;
max-width: 82.71%;
}

div.dt-button-collection {
    width: auto !important;
}



.dselect-wrapper .dselect-placeholder {
    color: black !important;
    margin-left: -11px !important;
}

.dselect-wrapper .dselect-tag {
    background-color: #f8f9fa !important;
    color:  #989EA4 !important;
}

.dselect-wrapper .dselect-tag-remove {
    color: #989EA4 !important;
}

.custom-textfield,
.custom-textfield:focus,
.custom-numberfield,
.custom-numberfield:focus,
.custom-numberfield:hover {
    color: var(--primary);
    font-size: 18px;
}

.custom-textfield:-webkit-autofill,
.custom-textfield:-webkit-autofill:focus,
.custom-textfield:-webkit-autofill:hover {
    -webkit-text-fill-color: var(--primary);
    -webkit-box-shadow: 0 0 0px 1000px white inset;

}

.custom-textfield:focus +.custom-placeholder {
    opacity: 0;
}
/* Target the calendar icon inside the date input */
.custom-textfield[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(42%) sepia(50%) saturate(500%) hue-rotate(100deg) brightness(90%) contrast(90%);
    cursor: pointer;
}

/* Ensure the input styling matches for all browsers */
.custom-textfield[type="date"] {
    color: var(--primary);
    font-size: 18px;
}

/* Remove default outline for better focus styling */
.custom-textfield[type="date"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--primary);
}

/* Autofill styling for date fields */
.custom-textfield[type="date"]:-webkit-autofill {
    -webkit-text-fill-color: var(--primary);
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}


.custom-textfield-container {
    position: relative;
}

.custom-button {
    background: var(--primary);
    color: white;
    border-radius: 6px;
    border: none;
    font-size: 16px;
    line-height: 24px;
    padding: .375rem .75rem;
    height: 44px;
    cursor: pointer;
}

.custom-button:disabled {
    display: none;
}

.custom-placeholder {
    background-color: transparent;
    color: var(--primary);
    display: inline-block;
    font-family: var(--bs-btn-font-family);
    font-size: 18px;
    font-weight: 400;
    left: 0;
    padding: 0.3em 0.7em;
    pointer-events: none;
    position: absolute;
    top: 0;
}

.existing-value {
    color: #000;
    font-size: 18px;
    font-weight: 500;
}

input.filled,
input.filled:focus,
input.filled.custom-textfield,
input.filled.custom-textfield:-webkit-autofill,
input.filled.custom-textfield:-webkit-autofill:focus,
input.filled.custom-textfield:-webkit-autofill:hover,
input.filled.custom-textfield:focus,
button.filled,
select.filled,
select.filled:focus,
select.filled.custom-textfield,
select.filled.custom-textfield:-webkit-autofill,
select.filled.custom-textfield:-webkit-autofill:focus,
select.filled.custom-textfield:-webkit-autofill:hover,
.js-bs-select-dropdown.filled > button {
    outline: 1px solid white;
    background-color: var(--primary);
    -webkit-box-shadow: 0 0 0px 1000px var(--primary) inset;
    color: white;
    -webkit-text-fill-color: white;
}

hr {
    margin: 1rem 0;
    color: inherit;
    border: 0;
    border-top: 5px solid;
}

.offcanvas {
    max-height: 200px !important;
}
.rounded-2 {
    border-radius: 25px !important;
}
.rounded-3 {
    border-radius: 40px !important;
}
.roundedButton {
    border-radius: 10px;
}
.roundedButtonLeft {
    border-top-left-radius: 10px 10px !important;
    border-bottom-left-radius: 10px 10px !important;
}
.roundedButtonRight {
    border-top-right-radius: 10px 10px !important;
    border-bottom-right-radius: 10px 10px !important;
}
.roundedButtonLeftRight {
    border-top-left-radius: 10px 10px !important;
    border-bottom-left-radius: 10px 10px !important;
    border-top-right-radius: 10px 10px !important;
    border-bottom-right-radius: 10px 10px !important;
}

.seperateSelectAll, .seperateSelection {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    border-top-left-radius: 10px !important;
    border-bottom-left-radius: 10px !important;
    border: 1px solid var(--white);
    background-color: var(--primaryBG);
}

.seperateSelectAll:hover, .seperateSelection:hover {
    border: 1px solid var(--white);
    background-color: var(--primaryBG);
}

.seperateSelectAll {
    margin-right: 10px;
}

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

/*bsSelect overrides*/

.js-bs-select-dropdown > .dropdown-item.active, .dropdown-item.active:hover, .dropdown-item:active {
    background-color: var(--primary) !important;
}
.js-bs-select-dropdown > .dropdown-item.active:hover, .dropdown-item:active {
    background-color: var(--primary) !important;
}

.bs-select-item:hover, .bs-select-item.active {
    background-color: var(--primary) !important;
}

.tasks__bs-select__menu {
    width: 391px;
}

.js-bs-select-dropdown .dropdown-menu .dropdown-item {
    font-size: 16px;
    text-overflow: ellipsis;
    overflow: hidden;
}

/*image picker overrides*/
.styleShow{
    height: 50%;
    width: 5.5em;
}

ul.thumbnails.image_picker_selector li .thumbnail {
    text-align: center;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border: 3px solid var(--whiteBG) !important;
}
ul.thumbnails.image_picker_selector li .thumbnail.selected{
    background: inherit !important;
    border: 3px solid var(--primary) !important;
}

ul.thumbnails.image_picker_selector li .thumbnail img {
    height:50%;
    width: 5.5em;
}

ul.thumbnails.image_picker_selector li .thumbnail p {
    position: relative;
    height: auto;
}

.w200 {
    width: 200px;
}


 .dt-button-separator {
     border-top: none;
     border-left: none;
     border-right: none;
     border-bottom: 1px solid #ddd; /* Change the border width and color as needed */
     margin: 0; /* Adjust the margin as needed */
 }

.accordion-button:not(.collapsed) {
     background-color: var(--primary) !important; /* Change this to your desired color */
    box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--primaryLite);
 }

.options-toggle-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.options-toggle-container > div {
    display: flex;
    align-items: center;
}

.options-toggle-container span {
    height: 40px;
    align-items: center;
    border: none;
    border-radius: 0 4px 4px 0;
    display: flex;
    justify-content: left;
    border: 1px solid #fefefe;
    border-left: none;
    padding-right: 1rem;
    padding-left: 1rem;
    position: relative;
    left: -4px;
    flex: 1;
}

.options-toggle-button,
.melding-filter-toggle-button {
    align-items: center;
    background-color: #fefefe;
    border: none;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    height: 40px;
    width: 40px;
}

.options-toggle-button:hover,
.melding-filter-toggle-button:hover {
    background-color: #eee;
}

.options-toggle-button > i,
.melding-filter-toggle-button > i{
    pointer-events: none;
}

.options-toggle-button.active,
.melding-filter-toggle-button.active {
    background-color: var(--primary);
    border: 1px solid #fefefe;
}

.options-toggle-button.active + span,
.melding-filter-toggle-button.active + span{
    background-color: var(--primary);
}

#measureType {
    position: absolute;
    display: block !important;
    opacity: 0;
    width: 100%;
    left: 0;
    bottom: 0;
    pointer-events: none;
    z-index: -1;
}

.detail-inline-btn {
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
}

.btn-multi-left,
.btn-multi-center,
.btn-multi-right {
    background-color: var(--primaryBG);
    border: 1px solid white;
    color: white;
}
.btn-multi-left:hover,
.btn-multi-center:hover,
.btn-multi-right:hover {
    background-color: var(--primaryExtraLite);
    border: 1px solid white;
}
.btn-multi-right:hover,
.btn-multi-center:hover {
    border-left: none;
}
.btn-multi-left.selected,
.btn-multi-center.selected,
.btn-multi-right.selected {
    background-color: var(--tableElementDetailPrimary);
}
.btn-multi-left.selected:hover,
.btn-multi-center.selected:hover,
.btn-multi-right.selected:hover {
    background-color: #8dc7c4;
}
.btn-multi-left {
    border-radius: 5px 0 0 5px;
}
.btn-multi-right {
    border-radius: 0 5px 5px 0;
    border-left: none;
}
.btn-multi-center {
    border-radius: 0;
    border-left: none;
}