:root {
    --lightCuttySark: #57767e;
    --darkCuttySark: #4d676c;
    --pesto: #627d36;
    --rodeoDust: #cdbb99;
    --regentGray: #88999d;
    --textShadow: 1px 1px 1px black;
    --bgLight1: #adc5cb;
    --quickSand: "Quicksand", sans-serif;
    --bgLinearGlass: linear-gradient(120deg, #88999d, #314955);
}

.linearGlass {
    background: linear-gradient(120deg, #88999d, #6c757d);
}

h1, h2, h3, h4, h5, h6, p, li, a, pre, small, span, label, input, textarea {
    font-family: "Quicksand", sans-serif !important;
}

    input[type=text], input[type=email] {
        font-family: "Quicksand", sans-serif !important;
    }

.input-group input {
    color: black !important;
}

.whiteGlass {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: rgba(0, 0, 0,1) 0px 5px 5px;
}

.darkEmeraldGlass {
    background: rgba(45,84,94, 0.7);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: rgba(0, 0, 0,1) 0px 5px 5px;
}

.emeraldGlass {
    background: rgba(255,255,255, 0.4);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.8px);
    -webkit-backdrop-filter: blur(6.8px);
    border: 1px solid rgba(255, 255, 255, 1);
    box-shadow: rgba(0,0,0,1) 0px 5px 10px;
}

.glass2 {
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 15px rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.glass3 {
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.bootbox .modal-content {
    background: #87949c;
    background: linear-gradient(90deg, rgba(135, 148, 156, 1) 0%, rgba(120, 136, 143, 1) 53%, rgba(100, 123, 135, 1) 100%);
}

.bootbox .modal-header, .bootbox .modal-footer {
    background-color: #334e57 !important;
    border: none !important;
}

    .bootbox .modal-header .modal-title {
        color: ghostwhite !important;
        font-size: clamp(1rem, 1vw, 1.3rem) !important;
        letter-spacing: 1px;
        text-shadow: 2px 2px 1px black
    }

.bootbox .modal-body .bootbox-body {
    color: ghostwhite !important;
    font-size: clamp(1rem, 1vw, 2rem) !important;
    text-shadow: 2px 2px 1px black;
    padding: 32px 0 !important;
    text-align: center !important
}

.bootbox .modal-footer .btn {
    background: var(--pesto) !important;
    border: none !important;
    color: ghostwhite !important;
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
    text-shadow: 1px 1px 1px black;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.8);
    transform: scale(1);
}

    .bootbox .modal-footer .btn:hover {
        transform: scale(1.1);
    }



/*header*/
#preHeader {
    background-color: #161b25;
    min-height: 5vh
}

#navLinkContainer {
    background-color: ghostwhite !important;
}

    #navLinkContainer #mainColConatiner {
        min-height: 8vh
    }

#userInitial {
    background-color: #161b25 !important;
    border-radius: 50% !important
}



#mainColConatiner h2 {
    color: #161b25 !important;
    text-decoration: none !important;
}

#mainColConatiner i {
    color: #161b25 !important
}

#mainColConatiner #bgmenu {
    color: #161b25 !important;
    font-size: 20px !important
}

#chatDropdownMenuLink h6 {
    color: #161b25;
}

.menuPage {
    background-color: rgba(45,84,94,0.8);
}

.menuPageMd h6 {
    color: #161b25 !important
}


.menuPage h5 {
    color: white !important
}

.servLink:hover {
    transform: scale(1.1) !important;
}
/*footer*/
#companyFooterTitleLogo h5 {
    color: white !important;
    font-size: 25px !important;
    font-weight: 400 !important;
}

.companyFooterLogo {
    height: 55px;
    width: 55px;
}

#companyInfo h5 {
    color: wheat !important;
    font-weight: 300 !important;
}

#companyInfo p {
    color: white !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

#companyInfo .mailLink {
    color: white !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    font-family: "Quicksand", sans-serif !important;
}

    #companyInfo .mailLink:hover {
        color: cornflowerblue !important;
    }

#FooterQL h5 {
    color: wheat !important;
    font-weight: 300 !important;
}

#FooterQL a {
    color: white !important;
    font-size: 16px !important;
    font-weight: 300 !important;
}

    #FooterQL a:hover {
        color: #f38f39 !important;
    }

#footerSocmed h5 {
    color: wheat !important;
    font-weight: 300 !important;
}

#footerSocmed i {
    color: white !important;
    font-size: 20px
}

    #footerSocmed i:hover {
        color: #f38f39 !important;
    }

#companyColumnCon {
    height: 7vh;
    background-color: #161b25
}

.hl {
    height: 1px;
    width: 100%;
    background-color: gray;
    margin: 10px 0px;
}

.vl {
    border-left: 0.5px solid gray;
    height: 100% !important;
    position: absolute;
    top: 0;
    left: 0;
}

/*chat*/
.customerLiClass label {
    font-family: "Quicksand", sans-serif !important;
    text-shadow: 1px 1px 1px black;
}

.chatList {
    background-color: var(--regentGray) !important
}

.customerLiClass .dropdown-item:hover {
    background-color: var(--pesto) !important
}

.customerLiClass {
    background-color: var(--darkCuttySark) !important;
    border: none !important;
}

.chatContainerBorder {
    background-color: var(--regentGray) !important
}

    .chatContainerBorder .chatContainerHeader {
        background-color: var(--lightCuttySark) !important
    }

    .chatContainerBorder .card-footer {
        background-color: var(--lightCuttySark) !important
    }

.customerWindow #chatMenu-Hm i {
    color: ghostwhite !important
}

.customerWindow #chatMenuContainer {
    background-color: var(--regentGray) !important;
    border: none !important;
    height: 32px;
    width: auto;
    position: absolute;
    top: -36px;
    right: -5px;
}

.chatIcon {
    color: white !important;
    text-shadow: var(--textShadow);
    font-size: 14px !important;
    margin: 0 4px !important
}

#sendMessageBtn i {
    color: white !important
}

.messageTextContainer a {
    background-color: var(--pesto) !important;
    color: white !important
}

.messageContactName {
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black;
    font-size: clamp(1rem, 1vw, 1.2rem)
}

#chatContainerMinimize {
    width: 330px !important;
    position: fixed !important;
    margin-top: auto !important;
    z-index: 1000 !important;
}

    #chatContainerMinimize .card {
        background-color: var(--regentGray) !important;
        border: none !important;
        box-shadow: rgba(0,0,0, 0.5) 2px 2px 8px;
    }
/*body*/
/*account*/
#loginPage {
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

#loginCard {
    background: rgba(255,255,255, 0.3);
    border-radius: 10px;
    box-shadow: rgba(255,255,255,1) 0px 5px 10px !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

    #loginCard h3 {
        letter-spacing: 3px;
        font-weight: bolder;
        text-shadow: 2px 1px 1px black
    }

    #loginCard .btn {
        background-color: #627d36 !important;
        padding: 7px 35px !important;
        border: none !important;
        border-radius: 50px !important;
        color: white !important;
        letter-spacing: 5px !important;
        box-shadow: rgba(0,0,0,0.8) 0px 4px 8px !important
    }

#loginPage .btn:hover {
    background-color: #e9e5dc !important;
    color: #161b25 !important;
    transform: scale(1.05);
}
/* hero*/
#heroSection {
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/heroSectionBgEmerald.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

    #heroSection h1 {
        font-size: clamp(1.5rem, 3vw, 4rem) !important;
        font-optical-sizing: auto;
        font-style: normal;
        color: ghostwhite !important;
        text-shadow: 3px 3px 1px black;
        line-height: 40px;
    }

    #heroSection p {
        font-family: var(--quickSand);
        font-size: clamp(0.9rem, 1.5vw, 1.2rem) !important;
        color: ghostwhite !important;
        text-shadow: 1px 1px 1px black;
        line-height: 30px;
    }



#smImgContainer img {
    border-radius: 3%;
    z-index: 1000;
    opacity: 1;
    box-shadow: 5px 5px 10px black !important;
}

#xlImgContainer {
    right: 5%;
    width: 650px;
    height: 450px;
}

    #xlImgContainer img {
        border-radius: 3%;
        z-index: 1000;
        opacity: 0.7;
        box-shadow: 5px 5px 10px black !important;
    }

.heroBtnCon a {
    padding: 10px 20px !important;
    border: none;
    border-radius: 10px !important;
    color: ghostwhite;
    font-optical-sizing: auto;
    font-weight: bold;
    font-size: clamp(0.9rem,1vw,1.5rem) !important;
    background: linear-gradient(to left, #627d36 50%, #e9e5dc 50%) right;
    background-size: 300%;
    transition: .8s ease-out;
    box-shadow: rgba(255,255,255,1) 0px 7px 10px;
    text-shadow: 1.5px 1.5px 1.5px black
}

    .heroBtnCon a:hover {
        background-position: left;
        color: var(--darkCuttySark) !important;
        transform: scale(1.2,1.2) !important;
        box-shadow: rgba(0,0,0,1) 0px 7px 10px;
        text-shadow: none
    }

#homeSubContent {
    background-color: #2d545e !important
}

    #homeSubContent h1, h5 {
        color: #12343b !important;
    }

    #homeSubContent .textContainer {
        opacity: 0;
        animation: fade linear forwards 30s;
        animation-timeline: view();
        animation-range: entry 200px;
    }

@keyframes fade {
    to {
        opacity: 1
    }
}

#homeSubContent h1 {
    color: ghostwhite !important;
    font-weight: 300 !important;
}

#homeSubContent h5 {
    color: ghostwhite !important;
}

#heroSection h4 {
    animation: fadeInRight 2s ease-in-out;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(-1000px);
    }

    to {
        opacity: 1;
    }
}

#heroSection h1 {
    animation: fadeIntop 2s ease-in-out;
}

@keyframes fadeIntop {
    from {
        opacity: 0;
        transform: translateY(-200px);
    }

    to {
        opacity: 1;
    }
}

#heroBtnCon {
    animation: fadeInbottom 2s ease-in-out;
}

@keyframes fadeInbottom {
    from {
        opacity: 0;
        transform: translateY(200px);
    }

    to {
        opacity: 1;
    }
}

/*provider*/
#providercard {
    background-color: ghostwhite !important;
    border-radius: 20px !important;
    animation: slideaway ease-in-out 2s;
    animation-iteration-count: 1;
}

@keyframes slideaway {
    from {
        display: none;
        transform: scale(0);
        opacity: 0;
    }

    to {
        display: block;
        transform: scale(1);
        opacity: 1;
    }
}

#providercard img {
    max-height: 40vh;
    border-radius: 18px !important;
}

#providercard h3, span, a {
    color: #161b25 !important;
}

#providercard p {
    color: #161b25 !important;
}

/*story*/
#storyDataCon #storyHeaderCon {
    background-color: white;
    min-height: 7.6vh;
}

#storyHeaderCon h1 span {
    font-family: var(--quickSand) !important;
    font-size: clamp(1.35rem, 3vw, 2.5rem) !important;
    font-weight: 500 !important;
    color: var(--darkCuttySark) !important;
    letter-spacing: 3px !important;
    transform: scaleY(0);
    animation: fadeins linear forwards 20s;
    animation-timeline: view();
    animation-range: entry 200px;
}

@keyframes fadeins {
    to {
        transform: scaleY(1);
    }
}

#storyDataCon .card {
    border-radius: 18px !important;
    background-color: ghostwhite !important;
    box-shadow: rgba(0,0,0,1) 0px 4px 8px;
}


#storyDataCon .storyCardContainer {
    transform: scale(0);
    animation: fadeins linear forwards .30s;
    animation-timeline: view();
    animation-range: entry 100px;
}

@keyframes fadeins {
    to {
        transform: scale(1);
    }
}

.storyCardContainer .card-body {
    background-color: #e9e5dc !important;
}

.storyCardContainer p {
    color: #161b25 !important;
}

.storyCardContainer a {
    background-color: #627d36;
    color: ghostwhite !important;
    padding: 5px 15px !important;
    border-radius: 100px;
    box-shadow: rgba(0,0,0,1) 0px 4px 8px;
}

    .storyCardContainer a:hover {
        background-color: #e9e5dc;
        color: #161b25 !important;
        transform: scale(1.1) !important;
    }

#backgroundhighlight {
    min-height: 30vh !important;
    animation: fadeBG linear forwards 30s;
    animation-timeline: view();
    animation-range: entry 300px;
}

@keyframes fadeBG {
    from {
        background: none;
        opacity: 0;
    }

    to {
        background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
        background-blend-mode: normal;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        background-attachment: fixed;
        opacity: 1;
    }
}

#sectionStoryHeaderContainer h1 {
    color: #12343b;
    font-weight: 300
}

#fiveStoryCol {
    transform: scale(0);
    animation: fadeins linear forwards 20s;
    animation-timeline: view();
    animation-range: entry 250px;
}

@keyframes fadeins {
    to {
        transform: scale(1);
    }
}

/*showcase*/
.diamond {
    position: absolute;
    top: 5px;
    left: -10.5px;
    height: 70px;
    width: 70px;
    background-color: rgba(18,52,59,0.7);
    transform: rotate(-45deg);
    box-shadow: rgba(0,0,0,0.7) 5px 5px 8px inset;
    z-index: -1;
    border-radius: 7px !important
}

#showcaseTextContainer h1 {
    font-family: var(--quickSand);
    font-size: clamp(1.35rem, 3vw, 2.5rem) !important;
    font-weight: 500;
    color: var(--darkCuttySark);
    letter-spacing: 3px !important;
}

#showcaseTextContainer h4 {
    font-family: var(--quickSand);
    font-size: clamp(1rem, 2.5vw, 1.3rem) !important;
    font-weight: 300;
    color: var(--darkCuttySark);
}



#showcaseItemContainer span {
    font-family: var(--quickSand);
    font-weight: 500;
    color: var(--darkCuttySark) !important
}

#showcaseItemContainer p {
    letter-spacing: 1px !important;
    font-size: 17px !important
}

.iconShowcase {
    font-size: 50px !important;
    color: ghostwhite !important;
    z-index: 1000 !important;
    text-shadow: 2px 2px 2px black;
}


/*profiles*/
#providerProfileContainer {
    background-color: rgba(18,52,59,0.5) !important;
}

#profilePreText h2 {
    color: ghostwhite !important;
    font-size: clamp(1.5rem, 2.5vw, 3rem) !important;
    font-weight: 400 !important;
    letter-spacing: 1px !important;
    text-shadow: var(--textShadow);
    opacity: 0;
    animation: fadingText linear forwards 30s;
    animation-timeline: view();
    animation-range: entry 200px;
}

#profilePreText h5 {
    color: ghostwhite !important;
    font-weight: 300;
    font-size: clamp(1rem, 2.0vw, 1.3rem) !important;
    opacity: 1;
    animation: fadingText linear forwards 30s;
    animation-timeline: view();
    animation-range: entry 300px;
    text-shadow: var(--textShadow);
    letter-spacing: 1.2px !important;
    line-height: clamp(1.8rem, 2vw, 3rem) !important
}

@keyframes fadingText {
    to {
        opacity: 1
    }
}

/*services*/
#serviceMainPage {
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

    #serviceMainPage h5, p, pre, small {
        color: #161b25 !important
    }

        #serviceMainPage h5 span {
            font-weight: 400 !important;
        }

    #serviceMainPage .card#mainCard {
        box-shadow: rgba(0,0,0,0.8) 0px 10px 5px
    }

    #serviceMainPage .btn {
        background-color: #627d36 !important;
        border-radius: 50px !important;
        color: white !important;
        font-family: "Quicksand", sans-serif !important;
        padding: 5px 20px !important;
        box-shadow: rgba(0,0,0,0.85) 0px 5px 10px
    }

        #serviceMainPage .btn:hover {
            background-color: #e9e5dc !important;
            color: #161b25 !important;
        }

/*about*/

#aboutMainPage {
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

    #aboutMainPage h3 span {
        font-family: "Quicksand", sans-serif !important;
    }

    #aboutMainPage .btn {
        background-color: #627d36 !important;
        border-radius: 50px !important;
        color: white !important;
        font-family: "Quicksand", sans-serif !important;
        padding: 10px 30px !important;
        box-shadow: rgba(18,52,59,1) 0px 10px 5px
    }

.services-link-btn {
    min-width: 163.125px;
    text-align: center !important;
}

#teamIconContainer {
    background: var(--bgLinearGlass);
    padding: 16px 0 !important;
    border-radius: 1rem;
    box-shadow: 5px 5px 10px #464848
}

    #teamIconContainer i {
        color: ghostwhite !important;
    }

.partnershipCardContainer .card {
    background: var(--bgLinearGlass);
}

.partnershipCardContainer i {
    color: ghostwhite !important;
}

.bgAboutGray {
    background-color: var(--regentGray) !important;
}

    .bgAboutGray p {
        text-shadow: 1px 1px 1px black
    }

.textHeaderAbout {
    font-family: "Quicksand", sans-serif !important;
    text-shadow: 1px 1px 1px black
}

/*newsfeed*/
#newsfeedMainPage {
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.storyBrandCon {
    box-shadow: rgba(0,0,0.1) 0px 5px 10px;
}

    .storyBrandCon .btn {
        background-color: #627d36 !important;
        border-radius: 50px !important;
        color: white !important;
        font-family: "Quicksand", sans-serif !important;
        padding: 5px 20px !important;
        box-shadow: rgba(0,0,0,0.85) 0px 5px 10px
    }

        .storyBrandCon .btn:hover {
            background-color: #e9e5dc !important;
            color: #161b25 !important;
        }

/*orders*/
#orderMainPage {
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

#orderMenuBtn .btn {
    background-color: #627d36 !important;
    border-radius: 50px !important;
    color: white !important;
    font-family: "Quicksand", sans-serif !important;
    padding: 2px 12px !important;
    box-shadow: rgba(0,0,0,0.85) 0px 5px 10px;
    text-shadow: var(--textShadow);
}

    #orderMenuBtn .btn:hover {
        background-color: #e9e5dc !important;
        color: #161b25 !important;
        text-shadow: none;
    }

.badgeStat {
    padding: 4px 6px;
    border-radius: 5px;
    background-color: #12343b !important;
    border: none !important;
}

    .badgeStat.statusActive {
        background-color: white !important;
        border: none !important
    }

.statusActive .badgeText {
    color: black !important;
}


.badgeText {
    font-size: 0.8rem !important;
    color: white !important;
    font-family: "Quicksand", sans-serif !important;
}

#emptyOrderList {
    min-height: 70vh !important;
    background-color: rgba(255, 255, 255, 0.5)
}

#servicesSubCard {
    background: rgba(255,255,255, 0.4);
    box-shadow: rgba(0,0,0,1) 0px 4px 5px
}

#orderListingCard .card {
    min-height: 150px !important;
    background-color: rgba(18,52,59, 0.8) !important;
}

#loadMoreOrdersButton.btn {
    background-color: #627d36 !important;
    border-radius: 50px !important;
    color: white !important;
    font-family: "Quicksand", sans-serif !important;
    padding: 5px 15px !important;
    box-shadow: rgba(0,0,0,0.85) 0px 5px 10px
}

    #loadMoreOrdersButton.btn:hover {
        background-color: #e9e5dc !important;
        color: #161b25 !important;
    }

/*users details*/
#userDetailsPage {
    min-height: 70vh !important;
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.card_ActiveItem {
    color: white !important;
}

#providerCardDetails .btn {
    background-color: #627d36 !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    font-size: 14px !important;
    box-shadow: rgba(0,0,0,0.8) 0px 4px 8px !important;
    text-shadow: var(--textShadow);
}

    #providerCardDetails .btn:hover {
        background-color: #e9e5dc !important;
        color: #161b25 !important;
        transform: scale(1.05);
        text-shadow: none!important;
    }

/*profile view*/
#profileViewPage {
    min-height: 70vh !important;
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

#pv-btnContainer .btn {
    background-color: #627d36 !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    font-size: 14px !important;
    box-shadow: rgba(0,0,0,0.8) 0px 4px 8px !important;
    text-shadow: var(--textShadow);
}

    #pv-btnContainer .btn:hover {
        background-color: #e9e5dc !important;
        color: #161b25 !important;
        transform: scale(1.05);
    }

#profileInfoContainer h4, #profileInfoContainer small,
#profileInfoContainer span {
    text-shadow: var(--textShadow);
}

.rentalItem-toggle {
    color: black !important;
    font-size: 18px !important
}

.fc-prev-button, .fc-next-button {
    background-color: #627d36 !important;
    margin: 0 3px !important;
    color: rgb(255, 255, 255) !important;
    border: none !important;
    text-shadow: var(--textShadow)
}


.fc-todayButton-button, .fc-datePicker-button {
    background-color: #627d36 !important;
    margin: 0 3px !important;
    color: rgb(255, 255, 255) !important;
    border: none !important;
    text-shadow: var(--textShadow)
}

.fc .fc-toolbar.fc-header-toolbar {
    background-color: RGBA(58, 81, 95, 0.8) !important;
}

.fc .fc-day-future {
    background-color: rgba(128, 128, 128,0.5);
}

.fc-day-past {
    background-color: rgba(128, 128, 128,1) !important;
}

.nonWorkingDays {
    background-color: rgba(128, 128, 128,1) !important;
}

.fc-day-today {
    background-color: rgba(98,125,54,1) !important;
}

.hasOrderEvent {
    background-color: rgba(171,219,227,0.5) !important;
}

#service-Input {
    background-color: rgba(0, 0, 0, 0.3);
}

.rightSlideContainer {
    background-color: #80898b !important
}

#orderDatesContainer .card-body {
    background-color: white !important
}

#ServiceRequestCardMainBody {
    z-index: 100 !important
}

#ServiceRequestCardBody {
    min-height: 735px !important
}

#orderDetailsCardBody {
    min-height: 661px !important
}



/*participant SitePage*/
#participantSitePage {
    min-height: 70vh !important;
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

#participantBtnContainer .btn {
    background-color: #627d36 !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    font-size: 14px !important;
    box-shadow: rgba(0,0,0,0.8) 0px 4px 8px !important;
    text-shadow:var(--textShadow);
}

    #participantBtnContainer .btn:hover {
        background-color: #e9e5dc !important;
        transform: scale(1.08) !important;
        color: black !important;
        text-shadow: none;
    }

#totalVotes {
    text-shadow: var(--textShadow);
}

#btnVoteNow {
    background-color: #627d36 !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    font-size: 15px !important;
    box-shadow: rgba(0,0,0,0.8) 0px 4px 8px !important;
    text-shadow: var(--textShadow);
}

#btnVoteNow:hover {
    background-color: #e9e5dc !important;
    transform: scale(1.2) !important;
    color: black !important;
    text-shadow: none;
}

#ltiBtnVoteTxt:hover {
    color: black !important;
}

#btnAddGalleryImage, .saveSiteProfile, .cancelEditSiteProfile {
    background-color: #627d36 !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    font-size: 14px !important;
    box-shadow: rgba(0,0,0,0.8) 0px 4px 8px !important
}

    #btnAddGalleryImage:hover, .saveSiteProfile:hover, .cancelEditSiteProfile:hover {
        background-color: #e9e5dc !important;
        transform: scale(1.05);
        color: black !important;
    }

.svRibbon {
    background-color: #53656e;
    left: 0px;
}

    .svRibbon::before {
        background-color: #53656e;
    }

    .svRibbon::after {
        background-color: black;
    }

.itemCountLabel {
    background-color: #e9e5dc !important;
    color: black !important;
    font-size: 13px !important
}

.selectImgBtn {
    background-color: #627d36 !important;
    border: none !important;
}

/*one day event page*/
#oneDayEventPage {
    min-height: 70vh !important;
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.emptyCardHeaderCon {
    height: 5vh !important
}

#emeraldSignupPage .terms-header {
    color: dimgrey !important;
}

#emeraldSignupPage .terms-content {
    color: dimgrey !important;
    line-height: 1.5 !important;
}

    #emeraldSignupPage .terms-content b {
        color: dimgrey !important;
    }

    #emeraldSignupPage .terms-content span {
        color: dimgrey !important;
    }

#signUpForm .terms-header {
    color: dimgrey !important;
}

#signUpForm .terms-content {
    color: dimgrey !important;
    line-height: 1.5 !important;
}

    #signUpForm .terms-content b {
        color: dimgrey !important;
    }

    #signUpForm .terms-content span {
        color: dimgrey !important;
    }

#policyStyle p {
    color: white !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: calc(13px + .13vw) !important;
    line-height: 2 !important;
}

#policyStyle b, span {
    color: white !important;
}

.xdsoft_label span {
    color: black !important
}

#policyStyle strong {
    font-family: "Quicksand", sans-serif !important;
    font-size: calc(13px + 0.13vw) !important;
    line-height: 30px !important;
}

#policyStyle ul li {
    color: white !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: calc(13px + 0.13vw) !important;
    line-height: 30px !important;
}

#policyStyle .heading1 {
    color: white !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: calc(19px + 0.15vw) !important;
    font-weight: 500 !important;
}

#policyStyle .heading2 {
    color: white !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: calc(16px + 0.15vw) !important;
    font-weight: 500 !important;
}

#policyStyle .heading3 {
    color: white !important;
    font-family: "Quicksand", sans-serif !important;
    font-size: calc(14px + 0.15vw) !important;
    font-weight: 500 !important;
}

#policyStyle a {
    color: deepskyblue !important;
}

.servicePriceRibbon {
    background-color: #627d36;
}

    .servicePriceRibbon::before {
        background-color: #627d36 !important;
    }

    .servicePriceRibbon::after {
        background-color: #313f1b !important;
    }

.newMessageBadge {
    background-color: red !important;
    top: 7px !important;
    left: 4px !important;
    height: 14px !important;
    width: 14px !important;
}

.navContainer #userInitial a {
    background-color: #627d36 !important;
}

.navContainer #initialName {
    color: whitesmoke !important;
    font-size: 12px !important
}

.navContainer #userInitial a:hover {
    background-color: #d3b894 !important;
}

.navContainer #initialName:hover {
    color: black !important;
}


.imgLogoContainer {
    width: 30px;
    height: 30px;
    margin-bottom: 2px !important;
}

#modalRequestCode .modal-header, #modalRequestCode .card-footer {
    background-color: var(--darkCuttySark) !important
}

#modalOneTimeSignup .modal-header, #modalOneTimeSignup .card-footer {
    background-color: var(--darkCuttySark) !important
}

.input-group .biEye, .input-group .biEyeSlash {
    background-color: var(--darkCuttySark) !important
}

.eulaCardArrow .bi-arrow-down-circle-fill {
    color: var(--darkCuttySark) !important
}

#acceptCheckBox {
    background-color: var(--darkCuttySark) !important
}


#emeraldError404Page {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

#userPasswordResetMdl .modal-header, #userPasswordResetMdl .modal-footer {
    background-color: var(--lightCuttySark) !important
}

.fc .fc-toolbar-title {
    color: ghostwhite !important;
    text-shadow: var(--textShadow);
    font-size: clamp(1rem, 1.5vw, 1.5rem) !important;
    font-family: var(--quickSand) !important;
}

.fc-daygrid-day-number {
    color: ghostwhite !important;
    text-shadow: var(--textShadow) !important;
    font-size: clamp(0.7rem, 1vw, 1rem) !important;
    font-family: var(--quickSand) !important;
}

#serviceCardHeader {
    background-color: #334e57 !important;
}

#emeraldTermsPage .terms-header, .terms-content {
    color: white !important;
}

    #emeraldTermsPage .terms-content b, .terms-content span {
        color: #db8f3f !important;
    }



.bgGreenBtn {
    background-color: #627d36 !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    font-size: 13px !important;
    box-shadow: rgba(0,0,0,0.8) 0px 4px 8px !important;
    text-shadow: var(--textShadow);
}

    .bgGreenBtn:hover {
        background-color: #e9e5dc !important;
        color: #161b25 !important;
        transform: scale(1.05);
        text-shadow: none;
    }

#cropModal .modal-content {
    height: 645px;
}

.cropper-wrapper {
    width: 100%;
    height: 500px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}

    .cropper-wrapper img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

.cropper-crop-box .cropper-line.line-n,
.cropper-crop-box .cropper-line.line-s {
    background-color: #0066cc !important;
    height: 8px !important;
}

.cropper-crop-box .cropper-line.line-e,
.cropper-crop-box .cropper-line.line-w {
    background-color: #0066cc !important;
    width: 8px !important;
}

.cropper-crop-box .cropper-point {
    width: 13px !important;
    height: 13px !important;
    background-color: #0066cc !important;
}

.cropper-line, .cropper-point {
    opacity: .5 !important;
}

.cropper-face {
    opacity: .0 !important;
}

.fs-12 {
    font-size: 12px !important
}

.img-preview {
    cursor: pointer;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    height: auto;
    width: auto;
}

.mainNewsFeed-wrapper {
    overflow: hidden !important;
}

.mainNewsFeed-floatContainer {
    display: block !important;
    overflow: hidden !important;
}

.mainNewsFeed-textContainer {
    display: block !important;
}

@media (max-width: 768px) {

    .mainNewsFeed-textContainer {
        display: block !important;
    }
}

.mainNewsFeedContent * {
    color: rgba(var 33, 37, 41 (--bs-dark-rgb), var(--bs-text-opacity));
    margin-bottom: unset;
    font-family: "Quicksand", sans-serif !important;
    font-size: calc(12px + .12vw) !important;
}

#threeImgGalleryDesc {
    height: 120px !important;
    overflow-y: hidden !important;
}

.textValidation span {
    color: wheat !important;
    font-size: 0.8rem;
    text-shadow: var(--textShadow)
}

.mainNewsFeed-floatContainer #topStoryHr {
    display: block;
    border: none;
    height: 1px !important;
    background-color: #333;
    width: 100%;
    margin: 16px 0 16px 0px !important;
}

.subNewsFeedItemExtended #topStoryHr {
    display: block;
    border: none;
    height: 1px !important;
    background-color: #333;
    margin: 16px 0 16px 0 !important;
}

.selectedRentalItem {
    font-size: 16px !important;
}

.transactionDetailsRow p {
    color: black !important;
}

.paymentDialogText {
    color: white !important;
}

.transactionDetails p {
    color: white !important;
}

.daySelection label {
    text-shadow: none !important
}

.orderDetailsContainer .bi-question-circle-fill {
    color: white!important;
}
/*home story slider*/
#fiveStoryCol .lSPager.lSpg {
    display: none !important
}

#fiveStoryCol .lSAction > a {
    opacity: 1 !important
}

#fiveStoryCol .lSAction > a {
    opacity: 1 !important
}

#fiveStoryCol .lSAction > .lSPrev {
    left: 35px !important
}

#fiveStoryCol .lSAction > .lSNext {
    right: 35px !important
}

#fiveStoryRow.lightSlider {
    height: 100% !important;
}

/*home profile */
.indexProfileCard .card {
    background-color: var(--bgLight1) !important;
    box-shadow: 3px 3px 15px black;
    border-radius: 10px
}

.indexProfileCard .card-body {
    background-color: var(--darkCuttySark) !important;
    border-radius: 10px;
}

.indexProfileCard h5 {
    font-size: clamp(1.2rem, 2vw, 1.5rem) !important;
    color: ghostwhite !important;
    text-shadow: var(--textShadow)
}

.indexProfileCard p {
    color: ghostwhite !important;
    text-shadow: var(--textShadow);
}

.indexProfileCard .profileCardAdditionalInfo {
    font-size: clamp(0.9rem, 2vw, 1.05rem) !important;
}

.indexProfileCard .profileCardDescription p {
    margin-bottom: 0 !important;
}

.indexProfileCard a {
    background-color: #627d36;
    color: ghostwhite !important;
    text-shadow: var(--textShadow);
    padding: 5px 15px !important;
    border-radius: 100px;
    box-shadow: rgba(0,0,0,1) 0px 4px 8px;
}

    .indexProfileCard a:hover {
        background-color: #e9e5dc;
        color: #161b25 !important;
        transform: scale(1.1) !important;
        text-shadow: none;
    }

.indexProfileCard img {
    border-radius: 10px;
    box-shadow: 1px 1px 3px gray,-1px -1px 3px gray
}

/*service section*/
.serviceImgWrapper p {
    margin-bottom: 0 !important;
    color: white !important;
}

.emeraldSliderContainer .lSPrev {
    left: 25px !important
}

.emeraldSliderContainer .lSNext {
    right: 25px !important
}


/*about Section*/
.aboutContent h3 span, .aboutContent h5 {
    text-shadow: 1px 1px 1px black;
}

.aboutMeet h3 span, .aboutMeet h6, .aboutMeet h5 {
    text-shadow: 1px 1px 1px black;
}

.aboutMeet .imgTeamIcon {
    text-shadow: 1px 1px 1px black;
}

.aboutPartnership h3 span, .aboutPartnership h6, .aboutPartnership h5, .aboutPartnership p, .aboutPartnership .iPartnershipIcon {
    text-shadow: 1px 1px 1px black !important;
}

.aboutContactUs h3 span, .aboutContactUs h6, .aboutContactUs h5 {
    text-shadow: 1px 1px 1px black;
}

.membersColumn p {
    text-shadow: 1px 1px 1px black !important;
}
/*contact section*/
#contactMainPage {
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

#contactMainCol {
    margin: 2rem 0;
}

#contactMainPage h2 span {
    color: white !important;
    font-weight: 300 !important;
    text-shadow: var(--textShadow)
}

#contactMainPage #contactImgColumn {
    background: #12343b !important;
}

#contactMainPage imgContactLayout {
    opacity: 1 !important
}

#contactUsInfo p {
    text-shadow: var(--textShadow);
}

#contactMainPage .btn {
    background-color: #627d36 !important;
    border-radius: 50px !important;
    color: white !important;
    font-family: "Quicksand", sans-serif !important;
    padding: 5px 15px !important;
    box-shadow: rgba(18,52,59,1) 0px 10px 5px;
    text-shadow: var(--textShadow);
}

    #contactMainPage .btn:hover {
        background-color: #e9e5dc !important;
        color: #161b25 !important;
        text-shadow: none;
    }

#contactMainPage .selectImgBtn {
    background-color: #627d36 !important;
    border: 1px solid #627d36 !important
}

    #contactMainPage .selectImgBtn:hover {
        background-color: #7eb622 !important;
        border: 1px solid #7eb622 !important;
    }


#contact-form h5, #contact-form label, #contact-form p {
    text-shadow: var(--textShadow)
}

/*account section*/
.logLink a, .socialContainer p,
.socialContainer .bi-google,
#emeraldSignupPage h5, #emeraldForgotPage h5,
#emeraldProviderAccountConfirmationPage h5,
#emeraldResetConfirmationPage h5, #emeraldResetPage h4,
#emeraldVerifyPage h5 {
    text-shadow: var(--textShadow);
}


#emeraldSignupResponsePage h6,
#emeraldForgotResponsePage h6,
#emeraldResetConfirmationResponsePage h6,
#emeraldResetPage h6,
#emeraldProviderAccountConfirmationPage h6 {
    text-shadow: var(--textShadow);
    font-size: clamp(1rem, 1vw, 1.8rem) !important;
    line-height: 25px !important
}


#emeraldSignupPage {
    background-color: var(--lightCuttySark) !important
}

    #emeraldSignupPage .card-header, #emeraldSignupPage .card-footer {
        background-color: var(--darkCuttySark);
    }

    #emeraldSignupPage label, #emeraldSignupPage h6, #emeraldSignupPage p {
        color: dimgrey !important;
    }

    #emeraldSignupPage .textValidation span {
        color: red !important;
        text-shadow: none !important
    }

.emeraldBtn {
    background-color: rgba(98, 125, 54, 1) !important;
    border-radius: 100px;
    color: white !important;
    box-shadow: rgba(255,255,255,0.5) 0px 2px 5px;
    margin: 0 2px;
    text-shadow: 1px 1px 1px black
}

    .emeraldBtn:hover {
        background-color: rgba(233, 229, 220, 1) !important;
        color: black !important;
        box-shadow: rgba(0,0,0,1) 0px 1px 2px;
        text-shadow: none;
        transform: scale(1.1)
    }

#emeraldSignupPage .bi-arrow-down-circle-fill {
    color: var(--darkCuttySark) !important
}

#emeraldSignupPage #acceptCheckBox1:hover {
    background-color: var(--darkCuttySark) !important;
    border: none !important
}

#emeraldSignupPage #acceptCheckBox1:checked {
    background-color: var(--darkCuttySark) !important;
    border: none !important
}

#emeraldForgotPage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

    #emeraldForgotPage .card {
        box-shadow: rgba(0,0,0,0.4) 2px 2px 8px;
    }

    #emeraldForgotPage .card-header, #emeraldForgotPage .card-footer {
        background-color: var(--darkCuttySark)
    }

#emeraldConfirmPage {
    background-color: var(--lightCuttySark);
}

    #emeraldConfirmPage h6 {
        color: ghostwhite;
        text-shadow: var(--textShadow);
        font-size: clamp(1rem, 1vw, 1.8rem) !important;
        line-height: 25px !important
    }

    #emeraldConfirmPage .card {
        box-shadow: rgba(0,0,0,0.4) 2px 2px 8px;
    }

    #emeraldConfirmPage .loginlink {
        background-color: var(--pesto);
        border: none;
        box-shadow: rgba(0,0,0,0.4) 2px 2px 5px;
    }

        #emeraldConfirmPage .loginlink:hover {
            background-color: var(--rodeoDust);
            box-shadow: rgba(0,0,0,0.4) 2px 2px 5px;
        }

    #emeraldConfirmPage .card-header, #emeraldConfirmPage .card-footer {
        background-color: var(--darkCuttySark)
    }

    #emeraldConfirmPage .bi-question-circle-fill {
        color: var(--darkCuttySark) !important
    }

    #emeraldConfirmPage .biEye {
        background-color: var(--darkCuttySark) !important
    }

#emeraldForgotResponsePage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

#emeraldProviderAccountConfirmationPage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

    #emeraldProviderAccountConfirmationPage .card-header, #emeraldProviderAccountConfirmationPage .card-footer {
        background-color: var(--darkCuttySark)
    }

    #emeraldProviderAccountConfirmationPage .biEye {
        background-color: var(--darkCuttySark) !important
    }

    #emeraldProviderAccountConfirmationPage .link-primary {
        background-color: var(--pesto);
        border: none;
        box-shadow: rgba(0,0,0,0.4) 2px 2px 5px;
        border-radius: 100px;
        padding: 3px 10px;
        margin: 0 3px
    }

        #emeraldProviderAccountConfirmationPage .link-primary:hover {
            background-color: var(--rodeoDust);
            box-shadow: rgba(0,0,0,0.4) 2px 2px 5px;
        }

#emeraldResetPage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

    #emeraldResetPage h6 {
        color: ghostwhite;
        text-shadow: var(--textShadow);
        line-height: 25px;
        font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important
    }

    #emeraldResetPage .card {
        box-shadow: rgba(0,0,0,0.4) 2px 2px 8px;
    }

    #emeraldResetPage .loginlink {
        background-color: var(--pesto);
        border: none;
        box-shadow: rgba(0,0,0,0.4) 2px 2px 5px;
    }

        #emeraldResetPage .loginlink:hover {
            background-color: var(--rodeoDust);
            box-shadow: rgba(0,0,0,0.4) 2px 2px 5px;
        }

    #emeraldResetPage .card-header, #emeraldResetPage .card-footer {
        background-color: var(--darkCuttySark)
    }

    #emeraldResetPage .bi-question-circle-fill {
        color: var(--darkCuttySark) !important
    }

    #emeraldResetPage .biEye {
        background-color: var(--darkCuttySark) !important
    }

#emeraldResetConfirmationPage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

    #emeraldResetConfirmationPage .card-header, #emeraldResetConfirmationPage .card-footer {
        background-color: var(--darkCuttySark)
    }

#emeraldResetConfirmationResponsePage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

#emeraldSignupResponsePage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

#emeraldVerifyPage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

    #emeraldVerifyPage .card-header, #emeraldVerifyPage .card-footer {
        background-color: var(--darkCuttySark)
    }

    #emeraldVerifyPage .card {
        box-shadow: rgba(0,0,0,0.4) 2px 2px 8px;
    }

#tLoginPage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

#tLoginCard {
    background: rgba(255,255,255, 0.3);
    border-radius: 10px;
    box-shadow: rgba(255,255,255,1) 0px 5px 10px !important;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.8);
}

    #tLoginCard h3 {
        letter-spacing: 3px;
        font-weight: bolder;
        text-shadow: 2px 1px 1px black
    }

    #tLoginCard .btn {
        background-color: #627d36 !important;
        padding: 7px 35px !important;
        border: none !important;
        border-radius: 50px !important;
        color: white !important;
        letter-spacing: 5px !important;
        box-shadow: rgba(0,0,0,0.8) 0px 4px 8px !important
    }

        #tLoginCard .btn:hover {
            background-color: #e9e5dc !important;
            color: #161b25 !important;
            transform: scale(1.05);
        }

    #tLoginCard .pwLogin {
        background-color: var(--darkCuttySark) !important
    }

#emeraldError401Page {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

#emeraldPrivacyPage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

#emeraldTermsPage {
    background-color: var(--lightCuttySark);
    min-height: 60.6vh;
}

/*order section*/
#customerOrderMainPage {
    min-height: 70vh !important;
    background: linear-gradient(rgba( 45,84,94, 0.8)), url("/themeimage/Emerald/mideast8.jpg");
    background-blend-mode: normal;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}

.emeraldOrderMainCard .card-header, .emeraldOrderMainCard .card-footer {
    background-color: #2c4d55;
}

.darkEmeraldGlass .card-header {
    background-color: #748c92 !important;
}

.emeraldOrderMainCard h5 {
    text-shadow: var(--textShadow);
}

.emeraldOrderMainCard h6 {
    text-shadow: var(--textShadow);
}

.emeraldOrderMainCard p {
    text-shadow: var(--textShadow);
    font-weight: 300 !important;
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
}

.emeraldOrderMainCard .text-cancellation {
    color: #fff447 !important
}

.emeraldOrderMainCard .badge {
    color: white !important;
    font-weight: 300 !important;
    text-shadow: var(--textShadow);
    padding: 5px 5px;
}

#orderExportBtn .btn {
    background-color: #627d36 !important;
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    font-size: 13px !important;
    box-shadow: rgba(0,0,0,0.8) 0px 2px 4px !important;
    text-shadow: var(--textShadow);
}

    #orderExportBtn .btn:hover {
        background-color: #e9e5dc !important;
        color: #161b25 !important;
        transform: scale(1.05);
        text-shadow: none;
    }


#btnRequestCancel {
    background-color: darkred !important;
}

.buttonOngoing {
    background-color: yellowgreen !important;
}

#viewEditBtn {
    background-color: skyblue !important;
}

#backToOrdersBtn {
    background-color: grey !important;
}

#viewBtn {
    background-color: skyblue !important;
}

.buttonCompleted {
    background-color: darkgreen !important;
}

#participantSiteBtn {
    background-color: #627d36 !important;
}

.buttonReview {
    background-color: mediumpurple !important;
}

.buttonApproved {
    background-color: dodgerblue !important;
}

.buttonNotApproved {
    background-color: orange !important;
}

#paymentBtn {
    background-color: midnightblue !important;
}

#refundBtn {
    background-color: royalblue !important;
}

.buttonCancelled {
    background-color: darkred !important;
}

.btnRejectConfirmCancel {
    background-color: darkred !important;
}

#orderBtnContainer .btn {
    border: none !important;
    border-radius: 50px !important;
    color: white !important;
    font-size: 12px !important;
    padding: 5px 10px;
    margin: 4px 0 !important;
    text-shadow: 1px 1px 1px black;
    font-family: var(--quickSand);
}

    #orderBtnContainer .btn:hover {
        background-color: #e9e5dc !important;
        transform: scale(1.08) !important;
        color: black !important;
        text-shadow: none;
    }

#orderBtnContainer #backToOrdersBtn, #orderBtnContainer #viewEditBtn {
    padding: 4px 10px !important;
}

#viewEditBtn span:hover {
    color: black !important
}

#orderPaymentList.dataTable thead th {
    background: rgba(45,84,94, 0.7) !important;
    color: white !important;
    text-shadow: var(--textShadow);
}

#orderPaymentList.dataTable tbody td {
    background: rgba(45,84,94, 0.7) !important;
    color: white !important;
    text-shadow: var(--textShadow);
}

.mailtolink:hover {
    color: #fff447 !important
}

.serviceCard p, .serviceCard small {
    text-shadow: var(--textShadow);
}

#subTemplate .badge {
    text-shadow: var(--textShadow);
}

#filterModal .modal-header, #filterModal .modal-footer,
#exportModal .modal-header, #exportModal .modal-footer,
#paymentModal .modal-header, #paymentModal .modal-footer,
#cancelReasonModal .modal-header, #cancelReasonModal .modal-footer,
#modalOrders .modal-header, #modalOrders .modal-footer,
#serviceInfoList .modal-header, #serviceInfoList .modal-footer,
#modalRequestCode .modal-header, #modalRequestCode .modal-footer,
#enableOtpConfirmModal .modal-header, #enableOtpConfirmModal .modal-footer,
#disableOtpConfirmModal .modal-header, #disableOtpConfirmModal .modal-footer,
#directionModal .modal-header, #directionModal .modal-footer,
#userPasswordResetMdl .modal-header, #userPasswordResetMdl .modal-footer,
#modalChatGroupMembers .modal-header, #modalChatGroupMembers .modal-footer,
#galleryImageModal .modal-header, #galleryImageModal .modal-footer,
#cropModal .modal-header, #cropModal .modal-footer {
    background-color: #334e57 !important;
}

#filterModal .modal-body, #exportModal .modal-body,
#paymentModal .modal-body, #cancelReasonModal .modal-body,
#modalOrders .modal-body, #serviceInfoList .modal-body,
#modalRequestCode .modal-body, #enableOtpConfirmModal .modal-body,
#disableOtpConfirmModal .modal-body, #directionModal .modal-body,
#userPasswordResetMdl .modal-body, #modalChatGroupMembers .modal-body,
#galleryImageModal .modal-body, #cropModal .modal-body {
    background: #87949c;
    background: linear-gradient(90deg, rgba(135, 148, 156, 1) 0%, rgba(120, 136, 143, 1) 53%, rgba(100, 123, 135, 1) 100%);
}

#filterModal h5, #filterModal label,
#exportModal h5, #exportModal label,
#paymentModal h5, #paymentModal label,
#cancelReasonModal h5, #cancelReasonModal label,
#cancelReasonModal p, #cancelReasonModal small,
.fileExport span, .swiperItem .badge,
#serviceInfoList h5, #modalRequestCode h5,
#enableOtpConfirmModal h5, #disableOtpConfirmModal h5,
#modalOrders h5, #directionModal h5, #userPasswordResetMdl h5,
#userPasswordResetMdl h6, #galleryImageModal h5, #cropModal h5, #cropModal p {
    text-shadow: var(--textShadow);
}

#enableOtpConfirmModal span, #enableOtpConfirmModal label,
#disableOtpConfirmModal p, #galleryImageModal label {
    text-shadow: var(--textShadow);
}

#userSelection span {
    font-size: clamp(0.9rem, 1vw, 1rem) !important;
    text-shadow: var(--textShadow);
}

#userSchedule h5 {
    font-size: clamp(1.1rem, 1vw, 1.25rem) !important;
    text-shadow: var(--textShadow);
}

.emeraldOrderItemContainer .orderPriceRibbon {
    position: absolute;
    left: -6px;
    top: 7px;
    z-index: 1;
    width: auto;
    height: 25px;
    padding: 0px 10px;
    text-align: right;
    background-color: #47636a;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border-bottom-left-radius: 0px;
    text-shadow: var(--textShadow);
}

    .emeraldOrderItemContainer .orderPriceRibbon::before, .emeraldOrderItemContainer .orderPriceRibbon::after {
        content: "";
        position: absolute;
        top: 25px;
        left: 0px;
        width: 6px;
        height: 10px;
        border-bottom-left-radius: 7px
    }

    .emeraldOrderItemContainer .orderPriceRibbon::before {
        background-color: #47636a;
        text-shadow: var(--textShadow);
    }

    .emeraldOrderItemContainer .orderPriceRibbon::after {
        background-color: black;
        text-shadow: var(--textShadow);
        border-top-left-radius: 7px;
    }

#rentalMainCard .card-header, #memberMainCard .card-header {
    background-color: #334e57 !important;
    text-shadow: var(--textShadow);
}

#rentalMainCard .card-body, #memberMainCard .card-body {
    background: #87949c;
    background: linear-gradient(90deg, rgba(135, 148, 156, 0.0.4) 0%, rgba(120, 136, 143, 0.6) 53%, rgba(100, 123, 135, 0.8) 100%);
    text-shadow: var(--textShadow);
}

#rentalMainCard p, #rentalMainCard i {
    color: ghostwhite !important;
}

.selectedRentalItemContainer .card-footer, #selectedMemberContainer .card-footer {
    background-color: #57767e !important;
    text-shadow: var(--textShadow);
}

#serviceRequestCalendar {
    box-shadow: rgba(0, 0, 0, 1) 0 5px 10px;
}

#orderDetailsCardBody label, #serviceCardHeader h6 {
    text-shadow: var(--textShadow);
}

#orderDatesContainer label {
    text-shadow: none !important;
}

#orderDatesContainer label {
    text-shadow: none !important;
}

#orderDatesContainer .po-item, #orderDatesContainer .po-container {
    color: #627d36 !important;
    text-shadow: none !important;
}

#geo-fill {
    background-color: #627d36 !important;
    border: none !important;
    color: ghostwhite !important;
    text-shadow: var(--textShadow);
}

.iconText, .iconText-All, .iconContainer, .iconContainerAll {
    font-family: var(--quickSand) !important;
    text-shadow: var(--textShadow);
    font-size: clamp(0.6rem, 1vw, 0.8rem) !important
}

#serviceInfoList h6, #serviceInfoList p {
    text-shadow: var(--textShadow);
    font-family: var(--quickSand) !important;
}

#serviceInfoList h6 {
    background-color: #748c92;
    padding: 8px
}

#left-slide {
    border: none !important
}

.viewDocumentFile {
    text-shadow: var(--textShadow);
}

    .viewDocumentFile:hover {
        color: wheat !important
    }

.iti__country-name {
    color: black !important
}

#modalRequestCode p, #modalRequestCode h6, #modalRequestCode label {
    text-shadow: var(--textShadow);
}

#modalOneTimeSignup .textValidation span {
    color: red !important;
    text-shadow: none !important;
}

#onetimeCode-container #countDown {
    color: orange !important
}

#modalChatGroupMembers .dataTables_length label,
#modalChatGroupMembers .dataTables_info {
    color: white !important;
    text-shadow: var(--textShadow);
}

.galleryImgContainer .lSAction > a {
    opacity: 1 !important
}

.galleryImgContainer .lSPrev {
    left: 12px !important
}

.galleryImgContainer .lSNext {
    right: 12px !important
}

#participantSitePage h2, #participantSitePage .votingText,
#participantSitePage h5, #participantSitePage #imgDesc {
    text-shadow: var(--textShadow);
}

.galleryImgContainer  .lSPager {
    display:none!important
}

#providerCardDetails h6, #providerCardDetails label {
    text-shadow: var(--textShadow);
}

.groupDescription {
    color: wheat !important;
    text-shadow: var(--textShadow);
}

#emeraldPrivacyPage h1, #emeraldPrivacyPage h2, #emeraldPrivacyPage h3,
#emeraldPrivacyPage p, #emeraldPrivacyPage strong, #emeraldPrivacyPage li {
    text-shadow: var(--textShadow);
}


/*xsm*/ /*d413*/
@media screen and (max-width: 413px) {
    /*chat*/
    .has-chatcontact-list {
        top: 30px !important;
        left: 57px !important;
    }

    .chatContainerBorder {
        top: -20px !important;
        left: 7px !important;
    }

    #chatContainerMinimize {
        bottom: 20px !important;
        left: 30px !important
    }

    /*home provider section*/
    #heroSection {
        min-height: 87vh;
    }

    #smImgContainer {
        width: 300px;
        height: 200px
    }

    /*home story*/
    .storyCardContainer .oneStoryIframeImg {
        height: 210px !important;
    }

    .oneStoryIframeImg iframe, .oneStoryIframeImg img {
        border-top-left-radius: 13px !important;
        border-top-right-radius: 13px !important;
    }

    .storyCardContainer .twoStoryIframeImg {
        height: 210px !important;
    }

    .twoStoryIframeImg iframe, .twoStoryIframeImg img {
        border-top-left-radius: 13px !important;
        border-top-right-radius: 13px !important;
    }

    .storyCardContainer .threeStoryIframeImg {
        height: 210px !important;
    }

    .threeStoryIframeImg iframe, .threeStoryIframeImg img {
        border-top-left-radius: 13px !important;
        border-top-right-radius: 13px !important;
    }

    .storyCardContainer .fourStoryIframeImg {
        height: 210px !important;
    }

    .fourStoryIframeImg iframe, .fourStoryIframeImg img {
        border-top-left-radius: 13px !important;
        border-top-right-radius: 13px !important;
    }

    .storyCardContainer .fiveStoryIframeImg {
        height: 190px !important;
    }

    .fiveStoryIframeImg iframe, .fiveStoryIframeImg img {
        border-top-left-radius: 13px !important;
        border-top-right-radius: 13px !important;
    }

    #fiveStoryCol .lSAction > a {
        top: 130px !important
    }

    /*home profile*/
    .indexProfileCard #oneProfileImgContainer {
        width: 100%;
        height: 190px;
        float: none;
        margin: 0 0 0 0;
    }

    .indexProfileCard .twoProfileImgContainer {
        width: 100%;
        height: 190px;
        float: none;
        margin: 0 0 0 0;
    }

    .indexProfileCard .threeProfileImgContainer {
        width: 100%;
        height: 220px;
        float: none;
        margin: 0 0 0 0;
    }

    .indexProfileCard .fourProfileImgContainer {
        width: 100%;
        height: 210px;
        float: none;
        margin: 0 0 0 0;
    }

    .indexProfileCardGrid {
        width: 100% !important
    }

    /*newsfeed section*/
    .mainIframeImgContainer, .extendedIframeImgContainer {
        width: 100% !important;
        height: 220px !important;
        margin: 0 0 10px 0
    }

    .subIframeImgContainer {
        width: 100% !important;
        height: 220px !important;
        margin: 0 0 10px 0 !important
    }

    /*service section*/
    .serviceImgLeftContainer, .serviceImgRightContainer {
        width: 100%;
        height: 210px !important;
    }

    .serviceOneImgGallery {
        height: 170px !important
    }

    .serviceTwoImgGallery {
        height: 170px !important
    }

    .serviceThreeImgGallery {
        height: 190px !important
    }

    .serviceFourImgGallery {
        height: 180px !important
    }

    .emeraldSliderContainer .lSAction > a {
        top: 105px !important
    }
    /*about section*/
    .memberImgContainer {
        width: 100%;
        height: 180px !important
    }

    /*account section*/
    #loginPage {
        min-height: 70vh
    }

    #emeraldConfirmPage {
        min-height: 45vh !important;
    }

    /*calendar section*/
    .ribbonContainer {
        height: 180px !important
    }

    .fc .fc-daygrid-day-frame {
        height: 60px !important
    }

    /*participant site section*/
    .participantImgContainer{
        height:90px!important
    }

    .galleryImgContainer .lSAction > a {
        top:55px
    }
}

/*sm*/ /*d414*/
@media screen and (min-width: 414px) {
    .has-chatcontact-list {
        top: 38px !important;
        left: 58px !important;
    }

    .chatContainerBorder {
        top: 10px !important;
        left: 5px !important;
    }

    #chatContainerMinimize {
        bottom: 20px !important;
        left: 82px !important
    }

    #heroSection {
        min-height: 87vh;
    }

    #smImgContainer {
        width: 350px;
        height: 230px
    }

    .storyCardContainer .oneStoryIframeImg {
        height: 250px !important;
    }

    .oneStoryIframeImg img {
        border-top-left-radius: 15px !important;
        border-top-right-radius: 15px !important;
    }

    .storyCardContainer .twoStoryIframeImg {
        height: 250px !important;
    }

    .twoStoryIframeImg iframe, .twoStoryIframeImg img {
        border-top-left-radius: 13px !important;
        border-top-right-radius: 13px !important;
    }

    .storyCardContainer .threeStoryIframeImg {
        height: 240px !important;
    }

    .threeStoryIframeImg iframe, .threeStoryIframeImg img {
        border-top-left-radius: 13px !important;
        border-top-right-radius: 13px !important;
    }

    .storyCardContainer .fourStoryIframeImg {
        height: 210px !important;
    }

    .fourStoryIframeImg iframe, .fourStoryIframeImg img {
        border-top-left-radius: 13px !important;
        border-top-right-radius: 13px !important;
    }

    .storyCardContainer .fiveStoryIframeImg {
        height: 220px !important;
    }

    .fiveStoryIframeImg iframe, .fiveStoryIframeImg img {
        border-top-left-radius: 13px !important;
        border-top-right-radius: 13px !important;
    }

    #fiveStoryCol .lSAction > a {
        top: 140px !important
    }

    .mainIframeImgContainer, .extendedIframeImgContainer {
        width: 100% !important;
        height: 240px !important;
        margin: 0 0 10px 0 !important
    }

    .subIframeImgContainer {
        width: 100% !important;
        height: 240px !important;
        margin: 0 0 10px 0 !important
    }

    .serviceImgLeftContainer, .serviceImgRightContainer {
        width: 100%;
        height: 220px !important;
    }

    .serviceOneImgGallery {
        height: 200px !important
    }

    .serviceTwoImgGallery {
        height: 200px !important
    }

    .serviceThreeImgGallery {
        height: 210px !important
    }

    .serviceFourImgGallery {
        height: 220px !important
    }

    .emeraldSliderContainer .lSAction > a {
        top: 120px !important
    }

    .memberImgContainer {
        width: 100%;
        height: 200px !important
    }

    #loginPage {
        min-height: 60vh
    }

    #emeraldConfirmPage {
        min-height: 22vh !important;
    }

    .ribbonContainer {
        height: 210px !important
    }

    .fc .fc-daygrid-day-frame {
        height: 65px !important
    }

    .participantImgContainer {
        height: 110px !important
    }

    .galleryImgContainer .lSAction > a {
        top: 65px
    }
}

/*md1*/ /*d768*/
@media screen and (min-width: 768px) {
    .has-chatcontact-list {
        top: 38px !important;
        left: 72px !important;
    }

    .chatContainerBorder {
        top: 24px !important;
        left: -5px !important;
    }

    #chatContainerMinimize {
        bottom: 160px !important;
        left: 410px !important
    }

    #heroSection {
        min-height: 72.8vh;
    }

    #smImgContainer {
        width: 400px;
        height: 260px
    }

    .storyCardContainer .oneStoryIframeImg {
        height: 200px !important;
    }

    .oneStoryIframeImg img {
        border-top-left-radius: 15px !important;
        border-bottom-left-radius: 15px !important;
        border-top-right-radius: 0 !important;
    }

    .storyCardContainer .twoStoryIframeImg {
        height: 210px !important;
    }

    .twoStoryIframeImg iframe, .twoStoryIframeImg img {
        border-top-left-radius: 15px !important;
        border-bottom-left-radius: 15px !important;
        border-top-right-radius: 0 !important;
    }

    .storyCardContainer .threeStoryIframeImg {
        height: 200px !important;
    }

    .threeStoryIframeImg iframe, .threeStoryIframeImg img {
        border-top-left-radius: 15px !important;
        border-bottom-left-radius: 15px !important;
        border-top-right-radius: 0 !important;
    }

    .storyCardContainer .fourStoryIframeImg {
        height: 200px !important;
    }

    .fourStoryIframeImg iframe, .fourStoryIframeImg img {
        border-top-left-radius: 15px !important;
        border-bottom-left-radius: 15px !important;
        border-top-right-radius: 0 !important;
    }

    .storyCardContainer .fiveStoryIframeImg {
        height: 190px !important;
    }

    #fiveStoryCol .lSAction > a {
        top: 125px !important
    }

    .indexProfileCard #oneProfileImgContainer {
        width: 40%;
        height: 190px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .twoProfileImgContainer {
        width: 40%;
        height: 190px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .threeProfileImgContainer {
        width: 45%;
        height: 220px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .fourProfileImgContainer {
        width: 50%;
        height: 210px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCardGrid {
        width: 100% !important
    }

    .mainNewsFeed-imgContainer {
        width: 50% !important;
        height: 250px !important;
        float: right;
    }

    .mainIframeImgContainer, .extendedIframeImgContainer {
        width: 45% !important;
        height: 190px !important;
        float: right !important;
        margin: 0 0 8px 8px !important
    }

    .subIframeImgContainer {
        width: 100% !important;
        height: 200px !important;
        margin: 0 0 10px 0 !important
    }

    .serviceImgLeftContainer, .serviceImgRightContainer {
        height: 200px !important;
        width: 40%;
    }

    .serviceImgLeftContainer {
        float: left !important;
        margin: 0 8px 0 0;
    }

    .serviceImgRightContainer {
        float: right;
        margin: 0 0 0 8px;
    }

    .serviceOneImgGallery {
        height: 180px !important
    }

    .serviceTwoImgGallery {
        height: 170px !important
    }

    .serviceThreeImgGallery {
        height: 160px !important
    }

    .serviceFourImgGallery {
        height: 140px !important
    }

    .emeraldSliderContainer .lSAction > a {
        top: 80px !important
    }

    .memberImgContainer {
        width: 45%;
        float: left !important;
        height: 180px !important;
        margin: 0 8px 0 0;
    }

    #loginPage {
        min-height: 55vh
    }

    #emeraldConfirmPage {
        min-height: 39vh !important;
    }

    .ribbonContainer {
        height: 180px !important
    }

    .rentalItemSelection .rentalMainCardWidth2,
    .memberSelection .rentalMainCardWidth2 {
        width: 675px !important
    }

    .rentalMainCardWidth2 .ribbonContainer {
        height: 190px !important
    }

    .rentalItemSelection .rentalMainCardWidth3,
    .memberSelection .rentalMainCardWidth3 {
        width: 670px !important
    }

    .rentalMainCardWidth3 .ribbonContainer {
        height: 130px !important
    }

    .rentalItemSelection .rentalMainCardWidth4,
    .memberSelection .rentalMainCardWidth4 {
        width: 600px !important
    }

    .rentalMainCardWidth4 .ribbonContainer {
        height: 165px !important
    }

    .rentalItemSelection .rentalMainCardWidth5,
    .memberSelection .rentalMainCardWidth5 {
        width: 650px !important
    }

    .rentalMainCardWidth5 .ribbonContainer {
        height: 115px !important
    }

    .fc .fc-daygrid-day-frame {
        height: 50px !important
    }

    .participantImgContainer {
        height: 100px !important
    }

    .galleryImgContainer .lSAction > a {
        top: 60px
    }

    .galleryImgContainer .lSPrev {
        left: 20px !important
    }

    .galleryImgContainer .lSNext {
        right: 20px !important
    }
}

/*md2*/ /*d820*/
@media screen and (min-width: 820px) {
    .has-chatcontact-list {
        top: 38px !important;
        left: 72px !important;
    }

    .chatContainerBorder {
        top: 45px !important;
        left: 16px !important;
    }

    #chatContainerMinimize {
        bottom: 320px !important;
        left: 450px !important
    }

    #heroSection {
        min-height: 61.4vh;
    }

    #smImgContainer {
        width: 350px;
        height: 230px
    }

    .storyCardContainer .oneStoryIframeImg {
        height: 200px !important;
    }

    .oneStoryIframeImg img {
        border-top-left-radius: 15px !important;
        border-bottom-left-radius: 15px !important;
        border-top-right-radius: 0 !important;
    }

    .storyCardContainer .twoStoryIframeImg {
        height: 230px !important;
    }

    .storyCardContainer .threeStoryIframeImg {
        height: 210px !important;
    }

    .storyCardContainer .fourStoryIframeImg {
        height: 220px !important;
    }

    .storyCardContainer .fiveStoryIframeImg {
        height: 200px !important;
    }

    #fiveStoryCol .lSAction > a {
        top: 130px !important
    }

    .indexProfileCard #oneProfileImgContainer {
        width: 40%;
        height: 210px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .twoProfileImgContainer {
        width: 40%;
        height: 210px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .threeProfileImgContainer {
        width: 40%;
        height: 210px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .fourProfileImgContainer {
        width: 50%;
        height: 250px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCardGrid {
        width: 100% !important
    }

    .mainIframeImgContainer, .extendedIframeImgContainer {
        width: 45% !important;
        height: 200px !important;
        float: right !important;
        margin: 0 0 8px 8px !important
    }

    .subIframeImgContainer {
        width: 100% !important;
        height: 210px !important;
        margin: 0 0 10px 0 !important
    }

    .serviceImgLeftContainer, .serviceImgRightContainer {
        height: 240px !important;
        width: 45%;
    }

    .serviceImgLeftContainer {
        float: left !important;
        margin: 0 8px 0 0;
    }

    .serviceImgRightContainer {
        float: right;
        margin: 0 0 0 8px;
    }

    .serviceOneImgGallery {
        height: 190px !important
    }

    .serviceTwoImgGallery {
        height: 180px !important
    }

    .serviceThreeImgGallery {
        height: 170px !important
    }

    .serviceFourImgGallery {
        height: 150px !important
    }

    .emeraldSliderContainer .lSAction > a {
        top: 85px !important
    }

    .memberImgContainer {
        width: 45%;
        float: left !important;
        height: 200px !important;
        margin: 0 8px 0 0;
    }

    #loginPage {
        min-height: 50vh
    }

    .ribbonContainer {
        height: 200px !important
    }

    .rentalItemSelection .rentalMainCardWidth2,
    .memberSelection .rentalMainCardWidth2 {
        width: 700px !important
    }

    .rentalMainCardWidth2 .ribbonContainer {
        height: 200px !important
    }

    .rentalItemSelection .rentalMainCardWidth3,
    .memberSelection .rentalMainCardWidth3 {
        width: 720px !important
    }

    .rentalMainCardWidth3 .ribbonContainer {
        height: 135px !important
    }

    .rentalItemSelection .rentalMainCardWidth4,
    .memberSelection .rentalMainCardWidth4 {
        width: 600px !important
    }

    .rentalMainCardWidth4 .ribbonContainer {
        height: 165px !important
    }

    .rentalItemSelection .rentalMainCardWidth5,
    .memberSelection .rentalMainCardWidth5 {
        width: 710px !important
    }

    .rentalMainCardWidth5 .ribbonContainer {
        height: 125px !important
    }

    .fc .fc-daygrid-day-frame {
        height: 55px !important
    }

    .participantImgContainer {
        height: 110px !important
    }

    .galleryImgContainer .lSAction > a {
        top: 65px
    }
}

/*lg*/ /*d1024*/
@media screen and (min-width: 1024px) {
    .has-chatcontact-list {
        top: 60px !important;
        left: -10px !important;
    }

    .chatContainerBorder {
        top: 75px !important;
        left: -14px !important;
    }

    #chatContainerMinimize {
        bottom: 505px !important;
        left: 650px !important
    }

    #heroSection {
        min-height: 51.3vh;
    }

    #smImgContainer {
        width: 400px;
        height: 270px
    }

    .storyCardContainer .oneStoryIframeImg {
        height: 270px !important;
    }

    .storyCardContainer .twoStoryIframeImg {
        height: 260px !important;
    }

    .storyCardContainer .threeStoryIframeImg {
        height: 220px !important;
    }

    .storyCardContainer .fourStoryIframeImg {
        height: 230px !important;
    }

    .storyCardContainer .fiveStoryIframeImg {
        height: 155px !important;
    }

    #fiveStoryCol .lSAction > a {
        top: 110px !important
    }

    .indexProfileCard #oneProfileImgContainer {
        width: 48%;
        height: 285px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .twoProfileImgContainer {
        width: 48%;
        height: 285px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .threeProfileImgContainer {
        width: 45%;
        height: 260px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .fourProfileImgContainer {
        width: 45%;
        height: 250px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCardGrid {
        width: 100% !important
    }

    .mainIframeImgContainer, .extendedIframeImgContainer {
        width: 45% !important;
        height: 250px !important;
        float: right !important;
        margin: 0 0 8px 8px !important
    }

    .subIframeImgContainer {
        width: 45% !important;
        height: 125px !important;
        float: left !important;
        margin: 0 8px 0px 0 !important
    }

    .serviceImgLeftContainer, .serviceImgRightContainer {
        height: 280px !important;
        width: 45%;
    }

    .serviceImgLeftContainer {
        float: left !important;
        margin: 0 8px 0 0;
    }

    .serviceImgRightContainer {
        float: right;
        margin: 0 0 0 8px;
    }

    .serviceOneImgGallery {
        height: 195px !important
    }

    .serviceTwoImgGallery {
        height: 215px !important
    }

    .serviceThreeImgGallery {
        height: 195px !important
    }

    .serviceFourImgGallery {
        height: 180px !important
    }

    .emeraldSliderContainer .lSAction > a {
        top: 100px !important
    }

    .memberImgContainer {
        width: 45%;
        float: left !important;
        height: 230px !important;
        margin: 0 8px 0 0;
    }

    #loginPage {
        min-height: 60vh
    }

    #emeraldConfirmPage {
        min-height: 51vh !important;
    }

    .newMessageBadge {
        top: 2px !important;
        left: 5px !important;
        z-index: 1 !important
    }

    .ribbonContainer {
        height: 190px !important
    }

    .rentalItemSelection .rentalMainCardWidth2,
    .memberSelection .rentalMainCardWidth2 {
        width: 700px !important
    }

    .rentalMainCardWidth2 .ribbonContainer {
        height: 200px !important
    }

    .rentalItemSelection .rentalMainCardWidth3,
    .memberSelection .rentalMainCardWidth3 {
        width: 900px !important
    }

    .rentalMainCardWidth3 .ribbonContainer {
        height: 160px !important
    }

    .rentalItemSelection .rentalMainCardWidth4,
    .memberSelection .rentalMainCardWidth4 {
        width: 750px !important
    }

    .rentalMainCardWidth4 .ribbonContainer {
        height: 145px !important
    }

    .rentalItemSelection .rentalMainCardWidth5,
    .memberSelection .rentalMainCardWidth5 {
        width: 810px !important
    }

    .rentalMainCardWidth5 .ribbonContainer {
        height: 145px !important
    }

    .fc .fc-daygrid-day-frame {
        height: 70px !important
    }

    .participantImgContainer {
        height: 110px !important
    }

    .galleryImgContainer .lSAction > a {
        top: 62px
    }
}

/*xl*/ /*d1280*/
@media screen and (min-width: 1280px) {
    .has-chatcontact-list {
        top: 35px !important;
        left: -10px !important;
    }

    .chatContainerBorder {
        top: -10px !important;
        left: 15px !important;
    }

    #chatContainerMinimize {
        bottom: 20px !important;
        left: 900px !important
    }

    #heroSection {
        min-height: 87vh;
    }

    .storyCardContainer .oneStoryIframeImg {
        height: 210px !important;
    }

    .storyCardContainer .twoStoryIframeImg {
        height: 300px !important;
    }

    .storyCardContainer .threeStoryIframeImg {
        height: 200px !important;
    }

    .threeStoryIframeImg iframe, .threeStoryIframeImg img {
        border-top-left-radius: 15px !important;
        border-bottom-left-radius: 0 !important;
        border-top-right-radius: 15px !important;
    }

    .storyCardContainer .fourStoryIframeImg {
        height: 170px !important;
    }

    .fourStoryIframeImg iframe, .fourStoryIframeImg img {
        border-top-left-radius: 15px !important;
        border-bottom-left-radius: 0 !important;
        border-top-right-radius: 15px !important;
    }

    .storyCardContainer .fiveStoryIframeImg {
        height: 190px !important;
    }

    #fiveStoryCol .lSAction > a {
        top: 130px !important
    }

    .indexProfileCard #oneProfileImgContainer {
        width: 40%;
        height: 220px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .twoProfileImgContainer {
        width: 40%;
        height: 260px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .threeProfileImgContainer {
        width: 35%;
        height: 180px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .fourProfileImgContainer {
        width: 100%;
        height: 300px;
        float: none;
        margin: 0 0 0 0;
    }

    .indexProfileCardGrid {
        width: 50% !important;
        padding: 4px 16px !important
    }

    .mainIframeImgContainer, .extendedIframeImgContainer {
        width: 40% !important;
        height: 240px !important;
        float: right !important;
        margin: 0 0 8px 8px !important
    }

    .subIframeImgContainer {
        width: 45% !important;
        height: 130px !important;
        float: left !important;
        margin: 0 16px 0px 0 !important
    }

    .serviceImgLeftContainer, .serviceImgRightContainer {
        height: 280px !important;
        width: 45%;
    }

    .serviceImgLeftContainer {
        float: left !important;
        margin: 0 8px 0 0;
    }

    .serviceImgRightContainer {
        float: right;
        margin: 0 0 0 8px;
    }

    .serviceOneImgGallery {
        height: 180px !important
    }

    .serviceTwoImgGallery {
        height: 215px !important
    }

    .serviceThreeImgGallery {
        height: 180px !important
    }

    .serviceFourImgGallery {
        height: 185px !important
    }

    .emeraldSliderContainer .lSAction > a {
        top: 100px !important
    }

    .memberImgContainer {
        width: 40%;
        float: left !important;
        height: 225px !important;
        margin: 0 8px 0 0;
    }

    #loginPage {
        min-height: 75vh
    }

    .ribbonContainer {
        height: 270px !important
    }

    .rentalItemSelection .rentalMainCardWidth2,
    .memberSelection .rentalMainCardWidth2 {
        width: 720px !important
    }

    .rentalMainCardWidth2 .ribbonContainer {
        height: 210px !important
    }

    .rentalItemSelection .rentalMainCardWidth3,
    .memberSelection .rentalMainCardWidth3 {
        width: 850px !important
    }

    .rentalMainCardWidth3 .ribbonContainer {
        height: 145px !important
    }

    .rentalItemSelection .rentalMainCardWidth4,
    .memberSelection .rentalMainCardWidth4 {
        width: 850px !important
    }

    .rentalMainCardWidth4 .ribbonContainer {
        height: 155px !important
    }

    .rentalItemSelection .rentalMainCardWidth5,
    .memberSelection .rentalMainCardWidth5 {
        width: 800px !important
    }

    .rentalMainCardWidth5 .ribbonContainer {
        height: 155px !important
    }

    .fc .fc-daygrid-day-frame {
        height: 80px !important
    }

    .participantImgContainer {
        height: 100px !important
    }

    .galleryImgContainer .lSAction > a {
        top: 60px
    }
}

/*xxl*/ /*d1366*/
@media screen and (min-width: 1366px) {
    .has-chatcontact-list {
        top: 35px !important;
        left: -8px !important;
    }

    .chatContainerBorder {
        top: -8px !important;
        left: 82px !important;
    }

    #chatContainerMinimize {
        bottom: 20px !important;
        left: 966px !important
    }

    #heroSection {
        min-height: 87vh;
    }

    .storyCardContainer .oneStoryIframeImg {
        height: 220px !important;
    }

    .storyCardContainer .twoStoryIframeImg {
        height: 300px !important;
    }

    .storyCardContainer .threeStoryIframeImg {
        height: 215px !important;
    }

    .storyCardContainer .fourStoryIframeImg {
        height: 180px !important;
    }

    .storyCardContainer .fiveStoryIframeImg {
        height: 190px !important;
    }

    #fiveStoryCol .lSAction > a {
        top: 125px !important
    }

    .indexProfileCard #oneProfileImgContainer {
        width: 40%;
        height: 240px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .twoProfileImgContainer {
        width: 40%;
        height: 270px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .threeProfileImgContainer {
        width: 40%;
        height: 210px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .fourProfileImgContainer {
        width: 45%;
        height: 250px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCardGrid {
        width: 50% !important;
        padding: 4px 16px !important
    }

    .indexProfileCard .fourProfileImgContainer {
        width: 100%;
        height: 300px;
        float: none;
        margin: 0 0 0 0;
    }

    .indexProfileCardGrid {
        width: 50% !important;
        padding: 4px 16px !important
    }

    .mainIframeImgContainer, .extendedIframeImgContainer {
        width: 40% !important;
        height: 250px !important;
        float: right !important;
        margin: 0 0 8px 8px !important
    }

    .subIframeImgContainer {
        width: 45% !important;
        height: 130px !important;
        float: left !important;
        margin: 0 16px 0px 0 !important
    }

    .serviceImgLeftContainer, .serviceImgRightContainer {
        height: 320px !important;
        width: 50%;
    }

    .serviceImgLeftContainer {
        float: left !important;
        margin: 0 8px 0 0;
    }

    .serviceImgRightContainer {
        float: right;
        margin: 0 0 0 8px;
    }

    .serviceOneImgGallery {
        height: 195px !important
    }

    .serviceTwoImgGallery {
        height: 210px !important
    }

    .serviceThreeImgGallery {
        height: 190px !important
    }

    .serviceFourImgGallery {
        height: 200px !important
    }

    .emeraldSliderContainer .lSAction > a {
        top: 110px !important
    }

    .memberImgContainer {
        width: 40%;
        float: left !important;
        height: 245px !important;
        margin: 0 8px 0 0;
    }

    #emeraldConfirmPage {
        min-height: 52.7vh !important;
    }

    .ribbonContainer {
        height: 280px !important
    }

    .rentalItemSelection .rentalMainCardWidth2,
    .memberSelection .rentalMainCardWidth2 {
        width: 740px !important
    }

    .rentalMainCardWidth2 .ribbonContainer {
        height: 205px !important
    }

    .rentalItemSelection .rentalMainCardWidth3,
    .memberSelection .rentalMainCardWidth3 {
        width: 850px !important
    }

    .rentalMainCardWidth3 .ribbonContainer {
        height: 155px !important
    }

    .rentalItemSelection .rentalMainCardWidth4,
    .memberSelection .rentalMainCardWidth4 {
        width: 900px !important
    }

    .rentalMainCardWidth4 .ribbonContainer {
        height: 165px !important
    }

    .rentalItemSelection .rentalMainCardWidth5,
    .memberSelection .rentalMainCardWidth5 {
        width: 800px !important
    }

    .rentalMainCardWidth5 .ribbonContainer {
        height: 145px !important
    }

    .fc .fc-daygrid-day-frame {
        height: 90px !important
    }

    .participantImgContainer {
        height: 120px !important
    }

    .galleryImgContainer .lSAction > a {
        top: 68px
    }
}

/*xxxl*/ /*d1528*/
@media screen and (min-width: 1528px) {
    .has-chatcontact-list {
        top: 40px !important;
        left: -8px !important;
    }

    .chatContainerBorder {
        top: -8px !important;
        left: 38px !important;
    }

    #chatContainerMinimize {
        bottom: 20px !important;
        left: 1128px !important
    }

    #heroSection {
        min-height: 87vh;
    }

    .storyCardContainer .oneStoryIframeImg {
        height: 230px !important;
    }

    .storyCardContainer .twoStoryIframeImg {
        height: 220px !important;
    }

    .storyCardContainer .threeStoryIframeImg {
        height: 185px !important;
    }

    .storyCardContainer .fourStoryIframeImg {
        height: 190px !important;
    }

    .storyCardContainer .fiveStoryIframeImg {
        height: 230px !important;
    }

    #fiveStoryCol .lSAction > a {
        top: 150px !important
    }

    .indexProfileCard #oneProfileImgContainer {
        width: 45%;
        height: 265px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .twoProfileImgContainer {
        width: 50%;
        height: 180px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .threeProfileImgContainer {
        width: 45%;
        height: 270px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .fourProfileImgContainer {
        width: 40%;
        height: 150px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCardGrid {
        width: 50% !important;
        padding: 4px 16px !important
    }

    .mainIframeImgContainer, .extendedIframeImgContainer {
        width: 45% !important;
        height: 310px !important;
        float: right !important;
        margin: 0 0 8px 8px !important
    }

    .subIframeImgContainer {
        width: 50% !important;
        height: 165px !important;
        float: left !important;
        margin: 0 8px 0px 0 !important
    }

    .serviceImgLeftContainer, .serviceImgRightContainer {
        height: 280px !important;
        width: 40%;
    }

    .serviceImgLeftContainer {
        float: left !important;
        margin: 0 8px 0 0;
    }

    .serviceImgRightContainer {
        float: right;
        margin: 0 0 0 8px;
    }

    .serviceOneImgGallery {
        height: 170px !important
    }

    .serviceTwoImgGallery {
        height: 200px !important
    }

    .serviceThreeImgGallery {
        height: 210px !important
    }

    .serviceFourImgGallery {
        height: 190px !important
    }

    .emeraldSliderContainer .lSAction > a {
        top: 110px !important
    }

    .memberImgContainer {
        width: 40%;
        float: left !important;
        height: 260px !important;
        margin: 0 8px 0 0;
    }

    #loginPage {
        min-height: 75vh
    }

    #emeraldConfirmPage {
        min-height: 51.2vh !important;
    }

    .ribbonContainer {
        height: 190px !important
    }

    .rentalItemSelection .rentalMainCardWidth2,
    .memberSelection .rentalMainCardWidth2 {
        width: 680px !important
    }

    .rentalMainCardWidth2 .ribbonContainer {
        height: 185px !important
    }

    .rentalItemSelection .rentalMainCardWidth3,
    .memberSelection .rentalMainCardWidth3 {
        width: 900px !important
    }

    .rentalMainCardWidth3 .ribbonContainer {
        height: 165px !important
    }

    .rentalItemSelection .rentalMainCardWidth4,
    .memberSelection .rentalMainCardWidth4 {
        width: 1000px !important
    }

    .rentalMainCardWidth4 .ribbonContainer {
        height: 195px !important
    }

    .rentalItemSelection .rentalMainCardWidth5,
    .memberSelection .rentalMainCardWidth5 {
        width: 1000px !important
    }

    .rentalMainCardWidth5 .ribbonContainer {
        height: 175px !important
    }

    .fc .fc-daygrid-day-frame {
        height: 95px !important
    }

    .participantImgContainer {
        height: 100px !important
    }

    .galleryImgContainer .lSAction > a {
        top: 60px
    }
}

/*xxxxl*/ /*d1912*/
@media screen and (min-width: 1912px) {
    .has-chatcontact-list {
        top: 50px !important;
        left: 2px !important;
    }

    .chatContainerBorder {
        top: 24px !important;
        left: 214px !important;
    }

    #chatContainerMinimize {
        bottom: 25px !important;
        left: 1496px !important
    }

    #heroSection {
        min-height: 87vh;
    }

    .storyCardContainer .oneStoryIframeImg {
        height: 300px !important;
    }

    .storyCardContainer .twoStoryIframeImg {
        height: 255px !important;
    }

    .storyCardContainer .threeStoryIframeImg {
        height: 225px !important;
    }

    .storyCardContainer .fourStoryIframeImg {
        height: 250px !important;
    }

    .storyCardContainer .fiveStoryIframeImg {
        height: 210px !important;
    }

    #fiveStoryCol .lSAction > a {
        top: 138px !important
    }

    .indexProfileCard #oneProfileImgContainer {
        width: 40%;
        height: 300px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .twoProfileImgContainer {
        width: 45%;
        height: 220px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .threeProfileImgContainer {
        width: 40%;
        height: 300px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .fourProfileImgContainer {
        width: 45%;
        height: 215px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCard .fourProfileImgContainer {
        width: 50%;
        height: 230px;
        float: left;
        margin: 0 10px 10px 0;
    }

    .indexProfileCardGrid {
        width: 50% !important;
        padding: 4px 16px !important
    }

    .mainIframeImgContainer, .extendedIframeImgContainer {
        width: 45% !important;
        height: 380px !important;
        float: right !important;
        margin: 0 0 8px 8px !important
    }

    .subIframeImgContainer {
        width: 40% !important;
        height: 165px !important;
        float: left !important;
        margin: 0 16px 0px 0 !important
    }

    .serviceImgLeftContainer, .serviceImgRightContainer {
        height: 400px !important;
        width: 45%;
    }

    .serviceImgLeftContainer {
        float: left !important;
        margin: 0 8px 0 0;
    }

    .serviceImgRightContainer {
        float: right;
        margin: 0 0 0 8px;
    }

    .serviceOneImgGallery {
        height: 220px !important
    }

    .serviceTwoImgGallery {
        height: 270px !important
    }

    .serviceThreeImgGallery {
        height: 270px !important
    }

    .serviceFourImgGallery {
        height: 260px !important
    }

    .emeraldSliderContainer .lSAction > a {
        top: 150px !important
    }

    .emeraldSliderContainer .lSPrev {
        left: 35px !important
    }

    .emeraldSliderContainer .lSNext {
        right: 35px !important
    }

    .memberImgContainer {
        width: 35%;
        float: left !important;
        height: 300px !important;
        margin: 0 8px 0 0;
    }

    #loginPage {
        min-height: 64.6vh;
    }

    #loginCard, #tLoginCard {
        width: 72% !important;
        margin: 0 auto;
    }

    #emeraldConfirmPage {
        min-height: 57.7vh !important;
    }

    .ribbonContainer {
        height: 260px !important
    }

    .rentalItemSelection .rentalMainCardWidth2,
    .memberSelection .rentalMainCardWidth2 {
        width: 690px !important
    }

    .rentalMainCardWidth2 .ribbonContainer {
        height: 200px !important
    }

    .rentalItemSelection .rentalMainCardWidth3,
    .memberSelection .rentalMainCardWidth3 {
        width: 1000px !important
    }

    .rentalMainCardWidth3 .ribbonContainer {
        height: 185px !important
    }

    .rentalItemSelection .rentalMainCardWidth4,
    .memberSelection .rentalMainCardWidth4 {
        width: 1000px !important
    }

    .rentalMainCardWidth4 .ribbonContainer {
        height: 185px !important
    }

    .rentalItemSelection .rentalMainCardWidth5,
    .memberSelection .rentalMainCardWidth5 {
        width: 1000px !important
    }

    .rentalMainCardWidth5 .ribbonContainer {
        height: 175px !important
    }

    .fc .fc-daygrid-day-frame {
        height: 115.5px !important
    }

    .participantImgContainer {
        height: 130px !important
    }

    .galleryImgContainer .lSAction > a {
        top: 75px
    }
}