:root {
    --masala: rgba(69, 64, 61, 1);
    --white: #ffffff;
    --questrial: "Questrial", sans-serif;
    --lightBgImg: linear-gradient(rgba(255, 255, 255, 0.2)), url('/themeimage/Brown/footerBg.jpg');
    --darkBgImg: linear-gradient(rgba(69, 64, 61, 0.8)), url(/themeimage/Brown/footerBg.jpg);
}

h1, h2, h3, h4, h5, h6, p, small, a, pre, li, button {
    font-family: var(--questrial) !important;
}

input, input[type=email], input[type=text], input[type=password], input[type=number] {
    font-size: 1rem !important;
    font-family: var(--questrial) !important;
}

    input::placeholder {
        font-size: 1rem !important;
        font-family: var(--questrial) !important;
    }

.border-bottom-brown {
    border-bottom: 1px solid #ffbc6b !important;
}


#navMainCol {
    min-height: 8vh;
    background-image: var(--darkBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,0.8) 10px 10px 10px inset,rgba(61, 43, 31,0.8) -10px -10px 10px inset;
}

.emptyDiv {
    min-height: 1vh;
    background-image: linear-gradient(rgba(255,255,255, 0.2)), url('/themeimage/Brown/footerBg.jpg')
}

#indexImgContainer {
    height: 150px;
    width: 150px;
    clip-path: circle(50% at 50% 50%);
    background: rgba(255,255,255,0.7);
    animation: show 1s linear forwards
}

#indexSubImgContainer {
    height: 140px;
    width: 140px;
    clip-path: circle(50% at 50% 50%);
}

#indexMainColumn {
    min-height: 80vh;
    background-image: linear-gradient(to right, rgba( 61, 43, 31, 0.5), rgba(61, 43, 31, 0.5)), url('/themeimage/Brown/homeMainSectionBg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

    #indexMainColumn h1 {
        font-size: 28px !important;
        color: ghostwhite;
        text-shadow: 2px 1px 1px black !important;
        animation: show 1s linear forwards;
    }

    #indexMainColumn h5 {
        font-family: var(--questrial) !important;
        color: ghostwhite !important;
        letter-spacing: 1px;
        text-shadow: 2px 1px 1px black !important;
        line-height: 30px !important;
        font-size: 18px !important;
        font-weight: 200 !important;
        animation: show 1s linear forwards;
    }

    #indexMainColumn p {
        font-family: var(--questrial) !important;
        color: ghostwhite !important;
        letter-spacing: 0.5px;
        font-size: 17px !important;
        text-shadow: 2px 1px 1px black !important;
        animation: show 1s linear forwards;
    }

    #indexMainColumn span {
        font-family: var(--questrial) !important;
        color: ghostwhite !important;
        letter-spacing: 0.5px;
        font-size: 17px !important;
        text-shadow: 2px 1px 1px black !important
    }

    #indexMainColumn a {
        font-family: var(--questrial) !important;
        color: ghostwhite !important;
        letter-spacing: 0.5px;
        font-size: 17px !important;
        text-shadow: 2px 1px 1px black !important
    }

.brownBtn-Cta {
    background-image: linear-gradient(rgba(255,255,255, 0.2)), url('/themeimage/Brown/footerBg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: 1px solid white;
    color: ghostwhite;
    font-size: 20px;
    padding: 10px 20px;
    margin: 0 10px;
    text-shadow: 2px 2px 2px black;
    box-shadow: rgba(255,255,255,1) 1px 1px 5px,rgba(255,255,255,1) -1px -1px 5px;
    animation: show 1s linear forwards;
}

    .brownBtn-Cta:hover {
        color: ghostwhite;
        text-shadow: 2px 2px 2px black;
        transform: scale(1.1);
    }

@keyframes show {
    from {
        transform: scale(0);
        opacity: 0;
    }

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

.menuIconBrown {
    font-size: 28px !important;
    color: var(--masala) !important;
}

.menuLinkDropdown {
    display: none;
}

#companyTitleBrown h4 {
    font-size: clamp(1.5rem, 2vw, 2rem) !important;
    color: white !important;
    font-weight: 800;
    text-shadow: black 1.5px 1.5px 1px;
}

.naviLink a {
    text-decoration: none;
}

.naviLink {
    color: var(--white) !important;
    font-weight: 300;
    text-shadow: black 1.5px 1.5px 1px;
}

.userNaviLink {
    height: 28px;
    width: 28px;
    background-color: var(--white);
    border-radius: 28px
}

    .userNaviLink:hover {
        background-color: none;
        background-image: var(--lightBgImg) !important;
        color: white !important;
        border: 1px solid white !important
    }

    .userNaviLink h6 {
        font-size: 12px !important;
        color: var(--masala) !important;
        margin-top: 2px !important;
        font-weight: 300;
    }

        .userNaviLink h6:hover {
            color: var(--white) !important;
        }

.menuIconBrown {
    color: white !important
}

#chatDropdownMenuLink h6 {
    color: var(--white) !important;
    text-shadow: black 1.5px 1.5px 1px;
    text-decoration: none !important;
    font-weight: 300 !important
}

#footerMainRow {
    background-image: linear-gradient(to top,rgba(255, 255, 255, 0.2), rgba(100,65,23, 1)), url('/themeimage/Brown/footerBg.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#companyColumnConTainer {
    background-image: var(--darkBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 7vh !important
}

    #companyColumnConTainer p {
        text-shadow: 2px 2px 2px black;
        letter-spacing: 1px;
    }

#companyFooterTitleLogo h5 {
    color: white !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    text-shadow: 2px 2px 2px black;
}

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

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

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

#companyInfo h5 {
    color: wheat !important;
    font-weight: 300 !important;
    text-shadow: 2px 2px 1px black;
}

#companyInfo p {
    color: white !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    text-shadow: 2px 1px 1px black;
}

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

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

#FooterQL h5 {
    color: wheat !important;
    font-weight: 300 !important;
    text-shadow: 2px 2px 1px black;
}

#FooterQL a {
    color: white !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    text-shadow: 2px 1px 1px black;
}

    #FooterQL a:hover {
        color: navajowhite !important;
        transform: scale(1.1);
    }

#footerSocmed h5 {
    color: wheat !important;
    font-weight: 300 !important;
    text-shadow: 2px 1px 1px black;
}

#footerSocmed i {
    color: white !important;
    font-size: 20px;
    text-shadow: 2px 1px 1px black;
}

    #footerSocmed i:hover {
        color: wheat !important;
        transform: scale(1.1);
    }


#storyBranding {
    background-image: linear-gradient(rgba(69, 64, 61, 0.8)), url('/themeimage/Brown/footerBg.jpg') !important;
    box-shadow: rgba(61, 43, 31,0.8) 10px 10px 10px inset,rgba(61, 43, 31,0.8) -10px -10px 10px inset !important;
}

    #storyBranding h2 {
        color: rgb(245, 222, 179) !important;
        text-shadow: rgba(0,0,0,1) 2px 2px !important;
        transform: scaleY(0);
        opacity: 0;
        animation: fadeins 1s linear forwards;
        animation-timeline: view();
        animation-range: entry 150px;
    }

    #storyBranding h5 {
        letter-spacing: 2px;
        line-height: 30px !important;
        text-shadow: rgba(0,0,0,1) 2px 2px !important;
        transform: scaleY(0);
        opacity: 0;
        animation: fadeins 1s linear forwards;
        animation-timeline: view();
        animation-range: entry 200px;
    }

@keyframes fadeins {

    to {
        opacity: 1;
        transform: scaleY(1);
    }
}

#profileShowcase {
    background-image: linear-gradient(rgba(69, 64, 61, 0.8)), url('/themeimage/Brown/footerBg.jpg');
    box-shadow: rgba(61, 43, 31,0.8) 10px 10px 10px inset,rgba(61, 43, 31,0.8) -10px -10px 10px inset;
}

    #profileShowcase h1 {
        color: rgb(245, 222, 179) !important;
        text-shadow: rgba(0,0,0,1) 2px 2px;
        opacity: 0;
        animation: showcasefade 1s linear forwards;
        animation-timeline: view();
        animation-range: entry 350px;
    }

    #profileShowcase h4 {
        letter-spacing: 2px;
        line-height: 30px !important;
        text-shadow: rgba(0,0,0,1) 2px 2px;
        opacity: 0;
        animation: showcasefade 1s linear forwards;
        animation-timeline: view();
        animation-range: entry 350px;
    }

#showcaseItemContainer {
    opacity: 0;
    animation: showcasefade 1s linear forwards;
    animation-timeline: view();
    animation-range: entry 350px;
}

@keyframes showcasefade {
    to {
        opacity: 1;
    }
}

.storyCard {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px;
}

.storyCardBtn {
    background: rgba( 166, 123, 91,1);
    color: ghostwhite;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: rgba(255, 255, 255,0.8) 3px 3px 5px;
    border-radius: 5px !important;
    padding: 5px 10px !important;
    font-size: 14px !important;
    text-shadow: rgba(0,0,0,1) 1px 1px;
    border-radius: 100px !important
}

    .storyCardBtn:hover {
        background: rgba( 89, 39, 32,1);
        color: ghostwhite;
    }

#oneStoryContainer p,
#twoStoryContainer p,
#threeMainStory p,
#fourStoryContainer p {
    color: ghostwhite !important;
    font-size: clamp(1rem, 1vw, 1.05rem) !important;
    text-shadow: rgba(0,0,0,1) 1px 1px;
    letter-spacing: 1px
}



.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.swiper-button-next, .swiper-button-prev {
    background-color: rgb(182, 174, 159);
    height: 30px;
    width: 30px;
    border-radius: 50%;
    position: absolute;
}

    .swiper-button-next:after, .swiper-button-prev:after {
        font-size: clamp(1rem, 1vw, 1.3rem) !important;
        color: ghostwhite !important;
    }

.swiperButtonNextOrder:after, .swiperButtonPrevOrder:after {
    font-size: 25px !important;
    color: ghostwhite !important;
}

#showcase h1 {
    color: rgb(245, 222, 179) !important;
    text-shadow: rgba(0,0,0,1) 2px 2px
}

#showcase h4 {
    color: white !important;
    text-shadow: rgba(0,0,0,1) 2px 2px
}

#showcaseItemContainer h3 {
    color: rgb(245, 222, 179) !important;
    letter-spacing: 1px !important;
    text-shadow: rgba(0,0,0,1) 2px 2px
}

#showcaseItemContainer p {
    color: ghostwhite !important;
    letter-spacing: 1px !important;
    text-shadow: rgba(0,0,0,1) 2px 1px
}

.iconShowcase {
    color: white !important;
    font-size: 50px !important;
    text-shadow: rgba(0,0,0,1) 3px 3px
}

#profileMaincard {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px;
    transform: scale(0);
    opacity: 0;
    animation: cardFade 2s linear forwards;
    animation-timeline: view();
    animation-range: entry 350px;
}

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

#profileMaincard h4 {
    color: rgb(245, 222, 179) !important;
    letter-spacing: 1px;
    text-shadow: 2px 1px 1px black
}

#profileMaincard p {
    color: ghostwhite !important;
    letter-spacing: 1px;
    text-shadow: 2px 1px 1px black
}

#profileInnerCard {
    background: rgba(0,0,0,0.5);
    box-shadow: rgba(61, 43, 31,1) 4px 4px 4px
}

    #profileInnerCard .btn {
        background-image: var(--lightBgImg);
        border-radius: 50px;
        padding: 4px 10px;
        color: ghostwhite;
        text-shadow: 1px 1px 1px black;
        box-shadow: rgba(0, 0, 0,1) 2px 4px 2px;
        font-size: 17px
    }

        #profileInnerCard .btn:hover {
            transform: scale(1.1);
        }

#loadMoreNewsFeed {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    padding: 4px 10px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(100,65,23, 1) 2px 4px 4px;
    font-size: 17px
}

    #loadMoreNewsFeed:hover {
        transform: scale(1.1);
    }

.grid-sizer {
    width: 100%
}

#profileMainCon, #storyMainCon {
    background-image: linear-gradient(rgba(255, 255, 255, 0.8)), url('/themeimage/Brown/pattern-8249757_1280.png');
}

#storyMainCon {
    opacity: 0;
    animation: storyFade 1s linear forwards;
    animation-timeline: view();
    animation-range: entry 100px;
}

@keyframes storyFade {

    to {
        opacity: 1;
    }
}

#firstSectionImgCard {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(255, 255, 255,1) 2px 2px 10px,rgba(255, 255, 255,1) -2px -2px 10px,rgba(255, 255, 255,1) -2px 2px 10px,rgba(255, 255, 255,1) 2px -2px 10px;
}

#mainCard {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px
}

.serviceSubCard {
    background: rgba(0,0,0,0.5);
}

    .serviceSubCard h5 {
        color: rgb(245, 222, 179) !important;
        text-shadow: rgba(0, 0, 0,1) 2px 2px 2px;
    }

    .serviceSubCard p, pre {
        color: rgb(255, 255, 255) !important;
        text-shadow: rgba(0, 0, 0,1) 1px 2px 2px;
    }

    .serviceSubCard .btn {
        background-image: var(--lightBgImg);
        border-radius: 50px;
        padding: 4px 10px;
        color: ghostwhite;
        text-shadow: 1px 1px 1px black;
        box-shadow: rgba(0, 0, 0,1) 2px 4px 2px;
        font-size: 15px
    }

        .serviceSubCard .btn:hover {
            transform: scale(1.1);
        }

.bgDarkWood-nb {
    background-image: var(--darkBgImg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bgLightWood-nb {
    background-image: var(--lightBgImg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.bgDarkWood {
    background-image: var(--darkBgImg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px
}

.bgLightWood {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px
}

.bgDarkWoodOverlay {
    background: rgba(0,0,0,0.5);
}

.bgLightWoodOverlay {
    background: rgba(0,0,0,0.3);
}

/*about*/
#getToKnowBranding h3, #getToKnowBranding h5,
#aboutContact h3, #aboutContact h5,
#aboutHistory h3, #aboutHistory h5,
#aboutMeet h3, #aboutMeet h5,
#aboutMission h3, #aboutMission h5,
#aboutPartnership h3, #aboutPartnership h5 {
    color: rgba(61,43,31,0.8) !important;
}

#aboutMeet h6 {
    color: ghostwhite !important;
}

#aboutPartnership h6, #aboutPartnership p {
    color: ghostwhite !important;
}

.iPartnershipIcon {
    color: ghostwhite !important;
    text-shadow: 2px 2px 3px black
}

#aboutMeet .imgTeamIcon {
    color: ghostwhite !important;
    text-shadow: 2px 2px 3px black !important
}

#aboutMainPage .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    padding: 10px 20px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 7px;
    font-size: 20px;
    font-weight: 500 !important
}

    #aboutMainPage .btn:hover {
        transform: scale(1.1);
    }

.aboutImageWrapper p {
    background-color: saddlebrown;
    color: ghostwhite !important;
    font-size: clamp(1rem, 1.5vw, 1.1rem) !important;
    text-shadow: 2px 2px 1px black;
}

.aboutImageContent h5 {
    color: ghostwhite !important;
    font-size: clamp(1.1rem, 2vw, 1.5rem) !important;
    text-shadow: 2px 2px 1px black;
}

.aboutImageContent p {
    color: ghostwhite !important;
    font-size: clamp(0.8rem, 1vw, 1rem) !important;
    text-shadow: 2px 2px 1px black;
}

#contactImgColumn {
    background: rgba( 0, 0, 0,0.3) !important;
}

    #contactImgColumn img {
        opacity: 0.5 !important
    }

#contactMainPage {
    min-height: 80vh !important;
}

    #contactMainPage h5 {
        color: ghostwhite !important;
        text-shadow: 1px 2px 1px black;
    }

    #contactMainPage label {
        color: ghostwhite !important
    }

    #contactMainPage .selectImgBtn {
        background-image: var(--lightBgImg);
        border-color: white !important
    }

    #contactMainPage .btn {
        background-image: var(--lightBgImg);
        border-radius: 50px;
        padding: 5px 10px;
        color: ghostwhite;
        text-shadow: 1px 1px 1px black;
        box-shadow: rgba(0, 0, 0,1) 2px 4px 7px;
        font-size: 14px;
    }

        #contactMainPage .btn:hover {
            transform: scale(1.1) !important
        }

#contactImgColumn h2 {
    text-shadow: 2px 2px 2px black
}

#contactImgColumn p, #contactImgColumn small {
    text-shadow: 1px 1px 1px black
}

#contactImgColumn .mailtolink {
    color: whitesmoke !important;
}

    #contactImgColumn .mailtolink:hover {
        color: sandybrown !important
    }


#loginCard {
    border-radius: 10px !important;
}

    #loginCard h3 {
        color: rgb(245, 222, 179) !important;
        text-shadow: 2px 2px 2px black;
    }

    #loginCard .card-body {
        border-radius: 10px !important;
        box-shadow: 2px 2px 5px rgba(0,0,0,1);
    }

    #loginCard .bi-eye, .bi-eye-slash {
        color: white !important
    }

    #loginCard .pwLogin {
        border: 0.5px solid saddlebrown !important;
        background-color: saddlebrown !important;
    }

.logLink a {
    color: ghostWhite !important;
    font-size: clamp(1rem, 1vw, 1.1rem) !important;
    text-shadow: 2px 2px 1px black;
}

.socialLogin i {
    text-shadow: 2px 2px 1px black;
}

.socialContainer p {
    text-shadow: 1px 1px 1px black;
}

.bi-eye:hover, .bi-eye-slash:hover {
    color: white !important
}

#loginCard .pwLogin:hover {
    border-color: sandybrown !important;
    background-color: sandybrown !important;
}

#loginCard .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    padding: 5px 30px;
    color: ghostwhite;
    text-shadow: 2px 2px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 7px;
    font-size: clamp(1rem, 1vw, 1.1rem);
    letter-spacing: 1px;
}

    #loginCard .btn:hover {
        transform: scale(1.1);
    }

#policyPage .heading2,
#policyStyle p,
#policyStyle .heading1,
#policyStyle .heading3,
#policyStyle strong,
#policyStyle li,
#policyStyle span {
    color: rgba(61,43,31,0.8) !important;
}

#policyStyle a b {
    color: sandybrown !important;
}

#policyBrownStyle a b:hover {
    color: rgba(61,43,31,1) !important;
}

.card_ActiveItem {
    color: rgb(245, 222, 179) !important;
}

#providerCardDetails .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 7px;
    font-size: clamp(0.8rem, 2vw, 0.95rem);
}

    #providerCardDetails .btn:hover {
        transform: scale(1.1);
    }

.selectImgBtn {
    background-color: rgba(61,43,31,1) !important;
    border: none !important
}

    .selectImgBtn:hover {
        background-color: rgba(244, 164, 96,1) !important;
        border: none !important
    }

#description-container label,
#address-container label,
#firstName-container label,
#middleName-container label,
#lastName-container label,
#name-container label,
#email-container label,
#mobileNumber-container label,
#phoneNumber-container label,
#userImage-Container label,
#userRoleLabel {
    text-shadow: 1px 2px 1px black
}

.customerLiClass .dropdown-item:hover {
    background: rgba(0,0,0,0.5);
}


.chatContainerHeader {
    background: rgba(0,0,0,0.5) !important;
}

.messageContactName, .groupDescription {
    color: ghostwhite !important
}

#chatContainer .contactLabel {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px !important;
    border: none !important;
}

    #chatContainer .contactLabel span {
        color: ghostwhite !important
    }


#chatContainer .senderLabel {
    width: 25px !important;
    height: 25px !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px !important;
    border: none !important;
    color: ghostwhite !important;
}

    #chatContainer .senderLabel span {
        color: ghostwhite !important;
    }

.messageTextContainer p {
    font-size: 13px !important;
    letter-spacing: 1px !important
}

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

.customerWindow #chatMenuContainer {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none !important;
    margin: -2px -2px 0px 0 !important
}

.customerWindow .chatIcon {
    color: ghostwhite !important;
    text-shadow: 2px 2px 2px black !important
}

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

    #chatContainerMinimize .messageContactName {
        color: ghostwhite !important;
        text-shadow: 2px 2px 2px black !important
    }

    #chatContainerMinimize .chatIcon {
        color: ghostwhite !important;
        text-shadow: 2px 2px 2px black !important
    }

#orderMenuBtn .btn, #loadMoreOrdersButton .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
}

    #orderMenuBtn .btn:hover {
        transform: scale(1.1)
    }

.text-brown {
    color: rgba(61, 43, 31, .8) !important
}

#labelProviderOrders, #labelCustomerOrders {
    text-shadow: 1px 1px 2px black !important
}

input[type="radio"][name="radioUserCart"]:checked {
    background-color: rgba(61, 43, 31, .8) !important
}

html .form-check-input[type=checkbox]:checked {
    background-color: rgba(61, 43, 31, .8) !important;
    border: none !important;
}

.badgeText {
    color: ghostwhite !important
}

.badgeStat.statusActive {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none !important;
    text-shadow: 1px 1px 2px black
}

.serviceCard h6 {
    text-shadow: 2px 2px 2px black
}

.serviceCard small {
    text-shadow: 2px 2px 2px black
}

#loadMoreOrdersButton {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

    #loadMoreOrdersButton:hover {
        transform: scale(1.1)
    }

#emptyOrderContainer #statMessage {
    color: rgba(61, 43, 31, .8) !important
}

#emptyOrderList {
    border-color: rgba(61, 43, 31, 0.2) !important
}

#orderExportBtn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

    #orderExportBtn:hover {
        transform: scale(1.1)
    }

#orderBtnContainer .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #orderBtnContainer .btn:hover {
        transform: scale(1.1) !important
    }

#btnRejectCancel {
    color: ghostwhite !important;
    border: none !important;
    height: 35px !important;
    font-size: 13px !important
}

#pv-btnContainer .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

    #pv-btnContainer .btn:hover {
        transform: scale(1.1) !important;
    }

#serviceCardHeader {
    background-image: linear-gradient(rgba(69, 64, 61, 0.4)), url(/themeimage/Brown/footerBg.jpg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.fc .fc-toolbar.fc-header-toolbar {
    background-image: var(--lightBgImg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px
}

.fc-prev-button, .fc-next-button {
    background-image: var(--darkBgImg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px;
    border: none !important;
    color: ghostwhite !important
}


.fc-todayButton-button, .fc-datePicker-button {
    background-image: var(--darkBgImg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px;
    border: none !important;
    color: ghostwhite !important
}

.fc .fc-toolbar.fc-header-toolbar {
    background-color: yellow !important;
}

.fc .fc-day-future {
    background-color: rgba(166, 123, 91,0.6);
}

.fc-day-past {
    background-color: rgba(175, 188, 197,0.5) !important;
    color: ghostwhite !important;
    pointer-events: none !important
}

.nonWorkingDays {
    background-color: rgba(175, 188, 197, 0.5) !important;
    color: ghostwhite !important;
    pointer-events: none !important
}

.fc-day-today {
    background-color: rgba( 159, 129, 112,1) !important
}

.fc .fc-daygrid-day-top .fc-daygrid-day-number {
    color: ghostwhite !important
}

.fc .fc-toolbar-title {
    color: ghostwhite !important;
    text-shadow: 2px 3px 2px black !important;
    font-size: 19px !important
}

.hasOrderEvent {
    background-color: rgba( 159, 129, 112,0.7) !important;
    text-shadow: 1px 2px 1px black !important;
}

.selectedCalendarDate {
    background: rgba(69, 64, 61,0.3) !important;
}

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

#service-Input .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: clamp(0.75rem, 1vw, 1rem);
    text-shadow: 1px 1px 2px black
}

#ServiceRequestCardBody .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black;
    margin: 5px 0;
}

#requestSummaryFooter .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

.chatDropdownMenuLink .newMessageBadge {
    width: 28px;
    height: 14px;
    position: absolute;
    top: -8px !important;
    left: 90px !important;
    background-color: saddlebrown !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    color: ghostwhite !important;
    font-size: 10px !important;
}

.chatDropdownMenuLink .newMessageBadgeSm {
    top: -4px !important;
    left: 20px !important;
}

.chatDropdownMenuLink i {
    font-size: 25px;
    color: white
}

#sendMessageBtn {
    background-image: var(--lightBgImg) !important;
    color: ghostwhite !important;
}

#cancelUpdateMessageBtn {
    background-image: var(--lightBgImg) !important;
    color: ghostwhite !important;
}

#sitepage {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

#participantBtnContainer .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: clamp(1rem, 1vw, 1.1rem);
    text-shadow: 1px 1px 2px black
}

    #participantBtnContainer .btn:hover {
        transform: scale(1.1)
    }

.svRibbon {
    position: absolute;
    left: -8px;
    top: 40px;
    z-index: 1;
    width: auto;
    height: 35px;
    padding: 0px 15px;
    text-align: right;
    background-color: navajowhite;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border-bottom-left-radius: 0px
}

    .svRibbon::before, .svRibbon::after {
        content: "";
        position: absolute;
        top: 35px;
        left: 0px;
        width: 8px;
        height: 16px;
        border-bottom-left-radius: 8px
    }

    .svRibbon::before {
        background-color: navajowhite;
    }

    .svRibbon::after {
        background-color: saddlebrown;
        border-top-left-radius: 8px;
    }

.edit-buttons-container .btn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: clamp(1rem, 1vw, 1.1rem);
    text-shadow: 1px 1px 2px black
}

.lSPager {
    background-image: var(--lightBgImg);
}

.naviLink.active {
    background-image: var(--lightBgImg);
    padding: 3px 15px !important;
    border-radius: 100px !important;
    box-shadow: rgba(255,255,255,0.2) 0px 1px 1px,rgba(255,255,255,0.2) 0px -1px 1px,rgba(255,255,255,0.2) 1px 0px 1px,rgba(255,255,255,0.2) -1px 0px 1px;
    border: 1px solid rgba(255, 255, 255,1);
    box-shadow: 2px 3px 3px rgba(201, 181, 156,0.8)
}

.naviLink:hover {
    background-image: var(--lightBgImg);
    padding: 6px 18px !important;
    border-radius: 100px !important;
}

.itemCountLabel {
    background-color: saddlebrown !important;
    color: white !important;
    font-size: 13px !important;
    border: none !important;
}

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

.aboutImageContainerBrown .lSPager {
    display: none !important
}

.aboutImageContainerBrown .lSPrev {
    position: absolute;
}

.aboutImageContainerBrown .lSNext {
    position: absolute;
}

/*x-small devices*/
@media screen and (max-width: 429px) {
    #fourStoryContainer .storyCard {
        min-height: 250px !important
    }

    .swiper-button-next {
        top: 175px !important;
        right: 3px !important
    }

    .swiper-button-prev {
        top: 175px !important;
        left: 3px !important
    }

    .chatContainerMinimizeBrown#chatContainerMinimize {
        right:22px!important;
        bottom: 2%!important
    }

    #chatContainer {
        top: 134px !important;
        left: 35px !important
    }
}

@media screen and (min-width: 430px) {
    #fourStoryContainer .storyCard {
        min-height: 300px !important
    }

    .swiper-button-next {
        top: 200px !important;
        right: 3px !important
    }

    .swiper-button-prev {
        top: 200px !important;
        left: 3px !important
    }

    .topStoryVideo {
        height: 280px !important
    }

    .chatContainerMinimizeBrown#chatContainerMinimize {
        right: 22px !important;
        bottom: 2% !important
    }

    #chatContainer {
        top: 140px !important;
        left: 88px !important
    }
}

/*small devices*/
@media screen and (max-width: 767px) {
    #indexMainColumn h1 {
        font-size: 30px !important;
    }

    .grid-sizer {
        width: 100%
    }

    .mainNewsFeed-imgContainer {
        width: 100%;
        float: none;
    }

    .imgIframeWrapper {
        width: 100%;
        float: none;
    }

    .topStoryVideo {
        min-height: 280px !important
    }

    .mainImg {
        height: 220px !important
    }

    .relatedStoryVideo {
        min-height: 230px !important
    }

    .relatedStoryImage {
        min-height: 200px !important
    }

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

    #oneStoryContainer img {
        max-height: 200px !important
    }

    #oneStoryContainer iframe {
        height: 200px !important
    }

    #twoStoryContainer img {
        height: 200px !important
    }

    #twoStoryContainer iframe {
        height: 200px !important
    }

    #threeMainStory img {
        height: 200px !important
    }

    #threeMainStory iframe {
        height: 200px !important
    }

    #profileImgWrapper-1 {
        width: 100%;
        float: none !important;
    }

    #profileImgWrapper-3 {
        width: 100%;
        float: none !important;
    }

    #profileImgWrapper-4 {
        width: 100%;
        float: none !important;
    }

    .aboutImageWrapper {
        width: 100%;
        float: none !important;
    }

    .has-chatcontact-list {
        top: 30px !important;
        left: 40px !important
    }

    .aboutImageContainerBrown .lSAction > a {
        top: 115px !important
    }

    .aboutImageContainerBrown .lSPrev {
        left: 20px !important;
    }

    .aboutImageContainerBrown .lSNext {
        right: 20px !important;
    }

    .imgGalleryContainer .lSPrev, .imgGalleryContainer .lSNext {
        top: 210px !important;
    }

    .ribbonContainer {
        height: 180px !important
    }

    #confirmPage, #forgotResponsePage, #requestConfirmationResponsePage {
        min-height: 20vh !important
    }

    #ResetPage {
        min-height: 4.5vh
    }

    #fourImgGallery {
        height: 230px !important
    }

    .chatContainerMinimizeBrown#chatContainerMinimize {
        right: 22px !important;
        bottom: 2% !important
    }
}

/*Medium devices*/
@media screen and (min-width: 768px) {

    #indexMainColumn h1 {
        font-size: 35px !important;
    }

    #indexSubColumn {
        min-height: 75vh !important
    }

    .grid-sizer {
        width: 100%
    }

    .mainNewsFeed-imgContainer {
        width: 100%;
        float: none;
    }

    .imgIframeWrapper {
        width: 100%;
        float: none;
    }

    .topStoryVideo {
        min-height: 380px !important
    }

    .mainImg {
        min-height: 210px !important
    }

    .relatedStoryVideo {
        height: 210px !important
    }

    .relatedStoryImage {
        height: 210px !important
    }

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

    #oneStoryContainer img {
        max-height: 350px !important
    }

    #oneStoryContainer iframe {
        min-height: 350px !important
    }

    #twoStoryContainer img {
        height: 350px !important
    }

    #twoStoryContainer iframe {
        height: 350px !important
    }

    #threeMainStory img {
        height: 280px !important
    }

    #threeMainStory iframe {
        height: 280px !important
    }

    .swiper-button-next {
        top: 220px !important;
        right: 3px !important
    }

    .swiper-button-prev {
        top: 220px !important;
        left: 3px !important
    }

    #profileImgWrapper-1 {
        width: 50%;
        float: left !important;
    }

    #profileImgWrapper-3 {
        width: 50%;
        float: left !important;
    }

    #profileImgWrapper-4 {
        width: 50%;
        float: left !important;
    }

    .aboutImageWrapper {
        width: 50%;
        float: left !important;
    }

    .has-chatcontact-list {
        top: 35px !important;
        left: 40px !important
    }

    #chatContainer {
        top: 150px !important;
        left: 412px !important
    }

    .aboutImageContainerBrown .lSAction > a {
        top: 115px !important
    }

    .aboutImageContainerBrown .lSPrev {
        left: 20px !important;
    }

    .aboutImageContainerBrown .lSNext {
        right: 20px !important;
    }

    #fourImgGallery {
        height: 210px !important;
    }

    .ribbonContainer {
        height: 120px !important
    }

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

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

    .rentalItemSelection .rentalMainCardWidth3 {
        width: 675px !important
    }

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

    .rentalItemSelection .rentalMainCardWidth4 {
        width: 675px !important
    }

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

    .rentalItemSelection .rentalMainCardWidth5 {
        width: 675px !important
    }

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

    .memberSelection .rentalMainCardWidth2 {
        width: 600px !important
    }

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

    .memberSelection .rentalMainCardWidth4 {
        width: 670px !important
    }

    .memberSelection .rentalMainCardWidth5 {
        width: 670px !important
    }

    .chatContainerMinimizeBrown#chatContainerMinimize {
        right: 41px !important;
        bottom: 15% !important
    }

    #confirmPage {
        min-height: 17vh !important
    }

    #forgotResponsePage, #requestConfirmationResponsePage {
        min-height: 22vh !important
    }

    #ResetPage {
        min-height: 12.5vh
    }

    #signupResponsePage, #verifyPage {
        min-height: 31vh
    }

    #twoImgGallery {
        min-height: 220px !important;
    }

    #threeImgGallery {
        height: 150px !important;
    }

    #fourStoryContainer .storyCard {
        min-height: 280px !important
    }
}

/*Large devices*/
@media screen and (min-width: 1024px) {

    #indexMainColumn {
        min-height: 50vh !important;
    }

        #indexMainColumn h1 {
            font-size: 40px !important;
        }

    #indexSubColumn {
        min-height: 55vh !important
    }

    .grid-sizer {
        width: 100%
    }

    .chatDropdownMenuLink .newMessageBadge {
        top: -7px !important;
        left: 65px !important;
    }

    #userDetailsPage {
        min-height: 60vh !important
    }

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

    .imgIframeWrapper {
        width: 50% !important;
        float: right !important;
    }

    .topStoryVideo {
        min-height: 250px !important
    }

    .mainImg {
        min-height: 250px !important
    }

    .relatedStoryVideo {
        height: 255px !important
    }

    .relatedStoryImage {
        height: 255px !important
    }

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

    #oneStoryContainer img {
        max-height: 350px !important
    }

    #oneStoryContainer iframe {
        min-height: 350px !important
    }

    #twoStoryContainer img {
        height: 300px !important
    }

    #twoStoryContainer iframe {
        height: 300px !important
    }

    #threeMainStory img {
        height: 100% !important
    }

    #threeMainStory iframe {
        height: 100% !important
    }

    #threeSubStory img {
        height: 180px !important
    }

    #threeSubStory iframe {
        height: 180px !important
    }

    #profileImgWrapper-1 {
        width: 50%;
        float: left !important;
    }

    #profileImgWrapper-3 {
        width: 50%;
        float: left !important;
    }

    #profileImgWrapper-4 {
        width: 50%;
        float: left !important;
    }

    .aboutImageWrapper {
        width: 50%;
        float: left !important;
    }

    .has-chatcontact-list {
        top: 50px !important;
        left: 20px !important
    }

    #chatContainer {
        top: 164px !important;
        left: 655px !important
    }

    .aboutImageContainerBrown .lSAction > a {
        top: 115px !important
    }

    .aboutImageContainerBrown .lSPrev {
        left: 20px !important;
    }

    .aboutImageContainerBrown .lSNext {
        right: 20px !important;
    }

    #fourImgGallery {
        height: 200px !important;
    }

    .ribbonContainer {
        height: 180px !important
    }

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

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

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

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

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

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

    .rentalItemSelection .rentalMainCardWidth5 {
        width: 900px !important
    }

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

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

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

    .memberSelection .rentalMainCardWidth5 {
        width: 770px !important
    }

    #loginPage {
        min-height: 30vh;
    }

    #forgotMainPage {
        min-height: 31vh !important
    }

    #confirmPage {
        min-height: 31vh !important
    }

    #forgotResponsePage, #requestConfirmationResponsePage {
        min-height: 35vh !important
    }

    #ResetPage {
        min-height: 27.5vh
    }

    #ResetConfirmationPage {
        min-height: 30.5vh
    }

    #signupResponsePage {
        min-height: 31vh
    }

    #contactMainPage {
        min-height: 70vh !important
    }

    #twoImgGallery {
        min-height: 230px !important;
    }

    #threeImgGallery {
        height: 200px !important;
    }

    #fourStoryContainer .storyCard {
        min-height: 245px !important
    }

    .swiper-button-next {
        top: 200px !important;
        right: 3px !important
    }

    .swiper-button-prev {
        top: 200px !important;
        left: 3px !important
    }

    .chatContainerMinimizeBrown#chatContainerMinimize {
        right: 51px !important;
        bottom: 37% !important
    }
}

/*X-Large devices*/
@media screen and (min-width: 1280px) {
    #indexMainColumn h1 {
        font-size: 42px !important;
    }

    #indexSubColumn {
        min-height: 90vh !important
    }

    #storyMainCon {
        min-height: 35vh
    }

    .grid-sizer {
        width: 33.33%
    }

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

    .imgIframeWrapper {
        width: 50% !important;
        float: right !important;
    }

    .topStoryVideo {
        min-height: 300px !important
    }

    .mainImg {
        min-height: 330px !important
    }

    .relatedStoryVideo {
        height: 330px !important
    }

    .relatedStoryImage {
        height: 330px !important
    }

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

    #oneStoryContainer img {
        max-height: 400px !important
    }

    #oneStoryContainer iframe {
        min-height: 400px !important
    }

    #twoStoryContainer img {
        height: 300px !important
    }

    #twoStoryContainer iframe {
        height: 300px !important
    }

    #threeMainStory img {
        height: 100% !important
    }

    #threeMainStory iframe {
        height: 100% !important
    }

    #threeSubStory img {
        height: 180px !important
    }

    #threeSubStory iframe {
        height: 180px !important
    }

    #profileImgWrapper-1 {
        width: 50%;
        float: left !important;
    }

    #profileImgWrapper-3 {
        width: 100%;
        float: none !important;
    }

    #profileImgWrapper-4 {
        width: 100%;
        float: none !important;
    }

    .has-chatcontact-list {
        top: 50px !important;
        left: 90px !important
    }

    #chatContainer {
        top: 142px !important;
        left: 845px !important
    }

    .chatContainerMinimizeBrown#chatContainerMinimize {
        right: 115px !important;
        bottom: 2% !important
    }

    .chatDropdownMenuLink .newMessageBadge {
        top: -8px !important;
        left: 80px !important;
    }

    .aboutImageContainerBrown .lSAction > a {
        top: 105px !important
    }

    .aboutImageContainerBrown .lSPrev {
        left: 20px !important;
    }

    .aboutImageContainerBrown .lSNext {
        right: 20px !important;
    }

    #fourImgGallery {
        height: 180px !important;
    }

    .ribbonContainer {
        height: 210px !important
    }

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

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

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

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

    .rentalItemSelection .rentalMainCardWidth4 {
        width: 1030px !important
    }

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

    .rentalItemSelection .rentalMainCardWidth5 {
        width: 1030px !important
    }

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

    .memberSelection .rentalMainCardWidth2 {
        width: 650px !important
    }

    .memberSelection .rentalMainCardWidth3 {
        width: 925px !important
    }

    .memberSelection .rentalMainCardWidth4 {
        width: 830px !important
    }

    .memberSelection .rentalMainCardWidth5 {
        width: 1020px !important
    }

    #forgotMainPage {
        min-height: 45vh !important
    }

    #confirmPage {
        min-height: 45.7vh !important
    }

    #forgotResponsePage, #requestConfirmationResponsePage {
        min-height: 51.7vh !important
    }

    #ResetPage {
        min-height: 38.5vh
    }

    #ResetConfirmationPage, #signupResponsePage, #verifyPage {
        min-height: 45vh
    }

    #threeImgGallery {
        height: 210px !important;
    }

    #fourStoryContainer .storyCard {
        min-height: 280px !important
    }

    .swiper-button-next {
        top: 210px !important;
        right: 3px !important
    }

    .swiper-button-prev {
        top: 210px !important;
        left: 3px !important
    }
}

/*XX-Large devices*/
@media screen and (min-width: 1366px) {
    #indexMainColumn h1 {
        font-size: 40px !important;
    }

    #storyMainCon {
        min-height: 35vh
    }

    .grid-sizer {
        width: 33.33%
    }

    .imgIframeWrapper {
        width: 50% !important
    }

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

    #oneStoryContainer img {
        max-height: 400px !important
    }

    #oneStoryContainer iframe {
        min-height: 400px !important
    }

    #threeMainStory img {
        height: 100% !important
    }

    #threeMainStory iframe {
        height: 100% !important
    }

    #threeSubStory img {
        height: 215px !important
    }

    #threeSubStory iframe {
        height: 215px !important
    }

    #profileImgWrapper-1 {
        width: 50%;
        float: left !important;
    }

    #profileImgWrapper-3 {
        width: 100%;
        float: none !important;
    }

    #profileImgWrapper-4 {
        width: 100%;
        float: none !important;
    }

    .has-chatcontact-list {
        top: 50px !important;
        left: 90px !important
    }

    #chatContainer {
        top: 144px !important;
        left: 912px !important
    }

    .chatContainerMinimizeBrown#chatContainerMinimize {
        right: 124px !important;
        bottom: 2% !important
    }

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

    .aboutImageContainerBrown .lSPrev {
        left: 20px !important;
    }

    .aboutImageContainerBrown .lSNext {
        right: 20px !important;
    }

    #fourImgGallery {
        height: 190px !important;
    }

    #forgotMainPage {
        min-height: 47.8vh !important
    }

    #confirmPage {
        min-height: 48vh !important
    }

    #forgotResponsePage, #requestConfirmationResponsePage {
        min-height: 54.5vh !important
    }

    #ResetPage {
        min-height: 41.8vh
    }

    #ResetConfirmationPage, #signupResponsePage, #verifyPage {
        min-height: 48vh
    }

    #twoImgGallery {
        min-height: 260px !important;
    }

    #threeImgGallery {
        height: 230px !important;
    }

    #fourStoryContainer .storyCard {
        min-height: 300px !important
    }

    .swiper-button-next {
        top: 220px !important;
        right: 3px !important
    }

    .swiper-button-prev {
        top: 220px !important;
        left: 3px !important
    }
}

/*XXXL-Large devices*/
@media screen and (min-width: 1528px) {
    #indexMainColumn h1 {
        font-size: 45px !important;
    }

    #indexSubColumn {
        min-height: 85vh !important
    }

    #storyMainCon {
        min-height: 40vh
    }

    .grid-sizer {
        width: 33.33%
    }

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

    .imgIframeWrapper {
        width: 50% !important;
        float: right !important;
    }

    .topStoryVideo {
        min-height: 400px !important
    }

    .mainImg {
        min-height: 300px !important
    }

    .relatedStoryVideo {
        height: 240px !important
    }

    .relatedStoryImage {
        height: 240px !important
    }

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

    #twoStoryContainer img {
        height: 300px !important
    }

    #twoStoryContainer iframe {
        height: 300px !important
    }

    #threeMainStory img {
        height: 100% !important
    }

    #threeMainStory iframe {
        height: 100% !important
    }

    #threeSubStory img {
        height: 230px !important
    }

    #threeSubStory iframe {
        height: 230px !important
    }

    .has-chatcontact-list {
        top: 50px !important;
        left: 110px !important
    }

    #chatContainer {
        top: 144px !important;
        left: 1000px !important
    }

    .chatContainerMinimizeBrown#chatContainerMinimize {
        right: 198px !important;
        bottom: 2% !important
    }

    #profileImgWrapper-3 {
        width: 100%;
        float: none !important;
    }

    #profileImgWrapper-4 {
        width: 100%;
        float: none !important;
    }

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

    .aboutImageContainerBrown .lSPrev {
        left: 20px !important;
    }

    .aboutImageContainerBrown .lSNext {
        right: 20px !important;
    }

    #fourImgGallery {
        height: 220px !important;
    }

    .ribbonContainer {
        height: 240px !important
    }

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

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

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

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

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

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

    .rentalItemSelection .rentalMainCardWidth5 {
        width: 1070px !important
    }

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

    .memberSelection .rentalMainCardWidth2 {
        width: 650px !important
    }

    .memberSelection .rentalMainCardWidth3 {
        width: 950px !important
    }

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

    .memberSelection .rentalMainCardWidth5 {
        width: 1025px !important
    }

    #forgotMainPage {
        min-height: 46vh !important
    }

    #confirmPage {
        min-height: 46vh !important
    }

    #forgotResponsePage, #requestConfirmationResponsePage {
        min-height: 52.5vh !important
    }

    #ResetPage {
        min-height: 39.8vh
    }

    #ResetConfirmationPage, #signupResponsePage, #verifyPage {
        min-height: 46vh
    }

    #twoImgGallery {
        min-height: 260px !important;
    }

    #threeImgGallery {
        height: 230px !important;
    }

    #fourStoryContainer .storyCard {
        min-height: 230px !important
    }

    .swiper-button-next {
        top: 185px !important;
        right: 3px !important
    }

    .swiper-button-prev {
        top: 185px !important;
        left: 3px !important
    }
}

/*XXXX-Large devices*/
@media screen and (min-width: 1912px) {
    #indexMainColumn h1 {
        font-size: 45px !important;
    }

    #storyMainCon {
        min-height: 40vh
    }

    .grid-sizer {
        width: 25%
    }

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

    .imgIframeWrapper {
        width: 50% !important;
        float: right !important;
    }

    .topStoryVideo {
        min-height: 400px !important
    }

    .mainImg {
        min-height: 350px !important
    }

    .relatedStoryVideo {
        height: 270px !important
    }

    .relatedStoryImage {
        height: 270px !important
    }

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

    #twoStoryContainer img {
        height: 350px !important
    }

    #twoStoryContainer iframe {
        height: 350px !important
    }

    #threeMainStory img {
        height: 100% !important
    }

    #threeMainStory iframe {
        height: 100% !important
    }

    #threeSubStory img {
        height: 260px !important
    }

    #threeSubStory iframe {
        height: 260px !important
    }

    #chatContainer {
        top: 148px !important;
        left: 1340px !important
    }

    #profileImgWrapper-1 {
        width: 50%;
        float: left !important;
    }

    #profileImgWrapper-3 {
        width: 100%;
        float: none !important;
    }

    #profileImgWrapper-4 {
        width: 100%;
        float: none !important;
    }

    .aboutImageContainerBrown .lSAction > a {
        top: 165px !important
    }

    .aboutImageContainerBrown .lSPrev {
        left: 25px !important;
    }

    .aboutImageContainerBrown .lSNext {
        right: 25px !important;
    }

    #fourImgGallery {
        height: 295px !important;
    }

    .ribbonContainer {
        height: 280px !important
    }

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

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

    .rentalItemSelection .rentalMainCardWidth3 {
        width: 1100px !important
    }

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

    .rentalItemSelection .rentalMainCardWidth4 {
        width: 1350px !important
    }

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

    .rentalItemSelection .rentalMainCardWidth5 {
        width: 1050px !important
    }

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

    .memberSelection .rentalMainCardWidth2 {
        width: 750px !important
    }

    .memberSelection .rentalMainCardWidth3 {
        width: 950px !important
    }

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

    .memberSelection .rentalMainCardWidth5 {
        width: 1095px !important
    }

    #loginPage {
        min-height: 56vh !important;
    }

    #forgotMainPage {
        min-height: 57vh !important
    }

    .chatContainerMinimizeBrown#chatContainerMinimize {
        right: 248px !important;
        bottom: 2% !important
    }

    #confirmPage {
        min-height: 57vh !important
    }

    #forgotResponsePage, #requestConfirmationResponsePage {
        min-height: 61.5vh !important
    }

    #ResetPage {
        min-height: 51.5vh
    }

    #ResetConfirmationPage, #signupResponsePage, #verifyPage {
        min-height: 57vh
    }

    #threeImgGallery {
        height: 290px !important;
    }

    #fourStoryContainer .storyCard {
        min-height: 285px !important
    }

    .swiper-button-next {
        top: 215px !important;
        right: 3px !important
    }

    .swiper-button-prev {
        top: 215px !important;
        left: 3px !important
    }
}

#serviceMainPage {
    min-height: 53.5vh !important;
}

.login-link {
    color: sandybrown !important;
}

    .login-link:hover {
        color: goldenrod !important;
    }

.serviceHeaderCard {
    height: 20px !important;
}

.servicePriceRibbon {
    background-color: #d8bfa7 !important;
}

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

    .servicePriceRibbon::after {
        background-color: #3d2c1b !important;
    }

    .servicePriceRibbon small {
        color: var(--masala) !important
    }

/*added style*/

#signupMainPage .main_CardHeader, #signupMainPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

    #signupMainPage .main_CardHeader h5 {
        color: whitesmoke;
    }


#signupMainPage .cardItem-2 {
    color: whitesmoke !important;
}

#signupMainPage h6, #signupMainPage p, #signupMainPage label {
    color: white !important
}

#signupMainPage .card-body {
    background-image: var(--lightBgImg);
}

#signupMainPage #signUpForm .card-body {
    background-image: var(--darkBgImg);
}

#signupMainPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #signupMainPage .btn:hover {
        transform: scale(1.1) !important
    }

#signupMainPage .eulaCardArrow i {
    color: ghostwhite !important
}

#signupMainPage .eulaCheckBox {
    background-color: saddlebrown !important;
    color: var(--masala) !important
}

#signupMainPage .iti__arrow {
    border-top: 4px solid white;
}



#forgotMainPage .main_CardHeader, #forgotMainPage .main_CardFooter {
    background-image: var(--darkBgImg);
    padding: 14px 10px
}

#forgotMainPage h5, #forgotMainPage label {
    color: ghostwhite !important
}

#forgotMainPage .card-body {
    background-image: var(--lightBgImg);
}

#forgotMainPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #forgotMainPage .btn:hover {
        transform: scale(1.1) !important
    }

#forgotResponsePage {
    min-height: 500px;
    display: flex;
    justify-content: center
}

    #forgotResponsePage h6, #forgotResponsePage p {
        color: var(--masala) !important;
        letter-spacing: 1px
    }

#accountProviderPage .main_CardHeader, #accountProviderPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

#accountProviderPage h6, #accountProviderPage label, #accountProviderPage a, #accountProviderPage span {
    color: ghostwhite !important
}

#accountProviderPage .card-body {
    background-image: var(--lightBgImg);
}

#accountProviderPage input {
    background-color: transparent !important;
    border-color: #efdecd;
    color: ghostwhite !important
}

#accountProviderPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #accountProviderPage .btn:hover {
        transform: scale(1.1) !important
    }

#accountProviderPage .input-group .biEye, #accountProviderPage .input-group .biEyeSlash {
    background-image: var(--darkBgImg) !important
}

#ResetPage h6 {
    color: var(--masala) !important
}

#ResetPage h4 {
    color: ghostwhite !important
}

#ResetPage label {
    color: ghostwhite !important
}

#ResetPage .main_CardHeader, #ResetPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

#ResetPage .card-body {
    background-image: var(--lightBgImg);
}

#ResetPage .input-group .biEye, #ResetPage .input-group .biEyeSlash {
    background-image: var(--darkBgImg) !important
}

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

#ResetPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #ResetPage .btn:hover {
        transform: scale(1.1) !important
    }

#ResetPage .loginlink:hover {
    color: white;
    background: var(--masala);
    border: none;
}

#ResetConfirmationPage .main_CardHeader, #ResetConfirmationPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

#ResetConfirmationPage .card-body {
    background-image: var(--lightBgImg);
}

#ResetConfirmationPage h5, #ResetConfirmationPage label {
    color: white;
}

#ResetConfirmationPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #ResetConfirmationPage .btn:hover {
        transform: scale(1.1) !important
    }

#requestConfirmationResponsePage label, #requestConfirmationResponsePage small {
    color: var(--masala) !important;
}

#signupResponsePage h6, #signupResponsePage p {
    color: var(--masala) !important;
    letter-spacing: 1px;
    line-height: 2
}

#verifyPage .main_CardHeader, #verifyPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

#verifyPage .card-body {
    background-image: var(--lightBgImg);
}

#verifyPage h5, #verifyPage label {
    color: ghostwhite
}

#verifyPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #verifyPage .btn:hover {
        transform: scale(1.1) !important
    }

#confirmPage h6, #forgotResponsePage h6, #requestConfirmationResponsePage h6 {
    color: var(--masala);
    font-size: clamp(1.2rem, 1vw, 3.5rem) !important;
    line-height: 1.5
}

#confirmPage h5, #confirmPage label {
    color: var(--white);
}

#confirmPage .main_CardHeader, #confirmPage .main_CardFooter {
    background-image: var(--darkBgImg);
}

#confirmPage .card-body {
    background-image: var(--lightBgImg);
}

#confirmPage .input-group .biEye, #confirmPage .input-group .biEyeSlash {
    background-image: var(--darkBgImg) !important
}

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

#confirmPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #confirmPage .btn:hover {
        transform: scale(1.1) !important
    }

#brownTloginPage .card {
    background-image: var(--lightBgImg) !important;
}

#brownTloginPage .card-body {
    background-image: var(--darkBgImg) !important;
}

#brownTloginPage .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #brownTloginPage .btn:hover {
        transform: scale(1.1) !important
    }

#brownTloginPage .biEye, #brownTloginPage .biEyeSlash {
    background-image: var(--darkBgImg) !important;
    height: 25px;
    width: 25px;
    border-radius: 100px;
    display: flex;
    justify-content: center
}

#brownHomeTerms p, #brownHomeTerms h6 {
    color: rgba(61, 43, 31, .8) !important
}

#modalRequestCode .modal-header, #modalRequestCode .modal-footer {
    background-image: var(--darkBgImg) !important;
}

#modalRequestCode .modal-body {
    background-image: var(--lightBgImg) !important;
}

#modalRequestCode #requestCodeLabel {
    color: ghostwhite !important;
}

#modalRequestCode label {
    color: ghostwhite !important;
}

#modalRequestCode .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #modalRequestCode .btn:hover {
        transform: scale(1.1)
    }

#modalRequestCode .card-footer:last-child {
    border-radius: 0 !important
}

#modalRequestCode .modal-header {
    border: 0 !important
}

#modalRequestCode #onetimeCode-container small {
    color: ghostwhite !important
}

#modalRequestCode #countDownMessage, #modalRequestCode span {
    color: white !important
}

#modalRequestCode #countDown {
    color: yellow !important
}


#modalOneTimeSignup .modal-header, #modalOneTimeSignup .modal-footer {
    background-image: var(--darkBgImg) !important;
}

#modalOneTimeSignup .modal-body {
    background-image: var(--lightBgImg) !important;
}

#modalOneTimeSignup .card-footer:last-child {
    border-radius: 0 !important
}

#modalOneTimeSignup .modal-header {
    border: 0 !important
}

#modalOneTimeSignup label {
    color: ghostwhite;
}

#modalOneTimeSignup .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #modalOneTimeSignup .btn:hover {
        transform: scale(1.1);
    }

#modalOneTimeSignup .bi-arrow-down-circle-fill {
    color: rgba(69, 64, 61,0.6);
}

#modalOneTimeUserCreated .modal-header, #modalOneTimeUserCreated .card-footer {
    background-image: var(--darkBgImg) !important;
}

#modalOneTimeUserCreated .modal-body {
    background-image: var(--lightBgImg) !important;
}

#modalOneTimeUserCreated label {
    color: ghostwhite;
}

#modalOneTimeUserCreated .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #modalOneTimeUserCreated .btn:hover {
        transform: scale(1.1);
    }

#modalOneTimeUserCreated .modal-header, #modalOneTimeUserCreated .card-footer {
    background-image: var(--darkBgImg) !important;
}

#modalOneTimeUserCreated .modal-header, #modalOneTimeUserCreated .card-footer {
    background-image: var(--lightBgImg) !important;
}

    #modalOneTimeUserCreated .card-footer:last-child {
        border-radius: 0 !important
    }

#modalOneTimeUserCreated .modal-header {
    border: 0 !important
}

#modalOneTimeUserCreated label {
    color: ghostwhite;
}

#modalOneTimeUserCreated .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #modalOneTimeUserCreated .btn:hover {
        transform: scale(1.1);
    }

#userPasswordResetMdl .btn {
    background-image: var(--lightBgImg) !important;
    border-radius: 50px !important;
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black !important;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px !important;
    font-size: 14px !important;
    text-shadow: 1px 1px 2px black !important;
    border: none !important;
    margin: 8px 0;
}

    #userPasswordResetMdl .btn:hover {
        transform: scale(1.1);
    }

#userPasswordResetMdl h5, #enableOtpConfirmModal h6 {
    text-shadow: 1.5px 1.5px 1px black !important
}

#enableOtpConfirmModal label {
    text-shadow: 1px 1px 1px black !important
}

#signupMainPage .terms-header {
    color: white !important;
}

#signupMainPage .terms-content {
    color: white !important;
    line-height: 1.5 !important;
}

    #signupMainPage .terms-content b {
        color: white !important;
    }

    #signupMainPage .terms-content span {
        color: white !important;
    }

#modalOneTimeSignup .terms-header {
    color: rgba(61, 43, 31, .8) !important;
}

#modalOneTimeSignup .terms-content {
    color: rgba(61, 43, 31, .8) !important;
    line-height: 1.5 !important;
}

    #modalOneTimeSignup .terms-content b {
        color: rgba(61, 43, 31, .8) !important;
    }

    #modalOneTimeSignup .terms-content span {
        color: rgba(61, 43, 31, .8) !important;
    }

#brownHomeTerms .terms-header {
    color: rgba(61, 43, 31, .8) !important;
}

#brownHomeTerms .terms-content {
    color: rgba(61, 43, 31, .8) !important;
    line-height: 1.5 !important;
}

    #brownHomeTerms .terms-content b {
        color: #f4a460 !important;
    }

    #brownHomeTerms .terms-content span {
        color: #f4a460 !important;
    }

#orderPaymentList.dataTable thead th {
}

#orderPaymentList.dataTable tbody td {
    background-image: var(--darkBgImg);
    background-position: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: rgba(61, 43, 31,1) 7px 7px 8px;
    color: white !important;
}

.bgBrownBtn {
    background-image: var(--lightBgImg);
    border-radius: 50px;
    color: ghostwhite;
    text-shadow: 1px 1px 1px black;
    box-shadow: rgba(0, 0, 0,1) 2px 4px 5px;
    font-size: 14px;
    text-shadow: 1px 1px 2px black
}

    .bgBrownBtn:hover {
        transform: scale(1.1);
        color: ghostwhite;
    }

.mainNewsFeedContent * {
    color: white !important;
    margin-bottom: unset;
    font-family: var(--questrial) !important;
    font-size: calc(13px + .13vw) !important;
}

#fourProfileContainer p, #oneProfileContainer p, #threeProfileContainer p {
    margin: 0 !important
}

.subNewsFeedItemExtended h6, .subNewsFeedItemExtended p, .subNewsFeedItemExtended small {
    color: ghostwhite !important
}

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

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

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

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

.bootbox .modal-content {
    background: var(--lightBgImg)
}

.bootbox .modal-header, .bootbox .modal-footer {
    background: var(--darkBgImg);
    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
}

.bootbox .modal-footer .btn {
    background: var(--lightBgImg) !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);
    }

#cancelReasonModal .btnClose {
    color: ghostwhite;
    font-size: 1rem !important;
    text-shadow: 1px 1px 1px black;
    transform: scale(1);
    height: 25px;
    width: 25px;
    border-radius: 50%;
    border: 1px solid ghostWhite;
    display: flex;
    justify-content: center;
    align-items: center
}

    #cancelReasonModal .btnClose:hover {
        transform: scale(1.2);
    }

#cancelReasonModal .btnClose {
    color: ghostwhite;
    font-size: 1rem !important;
    text-shadow: 1px 1px 1px black;
}

#cancelReasonModal p, #cancelReasonModal label {
    text-shadow: 1px 2px 1px black;
}

.orderPriceRibbon {
    background-color: #836953 !important
}

    .orderPriceRibbon::before {
        background-color: #836953 !important
    }

    .orderPriceRibbon::after {
        background-color: #654321 !important
    }

    .orderPriceRibbon small {
        text-shadow: 1px 1px 1px black !important
    }

.textValidation {
    color: wheat !important;
    text-shadow: 1px 1px 1px black;
}

.imgGallerySrc {
    min-height: 120px !important
}

#cropModal .modal-content {
    height: auto !important
}

#enableOtpConfirmModal .modal-content, #disableOtpConfirmModal .modal-content {
    width: auto !important;
}

#enableOtpConfirmModal .textValidation {
    color: ghostwhite !important
}

#disableOtpConfirmModal .textValidation {
    color: #ebe932 !important;
    text-shadow: 1px 1px 1px black !important;
    font-size: 16px !important;
    letter-spacing: 1px !important;
}

#modalChatGroupMembers .modal-content {
    width: 100% !important;
}

#modalChatGroupMembers .modal-title {
    color: ghostwhite !important;
}

#modalChatGroupMembers #modalChatMemberList_info {
    color: ghostwhite !important;
}

#modalChatGroupMembers .dataTables_length label {
    color: ghostwhite !important;
}

#modalChatGroupMembers .sorting {
    background-color: rgba(75,38,0,0.7) !important;
    color: ghostwhite !important
}

.page-item.active .page-link {
    background-color: rgba(75,38,0,1) !important;
    border: none !important;
    color: ghostwhite !important;
}

#modalChatGroupMembers input[type="checkbox"]:checked {
    background-color: rgba(75,38,0,1) !important;
}

#modalOneTimeSignup #modalOneTimeSignupTitle {
    color: ghostwhite !important;
}

#imgGalleryContainer .lSAction > a {
    margin-top: -16px !important;
}

#imgGalleryContainer .lSAction .lSPrev {
    left: 25px !important;
}

#imgGalleryContainer .lSAction .lSNext {
    right: 25px !important;
}

#orderDetailsCardBody .textValidation {
    color: #dae71a !important
}

#modalRequestCode #requestCodeLabel, #modalRequestCode label {
    text-shadow: 1px 1px 1px black !important
}

#modalOneTimeSignup .input-group .biEye {
    background-color: #4c3f37 !important;
    color: ghostwhite
}

#modalOneTimeSignup .bi-question-circle-fill {
    color: #dae71a !important;
}

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

#modalOneTimeSignup #accountSignUpEula h6 {
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black;
    letter-spacing: 1px !important
}

#modalOneTimeSignup #accountSignUpEula small, #modalOneTimeSignup #accountSignUpEula p {
    color: ghostwhite !important;
    text-shadow: 1px 1px 1px black;
    letter-spacing: 1px !important
}

#modalOneTimeSignup #accountSignUpEula span {
    color: #dae71a !important
}

#verifyPage .textValidation {
    font-size: 0.9rem !important;
    color: #ebe932 !important
}

#passwordResetEmail-error, #passwordResetPassword-error, #passwordResetConfirmPassword-error {
    font-size: 0.9rem !important;
    color: #ebe932 !important
}

#left-slide {
    border: none !important
}

#exportModal label, #exportModal h6, #exportModal span, #filterModal label, #filterModal h5 {
    text-shadow: 1px 1px 1px black
}


#serviceInfoList p, #orderImgContainer p, #orderImgContainer small {
    text-shadow: 1px 1px 1px black
}

.selectedRentalItemContainer label {
    text-shadow: 1px 1px 1px black !important
}

#directionModal h5, #directionModal p {
    text-shadow: 2px 1px 1px black;
}

#directionModal .btn {
    box-shadow: 2px 3px 3px black;
    text-shadow: 2px 1px 1px black;
    border: 1px solid wheat;
    transform: scale(1);
}

    #directionModal .btn:hover {
        box-shadow: none;
        text-shadow: 2px 1px 1px black;
        border: 1px solid wheat;
        transform: scale(1.1);
    }

.orderDetailsContainerBrown .bi-question-circle-fill {
    color: ghostwhite !important
}