body {
    font-family: "Montserrat", sans-serif !important;
    margin: 0;
    height: 100%;
    background-color: #f0fbff !important;
}

.table-responsive {
    /* height: 100% !important; */
    /* This makes the div take all the available height of its parent, which is now the body */
    display: flex;
    /* Flexbox model */
    flex-direction: column;
    /* This is usually necessary if you want to control the alignment or distribute space within the div */
}

.table-responsive.preview {
    max-height: 600px !important;
}

.table-responsive.vital {
    max-height: 150px !important;
}

/* Webkit-based browsers */
::-webkit-scrollbar {
    background-color: #fff;
}

/* Webkit-based browsers */
::-webkit-scrollbar-thumb {
    background-color: #1159c9;
}

/* Webkit-based browsers */
::-webkit-scrollbar {
    width: 3px;
    height: 2px;
}

/* Webkit-based browsers */
::-webkit-scrollbar-thumb {
    width: 3px;
    height: 2px;
}

.app_logo_parent {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 40px !important;
    height: 72px;
    z-index: 999;
    background-color: #02a3f8;
}

.left_side {
    width: 19%;
    overflow: auto;
    height: 100vh;
    border: 2px solid #dce4e8;
    background-color: #02a3f8;
}

.nav_bar {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 14px;
    position: fixed;
    top: 0;
    width: 81%;
    z-index: 999;
    border-bottom: 2px solid #dce4e8;
    padding-inline: 70px;
    height: 72px;
}
.nursing_nav_bar {
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    border-bottom: 2px solid #dce4e8;
    padding-inline: 70px;
    height: 72px;
}

.nursing_heading_text{
    width:40%
}

.active-card{
border-radius: 8px;
    background-color: white;
    padding: 18px;
    border: 2px solid transparent;
    background-image: linear-gradient(white, white), linear-gradient(81.12deg, #009EFD 6.57%, #26ECA2 93.43%);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0px 4px 60px 0px #04060F0D;
    gap: 5px;
    cursor:pointer;
    text-decoration:none !important;

}

.inactive-card{
border-radius: 8px;
    background-color: white;
    padding: 18px;
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0px 4px 60px 0px #04060F0D;
    gap: 5px;
    cursor:pointer;
    text-decoration:none !important;

}


.active-attend{
    background-color: #02A3F8;
    box-shadow: 0px 1px 2px 0px #1018280F;
box-shadow: 0px 1px 3px 0px #1018281A;
width: 188.1666717529297px;
height: 36px;
border-radius: 6px;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
display:flex;
justify-content:center;
align-items: center;
color : #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor:pointer

}

.inactive-attend{
width: 188.1666717529297px;
height: 36px;
padding-top: 8px;
padding-right: 12px;
padding-bottom: 8px;
padding-left: 12px;
display:flex;
justify-content:center;
align-items: center;
color: #667085;
font-size: 14px;
font-weight: 600;
text-decoration: none;
cursor:pointer
}
._avatar {
    height: 30px;
    width: 30px;
    border-radius: 50%;
    /* display: flex;
    align-items: center;
    justify-content: center; */
    overflow: hidden;
}

.sidebar_parent {
    padding-top: 15px;
}

.side_opener {
    display: none;
}

.input_parent {
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
    padding-left: 50px;
    background-color: #f1fbff;
}

.search_input_parent {
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
    padding-left: 50px;
    background-color: transparent;
    border: 1px solid #dce4e8 !important;
}

.input_parent_select {
    height: 56px;
    background-color: #f1fbff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
}

.app_select_parent {
    height: 56px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
    /* padding-left: 15px !important; */
    /* height: 40px !important; */
    padding: 10px, 14px, 10px, 14px !important;
    border-radius: 8px !important;
    border: 1px solid #d0d5dd !important;
}

.app_select_parent input::placeholder {
    color: #9e9e9e !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    padding-left: 15px !important;
}

.app_select_parent select {
    padding-left: 15px !important;
    height: 40px !important;
    padding: 10px 14px 10px 14px !important;
    border-radius: 8px !important;
    /* border: 1px solid #D0D5DD !important; */
}

.input_parent2 {
    height: 56px;
    background-color: #f1fbff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
    padding-left: 20px;
}

.login_input_parent {
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    flex-direction: row;
    position: relative;
}

.login_input_parent input:read-only {
    color: #9e9e9e !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    /* padding-left: 15px !important; */
}

.login_input_parent input::placeholder {
    color: #9e9e9e !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    /* padding-left: 15px !important; */
}

.login_input_parent input {
    padding-left: 15px !important;
    height: 40px !important;
    padding: 10px 35px 10px 35px !important;
    border-radius: 8px !important;
    border: 1px solid #d0d5dd !important;
}

.login_input_parent textarea {
    padding-left: 15px !important;
    height: 40px !important;
    padding: 10px 35px 10px 35px !important;
    border-radius: 8px !important;
    border: 1px solid #d0d5dd !important;
    width: 100% !important;
}

.input_parent2.readonly {
    background-color: #eee;
}

.input_icon {
    position: absolute;
    left: 15px;
}

.input_icon_end {
    position: absolute;
    right: 15px;
    cursor: "pointer ";
}

.input_icon_end_date {
    position: absolute;
    right: 15px;
    cursor: "pointer ";
    z-index: 99999;
}

 .cke_notifications_area
    {
        display: none !important;
    }

.readonly {
    background-color: #f9fafb;
}

textarea:read-only {
    background-color: #F1FBFF !important;
    color: #9e9e9e !important;
    font-weight: 400 !important;
    font-size: 14px !important;
}
.floating_label {
    position: absolute;
    top: -13px;
    left: 8px;
    padding-inline: 5px;
    /* background: red; */
    background: #fbfcff;
    z-index: 999;
}

.content_parent {
    margin-block: 70px;
    width: 100%;
    padding-inline: 40px;
    padding-block: 40px;
    background-color : #F0FBFF
}

.right_side {
    width: 81%;
    height: 100vh;
    overflow-y: scroll;
    background: #f7fcff;
}

.nursing_right_side {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    background: #f7fcff;
}

.custom-btn-secondary {
    background-color: #5fc1c4 !important;
    height: 50px !important;
    font-size: 16px;
    font-weight: 500;
}

.custom-btn-secondary:disabled {
    background-color: #e0e0e0 !important;
    height: 50px !important;
    font-size: 16px;
    font-weight: 500;
}

.custom-btn-outline-secondary {
    background-color: transparent !important;
    height: 50px !important;
    color: #1a1c1e !important;
    font-size: 16px;
    font-weight: 500;
}

.custom-bg-primary {
    background-color: #68a2fd;
}

.custom-bg-secondary {
    background-color: #def3ff;
}

.custom-bg-gray {
    background-color: #dce4e8;
}

.custom-text-primary {
    color: #68a2fd;
}

.tab {
    overflow: hidden;
    border-bottom: 4px solid #e8f1ff;
}

.tab a {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    text-decoration: none;
    color: #9e9e9e;
    font-size: 16px;
    font-weight: 500;
}

.tab a:hover {
    color: #02a3f8;
}

.tab a.active {
    border-bottom: 4px solid #02a3f8;
    color: #02a3f8;
    text-decoration: none;
}

.tabcontent {
    display: none;
    padding: 6px 12px;
}

.box-radius {
    border-radius: 10px;
}

tbody tr:nth-child(even) {
    background-color: #f0fbff;
}

.table tbody tr {
    margin-bottom: 20px;
}

.table tbody td {
    text-wrap: nowrap;
    padding-bottom: 15px;
    padding-top: 15px;
}

.table thead th {
    text-wrap: nowrap;
    margin-right: 20px !important;
}

.custom-table-spacing th,
.custom-table-spacing td {
    padding: 20px 30px !important;
}

/* For WebKit based browsers (Chrome, Safari) */
.table-responsive::-webkit-scrollbar {
    width: 10px;
}

.table-responsive::-webkit-scrollbar-thumb {
    background-color: #888;
}

/* For Firefox */
.table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #888 transparent;
}

.custom-pagination {
    list-style: none;
    padding: 0;
}

.custom-pagination .page-item {
    display: inline-block;
}

.custom-pagination .navigate {
    border: 1px solid #dce4e8;
    color: #dce4e8;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.custom-pagination .page-link {
    border: none;
    background-color: transparent;
    color: #000;
    padding: 10px 10px;
    font-size: 12px;
    font-weight: 500;
}

.custom-pagination .page-item.active .page-link {
    background-color: #f8f8f8;
    color: #111827;
    font-weight: bolder;
    border-radius: 10px;
}

#submit:hover .mdc-button__label {
    color: #fff;
}

#submit:focus:not(:hover) .mdc-button__label {
    color: #fff;
}

.pending-status {
    background-color: #fbf4e4;
    border-radius: 4px;
    padding: 6px, 12px, 6px, 12px;
    width: 96px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pending-status p {
    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #dbaa00;
}

.delivered-status {
    background-color: #dcf3ff;
    border-radius: 4px;
    padding: 6px, 12px, 6px, 12px;
    width: 96px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.delivered-status p {
    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #3d81db;
}

.approved-status {
    background-color: #ecf8f0cc;
    border-radius: 4px;
    padding: 6px, 12px, 6px, 12px;
    width: 96px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.approved-status p {
    font-size: 14px;
    font-weight: 600;
    line-height: 19.6px;
    letter-spacing: -0.02em;
    text-align: center;
    color: #1c8c6e;
}

.status-success-bg {
    background-color: #f2fffc;
    padding: 10px;
    height: 40px;
    border-radius: 65px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.status-success {
    background: linear-gradient(286.17deg, #22bb9c 0%, #35debc 100%);
    width: 11px;
    height: 11px;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 100%;
}

.status-delivered-bg {
    background-color: #dcf3ff;
    padding: 5.56px, 11.13px, 5.56px, 11.13px;
    height: 25.03;
    border-radius: 3.71px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.status-delivered {
    background: linear-gradient(286.17deg, #3d81db 0%, #35debc 100%);
    width: 11px;
    height: 11px;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 100%;
}

.status-pending-bg {
    background-color: #fff8ed;
    padding: 10px;
    height: 40px;
    border-radius: 65px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

.status-pending {
    background: linear-gradient(286.17deg, #ff9900 0%, #ffd480 100%);

    width: 11px;
    height: 11px;
    margin-top: auto;
    margin-bottom: auto;
    border-radius: 100%;
}

.table-parent {
    background: #fff !important;
    padding: 20px;
    border-radius: 10px;
}

.dropdown-menu li {
    position: relative;
}

.dropdown-menu .dropdown-submenu {
    display: none;
    position: absolute;
    right: 100%;
    top: -7px;
}

.dropdown-menu .dropdown-submenu-left {
    left: 100%;
    right: auto;
}

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

.template-option {
    cursor: pointer;
    transition: transform 0.2s;
}

.template-option input[type="radio"]:checked + div {
    border: 3px solid #5fc1c4;
    border-radius: 10px;
}

.pathology-upload {
    border: 1px dashed #5fc1c4;
    min-height: 87px;
    border-radius: 8px;
}

.select2-container--bootstrap-5 .select2-selection--single {
    border: none !important;
}

.select2-container--bootstrap-5
    .select2-selection--multiple
    .select2-selection__clear,
.select2-container--bootstrap-5
    .select2-selection--single
    .select2-selection__clear {
    position: absolute;
    top: 50%;
    right: 2.25rem !important;
    left: initial !important;
    width: 0.75rem;
    height: 0.75rem;
    padding: 0.25em;
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
}

.nav-link {
    color: #667085 !important;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff !important;
    background-color: #02a3f8 !important;
}

.loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

.loader_small {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #3498db;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    animation: spin 1s linear infinite;
}

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

    100% {
        transform: rotate(360deg);
    }
}

::placeholder {
    color: #b2b8bd !important;
    font-weight: 300;
}

input[type="email"] {
    font-size: 16px !important;
    color: #000 !important;
    font-weight: 500 !important;
}

input[type="text"] {
    font-size: 16px !important;
    color: #000 !important;
    font-weight: 500 !important;
}

select {
    font-size: 16px !important;
    color: #000 !important;
    font-weight: 500 !important;
}

.select2-container--bootstrap-5 .select2-selection {
    border-radius: 10px !important;
    min-height: 100px !important;
}

.select2-container--bootstrap-5
    .select2-selection--multiple
    .select2-selection__rendered
    .select2-selection__choice {
    color: #68a2fd !important;
    border: 1px solid #68a2fd !important;
    border-radius: 20px !important;
}

.service_types_parent {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    background-color: #f0fbff;
    padding: 10px;
}

.service_type {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 20px;
    color: #000;
    cursor: pointer;
    min-width: 140px;
}

.online-icon {
    width: 10px;
    height: 10px;
    background-color: green;
    border-radius: 50%;
    animation: blink 1s infinite;
}


/* selectize */
.selectize-control {
    display: flex;
    align-items: center;
    height: 100%;
    border-radius: 8px; /* Bootstrap 5 border radius */
}

.selectize-control.single .selectize-input{
    background: none !important;
}

.selectize-dropdown {
    border: 1px solid rgba(0, 0, 0, .15); /* Bootstrap 5 dropdown border */
    border-radius: .25rem; /* Bootstrap 5 border radius */
}

.selectize-input.focus,
.selectize-input:hover {
    border-color: #86b7fe; /* Bootstrap 5 focus border color */
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25); /* Bootstrap 5 focus shadow */
}

.selectize-dropdown-content {
    max-height: 300px;
    overflow-y: auto;
}
.selectize-control.single .selectize-input, .selectize-dropdown.single{
    border: none !important;
}


.profile-popover {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 700px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    z-index: 100;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
}


.accordion-button:not(.collapsed) {
    background-color: transparent !important;
    color: #1A1C1E !important;
}


.position-relative { position: relative; }


@keyframes blink {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.service_type.active {
    background-color: #02a3f8;
    color: #fff;
}

@keyframes button {
    0% {
        height: 42px;
    }
    50%{height: 45px}
    80%{height: 42px}
    100% {
        height: 40px;
    }
}

@media screen and (max-width: 900px) {
    .profile-popover {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 300px;
    background: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 24px rgba(0,0,0,0.08);
    z-index: 100;
    padding: 16px;
    border-radius: 8px;
    font-size: 14px;
}
    .left_side {
        width: 60%;
        height: 100vh;
        position: absolute;
        left: -100%;
        transition: 0.5s;
        overflow: auto;
        z-index: 999999;
    }

    .nav_bar {
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 14px;
        width: 100%;
        padding-inline: 20px;
    }
    .nursing_nav_bar {
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 14px;
        width: 100%;
        padding-inline: 20px;
    }

    .nursing_heading_text{
    width:75%
}

    .side_opener {
        display: initial;
    }

    .right_side {
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        background: #f0f2f7;
    }

    .nursing_right_side {
        width: 100%;
        height: 100vh;
        overflow-y: scroll;
        background: #f0f2f7;
    }

    .content_parent {
        margin-top: 70px;
        width: 100%;
        height: 100%;
        padding-inline: 20px;
        padding-block: 40px;
        background-color : #F0FBFF
    }

    .pin-text{
        font-size : 18px;
        text-align: center;
    }

    .about-pin{
        font-size : 14px;
    }
}