body {
    margin: 0;
    box-sizing: border-box;
}

:root {
    --BgColor: #11336A;
    --TextColor: #5CE0E6;
    --sidebarbgcolor: #174b9e;
    --HoverBgColor: #2a66c8;
    --lightblue: #eaf2ff;
    --anaphylacticColor: #F44336;
    --lightBgColor: #e8eff2;
}

button:focus {
    outline: unset !important;
    box-shadow: unset !important;
}

/* login page css start here */
.login_bg {
    background: url(../images/login-bg.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: cover;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.form-box {
    display: flex;
    justify-content: space-between;
}

.login_btn button.btn {
    display: flex;
    width: 100%;
    padding: 19px 15px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    background: #46A844;
    color: #FFF;
    text-align: center;
    font-size: 18px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}


.login_form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    border-radius: 20px;
    height: 100%;
    padding: 30px;
}

    .login_form .form_box {
        padding: 60px;
        border-radius: 20px;
        background: #FFF;
        box-shadow: 0px 6px 50px 0px rgba(0, 0, 0, 0.34);
        max-width: 600px;
        width: 600px;
    }

.form_logo {
    text-align: center;
    margin-bottom: 30px;
}

.form_box h3 {
    color: #000;
    font-family: Poppins;
    font-size: 30px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: 0;
}

.form_box p {
    color: #585858;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.form_box .form-group label {
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 4px;
}

.form_box .form-group input {
    border-radius: 10px;
    border: 1px solid #AAAAAB;
    background: rgba(117, 128, 139, 0.00);
    height: 50px;
}

.form_box .form-group {
    margin-bottom: 20px;
}

.login_btn {
    margin-top: 60px;
}

.login_form .form_box .form-box label.form-check-label {
    color: #000;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.forget_link a {
    color: #14457B;
    text-align: right;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.input-flex input.form-control {
    border: unset;
}

.input-flex {
    display: flex;
    border: 1px solid #AAAAAB;
    height: 50px;
    border-radius: 10px;
}

    .input-flex img {
        padding: 10px;
        width: 38px;
        object-fit: contain;
    }

    .input-flex input.form-control {
        padding-left: unset;
    }

        .input-flex input.form-control:focus {
            outline: unset;
            box-shadow: unset;
        }

/* login page css end here */

/* dashboard css start here */
body {
    background: #F3F8F5;
}

.left_sidebar {
    border-radius: 0px 20px 0px 0px;
    background: var(--sidebarbgcolor);
    box-shadow: 4px 0px 14px 0px rgba(0, 0, 0, 0.04);
    width: 300px;
    margin-left: 0rem;
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    max-width: 300px;
    transition: all .25s ease-out;
}

.right_sidebar {
    width: calc(100% - 300px);
    flex: 1;
    min-height: 100vh;
    min-width: 0;
    margin-left: 300px;
    transition: margin .25s ease-out;
}


.dashboard_flex {
    display: flex;
    width: 100%;
}

.logo_img {
    display: flex;
    padding: 12px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    background: #FFF;
}

    .logo_img img {
        width: 110px;
        height: 69.578px;
        aspect-ratio: 110.00/69.58;
    }

    .logo_img a {
        display: block;
    }

.menu_list ul {
    margin: 28px 0 0 0;
    padding: 0;
}

.menu_list > ul li a {
    display: flex;
    padding: 14px 20px;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    color: #B3B3B3;
    text-decoration: none;
    border-left: 4px solid transparent;
}

    .menu_list > ul li a.active {
        border-left: 4px solid var(--TextColor);
        background: var(--BgColor);
        color: var(--TextColor);
    }

        .menu_list > ul li a.active svg path {
            stroke: #fff;
        }

    .menu_list > ul li a:hover {
        border-left: 4px solid #ffffff40;
        background: #ffffff20;
    }

/* .menu_list ul li a:hover svg path {
    stroke: #fff;
} */

.left_header {
    display: flex;
    align-items: center;
    gap: 20px;
}

    .left_header h3 {
        margin: 0;
        color: #000;
        font-family: Poppins;
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

.right_header h4 span {
    color: #383838;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}

.right_header h4 {
    color: var(--BgColor);
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    margin: 0;
}

.right_header button {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 8px;
    background: rgba(70, 170, 66, 0.13);
    cursor: pointer;
    padding: 5px 15px;
    border: 1px solid rgb(206 235 205);
    box-shadow: -2px 4px 4px #d1d1d1 !important;
}

    .right_header button:focus {
        outline: unset;
        box-shadow: unset;
    }

.right_header {
    position: relative;
}

.header_box {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #C7C6C6;
    padding: 10px 15px;
    /* margin: 0 16px; */
    background: #FFf;
    /* border-radius: 8px; */
    border-left: 1px solid #ededed;
}

.left_header button.btn {
    padding: unset;
}

.body_wrapper {
    padding: 15px 16px 24px;
    min-height: calc(100vh - 54px);
}

.table_header h3 {
    margin: 0;
    color: #383838;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.table_header button.btn {
    display: flex;
    padding: 5px 14px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: var(--BgColor);
    color: var(--TextColor);
}

.table_card {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 4px 4px 0px rgba(219, 210, 210, 0.25);
    padding: 10px 0px;
}

.table_header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(215, 218, 227, 0.40);
    align-items: center;
    padding: 0px 20px 12px 20px;
}

table.table thead tr th {
    padding: 10px;
    color: #303030;
    font-family: Poppins;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(215, 218, 227, 0.30) !important;
    background: rgba(247, 247, 247, 0.50);
    background-color: #dfdfdf80;
}

table.table tbody tr td {
    padding: 10px;
    color: #7E7E7E;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.table_body {
    padding: 20px;
}

.dashboard_flex.sidepanel_collapsed .left_sidebar {
    margin-left: -300px;
}

.dashboard_flex.sidepanel_collapsed .right_sidebar {
    width: 100%;
    margin-left: unset;
}

.left_header button#toggle_button:focus {
    outline: none;
    box-shadow: none;
}

.btn_flex a {
    display: flex;
    width: 30px;
    height: 30px;
    padding: 4px;
    align-items: center;
    gap: 6px;
    border-radius: 4px;
    background: #CFE8FF;
    justify-content: center;
}

    .btn_flex a.delete {
        border-radius: 4px;
        background: #FAD7E1;
    }

.btn_flex {
    display: flex;
    gap: 10px;
}

    .btn_flex a img {
        width: 20px;
        height: 20px;
    }

.form_body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

    .form_body .form-group input, .form_body .form-group select {
        border-radius: 8px;
        border: 1px solid #E0E0E0;
        background: #FFF;
    }

    .form_body .form-group label {
        margin-bottom: 4px;
        color: #333;
        font-family: Poppins;
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
    }

div#clinicmodal .modal-footer button {
    display: flex;
    padding: 10px 34px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 8px;
    background: var(--BgColor);
    border: 1px solid var(--BgColor);
}

    div#clinicmodal .modal-footer button.btn.btn-secondary {
        border-radius: 8px;
        border: 1px solid #6C757D;
        background: #FFF;
        color: #343434;
    }

div#clinicmodal .modal-dialog.modal-dialog-centered.modal-lg {
    border-radius: 20px;
}

div#clinicmodal .modal-content {
    border-radius: 20px;
}
/*div#clinicmodal .modal-footer {
    margin-top: 100px;
}*/
div#clinicmodal .modal-header h5#clinicmodalLabel {
    color: #000;
    font-family: Poppins;
    /*font-size: 20px;
font-style: normal;
font-weight: 600;*/
    line-height: normal;
}

div#clinicmodal .modal-content .modal-footer {
    border-top: 1px solid #E9E9E9;
    /*    padding-inline: 24px;*/
}

.form_box .form-group input::placeholder {
    color: #898383;
    font-family: Poppins;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 100%;
}

.form_box .form-group input:focus {
    outline: none;
    box-shadow: none;
}

.form_box .form-group input:-webkit-autofill {
    background-color: white !important;
}

.menu_list_header ul {
    margin: 0;
    padding: 0;
}

    .menu_list_header ul li {
        list-style: none;
    }


        .menu_list_header ul li a {
            text-decoration: none;
            color: #000;
            text-align: left;
            display: block;
            padding: 10px;
            border-bottom: 1px solid #eee;
            background: #e7f4e7;
            font-size: 14px;
        }

        .menu_list_header ul li button {
            background: #e7f4e7;
        }


.menu_list_header ul {
    margin: 0;
    padding: 0;
    position: absolute;
    left: 0;
    right: 0;
    display: none;
}

.menu_list_header.profile_toggle ul {
    display: block;
    z-index: 10;
    margin-top: 1px;
}

.menu_list_header ul li a:hover {
    background: #003ea1;
    color: #ffffff;
}

.menu_list_header ul li a i {
    margin-right: 4px;
}
/*div#clinicmodal .modal-body {
    padding: 24px;
}*/

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.login_form .input-flex input {
    height: 46px;
}
/* dashboard css end here */



.is-invalid {
    border-color: red !important;
}

.invalid-feedback {
    color: red;
    display: block; /* Ensure it shows when an error occurs */
}

.Dashboard .table_card:first-child {
    max-height: 450px;
    Overflow: auto;
}

.Clinic-Name .clinic-name-btn {
    font-size: 1rem;
    font-weight: 600;
    background: #42b8ff;
    max-width: max-content;
    padding: 6px 24px;
    border: 1px solid #148aff;
    border-radius: 7px;
    color: #fff;
    white-space: nowrap
}

.error-message {
    font-size: 0.875rem;
}


.table-body {
    max-height: 100%;
    Overflow: auto;
}


/*Css for popup model forms button and style change */

div#cliniclocationmodal .modal-content, div#editcliniclocationmodal .modal-content, div#practitonermodal .modal-content, div#editPractitionerModal .modal-content, div#addpatientmodal .modal-content, div#editPatientModal .modal-content {
    border-radius: 20px;
}

div#cliniclocationmodal .modal-footer button, div#editcliniclocationmodal .modal-footer button, div#practitonermodal .modal-footer button, div#editPractitionerModal .modal-footer button, div#addpatientmodal .modal-footer button, div#editPatientModal .modal-footer button {
    display: flex;
    padding: 10px 34px;
    justify-content: center;
    align-items: center;
    gap: 2px;
    border-radius: 8px;
    background: var(--BgColor);
    border: 1px solid var(--BgColor);
    color: var(--TextColor);
}

    div#cliniclocationmodal .modal-footer button.btn.btn-secondary, div#editcliniclocationmodal .modal-footer button.btn.btn-secondary, div#practitonermodal .modal-footer button.btn.btn-secondary, div#editPractitionerModal .modal-footer button.btn.btn-secondary, div#addpatientmodal .modal-footer button.btn.btn-secondary, div#editPatientModal .modal-footer button.btn.btn-secondary {
        border-radius: 8px;
        border: 1px solid #6C757D;
        background: #FFF;
        color: #343434;
    }

div#clinicmodal .modal-content .modal-header, div#cliniclocationmodal .modal-content .modal-header, div#editcliniclocationmodal .modal-content .modal-header, div#practitonermodal .modal-content .modal-header, div#editPractitionerModal .modal-content .modal-header, div#addpatientmodal .modal-header, div#editPatientModal .modal-header {
    border-bottom: 1px solid #E9E9E9;
    padding-inline: 24px;
}

/*Toggle button Start*/

.switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 34px;
}

    .switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

    .slider:before {
        position: absolute;
        content: "";
        height: 26px;
        width: 26px;
        left: 4px;
        bottom: 4px;
        background-color: white;
        -webkit-transition: .4s;
        transition: .4s;
    }

input:checked + .slider {
    background-color: var(--BgColor);
}

input:focus + .slider {
    box-shadow: 0 0 1px var(--BgColor);
}

input:checked + .slider:before {
    -webkit-transform: translateX(26px);
    -ms-transform: translateX(26px);
    transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 34px;
}

    .slider.round:before {
        border-radius: 50%;
    }

/*Toggle button End*/


#editLocationDropdown {
    height: 200px; /* adjust the height as needed */
    overflow-y: auto;
}


/* Customizing all notifications */
.notyf {
    width: 500px; /* Set the desired width */
    height: 70px; /* Set the desired height */
    font-size: 16px; /* Adjust font size if needed */
}

    /* Customizing success notifications specifically */
    .notyf.success {
        background-color: #4caf50; /* Green background for success */
        color: white; /* White text color */
    }

    /* Customizing error notifications */
    .notyf.error {
        background-color: #f44336; /* Red background for error */
        color: white; /* White text color */
    }

    /* Customize dismiss button */
    .notyf .notyf-button {
        font-size: 18px; /* Increase size of dismiss button */
    }


.select2-container--default .select2-selection--multiple {
    background-color: white;
    border: 1px solid #aaa;
    border-radius: 4px;
    cursor: text;
    padding-bottom: 5px;
    padding-right: 5px;
    position: relative;
    max-height: 90px;
    overflow-y: auto;
    overflow-x: hidden;
}


/*9 may 2025*/
.right_header button.logout-button {
    border: none;
    box-shadow: none !important;
    background: #e7f4e7;
    width: 100%;
    border-radius: 0;
    border-bottom: 1px solid #ebebeb !important;
    color: #000;
    padding: 10px 14px;
    font: inherit;
    cursor: pointer;
}

.menu_list_header ul li button:hover {
    background: #003ea1;
    color: #ffffff;
}

.menu_list .logout-button {
    border: none;
    padding: 0;
    color: #c4d1c4;
    padding: 10px 23px;
    font: inherit;
    cursor: pointer;
    background: none;
    text-align: left;
    width: 100%;
}

.menu_list ul li button:hover {
    border-left: 4px solid #ffffff40;
    background: #ffffff20;
}

div#editStateDropdown {
    width: 96%;
}

div#editCityDropdown {
    width: 96%;
}

.dashboard-body-conatiner {
    background-color: #f8fbff;
    padding: 16px;
    margin-top: 16px;
}

.card.card-custome {
    background-color: var(--lightBgColor);
    padding: 24px;
    border-radius: 16px;
}

.left-section-container {
    height: 100%;
}

.sidebar-menu-item {
    background-color: #0F3703;
    padding: 8px;
    height: 100%;
}

.sidebar-menu-list ul {
    list-style: none;
}

    .sidebar-menu-list ul li {
        margin: 4px 0;
        padding: 14px 12px;
        display: flex;
        align-items: center;
        gap: 6px;
        border-radius: 8px;
    }

        .sidebar-menu-list ul li img {
            width: 22px;
            height: 22px;
        }

        .sidebar-menu-list ul li.active {
            background-color: #4DCE47;
        }

h6.card-title {
    color: #000;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

h5.show-actual-data {
    color: #565656;
    font-size: 29px;
    font-style: normal;
    font-weight: 600;
    line-height: 24px;
}

span.menu-name {
    color: #FFF;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

h6.table-heading {
    color: #1E281B;
    font-size: 26px;
    font-style: normal;
    font-weight: 500;
    /* line-height: 52px;*/
    line-height: 40px;
    padding-left: 14px;
    /* margin-top: 16px;*/
}

.data-table-container div.table-responsive {
    border-radius: 12px;
    background: #FFF;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
    padding: 4px;
}

.table-responsive table.table thead tr th {
    background-color: var(--lightBgColor);
}

table.dataTable thead > tr > th.dt-orderable-asc span.dt-column-order:before,
table.dataTable thead > tr > th.dt-orderable-desc span.dt-column-order:before {
    opacity: 1;
}

.table-striped > tbody > tr:nth-of-type(even) td {
    background-color: var(--lightBgColor);
}

.table-striped > tbody > tr:nth-of-type(odd) td {
    background-color: #fff !important;
}

div.table-responsive table.table thead tr th {
    text-align: left;
}



div.table-responsive table.table tbody tr td {
    color: #828282;
    font-size: 14px;
}

.nav-button button {
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-right {
    display: flex;
    align-items: center;
    border-radius: 40px;
    border: 1px solid #D8EBD1;
    background: #E3F6DC;
}

img.profile-image {
    border-radius: 50%;
}

img.img-fluid.card-image {
    width: 100px;
    height: 100px;
}

.right-section-container {
    background-color: #f9fff6;
}

div.dt-layout-table {
    margin-top: 1rem !important;
}


.table > :not(:last-child) > :last-child > * {
    border-bottom: none;
}

.dashboard-container.section-collapse .left-section-main {
    margin-left: -316px;
}

.dashboard-container.section-collapse .right-section-main {
    width: 100%;
}

.table-responsive table.table thead tr th:first-child {
    border-top-left-radius: 10px;
}

.table-responsive table.table thead tr th:last-child {
    border-top-right-radius: 10px;
}

.table-responsive table.table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.table-responsive table.table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.select-box select.form-select {
    padding: 12px;
    border-radius: 8px;
}

div.dt-scroll-body {
    border-bottom: none !important;
}



.input-validation-error {
    border: 1px solid red !important;
}


table thead th {
    white-space: nowrap;
}

/*27-05-2025 new css*/
.acesDnd {
    width: 100%;
    height: calc(100vh - 100px);
    align-content: center;
}

.box_denind {
    width: fit-content;
    margin: 0 auto;
    text-align: center;
}

#profile_toggle_btn.active svg {
    transform: rotate(180deg);
}

@media only screen and (max-width:767px) {
    .right_sidebar {
        margin-left: 0;
    }

    .left_sidebar {
        left: -300px;
    }

    .right_header button {
        gap: 2px;
        padding: 7px;
    }

    .right_header h4 {
        font-size: 12px;
    }

    .dashboard_flex.sidepanel_collapsed .left_sidebar {
        margin-left: 0;
        left: 0;
        z-index: 99;
        top: 57px;
    }

    .left_header h3 {
        font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 95px;
    }
}


.fade-container {
    transition: opacity 0.4s ease;
    opacity: 1;
}

.fade-out {
    opacity: 0;
}

/*.nav-link.btn.active {
    background-color: #0d6efd;
    color: white !important;
}

.nav-link.btn.active {
    background-color: #46aa42;
    color: #fff !important;
    border: 1px solid #46aa42;
}*/


/*.cstmTabGroup ul li {
    margin-left: -1px;
}

    .cstmTabGroup ul li a {
        border: 1px solid var(--BgColor);
        border-radius: 0px;
        color: #000;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    }

    .cstmTabGroup ul li:first-child a {
        border-radius: 5px 0px 0px 5px;
    }

    .cstmTabGroup ul li:last-child a {
        border-radius: 0px 5px 5px 0px;
    }

    .cstmTabGroup ul li a.active {
        background-color: var(--BgColor);
        color: var(--TextColor) !important;
        border: 1px solid var(--BgColor);
    }

        .cstmTabGroup ul li a.active:hover {
            background: var(--HoverBgColor);
            color: var(--TextColor);
            border: 1px solid var(--BgColor);
        }*/

.loactionInfoCardBox .alertInfoBox {
    background-color: #fff;
    padding: 10px;
    border-radius: 3px;
    margin-bottom: 10px;
    border-top: 5px solid var(--BgColor);
}

    .loactionInfoCardBox .alertInfoBox p {
        margin-bottom: 0px;
        font-size: 16px;
        font-weight: 600;
        color: #000;
    }

.loactionInfoCardBox button {
    border: none;
    background-color: var(--BgColor);
    color: var(--TextColor);
    font-size: 16px;
    font-weight: 400;
    padding: 7px 10px;
    width: 100%;
    border-radius: 3px;
}

    .loactionInfoCardBox button:hover {
        background: #378f34;
    }

.cstmMenuList {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: calc(100vh - 95px);
}

    .cstmMenuList > ul {
        height: calc(100vh - 145px);
        overflow: auto;
    }

.cstmLocationDropdown button {
    border: none;
    background-color: var(--BgColor);
    color: var(--TextColor);
    font-size: 16px;
    font-weight: 400;
    padding: 7px 10px;
    width: 100%;
    border-radius: 3px;
    position: relative;
    text-align: start;
}

    .cstmLocationDropdown button::after {
        content: '';
        position: absolute;
        top: 17px;
        right: 15px;
    }

    .cstmLocationDropdown button:hover {
        background: #378f34;
    }


.cstmLocationDropdown ul {
    width: 100%;
    overflow: auto;
    max-height: 600px;
}

    .cstmLocationDropdown ul li {
        border-bottom: 1px solid #ddd;
    }

        .cstmLocationDropdown ul li:last-child {
            border-bottom: none;
        }

        .cstmLocationDropdown ul li a {
            font-size: 16px;
            font-weight: 400;
            color: #000;
            white-space: pre-wrap;
        }

            .cstmLocationDropdown ul li a:hover, .cstmLocationDropdown ul li a.active, .cstmLocationDropdown ul li a:active {
                background-color: var(--BgColor);
                color: var(--TextColor);
            }


/*
    CSS for practitioner header and treatment tool body 
*/





/*Header Css*/
.headersec {
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.25);
    padding: 5px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    max-height: 80px;
    /*    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    background: #fff;*/
}
/*
    .dbBodysection {
        margin-top: 80px;
    }
    .notyf {
 
        top: 65px !important;
    }

*/



.locationbox select {
    width: 300px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    background-color: #378F34;
    background-image: url(../images/angledown.svg);
    padding: 10px;
}

.profileMenu button {
    background-color: #E3F6DC;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #D8EBD1;
    border-radius: 30px;
    padding: 1px 10px 1px 1px;
}

    .profileMenu button::after {
        color: #000;
    }

    .profileMenu button:hover {
        background-color: #d6f3cb;
        border: 1px solid #D8EBD1;
    }

    .profileMenu button .profileIcon {
        width: 40px;
        height: 40px;
        overflow: hidden;
        border-radius: 50%;
    }

    .profileMenu button h2 {
        margin-bottom: 0px;
        font-size: 18px;
        font-weight: 400;
        color: #000;
    }

        .profileMenu button h2 span {
            color: #56BF33;
        }


.sectionHeadingBox h2 {
    font-size: 24px;
    font-weight: 400;
    color: #1E281B;
    margin: 0;
}

.searchBox input.searchBox {
    border: 1px solid #E0E7ED;
    border-radius: 3px;
    padding: 4px 10px 4px 30px;
    background-color: #F9F9F9;
    width: 250px;
    outline: none;
    height: 36px;
}

i.searchIcon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #8d8d8d;
    font-size: 14px;
}



.cstmAddToTreatmentBtn {
    background: var(--BgColor);
    padding: 10px 20px;
    outline: none;
    border: none;
    color: var(--TextColor);
    font-size: 16px;
    font-weight: 400;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}

/*.cstmAllergenClearedBtn {
    background: #46aa42;
    padding: 10px 20px;
    outline: none;
    border: none;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}
*/
.cstmTreatmentCompleteBtn, .cstmReturnToTestingTabBtn, .cstmAllergenClearedBtn {
    background: var(--BgColor);
    color: var(--TextColor);
    padding: 10px 20px;
    outline: none;
    border: none;
    font-size: 16px;
    font-weight: 400;
    border-radius: 3px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 200px;
}

    .cstmTreatmentCompleteBtn:hover, .cstmReturnToTestingTabBtn:hover, .cstmAllergenClearedBtn:hover, cstmAddToTreatmentBtn:hover, .protoolbtnSelected:hover, .snapshot-btn:hover, .magnify-btn:hover, .treat-allergy-btn:hover {
        background: var(--HoverBgColor);
        color: var(--TextColor);
    }


.unSelectedAllergenClearedBtn {
    background-color: var(--lightBgColor);
    text-align: center;
    padding: 10px;
    font-size: 16px;
    color: #020401;
    box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    border: none;
}


.dropdown.cstmLocationDropdown {
    min-width: 200px;
}

    .dropdown.cstmLocationDropdown ul.dropdown-menu.show {
        width: 400px;
    }

.loactionInfoCardBox {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 20px;
}

    .loactionInfoCardBox .alertInfoBox {
        border: unset;
        margin: unset;
    }

    .loactionInfoCardBox button#changeLocationBtn {
        width: 200px;
    }

.submenu_flex_box ul.dropdown-menu.show {
    margin: unset;
    padding: unset;
    width: 100%;
    border-radius: unset;
}

    .submenu_flex_box ul.dropdown-menu.show li a {
        background: #46aa425c;
        border: unset;
        border-bottom: 1px solid #eee;
        border-radius: unset;
        color: #0f5132;
    }






.treatedPatientText {
    font-size: 22px;
    color: var(--BgColor);
    background-color: #f0f0f0;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-weight: 500 !important;
    white-space: nowrap;
}

    .treatedPatientText:hover {
        background-color: #e0e0e0;
        cursor: pointer;
    }

.custmPatientName {
    /*    max-width: 500px;*/
    width: 100%;
}






/* initial test page */
.initial_phase_grid {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: 16px;
}

.right_menu_wrapper ul {
    margin: 0;
    padding: unset;
}

@media(max-width:767px) {
    .initial_phase_grid {
        grid-template-columns: 1fr;
    }
}




/* initial test end page */




.patient-note {
    cursor: pointer;
}



/*.note-patient {
    min-width: 180px;
}

.note-patient-content {
    padding: 0px 0px;
    min-width: 180px;
}*/

@media (max-width: 1366px) {
    .note-patient {
        min-width: 170px;
    }

    .note-patient-content {
        padding: 0px 0px;
        min-width: 170px;
    }

        .note-patient-content p {
            display: -webkit-box;
            max-width: 170px;
            -webkit-line-clamp: 5;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
}


.clinic-info {
    min-width: 220px !important;
}

    .clinic-info p.clinic-address {
        white-space: break-spaces;
    }



/*Transmit button  css start here*/


/* === Favorite / Transmit Button === */
.favorite-button {
    --background-default: var(--BgColor);
    --text-color-default: var(--TextColor);
    outline: none;
    border: none;
    background: none;
    padding: 12px 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    color: var(--text-color-default);
    border-radius: 9px;
    transition: background-color 0.3s ease;
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 19px;
    height: 50px
}


    .favorite-button:hover::before {
        background-color: var(--HoverBgColor);
    }

    .favorite-button::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 9px;
        background: var(--background-default);
        z-index: 0;
        transition: transform 0.2s;
    }

    .favorite-button .text {
        font-size: 22px;
        margin-left: 10px;
        z-index: 1;
    }

    .favorite-button .icon {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }

/* === Heart + ECG === */
.heart-ecg {
    width: 36px;
    height: 36px;
    overflow: visible;
    transform-origin: center center;
}

/* Heart outline */
.heart-outline {
    fill: none;
    stroke: #d0d0d0;
    stroke-width: 4;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: stroke 0.3s ease;
}

/* ECG line */
.ecg-line {
    fill: none;
    stroke: #62677C;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 600;
    stroke-dashoffset: 600;
    transition: stroke 0.3s ease;
}

/* When button is active — animate heart */
.favorite-button.active .heart-outline {
    stroke: var(--TextColor);
    animation: heartbeat 1.5s ease-in-out infinite;
    transform-origin: center center;
}

/* ECG activates and moves left to right */
.favorite-button.active .ecg-line {
    stroke: var(--TextColor);
    animation: ecgMove 2.5s linear infinite;
}

/* === Animations === */
@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.05);
    }

    50% {
        transform: scale(1.1);
    }

    75% {
        transform: scale(1.05);
    }
}

@keyframes ecgMove {
    from {
        stroke-dashoffset: 600;
    }

    to {
        stroke-dashoffset: 0;
    }
}

.text {
    font-size: 24px;
    padding: inherit;
}

button:disabled {
    pointer-events: none;
    opacity: 0.6;
    cursor: not-allowed;
}

.favorite-button.cstm-transmit-btn {
    height: 36px;
    padding: 0px 12px;
}

    .favorite-button.cstm-transmit-btn .text {
       font-size: 16px;
       padding: 0;
    }
    .favorite-button.cstm-transmit-btn .icon {
       width: 25px;
       height: 25px;
    }
    
.favorite-button.cstm-transmit-btn .heart-ecg {
    width: 25px;
    height: 25px;
}


/*Transmit button  css ends here*/
/*01-07-2025 new css here=============================*/
.font-medium {
    font-weight: 600;
}

.btn.theme-outline-green {
    border-color: var(--BgColor);
    color: var(--BgColor);
    white-space: nowrap;
}

    .btn.theme-outline-green:hover {
        background: var(--BgColor);
        color: var(--TextColor);
    }

.btn.theme-green,
.btn.theme-green:hover {
    background: var(--BgColor);
    color: var(--TextColor);
}




body.modal-open .main-content {
    filter: blur(4px);
}

.card-header {
    background-color: #f8f9fa;
    font-weight: 500;
}







.sticky-top {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    bottom: 0; /* Stick to the top of the viewport */
    z-index: 10; /* Ensure it's above other content */
}

.bg-transparent {
    background-color: transparent !important;
}

.zoom-scale {
    transform: scale(1);
    transform-origin: top left;
    transition: transform 0.2s ease-in-out;
}

.right-p-card {
    padding: 6px;
    background-color: #fff;
    margin-bottom: 12px;
    max-height: calc(100vh - 432px);
    min-height: 200px;
    overflow-y: auto;
    position: relative;
}

.right-initial-test-card {
    padding: 6px;
    background-color: #fff;
    margin-bottom: 12px;
    max-height: calc(100vh - 432px);
    min-height: 200px;
    overflow-y: auto;
    position: relative;
}

.zoomBtn {
    text-align: center;
    background: var(--BgColor);
    color: #ffffff;
    border: none;
    border-radius: 6px;
    height: 36px;
    width: 36px;
    padding: 5px 10px;
    margin-right: 5px;
    cursor: pointer;
}

.startTestingBtn {
    text-align: center;
    background: var(--BgColor);
    color: var(--TextColor);
    border: none;
    border-radius: 6px;
    height: 36px;
}

/*23/07/2025*/
.primarybox-outer {
    padding: 15px;
}

.primary-box {
    border: 1px solid #bdbdbd;
    padding: 10px;
    border-radius: 6px;
    background-color: #f9f9f9;
}
/*.patient-cardbody .primary-box {
    height: 470px !important;
    overflow: hidden;
}*/
.patientchart-outer .card-header {
    height: fit-content;
    min-height: fit-content;
}

.snapshot-btn, .magnify-btn, .treat-allergy-btn {
    padding: 5px 10px;
    border: none;
    border-radius: 4px;
    background-color: var(--BgColor);
    color: var(--TextColor);
}


.category-box {
    border: 1px solid #ccc;
    padding: 15px;
    border-radius: 6px;
    background-color: #f9f9f9;
    height: 440px;
    overflow: hidden;
}



.primary-box {
    background-color: #f9f9f9;
}

.allergy-tree input[type="checkbox"] {
    margin-right: 8px;
}


.modal-backdrop.show {
    backdrop-filter: blur(5px);
    background-color: rgba(0, 0, 0, 0.2); /* optional dark tint */
}



div#allergyModal .modal-dialog .modal-content .modal-header {
    background-color: var(--BgColor);
    color: var(--TextColor);
    -webkit-print-color-adjust: exact;
}

div#allergyModal input[type="checkbox"]:checked + span {
    font-weight: 600;
    background-color: var(--BgColor);
    width: fit-content;
    color: var(--TextColor);
    padding: 0px 5px;
    border-radius: 4px;
    margin: 1px 0;
    display: inline-block;
    -webkit-print-color-adjust: exact;
}

.cstm-patient-positive-highlighted {
    border-radius: 4px;
    padding: 5px;
    width: fit-content;
    color: var(--TextColor) !important;
}

div#allergyModal .modal-footer button.btn.btn-outline-secondary {
    border: 1px solid red;
    color: red;
}

    div#allergyModal .modal-footer button.btn.btn-outline-secondary:hover {
        background-color: red;
        color: #fff;
        -webkit-print-color-adjust: exact;
    }

div#treatmentHistoryModal .modal-footer button.btn.btn-outline-secondary {
    border: 1px solid red;
    color: red;
}

    div#treatmentHistoryModal .modal-footer button.btn.btn-outline-secondary:hover {
        background-color: red;
        color: #fff;
        -webkit-print-color-adjust: exact;
    }



div#allergyModalBody .magnify-view div h6.text-center {
    background: #f0f0f0;
    padding: 8px;
    border-radius: 4px;
    color: #000;
    -webkit-print-color-adjust: exact;
}

div#allergyModalBody .allergy-columns div h6.text-center {
    background: #f0f0f0;
    padding: 8px;
    border-radius: 4px;
    color: #000;
    -webkit-print-color-adjust: exact;
}

@media screen and (min-device-width: 768px) and (max-device-width: 1440px) {
    .custmCardR ul {
        padding-left: 0;
    }

    .card-chart.allergy-card-chart.custmCardR {
        padding-left: 14px;
    }

    .custmCardR li > .card-right {
        padding-left: 14px !important;
    }
}

div#tbl_AllergyLibrary_wrapper thead tr th:nth-child(1) {
    width: 15%;
}


div#tbl_AllergyLibrary_wrapper thead tr th:nth-child(2) {
    width: 65%;
}


div#tbl_AllergyLibrary_wrapper thead tr th:nth-child(3) {
    width: 20%;
}

table#tbl_AllergyLibrary tbody tr td:nth-child(1) {
    width: 15%;
}

table#tbl_AllergyLibrary tbody tr td:nth-child(2) {
    width: 65%;
}

table#tbl_AllergyLibrary tbody tr td:nth-child(3) {
    width: 20%;
}

button#modelCancelBtn {
    padding: 5px 14px;
    gap: 10px;
    border-radius: 8px;
    background: gray;
    color: #fff;
    border: none;
}

button#addChildBn, button#btnAddRootForMainLibrary, button#btnAddRootForInitialTestAllergyLibrary, button#saveAnaphylacticAllergyBtn, button#modalSaveBtnForMainLibraryTable, button#modalSaveBtnForInitialTestAllergyLibrary, button#btnAddAllergy, button#saveAllergyBtn {
    color: var(--TextColor);
    padding: 5px 14px;
    gap: 10px;
    border-radius: 8px;
    border: none;
    background-color: var(--BgColor);
}


button#muscleTestBtn {
    color: var(--TextColor);
    padding: 5px 10px;
    gap: 10px;
    border-radius: 8px;
    border: none;
    height: 46px;
    font-size: larger;
    background-color: var(--BgColor);
    white-space: nowrap;
}



    button#muscleTestBtn:hover {
        background: var(--HoverBgColor);
        color: var(--TextColor);
    }

.active-transmit {
    background-color: var(--BgColor) !important;
    color: var(--TextColor) !important;
    font-weight: bold !important;
    border-color: #218838 !important;
}


.cstmAllergy-listWrapper {
    height: calc(100vh - 343px);
    overflow-y: auto;
}

.profile_toggle ul li .locationbox button#clinicLocationDropdownBtn {
    color: #000;
}

    .profile_toggle ul li .locationbox button#clinicLocationDropdownBtn:hover {
        color: #fff;
    }

.profile_toggle ul li .locationbox .loactionInfoCardBox {
    flex-direction: column-reverse;
    gap: 0;
}

.profile_toggle .locationbox .locationInfoCard .loactionInfoCardBox button#changeLocationBtn {
    color: #fff;
    width: 99%;
    background-color: var(--BgColor);
}

    .profile_toggle .locationbox .locationInfoCard .loactionInfoCardBox button#changeLocationBtn:hover {
        color: #fff;
        background-color: var(--BgColor);
    }

.profile_toggle ul li .locationbox .loactionInfoCardBox button#changeLocationBtn:hover {
    color: #fff;
}

.profile_toggle ul li .locationbox .loactionInfoCardBox .alertInfoBox {
    background-color: #d4d4d4;
}


.treatmentHistoryBlock {
    height: calc(100vh - 730px);
    max-height: 100%;
    /* background-color: #dfdfdf;
    border: 1px solid #dfdfdf;*/
    border-radius: 8px;
    overflow-y: auto;
}

/*treatement tab accordion css */

/*.cstmtabGroup {
    display: flex;
    align-items: center;
}

    .cstmtabGroup button {
        width: 100%;
        border: 1px solid #378F34;
        background-color: #fff;
        font-size: 16px;
        font-weight: 400;
        padding: 10px;
        margin-left: -1px;
    }

        .cstmtabGroup button:hover,
        .cstmtabGroup button.activeTab {
            background-color: #378F34;
            border-color: #378F34;
            color: #fff;
        }

        .cstmtabGroup button:first-child {
            margin-left: 0px;
            border-radius: 5px 0px 0px 5px;
        }

        .cstmtabGroup button:last-child {
            border-radius: 0px 5px 5px 0px;
        }
*/


.cardWrapperBox {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0px 0px 11px 0px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    height: 100%; /* Ensure full height within the column */
    padding: 15px;
}

    .cardWrapperBox .mb-3.flex-grow-1 {
        flex-grow: 1; /* Make accordion take up available space */
        overflow: hidden;
    }

.button-group {
    margin-top: auto;
}

.focus_filterBox input {
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #CDCDCD;
    border-radius: 0px;
    padding: 7px 5px;
    width: 100%;
}

    .focus_filterBox input:focus {
        box-shadow: unset;
        border-color: #CDCDCD;
    }

.protoolcardHeading h2 {
    background-color: var(--lightBgColor);
    text-align: center;
    padding: 10px;
    font-size: 16px;
    color: #020401;
    box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    margin-bottom: 10px;
}

.protoolbtn {
    background-color: var(--lightBgColor);
    text-align: center;
    padding: 10px;
    font-size: 16px;
    color: #020401;
    box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    border: none;
    width: 100%;
    margin: 0px 10px 0px 10px;
    min-width: 100%;
}

.protoolbtnSelected {
    background: var(--BgColor);
    text-align: center;
    padding: 10px;
    font-size: 16px;
    color: var(--TextColor);
    box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    border: none;
    width: 100%;
    margin: 0px 10px 0px 10px;
    min-width: 100%;
}

.cstmaccrodion button {
    background-color: var(--lightBgColor);
    text-align: center;
    padding: 10px;
    font-size: 16px;
    color: #020401;
    box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
    margin-bottom: 10px;
}

    .cstmaccrodion button:not(.collapsed) {
        background-color: var(--lightBgColor);
        color: #1E281B;
    }

    .cstmaccrodion button:focus {
        box-shadow: unset;
    }

.cstmaccrodion .accordion-collapse {
    background-color: #fff;
    border: 1px solid #C2C2C2;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    border-radius: 5px;
}

    .cstmaccrodion .accordion-collapse .accordion-body {
        padding: 10px 20px;
        /*  max-height: 205px; */
        max-height: calc(100vh - 530px);
        height: calc(100vh - 530px);
        min-height: 205px;
        overflow-y: auto;
    }

.cstmaccrodion.tmaccordion .accordion-collapse .accordion-body {
    padding: 10px 20px;
    /*  max-height: 205px; */
    max-height: unset;
    height: unset;
    min-height: unset;
    overflow-y: unset;
}

    .cstmaccrodion.tmaccordion .accordion-collapse .accordion-body .cstm-select-container {
        /*  max-height: 205px; */
        max-height: calc(100vh - 530px);
        height: calc(100vh - 530px);
        min-height: 205px;
        overflow-x: hidden;
        overflow-y: auto;
    }

.toggle-select-btn {
    position: absolute;
    top: 15px;
    right: 40px !important;
}
/*treatement tab accordion css ends here */
.no-allergy-found {
    text-align: center;
    margin-bottom: 0px;
    height: 182px;
    line-height: 182px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background: #e2e3e5;
    color: #000;
}

.treated-char {
    display: inline-block;
    background-color: white;
    color: black;
    border: 1px solid #ccc;
    padding: 0px 6px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}

.treated-char-model {
    display: inline-block;
    background-color: white;
    color: black;
    border: 1px solid #ccc;
    padding: 0px 6px;
    font-size: 12px;
    font-weight: bold;
    border-radius: 4px;
}

.hidden-by-script {
    display: none !important;
}

.additionalBtn {
    width: 150px;
    background-color: #d5d5d5;
    border: none;
    padding: 5px;
    margin: 0px 0px 10px 0;
}


.btn-transmit-category.active-transmit {
    background-color: var(--BgColor) !important;
    color: var(--TextColor);
}

button#viewFullTreatmentHistoryBtn:hover {
    color: #fff !important;
}




.alert-highlighted {
    background-color: var(--anaphylacticColor);
    border-radius: 4px;
    padding: 5px;
    width: fit-content;
    color: white !important;
}


.bg-danger-allergy {
    background-color: var(--anaphylacticColor);
    padding: 3px;
    border-radius: 4px;
}

.selected-item {
    background-color: #465f88f2;
    color: var(--TextColor);
    font-weight: bold;
    cursor: pointer;
}

.unselectable-item {
    background-color: #f8f9fa;
    color: #000;
    cursor: pointer;
}

.custom-radio-btn {
    width: 20px;
    height: 20px;
    accent-color: var(--BgColor);
}

.form-check-input:checked {
    background-color: var(--BgColor) !important;
    border-color: var(--BgColor) !important;
}

/*.btn-Save-Treatement {
    color:var(--TextColor);
    background-color: var(--BgColor);
    padding: 7px 10px;
    gap: 10px;
    border-radius: 4px;
    border: none;
}*/

.treatmentHistoryBlock div#accordionExample .accordion-item .accordion-body {
    max-height: unset;
    height: fit-content;
}

/*03 Sep*/
.editNote-btn {
    position: absolute;
    right: 10px;
    top: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border: 1px solid #b1b1b1;
    padding: 0 !important;
}




.btn.btn-pencil:hover {
    border: 1px solid var(--BgColor);
    background-color: transparent;
    border-radius: 8px;
}


/*15/09/2025*/


div#allergyModal .modal-footer button.btn.btn-with-outline-save {
    border: 1px solid var(--BgColor);
    color: var(--BgColor);
}

    div#allergyModal .modal-footer button.btn.btn-with-outline-save:hover {
        background-color: var(--BgColor);
        color: var(--TextColor);
    }

button.btn.btn-with-outline-save {
    border: 1px solid var(--BgColor);
    color: var(--BgColor);
}

    button.btn.btn-with-outline-save:hover {
        background-color: var(--BgColor);
        color: var(--TextColor);
    }

button.btn.btn-with-outline-close {
    border: 1px solid var(--BgColor);
    color: var(--BgColor);
}

    button.btn.btn-with-outline-close:hover {
        background-color: var(--BgColor);
        color: var(--TextColor);
    }


.viewclick-btn {
    background-color: var(--BgColor) !important;
}

    .viewclick-btn a {
        color: var(--TextColor);
        text-decoration: none;
        white-space: nowrap;
    }

        .viewclick-btn a:hover {
            color: var(--TextColor);
        }

.onboarding-cell {
    text-align: center;
}

    .onboarding-cell > div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

.anchor-tag-texts {
    text-decoration: none;
}


.toggle-select-btn {
    position: absolute;
    top: 14px;
    right: 26px;
    font-size: 12px;
    padding: 2px 8px;
    line-height: 1.2;
    min-width: auto;
    min-height: auto;
    z-index: 2;
    height: 32px;
    align-items: center;
    display: flex !important;
    box-shadow: none !important;
}




/*.toggle-select-btn {
    font-size: 12px;
    padding: 2px 8px;
    line-height: 1.2;
    min-width: auto;
    min-height: auto;
    z-index: 2;
    background-color: #var(--lightBgColor);
    color: #1E281B;
}*/


.cstmLibraryLeftCardHeadingWrapper, .cstmLibraryRightCardHeadingWrapper {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.addToAdditionalCardBtn, .addToPatientRecordBtn {
    text-align: center;
    background: var(--BgColor);
    color: var(--TextColor);
    border: none;
    border-radius: 6px;
    height: 36px;
    width: 100%;
    max-width: 170px;
    font-size: 14px;
}

.anaphylactic-container {
    max-height: 70px;
    overflow: auto;
}

.patient-info-upper-card {
    height: 300px;
}

.root-Parent-Name-Btn {
    background-color: var(--lightBgColor);
    border-radius: 4px;
    width: fit-content;
    padding: 1px 8px;
    cursor: pointer;
}

.selected-root-Parent-Name-Btn {
    background-color: var(--BgColor);
    color: var(--TextColor);
    border-radius: 4px;
    width: fit-content;
    padding: 1px 8px;
    cursor: pointer;
}

/*.root-allergy > .allergy-line {
    margin-bottom: 4px;
}*/

.btn.btn-refer {
    background-color: #9370db;
    color: #fff;
    border: none;
}

    .btn.btn-refer:hover {
        background-color: #6344a3;
        color: #fff;
    }




.zoom-btn {
    background: #f8f9fa;
    border: 1px solid #ced4da;
    border-radius: 8px;
    width: 40px;
    height: 40px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

    .zoom-btn:hover {
        background-color: var(--BgColor);
        color: var(--TextColor);
    }

    .zoom-btn:active {
        transform: scale(0.95);
    }


.chart-allergy-conatiner {
    background-color: #fff;
}

.zoom-controls {
    position: absolute;
    top: 10px;
    right: 10px;
}


/*09/10/20225*/
.clinicdropdown-outer {
    width: 600px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    padding: 15px;
    background-color: #e7e7e7;
    margin: auto;
    display: flex;
    flex-direction: column;
    height: 320px;
}

    .clinicdropdown-outer .dropdown.cstmLocationDropdown ul {
        padding: 0px;
    }

        .clinicdropdown-outer .dropdown.cstmLocationDropdown ul.dropdown-menu.show {
            width: 100%;
            max-height: 200px;
            overflow: auto;
        }

    .clinicdropdown-outer .cstmLocationDropdown button:hover {
        color: var(--TextColor);
        background-color: var(--BgColor);
    }

.cstmLocationDropdown button:active {
    border: none;
    background-color: var(--BgColor);
    color: var(--TextColor);
    font-size: 16px;
    font-weight: 400;
    padding: 7px 10px;
    width: 100%;
    border-radius: 3px;
    position: relative;
    text-align: start;
}

.clinicdropdown-outer .cstmLocationDropdown ul li a {
    white-space: unset;
    overflow-wrap: break-word;
}

.clinicdropdown-outer .cstmLocationDropdown ul li {
    height: 60px;
    display: flex;
    align-items: center;
}

.headersec .clinicdropdown-outer {
    display: none;
}

#treatmentHistoryModal .retest-treatment-Btn {
    background-color: var(--BgColor);
    color: var(--TextColor);
    width: fit-content;
}

.no-select {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Old Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Modern browsers */
}


/* Common CSS for chart and initial test screen  */
.chart-allergy-list {
    list-style: none;
}

.initial-test-right-allergy-list {
    list-style: none;
}


.no-icon-space {
    display: inline-block;
    width: 18px;
}

.chart-toggle-icon {
    margin-right: 4px;
    cursor: pointer;
    color: var(--BgColor);
}

.initial-test-right-toggle-icon {
    margin-right: 4px;
    cursor: pointer;
    color: var(--BgColor);
}


.highlighted {
    color: #000;
    font-weight: 700;
}

.cstm-retest-checkbox {
    height: 18px;
}
/*25/10/2025*/
.patient-table tbale thead tr th {
    padding-left: 0px !important;
}

.dragebble-box {
    position: absolute;
    width: 100%;
}

.internal-btn {
    margin-top: 140px;
}


embossed-nav {
    margin-bottom: 28px;
    display: flex;
    justify-content: space-between;
}
    .embossed-nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        gap: 10px;
    }

    .embossed-nav li {
        display: inline-block;
    }



.embossed-nav .nav-item .nav-link {
    cursor: pointer;
    padding: 12px 24px;
    text-align: center;
    font-weight: bold;
    /*  border-radius: 18px;
    transition: background 0.1s, color 0.1s;
    background: linear-gradient(145deg, #ffffff, #dcdcdc);
    box-shadow: 3px 3px 5px #bebebe, -3px -3px 5px #ffffff;
    border: 1px solid #e3e3e3;*/
    /*    padding: 20px 40px;*/
    background: #e0e0e0;
    border-radius: 12px;
    box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
    transition: all 0.2s ease-in-out;
}


.embossed-nav .nav-link:hover {
    background: #d6d6d6;
    color: #888;
}



.embossed-nav .nav-item .nav-link.active {
    background-color: #f4f4f4 !important;
    color: var(--BgColor) !important;
    box-shadow: inset 6px 6px 10px #bebebe, inset -6px -6px 10px #ffffff;
}




.save-sound-setting, .save-signal-setting {
    background-color: var(--BgColor);
    color: var(--TextColor);
    width: fit-content;
    padding: 6px;
    border-radius: 5px;
}

.ctsm-visualizers canvas {
    width: 100%;
    height: 120px;
}

.dbBodysection .page-item.active .page-link {
    color: var(--TextColor);
    background-color: var(--BgColor);
}



.text-center-1{
    width:100%;
    background:#e3e3e3;
    height:2px;

}




/*Chart Css Start here */
.note-section {
    margin-bottom: 1rem;
}


/* Custom check box for chart side start here   */

.custome-checkbox-treatAllergy {
    position: relative;
}

    .custome-checkbox-treatAllergy input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        cursor: pointer;
        opacity: 0;
        position: absolute;
    }

    .custome-checkbox-treatAllergy label {
        position: relative;
        cursor: pointer;
    }

        .custome-checkbox-treatAllergy label:before {
            content: '';
            background-color: transparent;
            border: 1px solid #8C8C8C;
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            border-radius: 4px;
        }

    .custome-checkbox-treatAllergy input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        top: 8px;
        left: 7px;
        width: 5px;
        height: 10px;
        border: solid var(--BgColor);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

/* Custom check box for chart side  ends here */

.list-group-item-light {
    max-height: 85px;
    overflow: auto;
}
/* Custom check box for retest treatment history popup model start here */


.treatmentForRetest-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: sans-serif;
    font-size: 14px;
}

    .treatmentForRetest-checkbox input {
        display: none; /* hide default checkbox */
    }

    .treatmentForRetest-checkbox .checkmark {
        width: 18px;
        height: 18px;
        border: 1px solid #999;
        border-radius: 4px;
        display: inline-block;
        position: relative;
        margin-right: 6px;
        box-sizing: border-box;
    }

    /* Tick (checkmark) style */
    .treatmentForRetest-checkbox input:checked + .checkmark::after {
        content: "";
        position: absolute;
        left: 5px;
        top: 2px;
        width: 5px;
        height: 10px;
        border: solid var(--BgColor);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }



/* Custom check box for retest treatment history popup model ends here */

.checkboxWithdate {
    gap: 10px;
}




/* child chart right page CSS start here  */




/* Custom check box for chart side start here   */

.custome-checkbox-chart {
    position: relative;
}

    .custome-checkbox-chart input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        cursor: pointer;
        opacity: 0;
        position: absolute;
    }

    .custome-checkbox-chart label {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: self-start;
        gap: 5px;
    }

        .custome-checkbox-chart label:before {
            content: '';
            background-color: transparent;
            border: 1px solid #8C8C8C;
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            border-radius: 4px;
            margin-top: 4px;
        }

    .custome-checkbox-chart input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        top: 7px;
        left: 7px;
        width: 5px;
        height: 10px;
        border: solid var(--BgColor);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

/* Custom check box for chart side  ends here */


.card-heading {
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
    /* Card-like styling */
    background-color: #f0f0f0;
    padding: 10px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-top: 0;
}




.allergy-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.allergy-card-chart {
    padding: 6px;
    background-color: #fff;
    margin-bottom: 12px;
    position: relative;
    height: 100%;
}

.allergy-list {
    list-style-type: none;
    padding-left: 0;
}

.allergy-item-chart {
    cursor: pointer;
    padding: 0px 8px !important;
    display: inline-block;
}




.custmCardR {
    border-bottom: 1px solid #00000020;
}

    .custmCardR .custmCardR {
        border-bottom: 0;
        background-color: unset;
    }

    .custmCardR ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .custmCardR .custome-checkbox-chart {
        padding: 5px;
    }

    .custmCardR li > .card-chart {
        padding-left: 6px;
    }


    .custmCardR .custome-checkbox-chart label span {
        padding-left: 8px;
    }

    .custmCardR .custome-checkbox-chart {
        line-height: normal;
    }

    .custmCardR .allergy-card-chart {
        margin-bottom: 0;
        max-height: unset;
        min-height: unset;
    }


.card-chart.allergy-card-chart.custmCardR {
    max-width: 100%;
}

.partial-view-section {
    overflow-y: auto;
    max-height: calc(100vh - 340px);
    overflow-x: hidden;
}

.custom-padding-left {
    padding-left: 24px !important;
}




/* child chart right page CSS end here  */



/* Chart Css ends here  */




/* Initial test tab screen CSS start here   */



.custom-placeholder::placeholder {
    color: #B0B0B0;
}

div#initialTestContainer .primarybox-outer {
    height: calc(100vh - 315px);
    overflow: auto;
}

/* Custom check box for left side start here   */

.custome-checkbox {
    position: relative;
}

    .custome-checkbox input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        cursor: pointer;
        opacity: 0;
        position: absolute;
    }

    .custome-checkbox label {
        position: relative;
        cursor: pointer;
    }

        .custome-checkbox label:before {
            content: '';
            background-color: transparent;
            border: 1px solid #8C8C8C;
            /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); */
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            border-radius: 4px;
            margin-right: 4px;
        }

    .custome-checkbox input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        top: 7px;
        left: 7px;
        width: 5px;
        height: 10px;
        border: solid var(--BgColor);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

/* Custom check box for left side  ends here */





.button-container {
    position: absolute;
    top: 7px;
    right: 10px;
    z-index: 1; /* Ensure it's on top of other content */
}

.addToChartBtn {
    text-align: center;
    background: var(--BgColor);
    color: var(--TextColor);
    border: none;
    /* border-radius: 20px; */
    border-radius: 6px;
    height: 36px;
    width: 100%;
    max-width: 100px;
    font-size: 14px;
}

.transmitBtnL {
    text-align: center;
    background: var(--BgColor);
    color: var(--TextColor);
    border: none;
    border-radius: 6px;
    height: 36px;
    width: 100%;
    max-width: 100px;
    font-size: 14px;
}


.positveText {
    color: var(--TextColor);
}

.card-heading {
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}




.allergy-line {
    display: flex;
    align-items: center;
    gap: 10px;
}




.allergy-card {
    border: 1px solid #ccc;
    border-radius: 6px;
    /* padding: 12px; */
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    position: relative;
}

.allergy-cardF {
    max-height: 685px;
    overflow: auto;
}

.allergy-list {
    list-style-type: none;
    padding-left: 0;
}

.allergy-item-initial-test-left {
    cursor: pointer;
    padding: 4px 8px;
    display: inline-block;
    transition: font-size 0.2s;
}





.initial-test-toggle-icon {
    margin-right: 4px;
    cursor: pointer;
    color: var(--BgColor);
}

.spinner {
    display: none;
    margin-left: 10px;
    font-size: 14px;
}

/* 01-07-2025 new css here  */
.cstmCardHeadingWrapper {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: #f0f0f0;
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}


.custmClerBtn button {
    min-height: 36px;
    font-size: 16px;
}

ul.allergy-list li {
    margin-bottom: 5px;
}






/*initial tab left side card CSS start here */



.custome-checkbox {
    position: relative;
    margin-bottom: 5px;
}

    .custome-checkbox input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        cursor: pointer;
        opacity: 0;
        position: absolute;
    }

    .custome-checkbox label {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: start;
    }

        .custome-checkbox label:before {
            content: '';
            background-color: transparent;
            border: 1px solid #8C8C8C;
            /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); */
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            /* border-radius: 4px; */
            /* margin-right: 16px; */
            margin-top: 4px;
        }

    .custome-checkbox input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        top: 7px !important;
        left: 7px;
        width: 5px;
        height: 10px;
        border: solid var(--BgColor);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }


.allergy-line {
    display: flex;
    align-items: center;
    gap: 10px; /* space between icon and checkbox */
}










.allergy-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 8px;
}

    .allergy-list[data-level="1"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    .allergy-list[data-level="2"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    .allergy-list[data-level="3"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    /* Add more levels if needed */
    .allergy-list[data-level="4"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    .allergy-list[data-level="5"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    .allergy-list[data-level="6"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    .allergy-list[data-level="7"] {
        background-color: #ffffff;
        padding-left: 20px;
    }



.allergy-item-initial-test-left {
    cursor: pointer;
    padding: 0px 8px !important;
    display: inline-block;
}



.initial-test-toggle-icon {
    margin-right: 4px;
    cursor: pointer;
    color: var(--BgColor);
}

.spinner {
    display: none;
    margin-left: 10px;
    font-size: 14px;
}

/*initial tab left side card CSS ends here */



/*initial tab right side card CSS start here */



/* Custom check box for right side start here   */

.custome-checkbox-right {
    position: relative;
}

    .custome-checkbox-right input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        /* cursor: pointer; */
        opacity: 0;
        position: absolute;
    }

    .custome-checkbox-right label {
        position: relative;
        display: flex;
        align-items: self-start;
        gap: 5px;
        /* cursor: pointer; */
    }

        .custome-checkbox-right label:before {
            content: '';
            background-color: transparent;
            border: 1px solid #8C8C8C;
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            /* cursor: pointer; */
            border-radius: 4px;
            margin-top: 4px;
        }

    .custome-checkbox-right input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        top: 7px;
        left: 7px;
        width: 5px;
        height: 10px;
        border: solid var(--BgColor);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }

/* Custom check box for right side  ends here */



.card-heading {
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
    /* Card-like styling */
    background-color: #f0f0f0;
    padding: 10px 20px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    margin-top: 0;
}




.allergy-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

.allergy-card-right {
    padding: 6px;
    background-color: #fff;
    margin-bottom: 12px;
    position: relative;
    height: 100%;
    /* padding: 6px;
        background-color: #fff;
        margin-bottom: 12px;
        max-height: calc(100vh - 523px);
        min-height:200px;
        overflow-y: auto;
        position: relative; */
}

.allergy-list {
    list-style-type: none;
    padding-left: 0;
}

.allergy-item-initial-test-right {
    cursor: pointer;
    padding: 0px 8px !important;
    display: inline-block;
}

.custmCardR {
    border-bottom: 1px solid #00000020;
}

    .custmCardR .custmCardR {
        border-bottom: 0;
        background-color: unset;
    }

    .custmCardR ul {
        list-style: none;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .custmCardR .custome-checkbox-right {
        padding: 5px;
        display: flex;
    }

    .custmCardR li > .card-right {
        padding-left: 0px;
    }

    .custmCardR .custome-checkbox-right label span {
        padding-left: 4px;
    }

    .custmCardR .custome-checkbox-right {
        line-height: normal;
    }

    .custmCardR .allergy-card-right {
        margin-bottom: 0;
        max-height: unset;
        min-height: unset;
    }

.custom-padding-left {
    padding-left: 24px !important;
}

/*initial tab right side card CSS ends here */


/* Initial test tab screen CSS ends here   */




/* Testing tab screen CSS start here   */




.card {
    position: relative;
}

.content-area {
    position: relative;
    flex: 1;
}

.custom-dropdown-selected-allergies {
    height: 100%;
    overflow-y: auto;
}

.resizable-allergy-container {
    position: absolute; /* IMPORTANT – allows overlap */
    top: 0; /* sits at the top of content-area */
    left: 0;
    right: 0;
    /*min-height: 255px;*/ /* your original height */
    /*height: 255px;*/ /* start height */
    /*max-height: calc(100% - 60px);*/ /* prevents covering Add button */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    z-index: 50; /* above all inner buttons */
    overflow: hidden; /* content scrolls */
    height: calc(100vh - 690px);
}


/* The UL should fill the wrapper and scroll internally */
.custom-dropdown-selected-allergies {
    display: block;
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    height: 100%; /* FILL the resizable container */
    max-height: none; /* allow JS to manage */
    overflow-y: auto;
    padding: 0;
    box-sizing: border-box;
}

/* thin visible handle, user drags this */
.resize-handle {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 8px;
    cursor: ns-resize;
    background: linear-gradient(180deg, rgba(0,0,0,0.06), rgba(0,0,0,0.12));
    border-radius: 0 0 4px 4px;
    z-index: 950;
}

/* during resize disable selection */
.resizable-allergy-container.resizing,
.resizable-allergy-container.resizing * {
    user-select: none !important;
    -webkit-user-select: none !important;
    -ms-user-select: none !important;
}



/*Testing Tab Page start*/

.custome-checkbox {
    position: relative;
    margin-left: 10px;
}

    .custome-checkbox input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        cursor: pointer;
        opacity: 0;
        position: absolute;
    }

    .custome-checkbox label {
        position: relative;
        cursor: pointer;
    }

        .custome-checkbox label:before {
            content: '';
            background-color: transparent;
            border: 1px solid #8C8C8C;
            /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); */
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            border-radius: 4px;
            margin-right: 16px;
        }

    .custome-checkbox input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        top: 8px;
        left: 7px;
        width: 5px;
        height: 10px;
        border: solid var(--BgColor);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }




div#treatmentCardsContainer {
height: calc(100vh - 420px); 
/*    max-height: 525px;*/
    overflow-y: auto;
}

.focus_filterBox input {
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #CDCDCD;
    border-radius: 0px;
    padding: 7px 5px;
    width: 100%;
}

    .focus_filterBox input:focus {
        box-shadow: unset;
        border-color: #CDCDCD;
    }

.btn.gotoTreatment-btn {
    background-color: var(--BgColor);
    border: none;
    color: var(--TextColor);
    transition: background-color 0.3s ease;
}

    .btn.gotoTreatment-btn:hover {
        background-color: var(--HoverBgColor);
        cursor: pointer;
        color: var(--TextColor);
    }


.btn.custom-btn {
    background-color: var(--lightBgColor);
    border: none;
    color: #000;
    transition: background-color 0.3s ease;
}

    .btn.custom-btn:hover {
        background-color: #d0d8dc;
        cursor: pointer;
    }


    .btn.custom-btn.active {
        background-color: var(--BgColor);
        color: var(--TextColor);
    }

        .btn.custom-btn.active:hover {
            background-color: var(--HoverBgColor) !important;
            color: var(--TextColor);
        }

#testPriorityBtn.custom-btn.active {
    background-color: var(--BgColor);
    color: var(--TextColor);
}

.combo-btn.active {
    background-color: var(--BgColor);
    color: var(--TextColor);
}

.combo-btn:hover {
    background-color: #d0d8dc;
    cursor: pointer;
}


.combo-btn.active:hover {
    background-color: var(--HoverBgColor) !important;
    color: var(--TextColor);
}


.btn-outline-secondary strong {
    display: block;
    font-size: 1rem;
}

.btn-outline-secondary small {
    font-size: 0.75rem;
}


#treatmentCardsContainer .card {
    background-color: #f8f9fa;
    border-left: 4px solid var(--BgColor);
}

.btn.combo-btn {
    background-color: var(--lightBgColor);
    border: none;
    border-radius: 0.375rem;
    color: #000;
    width: 410px;
    transition: background-color 0.3s ease;
}


    .btn.combo-btn.active {
        background-color: var(--BgColor);
        color: var(--TextColor);
    }

    .btn.combo-btn:hover {
        background-color: #d0d8dc;
        cursor: pointer;
    }


    .btn.combo-btn.active:hover {
        background-color: var(--HoverBgColor) !important;
        color: var(--TextColor);
    }

/* Custom Dropdown */
.list-unstyled.custom-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    border: 1px solid #ccc;
    margin-top: 4px;
    padding: 10px;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    width: 100%;
/*    max-height: 545px;*/
     height: calc(100vh - 400px); 
    overflow-y: auto;
}

    .list-unstyled.custom-dropdown li {
        margin-bottom: 5px;
    }


/*Testing tab page Ends*/

.btn.custmOpenIntLib {
    min-height: 120px;
}

.btn-group.cstm-dropdown-btn {
    width: 100%;
}

/* Group Header Style */
#emotionDropdown .accordion-toggle, #locationDropdown .accordion-toggle {
    background: none;
    border: 1px solid #e3e3e3;
    font-weight: 600;
    padding: 6px 6px;
    color: #333;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    border-radius: 8px;
}

    /* Arrow Icon */
    #emotionDropdown .accordion-toggle .arrow, #locationDropdown .accordion-toggle .arrow {
        border: solid #666;
        border-width: 0 2px 2px 0;
        display: inline-block;
        padding: 4px;
        transform: rotate(45deg);
        transition: transform 0.2s ease;
    }

    /* Rotate when expanded */
    #emotionDropdown .accordion-toggle[aria-expanded="true"] .arrow, #locationDropdown .accordion-toggle[aria-expanded="true"] .arrow {
        transform: rotate(-135deg);
    }



/* For Emotion List */
#emotionDropdown .accordion-toggle[aria-expanded="true"] {
    background-color: #465f88f2;
    color: var(--TextColor);
    border-color: #e3e3e3;
}

/* For Body Locations */
#locationDropdown .accordion-toggle[aria-expanded="true"] {
    background-color: #465f88f2;
    color: var(--TextColor);
    border-color: #e3e3e3;
}

#emotionDropdown .accordion-toggle,
#locationDropdown .accordion-toggle {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Parent highlighted because children selected */
.selected-parent {
    background-color: #465f88f2 !important;
    color: var(--TextColor) !important;
    border-color: #e3e3e3 !important;
}


/*testing child tab CSS start here */



.custome-checkbox {
    position: relative;
    margin-bottom: 5px;
}

    .custome-checkbox input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        cursor: pointer;
        opacity: 0;
        position: absolute;
    }

    .custome-checkbox label {
        position: relative;
        cursor: pointer;
        display: flex;
        align-items: start;
    }

        .custome-checkbox label:before {
            content: '';
            background-color: transparent;
            border: 1px solid #8C8C8C;
            /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); */
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            /* border-radius: 4px; */
            /* margin-right: 16px; */
            margin-top: 4px;
        }

    .custome-checkbox input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        top: 7px !important;
        left: 7px;
        width: 5px;
        height: 10px;
        border: solid var(--BgColor);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }


.allergy-line {
    display: flex;
    align-items: center;
    gap: 10px; /* space between icon and checkbox */
}










.allergy-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 8px;
}

    .allergy-list[data-level="1"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    .allergy-list[data-level="2"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    .allergy-list[data-level="3"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    /* Add more levels if needed */
    .allergy-list[data-level="4"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    .allergy-list[data-level="5"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    .allergy-list[data-level="6"] {
        background-color: #ffffff;
        padding-left: 20px;
    }

    .allergy-list[data-level="7"] {
        background-color: #ffffff;
        padding-left: 20px;
    }



.allergy-item {
    cursor: pointer;
    padding: 0px 8px !important;
    display: inline-block;
    font-size: 16px !important;
}



.testing-tab-toggle-icon {
    margin-right: 4px;
    cursor: pointer;
    color: var(--BgColor);
}

.spinner {
    display: none;
    margin-left: 10px;
    font-size: 14px;
}


/*testing child tab CSS end here */

/* Testing tab screen CSS ends here   */




/* Main library tab screen CSS start here   */



.library-left-allergy-card {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 12px;
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 20px;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
}

.library-left-allergy-list {
    list-style-type: none;
    padding-left: 0;
}

.library-left-allergy-item {
    cursor: pointer;
    padding: 4px 8px;
    display: inline-block;
}

.main-library-toggle-icon {
    margin-right: 4px;
    cursor: pointer;
    color: var(--BgColor);
}

.spinner {
    display: none;
    margin-left: 10px;
    font-size: 14px;
}



.allergy-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

/*Main library child tab CSS start here */


.library-left-allergy-list {
    list-style-type: none;
    padding-left: 0;
    margin-bottom: 8px;
}

    .library-left-allergy-list[data-level="1"] {
        background-color: transparent;
        padding-left: 20px;
    }

    .library-left-allergy-list[data-level="2"] {
        background-color: transparent;
        padding-left: 40px;
    }

    .library-left-allergy-list[data-level="3"] {
        background-color: transparent;
        padding-left: 40px;
    }

    /* Add more levels if needed */
    .library-left-allergy-list[data-level="4"] {
        background-color: transparent;
        padding-left: 40px;
    }

    .library-left-allergy-list[data-level="5"] {
        background-color: transparent;
        padding-left: 40px;
    }

    .library-left-allergy-list[data-level="6"] {
        background-color: transparent;
        padding-left: 40px;
    }

    .library-left-allergy-list[data-level="7"] {
        background-color: transparent;
        padding-left: 40px;
    }

.library-left-allergy-item {
    cursor: pointer;
    padding: 4px 8px;
    display: inline-block;
}

.main-library-toggle-icon {
    margin-right: 4px;
    cursor: pointer;
    color: var(--BgColor);
}

.spinner {
    display: none;
    margin-left: 10px;
    font-size: 14px;
}




.library-left-custome-checkbox {
    position: relative;
}

    .library-left-custome-checkbox input {
        padding: 0;
        height: initial;
        width: initial;
        margin-bottom: 0;
        cursor: pointer;
        opacity: 0;
        position: absolute;
    }

    .library-left-custome-checkbox label {
        position: relative;
        cursor: pointer;
    }

        .library-left-custome-checkbox label:before {
            content: '';
            background-color: transparent;
            border: 1px solid #8C8C8C;
            /* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05); */
            padding: 8px;
            display: inline-block;
            position: relative;
            vertical-align: middle;
            cursor: pointer;
            border-radius: 4px;
            /* margin-right: 16px; */
        }

    .library-left-custome-checkbox input:checked + label:after {
        content: '';
        display: block;
        position: absolute;
        top: 12px;
        left: 7px;
        width: 5px;
        height: 10px;
        border: solid var(--BgColor);
        border-width: 0 2px 2px 0;
        transform: rotate(45deg);
    }


.allergy-line {
    display: flex;
    align-items: center;
    gap: 10px;
}

/*Main library child tab CSS end here */

/* Main library tab screen CSS ends here   */







#patientsListContainer .dt-scroll-body {
    max-height: calc(100vh - 450px) !important;
}



#testingTabItemsContainer .btn-Block-Test {
    background: var(--lightBgColor);
    color: #000;
    border: None;
    border-radius: 6px;
}
    #testingTabItemsContainer .btn-Block-Test.active {
        background: var(--BgColor);
        color: var(--TextColor);
    }


#allergyLibraryContainer .btn-Block-Test, .btn-libraryTestPriorityBtn {
    background: var(--lightBgColor);
    color: #000;
    padding: 5PX;
    border: 1px solid var(--BgColor);
    border-radius: 6px;
    white-space: nowrap;
}
    #allergyLibraryContainer .btn-Block-Test.active, .btn-libraryTestPriorityBtn.active {
        background: var(--BgColor);
        color: var(--TextColor);
    }



#initialTestContainer .btn-Block-Test {
    background: var(--lightBgColor);
    color: #000;
    border: None;
    border-radius: 6px;
}

    #initialTestContainer .btn-Block-Test.active {
        background: var(--BgColor);
        color: var(--TextColor);
    }



.modal-body.CstmModalScroll {
    max-height: calc(100vh - 300px);
    overflow-y: auto;
}
.CstmBackBtn {
    background-color: #bfbcbc;
    margin-left: 19px;
    border-color: #ccc;
    border-radius:8px!important;
}