body {
    width: 100%;
    margin: auto;
    padding: 0px;
    overflow-x: hidden;
    height: 100vh;
    background-image: url(../img/bg.png);
    background-size: cover;
    font-family: "Roboto", sans-serif;
}

#qrr-overlay {
    position: fixed;
    top: 0;
    left: 0;
    background: black;
    opacity: 0.6;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 20000;
}

#qrr-container {
    font-family: sans-serif;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: white;
    padding: 10px;
    width: 90%;
    height: 90%;
    margin: auto;
    display: none;
    z-index: 20001;
    border-radius: 10px;
}

    #qrr-container h1 {
        margin-top: 0;
    }

#qrr-close {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 10px;
    margin-top: -5px;
    font-size: 3em;
    cursor: pointer;
    color: #808080;
}

#qrr-loading-message {
    text-align: center;
    padding: 15px;
    background-color: #eee;
    width: 90%;
    margin: 30px auto 0;
}

#qrr-canvas {
    display: block;
    height: 65%;
    max-width: 90%;
    overflow-x: scroll;
    cursor: pointer;
    margin: 30px auto 10px;
}

    #qrr-canvas.hidden {
        display: none;
    }

#qrr-output {
    width: 90%;
    max-height: 15%;
    margin: 20px auto 10px;
    background: #eee;
    padding: 10px;
    overflow-y: auto;
}

#qrr-ok {
    display: none;
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 10px 50px;
    cursor: pointer;
    font-weight: bold;
    text-decoration: none;
    background-color: green;
    color: white;
    border-radius: 10px;
}

#qrr-output-data {
    display: none;
}

a {
    text-decoration: none;
    color: #000;
}

p {
    margin: 0px;
}


.navbar {
    background-color: #3286E9;
    position: fixed;
    top: 0px;
    width: 100%;
}

.fixed {
    position: fixed;
    top: 0px;
}

.bg-dark {
    display: none;
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 100vh;
    background-color: black;
    opacity: 0.3;
}

.menu-popup {
    position: fixed;
    top: 0px;
    right: -5700px;
    z-index: 400;
    width: 70%;
    margin: auto;
    height: 100%;
    background-color: #fff;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    padding: 20px;
}

    .menu-popup .close-menu {
        display: flex;
        justify-content: end;
    }

    .menu-popup .profile-user {
        /* margin-top: 20px; */
        display: flex;
        align-items: center;
    }

        .menu-popup .profile-user .img-user img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }

        .menu-popup .profile-user .info-user {
            margin-left: 10px;
        }

            .menu-popup .profile-user .info-user p {
                margin: 0px;
            }

            .menu-popup .profile-user .info-user .fullname {
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 3px;
            }

            .menu-popup .profile-user .info-user .email {
                font-size: 14px;
                font-weight: 400;
                color: #909090;
            }

    .menu-popup .list-menu {
        margin-top: 30px;
    }

        .menu-popup .list-menu .menu-item {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            cursor: pointer;
        }

            .menu-popup .list-menu .menu-item img {
                width: 32px;
                height: 32px;
                margin-right: 10px;
            }

            .menu-popup .list-menu .menu-item .title {
                margin: 0px;
            }

.shadow {
    box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.02), 0px 2px 4px 0px rgba(0, 0, 0, 0.01);
}

.navbar.expanded {
    height: 250px;
    border-bottom-left-radius: 200px;
    border-bottom-right-radius: 200px;
}

.navbar.non-expanded {
    height: 70px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}

.navbar .top-navbar {
    display: flex;
    height: 50px;
    justify-content: end;
    padding: 5px 15px;
    align-items: center;
}


    .navbar .top-navbar .menu-navbar {
        display: flex;
        align-items: center;
    }

.navbar .navbar-profile .img-profile {
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.navbar .navbar-profile .profile-name {
    margin: 0px;
    font-size: 20px;
    font-weight: 400;
    color: #FFF;
    margin-top: 10px;
}

.navbar-page {
    height: 50px;
    width: 100%;
    /* background-color: red; */
    display: flex;
}

    .navbar-page .navbar-left {
        width: 15%;
        /* background-color: blue; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .navbar-page .navbar-right {
        width: 15%;
        /* background-color: blue; */
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .navbar-page .navbar-mid {
        width: 70%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .navbar-page .navbar-mid .title-navbar {
            margin: 0px;
            font-size: 18px;
            font-weight: 500;
        }



.primary-menu {
    position: fixed;
    width: 100%;
    z-index: 50;
    top: 190px;
    display: flex;
    justify-content: center;
}

.scrolled-menu {
    top: 90px;
}

.menu-left {
    margin-top: 30px;
}

.menu-right {
    margin-top: 30px;
}

.primary-menu .menu-item {
    width: 75px;
    height: 75px;
    margin: 5px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .primary-menu .menu-item .menu-name {
        margin: 0px;
        margin-top: 4px;
        font-size: 10px;
        width: 75px;
        text-align: center;
        color: #3286E9;
    }

.main-page-non-overflow {
    height: 100vh;
    overflow: hidden;
}

.main-page-overflow {
    overflow-x: hidden;
}

.content {
    width: 100%;
    height: 72vh;
    overflow-y: scroll;
    background-color: #fff;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

    .content .content-body {
        width: 100%;
    }

.appointment-list {
    padding: 20px;
    height: 30%;
}

.heading-with-button-all {
    display: flex;
    justify-content: space-between;
}

.heading-without-button-all {
    display: flex;
    justify-content: start;
}

.heading-with-button-all .title {
    color: #3286E9;
    font-size: 16px;
    font-weight: 500;
    margin: 0px;
}

.heading-without-button-all .title {
    color: #3286E9;
    font-size: 16px;
    font-weight: 500;
    margin: 0px;
}

.heading-with-button-all .btn-all {
    text-decoration: none;
    font-size: 14px;
    font-weight: lighter;
    color: #3286E9;
}

.card-appointment {
    margin-top: 15px;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
}

    .card-appointment .status-appointment {
        margin: 0px;
        text-align: end;
        font-size: 14px;
        color: orange;
        font-weight: 500;
    }

    .card-appointment .status-section{
        margin-top: 15px;
        display: flex;
        justify-content: start;
    }
        .card-appointment .status-section .title-status{
            font-weight: 400;
        }
        .card-appointment .status-section .status-desc {
            color: red;
            margin-left: 7px;
        }

    .card-appointment .note-section {
        margin-top: 10px;
    }
        .card-appointment .note-section .note-title {
            font-weight: normal;
        }

        .card-appointment .note-section .note-desc {
            font-weight: bold;
            margin-top: 6px;
            font-size: 13px;
        }

        .card-appointment .note-section .payment-desc {
            font-weight: 500;
            margin-top: 6px;
            font-size: 13px;
        }

    .card-appointment .btn-section {
        margin-top: 10px;
    }

        .card-appointment .btn-section .btn-chat-staff {
            background-color: #fff;
            text-align: center;
            padding: 12px 0px;
            color: #000;
            border-radius: 5px;
            border: 1px solid #909090;
            margin-bottom: 5px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

    .card-appointment .payment-section {
        margin-top: 10px;
        display: flex;
        justify-content: start;
    }

        .card-appointment .payment-section .payment-title {
            font-weight: normal;
        }

        .card-appointment .payment-section .payment-nominal{
            font-weight: bold;
        }

    .card-appointment .patient-information {
        display: flex;
        margin-top: 10px;
        align-items: center;
    }

        .card-appointment .patient-information .patient-data {
            margin-left: 10px;
            width: 200px;
        }

            .card-appointment .patient-information .patient-data p {
                margin: 2px 0px;
            }

            .card-appointment .patient-information .patient-data .full-name {
                font-size: 14px;
                font-weight: 500;
            }

            .card-appointment .patient-information .patient-data .appointment-type {
                font-size: 12px;
                font-weight: 400;
                color: #909090;
            }

            .card-appointment .patient-information .patient-data .healthcare {
                font-size: 14px;
                font-weight: 400;
            }

    .card-appointment .datetime-appointment {
        display: flex;
        margin-top: 15px;
        justify-content: space-between;
    }

        .card-appointment .datetime-appointment p {
            margin: 0px;
        }

        .card-appointment .datetime-appointment .datetime-component {
            display: flex;
            align-items: center;
        }

            .card-appointment .datetime-appointment .datetime-component .datetime-desc {
                font-size: 14px;
                font-weight: 400;
                margin-left: 15px;
            }

.vaccination-list {
    padding: 10px 20px;
}

.vaccination-item {
}

.card-vaccination {
    border-radius: 10px;
    display: flex;
    margin: 10px 0px;
    padding-right: 20px;
    background-color: #fff;
}

    .card-vaccination .img-vaccine {
        width: 35%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .card-vaccination .vaccine-information {
        width: 65%;
        margin-left: 10px;
    }

        .card-vaccination .vaccine-information p {
            margin: 0px;
        }

        .card-vaccination .vaccine-information .vaccine-date {
            font-size: 12px;
            font-weight: 400;
            width: 100% !important;
            text-align: end;
            margin-top: 10px;
        }

        .card-vaccination .vaccine-information .vaccine-name {
            font-size: 16px;
            font-weight: 500;
            color: #3286E9;
        }

        .card-vaccination .vaccine-information .vaccine-total {
            font-size: 12px;
            font-weight: 400;
            color: #909090;
        }

        .card-vaccination .vaccine-information .patient-name {
            font-size: 14px;
            font-weight: 500;
            margin-top: 10px;
            margin-bottom: 10px;
        }

        .card-vaccination .vaccine-information .physician-name {
            font-size: 12px;
            font-weight: 500;
            margin-top: 10px;
            margin-bottom: 10px;
        }

.healthcare-list {
    padding: 5px 20px;
}



.card-healthcare {
    padding: 20px;
    border-radius: 10px;
    margin: 10px 0px;
    background-color: #fff;
}

    .card-healthcare.no-padding {
        padding: 0px;
        border-radius: 10px;
        margin: 10px 0px;
        background-color: #fff;
    }

    .card-healthcare .healthcare-information {
        display: flex;
        align-items: center;
    }

    .card-healthcare .img-healthcare {
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .card-healthcare .healthcare-desc {
        margin-left: 10px;
    }

        .card-healthcare .healthcare-desc p {
            margin: 0px;
        }

        .card-healthcare .healthcare-desc .name {
            font-size: 14px;
            font-weight: 500;
            margin: 5px 0px;
        }

        .card-healthcare .healthcare-desc .type {
            font-size: 12px;
            font-weight: 400;
            color: #909090;
            margin: 5px 0px;
        }

    .card-healthcare .address {
        margin: 0px;
        font-size: 14px;
        margin-top: 10px;
        text-align: justify;
        margin-bottom: 10px;
    }

    .card-healthcare .btn-link {
        text-decoration: none;
        color: #3286E9;
        font-size: 14px;
    }

.store -list {
    padding: 5px 20px;
}

.appointment-section {
    display: flex;
    overflow-x: scroll;
    width: 100%;
    padding: 10px 0px;
}

.store-list {
    padding: 20px;
}

.family-list {
    margin-top: 40px;
    padding: 20px;
}

.card-family {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 10px;
}

    .card-family .card-content {
        display: flex;
        justify-content: start;
        align-items: center;
    }

        .card-family .card-content .family-info {
            margin-left: 15px;
        }

            .card-family .card-content .family-info .name {
                margin: 0px;
                font-size: 16px;
                font-weight: 500;
                margin-bottom: 5px;
            }

            .card-family .card-content .family-info .relation {
                margin: 0px;
                font-size: 14px;
                font-weight: 400;
                color: #909090;
            }

.content-visit {
    width: 100%;
    height: 70%;
    background-color: white;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

    .content-visit .menu-content {
        display: flex;
        width: 100%;
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
    }

        .content-visit .menu-content .menu-item.left {
            width: 50%;
            border-top-left-radius: 30px;
            text-decoration: none;
            text-align: center;
        }

        .content-visit .menu-content .menu-item.right {
            width: 50%;
            border-top-right-radius: 30px;
            text-decoration: none;
            text-align: center;
        }

        .content-visit .menu-content .menu-item.active {
            border-bottom: 2px #3286E9 solid;
            color: #3286E9;
        }
            .content-visit .menu-content .menu-item p {
                padding: 15px 0px;
            }

    .content-visit .menu-body {
        height: 50vh;
        overflow-y: scroll;
        overflow-x: hidden;
    }

.heading-collapsed {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

    .heading-collapsed .title {
        margin: 0px;
        font-weight: 500;
        font-size: 14px;
    }

.card-specialty {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    justify-content: start;
    align-items: start;
}

    .card-specialty .specialty-info {
        margin-left: 20px;
    }

        .card-specialty .specialty-info .heading-specialty {
            width: 200px;
            display: flex;
            justify-content: space-between;
        }

            .card-specialty .specialty-info .heading-specialty .title {
                margin: 0px;
                font-size: 14px;
            }

.btn-onsite {
    padding: 5px 10px;
    font-size: 11px;
    text-decoration: none;
    color: #fff;
    background-color: #3286E9;
    border-radius: 5px;
    margin-right: 5px;
}

.btn-online {
    padding: 5px 10px;
    font-size: 11px;
    text-decoration: none;
    color: #fff;
    background-color: rgb(32, 171, 32);
    border-radius: 5px;
    margin-right: 5px;
}

.header-patient {
    height: 50%;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    background-color: white;
}

    .header-patient p {
        margin: 0px;
        text-align: center;
    }

    .header-patient .full-name {
        font-size: 18px;
        font-weight: 500;
        margin: 5px 0px;
    }

    .header-patient .birthday {
        font-size: 14px;
        font-weight: 400;
        color: #909090;
        margin: 5px 0px;
    }

    .header-patient .age-count {
        font-size: 14px;
        font-weight: 400;
        color: #909090;
        margin: 5px 0px;
    }

    .header-patient .blood-relation {
        display: flex;
        justify-content: center;
        margin-top: 10px;
    }

        .header-patient .blood-relation .box-img {
            padding: 12px;
            border-radius: 50%;
        }

        .header-patient .blood-relation .desc {
            font-size: 14px;
        }

.content-patient {
    width: 100%;
    height: 50%;
    margin-top: 30px;
    background-color: white;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    overflow-y: scroll;
}

#physicianContent {
    padding: 10px 20px;
}

.form-group {
    width: 100%;
    margin: auto;
}

.form-input {
    width: 94%;
    padding: 15px 10px;
    border-radius: 10px;
    border: none;
    margin-bottom: 15px;
    background-color: #fff;
}

.specialty-list {
    margin-top: 20px;
    margin-bottom: 20px;
}

    .specialty-list.non-collapsed {
        display: none;
    }

    .specialty-list.collapsed {
        display: block;
        min-height: 50px;
    }

.specialty-item .heading {
    display: flex;
    justify-content: space-between;
    margin: 10px 0px;
    cursor: pointer;
}

.specialty-item .title {
    margin: 0px;
    color: #3286E9;
    font-weight: 500;
}

.specialty-item .body-content {
    display: none;
}

    .specialty-item .body-content.collapsed {
        display: block;
        min-height: 100px;
        overflow-x: scroll;
        padding: 10px;
    }

.physician-list {
    display: flex;
}

.card-physician {
    width: 90%;
    background-color: white;
    padding: 10px;
    border-radius: 10px;
}

    .card-physician .heading-physician {
        width: 300px;
        display: flex;
        align-items: center;
    }

        .card-physician .heading-physician .physician-info p {
            margin: 0px;
        }

        .card-physician .heading-physician .physician-info {
            margin-left: 10px;
        }

            .card-physician .heading-physician .physician-info .name {
                font-weight: 500;
            }

            .card-physician .heading-physician .physician-info .specialty {
                font-weight: 400;
                color: #909090;
                font-size: 14px;
            }

    .card-physician .physician-healthcare {
        margin-top: 10px;
    }

        .card-physician .physician-healthcare .heading-healthcare {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

            .card-physician .physician-healthcare .heading-healthcare .title {
                margin: 0px;
                color: #000;
                font-weight: 400;
            }


        .card-physician .physician-healthcare .body-healthcare {
            display: none;
        }

            .card-physician .physician-healthcare .body-healthcare.collapsed {
                display: block;
                min-height: 100px;
            }

.card-healthcare .healthcare-information .healthcare-service {
    display: flex;
}


.healthcare-schedule {
    margin-top: 15px;
}

    .healthcare-schedule .schedule-heading {
        display: flex;
        justify-content: space-between;
    }

        .healthcare-schedule .schedule-heading .title {
            margin: 0px;
            color: #000;
            font-weight: 400;
        }

    .healthcare-schedule .schedule-list {
        display: none;
    }

        .healthcare-schedule .schedule-list.collapsed {
            display: block;
            min-height: 50px;
        }

        .healthcare-schedule .schedule-list .schedule-item {
            display: flex;
            justify-content: start;
            margin-top: 10px;
        }

            .healthcare-schedule .schedule-list .schedule-item .day {
                font-size: 14px;
                width: 100px;
            }

            .healthcare-schedule .schedule-list .schedule-item .time {
                font-size: 14px;
            }

.physician-search-list {
    margin-top: 20px;
}

    .physician-search-list .physician-item {
        margin-bottom: 10px;
    }

.header-healthcare {
    height: 500px;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
    background-color: white;
}

    .header-healthcare p {
        margin: 0;
    }

    .header-healthcare .title {
        text-align: center;
        font-size: 20px;
        font-weight: 500;
        margin-top: 10px;
    }

    .header-healthcare .subtitle {
        text-align: center;
        font-size: 14px;
        font-weight: 400;
        color: #909090;
        margin-top: 5px;
        margin-bottom: 10px;
    }

    .header-healthcare .address {
        font-size: 14px;
        text-align: center;
        width: 90%;
        margin: auto;
    }

    .header-healthcare .healthcare-sosmed {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

        .header-healthcare .healthcare-sosmed .box-sosmed {
            width: 50px;
            height: 50px;
            background-color: white;
            border-radius: 50%;
            margin: 0px 5px;
        }

.content-healthcare {
    width: 100%;
    min-height: 500px;
    margin-top: 30px;
    background-color: white;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

.services-section {
    padding: 20px;
}

    .services-section .services-list {
        display: flex;
        justify-content: start;
        overflow-x: scroll;
        padding: 5px;
        margin-top: 10px;
    }

.card-services {
    width: 80px;
    height: 100px;
    background-color: #fff;
    border-radius: 20px;
    padding: 10px;
    margin-left: 5px;
    margin-right: 5px;
}

    .card-services p {
        margin: 0px;
    }

    .card-services .service-name {
        font-size: 14px;
        text-align: center;
        color: #3286E9;
        font-weight: 500;
        margin-top: 10px;
    }

.specialty-section {
    padding: 0px 10px;
}

    .specialty-section .specialty-list {
        
        padding: 5px;
        margin-top: 10px;
    }

    .specialty-section .specialty-list.horizontal {
        display:flex;
        justify-content:start;
        overflow-x: scroll;
        padding: 5px;
        margin-top: 10px;
    }

        .specialty-section .specialty-list .card-specialty-2 {
            width: 80px;
            height: 100px;
            background-color: #fff;
            border-radius: 20px;
            padding: 10px;
            margin-left: 5px;
            margin-right: 5px;
        }

            .specialty-section .specialty-list .card-specialty-2 .specialty-name {
                margin: 0px;
                font-size: 14px;
                text-align: center;
                color: #3286E9;
                font-weight: 500;
                margin-top: 10px;
            }

.schedule-section {
    padding: 0px 20px;
    padding-bottom: 40px;
}

    .schedule-section .schedule-list {
        margin-top: 10px;
    }

        .schedule-section .schedule-list .schedule-item {
            width: 70%;
            margin: auto;
            display: flex;
            justify-content: space-between;
        }

.header-signin {
    width: 100%;
    height: 280px;
}

.header-signup {
    width: 100%;
    height: 200px;

}

.content-signin {
    width: 100%;
    height: 570px;
    background-color: #fff;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

.form-login {
    padding: 20px;
    padding-top: 40px;
}

.btn-forgot {
    color: #3286E9;
    font-weight: 500;
    font-size: 14px;
}

.btn-login {
    width: 100%;
    height: 36px;
    background-color: #3286E9;
    border: none;
    color: #fff;
    border-radius: 5px;
}

.content-signin p {
    margin: 0px;
    text-align: center;
    font-size: 14px;
}

.btn-google {
    background-color: #fff !important;
    text-align: center;
    margin: 20px;
    padding: 8px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-ios {
    background-color: #000;
    color: #fff;
    text-align: center;
    margin: 20px;
    padding: 4px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-signin .btn-link {
    text-decoration: none;
    color: #3286E9;
    font-size: 14px;
    margin-left: 10px;
}

.header-signin .heading {
    padding: 20px;
}

.header-signin p {
    margin: 0px;
}

.header-signin .heading .title {
    font-size: 26px;
    font-weight: 500;
    margin-top: 20px;
}

.header-signin .heading .subtitle {
    font-size: 16px;
    color: #909090;
    margin-top: 10px;
}

.header-signin .heading .subtitle-2 {
    font-size: 14px;
    color: red;
    margin-top: 10px;
}

.header-signup .heading {
    padding: 20px;
}

.header-signup p {
    margin: 0px;
}

.header-signup .heading .title {
    font-size: 26px;
    font-weight: 500;
    margin-top: 0px;
}

.header-signup .heading .subtitle {
    font-size: 16px;
    color: #909090;
    margin-top: 10px;
}

.content-store {
    padding: 20px;
}

    .content-store .sosmed-section {
        display: flex;
        justify-content: center;
    }

        .content-store .sosmed-section .sosmed-item {
            width: 60px;
            height: 60px;
            background-color: #fff;
            border-radius: 7px;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            margin: 0px 5px;
        }

.services-store-section {
    margin-top: 30px;
}

    .services-store-section .services-store-list {
        margin-top: 10px;
        display: flex;
        justify-content: start;
    }

        .services-store-section .services-store-list .service-item {
            width: 75px;
            height: 100px;
            background-color: #fff;
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            padding: 20px 10px;
            border-radius: 15px;
            margin: 5px;
        }

            .services-store-section .services-store-list .service-item .title {
                margin: 0px;
                text-align: center;
                font-size: 14px;
            }

.e-store-section {
    margin-top: 30px;
}

    .e-store-section .e-store-list {
        margin-top: 20px;
    }

.card-store {
    padding: 5px 20px;
    background-color: #fff;
    display: flex;
    justify-content: start;
    align-items: center;
    border-radius: 10px;
    margin-bottom: 10px;
}

    .card-store p {
        margin: 0px;
    }

    .card-store .fullname {
        font-size: 16px;
    }

    .card-store .type {
        font-size: 14px;
        color: #909090;
        margin-top: 5px;
    }

.pop-up-appointment {
    position: fixed;
    top: 10%;
    left: 10%;
    right: 10%;
    width: 80%;
    z-index: 400;
    background-color: #fff;
    border-radius: 10px;
}

    .pop-up-appointment p {
        margin: 0px;
    }

    .pop-up-appointment .title-pop-up {
        text-align: center;
        font-size: 20px;
        color: #3286E9;
        font-weight: 500;
        margin-top: 20px;
    }

    .pop-up-appointment .appointment-detail {
        margin: 20px;
    }

        .pop-up-appointment .appointment-detail .detail-list {
            margin-bottom: 10px;
        }

        .pop-up-appointment .appointment-detail .title {
            font-size: 14px;
            font-weight: 500;
            color: #909090;
        }

        .pop-up-appointment .appointment-detail .subtitle {
            font-size: 16px;
            font-weight: 400;
            margin-top: 5px;
        }

.btn-appointment {
    background-color: #3286E9;
    text-align: center;
    padding: 12px 0px;
    color: #fff;
    border-radius: 5px;
    margin-bottom: 8px;
}

.btn-appointment-2 {
    background-color: #fff;
    text-align: center;
    padding: 12px 0px;
    color: #3286E9;
    border: 1px solid #3286E9;
    border-radius: 5px;
    margin-bottom: 8px;
}


.vaccination-content {
    padding: 20px;
}

.laboratorium-content {
    padding: 20px;
}

.card-laboratorium {
    border-radius: 10px;
    display: flex;
    margin: 10px 0px;
    padding-right: 20px;
    background-color: #fff;
}

    .card-laboratorium .img-laboratorium {
        width: 35%;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
    }

    .card-laboratorium .laboratorium-information {
        width: 65%;
        margin-left: 10px;
    }

        .card-laboratorium .laboratorium-information p {
            margin: 0px;
        }

        .card-laboratorium .laboratorium-information .laboratorium-date {
            font-size: 12px;
            font-weight: 400;
            width: 100% !important;
            text-align: end;
            margin-top: 10px;
        }

        .card-laboratorium .laboratorium-information .name {
            font-size: 16px;
            font-weight: 500;
            color: #3286E9;
            margin-top: 10px;
        }

        .card-laboratorium .laboratorium-information .location {
            font-size: 12px;
            font-weight: 400;
            color: #909090;
            margin-top: 5px;
            margin-bottom: 10px;
        }

.appointment-content .menu-content {
    display: flex;
    width: 100%;
    height: 50px;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
}

    .appointment-content .menu-content .menu-item.left {
        width: 50%;
        height: 50px;
        border-top-left-radius: 30px;
        text-decoration: none;
        text-align: center;
    }

    .appointment-content .menu-content .menu-item.right {
        width: 50%;
        height: 50px;
        border-top-right-radius: 30px;
        text-decoration: none;
        text-align: center;
    }

    .appointment-content .menu-content .menu-item.active {
        border-bottom: 2px #3286E9 solid;
        color: #3286E9;
    }

.appointment-content .body-content {
    padding: 20px;
}


.appointment-content .appointment-incoming-data {
    height: 80vh;
    overflow-y: scroll;
}

.appointment-content .appointment-done-data {
    height: 80vh;
    overflow-y: scroll;
}

.vitalsign-content .menu-content {
    display: flex;
    align-items: center;
}

    .vitalsign-content .menu-content .menu-item {
        width: 33%;
        height: 55px;
        text-decoration: none;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .vitalsign-content .menu-content .menu-item.active {
            border-bottom: 2px #3286E9 solid;
            color: #3286E9;
        }

.vitalsign-content .body-content {
    padding: 20px;
    height: 77vh;
    overflow-y: scroll;
}

.table-content {
    width: 98%;
    margin: auto;
    border-collapse: collapse;
}

    .table-content th {
        line-height: 30px;
    }

    .table-content td {
        line-height: 30px;
        text-align: center;
    }

.button-float {
    position: fixed;
    z-index: 50;
    background-color: #3286E9;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    bottom: 30px;
    right: 20px;
}

.button-float-2 {
    position: fixed;
    z-index: 50;
    background-color: #3286E9;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    bottom: 30px;
    right: 80px;
}

.form-checkbox {
    width: 20px;
    height: 20px;
}

.form-select {
    background-color: #fff;
    border: none;
    padding: 5px 10px;
    width: 100%;
}

.btn-fixed-bottom {
    width: 100%;
    height: 50px;
    background-color: #3286E9;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: 500;
    position: fixed;
    z-index: 100;
    bottom: 0px;
}

.content-signup {
    width: 100%;
    height: 70%;
    background-color: #fff;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}

    .content-signup .btn-link {
        text-decoration: none;
        color: #3286E9;
        font-size: 14px;
        margin-left: 10px;
    }

.vaccination-content2 .menu-content {
    display: flex;
    width: 100%;
    overflow-x: scroll;
    padding: 10px 0px;
}

    .vaccination-content2 .menu-content .menu-item {
        padding: 5px 20px;
        white-space: nowrap;
        text-overflow: ellipsis;
        display: inherit;
    }

        .vaccination-content2 .menu-content .menu-item.active {
            border-bottom: 2px #3286E9 solid;
            color: #3286E9;
        }

.vaccination-content2 .body-content .vaccination-search {
    padding: 0px 20px;
    margin-top: 10px;
}

.vaccination-content2 .body-content .vaccination-list {
    height: 72vh;
    overflow-y: scroll;
}

.schedule-content {
    margin-top: 60px;
    padding: 0px 20px;
    overflow-y: scroll;
    height: 90%;
}

.appointment-healthcare-content .menu-content {
    display: flex;
    align-items: center;
}

    .appointment-healthcare-content .menu-content .menu-item {
        width: 33%;
        height: 55px;
        text-decoration: none;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .appointment-healthcare-content .menu-content .menu-item.active {
            border-bottom: 2px #3286E9 solid;
            color: #3286E9;
        }



.appointment-healthcare-content .body-content {
    height: 80vh;
    overflow-y: scroll;
}

.pop-up-add-appointment {
    position: fixed;
    top: 10%;
    left: 10%;
    right: 10%;
    width: 80%;
    z-index: 400;
    background-color: #fff;
    border-radius: 10px;
}

    .pop-up-add-appointment .title-pop-up {
        text-align: center;
        font-size: 20px;
        color: #000;
        font-weight: 500;
        margin-top: 20px;
    }

    .pop-up-add-appointment .appointment-link {
        margin: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

        .pop-up-add-appointment .appointment-link .btn-link {
            text-decoration: none;
            color: #3286E9;
            font-size: 16px;
            font-weight: 500;
            padding: 10px;
        }

.lab-detail-content {
    height: 93%;
    width: 100%;
}   
    .lab-detail-content .lab-information{
        min-height: 300px;
    }

    .lab-detail-content .lab-result {
        background-color: #fff;
        min-height: 400px;
        padding: 20px 0px;
        overflow-y: scroll;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }

.self-check-in-content {
    padding: 20px;
    margin-top: 50px;
    height: 90%;
}

    .self-check-in-content .self-check-in-information {
        display: flex;
        justify-content: start;
        align-items: center;
        height: 10%;
    }

        .self-check-in-content .self-check-in-information .name {
            font-weight: 500;
            font-size: 16px;
        }

        .self-check-in-content .self-check-in-information .relation {
            font-weight: 400;
            font-size: 14px;
        }

    .self-check-in-content .self-check-in-body {
        margin-top: 20px;
        height: 90%;
    }

        .self-check-in-content .self-check-in-body .title {
            font-weight: 500;
            font-size: 18px;
            color: #3286E9;
        }

.self-check-in-body .self-check-in-list {
    margin-top: 10px;
    height: 90%;
    overflow-y: scroll;
}

.input-code-content {
    margin-top: 50px;
    padding: 20px;
}

    .input-code-content .heading {
        font-weight: 500;
        font-size: 20px;
        text-align: center;
    }

.btn-login-header {
    background-color: #fff;
    width: 25%;
    font-size: 14px;
    padding: 5px;
    margin-top: 10px;
    border-radius: 10px;
}

.truncate {
    white-space: nowrap; /* Prevent text from wrapping to the next line */
    overflow: hidden; /* Hide overflowing text */
    text-overflow: ellipsis; /* Add ellipsis (...) */
    width: 200px; /* Set a specific width */
}

.notification-list {
    padding: 20px;
    margin-top: 20px;
}

.card-notification {
    margin-top: 15px;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: start;
    align-items: center;
}

    .card-notification .notification-info {
        margin-left: 15px;
    }

        .card-notification .notification-info .datetime {
            width: 210px;
            text-align: end;
            font-size: 12px;
            color: #909090;
        }

        .card-notification .notification-info .title {
            font-size: 12px;
            color: #3286E9;
            font-weight: 500;
        }

        .card-notification .notification-info .desc {
            text-align: justify;
            font-size: 12px;
            color: #909090;
        }

.btn-notification {
    display: flex;
    margin-top: 10px;
}

    .btn-notification a {
        margin-right: 15px;
    }

    .btn-notification .btn-confirm {
        color: #3286E9;
    }

    .btn-notification .btn-cancel {
        color: rgb(249, 69, 69);
    }

.notification-status {
    margin-top: 10px;
    display: flex;
}

    .notification-status .confirmed {
        background-color: #9dc4f0;
        padding: 5px 10px;
        color: #0c509e;
        border-radius: 20px;
    }

    .notification-status .canceled {
        background-color: #f09d9d;
        padding: 5px 10px;
        color: #9e0c0c;
        border-radius: 20px;
    }

.header-physician {
    height: 60vh;
    background-color: white;
    border-bottom-left-radius: 100px;
    border-bottom-right-radius: 100px;
}

    .header-physician .physician-name {
        text-align: center;
        font-weight: 500;
        font-size: 16px;
    }

    .header-physician .specialty-name {
        text-align: center;
        color: #909090;
        font-size: 14px;
        margin-top: 5px;
    }

    .header-physician .healthcare-sosmed {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .header-physician .healthcare-sosmed .box-sosmed {
        width: 50px;
        height: 50px;
        background-color: white;
        border-radius: 50%;
        margin: 0px 5px;
    }

.content-physician {
    height: 40vh;
    background-color: white;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    overflow-y: scroll;
}

.schedule-physician {
    padding: 20px;
}

    .schedule-physician .schedule-heading {
        display: flex;
        justify-content: space-between;
    }

        .schedule-physician .schedule-heading .heading-title {
            color: #3286E9;
            font-weight: 500;
        }

    .schedule-physician .schedule-list {
        margin-top: 20px;
    }

.navbar-chat {
    width: 100%;
    height: 8%;
    background-color: #3286E9;
    display: flex;
    justify-content: start;
    align-items: center;
}

    .navbar-chat .navbar-chat-left {
        width: 10%;
        display: flex;
        justify-content: center;
    }

    .navbar-chat .navbar-chat-right {
        width: 10%;
        display: flex;
        justify-content: center;
    }

    .navbar-chat .receive-name {
        color: #fff;
        font-weight: 500;
    }

    .navbar-chat .status-available {
        display: flex;
        align-items: center;
        margin-top: 5px;
    }


        .navbar-chat .status-available .circle-status {
            width: 10px;
            height: 10px;
            border-radius: 50%;
        }

            .navbar-chat .status-available .circle-status.online {
                background-color: rgb(34, 182, 34);
            }

            .navbar-chat .status-available .circle-status.offline {
                background-color: rgb(179, 33, 33);
            }

        .navbar-chat .status-available .status-name {
            margin-left: 5px;
            color: #fff;
            font-weight: 300;
            font-size: 12px;
        }



.body-chat {
    height: 84%;
    overflow-y: scroll;
}


.footer-chat {
    display: flex;
    justify-content: start;
}

    .footer-chat .form-chat {
        width: 72%;
    }

    .footer-chat .upload-image {
        margin-left: 10px;
        width: 12%;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #3286E9;
        border-radius: 10px;
    }

    .footer-chat .btn-send {
        margin-left: 5px;
        width: 12%;
        height: 48px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #3286E9;
        border-radius: 10px;
    }

.message-list {
    padding: 10px;
}

.message-item.left {
    display: flex;
    justify-content: start;
    align-items: start;
    margin-bottom: 10px;
}

.message-item.right {
    display: flex;
    justify-content: end;
    align-items: start;
    margin-bottom: 10px;
}

.message-item.left .body-message {
    width: 230px;
    padding: 10px;
    background-color: #3286E9;
    margin-left: 10px;
    border-radius: 7px;
}

    .message-item.left .body-message .message {
        color: #fff;
        font-size: 14px;
    }

.message-item.right .body-message {
    width: 230px;
    padding: 10px;
    background-color: #f5f5f5;
    margin-right: 10px;
    border-radius: 7px;
}

    .message-item.right .body-message .message {
        color: #000;
        font-size: 14px;
    }

    .message-item.right .body-message .body-message-footer {
        display: flex;
        justify-content: end;
        align-items: center;
        margin-top: 5px;
    }

        .message-item.right .body-message .body-message-footer .message-time {
            color: #909090;
            font-size: 12px;
            margin-left: 3px;
        }


.message-item.left .body-message .body-message-footer {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-top: 5px;
}

    .message-item.left .body-message .body-message-footer .message-time {
        color: #f5f5f5;
        font-size: 12px;
        margin-left: 3px;
    }

.message-reply {
    width: 67.7%;
    background-color: #fff;
    position: fixed;
    bottom: 7%;
    padding: 10px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

    .message-reply .box-reply {
        padding: 5px;
        background-color: #eeeeee;
    }

        .message-reply .box-reply .header-box-reply {
            display: flex;
            justify-content: space-between;
        }

        .message-reply .box-reply .name-reply {
            font-size: 12px;
            color: #3286E9;
        }

        .message-reply .box-reply .desc-reply {
            font-size: 12px;
            color: #909090;
        }

.registration-list {
    margin-top: 40px;
    padding: 20px;
}


.registration-item {
    padding: 20px;
    background-color: white;
    border-radius: 10px;
    margin-bottom: 10px;
}

    .registration-item .title {
        font-size: 18px;
        font-weight: 500;
        color: green;
    }

    .registration-item .number-series {
        color: #909090;
        font-size: 14px;
        margin-top: 5px;
    }

    .registration-item .location {
        display: flex;
        justify-content: start;
        margin-top: 15px;
        align-items: center;
    }

        .registration-item .location .location-name {
            margin-left: 10px;
            font-weight: 500;
        }

    .registration-item .date {
        margin-top: 10px;
        text-align: end;
        color: #3286E9;
        font-size: 14px;
    }

    .registration-item .detail {
        margin-top: 20px;
    }

        .registration-item .detail .detail-section {
            margin-top: 10px;
        }

        .registration-item .detail .heading {
            font-size: 16px;
            font-weight: 500;
        }

        .registration-item .detail .subheading {
            font-size: 14px;
            font-weight: 400;
            color: #909090;
        }

    .registration-item .btn-link {
        text-decoration: none;
        color: #3286E9;
        text-align: center;
    }

    .registration-item .item-services {
        display: flex;
        justify-content: start;
        align-items: center;
    }

        .registration-item .item-services .item-detail {
            margin-left: 20px;
        }

            .registration-item .item-services .item-detail .name {
                font-size: 16px;
                font-weight: 400;
            }

            .registration-item .item-services .item-detail .qty {
                color: #909090;
                font-size: 14px;
                margin-top: 5px;
            }

    .registration-item .price {
        margin-top: 10px;
        text-align: end;
        color: #000;
        font-size: 14px;
    }

.chart-item {
    margin-bottom: 20px;
    background-color: #fff;
    padding: 10px;
    border-radius: 10px;
}

.title {
    font-size: 16px;
    font-weight: 500;
    color: #3286E9;
}

.card-graphic-latest {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    padding-top: 10px;
}

.card-latest-item {
    width: 25%;
    height: 80px;
    background-color: #fff;
    border-radius: 10px;
    margin: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.pop-up-confirm-payment {
    position: fixed;
    top: 10%;
    left: 10%;
    right: 10%;
    width: 80%;
    z-index: 400;
    background-color: #fff;
    border-radius: 10px;
}

    .pop-up-confirm-payment .title-pop-up {
        text-align: center;
        font-size: 20px;
        color: #3286E9;
        font-weight: 500;
        margin-top: 20px;
    }

    .pop-up-confirm-payment .description{
        padding: 10px 10px;
        text-align: center;
    }

    .pop-up-confirm-payment .btn-confirm-section{
        display: flex;
        justify-content: center;
        margin-bottom: 25px;
    }

        .pop-up-confirm-payment .btn-confirm-section .btn-confirm-yes {
            background-color: #3286E9;
            text-align: center;
            padding: 10px 30px;
            color: #fff;
            border-radius: 5px;
            margin-left: 5px;
            margin-right: 5px;
        }

        .pop-up-confirm-payment .btn-confirm-section .btn-confirm-no {
            background-color: #fff;
            text-align: center;
            padding: 10px 20px;
            color: #3286E9;
            border-radius: 5px;
            border: 1px solid #3286E9;
            margin-left: 5px;
            margin-right: 5px;
        }

.appointment-now-section {
    padding: 20px;
}

    .appointment-now-section .appointment-now-list {
        display: flex;
        justify-content: start;
        overflow-x: scroll;
        padding: 5px;
        margin-top: 10px;
    }