@import url('../font/GolosText-VariableFont_wght.ttf');

a {
    color: #3BB272;
    text-decoration: none;
}

    a:hover {
        color: #20874f;
    }

.loading {
}

header .navbar {
    box-shadow: none;
    padding: 0px;
    margin: 0px !important;
    height: 70px;
    background-color: #fff;
    border-bottom: 5px solid #269F5E !important;
}

    header .navbar .container {
        background-color: #fff;
    }

.HeaderMenu .nav-item .nav-link {
    padding: 0px;
    vertical-align: middle;
    border: none;
}

.HeaderMenu a {
    color: #475569;
    font-weight: bold;
    font-family: 'Golos Text', sans-serif;
    font-size: 12pt;
}

.navbar-brand {
}

.HeaderMenu a:hover {
    color: #3BB272;
}

#Home, #About {
    margin: 23px 10px 0px 10px;
}


.myBranche, .myNews {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

    .myBranche:hover, .myNews:hover {
        -webkit-transform: translateY(-10px);
        transform: translateY(-10px);
    }

.adminmenu {
    padding: 15px 10px 0px 10px;
}

.language, .searchBtn {
    width: 64px !important;
    height: 64px !important;
    padding-top: 20px !important;
    margin: 0px !important;
    display: inline-block;
    text-align: center;
}

    .language .btn.dropdown-toggle {
        padding: 0px !important;
    }

        .language .btn.dropdown-toggle.show {
            border: none;
        }

    .language .dropdown-menu {
        border: none;
        width: auto !important;
        min-width: auto !important;
    }

        .language .dropdown-menu .dropdown-item {
            width: auto !important;
        }

            .language .dropdown-menu .dropdown-item:hover, .language .dropdown-menu .dropdown-item:active {
                background-color: #fff !important;
            }

.branch {
    width: 64px !important;
    height: 64px !important;
    display: inline-block !important;
    border-left: 1px solid #e9eef4 !important;
}




a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
}

.navbar-mobilemenu {
    width: 130px;
}

    .navbar-mobilemenu .navbar-nav.ml-auto {
        flex-direction: row;
    }

    .navbar-mobilemenu .navbar-nal .nav-item {
        display: list-item;
    }

#LandMenu {
    display: none !important;
}

    #LandMenu .navbar-nav {
        padding: 0px;
        margin: 0px;
    }

.mobilemenu {
    display: block !important;
}

header > .navbar > .container {
    flex-wrap: wrap;
}

#MobileMenu {
    display: none !important;
    border-top: 1px solid #e9eef4 !important;
    border-bottom: 1px solid #e9eef4 !important;
    width: 100% !important;
    margin-right: calc(var(--bs-gutter-x) * -0.5);
    margin-left: calc(var(--bs-gutter-x) * -0.5);
    padding-left: 10px;
    padding-right: calc(var(--bs-gutter-x) * 1.5);
}

    #MobileMenu.navbar-collapse.collapse.show {
        display: block !important;
        flex-basis: 100% !important;
        flex-grow: 1;
        width: 100% !important;
    }

    #MobileMenu .accordion-item {
        padding-left: 10px;
    }

        #MobileMenu .accordion-item img {
            padding: 0px 15px;
        }

        #MobileMenu .accordion-item a, #MobileMenu .accordion-item.accordion-button.collapsed {
            font-size: 12pt;
            font-weight: bold;
            color: #475569;
            padding: 0px;
        }

    #MobileMenu .accordion .accordion-item {
        vertical-align: middle;
        padding-top: 20px;
        padding-bottom: 20px;
    }

        #MobileMenu .accordion .accordion-item .accordion-header {
            margin: 0px;
            padding: 0px;
        }

        #MobileMenu .accordion .accordion-item .accordion-button:not(.collapsed) {
            background-color: #fff !important;
            color: #3BB272;
            box-shadow: none !important;
            padding-bottom: 20px;
        }

.MobileSubMenu {
    border-bottom: 1px solid #e9eef4 !important;
    border-top: 1px solid #e9eef4 !important;
    margin-left: calc(var(--bs-gutter-x) * -0.5);
}

    .MobileSubMenu .list-group-item {
        padding-left: 70px;
        background-color: #F1F5F9 !important;
        border: none;
    }


/* Provide sufficient contrast against white background */

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    font-size: 14px;
}

.border-top {
    border-top: 1px solid #e5e5e5;
}

.border-bottom {
    border-bottom: 1px solid #e5e5e5;
}

.box-shadow {
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}

button.accept-policy {
    font-size: 1rem;
    line-height: inherit;
}

/* Sticky footer styles
-------------------------------------------------- */
html {
    position: relative;
    min-height: 100%;
    margin-bottom: 0px;
}

body {
    /* Margin bottom by footer height */
    color: #64748B;
    font-family: 'Golos Text', sans-serif;
    margin-bottom: 0px;
}

.footer {
    width: 100%;
    white-space: nowrap;
}

#ContactUs {
    background-color: #F1F5F9 !important;
    border-radius: 0px 0px 0px 0px;
    padding-top: 20px;
}

    #ContactUs .container .row {
        margin: 0px 20px;
    }

#copyRight {
    background-color: #0F172A !important;
    min-height: auto !important;
    color: #CBD5E1;
    font-size: 12pt;
    min-height: 64px !important;
    margin-top: 10px;
    padding: 20px 0px;
    border-radius: 0px 0px 0px 0px;
    width: 100% !important;
}

    #copyRight .copy {
        width: auto;
        display: block;
    }

    #copyRight .menu {
        width: auto;
        display: block;
        text-align: left;
    }

        #copyRight .menu a {
            margin: 0px 5px;
            text-decoration: none;
            color: #CBD5E1;
        }

            #copyRight .menu a:hover {
                color: #3BB272;
            }

.text-right {
    text-align: right;
}

#ContactUs h5 {
    color: #334155;
    font-size: 12pt;
    font-weight: bold;
}

#ContactUs p {
    color: #64748B !important;
    font-size: 11pt;
    max-width: 400px;
}

#ContactUs .address {
    min-height: 70px;
}

#ContactUs .description {
    color: #94A3B8;
    font-size: 11pt;
}

#ContactUs .title {
    color: #3BB272;
    font-weight: bold;
    font-size: 12pt;
}

    #ContactUs .title img {
        padding-right: 5px;
    }

#ContactUs .mobile, #ContactUs .mobile a {
    color: #1E293B;
    font-weight: bold;
    text-decoration: none;
    font-size: 14pt;
}

    #ContactUs .mobile:hover, #ContactUs .mobile a:hover {
        color: #3BB272;
    }

#ContactUs .social a {
    padding-right: 25px;
}

    #ContactUs .social a img {
        max-width: 20px;
        max-height: 20px;
    }

#ContactUs .logo {
    width: 100%;
    max-width: 220px;
}

#SocialNetwork {
    margin-bottom: 20px;
}



#HomePage {
    margin: 68px 0px 0px 0px;
}

#MainSide {
}

    #MainSide .title {
        text-transform: uppercase;
        font-size: 16px;
        background-color: #3BB272;
        border-radius: 10px 10px 10px 10px;
        width: 100% !important;
        display: inline;
        padding: 5px 10px;
    }

        #MainSide .title a {
            color: #475569;
        }

            #MainSide .title a:hover {
                color: #1a7f49;
            }

    #MainSide .description {
        font-size: 18pt;
        line-height: 22pt;
        text-wrap: inherit;
        width: 80%;
    }

    #MainSide .carousel-caption {
        text-align: left;
        bottom: 20%;
    }

#Description .container {
    max-width: 1500px;
}

    #Description .container .row, #Contact .container .row {
        margin: 0px;
    }

#Description .card-company {
    background-color: #F1F5F9 !important;
    border-radius: 15px 15px 15px 15px;
    padding: 30px;
    margin: 0px 5px 20px 5px;
    min-height: 200px;
}

    #Description .card-company .title {
        font-size: 14pt;
        color: #334155;
        font-weight: bold;
        width: 100%;
    }

#Description, #Statistic {
    margin: 60px 0px 40px 0px !important;
    padding: 0px 0px 0px 0px;
}

    #Description .card-company .description {
        font-size: 12pt;
        color: #64748B;
        min-height: 80px;
        padding: 0px;
        text-align: justify;
    }

#Statistic {
    text-align: center;
}

    #Statistic .statisticItem {
        display: inline-block;
        min-width: 120px;
        text-align: left;
        margin: 10px;
    }

    #Statistic img {
        max-width: 150px;
    }

    #Statistic h3 {
        font-weight: bold;
        font-size: 30pt;
        color: #64748B;
        margin: 0px;
        padding: 0px;
    }

    #Statistic p {
        color: #64748B;
        font-size: 10pt;
        margin: 0px;
        padding: 0px;
    }

#HomePage #Branches {
    text-align: center;
    padding: 60px 0px 40px 0px;
}

    #HomePage #Branches h2 {
        color: #334155;
        font-size: 24pt;
        font-weight: bold;
    }

    #HomePage #Branches .myBranche {
        display: inline-grid;
        min-width: 120px;
        max-width: 150px;
        text-align: center;
        margin: 10px;
        text-decoration: none;
    }

        #HomePage #Branches .myBranche .photo {
            border-radius: 10px 10px 10px 10px;
            width: 100%;
            padding: 0px;
        }

        #HomePage #Branches .myBranche .logo {
            border-radius: 0px 0px 0px 0px;
            width: auto;
            max-width: 250px;
            max-height: 90px;
            margin: 0px auto;
            padding: 20px 0px;
        }

        #HomePage #Branches .myBranche .description {
            color: #64748B;
            font-size: 10pt;
            line-height: 10pt;
        }

        #HomePage #Branches .myBranche.ongolog:hover .description {
            color: #01A5AF;
        }

        #HomePage #Branches .myBranche.bellabeauty:hover .description {
            color: #CC9506;
        }

        #HomePage #Branches .myBranche:hover .description {
            color: #3BB272;
        }


#HomePage #News {
    text-align: center;
    padding: 60px 0px 40px 0px;
}

#News-Owl {
}

#HomePage #News #News-Owl {
    text-align: center;
    max-width: 1480px;
    margin: 0px auto;
}

#HomePage #News h2 {
    color: #334155;
    font-size: 24pt;
    font-weight: bold;
}

#HomePage #News #News-Owl .myNews {
    display: inline-grid;
    min-width: 120px;
    max-width: 350px;
    text-align: center;
    margin: 10px;
    text-decoration: none;
}

    #HomePage #News #News-Owl .myNews .photo {
        border-radius: 18px 18px 0px 0px;
        width: 100%;
        padding: 0px;
    }

    #HomePage #News #News-Owl .myNews .title {
        text-align: left;
        font-weight: bold;
        min-height: 40px;
        color: #334155;
        margin: 10px 0px;
        font-size: 12pt;
    }

    #HomePage #News #News-Owl .myNews .description {
        text-align: justify;
        color: #64748B;
        margin: 10px 0px;
        font-size: 12pt;
        min-height: 40px;
    }

    #HomePage #News #News-Owl .myNews .footer {
        font-size: 10pt;
    }

        #HomePage #News #News-Owl .myNews .footer .logo {
            border-radius: 50%;
            width: auto;
            max-height: 45px;
            display: inline-grid;
        }

        #HomePage #News #News-Owl .myNews .footer .name {
            display: inline-grid;
            color: #475569;
            font-weight: bold;
            font-size: 12pt;
            padding: 15px 10px 0px 10px;
        }

        #HomePage #News #News-Owl .myNews .footer .time {
            display: inline-grid;
            color: #94A3B8;
            padding-top: 16px;
        }

    #HomePage #News #News-Owl .myNews .description {
        color: #64748B;
        font-size: 10pt;
        line-height: 10pt;
    }

    #HomePage #News #News-Owl .myNews.ongolog:hover .description {
        color: #01A5AF;
    }


.text-left {
    text-align: left;
}

#HomePage #Jobs {
    padding: 0px 0px;
    text-align: center;
    width: 100%;
}

    #HomePage #Jobs #Info {
        width: 100%;
        display: block;
        vertical-align: top;
    }

    #HomePage #Jobs #JobList {
        width: 100%;
        display: block;
        vertical-align: top;
    }

    #HomePage #Jobs a {
        color: #64748B;
        text-decoration: none;
        display: block;
    }

        #HomePage #Jobs a:hover {
            color: #3BB272;
        }

    #HomePage #Jobs .jobInfo {
        text-align: left;
        display: inline-grid;
        width: 100%;
        max-width: 350px;
        min-height: 250px;
        margin: 5px 0px;
        padding: 30px;
        border: none;
        border-radius: 15px 15px 15px 15px;
        vertical-align: top;
    }

        #HomePage #Jobs .jobInfo .title {
            color: #3BB272;
            font-weight: bold;
            font-size: 24pt;
            padding: 0px;
            margin: 0px;
        }

        #HomePage #Jobs .jobInfo .count {
            font-size: 48pt;
            color: #3BB272;
            font-weight: bold;
            padding: 0px;
            margin: 0px;
        }



    #HomePage #Jobs .jobcard {
        text-align: left;
        vertical-align: top;
        display: inline-grid;
        background-color: #F1F5F9 !important;
        width: 100%;
        max-width: 350px;
        min-height: 300px;
        margin: 5px 0px;
        padding: 30px;
        border: none;
        border-radius: 15px 15px 15px 15px;
    }

        #HomePage #Jobs .jobcard hr {
            border-top: 1px solid #73a0df !important;
            padding: 0px 0px;
            margin: 10px 0px;
        }

        #HomePage #Jobs .jobcard h5 {
            font-weight: bold;
            font-size: 14pt;
            color: #334155;
        }

            #HomePage #Jobs .jobcard h5 .text-muted {
                font-weight: normal;
                font-size: 10pt;
                color: #64748B;
            }

        #HomePage #Jobs .jobcard p {
            font-weight: bold;
            font-size: 12pt;
            color: #334155;
            padding: 0px 0px 0px 0px;
        }

            #HomePage #Jobs .jobcard p .text-muted {
                font-weight: normal;
                font-size: 10pt;
                color: #64748B;
            }

.bg-light {
    background-color: #F1F5F9 !important;
}

.statisticItem {
    -webkit-transition: all 0.3s linear;
    transition: all 0.3s linear;
}

    .statisticItem:hover {
        animation: zoomIn;
    }

    .statisticItem svg .move1 {
        -webkit-animation: scaleIcon 3s infinite linear;
        animation: scaleIcon 3s infinite linear;
    }




@media (min-width: 768px) {
    html {
        font-size: 16px;
    }

    #ContactUs {
        background-color: #F1F5F9 !important;
        border-radius: 50px 50px 0px 0px;
        padding-top: 50px;
    }

    #copyRight {
        width: 100% !important;
        min-height: 74px;
        border-radius: 50px 50px 0px 0px;
        background-color: #0F172A !important;
    }

        #copyRight .copy {
            width: 50% !important;
            display: inline-block;
        }

        #copyRight .menu {
            width: 50% !important;
            display: inline-block;
            text-align: right;
        }

    #ContactUs .mobile, #ContactUs .mobile a {
        font-size: 16pt;
    }

    .container, .container-md, .container-sm, .branchPage #MainSide {
        max-width: 760px;
    }

    #ContactUs .social a img {
        max-width: 24px;
        max-height: 24px;
    }

    #SocialNetwork {
        margin-bottom: 0px;
    }



    #MainSide .description {
        font-size: 26px;
        line-height: 26px;
        text-wrap: inherit;
        width: 70%;
    }

    #MainSide .carousel-caption {
        text-align: left;
        bottom: 10%;
    }

    #HomePage #Statistic .statisticItem {
        display: inline-block;
        min-width: 120px;
    }

    #HomePage #Branches .myBranche {
        display: inline-grid;
        min-width: 150px;
        max-width: 250px;
        text-align: center;
        margin: 10px;
        text-decoration: none;
    }

    #HomePage #Jobs {
        padding: 0px 0px;
        text-align: center;
        width: 100%;
    }

        #HomePage #Jobs .jobInfo, #HomePage #Jobs .jobcard {
            width: 100%;
            max-width: 300px;
            min-height: 300px;
            padding: 30px;
        }

        #HomePage #Jobs #Info {
            width: 100%;
            max-width: 300px;
            display: inline-grid;
            vertical-align: top;
        }

        #HomePage #Jobs #JobList {
            width: 100%;
            max-width: 700px;
            display: inline-grid;
            vertical-align: top;
        }
}

@media (min-width: 1000px) {
    #LandMenu {
        display: block !important;
    }

    header > .navbar > .container {
        flex-wrap: inherit;
    }

    .mobilemenu {
        display: none !important;
    }

    #MobileMenu {
        display: none !important;
    }

    .container, .container-md, .container-sm, .branchPage #MainSide {
        max-width: 960px;
    }

    #ContactUs .mobile, #ContactUs .mobile a {
        font-size: 16pt;
    }

    #ContactUs .social a img {
        max-width: 30px;
        max-height: 30px;
    }

    #MainSide .description {
        font-size: 36px;
        line-height: 36px;
        text-wrap: inherit;
        width: 70%;
    }

    #MainSide .carousel-caption {
        text-align: left;
        bottom: 15%;
    }

    #HomePage #Statistic .statisticItem {
        display: inline-block;
        min-width: 180px;
    }

    #HomePage #Jobs {
        padding: 80px 0px;
        text-align: center;
        width: 100%;
    }

        #HomePage #Jobs .jobInfo, #HomePage #Jobs .jobcard {
            width: 100%;
            max-width: 300px;
            min-height: 300px;
            padding: 30px;
        }

        #HomePage #Jobs #Info {
            width: 30%;
            max-width: 300px;
            display: inline-grid;
            vertical-align: top;
        }

        #HomePage #Jobs #JobList {
            width: 70%;
            max-width: 620px;
            display: inline-grid;
            vertical-align: top;
        }
}

@media (min-width: 1200px) {
    .container, .container-md, .container-sm, .branchPage #MainSide {
        max-width: 1200px;
    }

    #MainSide .description {
        font-size: 46px;
        line-height: 46px;
        text-wrap: inherit;
        width: 70%;
    }

    #MainSide .carousel-caption {
        text-align: left;
        bottom: 20%;
    }

    #HomePage #Statistic .statisticItem {
        display: inline-block;
        min-width: 180px;
    }

    #HomePage #Jobs .jobInfo, #HomePage #Jobs .jobcard {
        width: 100%;
        max-width: 350px;
        min-height: 300px;
        padding: 30px;
    }

    #HomePage #Jobs #Info {
        width: 30%;
        max-width: 350px;
        display: inline-grid;
        vertical-align: top;
    }

    #HomePage #Jobs #JobList {
        width: 70%;
        max-width: 1050px;
        display: inline-grid;
        vertical-align: top;
    }
}

@media (min-width: 1400px) {
    .container, .container-md, .container-sm, .branchPage #MainSide {
        max-width: 1300px;
    }
}

@media (min-width: 1600px) {
    .container, .container-md, .container-sm, .branchPage #MainSide {
        max-width: 1500px;
    }
}

.icon-logo-wens {
    content: url( '/css/icon/wens-logo.svg' );
}

.ongologcamp_small {
    content: url( '/upload/Logo/ongologcamp_small.svg' );
}

.icon-logo-wens-move {
    content: url( '/css/icon/wens-logo.svg' );
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn
}

.icon-people {
    content: url( '/css/icon/people.svg' );
}

.icon-people-move {
    content: url( '/css/icon/people.svg' );
    -webkit-animation: bounce 4s infinite linear;
    animation: bounce 4s infinite linear;
}

.icon-paint {
    content: url( '/css/icon/paint.svg' );
}

.icon-mongol-map {
    content: url( '/css/icon/mongol-map.svg' );
}

.icon-bag {
    content: url( '/css/icon/bag.svg' );
}

.icon-phone {
    content: url( '/css/icon/phone.svg' );
}

.icon-email {
    content: url( '/css/icon/email.svg' );
}

.icon-point {
    content: url( '/css/icon/point.svg' );
}

.icon-ger {
    content: url( '/css/icon/ger.svg' );
}

.icon-house {
    content: url( '/css/icon/house.svg' );
}


.icon-bed {
    content: url( '/css/icon/bed.svg' );
}

.icon-peoples {
    content: url( '/css/icon/peoples.svg' );
}

.icon-size {
    content: url( '/css/icon/size.svg' );
}

.icon-sun {
    content: url( '/css/icon/sun.svg' );
}

.icon-bigbed {
    content: url( '/css/icon/bigbed.svg' );
}

.icon-housesize {
    content: url( '/css/icon/housesize.svg' );
}

.icon-shower {
    content: url( '/css/icon/shower.svg' );
}

.icon-smallbed {
    content: url( '/css/icon/smallbed.svg' );
}

.icon-tv {
    content: url( '/css/icon/tv.svg' );
}

.icon-wifi {
    content: url( '/css/icon/wifi.svg' );
}

.icon-restaurant {
    content: url( '/css/icon/restaurant.svg' );
}

.icon-mobile {
    content: url( '/css/icon/mobile.svg' );
}

.icon-salon {
    content: url( '/css/icon/salon.svg' );
}

.icon-spa {
    content: url( '/css/icon/spa.svg' );
}

.icon-usingsalon30 {
    content: url( '/css/icon/face-30.svg' );
}

.icon-usingsalon20 {
    content: url( '/css/icon/face-20.svg' );
}

.a-link {
    cursor: pointer !important;
}

.socialnetwork img {
    max-width: 20px !important;
    max-height: 20px !important;
}

.socialnetwork .col-sm-auto {
    min-width: 50px;
}


.card {
    display: block;
    margin-bottom: 1.5rem;
    border-color: #edf2f9;
    box-shadow: 0 0.75rem 1.5rem rgba(18,38,63,.03);
}

.card-header {
    padding: 1rem 1.5rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 1px solid #edf2f9;
}

.card-header {
    display: flex;
    flex-direction: row;
    flex-grow: 1;
    align-items: center;
    min-height: 3.75rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

    .card-header:first-child {
        border-radius: calc(0.5rem - 1px) calc(0.5rem - 1px) 0 0;
    }

.text-muted {
    color: #95aac9 !important;
}


.avatar-sm.rounded {
    max-width: 60px;
    width: 100%;
    max-height: 36px;
}

.news-img {
    border-radius: 14px 14px 14px 14px;
    width: 100%;
}

#Contacts .contact {
    color: #334155;
    font-size: 24pt;
    font-weight: bold;
}

#Contacts .description {
    color: #64748B;
}

.myaddress .img {
    border-radius: 14px 14px 14px 14px;
    width: 100%;
}

.myaddress .title {
    color: #475569;
    font-weight: bold;
    font-size: 22px;
    margin: 20px 0px;
}

.myaddress a .address, .myaddress .address {
    color: #64748B;
}

.myaddress a:hover .address {
    color: #3bb272;
}

.myaddress .mobile a {
    color: #334155;
    font-weight: bold;
    font-size: 22px;
}

    .myaddress .mobile a:hover {
        color: #3bb272;
    }

#Achievements {
    padding: 40px 0px;
}

.achievement {
    border: 1px solid #E2E8F0 !important;
    border-radius: 20px 20px 20px 20px;
    width: 100%;
    margin: 20px;
    padding: 20px;
    text-align: center;
    background-color: #fff;
    min-height: 330px;
}

    .achievement img {
        border-radius: 20px 20px 20px 20px;
        width: auto !important;
        height: 140px;
        text-align: center;
        margin: auto;
    }

    .achievement .title {
        margin-top: 10px;
        color: #64748B;
        font-size: 14pt;
    }

    .achievement .description {
        color: #64748B;
        font-size: 11pt;
    }

    .achievement a:hover .title {
        color: #20874f;
    }

#TimeLines {
    padding: 40px 0px;
}

#MyTimeLine {
    margin: 40px auto;
    max-width: 900px;
}

    #MyTimeLine .viewDay {
        font-weight: bold;
        color: #269F5E;
        font-size: 14pt;
    }

    #MyTimeLine .title {
        color: #475569;
        font-weight: bold;
        font-size: 14pt;
    }

    #MyTimeLine .description {
        color: #64748B;
        font-size: 11pt;
        text-align: justify;
    }

.timeline {
    border-left: 1px solid #3BB272;
    position: relative;
    list-style: none;
}

    .timeline .timeline-item {
        position: relative;
    }

        .timeline .timeline-item:after {
            position: absolute;
            display: block;
            top: 4px;
        }

        .timeline .timeline-item:after {
            box-shadow: 0 0 0 3px #3BB272;
            left: -33px;
            background: #fff;
            border-radius: 50%;
            height: 9px;
            width: 9px;
            content: "";
        }


.timeline-item .mytimeline {
    margin: 0px;
}

.timeline-item .timelineday {
    margin: 0px !important;
    padding: 0px 20px 0px 0px;
}

.timeline-item .timelinepost {
    max-width: 400px;
    min-width: 300px;
    padding: 0px;
}

.timeline-item .timelineimage {
    margin: 0px auto;
    max-width: 300px;
}

    .timeline-item .timelineimage img {
        border-radius: 20px 20px 20px 20px;
        max-height: 150px;
        width: auto !important;
    }



@media (min-width: 768px) {
    .timeline .timeline-item:after {
        left: -37px;
    }
}

#SubMenu {
    height: 90px;
}

    #SubMenu .navbar {
        padding-bottom: 0px !important;
    }

    #SubMenu .navbar-brand {
        color: #fff;
        font-size: 22pt;
        font-weight: bold;
        padding-bottom: 0px !important;
        padding-top: 0px !important;
    }

    #SubMenu .navbar-nav {
        padding-bottom: 0px !important;
    }

    #SubMenu .nav-item {
        margin: 0px 10px;
    }

        #SubMenu .nav-item:last-child {
            margin: 0px 0px 0px 10px;
        }

    #SubMenu .nav-link {
        color: #fff;
        padding: 8px 10px;
        border-radius: 30px 30px 30px 30px;
    }

        #SubMenu .nav-link:hover, #SubMenu .nav-link a:hover {
            color: #01a5af;
            background-color: #fff;
            padding: 8px 10px;
            border-radius: 30px 30px 30px 30px;
        }

        #SubMenu .nav-link.active {
            color: #01a5af;
            background-color: #fff;
            padding: 8px 20px;
            border-radius: 30px 30px 30px 30px;
        }

    #SubMenu .breadcrumb {
        margin: 0px 0px 0px 0px;
        padding: 0px calc(var(--bs-gutter-x) * .5);
        color: #334155;
        font-size: 11pt;
    }

        #SubMenu .breadcrumb .breadcrumb-item, #SubMenu .breadcrumb .breadcrumb-item a {
            color: #334155
        }

    #SubMenu .breadcrumb-item + .breadcrumb-item:before {
        color: #334155;
        background: #334155;
    }

    #SubMenu .breadcrumb .breadcrumb-item.active {
        color: #fff;
    }


.branchPage #MainSide {
    width: 100%;
    margin: -28px auto 0px auto;
    border-radius: 24px 24px 24px 24px;
}

    .branchPage #MainSide img {
        border-radius: 30px 30px 30px 30px;
    }

    .branchPage #MainSide .carousel-caption {
        width: 100%;
        bottom: 1px;
        left: 0px;
        border-radius: 0px 0px 30px 30px;
        background-image: linear-gradient(to bottom, rgb(255 255 255 / 0%), rgb(34 34 34 / 50%));
    }

    .branchPage #MainSide .description {
        text-align: center;
        font-size: 18pt;
        font-weight: normal;
        line-height: 18pt;
        text-wrap: inherit;
        width: 100%;
        color: #fff;
    }

.branchPage #Description #BranchLogo {
    margin: auto;
    text-align: center;
}

@media screen and (max-width: 767px) {
    .branchPage #Description #BranchLogo {
        margin: 20px auto 80px;
    }
}

.statisticBranchItem {
    vertical-align: top;
    max-width: 160px !important;
    min-width: 120px !important;
    text-align: center !important;
    font-size: 11pt;
}

    .statisticBranchItem .statisticDescription {
        font-size: 11pt !important;
    }

#Galleries {
    padding: 40px 0px;
}

    #Galleries .title, #Galleries .title a {
        color: #334155;
        font-weight: bold;
    }

        #Galleries .title a:hover {
            color: #3BB272;
        }

#GalleryImages {
    height: 300px;
    margin: 20px auto;
    max-width: 1800px;
    /*    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;*/
}

    /*#GalleryImages::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        background-color: #e3ebf6;
        border-radius: 5px;
    }

    #GalleryImages::-webkit-scrollbar {
        height: 3px;
        background-color: #e3ebf6;
        border-radius: 5px;
    }

    #GalleryImages::-webkit-scrollbar-thumb {
        background-color: #2c7be5;
        border-radius: 5px;
    }*/

    #GalleryImages .gallery {
        display: inline-flex;
        max-width: 180px;
        max-height: 180px;
        margin: 10px;
    }

        #GalleryImages .gallery a {
            width: 100%;
            height: 100%;
        }

        #GalleryImages .gallery img {
            border-radius: 50%;
            max-width: 200px;
            width: 100%;
            max-height: 200px;
            height: 100%;
        }


/*#MyGallery {
    max-width:1800px;
    margin:auto;
    display: -ms-flexbox;*/ /* IE10 */
/*display: flex;
    -ms-flex-wrap: wrap;*/ /* IE10 */
/*flex-wrap: wrap;
    padding: 0 4px;
}*/
#MyGalleries {
    padding: 10px;
    max-width: 1800px;
    margin: 0 auto;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
}

    #MyGalleries .imageGallery.v-stretch {
        grid-column: span 2;
    }

    #MyGalleries .imageGallery.h-stretch {
        grid-row: span 2;
    }

    #MyGalleries .imageGallery.s-stretch {
        grid-row: span 2;
        grid-column: span 2;
    }

    #MyGalleries .imageGallery.n-stretch {
        grid-row: span 1;
        grid-column: span 1;
    }

    #MyGalleries .imageGallery a {
        width: 100%;
        height: 100%;
    }

    #MyGalleries .imageGallery .g-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 5px;
    }

    #MyGalleries .imageGallery .g-title {
        position: relative;
        display: block;
        bottom: 30px;
        width: 100%;
        height: 30px;
        color: #fff;
        background-image: linear-gradient(to bottom, rgb(255 255 255 / 0%), rgb(34 34 34 / 70%));
        border-radius: 0px 0px 5px 5px;
    }

@media screen and (max-width: 400px) {
    #MyGalleries .imageGallery.v-stretch {
        grid-column: span 1;
    }

    #MyGalleries .imageGallery.h-stretch {
        grid-row: span 1;
    }

    #MyGalleries .imageGallery.s-stretch {
        grid-row: span 1;
        grid-column: span 1;
    }

    #MyGalleries .imageGallery.n-stretch {
        grid-row: span 1;
        grid-column: span 1;
    }
}

#Rooms {
    padding: 40px 0px;
}

    #Rooms .btn-secondary, #ServiceCategories .btn-secondary, #ServicesMenu .btn-secondary, #UpdateServiceTypes .btn-secondary {
        background-color: #f1f5f9 !important;
        border-color: #f1f5f9 !important;
        color: #64748B;
        border-radius: 30px !important;
        padding: 5px 15px;
    }

        #Rooms .btn-secondary span {
        }

        #Rooms .btn-secondary:hover, #ServiceCategories .btn-secondary:hover, #ServicesMenu .btn-secondary:hover, #UpdateServiceTypes .btn-secondary:hover {
            background-color: #eff6ff !important;
            border-color: #E2E8F0 !important;
            color: #424f62;
        }
/*#MyGallery .myImageColumn {
    -ms-flex: 16.66666666666667%;*/ /* IE10 */
/*flex: 16.66666666666667%;
    max-width: 16.66666666666667%;
    padding: 0 4px;
}
       
            #MyGallery .myImageColumn .myImage img {
                vertical-align: middle;
                width: 100%;
                border-radius: 5px;
                margin:0px;
                padding:0px;
            }*/

/*@media screen and (max-width: 1200px) {
    #MyGallery .myImageColumn {
        -ms-flex: 25%;
        flex: 25%;
        max-width: 25%;
    }
}


@media screen and (max-width: 800px) {
    #MyGallery .myImageColumn {
        -ms-flex: 50%;
        flex: 50%;
        max-width: 50%;
    }
}*/

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
/*@media screen and (max-width: 600px) {
    #MyGallery .myImageColumn {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%;
    }
}*/


#GalleryImages .slick-slide {
    min-height: 200px;
    max-width: 200px;
}

.slick-slider .slick-slide {
}

.slick-slider .slick-list {
}

.slick-slider img {
    display: inline-block
}

.slick-slider .slick-next:before, .slick-slider .slick-prev:before {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: none;
    font-family: slick;
    font-size: 20px;
    line-height: 1;
    opacity: .75
}

.slick-slider .slick-next, .slick-slider .slick-prev {
    align-items: center;
    background-color: #fff;
    border: 1px solid #94A3B8 !important;
    border-radius: 50%;
    color: var(--fc-gray-500);
    cursor: pointer;
    display: block;
    display: inline-flex;
    flex-shrink: 0;
    font-size: 20px;
    font-size: 24px;
    height: 32px;
    justify-content: center;
    left: 97%;
    padding: 0;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
    transition: .3s ease-in-out;
    width: 32px
}

    .slick-slider .slick-next:hover, .slick-slider .slick-prev:hover {
        background-color: var(--fc-primary);
        border: 1px solid #94A3B8;
        color: var(--fc-white)
    }

@media (max-width:1024px) {
    .slick-slider .slick-next, .slick-slider .slick-prev {
        left: 94%
    }
}

@media (max-width:390px) {
    .slick-slider .slick-next, .slick-slider .slick-prev {
        left: 87%
    }
}

.slick-slider .slick-prev:hover {
    background: var(--fc-primary);
    color: var(--fc-white);
    outline: none
}

.slick-slider .slick-prev:focus {
    display: none
}

.slick-slider .slick-next {
    margin-top: -38px
}

    .slick-slider .slick-next:hover {
        background: var(--fc-primary);
        color: var(--fc-white);
        outline: none
    }

    .slick-slider .slick-next:focus {
        display: none
    }

.slick-slider .slick-prev {
    margin-left: 40px;
    margin-top: -38px
}

.team-slider .slick-next, .team-slider .slick-prev {
    left: 76%;
    top: -34px
}

@media (max-width:1024px) {
    .team-slider .slick-next, .team-slider .slick-prev {
        left: 80%
    }
}

@media (max-width:390px) {
    .team-slider .slick-next, .team-slider .slick-prev {
        left: 87%
    }
}

.slider-arrow {
}

    .slider-arrow .slick-prev {
        margin-right: .25rem
    }

    .slider-arrow .slick-next {
        margin-left: .25rem
    }

    .slider-arrow .slick-next, .slider-arrow .slick-prev {
        align-items: center;
        background-color: #fff;
        border: 1px solid #94A3B8;
        border-radius: 50px;
        color: #94A3B8;
        display: inline-flex;
        flex-shrink: 0;
        font-size: 1.25rem;
        height: 32px;
        justify-content: center;
        left: 0;
        position: relative;
        right: 0;
        top: 0;
        transform: none;
        transition: .3s ease-in-out;
        width: 32px
    }

        .slider-arrow .slick-next:hover, .slider-arrow .slick-prev:hover {
            background-color: var(--fc-primary);
            border-color: var(--fc-primary);
            color: var(--fc-white)
        }

        .slider-arrow .slick-next:before, .slider-arrow .slick-prev:before {
            display: none !important
        }

.slider-nav .slick-prev {
    left: 40px;
    top: 84%;
    z-index: 1
}

.slider-nav .slick-next {
    left: auto;
    right: -10px;
    top: 84%
}

.slider-nav .slick-slide.slick-current img {
    border: 2px solid var(--fc-primary)
}

#Rooms .title, #Rooms .title a {
    font-weight: bold;
    color: #334155 !important;
}

#Rooms .description {
    min-height: 50px;
}

#MyRooms .photo {
    width: 100%;
    border-radius: 18px 18px 0px 0px;
}

#MyRooms .roomSpecification {
    background-color: #f1f5f9 !important;
    border: 1px solid #f1f5f9 !important;
    color: #64748B;
    border-radius: 30px !important;
    padding: 5px 15px;
    display: inline-flex;
}

    #MyRooms .roomSpecification:hover {
        background-color: #eff6ff !important;
        border: 1px solid #E2E8F0 !important;
        color: #424f62;
    }

#MyRooms .roomSpecificationDesc {
    margin: 0px 0px 0px 5px;
}

#MyRooms .price {
    background-color: #01A5AF !important;
    border: 1px solid #01A5AF !important;
    color: #fff;
    font-size: 14pt;
    width: 100%;
    text-align: center;
    vertical-align: middle;
    border-radius: 25px !important;
    padding: 10px 15px;
    margin-top: 10px;
}

    #MyRooms .price .roomSpecificationDesc {
        margin: -2px 0px 0px 5px;
    }

    #MyRooms .price .icon-sun {
        margin: 0px 0px 0px 0px;
    }

#RoomDetail {
    margin-top: 20px;
}

    #RoomDetail #MainImage img {
        width: 100%;
        border-radius: 10px;
    }

    #RoomDetail #SlideImage {
        margin-top: 10px;
    }

        #RoomDetail #SlideImage .gallery {
            display: inline-block;
        }

            #RoomDetail #SlideImage .gallery img {
                width: 160px;
                height: 120px;
                border-radius: 10px;
            }

    #RoomDetail .title {
        margin-top: 10px;
        font-weight: bold;
        color: #334155;
        font-size: 18pt;
    }

    #RoomDetail .description {
        color: #475569;
    }

    #RoomDetail .roomSpecification {
        padding: 5px 15px;
        display: inline-flex;
    }

    #RoomDetail .roomSpecificationDesc {
        margin: 0px 0px 0px 10px;
    }

#RoomSpecifications .title {
    font-size: 12pt;
    font-weight: bold;
}

.roomSpecificationList {
    list-style-type: '✓ ';
    padding-left: 18px;
    columns: 2;
}

#ContactView {
}

    #ContactView img {
        width: 100%;
        border-radius: 10px 10px 0px 0px;
    }

    #ContactView .avatar {
        max-width: 150px !important;
    }

    #ContactView .call {
        padding: 15px;
        background-color: #fff !important;
        border-radius: 0px 0px 25px 25px !important;
        width: 100%;
    }

    #ContactView .contactus {
        list-style: none;
        padding: 0px;
    }

        #ContactView .contactus li {
            margin: 0px 0px 10px 0px;
        }

    #ContactView .price {
        background-color: #01A5AF !important;
        border: 1px solid #01A5AF !important;
        color: #fff;
        font-size: 16pt;
        width: 100%;
        text-align: center;
        vertical-align: middle;
        border-radius: 0px 0px 25px 25px !important;
        padding: 15px 15px 15px 15px;
        margin-top: 0px;
    }

#Restaurant {
    background-color: #01A5AF;
    background-image: url("img/restrant_backround.svg");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #F1F5F9;
    padding: 40px 0px;
    margin-top: 50px;
}

    #Restaurant .title, #Restaurant .title a {
        font-size: 36pt;
        font-weight: bold;
        inline-size: 200px;
        color: #F1F5F9;
    }

        #Restaurant .title a:hover {
            color: #334155;
        }

    #Restaurant .description {
        margin: 20px 0px 30px 0px;
    }

    #Restaurant a {
        color: #334155;
    }

    #Restaurant .statistic {
        font-weight: bold;
        margin: 0px;
    }

    #Restaurant .description-description {
        margin: 0px 0px 30px 0px;
    }

    #Restaurant #RestaurantSide {
        margin: -100px 0px 0px 0px;
        max-height: 600px;
    }

        #Restaurant #RestaurantSide .carousel-item {
            border-radius: 20px;
        }

        #Restaurant #RestaurantSide img {
            max-height: 600px;
            width: auto;
            border-radius: 20px;
        }


@media (max-width:1200px) {
    #Restaurant .container {
        width: 100% !important;
        padding: 0px 50px;
        max-width: 1200px;
    }

    #Restaurant #RestaurantSide {
        margin: 0px 0px 0px 0px;
    }
}

@media (max-width:992px) {
    #Restaurant {
        background-image: url("img/restrant_backround_sm.svg");
    }

        #Restaurant .title {
            text-align: center;
            inline-size: 100%;
            overflow-wrap: break-word;
        }

        #Restaurant #RestaurantSide {
            margin: 20px 0px 0px 0px;
        }
}


#Contact {
    margin: 50px 0px;
}

    #Contact .container {
        max-width: 1300px;
    }

    #Contact .title {
        color: #334155 !important;
    }

    #Contact .locationdesc, #Contact .contactus {
        list-style: none;
        padding: 0px;
    }

        #Contact .locationdesc li, #Contact .contactus li {
            margin: 0px 0px 10px 0px;
        }

    #Contact .c-icon {
        padding-right: 10px;
    }

    #Contact .address {
        text-align: justify;
    }

    #Contact .avatar {
        max-width: 100px;
        width: 100%;
    }

    #Contact .manager {
        font-weight: bold;
        color: #334155 !important;
        margin: 0px;
    }

    #Contact .addressImage, #Contact .addressImage img {
        max-width: 600px;
        border-radius: 0px 20px 20px 0px;
    }

@media (max-width:991px) {
    #Contact .addressImage, #Contact .addressImage img {
        width: 100%;
        max-width: 900px;
        margin: auto;
        border-radius: 0px 0px 20px 20px;
    }

    #Contact .managerimg {
        margin-top: 20px;
        text-align: right;
    }

    #Contact .manager, #Contact .jobtitle {
        text-align: left;
        padding: 0px;
        margin: 0px;
    }
}

@media(max-width:576px) {
    #Contact .managerimg {
        margin-top: 20px;
        text-align: center;
    }

    #Contact .manager, #Contact .jobtitle {
        text-align: center;
        padding: 0px;
        margin: 0px;
    }
}


#MyServices .title, #MyServices .title a {
    font-weight: bold;
    font-size: 15pt;
    color: #334155 !important;
}

#MyServices .description {
    color: #64748B;
    font-size: 12pt;
    min-height: 70px;
    margin: 0px;
}

#MyServices .edit {
    padding: 0px 0px 10px 0px;
    display: block;
    text-align: center;
}

#MyServices .photo {
    width: 100%;
    border-radius: 18px 18px 0px 0px;
    height: 100%;
    max-height: 330px;
}

#MyServices .myServiceCategory {
    background-color: #f1f5f9;
    border-radius: 18px 18px 18px 18px;
}


#Teams {
    padding: 40px 0px;
}

    #Teams .title, #Teams .title a {
        color: #334155;
        font-weight: bold;
    }

        #Teams .title a:hover {
            color: #3BB272;
        }

#MyTeams {
    padding: 10px 20px;
}

.myEmployee img {
    border-radius: 18px 18px 18px 18px;
}

.myEmployee .title {
    margin: 10px 0px 0px 0px;
    color: #334155;
    font-weight: bold;
}

.myEmployee .description {
    margin: 0px;
    color: #64748B;
    font-size: 11pt;
}

#ViewServiceEmployee .photo {
    width: 100%;
    border-radius: 18px 18px 18px 18px;
}

#ViewServiceEmployee .name {
    font-weight: bold;
    font-size: 14pt;
    color: #334155;
}

#ViewServiceEmployee .description {
    font-size: 11pt;
    color: #64748B;
}

#ViewServiceEmployee .listView {
    margin: 20px 0px 0px 0px;
    font-size: 11pt;
    color: #64748B;
}

    #ViewServiceEmployee .listView h5 {
        font-weight: bold;
        font-size: 11pt;
        color: #334155;
    }

    #ViewServiceEmployee .listView ul {
        list-style-type: '• ';
        padding-left: 10px;
    }

    #ViewServiceEmployee .listView #EmployeeService {
        list-style-type: '✓ ' !important;
        padding-left: 18px;
    }

#ViewServiceCategory .photo {
    width: 100%;
    border-radius: 18px 0px 0px 18px;
}

#ViewServiceCategory .categoryName {
    font-weight: bold;
    font-size: 14pt;
    color: #334155;
}

.table-td-p-0 {
    width: 100%;
}

    .table-td-p-0 tr {
        width: auto;
    }

        .table-td-p-0 tr td {
            padding: 0px;
            margin: 3px;
        }

.profiledropzone .dz-default.dz-message {
    height: 100%;
    padding: 50% 1rem;
}

.multi-modal {
    background: rgba(151, 155, 183, 0.42);
    z-index: var(--bs-modal-zindex);
}

#Products, #NewProducts {
    padding: 40px 0px;
}

    #Products .title, #NewProducts .title, padding .title a {
        color: #334155;
        font-weight: bold;
    }

        #Products .title a:hover, #NewProducts .title a:hover {
            color: #3BB272;
        }

    #Products .myproduct {
        margin-bottom: 20px;
    }

        #Products .myproduct .photo {
            border: 1px solid #F1F5F9 !important;
            width: 100%;
            max-height: 250px;
        }

            #Products .myproduct .photo:hover {
                border: 1px solid #e7ebef !important;
            }

        #Products .myproduct .title {
            font-weight: bold;
            padding: 0px;
            margin: 5px 0px;
            font-size: 14pt;
        }

        #Products .myproduct .description {
            margin: 0px;
            color: #94A3B8;
            font-size: 12pt;
        }

        #Products .myproduct .price {
            font-weight: bold;
            padding: 0px;
            margin: 5px 0px;
            font-size: 12pt;
        }

#ProductDetail #MainImage {
    text-align: center;
}

    #ProductDetail #MainImage img {
        text-align: center;
        width: 100%;
        max-width: 600px;
        border-radius: 10px;
    }

#ProductDetail .row {
    margin: 20px auto;
}

#MyNewProducts {
    margin-top: 20px;
    padding: 10px 20px;
}

    #MyNewProducts .mynewproduct {
        background-color: #fff;
        border-radius: 10px;
        display: inline-flex;
    }

        #MyNewProducts .mynewproduct .img {
            display: inline-block;
            vertical-align: middle;
        }

        #MyNewProducts .mynewproduct .desc {
            display: contents;
            height: 100%;
        }

            #MyNewProducts .mynewproduct .desc a {
                margin: auto;
                display: block;
                vertical-align: middle;
            }

        #MyNewProducts .mynewproduct .photo {
            border-radius: 10px;
            background-color: #F1F5F9;
            width: 100%;
            max-height: 250px;
        }

        #MyNewProducts .mynewproduct .title {
            padding: 0px 20px;
            margin: 0px;
            color: #334155;
            font-weight: bold;
            font-size: 14pt;
        }

        #MyNewProducts .mynewproduct .description {
            padding: 20px 20px 0px 20px;
            color: #64748B;
            font-size: 12pt;
        }

#ProductFilter {
    padding: 40px 0px;
}

    #ProductFilter .title {
        color: #334155;
        font-weight: bold;
        font-size: 13pt;
    }

#Brands ul {
    padding: 0px;
    margin: 10px 0px;
}

    #Brands ul li {
        display: inline-flex;
    }

        #Brands ul li img {
            padding: 3px 10px;
            border: 1px solid #F1F5F9 !important;
            width: auto;
            height: 100%;
            max-height: 50px;
            border-radius: 5px;
        }

        #Brands ul li .brandchecked {
            background-color: #F1F5F9;
            border-radius: 5px;
        }

#Brands a {
    cursor: pointer;
}

#Categories ul {
    padding: 0px 20px 0px 0px;
    margin: 0px 0px 0px 0px;
}

    #Categories ul li {
        display: block;
    }

        #Categories ul li label {
            color: #334155;
            font-size: 11pt;
            font-weight: bold;
            padding-left: 10px;
        }

        #Categories ul li .row {
            margin: 0px;
            padding: 0px;
        }

        #Categories ul li .col, #Categories ul li .col-auto {
            margin: 0px;
            padding: 0px;
        }

#ServicesMenu {
    padding: 40px 0px;
}

#MyServices {
    max-width: 1600px;
    margin: auto;
}

    #MyServices .title {
        color: #334155;
        font-weight: bold;
        font-size: 14pt;
    }

    #MyServices .name, #MyServices .price {
        color: #334155;
        font-weight: normal;
        font-size: 12pt;
        margin: 0px;
        font-weight: bold;
    }

    #MyServices .description {
        color: #64748B;
        font-weight: normal;
        font-size: 11pt;
        margin: 10px 0px 0px 0px;
        padding: 0px;
        min-height: auto;
    }

    #MyServices .servicecategory {
        max-width: 600px;
        margin: 20px 10px;
    }


    #MyServices ul {
        padding: 0px;
        margin: 10px 0px;
        border-top: 2px solid #64748B !important;
    }

        #MyServices ul li {
            margin: 0px;
            padding: 20px 0px;
            display: block;
            color: #334155;
            font-size: 11pt;
            border-bottom: 1px solid #CBD5E1 !important;
        }

            #MyServices ul li .row, #MyServices ul li .row .col, #MyServices ul li .row .col-auto {
                padding: 0px;
                margin: 0px;
            }

@media (max-width: 991px) {
    #ViewServiceCategory .photo {
        width: 100%;
        border-radius: 18px 18px 0px 0px;
        padding-bottom: 10px;
    }
}

#PlanDetail td {
    padding: 5px;
}

.serviceType ul li {
    display: block;
    font-size: 11pt;
}

.serviceType .serviceCategoryUl {
    padding: 0px;
    margin: 0px 0px 0px 10px;
    text-align: left;
}

.serviceType .serviceTypeUl li .serviceCategoryUl li {
}

.serviceCategory h5 {
    margin: 0px;
    font-size: 11pt;
}


.planTime h5 {
    margin: 0px;
    padding: 0px;
    font-size: 12pt;
}

.planTime .employee {
    display: inline-flex;
}

.plan-employee-Active {
    border-radius: 50%;
    width: auto;
    max-height: 25px;
    display: inline-grid;
}



.serviceTime {
    padding: 0px;
    margin: 10px 0px;
}

    .serviceTime li {
        display: block;
        margin: 5px 0px;
    }

        .serviceTime li h5 {
            margin: 0px;
        }

.serviceList {
    width: 100%;
    display: inline-block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
}

    .serviceList li {
        margin: 0px 0px;
        padding: 10px 0px 10px 10px;
        border-left: 2px solid #c4c4c5;
    }

        .serviceList li.New {
            border-left: 2px solid #ffd400;
        }

        .serviceList li.Done {
            border-left: 2px solid #3bb272;
        }

        .serviceList li .employeeimg {
            border: 1px solid #f1f5f9 !important;
            max-height: 50px;
            max-width: 50px;
            border-radius: 50%;
            display: inline-flex;
        }

        .serviceList li .serviceDetail {
            display: inline-block;
            vertical-align: middle;
        }

        .serviceList li .serviceButton {
            display: inline-block;
            vertical-align: middle;
        }

            .serviceList li .serviceButton .btn {
                display: inline-block;
                margin: 0px 3px;
                padding: 2px 3px !important;
                line-height: 0px;
            }

                .serviceList li .serviceButton .btn span {
                    width: 16px;
                }

                .serviceList li .serviceButton .btn .fe {
                    font-size: 16px;
                }

        .serviceList li .serviceDetail .costumer {
            margin: 3px 0px 0px 0px;
            display: inline-block;
            vertical-align: middle;
            font-size: 14pt;
            font-weight: bold;
        }

        .serviceList li .serviceDetail .service {
            margin: 0px;
            font-size: 11pt;
            color: #727272;
        }

.employeeList {
    width: 100%;
    display: inline-block;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    list-style: none;
}

    .employeeList li {
        margin: 0px 0px;
        padding: 10px 0px 10px 0px;
        border-bottom: 1px solid #f1f5f9 !important;
    }

        .employeeList li .employeeimg {
            border: 1px solid #f1f5f9 !important;
            max-height: 50px;
            max-width: 50px;
            border-radius: 50%;
            display: inline-flex;
        }

        .employeeList li .employeeDetail {
            display: inline-block;
            vertical-align: middle;
        }

            .employeeList li .employeeDetail h5 {
                font-size: 11pt !important;
                margin: 0px;
            }

            .employeeList li .employeeDetail p {
                font-size: 10pt !important;
                margin: 0px;
            }

.employeeListFlex {
    display: inline-flex;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    list-style: none;
}

    .employeeListFlex li {
        margin: 0px 10px;
        padding: 0px 0px 0px 0px;
    }

        .employeeListFlex li .employeeimg {
            border: 1px solid #f1f5f9 !important;
            max-height: 50px;
            max-width: 50px;
            border-radius: 50%;
            display: inline-flex;
            opacity: 0.6;
        }

.ServiceCategoriesFlex {
    display: inline-flex;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 10px 0px;
    list-style: none;
}

    .ServiceCategoriesFlex li {
        margin: 0px 10px 0px 0px;
        padding: 10px;
        border: 1px solid #d2ddec !important;
        font-size: 11pt;
        font-weight: bold;
        text-align: center;
    }

        .ServiceCategoriesFlex li:hover {
            background-color: #CBD5E1;
            border: 1px solid #a0a8b4 !important;
            cursor: pointer !important;
        }

        .ServiceCategoriesFlex li.selected {
            background-color: #CBD5E1;
            border: 1px solid #a0a8b4 !important;
        }

.serviceEmployee:hover .employeeimg {
    border: 1px solid #95a0ad !important;
    cursor: pointer !important;
    opacity: 1;
}

.serviceEmployee.selected .employeeimg {
    border: 1px solid #95a0ad !important;
    opacity: 1;
}

.serviceTile {
    font-weight: bold;
    font-size: 11pt;
    margin: 10px 0px 5px 0px;
}

.serviceEmployee img {
    max-height: 40px;
    max-width: 40px;
    border-radius: 50%;
}

.form-check-input.day {
    position: inherit !important;
    margin-left: auto !important;
}


.link {
    color: #3BB272 !important;
    text-decoration: none;
    cursor: pointer !important;
}

    .link:hover {
        color: #20874f !important;
    }

.category0 {
    border-radius: 10px 10px 10px 10px !important;
}


.planCreate tr td {
    min-height: 60px;
}
.servicePlanDetail {
    display: block;
    vertical-align: middle;
}

    .servicePlanDetail .servicePlanButton {
        display: inline-block;
        vertical-align: middle;
    }

        .servicePlanDetail .servicePlanButton .btn {
            display: inline-block;
            margin: 0px 3px 3px 3px;
            padding: 2px 3px !important;
            line-height: 0px;
        }

            .servicePlanDetail .servicePlanButton .btn span {
                width: 14px;
            }

            .servicePlanDetail .servicePlanButton .btn .fe {
                font-size: 14px;
            }

    .servicePlanDetail .servicePlanCostumer {
        margin: 3px 0px 0px 0px;
        display: block;
        vertical-align: middle;
        font-size: 11pt;
    }
        .servicePlanDetail .servicePlanCostumer h5 {
            margin: 0px;
            padding:0px;
            font-size: 12pt;
            font-weight: bold;
        }

.employee-small {
    max-height: 40px;
    max-width: 40px;
    border-radius: 50%;
}
.inline-block {
    display: inline-block;
    
}
.contents {
    display: contents;
}
.inline-flex {
    display: inline-flex;
}
.admin {
    display:none;
}

#SpecialFoods {
    max-width: 1480px;
    margin: 0px auto;
}

    #SpecialFoods #SpecialFood-Owl .mySpecialFoods {
        display: inline-grid;
        min-width: 120px;
        max-width: 350px;
        text-align: center;
        margin: 10px;
        
        text-decoration: none;
        background-color: #F1F5F9 !important;
        border-radius: 18px 18px 18px 18px;
    }

        #SpecialFoods #SpecialFood-Owl .mySpecialFoods .photo {
            border-radius: 18px 18px 0px 0px;
            width: 100%;
            padding: 0px;
        }

        #SpecialFoods #SpecialFood-Owl .mySpecialFoods .title {
            text-align: left;
            font-weight: bold;
            color: #334155;
            margin: 10px 10px 5px 10px;
            font-size: 12pt;
        }
        #SpecialFoods #SpecialFood-Owl .mySpecialFoods .price {
            text-align: left;
            font-weight: normal;
            color: #64748B;
            margin: 10px 10px 5px 10px;
            font-size: 11pt;
        }

        #SpecialFoods #SpecialFood-Owl .mySpecialFoods .description {
            text-align: justify;
            color: #64748B;
            margin: 10px 10px;
            font-size: 11pt;
            min-height: 40px;
        }

        #SpecialFoods #SpecialFood-Owl .mySpecialFoods .footer {
            font-size: 10pt;
        }

            #SpecialFoods #SpecialFood-Owl .mySpecialFoods .footer .logo {
                border-radius: 50%;
                width: auto;
                max-height: 45px;
                display: inline-grid;
            }

            #SpecialFoods #SpecialFood-Owl .mySpecialFoods .footer .name {
                display: inline-grid;
                color: #475569;
                font-weight: bold;
                font-size: 12pt;
                padding: 15px 10px 0px 10px;
            }

            #SpecialFoods #SpecialFood-Owl .mySpecialFoods .footer .time {
                display: inline-grid;
                color: #94A3B8;
                padding-top: 16px;
            }

        #SpecialFoods #SpecialFood-Owl .mySpecialFoods .description {
            color: #64748B;
            font-size: 10pt;
            line-height: 10pt;
        }

        #SpecialFoods #SpecialFood-Owl .mySpecialFoods.ongolog:hover .description {
            color: #01A5AF;
        }


#EastVip {
    background-color: #225264;
    background-image: url("img/eastvip_backround.svg");
    /* Full height */
    height: 100%;
    /* Center and scale the image nicely */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #F1F5F9;
    padding: 40px 0px;
    margin-top: 50px;
}

#EastVip .title, #EastVip .title a {
    font-size: 36pt;
    font-weight: bold;
    inline-size: 200px;
    color: #F1F5F9;
}

    #EastVip .title a:hover {
        color: #334155;
    }

#EastVip .description {
    margin: 20px 0px 30px 0px;
}

#EastVip a {
    color: #334155;
}

#EastVip .statistic {
    font-weight: bold;
    margin: 0px;
}

#EastVip .description-description {
    margin: 0px 0px 30px 0px;
}

#EastVip #EastVipSide {
    margin: -100px 0px 0px 0px;
    max-height: 600px;
}

    #EastVip #EastVipSide .carousel-item {
        border-radius: 20px;
    }

    #EastVip #EastVipSide img {
        max-height: 600px;
        width: auto;
        border-radius: 20px;
    }


@media (max-width:1200px) {
    #EastVip .container {
        width: 100% !important;
        padding: 0px 50px;
        max-width: 1200px;
    }

    #EastVip #EastVipSide {
        margin: 0px 0px 0px 0px;
    }
}

@media (max-width:992px) {
    #EastVip {
        background-image: url("img/restrant_backround_sm.svg");
    }

        #EastVip .title {
            text-align: center;
            inline-size: 100%;
            overflow-wrap: break-word;
        }

        #EastVip #EastVipSide {
            margin: 20px 0px 0px 0px;
        }
}