*{
    margin: 0; padding: 0; box-sizing: border-box;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Bold.eot');
    src: url('../fonts/Inter-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-Bold.woff2') format('woff2'),
        url('../fonts/Inter-Bold.woff') format('woff'),
        url('../fonts/Inter-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Light.eot');
    src: url('../fonts/Inter-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-Light.woff2') format('woff2'),
        url('../fonts/Inter-Light.woff') format('woff'),
        url('../fonts/Inter-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Medium.eot');
    src: url('../fonts/Inter-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-Medium.woff2') format('woff2'),
        url('../fonts/Inter-Medium.woff') format('woff'),
        url('../fonts/Inter-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-Regular.eot');
    src: url('../fonts/Inter-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Inter-Regular.woff2') format('woff2'),
        url('../fonts/Inter-Regular.woff') format('woff'),
        url('../fonts/Inter-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
a,a:hover {
    text-decoration: none;
    color: inherit;
}

:root{
    /* colors  */
    --red-color: #E21919;
    --light-red: #FF2323;
    --dark-black: #000;
    --black-color: #393939;
    --grey-color: #b4b6b2;
    --white-color: #fff;
    --scroll-bar-color: #F5F5F5;
    --light-black: #4B4B4B;
    --green-color: #1B993E;
    --dark-green: #0C7329;
    --dark-green-2: #005016;
    --light-green: #EAFDE8;
    --card-border-color: #49C76C;
    --card-bg-2: #68C65E;
    /* fonts  */
    --primary-font : 'Inter';

}

::-webkit-scrollbar-track{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: var(--scroll-bar-color);
}

::-webkit-scrollbar{
	width: 6px;
	background-color: var(--scroll-bar-color);
}

::-webkit-scrollbar-thumb{
	background-color: var(--scroll-bar-color);
}

img{
    max-width: 100%;
}

p{
    margin: 0;
}

body{
    font-family: var(--primary-font);
    /* background 1  */
    /* background: url(../images/body-bg.png); */
    /* background 2  */
    /* background: url(../images/body-bg-2.png); */
    /* background 3  */
    background: url(../images/body-bg-3.png);
    background-size: cover;
    background-position: center;
    height: 100vh;
    overflow: hidden;
}

.container{
    max-width: 1536px;
}


.min-h-100{
    min-height: 100vh;
}

.h-100vh{
    height: 100vh;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 99999;
    background: var(--white-color);
    box-shadow: 0px 4px 40px rgba(16, 54, 27, 0.2);
    border-radius: 0px 0px 60px 60px;
    padding: 0 15px;
    height: 106px;
    display: flex;
    align-items: center;
}
.site-header > .container {
    background: inherit;
    border-radius: inherit;
}
.header-text {
    font-size: 40px;
    color: var(--green-color);
    font-weight: 800;
}

.site-logo{
    max-width: 365px;
}
.counter_input_Non_White {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 2px solid var(--green-color);
    background: transparent;
    text-align: center;
    font-size: 30px;
    color: var(--green-color);
    font-weight: 500;
    padding: 0px 15px 0px 15px;
}

.page-container {
    min-height: 100vh;
}

.main_section {
    height: calc( 100vh - 106px );
}
.doctors_row {
    overflow-y: auto;
    padding-top: 35px;
    padding-bottom: 35px;
    overflow-x: hidden;
    padding-right: 0;
	scroll-snap-type: y mandatory;
}

.sidebar_main::before {
    content: '';
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    width: 100%;
    height: 150px;
    left: 0;
    background:var(--light-green);
    z-index: -1;
}

.sidebar_main {
    background: var(--light-green);
    position: relative;
    margin-left: auto;
}

.sidebar_col_wrapper {
    display: grid;
    align-content: flex-start;
    align-items: flex-start;
	height: 100%;
    overflow-y: auto;
    padding: 30px 20px;
    max-width: 100%;
    margin: 0 auto;
    -webkit-overflow-scrolling: touch;
	margin-bottom: 30px;
}
.sidebar_card {
    margin-bottom: 20px;
}
.sidebar_card_img {
    position: relative;
    border-radius: 34px 34px 0px 0px;
    background: url(../images/hospital-bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}
.sidebar_card_img::before {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    background: linear-gradient(-180deg, transparent, transparent,#00000036, #000000b8);
    opacity: 1;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.sidebar_card_content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 200px;
    padding: 0px 20px 5px;
}

.card_title {
    color: var(--white-color);
    font-size: 22px;
    font-weight: 700;
}

.card_caption {
    font-size: 18px;
    color: var(--white-color);
    font-weight: 100;
}

/* .sidebar_card_img img {
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 34px 34px 0px 0px;
    width: 100%;
    object-position: right;
} */
.sidebar_card_img img {
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 34px 34px 0px 0px;
    width: 100%;
    object-position: right;
    width: 50%;
    display: block;
    padding-top: 10px;
    object-fit: contain;
    aspect-ratio: unset;
    margin-left: auto;
    max-width: 200px;
}

.card_bottom_content {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 20px;
    border: 10px solid var(--green-color);
    border-radius: 0px 0px 34px 34px;
    background: var(--white-color);
    color: var(--green-color);
    font-weight: 800;   
    align-items: center;
    flex-wrap: wrap;
    min-height: 85px;
}

.bottom_title {
    font-size: 18px;
}
.bottom_content_rooms {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.sidebar_col_wrapper_2 .bottom_content_rooms {
    justify-content: flex-end;
}
.bottom_content_rooms span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    background: var(--white-color);
    border-radius: 5px;
}

.sidebar_col_wrapper .bottom_content_rooms span.active-room {
    background: var(--green-color);
    color: var(--white-color);
}
/* .sidebar_col_wrapper_2 .bottom_content_rooms span {
    background: var(--light-green);
} */
.bottom_content_rooms span {
    background: var(--light-green);
}
.doctor_card {
    height: 110px;
    display: flex;
    align-items: flex-end;
    background: linear-gradient(267.04deg, var(--light-green) 0.85%, var(--card-bg-2) 100%);
    border: 2px solid var(--card-border-color);
    margin: 30px 0;
    position: relative;
    z-index: 1;
    justify-content: space-between;
    box-shadow: 8px 8px 15px var(--dark-green);
    border-radius: 15px;
    padding-left: 130px;
}

.doctor_img {
    display: flex;
    align-items: flex-end;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 117px !important;
}

.doctor_img img {
    object-fit: contain;
    object-position: bottom;
    border-radius: 0px 0px 0px 15px;
}

.doctor_card .row {
    height: 100%;
}

.doctor_card .row > div {
    height: 100%;
}

.doctor_name {
    margin: 0;
    padding: 10px 10px;
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 600;
    word-wrap: break-word;
    word-break: break-all;
}

.doctor_card::before {
    content: '';
    position: absolute;
    width: 100%;
    max-width: 116px;
    left: 0;
    top: 0;
    height: 100%;
    z-index: -1;
    border-radius: 20px 0px 0px 20px;
}

.technician_card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background: var(--light-green);
    border-radius: 20px;
    padding: 0 25px 0 0;
}

.technician_img {
    width: 40%;
    max-width: 150px;
    height: 180px;
    padding: 15px 0px 0 0;
    background: var(--white-color);
    display: flex;
    justify-content: flex-end;
    border-radius: 20px 0px 0px 20px;
}

.technician_img img {
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
    border-radius: 0 0 0 20px;
}

.technician_content {
    width: 60%;
    margin-top: 30px;
    background: var(--card-border-color);
    border-radius: 0px 18px 18px 0px;
    padding: 10px;
    color: var(--white-color);
}

.tech_availability {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 30px;
    font-weight: 700;
}

.technician_content h4 {
    font-size: 20px;
}

.clock_icon {
    display: block;
    max-width: 50px;
}

.time_wait_title{
    font-size: 40px;
    font-weight: 700;
}

.tech_time_cols {display: flex;align-items: center;width: 100%;row-gap: 20px;flex-wrap: wrap;}

.time_box_wrapper {
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex: 1;
}

.time_box input {
    display: none;
}

.time_box label {
    padding: 10px;
    background: var(--white-color);
    color: #cfcccc;
    border-radius: 15px;
    width: 100%;
    max-width: 168px;
    box-shadow: inset 0px 4px 4px rgba(0, 0, 0, 0.25);
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 24px;
}

.time_box {
    width: 100%;
    max-width: 168px;
    flex: 0 0 auto;
}

.time_box input:checked + label {
    color: var(--green-color);
    box-shadow: inset 0px -4px 4px rgba(0, 0, 0, 0.25);
}

.tech_time_cols p {flex: 0 0 auto;margin-right: 20px;font-size: 30px;}

.tech_time_sec .tech_card_img img {
    border-radius: 17px 17px 0px 0px;
    max-width: 100px;
    margin: 0 auto;
    display: block;
}

.tech_card_img {
    border-radius: 17px 17px 0px 0px;
    background: var(--grey-color);
    padding-top: 20px;
}

.priority_col_lg .tech_card_img{
    padding-top: 30px;
}

.tech_card_content {
    padding: 8px 10px;
    background: var(--white-color);
    border-radius: 0px 0px 17px 17px;
    color: var(--dark-black);
}

.tech_card_content h4 {
    font-size: 18px;
    margin-bottom: 5px;
    font-weight: 600;
}

.nav_btns_wrapper {
    padding: 50px 0px 0;
    display: flex;
    gap: 20px;
}

.nav_btns_wrapper .nav_btn {
    width: 50px;
    height: 50px;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white-color);
}

.nav_btn img {
    display: block;
    max-width: 20px;
}
.priority_header {
    max-width: calc( 100% - 240px );
}

.priority_sec {
    max-width: 100%;
    margin-left: auto;
}

.priority_title {
    color: var(--white-color);
    font-size: 40px;
    font-weight: 700;
    margin-bottom: 14px;
}

.priority_time .tech_availability {
    color: var(--white-color);
    padding: 10px;
    border-radius: 18px;
    background: var(--card-border-color);
    font-size: 25px;
    max-width: 180px;
    margin-left: auto;
}

.priority_time {
    padding: 16px;
    background: var(--light-green);
    border-radius: 25px;
}

.priority_time h4 {
    font-size: 20px;
}

.priority_time .clock_icon {
    max-width: 38px;
}
.priority_col_lg {width: 100%;max-width: calc( 100% - 240px );display: grid;gap: 30px; align-content: flex-start;}

.priority_row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.priority_col_lg .tech_card_img img {
    width: 100%;
    display: block;
    max-width: 230px;
    margin: 0 auto;
}

.priority_col_lg .tech_card {
    max-width: 300px;
}

.priority_col_sm {
    width: 30%;
    max-width: 200px;
    display: grid;
    align-items: flex-start;
    align-content: flex-start;
    padding-top: 25%;
    gap: 15px;
}

.priority_col_sm .tech_time {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: var(--light-green);
    border-radius: 15px 0px 0px 15px;
    padding: 10px;
}

.time_icon_text {
    text-align: center;
    background: var(--card-border-color);
    border-radius: 10px;
    color: var(--white-color);
    padding-bottom: 6px;
}

.time_icon_text .clock_icon {
    margin: 6px auto;
    max-width: 33px;
}

.cmn_btn {
    width: 100%;
    color: var(--dark-green-2);
    font-size: 40px;
    font-weight: 700;
    border-radius: 18px;
    padding: 24px;
    background: linear-gradient(267.04deg, var(--light-green) 0.85%, var(--card-bg-2) 100%);
    border: 2px solid var(--card-border-color);
    box-shadow: -6px -6px 15px var(--dark-green-2), 8px 8px 15px var(--dark-green);
    border-radius: 15px;
    transition: all 0.3s;
    display: block;
    text-align: center;
}

.animated_btn {
    transition: all 0.3s;
    cursor: pointer;
}

.animated_btn:hover {
    box-shadow: -6px 6px 15px var(--dark-green-2), 8px 8px 15px var(--dark-green);
    transform: translateY(-5px);
}
.cmn_btn img {
    max-width: 40px;
    margin-right: 6px;
}

.priority_time_2 {display: flex;}

.priority_time_2 h4 {font-weight: 700;color: var(--card-border-color);}

.rounded_header_wrapper {
    display: flex;
    align-items: center;
}

.rounded_header_wrapper .header_icon {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: var(--white-color);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0px 5px 3px rgba(0, 0, 0, 0.25));
    position: relative;
    cursor: pointer;
}

.rounded_header_wrapper .header_icon img {
    max-width: 100px;
}

.rounded_header_wrapper .header_title {
    padding: 20px 45px 20px 20px;
    background: var(--white-color);
    transform: translateX(-10px);
    font-size: 22px;
    border-radius: 0px 50px 50px 0;
    filter: drop-shadow(9px 4px 4px rgba(0, 0, 0, 0.25));
    z-index: 1;
    font-weight: 700;
    width: 100%;
    max-width: calc( 100% - 180px );
    margin: 0;
}
.broom_wrap{
    max-width: 200px;
    margin: 0 auto;
}
.cmn_btn_wrapper2 .cmn_btn {
    padding: 0;
    background: transparent;
    color: var(--card-border-color);
}
.counter_title {
    font-size: 35px;
    font-weight: 700;
}

.counter_wrapper {
    display: flex;
    align-items: center;
    color: var(--white-color);
    font-weight: 700;
}

.counter_wrapper .counter_btn {background: none;border: none;font-size: 65px;color: var(--white-color);line-height: 1;max-width: 40px;display: flex;}

.counter_input {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    border-radius: 12px;
    border: 2px solid var(--white-color);
    background: transparent;
    text-align: center;
    font-size: 40px;
    margin: 0 25px;
    color: var(--white-color);
    font-weight: 700;
}

.list_header, .patients_list {
    display: grid;
    grid-template-columns: 100px 1fr 78px 78px;
    padding: 10px;
    font-size: 22px;
    font-weight: 500;
}

.list_header {
    padding: 30px 20px;
    background: var(--green-color);
    border-radius: 40px 40px 0px 0px;
    color: var(--white-color);
    font-size: 24px;
}
.patients_list {
    background: var(--white-color);
    border-bottom: 1px solid var(--dark-black);
    padding: 10px 20px;
}

.list_header span:nth-child(2), .patients_list span:nth-child(2) {
    padding: 0 20px;
}

.patients_list_container {
    margin-top: 40px;
}

.patients_list:last-child {
    border: none;
    border-radius: 0px 0px 30px 30px;
    padding-bottom: 25px;
}

.ctm_dropdown .dropdown-toggle {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px;
    background: var(--light-green);
    color: var(--green-color);
    font-weight: 600;
    box-shadow: 0px 0px 10px #00000040;
    font-size: 20px;
    transition: 0.3s;
}

.ctm_dropdown .dropdown-menu {
    width: 100%;
    font-size: 18px;
}

.room__box {
    min-height: 110px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--card-border-color);
    box-shadow: 8px 8px 15px var(--dark-green);
    border-radius: 15px;
    cursor: pointer;
    background: #efefef;
    gap: 6px;
    align-items: center;
    transition: all 0.3s;
}

.room_name {
    color: var(--dark-green);
    font-weight: 700;
    font-size: 30px;
    margin-bottom: 5px;
}

.room__title {
    font-size: 35px;
    color: var(--green-color);
    margin-bottom: 6px;
    font-weight: 500;
}

.room__box.ActiveRoom {
    background: var(--green-color);
    color: var(--white-color);
    border-color: var(--white-color);
}

.room__box.deskRoom {
    background: #c1ffbb;
    border: 1px solid var(--light-green);
}

.room__box.ActiveRoom .room__title {
    color: var(--white-color);
}

.room__box.ActiveRoom .room_name{
    color: var(--white-color);
}

.tech_tm_hd {
    font-weight: 700;
    text-transform: uppercase;
    padding-right: 10px;
}

.room__box.deskRoom .room_name{
    color: var(--dark-green);
}

.modal__title {
    color: var(--green-color);
}

.modal-content .modal_btn {
    background-color: var(--green-color);
    border-color: var(--green-color);
}

.modal-content .modal_btn:hover{
    background: var(--dark-green-2);
    border-color: var(--dark-green-2);
}

.passcode_container input {
    padding: 15px;
    box-shadow: none;
}

.passcode_container input:focus {
    box-shadow: none;
    border-color: initial;
}

.passcode_container button:focus {
    background: var(--dark-green-2);
    border-color: var(--dark-green-2);
    box-shadow: none;
}

.doctors_row {
    padding-right: 0 !important;
    margin-right: calc(var(--bs-gutter-x) * -.5);
}

.doctors_row.waiting_page_row {
    padding-top: 0;
}

.doctors_row.waiting_page_row .priority_row {
    align-items: flex-start;
    justify-content: flex-end;
    gap: 0;
    flex-wrap: wrap;
}

.waiting_page .priority_col_lg {
    max-width: 100%;
    width: 70%;
    gap: 0;
    padding-right: 30px;
    row-gap: 20px;
}

.waiting_page .priority_col_lg .tech_card {
    max-width: 100%;
}

.doctors_row.waiting_page_row .priority_col_sm {
    padding-bottom: 100px;
    height: 100%;
    align-items: center;
    align-content: flex-start;
    width: 30%;
}

.waiting_page_row .priority_title {
    padding: 20px;
    border-radius: 0px 0px 30px 30px;
    background: var(--light-green);
    text-align: center;
    color: var(--dark-black);
    margin: 0;
}

.waiting_page .priority_time {
    flex-wrap: wrap;
    display: flex;
    border-radius: 15px;
    align-items:center;
}

.waiting_page .priority_time h4 {
    font-size: 30px;
    max-width: 200px;
    font-weight: 700;
    width: 50%;
}

.waiting_page .priority_time .tech_availability {
    border-radius: 10px;
    width: 50%;
}

.waiting_page .priority_time .clock_icon {
    max-width: 60px;
}

.waiting_page .priority_time .tech_availability p {
    font-size: 35px;
}

.doctors_row.waiting_page_row .tech_card_content h4 {
    font-size: 30px;
}

.waiting_time_page_row .priority_time h4 {
    color: var(--dark-black);
    max-width: 140px;
}

.waiting_page_row .tech_card_content p {
    font-size: 20px;
}

.opacity-0 {
    opacity: 0;
}

.card_bottom_content.active{
    animation: dimborder 1s ease alternate infinite;
}

@keyframes dimborder {
    from{
        border-color: var(--red-color);
    }
    to{
        border-color: #ff9c9c;
    }
}
.error .form-label {
    color: var(--red-color);
}
.error .form-control {
    border-color: var(--red-color);
}

@media ( min-width: 768px ) and ( max-width: 1536px ){
    .waiting_page_row .priority_title {
        padding: 10px 20px;
        font-size: 20px;
        border-radius: 0px 0px 30px 30px;
    }

    .sidebar_card_content {
        padding: 0px 20px 8px;
    }

    .fullscreen_hdr.site-header .site-logo {
        margin-left: 80px;
    }

    .doctor_card {
        height: 75px;
        padding-left: 80px;
        margin: 30px 0;
    }

    .doctor_img {
        max-width: 75px !important;
    }

    .doctor_name {
        padding: 10px 12px;
        font-size: 15px;
        margin-bottom: 5px;
    }

    .cmn_btn {
        font-size: 30px;
        padding: 14px 20px;
    }

    .rounded_header_wrapper .header_title {
        padding: 14px 45px 14px 20px;
        font-size: 14px;
        max-width: calc( 100% - 90px );
    }

    .rounded_header_wrapper .header_icon {
        width: 90px;
        height: 90px;
    }

    .rounded_header_wrapper .header_icon img {
        max-width: 48px;
    }

    .time_wait_title.mb-4 {
        font-size: 30px;
        margin-bottom: 10px !important;
    }

    .tech_time_cols p {
        font-size: 20px;
    }

    .time_box label {
        border-radius: 9px;
        height: 45px;
        font-size: 20px;
    }

    .tech_time_sec .tech_card_img img {
        max-width: 100px;
    }

    .nav_btns_wrapper {
        padding: 20px 0px 0;
    }

    .tech_tm_hd {
        word-break: break-all;
        font-size: 11px;
    }

    .priority_col_lg .tech_card_img img {
        max-width: 175px;
    }
    .priority_col_lg {
        gap: 15px;
    }

    .technician_img {
        max-width: 95px;
        height: auto;
        border-radius: 20px 0px 0px 20px;
    }

    .technician_content {
        margin-top: 10px;
    }

    .technician_content .tech_availability p {
        font-size: 20px;
    }

    .clock_icon {
        max-width: 40px;
    }
}
.fullscreen_btn {
    column-gap: 20px;
    /* overflow-x: hidden; */
}
.fullscreen_btn .header_icon {
    width: 35px;
    cursor: pointer;
}
.doctor_placeholder_img{
    filter: invert(1);
}


/* sidebar css  */
.sidebar_wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99999;
    transition: 0.25s;
    transform: translateX(100%);
}

.sidebar_overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: var(--dark-black);
    opacity: 0.6;
    z-index: 1;
    visibility: hidden;
    transition: 0.3s;
}
.sidebar_wrapper.active{
    transform: translateX(0);
}
.sidebar_overlay.active{
    visibility: visible;
}
.sidebar_inner {
    width: 94%;
    max-width: 320px;
    background: var(--light-green);
    height: 100%;
    overflow-y: auto;
    padding: 60px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: auto;
    position: relative;
    z-index: 2;
}
.sidebar_inner .counter_input_Non_White {
    width: 90px;
    height: 70px;
}
.sidebar_inner .dropdown-item:active,.sidebar_inner .dropdown-item:focus, .sidebar_inner .dropdown-item:hover{
    background: var(--green-color);
    color: var(--white-color);
}
.sidebar_inner .dropdown-toggle:focus {
    outline: 0;
    box-shadow: none;
}
.sidebar_inner .dropdown-menu{
    background: var(--white-color);
}
.sidebar_inner .header_icon {
    height: 30px;
    width: 45px;
    object-fit: contain;
    object-position: left;
}

.sidebar_inner p {
    cursor: pointer;
}
.close_menu_icon {
    position: absolute;
    top: 20px;
    right: 20px;
}
.feedback_smiley {
    display: inline-flex;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: var(--white-color);
    padding: 8px;
    margin: 5px 1px;
    box-shadow: 0px 0px 14px #a5a2a238;
    cursor: pointer;
    transition: 0.3s ease;
}
.feedback_smiley:hover {
    transform: scale(1.2);
}
.feedback_wrapper {
    text-align: center;
    margin-top: 20px;
}

/* sidebar card layout 2  */
.sidebar_col_wrapper_2{
    gap: 5px;
    padding: 20px 20px;
    max-width: 100%;
}
.sidebar_card_2 {
    padding: 10px;
    background: var(--white-color);
    border-radius: 10px;
    border: 1px solid var(--green-color);
    transition: 0.3s;
    cursor: pointer;
}
.sidebar_card_2 img {
    aspect-ratio: 3/2;
    object-fit: contain;
    object-position: bottom;
    border-radius: 8px;
    padding-top: 10px;
    background: var(--grey-color);
}
.sidebar_card_2 .card_title_2 {
    font-size: 15px;
}
.bottom_title_2 {
    font-weight: 600;
    color: var(--green-color);
}
.sidebar_card_2.active {
    animation: dimborder 1s ease alternate infinite;
    border-width: 3px;
}
/* priority css  */
.tech_card {
    position: relative;
}

.priority_label {position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;overflow: hidden;pointer-events: none;}

.priority_label p {
    color: var(--white-color);
    padding: 7.5px 7.5px;
    font-size: 15px;
    font-family: "Poppins";
    text-align: center;
    background: var(--red-color);
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(-30%) translateY(0%) rotate(-45deg);
    transform-origin: top right;
}

.priority_label p::before,.priority_label p::after {
    content: '';
    position: absolute;
    top: 0;
    margin: 0 -1px;
    width: 100%;
    height: 100%;
    background: inherit;
    min-width: 55px;
}

.priority_label p::before {
    right: 100%;
}

.priority_label p::after {
    left: 100%;
}
.help_message_box {
    position: absolute;
    right: 50px;
    z-index: -1;
    padding: 20px 20px 20px;
    background: var(--white-color);
    color: var(--dark-black);
    transition: transform 0.3s;
    transform: translateY(-100%);
    transform-origin: top;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0px 6px inset;
    color: #842029;
    background-color: #f8d7da;
    border-color: #f5c2c7;
    font-weight: 600;
    width: 100%;
    max-width: 472px;
    border-radius: 0px 0px 20px 20px;
    top: 0;
    text-align: center;
}

.help_corss_btn {
    max-width: 14px;
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
}
.help_message_box.active {
    transform: translateY(0);
    top: 100%;
}
.front_desk_rooms_cont{
    overflow-y: auto;
    height: 100%;
}

@media ( min-width: 800px ) and (max-width: 1200px){
    .site-header{
        border-radius: 0px 0px 20px 20px;
    }
}

@media ( max-width: 1550px ){
    .sidebar_col_wrapper_2 .bottom_content_rooms span {
        width: 20px;
        height: 20px;
    }
    .sidebar_card_2 .card_title_2 {
        font-size: 12px;
    }
}

@media ( max-width: 1190px ){
    .counter_title {
        font-size: 22px;
    }
}
@media ( max-width: 991px ){
    .container{
        max-width: 100% !important;
    }
    .main_section .container > .row{
        justify-content: center;
    }
    .technician_img {
        max-width: 100px;
        height: 130px;
    }
    .technician_content {
        margin-top: 10px;
    }
    .header-text{
        font-size: 26px;
    }
    .tech_room_heading{
        font-size: 25px;
    }
    .time_box{
        max-width: 100px;
    }
    .time_box_wrapper{
        gap: 10px;
    }
    .tech_card_content h4{
        font-size: 14px;
    }
    .waiting_page .priority_time .tech_availability p {
        font-size: 20px;
    }
    .waiting_page .priority_time h4{
        font-size: 20px;
    }
    .waiting_page .priority_time .clock_icon{
        max-width: 40px;
    }
    .list_header, .patients_list {
        grid-template-columns: 75px 190px 1fr;
        font-size: 16px;
    }
    .list_header{
        font-size: 16px;
        padding: 14px 20px;
        border-radius: 20px 20px 0px 0px;
    }
    .patients_list:last-child {
        border-radius: 0px 0px 20px 20px;
    }
    .counter_input {
        width: 80px;
        margin: 0 18px;
    }
    .counter_wrapper .counter_btn {
        max-width: 20px;
    }
    .counter_title {
        font-size: 22px;
    }
    .room_name{
        font-size: 20px;
    }
    .room__box{
        min-height: 85px;
    }
}
@media ( max-width: 767px ){
    body{
        height: auto;
        overflow: unset;
        background-attachment: fixed;
    }
    .main_section{
        height: auto;
    }
    .doctors_row{
        margin-right: 0;
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
    }
    .sidebar_main {
        background: var(--light-green);
        border-radius: 16px;
        margin-bottom: 20px;
    }
    .sidebar_main::before{
        display: none;
    }
    .time_wait_title{
        font-size: 30px;
    }
    .waiting_page .priority_col_lg {
        width: 100%;
        padding-right: 0;
    }
    .priority_col_sm {
        width: 100%;
        margin-top: 15px;
        max-width: 100%;
    }
    .priority_col_sm .tech_time {
        border-radius: 10px;
    }
    .rounded_header_wrapper .header_icon img {
        max-width: 37px;
    }
    .rounded_header_wrapper .header_icon {
        width: 70px;
        height: 70px;
    }
    .rounded_header_wrapper .header_title {
        padding: 8px 20px;
        transform: translateX(-8px);
        font-size: 12px;
        max-width: calc( 100% - 70px );
    }
    .cmn_btn {
        font-size: 24px;
        padding: 15px 20px;
    }
    .list_header, .patients_list {
        grid-template-columns: 75px 1fr 75px;
    }
    .sidebar_col_wrapper {
        max-width: 100%;
        grid-template-columns: 1fr 1fr;
    }
    .counter_wrapper{
        justify-content: center;
    }
}
@media ( max-width: 640px ){
    .site-header {
        border-radius: 0px 0px 10px 10px;
        padding: 0px 15px;
        height: 84px;
    }
    .help_message_box{
        right: 0;
        padding: 26px 20px 20px;
    }
    .fullscreen_btn{
        column-gap: 8px;
    }
    .fullscreen_btn .header_icon {
        width: 23px;
    }
    .counter_input_Non_White {
        border-radius: 5px;
        font-size: 13px;
        width: 35px;
        padding: 3px 5px;
    }
    .sidebar_inner .header_icon {
        display: inline-block;
        margin-right: 10px;
    }
    .header_icon.close_menu_icon {
        margin: 0;
    }
    .tech_time_cols p {
        font-size: 20px;
    }
    .tech_time_cols{
        display: grid;
    }
    .sidebar_col_wrapper {
        grid-template-columns: 1fr;
    }
    .header-text{
        font-size: 14px;
    }
}

/*new css */
/*hygiene toogle css */
.hygiene__toggle {
    position: relative;
    display: inline-block;
    width: 140px;
}

.hygiene__toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }   
.toggle__switcher {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #d9534f;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.4s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    color: white;
    font-size: 13px;
    line-height: 18px;
    height: 100%;
}

.toggle__switcher::before {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.4s ease;
    text-align: right;
    text-align: center;
    height: 100%;
    right: 14px;
    left: unset;
    width: calc( 100% - 38px );
    content: 'Hygienist mode off';
}

.toggle__switcher::after {
    content: "";
    position: absolute;
    height: 100%;
    width: 15px;
    left: 0;
    bottom: 0;
    background-color: white;
    transition: transform 0.4s ease;
    border-radius: 5px;
}
.hygiene__toggle input:checked + .toggle__switcher {
    background-color: #5cb85c; 
}
.hygiene__toggle input:checked + .toggle__switcher::after {
    transform: translateX(calc(140px - 15px));
}
.hygiene__toggle input:checked + .toggle__switcher::before {
    left: 15px;
    right: unset;
    content: 'Hygienist mode on';
}
.waiting_page .priority_time .clock_icon {
    max-width: 40px;
}
.waiting_page .priority_time .tech_availability p {
    font-size: 26px;
}
.priority_col_lg .technician_card {
    border-radius: 15px;
}
.priority_col_lg .tech_card_img {
    aspect-ratio: 21/9;
    display: flex;
    align-items: flex-end;
    position: relative;
}
.tech__btns--btn {
    font-size: 20px;
    background: linear-gradient(229deg, var(--light-green) 0.85%, var(--card-bg-2) 100%);
    border: 2px solid var(--card-border-color);
    border-radius: 9px;
    box-shadow: 0px 0px 10px #00000054;
    font-weight: 700;
    position: absolute;
    right: 20px;
    transition: all 0.25s ease;
    color: var(--dark-green-2);
    min-height: 60px;
    min-width: 110px;
    transform: translateY(0);
}
.tech__btns--btn-brb,
.tech__btns--btn-resume{
    top: 20px;
}
.tech__btns--btn-completed{
    bottom: 20px;
}
.tech__btns--btn-resume.btn {
    opacity: 0;
    visibility: hidden;
}
.tech__btns--btn:hover, .tech__btns--btn:focus {
    box-shadow: 0px 0px 32px #00000078;
    transform: translateY(3px);
}
@media ( max-width: 1200px ){
    .waiting_page .priority_time .tech_availability p {
        font-size: 20px;
    }
    
        .waiting_page .priority_time h4 {
    font-size: 20px;
    flex: 1 0;
}
}
@media ( max-width: 991px ){
    .hygiene__toggle input:checked + .toggle__switcher::after {
        transform: translateX(calc(115px - 15px));
    }
    .hygiene__toggle {
        width: 115px;
    }
    .priority_col_lg .tech_card_img img{
        margin: 0;
    }
}
@media ( min-width: 768px ) and ( max-width: 991px ){
    .time_box {
        max-width: 86px;
    }
    .time_box label{
        font-size: 16px;
    }
}
@media ( max-width: 767px ){
    .time_box label {
    height: 50px;
    font-size: 18px;
}
}
@media ( max-width: 480px ){
    .time_box {
        max-width: 90px;
    }
}

/*hygiene toggle css end */