/* Sharp Sans Display No 1 Medium */
@font-face {
    font-family: "SharpSansDispNo1-Medium";
    src: url("../fonts/SharpSansDispNo1-Medium.eot");
    src: url("../fonts/SharpSansDispNo1-Medium.ttf") format("truetype"), url("../fonts/SharpSansDispNo1-Medium.svg#SharpSansDispNo1-Medium") format("svg"), url("../fonts/SharpSansDispNo1-Medium.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Sharp Sans Display No 1 SemiBold */
@font-face {
    font-family: "SharpSansDispNo1-SemiBold";
    src: url("../fonts/SharpSansDispNo1-SemiBold.eot");
    src: url("../fonts/SharpSansDispNo1-SemiBold.ttf") format("truetype"), url("../fonts/SharpSansDispNo1-SemiBold.svg#SharpSansDispNo1-SemiBold") format("svg"), url("../fonts/SharpSansDispNo1-SemiBold.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* Sharp Sans Display No 1 Bold */
@font-face {
    font-family: "SharpSansDispNo1-Bold";
    src: url("../fonts/SharpSansDispNo1-Bold.eot");
    src: url("../fonts/SharpSansDispNo1-Bold.ttf") format("truetype"), url("../fonts/SharpSansDispNo1-Bold.svg#SharpSansDispNo1-Bold") format("svg"), url("../fonts/SharpSansDispNo1-Bold.eot?#iefix") format("embedded-opentype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
/* ============================================================== Master Template ============================================================== */
:root {
    --singlife-red: #FF0008;
    --singlife-teal: #19D3C5;
    --singlife-mandarin: #FFA168;
    --singlife-berry: #883E89;
}

::-ms-reveal {
    display: none;
}

body {
    font-family: "SharpSansDispNo1-Medium", sans-serif;
    font-size: 1rem;
    color: #333;
    font-weight: normal;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mobile-only {
    display: none;
}

.container {
    max-width: 1270px;
    padding: 0 24px;
}

.content-brief {
    max-width: 1640px;
    margin: 0 auto 3.75rem;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "SharpSansDispNo1-SemiBold", sans-serif;
    line-height: 1.2;
    color: #333;
    margin: 0 0 .75rem;
}

    h1 strong, h1 b, h2 strong, h2 b, h3 strong, h3 b, h4 strong, h4 b, h5 strong, h5 b, h6 strong, h5 b {
        font-family: "SharpSansDispNo1-Bold", sans-serif;
    }

h1, .h1 {
    font-size: 2.25rem;
    line-height: 40px;
    margin-bottom: 1.5rem;
}

h2, .h2 {
    font-size: 1.75rem;
    line-height: 36px;
    margin-bottom: 1.625rem;
}

h3, .h3 {
    font-size: 1.25rem;
    line-height: 28px;
}

h4, .h4 {
    font-size: 1rem;
    line-height: 24px;
}

p strong, p b {
    font-family: "SharpSansDispNo1-Bold", sans-serif;
}

a {
    color: var(--singlife-red);
    cursor: pointer;
}

    a:hover,
    a:active {
        text-decoration: none;
    }

    a:visited {
        color: var(--singlife-berry);
    }

.full-width {
    width: 100%;
}

.primary-btn,
.secondary-btn,
.hero_btn-1,
.hero_btn-2 {
    font-family: "SharpSansDispNo1-Bold", sans-serif;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 23px;
    letter-spacing: .64px;
    padding: 0 1.5rem;
    color: #FFF;
    border: none;
    height: 52px;
    display: inline-flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    transition: color .15s ease, background-color .15s ease;
}

    .primary-btn:visited,
    .hero_btn-1:visited,
    .hero_btn-2:visited {
        color: #FFF;
    }

.hero_btn-1,
.hero_btn-2 {
    border-radius: 25px;
    letter-spacing: .8px;
    padding: 0 2.5rem;
}

.primary-btn {
    background-color: var(--singlife-berry);
    border: 1px solid var(--singlife-berry);
    color: #FFF;
}

    .primary-btn:visited {
        color: #FFF;
    }

    .primary-btn:hover {
        background-color: #6D326E;
        border-color: #6D326E;
    }

.secondary-btn {
    color: var(--singlife-berry);
    background-color: #FFF;
    border: 1px solid var(--singlife-berry);
}

    .secondary-btn:hover {
        background-color: #EDD8EE;
        color: #522552;
    }

    .primary-btn:disabled,
    .secondary-btn:disabled {
        background-color: #DDD;
        border-color: #DDD;
        color: #FFF;
        transition: none;
    }

.hero_btn-1 {
    background-color: var(--singlife-red);
    border: 1px solid var(--singlife-red);
}

    .hero_btn-1:hover {
        background-color: #CC2E16;
        border-color: #CC2E16;
    }

.hero_btn-2 {
    background-color: var(--singlife-mandarin);
    border: 1px solid var(--singlife-mandarin);
}

    .hero_btn-2:hover {
        background-color: #CC8153;
        border-color: #CC8153;
    }

.pb-6 {
    padding-bottom: 5rem;
}

.button-section > ul {
    display: flex;
    gap: 1rem 1.5rem;
    justify-content: center;
    margin: 0 auto;
    padding: 0;
}

.button-section li {
    flex: 1 1 0;
    max-width: 21.125rem;
    list-style-type: none;
}

.button-section .btn {
    width: 100%;
}

.button-section .appointment {
    position: relative;
}

.appointment .dropdown-item:hover {
    background: revert;
}

.appointment-dropdown {
    position: absolute;
    display: none;
    padding: 0.5rem 0;
    width: 100%;
    background: rgb(256, 256,256, 0.9);
}

    .appointment-dropdown .dropdown-item i {
        padding-right: 1.25rem;
        font-size: 1.5rem;
        color: var(--color-1);
    }

.button-section .appointment:hover .appointment-dropdown {
    display: block;
}
/* color */
.bkg-grey {
    background-color: #EDEDED;
}

.noscroll {
    overflow: hidden;
}

input {
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid #CCC;
}

    input:focus-visible {
        outline: none;
    }

    input[type="radio"],
    input[type="checkbox"] {
        width: 16px;
        height: 16px;
        padding: 0;
    }

    input[type="checkbox"] {
        padding: 8px;
    }

    input:checked {
        accent-color: var(--singlife-berry);
    }
/* ============================================================== Header ============================================================== */
.header {
    margin: 0 auto;
    background-color: #FFF;
    box-shadow: 0px 3px 10px #0000001D;
    position: sticky;
    z-index: 3;
}

.header-bottom-sticky {
    top: -50px;
}

.header-bottom-back {
    top: 0px;
}

.scroll-down {
    transform: translate3d(0, -100%, 0);
}

.scroll-up {
    transform: none;
}

.top-logo {
    padding: 0.625rem 0 1rem;
    text-align: right;
}

    .top-logo span {
        font-family: "SharpSansDispNo1-Bold", sans-serif;
        color: #449EA6;
        font-size: .875rem;
        margin-right: .625rem;
    }

    .top-logo img {
        max-height: 23px;
    }

.main-menu {
    align-items: center;
    gap: .75rem;
}

.menu-logo {
    padding: .625rem 0;
}

    .menu-logo img {
        width: 100%;
    }

.menu-contact-toggle {
    margin-left: auto;
    display: flex;
    align-items: center;
    font-family: "SharpSansDispNo1-SemiBold", sans-serif;
    column-gap: 0.875rem;
}

.navbar-nav {
    flex-direction: row;
    font-size: 1.125rem;
}

.menu-contact {
    box-shadow: 0px 0px 10px #00000029;
    border-radius: 50%;
}

.navbar-nav .nav-item {
    margin-left: 2.25rem;
    padding: .625rem 0;
}

.nav-item {
    position: relative;
}

.nav-link {
    font-family: "SharpSansDispNo1-SemiBold", sans-serif;
}

    .nav-link::after {
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        vertical-align: baseline;
        padding-left: 0.5rem;
    }

    .nav-link::after {
        content: "\f078";
    }

#toggle div {
    width: 20px;
    height: 2px;
    background: var(--singlife-red);
    margin: 5px auto;
    transition: all 0.3s;
    backface-visibility: hidden;
    border-radius: 6px;
}

.navbar-toggle:not(.collapsed) .navbar-toggler-icon .one {
    transform: rotate(45deg) translate(3.5px, 4.5px);
}

.navbar-toggle:not(.collapsed) .navbar-toggler-icon .two {
    opacity: 0;
}

.navbar-toggle:not(.collapsed) .navbar-toggler-icon .three {
    transform: rotate(-45deg) translate(5.5px, -6.5px);
}

.dropdown-menu {
    border: none;
    padding: 1.5rem;
    width: 240px;
    top: 100%;
    border-radius: 0px 0px 12px 12px;
    box-shadow: 0px 10px 10px #00000029;
    transition: height 2s;
}

    .dropdown-menu li {
        margin-bottom: 1.5rem;
    }

        .dropdown-menu li:last-child {
            margin-bottom: .75rem;
        }

    .dropdown-menu a {
        text-decoration: none;
        color: #333;
    }

        .dropdown-menu a:hover {
            text-decoration: underline;
            color: var(--singlife-red);
        }

.dropdown-toggle::after, .nav-item.dropdown:not(.appointment) > .nav-link::after {
    border: none;
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    content: "\f078";
    vertical-align: baseline;
    padding-left: 0.5rem;
}

@media (min-width: 992px) {
    .main-menu .menu-nav-section {
        display: block;
    }

    .nav-item:hover .dropdown-menu {
        display: block;
        position: absolute;
    }

    .nav-item:hover .nav-link {
        color: var(--singlife-red);
    }

        .nav-item:hover .nav-link::after {
            content: "\f077";
            color: var(--singlife-red);
        }
}
/* ============================================================== Breadcrumb ============================================================== */
.breadcrumb-section .container {
    padding: 36px 24px;
    max-width: 1232px;
}

.breadcrumb-section em {
    padding-right: .75rem;
    color: #000;
}
/* ============================================================== Banner ============================================================== */
.banner-section {
    position: relative;
}

    .banner-section::before {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: -1;
        content: '';
        background: transparent linear-gradient(359deg, #FFFFFF 0%, #FFE9EC 10%, #FFC7CB 100%) 0% 0% no-repeat padding-box;
        opacity: 0.4;
    }

    .banner-section img {
        object-fit: cover;
    }

    .header .container,
    .banner-section .container,
    .appointment-section .container {
        max-width: 1232px;
    }
/* ============================================================== Accordion ============================================================== */
.accordion-inner-wrap {
    margin-bottom: 1.5rem;
}

.accordion {
    border: none;
    display: flex;
    padding: 1.5rem;
    width: 100%;
    border-radius: 24px;
    text-align: left;
    background-color: #883E8934;
    column-gap: .75rem;
    color: #000;
}

    .accordion strong {
        font-size: 1.25rem;
    }

    .accordion.accordion-active {
        border-radius: 24px 24px 0 0;
        background-color: var(--singlife-berry);
        color: #FFF;
        line-height: 1.5;
        font-family: "SharpSansDispNo1-Medium", sans-serif;
    }

.accordion-inner-wrap .accordion::after {
    content: "";
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-left: auto;
    align-self: center;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-inner-wrap .accordion.accordion-active::after {
    transform: rotate(180deg);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
}

.acc-panel {
    padding: 24px;
    display: none;
    overflow: hidden;
    border-radius: 0 0 24px 24px;
    border: 1px solid #DDD;
    border-top: none;
}

.accordion-panel-active {
    display: block;
}
/* ============================================================== Home - Banner ============================================================== */
.homepage-banner {
    display: flex;
    gap: 0.5rem 3.5rem;
    padding: 2.25rem 0;
}

    .homepage-banner h2 span {
        color: #EC371E;
    }

.homepage-banner-btn-section {
    margin: 1.5rem 0;
}

.homepage-banner small {
    font-size: .875rem;
}
/* ============================================================== Home - Request Appointment ============================================================== */
.banner-section h2,
.appointment-section h2 {
    font-size: 2.25rem;
    margin-bottom: .75rem;
}

.appointment-section {
    background-color: #FFECE1;
}

    .appointment-section .d-flex {
        justify-content: space-between;
        align-items: center;
        column-gap: .75rem;
    }

.appointment-intro {
    padding: 1.5rem 0;
}

    .appointment-intro p:last-child {
        margin-bottom: 0;
    }

.appointment-section img {
    align-self: end;
}

    .appointment-section img + div {
        flex-shrink: 0;
    }
/* ============================================================== Homepage filtering ============================================================== */
.filtering-section {
    margin: 1.5rem 0 5.25rem;
    display: flex;
    column-gap: 1.5rem;
}

.filters-bar {
    max-width: 352px;
    flex: 3;
}

.filters-display-list {
    flex: 5;
}

.specialist-filter-wrapper {
    background-color: #F5F5F5;
    border-radius: 24px;
    padding: 1.5rem;
}

    .specialist-filter-wrapper .btn-filterclose::after {
        content: "\f00d";
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        color: #333;
    }

.specialist-filter-group {
    margin-bottom: 1.5rem;
}

.list-search-specialistfilter h4 {
    margin-bottom: .75rem;
    font-family: "SharpSansDispNo1-SemiBold", sans-serif;
}

.list-search-specialistfilter .row .h4 {
    margin-bottom: 1.5rem;
}

.list-search-specialistfilter .col-lg {
    text-align: right;
}

.list-search-specialistfilter .k-widget {
    width: 100%;
}

.list-search-specialistfilter select {
    padding: 1.125rem 2rem 1.125rem 1.5rem;
}

.list-search-specialistfilter .btn-filterclose {
    cursor: pointer;
}

.list-search-specialistfilter .btn-triggerclear-desktop {
    color: var(--singlife-red);
    text-decoration: underline;
    border: none;
    background: transparent;
    padding: 0;
}

.filters-display-list #partialView > .row {
    margin-bottom: 1.5rem;
}

.listing-filtered {
    min-height: 38px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

    .listing-filtered + hr {
        margin: .75rem 0 1.5rem;
        border-top-style: dashed;
    }

    .listing-filtered .title {
        display: inline-block;
        font-family: "SharpSansDispNo1-SemiBold", sans-serif;
    }

    .listing-filtered span.btn {
        background-color: #FFECE1;
        border-radius: 17px;
        padding: 6px 16px;
    }

    .listing-filtered .remove-filter {
        margin-left: 8px;
    }

.filters-display-list .item-content {
    background: #FFFFFF33 0% 0% no-repeat padding-box;
    border: 1px solid #DDD;
    border-radius: 20px;
    padding: 1.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.filters-display-list .main-content {
    display: flex;
    gap: 1.5rem;
}

.filters-display-list .image-content {
    width: 91px;
    flex-shrink: 0;
}

    .filters-display-list .image-content a {
        box-shadow: 0px 0px 10px #00000029;
        border-radius: 12px;
        display: inline-block;
    }

    .filters-display-list .image-content img {
        border-radius: 12px;
        height: 125px;
        object-fit: cover;
    }

.filters-display-list .detail-content {
    flex: 1 1 auto;
    word-break: break-word;
}

.filters-display-list h3 {
    margin-bottom: .375rem;
}

    .filters-display-list h3 a {
        color: #333;
        text-decoration: none;
    }

.filters-display-list .detail-language {
    margin-bottom: 0;
}

    .filters-display-list .detail-language span {
        font-family: "SharpSansDispNo1-SemiBold", sans-serif;
    }

.filters-display-list .action-content {
    justify-content: center;
    gap: 0.75rem 0.325rem;
    margin-top: auto;
}

    .filters-display-list .action-content > a {
        flex: 1 1 auto;
        padding: 0 0.75rem;
    }

.k-popup > .k-group-header {
    background-color: var(--singlife-berry);
    color: #FFF;
    text-align: left;
    font-family: SharpSansDispNo1-SemiBold;
    text-transform: initial;
    font-size: 1rem;
}

.k-popup .k-list .k-item > .k-group {
    background-color: var(--singlife-berry);
    text-transform: initial;
    font-family: SharpSansDispNo1-SemiBold;
    font-size: 0.6875rem;
}

    .k-popup .k-list .k-item > .k-group::before {
        border-color: var(--singlife-berry) var(--singlife-berry) transparent transparent;
        border-width: 7.5px;
    }

#kendoFindSpecialistHospital_listbox > li,
#preferredHospital_listbox > li {
    padding: .75rem .75rem .75rem 1.75rem
}

/* ============================================================== Home - Need Help ============================================================== */
.home-bottom-content {
    align-items: center;
}

.home-need-help {
    flex: 1;
}

.home-need-help-title {
    flex-shrink: 0;
}

    .home-need-help-title span {
        color: var(--singlife-red);
    }

.home-need-help .d-flex {
    column-gap: .75rem;
    margin: 0 auto;
}

.home-need-help a {
    font-size: 1.25rem;
    color: #EC371E;
    text-decoration: none;
    word-break: break-word;
}
/* ============================================================== Doctor Details ============================================================== */
.doctor-banner::before {
    background: transparent;
}

.doctor-banner {
    background: transparent linear-gradient(130deg, #FF000824 0%, #FFA16819 100%) 0% 0% no-repeat padding-box;
}

.banner-content .container {
    max-width: 1066px;
}

.doc-detail-header {
    padding-bottom: 36px;
    display: flex;
}

.doc-img {
    margin-right: 32px;
    flex-shrink: 0;
}

.doc-detail-header .doc-img img {
    box-shadow: 0px 0px 10px #00000029;
    border-radius: 12px;
    max-width: 197px;
    height: 270px;
}

.doc-detail-header h2 {
    margin-bottom: 0.25rem;
}

    .doc-detail-header h2 + p {
        margin-bottom: 1.5rem;
        font-size: 1.25rem;
    }

.doc-language {
    margin-bottom: 1.5rem;
}

.doc-detail-header .appointment-btn-section {
    margin-left: auto;
    flex-shrink: 0;
}

.doc-detail-header .primary-btn {
    padding: 0 2.5rem;
    border-radius: 25px;
}

.doc-details-content.container {
    max-width: 1066px;
}

.doc-details-group {
    padding: 2.25rem 0;
    border-bottom: 1px dashed #CCC;
}

    .doc-details-group li {
        margin-bottom: .75rem;
    }

.doc-details-mapping iframe {
}

.clinic-timing h5 {
    font-size: 1rem;
    margin-bottom: 1.375rem;
}

.clinic-timing > div {
    border-bottom: 1px solid #EEE;
    display: flex;
    margin-bottom: .75rem;
}

.clinic-timing p {
    margin-bottom: .75rem;
}

    .clinic-timing p span {
        font-family: "SharpSansDispNo1-SemiBold", sans-serif;
    }

.clinic-timing > .row {
    margin: 1.5rem -12px 0;
    border-bottom: none;
}

.clinic-timing .primary-btn {
    border-radius: 25px;
    padding: 0 2.5rem;
}
/* ============================================================== Make An Appointment ============================================================== */
.container.appointment-sequence {
    text-align: center;
    max-width: 588px;
    padding-bottom: 1.5rem;
}

.appointment-steps-section {
    display: flex;
    justify-content: space-between;
}

.appointment-step {
    width: 104rem;
    position: relative;
}

.appointment-step-circle {
    width: 35px;
    height: 35px;
    background: #FFF;
    margin: 0 auto;
    border-radius: 50%;
    border: 1px solid #F6BDBF;
    display: flex;
    align-items: center;
}

.appointment-step.completed .appointment-step-circle {
    border: var(--singlife-berry);
    background: var(--singlife-berry);
}

    .appointment-step.completed .appointment-step-circle::after {
        content: "\f00c";
        display: inline-block;
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        color: #FFF;
        flex: 1;
    }

.appointment-step.completed .appointment-step-text {
    color: #818181;
}

.appointment-step.current-step .appointment-step-circle {
    background: #DBC8DB;
    box-shadow: 0px 0px 10px #00000029;
    border: none;
    font-family: "SharpSansDispNo1-Bold", sans-serif;
}

.appointment-step.current-step .appointment-step-circle,
.appointment-step.current-step .appointment-step-text {
    color: var(--singlife-berry);
}

.appointment-step:not(:last-child)::after,
.appointment-step:not(:first-child)::before {
    content: "";
    display: inline-block;
    width: 100%;
    border-top: 1px solid #F6BDBF;
    position: absolute;
    top: 17.5px;
    z-index: -1;
}

.appointment-step:not(:first-child)::before {
    right: 50%;
}

.appointment-step.completed::after,
.appointment-step.completed + div::before {
    border-color: var(--singlife-berry);
}

.appointment-step-circle span {
    flex: 1;
}

.appointment-details {
    max-width: 588px;
    padding: 36px 24px 48px;
}

    .appointment-details label {
        font-family: "SharpSansDispNo1-SemiBold", sans-serif;
        margin-bottom: .5rem;
    }

    .appointment-details .form-group {
        position: relative;
        margin-bottom: 2.25rem;
    }

    .appointment-details textarea {
        border-color: #CCC;
        border-radius: 12px;
        padding: 1.5rem;
    }

    .appointment-details .error-active + .patientNotesCount {
        bottom: -16px;
    }

    .appointment-details input#preferredDate,
    .appointment-details input#alternateDate,
    .appointment-details input[type="password"],
    .appointment-details input[type="text"] {
        width: 100%;
    }

    .appointment-details input[type="text"],
    .appointment-details .k-dropdown-wrap .k-input {
        padding: 1.5rem;
    }

    .appointment-details .radio-grouping {
        display: flex;
        flex-wrap: wrap;
    }

    .appointment-details input[type="radio"] {
        margin-right: .75rem;
        vertical-align: middle;
    }

        .appointment-details input[type="radio"] + label {
            margin-right: 1.5rem;
            margin-bottom: 0;
        }

    .appointment-details .error-message {
        position: absolute;
        color: #EC371E;
        font-size: .75rem;
    }

    .appointment-details .error-active {
        border: 1px solid #ff0000 !important;
        border-radius: 12px;
    }

.make-appointment-ddl {
    position: relative;
}

    .make-appointment-ddl select {
        padding: 1.5rem;
        width: 100%;
        border-color: #CCC;
        border-radius: 12px;
        appearance: none;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' height='1em' viewBox='0 0 448 512' fill='%23212529'%3e%3cpath d='M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z'/%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-size: 12px;
        background-position: center right 12px;
        background-color: #FFF;
        color: #333;
    }

        .make-appointment-ddl select:focus-visible {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0,0,0,.08);
        }

.back-next-btn {
    align-items: center;
    font-size: 1.25rem;
    flex-wrap: wrap;
    gap: 0.75rem 0.5rem;
}

    .back-next-btn button {
        padding: 0 2.5rem;
        padding-top: .125rem;
        width: 150px;
    }

    .back-next-btn .primary-btn {
        margin-left: auto;
    }

#submit-button {
    padding: 0 2.5rem;
    width: 150px;
}

.appointment-details .form-final-checklist {
    padding: 1.5rem;
    background: #FFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 0px 10px #00000029;
    border-radius: 24px;
    margin-bottom: 1.5rem;
}

    .appointment-details .form-final-checklist > .d-flex {
        justify-content: space-between;
        margin-bottom: 1.5rem;
    }

    .appointment-details .form-final-checklist h3,
    .appointment-details .form-final-checklist .form-group:last-child {
        margin-bottom: 0;
    }

    .appointment-details .form-final-checklist .form-group {
        margin-bottom: 1.5rem;
    }

    .appointment-details .form-final-checklist label {
        margin-bottom: .375rem;
    }

    .appointment-details .form-final-checklist input,
    .appointment-details .form-final-checklist textarea {
        border: none;
        padding: 0;
        background: unset;
    }

.appointment-details #PDPAchk {
    margin-bottom: 3rem;
    column-gap: 13px;
    align-items: flex-start;
}

    .appointment-details #PDPAchk input {
        margin-top: 4px;
        width: 16px;
        height: 16px;
    }

        .appointment-details #PDPAchk input:checked {
            accent-color: #DDD;
        }

.grecaptcha-badge {
    margin: 0 auto 60px;
}

.appointment-details #contactNumber span.k-dropdown .flag-section {
    display: inline-block;
    width: 100%;
    height: auto;
    max-width: 40px;
    max-height: 30px;
    margin-bottom: 4px;
    margin-right: 5px;
}

#contactCountry-list .k-item .flag-section {
    display: inline-block;
    width: 100%;
    height: auto;
    max-width: 40px;
    max-height: 30px;
    margin-bottom: -2px;
    margin-right: 12px;
    border: solid 1px #f1f1f1;
}

.flag-section-text {
    background-color: #efefef;
    color: #5b5b5b;
    text-align: center;
    vertical-align: middle;
}

.k-input .flag-section-text {
    border: 0 !important;
    font-size: 0.9rem;
    max-width: 50px;
    text-align: left;
}

#contactNumber .k-input {
    padding: 1.3em 0;
}

#contactNumber .k-dropdown {
    width: 16em;
}

.loading-div {
    padding-top: 2rem;
    text-align: center;
}
/* ============================================================== Thank you page ============================================================== */
.thankyou-pg {
    display: flex;
    gap: 1rem 2rem;
    max-width: 1084px;
    margin: 0 auto;
    align-items: center;
    margin-bottom: 9.125rem;
}

    .thankyou-pg > div {
        flex: 1 1 auto;
    }

.thankyou-form {
    max-width: 503px;
}

.thankyou-ref-num {
    background: #FFA1684D;
    max-width: 394px;
    padding: 1.5rem;
    text-align: center;
    margin: 0 auto;
    border-radius: 12px;
    margin-bottom: 2.25rem;
}

.thankyou-backhome {
    text-align: center;
}

    .thankyou-backhome .secondary-btn {
        padding: 0 2.5rem;
    }
/* ============================================================== Error page ============================================================== */
.error-pg {
    min-height: 417.5px;
    max-width: 551px;
    margin: 0 auto 121px;
}

    .error-pg img {
        margin-bottom: 15px;
    }

    .error-pg h1 {
        margin-bottom: .75rem;
    }

    .error-pg hr {
        border: 1px dashed #CCC;
        margin: 34.5px 0 25.5px;
    }

    .error-pg .grey-box h2 {
        margin-bottom: .75rem;
    }

    .error-pg .grey-box .primary-btn {
        margin-top: 24px;
        padding: 0 2.5rem;
    }
/* ============================================================== Breadcrumb ============================================================== */
.breadcrumb {
    margin: 1rem 0 0.75rem;
}
/* ============================================================== Footer ============================================================== */
.backtop-btn {
    position: sticky;
    bottom: 50px;
}

    .backtop-btn button {
        border: none;
        position: absolute;
        right: 48px;
        top: -30px;
        border-radius: 50%;
        background: var(--singlife-red);
        width: 60px;
        padding: 18px 16px;
        height: 60px;
    }

.footer {
    background-color: #312121;
    color: #FFF;
    padding: 1rem 0;
}

    .footer .container {
        text-align: center;
    }

.pagination li:not(.prev):not(.next).activated {
    background-color: #00769C;
    color: #fff;
}

.pediatricians + .pager-section .pagination li:not(.prev):not(.next).activated {
    background-color: var(--color-2);
}

.specialists + .pager-section .pagination li:not(.prev):not(.next).activated {
    background-color: var(--color-3);
}

.pagination .prev.disabled,
.pagination .next.disabled {
    color: #A9A9AA;
    border: none;
}

    .pagination .prev.disabled a,
    .pagination .next.disabled a {
        pointer-events: none;
        cursor: auto;
    }

.pagination {
    column-gap: .625rem;
    margin-bottom: 0;
}

.page-item.first i::after {
    content: "\f053";
    margin-left: -4px;
}

.page-item.last i::after {
    content: "\f054";
    margin-left: -4px;
}

.page-link,
.page-link:visited {
    color: #333;
    padding: 9px 15px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
}

.disabled > .page-link {
    background: none;
    opacity: .2;
}

.active > .page-link {
    font-family: "SharpSansDispNo1-Bold", sans-serif;
    background-color: rgb(136, 62, 137, 0.33);
    color: var(--singlife-berry);
}
/* ============================================================== Forms ============================================================== */
.toggleidnumber-container {
    display: inline-block;
    position: relative;
    overflow: hidden;
}

.eye-slash-icon,
.eye-icon {
    position: absolute;
    top: 1.5rem;
    right: 1rem;
}

    .eye-slash-icon::before {
        font-family: "Font Awesome 5 Free";
        content: "\f070";
        color: #2C2C2C;
    }

    .eye-icon::before {
        font-family: "Font Awesome 5 Free";
        content: "\f06e";
        color: #2C2C2C;
    }

.show {
    right: 5px;
}

.forms span.k-combobox,
.forms span.k-datepicker,
.k-calendar .k-calendar-view {
    width: 100%;
}

input[type="text"], textarea {
    width: 100%;
    padding: .75rem .5rem;
    border: 1px solid #A9A9AA;
    resize: none;
}

    textarea::placeholder {
        color: #AAA;
    }

    textarea:focus-visible {
        box-shadow: 0 0 0 2px rgba(0,0,0,.08);
        outline: none;
    }

.patientNotesCount {
    position: absolute;
    color: #666;
    font-size: .75rem;
    right: 12px;
    bottom: 12px;
    transition: bottom 0.4s ease;
}
/* ============================================================== Generalized Kendo CSS ============================================================== */
.k-multiselect .k-multiselect-wrap li.k-button {
    font-size: 1rem;
    line-height: 1.2;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    margin: 8px 0 0 2px;
    border-radius: 17px;
    border: none;
}

.k-multiselect .k-multiselect-wrap .k-button .k-select {
    padding: 0 0.5rem;
    color: #333;
}

.k-combobox .k-dropdown-wrap,
.k-multiselect .k-multiselect-wrap {
    border-radius: 12px;
}

.k-combobox .k-dropdown-wrap,
.k-widget.k-combobox {
    border-color: #CCC;
}

.k-dropdown .k-dropdown-wrap {
    background-color: #FFF;
    border-radius: 12px;
    align-items: center;
    border-color: #CCC;
    background-image: none;
}

.k-multiselect .k-multiselect-wrap {
    padding: 1rem;
    max-height: 148px;
    overflow-y: scroll
}

.k-dropdown-wrap .k-input,
.k-picker-wrap .k-input {
    padding: 1.125rem 3.75rem 1.125rem 0.875rem;
    height: unset;
    font-size: 1rem;
    border-radius: 12px;
    border-color: #CCC;
}

.k-datepicker .k-select {
    background: #883E8933;
    padding: 0 1.5rem;
}

    .k-datepicker .k-select:hover,
    .k-datepicker .k-select.k-state-hover,
    .k-timepicker .k-select:hover,
    .k-timepicker .k-select.k-state-hover {
        background-color: #883E8933;
    }

.k-calendar .k-calendar-td.k-state-selected .k-link {
    background-color: var(--singlife-berry);
}

.k-calendar .k-content .k-link {
    margin: 0;
}

.k-combobox .k-dropdown-wrap .k-select,
.k-dropdown-wrap:hover .k-select,
.k-dropdown .k-dropdown-wrap .k-select {
    background-color: transparent;
    width: calc(1.4285714286em + 20px);
}

.k-combobox .k-clear-value {
    visibility: visible;
}

.k-i-arrow-60-down::before {
    content: "\f078";
    font-family: 'Font Awesome 5 Free';
    font-weight: 700;
    font-size: .875rem;
}

.k-listbox .k-item,
.k-popup .k-list .k-item {
    padding: .75rem;
    border: none;
    font-size: 1rem;
}

.k-list .k-item.k-state-focused {
    box-shadow: none;
}

.k-popup.k-list-container {
    padding: 0;
}

.k-list .k-item:hover,
.k-list .k-item.k-state-hover,
.k-list-optionlabel:hover,
.k-list-optionlabel.k-state-hover,
.k-list .k-item:hover.k-state-selected,
.k-list .k-item.k-state-hover.k-state-selected,
.k-list-optionlabel:hover.k-state-selected,
.k-list-optionlabel.k-state-hover.k-state-selected {
    background: #883E8933 0% 0% no-repeat padding-box;
    color: #333;
}

.k-list .k-item.k-state-selected,
.k-list-optionlabel.k-state-selected {
    background: #EEE;
    color: #333
}

.k-dropdown-wrap > .k-clear-value {
    right: calc(3em - 9px);
}

.k-i-x {
    height: 100%;
}

.k-multiselect .k-multiselect-wrap .k-clear-value {
    font-size: 1rem;
    right: 100px;
    top: 6px;
    color: var(--singlife-red);
    text-decoration: underline;
    visibility: visible;
    opacity: 1;
}

    .k-multiselect .k-multiselect-wrap .k-clear-value:hover {
        opacity: .65;
    }

.k-multiselect-wrap hr {
    border-top: none;
    border-bottom: 1px dashed #DDD;
    opacity: 1;
    padding-top: 8px;
}

    .k-multiselect-wrap hr + .k-reset {
        margin-top: -6px;
    }

.k-multiselect-wrap .k-button {
    background: #FFECE1;
    border-radius: 17px;
}

.k-multiselect .k-multiselect-wrap .k-button:active {
    background-color: #FFECE1;
}

.k-multiselect .k-multiselect-wrap .k-i-x {
    color: #000;
    text-decoration: none;
    margin-left: 8px;
}

div.k-multiselect-wrap.k-floatwrap > input.k-input:focus-visible {
    margin: 0.9rem 0.19rem 0rem;
}

.k-dropdown .k-dropdown-wrap:hover {
    background-color: initial;
}
/* ============================================================== Tooltip ============================================================== */
.appointment-tooltip {
    border-radius: 0.75rem;
    box-shadow: 0 0 6px #00000029;
    background-color: #F5F5F5;
    margin-top: 1.5rem;
    display: none;
    position: relative;
}

    .appointment-tooltip::after {
        content: " ";
        position: absolute;
        top: -24px;
        left: 7%;
        border-width: 12px 7px;
        border-style: solid;
        border-color: transparent transparent #F5F5F5 transparent;
    }

/* ============================================================== Mobile Responsiveness (Media) ============================================================== */
@media(min-width:992px) {
    .btn-toggle-specialistfilter, .btn-filterclose, .btn-triggerfilter, .btn-triggerclear-mobile {
        display: none;
    }
}

@media(max-width:991px) {
    .mobile-only {
        display: block;
    }

    .top-logo {
        padding-bottom: 1.5rem;
    }

    .bottom-header {
        position: relative;
    }

    .main-menu {
        padding-bottom: .875rem;
    }

    .nav-link::after, .menu-contact-text {
        display: none;
    }

    .mainmenu-toggler {
        margin-left: .75rem;
    }

    .menu-nav-section {
        width: 100%;
        order: 2;
        position: absolute;
        top: 100%;
        left: 0;
        background: #FFF;
        box-shadow: 0px 10px 10px #00000029;
        border-radius: 0px 0px 12px 12px;
        z-index: 2;
    }

    .navbar-nav {
        flex-direction: column;
        padding: 24px 24px 12px;
        max-width: 1232px;
    }

        .navbar-nav .nav-item {
            margin: 0 0 1.5rem;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
        }

    .nav-link-wrapper {
        display: flex;
        align-items: center;
    }

    .nav-link {
        padding: 0;
    }

    .nav-item .dropdown-toggle {
        margin-left: auto;
        color: #333;
        padding: 0;
        border: none;
        background: transparent;
    }

    .nav-item.active .nav-link {
        color: var(--singlife-red);
    }

    .nav-item.active .dropdown-toggle::after {
        content: "\f077";
        color: var(--singlife-red);
    }

    .dropdown-menu.menu-active {
        display: block;
    }

    .dropdown-menu {
        position: static;
        box-shadow: none;
        padding: 0;
        margin: 1.5rem 0 0 1.5rem;
        width: 100%;
    }

        .dropdown-menu li:last-child {
            margin-bottom: 0;
        }

    .homepage-banner {
        flex-direction: column-reverse;
        align-items: center;
        padding-top: 0;
    }

        .homepage-banner img {
            width: 100%;
        }

    .homepage-banner-btn-section {
        margin-bottom: 2.25rem;
        text-align: center;
    }

    .home-bottom-content {
        flex-direction: column;
    }

        .home-bottom-content > img {
            width: 100%;
            max-width: 269px;
        }

    .home-need-help {
        flex-direction: column;
    }

        .home-need-help .d-flex {
            margin: 0;
            margin-bottom: 1.5rem;
        }

    .appointment-details .radio-grouping {
        flex-direction: column;
    }

    .list-search-specialistfilter {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 5;
        padding: 0 1.5rem;
        background-color: rgba(256,256,256,0.6);
    }

        .list-search-specialistfilter h4 {
            margin-bottom: .625rem;
        }

        .list-search-specialistfilter .k-dropdown-wrap .k-input {
            padding: 1rem 3.75rem 1rem 0.875rem;
        }

    .listing-filtered .title {
        width: 100%;
    }

    .specialist-filter-wrapper {
        height: 100%;
        box-shadow: 0px 0px 10px #00000029;
        border-radius: unset;
        overflow: auto;
    }

    .specialist-filter-group {
        margin-bottom: 1.125rem;
    }

    .page-item {
        flex: 1;
        max-width: 40px;
        text-align: center;
    }

    .pagination .page-link {
        padding: .625rem 0;
    }

    .filters-display-list .pagination {
        justify-content: center;
    }

    .appointment-section .d-flex {
        flex-direction: column;
    }

    .appointment-section img {
        order: 1;
        align-self: unset;
        margin-top: 1.5rem;
    }

    .appointment-intro {
        text-align: center;
    }

    .filtering-section {
        display: revert;
    }

    .filters-bar {
        max-width: unset;
    }

    .list-search-specialistfilter .row .h4 {
        margin-bottom: .5rem;
    }

    .list-search-specialistfilter .btn-filterclose {
        text-align: right;
    }

    .list-search-specialistfilter .col-lg {
        text-align: unset;
        margin-bottom: 1rem;
    }

    .m-filter-btn-list {
        margin-top: .75rem;
    }


    .doc-detail-header {
        flex-direction: column;
        row-gap: 1.5rem;
    }

        .doc-img, .doc-detail-header .appointment-btn-section {
            margin: unset;
            text-align: center;
        }

    .doc-details-mapping {
        margin: 0 -24px;
    }

        .doc-details-mapping .col-lg-8 {
            padding: 0;
            aspect-ratio: 1.3755;
        }

    .clinic-timing {
        padding: 1.5rem 24px 0;
    }

    .appointment-steps-section {
        position: relative;
    }

    .appointment-step {
        position: initial;
    }

        .appointment-step-text, .appointment-step:not(:first-child)::before {
            display: none;
        }

        .appointment-step:not(:last-child)::after {
            width: 33.3333%;
        }

    .thankyou-pg {
        flex-direction: column;
        margin-bottom: 3.75rem;
    }

    .thankyou-form {
        max-width: unset;
    }


    .backtop-btn button {
        right: 24px;
    }

    .appointment-tooltip {
        margin-top: 2rem;
    }
}

@media (max-width: 767px) {
    .specialist-listing-wrapper #partialView > .row {
        gap: 1.5rem 20px;
    }

    .filters-display-list .main-content, .filters-display-list .action-content {
        flex-direction: column;
    }

    .filters-display-list .image-content {
        align-self: center;
    }
}

@media print {
}

/* To avoid zoom in effect, apply font size 16px for iphone.*/
@supports (-webkit-overflow-scrolling: touch) {
    .k-input, .k-input:active {
        font-size: 16px !important;
    }
}