//.custom-overflow-hide {
//    overflow-x: hidden;
//}
//
//.flex-column-fluid {
//    @media (max-width: 991px) {
//        padding-top: 20px !important;
//    }
//}
//
//.header .header-menu.top-bar-menu .menu > .menu-item.hover > .menu-link:not(.disabled):not(.active),
//.header .header-menu.top-bar-menu .menu > .menu-item > .menu-link:hover:not(.disabled):not(.active) {
//    background-color: rgba(245, 248, 250, .8);
//    color: #181824;
//}
//
//.top-bar-menu .topbar .show > .topbar-item i, .top-bar-menu .topbar .topbar-item:hover i, .top-bar-menu .topbar .topbar-item.show i {
//    color: #888C9F;
//}
//
//.padding-top-100 {
//    padding-top: 100px;
//}
//
//.padding-top-lg-80 {
//    @media (max-width: 991px) {
//        padding-top: 80px;
//    }
//}
//
//.notification-img {
//    background-image: url('../img/pattern-1.jpeg');
//    background-position: top;
//    background-size: 100%;
//}
//
//.menu-text-wrap {
//    width: 265px;
//
//    .menu-title {
//        overflow: hidden;
//        text-overflow: ellipsis;
//        display: block;
//        white-space: nowrap;
//    }
//}
//
//.notifications-menu {
//    .topbar-item {
//        i {
//            font-size: 24px;
//        }
//
//        &:hover i {
//            color: #181824 !important;
//        }
//    }
//
//    .topbar-item.show {
//        svg {
//            color: #181824 !important;
//        }
//    }
//
//    .notification-count {
//        width: 20px;
//        height: 20px;
//        border-radius: 100px;
//        text-align: center;
//        padding: 5px;
//        line-height: 10px;
//        margin-top: -15px;
//        margin-left: -12px;
//        background: #db1430 !important;
//    }
//
//    .profile-header-img {
//        width: 40px;
//        height: 40px;
//    }
//
//    .show i {
//        color: #181824 !important;
//    }
//}
//
//.profile-menu {
//    a {
//        font-size: 16px;
//        color: #888C9F;
//
//        &:hover {
//            color: #1f1e2e;
//        }
//
//        .profile-header-img {
//            width: 35px;
//            height: 35px;
//        }
//    }
//}
//
//.main-wrapper {
//    padding-left: 112px;
//}
//
//#changePasswordModal {
//    .icons {
//        -moz-osx-font-smoothing: grayscale;
//        -webkit-font-smoothing: antialiased;
//        display: inline-block;
//        font-style: normal;
//        font-variant: normal;
//        text-rendering: auto;
//        line-height: 1;
//        font-family: 'Font Awesome 5 Free';
//    }
//
//    .icon-ban {
//        font-weight: 900;
//        &:before {
//            content: "\f05e";
//        }
//    }
//
//    .icon-eye {
//        font-weight: 400;
//        &:before {
//            content: "\f06e";
//        }
//    }
//
//    .input-group-append {
//        margin-left: unset;
//    }
//
//    .changeType {
//        background-color: #d9e3ea;
//        border-color: #d9e3ea;
//        height: 42.5px;
//        vertical-align: middle;
//        line-height: 25px;
//        width: 42px;
//    }
//}
//
//.status-selector {
//    min-width: 100px;
//}
//
//.role-selector {
//    min-width: 160px;
//}
//
//.dataTables_wrapper {
//    .user-img {
//        object-fit: cover !important;
//        border-radius: 50%;
//        width: 35px;
//        height: 35px;
//    }
//
//    .action-btn {
//        i {
//            font-size: 16px;
//        }
//    }
//}
//
//.iti.iti--allow-dropdown.iti--separate-dial-code {
//    width: 100%;
//}

.country-code
    .iti--separate-dial-code
    .iti__flag-container
    .iti__selected-flag {
    background-color: white !important;
}

.width-0 {
    width: 0px !important;
}

.hide {
    display: none;
}

#error-msg {
    color: red;
    margin-left: 2px;
}

.error-msg {
    color: red;
    margin-left: 2px;
}

#valid-msg {
    color: green;
    margin-left: 2px;
}

.valid-msg {
    color: green;
    margin-left: 2px;
}

.time-slot {
    display: inline-block;
    padding: 3px 15px;
    border: 1px solid #969696;
    border-radius: 3px;
    text-align: center;
    margin-right: 5px;
    margin-bottom: 10px;
    letter-spacing: 1px;
    box-shadow: 0 2px 4px -2px #777;
    min-width: 80px;
    width: auto;
}

.time-slot-book,
.time-slot:hover {
    background-color: #3596e8;
    cursor: pointer;
    color: #fff;
    border: 1px solid #3596e8;
}

.time-interval:hover {
    cursor: pointer;
}

.slot-heading {
    margin-top: 10px;
    margin-bottom: 10px;
}

.color-information {
    color: #ef930a !important;
}

.iti {
    display: block !important;
    width: 100%;
}

.pe-22 {
    padding-right: 6rem !important;
}

.pe-25 {
    padding-right: 7rem !important;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border: 0 !important;
}

.table > tbody tr td {
    padding: 5px;
}

.rounded-5 {
    border-radius: 5px;
}

.timeline-ps-46 {
    padding-left: 46px;

    list-style: disc !important;
}

.t-heading,
.t-table {
    padding: 10px;
    font-size: 16px;
    background-color: #e0e3ff;
    border: 1px solid rgba(101, 113, 255, 0.88);
}

.t-table {
    font-size: 13px;
}

.list-icon {
    width: 40px;
    height: 40px;
    border-radius: 50px;
    background-color: #6571ffe0;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
}

.bg-purple {
    background-color: #6f42c1;
}

.bg-blue {
    background-color: #00c6ff;
}

.bg-pink {
    background-color: #e83e8c;
}

.bg-darkgreen {
    background-color: #009688;
}

.bg-orange {
    background-color: #ff9800;
}

.bg-blue-700 {
    background-color: #a9ecff !important;
}

.bg-purple-700 {
    background-color: #bda4ea !important;
}

.bg-pink-700 {
    background-color: #f4a9cb !important;
}

.bg-darkgreen-700 {
    background-color: #43bcb0 !important;
}

.bg-orange-700 {
    background-color: #f4c073;
}

.timeline-before {
    position: relative;

    &:after {
        position: absolute;
        content: "";
        width: 4px;
        height: 100%;
        top: -19px;
        left: 53px;
        background-color: #e0e3ff;
    }

    &:before {
        position: absolute;
        content: "";
        width: 4px;
        height: 100%;
        top: 0;
        left: 53px;
        background-color: #e0e3ff;
    }
}

.timeline-date {
    z-index: 2;
}

.bg-light {
    background-color: #e0e3ff;
}

.prescription-table,
.consultant-table,
.charges-table,
.diagnosis-table {
    tbody {
        tr {
            border-bottom: 1px solid #ced4da !important;

            td {
                padding: 0.5rem 1.3rem !important;
            }
        }
    }
}

//.btn-view {
//    position: absolute;
//    left: -10px;
//    bottom: -5px;
//}
//
//.sidebar-font-size {
//    font-size: 14px !important;
//}
//
//.margin-left-10 {
//    margin-left: 10px;
//}
//
//// Toast
//#toast-container {
//    .toast {
//        transition: all .2s ease;
//        opacity: 1 !important;
//    }
//
//    .toast.toast-error {
//        background-color: #f1416c;
//    }
//
//    .toast.toast-success {
//        background-color: #50cd89;
//    }
//}
//
//.fc-button-active {
//    color: #181c32 !important;
//}
//
//// table-striped
//.table-striped > tbody > tr:nth-of-type(odd) td .btn {
//    background-color: #eff2f5 !important;
//}
//
//// table-striped badge
//.table-striped > tbody > tr:nth-of-type(odd) td .badge.badge-light {
//    color: #7e8299 !important;
//    background-color: #edf0f5 !important;
//}
//
//.table-striped > tbody > tr:nth-of-type(odd) td .badge.badge-light-info {
//    background-color: #f2ecff !important;
//}
//
////timeline left border
//.timeline-item {
//    margin-left: 2em;
//}
//
//.timeline-container {
//    height: 400px;
//    overflow-y: scroll;
//}
//
//.object-fit-cover{
//    object-fit: cover !important;
//}
//
////sidebar logo app name
//.brand-title {
//    display: flex;
//    overflow: hidden;
//    text-overflow: ellipsis;
//    height: 25px;
//}
//
//.time_range {
//    background: #fff;
//    padding: 6px 10px;
//    border: 1px solid #ccc;
//    border-radius: 5px;
//}
//
////bed status
//.unassigned-bed {
//    color: #298f3e;
//}
//
//.assigned-bed {
//    color: #b3381c;
//}
//
//.no-bed-available {
//    margin: auto;
//    margin-bottom: 6px;
//    padding: 5px 15px 5px 15px;
//    font-size: 20px;
//    color: #2e2e2e;
//    text-shadow: 3px -1px 4px #cecece;
//}
//
//.bad-status-hover {
//    display: block;
//    position: relative;
//}
//
//.bed-status-popup {
//    opacity: 0;
//    position: absolute;
//    top: 32px;
//    background: #fafafa;
//    border: 1px solid transparent;
//    border-radius: 6px;
//    height: 0px;
//    padding: 0 12px;
//    margin-left: 70px;
//    margin-top: -30px;
//    overflow: hidden;
//    transition: all 500ms;
//    text-align: left;
//}
//
//.bad-status-hover:hover .bed-status-popup {
//    padding: 12px 12px;
//    height: auto;
//    opacity: 1;
//    z-index: 50;
//    width: 320px;
//    border: 1.5px solid;
//    max-width: 175px;
//}
//
//.notification-message-counter {
//    min-width: 20px;
//    padding: 5px !important;
//    border: 2px solid #fff;
//}
//
//.counter-0 {
//    right: 6px !important;
//    height: 21px;
//}
//
//.editor-height {
//    height: 200px !important;
//}
//
//.main-card-section {
//    .weekly-content {
//        display: flex;
//        align-items: flex-start;
//        margin: 0 24px;
//        padding: 20px 0;
//        border-bottom: 1px solid #cecece;
//
//        .checkbox-content {
//            width: 88px;
//        }
//    }
//}
//
//.radio_btn {
//    height: 20px;
//    width: 20px;
//}
//
//.side-fade.modal.fade {
//    .modal-dialog {
//        transform: translateY(0) translateX(0) !important;
//    }
//}
//
//.side-fade {
//    .modal-dialog {
//        position: fixed;
//        right: 0;
//        top: 0;
//        bottom: 0;
//        height: 100%;
//        margin-top: 0;
//        transform: translateY(0) translateX(-50px) !important;
//
//        .modal-content {
//            height: 100%;
//        }
//    }
//}
//
//.select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
//    color: #7E8299 !important;
//}
//
//.slot-color-dot {
//    width: 11px !important;
//    height: 10px !important;
//}
//
//body.dark-mode {
//    .form-select.form-select-solid {
//        background-color: #1b1b29;
//    }
//
//    .select2-container--bootstrap5.select2-container--focus .form-select:not(.form-select-solid):not(.form-select-transparent), .select2-container--bootstrap5.select2-container--open .form-select:not(.form-select-solid):not(.form-select-transparent) {
//        border-color: #474761;
//    }
//
//    .select2-container--bootstrap5 .select2-dropdown .select2-search .select2-search__field {
//        background-color: #1e1e2d;
//        padding: 0.55rem 0.75rem;
//        color: #92929f;
//        font-size: .925rem;
//        border: 1px solid #323248;
//        border-radius: 0.475rem;
//        outline: 0 !important;
//    }
//
//    .select2-container--bootstrap5 .select2-dropdown .select2-resultsoption.select2-resultsoption--highlighted {
//        background-color: #212e48;
//        color: #3699ff;
//    }
//
//    .select2-container--bootstrap5 .select2-dropdown {
//        background-color: #1e1e2d;
//        box-shadow: 0 0 30px rgb(0 0 0 / 30%);
//    }
//
//    div.dataTables_wrapper div.dataTables_processing {
//        background-color: #1b1b29;
//    }
//
//    .iti__country-list {
//        color: #999;
//    }
//}
////
////.livewire-table {
////    .livewire-pagination {
////        .pagination {
////            justify-content: flex-end;
////        }
////    }
////
////    .data-sorting {
////        background-color: #f5f8fa;
////        border-color: #f5f8fa;
////        color: #5e6278;
////    }
////
////    .text-show {
////        color: #5e6278 !important;
////        font-weight: 500;
////    }
////
////    .pagination-record {
////        color: #5e6278 !important;
////        font-weight: 500;
////    }
////
////    .livewire-search-box {
////        .search-box-icon {
////            position: absolute;
////            top: 50%;
////            transform: translateY(-50%);
////            z-index: 10;
////            margin-left: 1.5rem !important;
////        }
////
////        button.btn {
////            z-index: 10;
////            left: -50px;
////
////            svg {
////                stroke: #355690;
////                width: 1em !important;
////                height: 1em !important;
////            }
////
////            &:hover {
////                background: unset;
////            }
////        }
////
////        .input-group {
////            width: auto;
////        }
////
////        .search-box {
////            background-color: #f5f8fa;
////            border-color: #f5f8fa;
////            color: #5e6278;
////            width: 250px !important;
////            padding-left: 45px;
////            padding-right: 45px;
////            border-radius: 6.175px !important;
////
////            &:focus {
////                background-color: #eef3f7;
////                border-color: #eef3f7;
////                color: #5e6278;
////            }
////        }
////    }
////
////    table.table {
////        thead {
////            tr {
////                border-bottom-width: 1px;
////                border-bottom-style: dashed;
////                border-bottom-color: #eff2f5;
////
////                th {
////                    color: #b5b5c3 !important;
////                    font-weight: 600;
////                    text-transform: uppercase;
////                }
////            }
////        }
////
////        tbody {
////            tr {
////                border-bottom-width: 1px;
////                border-bottom-style: dashed;
////                border-bottom-color: #eff2f5;
////
////                &:nth-of-type(odd) {
////                    --bs-table-accent-bg: white !important;
////                }
////
////                td {
////                    padding: 16.25px 9.75px;
////                    color: #7e8299 !important;
////                    font-weight: 500;
////                    line-height: 34px;
////                    vertical-align: middle;
////
////                    &:first-child {
////                        padding-left: 0 !important;
////                    }
////                }
////            }
////        }
////    }
////}
////
////}
////
////.custom-background-fit {
////    background-size: contain !important;
////}
////
////.custom-space {
////    line-height: 25px;
////    margin-top: 5px;
////}
////
////.transaction-modal-width {
////    @media (min-width: 576px) {
////        max-width: 640px;
////    }
////}
//
//.w-fit {
//    width: fit-content;
//}
//
//#profileDropdown {
//    top: 55px;
//    right: 25px;
//}
//
//.custom-line-height a {
//    line-height: 20px !important;
//}
//
//.width-content {
//    width: fit-content;
//}
//
//.white-space-nowrap {
//    white-space: nowrap;
//}
//
//.page-item.active .page-link {
//    z-index: 0 !important;
//}
//
//.text-md-dark {
//    color: #5e6278!important;
//    font-weight: 500;
//}
//
//.data-select-sorting {
//    background-color: #f5f8fa !important;
//    border-color: #f5f8fa !important;
//    color: #5e6278 !important;
//    min-width: 73px;
//}
//
//.pagination-center nav ul {
//    justify-content: center !important;
//
//    @media (min-width: 768px) {
//        justify-content: flex-end !important;
//    }
//}
//
//.user-img {
//    width: 40px !important;
//    height: 40px !important;
//    object-fit: cover;
//}
//
//.form-select.custom-selector {
//    color: #a1a5b7 !important;
//    width: auto;
//}
//
//.custom-d-block {
//    @media (max-width: 380px) {
//        display: block !important;
//    }
//}
//
//.margin-bottom-mobile {
//    @media (max-width: 380px) {
//        margin-bottom: 5px !important;
//    }
//}

.flatpickr-day {
    max-width: 37px !important;
}

body {
    overflow-x: hidden;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    -moz-appearance: textfield;
}

.livewire-table table.table tbody tr td {
    vertical-align: middle !important;
}

.table > :not(:first-child) {
    border-top: none !important;
}

.ipd-desc {
    height: auto;
    max-height: 100px;
    overflow: auto;
    width: 100%;
}

.ipd-timeline-desc {
    height: auto;
    max-height: 150px;
    overflow: auto;
    width: 100%;
}
.aside-menu-icon {
    width: 16px;
}
.custom-modal {
    @media (max-width: 2560px) {
        max-width: 1400px !important;
    }

    @media (max-width: 1440px) {
        max-width: 1400px !important;
    }

    @media (max-width: 1024px) {
        max-width: 950px !important;
    }

    @media (max-width: 768px) {
        max-width: 700px !important;
    }
}

.swal-text {
    text-align: center !important;
}

.custom-width {
    width: 210px !important;
}

.break-form-check {
    padding-left: 3.063em;
}
$border-color: rgba(#ccd5db, 1);

.timeline-spacer {
    margin-top: 2.5em;
}

.timeline-item {
    padding: 3em 2em 2em;
    position: relative;
    color: rgba(black, 0.7);
    border-left: 4px solid $border-color;
    background-color: #f8f9fa;
    margin-right: 5px !important;

    p {
        font-size: 1rem;
    }

    &::before {
        content: attr(date-is);
        position: absolute;
        left: 2em;
        top: 1em;
        display: block;
        font-family: "Roboto", sans-serif;
        font-weight: 700;
        font-size: 0.9rem;
        color: #9a9a9a;
    }

    &::after {
        width: 20px;
        height: 20px;
        display: block;
        top: 1em;
        position: absolute;
        left: -12px;
        border-radius: 10px;
        content: "";
        border: 4px solid #ff6b6b;
        background: #ff6b6b;
        transition: background 0.2s ease-in;
    }

    &:last-child {
        border-image: linear-gradient(
                to bottom,
                $border-color 60%,
                rgba($border-color, 0)
            )
            1 100%;
    }

    &:hover {
        &::after {
            background: #ffffff;
        }
    }

    @media only screen and (max-width: 767px) {
        .bottom-sm {
            position: absolute;
            bottom: 0;
        }
    }
}
.details-text {
    font-size: 18px !important;
    @media (max-width: 575px) {
        font-size: 16px !important;
    }
}

.listing-skeleton {
    .card {
        height: 750px;
    }

    .pulsate {
        background: linear-gradient(90deg, #dddddd, #f0f0f0, #dddddd, #f0f0f0);
        background-size: 400% 400%;
        animation: Gradient 2s ease infinite;
    }

    .card-content {
        clear: both;
        box-sizing: border-box;
        padding: 16px;
        background: #fff;
    }

    .search-box {
        width: 300px;
        height: 40px;
        margin-top: 8px;
        margin-left: 5px;
    }

    .date-box {
        width: 220px;
        height: 40px;
        margin-top: 8px;
        margin-left: 5px;
    }

    .filter-box {
        width: 50px;
        height: 40px;
        margin-top: 8px;
        margin-left: 5px;
    }

    .export-box {
        width: 60px;
        height: 40px;
        margin-top: 8px;
        margin-left: 5px;
    }

    .event-box {
        height: 240px;
        margin-bottom: 28px;
    }

    .add-button-box {
        width: 140px;
        height: 40px;
        margin-top: 8px;
        margin-left: 5px;
    }

    .column-box {
        height: 45px;
        margin-top: 8px;
        margin-left: 10px;
    }

    @-webkit-keyframes Gradient {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    @-moz-keyframes Gradient {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes Gradient {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }
}

.dashboard-skeleton {
    margin-top: 15px;

    .sub-card {
        box-sizing: border-box;
        background: #e1e1e1;
        position: relative;
        margin-bottom: 10px;
        border-radius: 10px !important;
        height: 160px;
    }


    .pulsate {
        background: linear-gradient(90deg, #dddddd, #f0f0f0, #dddddd, #f0f0f0);
        background-size: 400% 400%;
        animation: Gradient 2s ease infinite;
    }


    .card-content {
        clear: both;
        box-sizing: border-box;
    }


    .block2 {
        box-sizing: border-box;
        background: #e1e1e1;
        height: 300px;
        border-radius: 10px !important;
    }

    @-webkit-keyframes Gradient {
        0% {
            background-position: 0% 50%;
        }


        50% {
            background-position: 100% 50%;
        }


        100% {
            background-position: 0% 50%;
        }
    }


    @-moz-keyframes Gradient {
        0% {
            background-position: 0% 50%;
        }


        50% {
            background-position: 100% 50%;
        }


        100% {
            background-position: 0% 50%;
        }
    }


    @keyframes Gradient {
        0% {
            background-position: 0% 50%;
        }


        50% {
            background-position: 100% 50%;
        }


        100% {
            background-position: 0% 50%;
        }
    }
}