﻿@font-face {
    font-family: 'TheChairman-Regular';
    src: url('../fonts/TheChairman-Regular.otf');
}

@font-face {
    font-family: 'HelveticaNowText-Light';
    font-weight: 600 !important;
    src: url('../fonts/HelveticaNowText-Light.ttf');
}

@font-face {
    font-family: 'HelveticaNowText-Medium';
    src: url('../fonts/HelveticaNowText-Medium.ttf');
}

@font-face {
    font-family: 'mont-book';
    src: url('../fonts/mont-book.otf');
}

@font-face {
    font-family: 'mont-heavy';
    src: url('../fonts/mont-heavy.otf') format('opentype');
}

@font-face {
    font-family: 'mont-regular';
    src: url('../fonts/mont-regular.otf') format('opentype');
}

@font-face {
    font-family: 'mont-semibold';
    src: url('../fonts/mont-semibold.otf') format('opentype');
}

@font-face {
    font-family: 'mont-bold';
    src: url('../fonts/mont-bold.otf') format('opentype');
}


header {
    background-color: transparent !important;
}


.mud-main-content {
    padding-top: 5px;
    padding-bottom: 5px;
}

body {
    background-image: url("/images/Landing/21_Homepage_bg_2x.png");
    background-repeat: no-repeat;
    max-width: unset !important;
    font-family: 'mont-book' !important;
    font-weight: 500 !important;
}

.f-bolder {
    font-family: 'mont-semibold' !important;
    font-weight: 600 !important;
}

.f-bolder5 {
    font-family: 'mont-semibold' !important;
    font-weight: 500 !important;
}

.font-h1-bolder {
    font-family: 'mont-semibold' !important;
    font-weight: 600 !important;
    color: #295135;
    font-size: 2.5rem;
}

.bg-white {
    background: #fff
}

.w-25 {
    width: 25%
}

.w-50 {
    width: 50%
}

.mud-typography-h5,
.mud-typography-subtitle2 {
    /*   font-weight: 600 !important;*/
}


.img-container {
    align-items: center;
    display: flex;
    justify-content: center;
    width: 100%;
}


.img-container img {
    width: 30% !important;
    padding-left: 5%;

}

.mud-expand-panel .mud-expand-panel-header {
    padding: 5px 2px
}



.mud-theme-primary {
    background-color: transparent !important;
    color: rgb(41, 81, 53) !important;
}

.Home1 {
    margin-top: 0px;
}

.about-susenji-image {
    background-image: url("/images/Landing/02_About_Susenji_top_cover_2x_new.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: bottom;
    overflow: hidden;
    margin-top: -70px
}

.about-susenji-essence-section {
    background-image: url("/images/Landing/03_About_Susenji_background_2x.png");
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    margin-top: -5px;
    padding: 0 10% 10%;
}


.about-susenji-title {
    padding: 19% 10% 35%;
}

.company-profile-section {
    background-image: url("/images/Landing/company_profile/02_company_profile_top_cover_2x.png");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
    margin-top: -70px
}

.company-profile-title {
    padding: 8% 10% 42%;
}

.company-profile-title h5 {
    color: #fff !important;
    padding: 3px 0;

}




.foundername {
    font-family: 'TheChairman-Regular';
    font-size: 2.5rem;
    font-weight: 100;
    margin-bottom: 1rem;
}

.contact-us-section {
    background-image: url("/images/Landing/contact/01_Contact_page_top_cover_2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10%;
    margin-top: -70px
}

.contact-us-title {
    margin-left: auto;
    padding: 15% 0;
    width: 40%;
}

.contact-us-title h5 {
    color: #295135 !important;
    padding: 3px 0;
    letter-spacing: 1px;
    margin-bottom: 3%;
    width: 100%;
    text-align: left;
    font-size: 30px;
    font-weight: 600
}

.google-map iframe {
    border: 0;
    height: 500px;
    width: 900px;
}

.text-center {
    text-align: center
}

.certification {
    display: flex;
    padding: 56px 0 5px 0
}

.certification-item {
    padding: 0px 0px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.certification-item img {
    padding: 0 15px;
}

.certification-item h6 {
    font-size: .6rem;
    font-weight: 600;
    padding: 8px 10px;
}

/**Products***/

.sticky-product-container {
    align-items: center;
    bottom: 0;
    box-shadow: 0 -3px 3px -3px #939393;
    display: flex;
    left: 0;
    position: fixed;
    width: 100%;
    z-index: 23;
}

.sticky-product-container .sticky-product {
    align-items: center;
    background-color: #fff;
    color: #295135;
    display: flex;
    flex: 6;
    gap: 1rem;
    height: 50px;
    justify-content: center;
    padding: 5px;
}

.sticky-product-container .sticky-product img {
    height: 40px;
    margin-right: 5px;
    width: 150px;
}

.sticky-product-container .sticky-product .img-depuff {
    width: auto
}

.sticky-product-container .sticky-product .img-sculpt {
    width: 10px;
}

.sticky-product-container .sticky-product h4 {
    font-size: 1.5rem;
}

.susenji-mofa-section,
.susenji-shake-section,
.susenji-ollie-section,
.susenji-depuff-section,
.susenji-sculpt-section,
.susenji-luna-section {
    background-image: url("/images/Landing/products/Mofa/01_Susenji_MOFA+_top_cover_2x.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: 10%;
    margin-top: -70px;
    height: 100vh
}

.susenji-shake-section {
    background-image: url("/images/Landing/products/shake/01_Susenji_Shake_top_cover_2x.png");
}

.susenji-ollie-section {
    background-image: url("/images/Landing/products/Ollie/01_Susenji_Ollie_top_cover_2x.png");
}

.susenji-depuff-section {
    background-image: url("/images/Landing/products/Depuff/01_Susenji_DePuff_top_cover_2x.png");
}

.susenji-sculpt-section {
    background-image: url("/images/Landing/products/Sculpt/01_Susenji_Sculpt_top_cover_2x.png");
}

.susenji-luna-section {
    background-image: url("/images/Landing/products/Luna/01_Susenji_Luna_top_cover_2x.png");
}

.susenji-mofa-banner,
.susenji-shake-banner,
.susenji-ollie-banner,
.susenji-depuff-banner,
.susenji-sculpt-banner,
.susenji-luna-banner {
    background-image: url(/images/Landing/products/Mofa/08_Susenji_MOFA+_model_2x.png);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0;
    padding: 10%;
}

.susenji-shake-banner {
    background-image: url(/images/Landing/products/shake/09_Susenji_Shake_model_2x.png);
}

.susenji-ollie-banner {
    background-image: url(/images/Landing/products/ollie/10_Susenji_Ollie_model_2x.png);
}

.susenji-depuff-banner {
    background-image: url(/images/Landing/products/Depuff/07_Susenji_DePuff_model_2x.png);
}

.susenji-sculpt-banner {
    background-image: url(/images/Landing/products/Sculpt/08_Susenji_Sculpt_model_2x.png);
}

.susenji-luna-banner {
    background-image: url(/images/Landing/products/Luna/08_Susenji_Luna_model_2x.png);
}

.susenji-mofa-title,
.susenji-mofa-banner-info,
.susenji-shake-title,
.susenji-shake-banner-info,
.susenji-ollie-title,
.susenji-ollie-banner-info,
.susenji-depuff-title,
.susenji-depuff-banner-info,
.susenji-sculpt-title,
.susenji-sculpt-banner-info,
.susenji-luna-title,
.susenji-luna-banner-info {
    padding: 15% 0;
}



.susenji-mofa-title h5,
.susenji-mofa-banner-info h5,
.susenji-shake-title h5,
.susenji-shake-banner-info h5,
.susenji-ollie-title h5,
.susenji-ollie-banner-info h5,
.susenji-depuff-title h5,
.susenji-depuff-banner-info h5,
.susenji-sculpt-title h5,
.susenji-sculpt-banner-info h5,
.susenji-luna-title h5,
.susenji-luna-banner-info h5 {
    color: #295135 !important;
    font-family: mont-heavy !important;
    padding: 13px 0;
    font-weight: 600;
    font-size: 2rem;
}

.susenji-mofa-title h6,
.susenji-mofa-banner-info h6,
.susenji-shake-title h6,
.susenji-shake-banner-info h6,
.susenji-ollie-title h6,
.susenji-ollie-banner-info h6,
.susenji-depuff-title h6,
.susenji-depuff-banner-info h6,
.susenji-sculpt-title h6,
.susenji-sculpt-banner-info h6,
.susenji-luna-title h6,
.susenji-luna-banner-info h6 {
    color: #000 !important;
    padding: 3px 0;
    font-weight: 600;
    font-size: 1.25rem;
}

.susenji-sculpt-banner-info.bottom,
.susenji-luna-banner-info.bottom {
    padding: 18% 10% 18% 60%;
}

.susenji-mofa-record-section,
.susenji-ollie-record-section,
.susenji-sculpt-record-section {
    margin-top: -80px;
}

.susenji-depuff-record-section,
.susenji-luna-record-section {
    margin-top: -130px;
}

.susenji-mofa-content-section {
    background-image: url(/images/Landing/products/Mofa/10_Susenji_MOFA+_bg_2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 50px;
}

.susenji-ollie-content-section {
    background-image: url(/images/Landing/products/Ollie/12_Susenji_Sculpt_bg_2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 50px;
}

.susenji-sculpt-content-section {
    background-image: url(/images/Landing/products/Sculpt/09_Susenji_Sculpt_bg_2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 50px;
}

.susenji-luna-content-section {
    background-image: url(/images/Landing/products/Luna/09_Susenji_Luna_bg_2x.png);
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 50px;
}

.morosil-fruit-container {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.morosil-fruit-container img {
    width: 100%;
}

.morosil-bubble {
    width: 45% !important;
    position: absolute;
    z-index: 2;
    top: -11%;
    right: -16%;
}

.morosil-full-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.morosil-full-content .morosil-information h5 {

    color: #295135;
    margin-bottom: 1rem;
    font-size: 1.3rem
}

.morosil-information p {
    color: #202020;
    padding-right: 34%;

}

.morosil-content-container {
    display: flex;
    flex-wrap: wrap;
}

.morosil-point-container {
    display: flex;
    gap: 1rem;
    width: 50%;
    align-items: center;
    margin-top: 1.5rem;
}

.morosil-point-container p {
    margin-bottom: 0;
}

.visual-mark-container {
    width: 8%;
}

.visual-mark-container img {
    width: 100%;
}

.benefits-img-container {
    position: relative;
    transform: translateX(-10%);
    width: 150%;
}

.benefits-img-container img {
    width: 100%;
}

.credentials-img-container {
    position: relative;
    transform: translateX(-20%);
    width: 120%;
}

.credentials-img-container img {
    width: 100%;
}

.susenji-depuff-main-product-details,
.susenji-sculpt-main-product-details,
.susenji-luna-main-product-details {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.susenji-luna-main-product-details {
    justify-content: space-between;
    flex-wrap: wrap;
}

.susenji-depuff-main-product-details div,
.susenji-sculpt-main-product-details div {
    padding: 15px 15px;
}

.susenji-luna-main-product-details div {
    width: 33%;
    text-align: center
}

.susenji-depuff-main-product-details img {
    width: 80px;
}

.susenji-luna-main-product-details img {
    width: 40%;
    padding: 40PX 0 10PX 0px;
}

.susenji-sculpt-main-product-details img {
    width: 180px;
    padding: 5px 30px;
}

.susenji-depuff-main-product-details p {
    width: 90px;
    text-align: center;
    font-size: .75rem
}

.susenji-sculpt-main-product-details p {
    width: 180px;
    text-align: center;
    font-size: .7rem
}

.susenji-luna-main-product-details p {
    text-align: center;
    font-size: .7rem;
    width: 100%;
    padding: 0PX 5px;
}




.susenji-mofa-video video,
.susenji-video video {
    width: 100%
}

.steps-information {
    position: relative;
}

.steps-information-img {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.steps-information-img img {
    width: 100%;
}


.steps-information .arrow-img {
    position: absolute;
    right: -30%;
    top: 20%;
    width: 80px;
}

.steps-information p {
    margin-top: 20px;
    min-height: 100px;
    text-align: center;
}




.footer-3q {
    top: auto;
    bottom: 0;
    background: #295135 !important;
}

.xs-3qlogo img {
    display: none
}

.footer-3q a {
    display: block;
    padding: 3px 0px 0px 0
}

.footer-3q h6 {
    line-height: 16px;
    font-size: 0.8rem !important;
    padding-bottom: 12px;
    color: #fff;
}

.footer-3q a {
    color: #d3d3d3 !important
}

footer .COPYRIGHT {
    color: #fff;
    font-size: 0.6rem !important;
}


/***Button****/
.learn-btn {
    align-items: center;
    background-color: #295135;
    border: 12px solid #295135;
    border-radius: 30px;
    color: #f8f8f8;
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
    width: 140px;
}

.learn-btn:hover {
    background-color: #0f2b18;
    border-color: #0f2b18;
}

.learn-btn span {
    display: block;
    transition: transform 0.15s ease-in-out;
}

.learn-btn:hover span {
    transform: translateX(-7px);
}

.learn-btn:hover::after {
    content: "";
    display: inline-block;

}

.learn-btn:hover .learn-more-arrow {
    transition: opacity 0.35s ease;
    opacity: 1;
}

.learn-more-arrow {
    width: 16px;
    opacity: 0;
    position: absolute;
    top: 30%;
    right: 0;
    transition: opacity 0.35s ease-in-out;
}

.header-menu {
    transition: 3s;
}

.header-menu.fixed2 {
    position: fixed;
    background-color: white !important;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 16px 0px;
    border-color: transparent;
    transition: 1s;
    top: 0;
}

.header-menu.fixed2 .mud-button-label {
    font-size: 12px;
    transition: 1s;
    font-weight: 900
}

.header-menu.fixed2 img {
    padding: 5px;
    transition: 1s;
}

.mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 24px) calc(100% - 11px) !important;
}

.badge-login .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 14px) calc(100% - 11px) !important;
}

.badge-login .mud-theme-warning {
    color: var(--mud-palette-warning-text) !important;
    background-color: rgba(41, 81, 53, 1) !important;
}

.mud-badge.mud-badge-default {
    color: #f3f3f3;
    background-color: rgb(41, 81, 53, .9);
    font-size: .6rem;
    padding: 3px;
    height: 16px;
    min-width: 16px;
    font-weight: 600;

}


.bg-Objective_cover,
.bg-Mission_partners {
    background-image: url("/images/Landing/company_profile/04_Objective_cover_2x.png");
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
}

.bg-Mission_partners {
    background-image: url("/images/Landing/company_profile/06_Mission_partners_cover_2x.png");
}

.bg-Objective_cover ._title,
.bg-Mission_partners ._title {
    width: 40%
}



.bg-Vision_cover,
.bg-Mission_customer {
    background-image: url("/images/Landing/company_profile/05_Vision_cover_2x.png");
    background-position: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
}

.bg-Mission_customer {
    background-image: url("/images/Landing/company_profile/07_Mission_customer_2x.png");
}

.bg-Vision_cover ._title,
.bg-Mission_customer ._title {
    width: 100%;
    padding-left: 60%;
}

.bg-office-img-section {
    background-image: url("/images/Landing/company_profile/08_Core_value_2x.png");
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    padding-bottom: 55%;

}

.journey-line-container {
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: -3%;
    width: 3%;

}

.journey-line-container img {
    width: 100%;

}

.journey-img {
    width: 95%;
    z-index: 999;
    position: relative;
}

.journey-info p {
    display: flex;
    padding-bottom: 10px;
}

.journey-info .dash {
    display: inline-block;
    font-size: inherit;
    margin-right: 30px;
    text-align: center;
    width: 1em;
}

.text-h3 {
    font-size: 1.3rem;
    color: rgba(41, 81, 53, 1);
    font-weight: 600
}

.text-p3 {
    font-size: 0.8rem;
    color: #000;
    font-weight: 600
}

.productname {
    font-size: 1.1rem;
    width: min-content;
    text-align: center;
    /*   line-height: 1.5rem;*/
    height: 68px;
}

.productnamelong {
    font-size: 1.1rem;
    width: 120px;
    text-align: center;
    /*   line-height: 1.5rem;*/
    height: 68px;
}

.productprice {
    font-family: 'mont-semibold';
}

.mud-divider2 {
    margin: 0;
    flex-shrink: 0;
    border-color: #0f2b18;
    border-width: 1px;
    border-style: solid none none none;
    width: 130%;
}

@media screen and (max-width: 767px) {
    .header-menu {
        height: 50px;
    }

    .header-menu.fixed2 {
        height: 45px;
    }

    .header-menu.fixed2 img {
        height: 38px;
        width: 40px;
        transition: 1s;
    }

    .productname {
        font-size: 1rem;
        width: min-content;
        text-align: center;
        line-height: 1.2rem;
        height: 45px;
    }


    .b-text-xs span {
        font-size: .65rem;
        line-height: .75rem
    }

    .container-content-1 .column-reverse {
        flex-direction: column-reverse !important;
    }

    .column-reverse {
        flex-direction: column-reverse !important;
    }

    .container-content-1 .row .mud-grid-item-xs-12 {
        display: contents !important;
    }

    .mud-expand-panel .mud-expand-panel-header {
        padding: 0px 5px
    }

    .Home1 {
        margin-top: 0px;

    }


    .text-sm-center {
        text-align: center
    }

    .about-susenji-title {
        padding: 3% 0% 40%;

    }

    .about-susenji-image {
        margin-top: 0px
    }

    .about-susenji-essence-section {
        padding: 0
    }

    .company-profile-section {
        background-image: url("/images/Landing/company_profile/02_company_profile_top_cover_2x.png");
        background-repeat: no-repeat;
        background-size: 100%;
        overflow: hidden;
        margin-top: -60px
    }



    .company-profile-title {
        padding: 16% 1% 48%;


    }

    .company-profile-title h5 {
        font-size: .9rem;
        line-height: 1rem;

    }

    .bg-Objective_cover,
    .bg-Mission_partners,
    .bg-Vision_cover,
    .bg-Mission_customer {
        height: 50vh;
    }

    .bg-Objective_cover ._title,
    .bg-Mission_partners ._title {
        width: 100%;
    }

    .bg-Vision_cover ._title,
    .bg-Mission_customer ._title {
        width: 100%;
        padding-left: 0%;
    }


    .contact-us-title h5 {
        font-size: 1rem;
    }

    .mud-typography-h4 {
        font-size: 1.5rem;
    }

    .google-map iframe {
        width: 100%;
        height: 260px;
    }

    .certification {
        flex-wrap: wrap;
    }

    .certification-item {
        width: 33.333%;
        padding: 0px 20px 10px 20px
    }

    .certification-item h6 {
        font-size: .7rem;
        padding: 8px 10px;
    }

    .footer-3q {
        top: auto;
        bottom: 0;
        /*        height: 500px;*/
        background: #FFF !important;
        margin-top: 30px !important;
        padding-top: 0px !important
    }

    .Logo-3Q {
        padding: 0 5px
    }

    .lg-3qlogo {
        display: none
    }

    .xs-3qlogo {
        display: block;
        padding-top: 10px;
        padding-right: 10px;
        text-align: right
    }

    .xs-3qlogo img {
        width: 100px !important;
    }

    .COPYRIGHT {
        font-size: 0.6rem
    }

}

.Dashboard-hello {
    font-family: 'mont-semibold';
    font-weight: 600;
    font-size: 1.5rem;
    color: #28513d
}


.Dashboard-hello span {
    font-family: 'mont-semibold';
    font-weight: 500;
    font-size: 1.5rem;
    color: #000
}

.Dashboard-DMY {
    background: #eeeeee;
    text-align: center;
    width: 150px;
    float: right;
}

.Dashboard-DMY div {
    background: #eeeeee;
    color: #28513d;
    padding: 5px;
}

.Dashboard-DMY div hr {
    margin: 5px 0 0 0;
    height: 1px;
    width: 100%;
    background: #295135
}

.Dashboard-DMY .active {
    background: #fff;
    border: #28513d 1px solid;
    padding: 5px;
}

.Dashboard-title {
    font-family: 'mont-semibold';
    font-size: .8rem;
    text-transform: uppercase;
    color: #28513d
}

.Dashboard-title p {
    font-size: .6rem;
    color: #28513dde
}

.Dashboard-sales {
    color: #000;
    font-size: 1.8rem;
    border-bottom: #295135 1px solid;
    padding: 5px 10px;
    font-family: 'mont-semibold';

}

.Dashboard-sales span {
    float: right;
    color: #1c7b47;
    font-size: 1.8rem;
    font-family: 'mont-semibold';
}

.border-bottom {
    border-bottom: #295135 1px solid;

}

/*
.Dashboard-box {
    border: #478665 1.5px solid;
    margin: 0px;
    padding: 15px 20px;
    width: 100%;
    border-radius: 15px;
}
.Dashboard-figure._agent {
   height:70px
}
.Dashboard-figure._agent svg{
    font-size:3rem
}

.Dashboard-figure {
    color: #1c7b47;
    font-size: 1.5rem;
    font-family: 'mont-semibold';
}

    .Dashboard-figure span {
        float: right;
        color: #000;
        font-size: 1.5rem;
    }


    .Dashboard-figure p {
        text-align: right;
        color: #000;
        font-size: 1.5rem;
        color: #1c7b47;
        line-height: 2rem
    }

        .Dashboard-figure p span {
            font-size: 1.2rem;
            width: 60px;
            line-height:2rem
        }

.Dashboard-hr {
    margin:30px 15px 15px;
    height: 1px;
    width: 100%;
    background: #295135

}*/

.muudstrap-navbar-expand {
    background: #f8f8f8
}

.mud-expand-panel .mud-expand-panel-content {
    padding: 0px;
    margin: 8px 0 0 0;
    flex: 1 1 auto;
    max-width: 100%;
}

.personmenu button {
    border: #295135 1px solid;
    background: #0f2b18;
    padding: 2px 5px;
    color: #fff;
}

.personmenu button:hover {
    background: #295135;
}

.personmenu span {
    color: #d3d3d3 !important;
    font-family: 'mont-book';
}

.menu-title-xxs {
    padding: 5px 10px 1px;
    color: #0f2b18;
    font-family: 'mont-book';
    font-size: .6rem;
    background: #5f846b;
}

.menu-title-xxs svg {
    font-size: 1rem;
    margin: -3px 0 0 0;
}

.mud-nav-link {
    text-decoration: none;
    font-family: 'mont-semibold';
}

.mud-nav-link-text {
    color: #000;
    text-transform: capitalize;
    text-decoration: none;
    font-family: 'mont-book';
    font-size: .9rem
}

.mud-nav-link svg {
    color: #295135;
    flex: 1 1 auto;
}

.open-user .mud-nav-link {
    color: #295135;
    font-size: 1rem;
    text-transform: uppercase;
    align-items: flex-start;
    align-content: center;
    flex-wrap: nowrap;
    flex-direction: row-reverse;
    font-family: 'mont-book';

}

.mud-navmenu.mud-navmenu-secondary .mud-nav-link.active:not(.mud-nav-link-disabled) {
    background-color: #a7d0bc32;
    color: #295135 !important;
    font-family: 'mont-heavy' !important;
    text-decoration: underline;
}


.open-user .mud-nav-link .mud-nav-link-text {
    width: 100%;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mud-nav-link .mud-nav-link-text button {
    float: right;
}

.open-user .mud-nav-link .mud-nav-link-text {
    text-decoration: none;
    text-align: right;
    margin: 2px 1% 0% 15%;
    width: max-content;
    color: #000;
    font-size: .9rem;
    font-family: 'mont-semibold';
    text-transform: uppercase;
    letter-spacing: 1px;
}

.open-user .mud-nav-link svg {
    margin: 0%;
    font-size: 1.6rem;
    color: #28513d;
}


.open-Menu {
    /*    top: 250px !important;
    margin-top:60PX !important*/
}

.bundleimg {
    width: 100% !important
}

.Login-link .mud-nav-link-text {}

@media (max-width: 660px) {

    .Dashboard-figure._agent {
        height: auto
    }




    .mud-sm-table .mud-table-cell {
        padding: 3px 20px 2px 10px;
        font-weight: 600;
        color: #000;

    }

    .mud-xs-table .mud-table-cell {
        color: #000;
        font-size: .75rem;
        font-weight: 600;
        padding: 0px 2px !important;
    }

    .mud-xs-table .mud-table-cell:before {
        color: #000;
        font-size: .7rem;
        padding: 2px 5px !important;

        /*        width: 25%;*/
        /*        float: left !important;
        text-align: left !important*/
    }

    .mud-table-row {
        padding: 0px 0 !important;
    }

    .mud-elevation-1 {
        box-shadow: none;
        margin: -10px;
    }

    .mud-table-body tr {
        /*        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: baseline !important;*/
    }

    .mud-breadcrumbs {
        margin: 0px 0px 8px 0;
        padding: 5px 5px;
        font-size: .6rem;
        /*justify-content: flex-end;
*/
    }

    .mud-breadcrumbs svg {
        font-size: .8rem
    }

    .mud-toolbar {
        --mud-internal-toolbar-height: 36px;
        place-content: center;
    }

    .DataGrid-title {
        font-size: .8rem;
        float: right;
        letter-spacing: 1px;
        font-family: 'mont-book';
        letter-spacing: 1px;
        font-size: 1rem;
        border-bottom: 1px solid #0f2b18;
        border-right: 100px solid #fff;
        width: 130%;
        margin: 0px 0 0px -10%;
        padding: 0 0 0 8%;
        text-align: left;
        background: #0f2b18;
        color: #fff;
        background: linear-gradient(90deg, rgba(41, 81, 53, 1) 0%, #0f2b18 10%, rgba(41, 81, 53, 1) 70%, #0f2b18 100%);
    }

    .mud-xs-table .mud-table-root .mud-table-head {
        display: flex;
        padding: 0 !important;
        background: #FFFFFF;
        border-top: 1px solid rgba(0, 0, 0, 0.11764705882352941);
        border-bottom: 1px solid rgba(0, 0, 0, 0.11764705882352941)
    }

    .mud-xs-table .mud-table-row .mud-table-cell:last-child {
        border: none
    }

    .DataGrid-button button {
        width: 100%;
    }

    .mud-table-head tr:first-of-type {
        width: 50%;
    }

    .mud-table-head tr:first-of-type:before {
        content: "Sort By";
        font-size: .6rem;
        color: #000;
        padding: 0 10px
    }

    .mud-table-head tr:nth-last-of-type(1):before {
        content: "Search";
        font-size: .6rem;
        color: blue;
        padding: 0 5px
    }

    .mud-table-head .column-header .sortable-column-header {
        background: #eeeeee;
        border-radius: 3px;
        color: #000;
        padding: 0px 5px;
        margin: 1px;
        font-weight: 600;
        letter-spacing: 1px;
        font-size: .6rem;
    }

    .mud-button-root small {
        font-size: .6rem;
        text-transform: none;
        margin-right: -6px;
        border-bottom: 1px #0f2b18 solid
    }

    .mud-table-striped .mud-table-container .mud-table-root .mud-table-body .mud-table-row:nth-of-type(odd) {
        background-color: #fafffc
    }

    .mud-table-head tr th {
        padding: 0px 5px !important;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start !important;
    }

    .mud-table-head tr th span {
        font-size: .7rem;
    }

    .mud-table-head tr th span svg {
        font-size: .9rem;
    }

    .mud-xs-table .mud-table-root .mud-table-head .mud-input {
        font-size: .7rem;
    }

    .mud-xs-table .mud-table-root .mud-table-head .mud-input svg {
        font-size: .9rem;
    }

    .filter-xs {
        display: none !important
    }

    .dxs-none {
        display: none !important
    }

    .mud-xs-table.mud-table-dense .mud-table-cell {
        padding: 3px 5px;
    }

    .mud-button-outlined-size-small {

        font-size: .7rem;

    }
}

.quantitybox {
    border: 2px solid #0f2b18;
    border-radius: 25px;

}

.quantitybox .mud-input {
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'mont-semibold';
}

.quantitybox button {
    color: #0f2b18;
    background-color: transparent;
    box-shadow: none;
    width: 100px;
    height: 20px;
}

.bundleqty .mud-input-slot {
    text-align: center;
    border: none;
    padding: 0px !important;
    margin: 0 !important;
    font-family: 'mont-semibold';
    font-weight: 500;
}

.bundleqty button {
    display: none
}

.login-title {
    text-align: right;
    color: #000;
    width: 100%;
    padding: 20px 0 0 0;
}

.login-title h1 {
    font-family: 'mont-semibold';
    font-size: 2rem;
    background: -webkit-linear-gradient(#295135, #0f2b18);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: 1px;
}

.login-title p {
    font-weight: 600;
    color: #000;
    font-size: 1rem;
    padding: 0 2px;
}

.login-page-bg {
    height: calc(100vh - 331px);
    background: #fafffb;
    padding: 10px 0;

}

.Captcha-bg {
    display: flex;
    height: auto;
    align-items: flex-end;
    margin: 20px 0;


}

.w-100 {
    width: 100%
}

.Pages-header-title {
    font-family: 'mont-book';
    font-weight: 600;
    font-size: 1.2rem;
    text-transform: uppercase;
    padding: 10px 0px;
}




@media (max-width: 660px) {
    .mud-main-content {
        padding-top: 0px;
        padding-bottom: 5px;
    }

    .login-page-bg {
        height: calc(100vh);
        background: #fafffb;
        padding: 10px;
    }

    .Pages-header-title {
        font-family: 'mont-semibold';
        font-weight: 100;
        letter-spacing: 1px;
        font-size: .8rem;
        border-bottom: 1px solid #0f2b18;
        border-right: 150px solid #fff;
        margin: 5px 0 10px -10%;
        padding: 0 0 0 12%;
        text-align: left;
        background: #0f2b18;
        color: #fff;
        background: linear-gradient(90deg, #28513d 0%, #0f2b18 10%, #0f2b18 70%, #28513d 100%);
    }

    .mud-elevation-25 {
        box-shadow: none;
    }

}

.open-user {
    background: #0f2b18
}

.open-user .mud-drawer-header {
    background: #fff;
    padding: 6px 25px 0;
    min-height: 30px;
    justify-content: center;
}

.open-user .welcomename {
    color: #000;
    font-size: .7rem;
    padding: 0;
    font-family: 'mont-book';
    font-weight: 600;
}

.open-user .mud-nav-link {
    border-bottom: 1px solid #295135
}

.open-user .mud-nav-link .mud-nav-link-text {
    color: #fff;
    font-weight: 100;
    font-size: .7rem;
    font-family: 'mont-book';
    text-transform: uppercase;
    width: 100%;
    text-align: left;
    padding-left: 10px;
    margin-left: 0;
    border-left: 5px solid #5f846b;
    /*            background: -webkit-linear-gradient(#fff, #939393);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;*/
}

.open-user .mud-nav-link svg {
    font-size: 1rem;
    margin: 3px 0 0 0;
    padding: 0;

    color: #5f846b !important;
}

.footer-xs-menu,
.COPYRIGHT-xs {
    display: none
}

@media (max-width: 660px) {

    .steps-information p {
        font-size: .8rem
    }

    .steps-information .arrow-img {
        position: absolute;
        right: -50%;
        top: 10%;
        width: 50px;
    }


    .footer-3q {
        background: none
    }

    .footer-3q div {
        display: none
    }

    .COPYRIGHT-xs {
        margin-bottom: 35px;
        padding: 0 0 1px 0;
        color: #295135;
        font-size: 0.6rem !important;
        text-align: center;
        display: block
    }

    .COPYRIGHT-xs .sosiol {
        padding-bottom: 10px;
        text-align: center;
    }


    .footer-xs-menu {
        position: fixed;
        bottom: 0;
        background: #295135;
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
        z-index: 1000;
    }

    .footer-xs-menu svg {
        color: #fff;
        font-size: 1.2rem
    }

    .footer-submenu {
        width: 99%;
        display: flex;
        position: fixed;
        bottom: 40px;
        color: #5f846b !important;
        background: #fff;
        left: 0;
        right: 0px;
        flex-wrap: wrap;
        margin: 2px;
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        z-index: 1002;
    }

    .footer-submenu._2 {
        width: 50%;
        display: flex;
        /*            position: fixed;*/
        bottom: 40px;
        color: #5f846b !important;
        background: #fff;
        left: auto;
        right: auto;
        flex-direction: column;
        margin: 2px;
        box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
        border-radius: 4px;
        padding: 15px 8px 0px;
        z-index: 1002;
    }

    .footer-submenu._2._R {
        right: 0;
    }

    .footer-submenu a {
        font-size: 0.9rem;
        font-weight: 600;
        padding: 5px 15px 2px;
        width: 33%;
    }

    .footer-submenu._2 a {
        width: 100%;
        padding: 0px 0px 8px;
    }

    .abount {
        background-image: url("/images/favicon/old/favicon-32x32.png");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: contain;
        overflow: hidden;
        height: 19px;
        width: 20px;
    }

    .font-h1-bolder {
        font-size: 2.2rem;
    }

    .morosil-bubble {
        width: 45% !important;
        position: absolute;
        z-index: 2;
        top: -16%;
        right: -30px;
    }

    .susenji-mofa-banner,
    .susenji-shake-banner,
    .susenji-ollie-banner,
    .susenji-depuff-banner,
    .susenji-sculpt-banner,
    .susenji-luna-banner {
        background-size: contain;
    }

    .susenji-mofa-section,
    .susenji-shake-section,
    .susenji-ollie-section,
    .susenji-depuff-section,
    .susenji-sculpt-section,
    .susenji-luna-section {
        background-repeat: no-repeat;
        background-size: contain;
        padding: 10%;
        margin-top: -10px;
        height: auto;
    }

    .susenji-mofa-title,
    .susenji-mofa-banner-info,
    .susenji-shake-title,
    .susenji-shake-banner-info,
    .susenji-ollie-title,
    .susenji-ollie-banner-info,
    .susenji-depuff-title,
    .susenji-depuff-banner-info,
    .susenji-sculpt-title,
    .susenji-sculpt-banner-info,
    .susenji-luna-title,
    .susenji-luna-banner-info {
        padding: 1% 0 28%;
    }

    .susenji-mofa-title h5,
    .susenji-mofa-banner-info h5,
    .susenji-shake-title h5,
    .susenji-shake-banner-info h5,
    .susenji-ollie-title h5,
    .susenji-ollie-banner-info h5,
    .susenji-depuff-title h5,
    .susenji-depuff-banner-info h5,
    .susenji-sculpt-title h5,
    .susenji-sculpt-banner-info h5,
    .susenji-luna-title h5,
    .susenji-luna-banner-info h5 {
        font-size: 1.8rem;
        width: min-content;
    }

    .susenji-mofa-title h6,
    .susenji-mofa-banner-info h6,
    .susenji-shake-title h6,
    .susenji-shake-banner-info h6,
    .susenji-ollie-title h6,
    .susenji-ollie-banner-info h6,
    .susenji-depuff-title h6,
    .susenji-depuff-banner-info h6,
    .susenji-sculpt-title h6,
    .susenji-sculpt-banner-info h6,
    .susenji-luna-title h6,
    .susenji-luna-banner-info h6 {
        font-size: 1rem;
        padding: 35px 0 0 0;
    }

    .susenji-mofa-banner-info,
    .susenji-shake-banner-info,
    .susenji-ollie-banner-info,
    .susenji-depuff-banner-info,
    .susenji-sculpt-banner-info,
    .susenji-luna-banner-info {
        padding: 1% 0 0%;
    }

    .susenji-mofa-banner-info h6,
    .susenji-shake-banner-info h6,
    .susenji-ollie-banner-info h6,
    .susenji-depuff-banner-info h6,
    .susenji-sculpt-banner-info h6,
    .susenji-luna-banner-info h6 {
        font-size: .8rem;
        padding: 0px 0 0 0;
    }

    .sticky-product-container {
        bottom: -1px;

    }

    .sticky-product-container .sticky-product {
        bottom: -1px;
        background: #f0fcf4;
    }

    .sticky-product-container .sticky-product h4 {
        font-size: 1rem;
        color: #0f2b18;
        font-family: 'mont-semibold';
        font-weight: 500;
        width: 80px;
        padding: 5px 0 0 0;
    }

    .sticky-product-container .sticky-product img {
        width: auto;
        padding: 5px;

    }
}

.md-top-menu .mud-nav-link-text {
    width: 100%;
    text-align: left;
    text-decoration: none;
    text-underline-offset: 3px;
    padding: 0 15px;
}


.forgot-text {
    padding: 8px 0 0 0;
    text-align: right;
    font-size: .7rem;
    float: right;
    color: #000 !important;
    width: 100%
}

.forgot-text svg {
    padding: 1px;
    font-size: 1.2rem;
}

.bg-none {
    background-color: transparent !important;
    font-weight: 100;

}

.top-menu .mud-nav-item {
    width: auto;
    transition: transform .3s;

}

.top-menu .mud-nav-item:hover {
    transform: scale(1.07);
    background-color: transparent !important;
}

.top-menu .mud-nav-link {
    padding: 10px 15px 10px 5px;
    transition: transform .3s;
}

.top-menu .mud-nav-link:hover {
    transform: scale(1.02);

    background-color: transparent !important;
}

.top-menu .mud-nav-link.active div {
    font-weight: 600 !important;
    color: #295135 !important;
    font-family: 'mont-semibold';
}

.top-menu .mud-nav-link:focus:not(.mud-nav-link-disabled) {
    background-color: transparent;
}

.md-login {
    padding: 12px 3px !important;
    width: auto;
    margin-top: 0px !important;
}

.md-login span {
    font-size: .65rem;
    font-family: 'mont-book';

}

.md-login span:hover {
    font-weight: 600 !important;
}

.md-login:hover {
    background-color: rgba(15, 43, 24, 0.058823529411764705) !important;
    width: auto;
}


._productlink:hover img {
    box-shadow: 0px 3px 1px -3px rgba(15, 43, 24, .6), 0px 2px 2px 0px rgba(15, 43, 24, .34), 0px 1px 5px 0px rgba(15, 43, 24, .32);

}


.mud-dialog.mud-dialog-width-sm.promotion-Dialog {
    background: transparent !important;
    box-shadow: none !important;
}

.mud-dialog.promotion-Dialog .mud-dialog-content {
    padding: 0 !important
}


/* The Modal (background) */
.modalPromotion {
    display: block;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 9999;
    /* Sit on top */
    left: 0;
    top: 0;
    width: fit-content;
    /* Full width */
    height: 100vh;
    /* Full height */
    overflow: auto;
    /* Enable scroll if needed */
    background-color: rgb(0, 0, 0);
    /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4);
    /* Black w/ opacity */
}

/* Modal Content/Box */
.modalPromotion .modal-content {
    background-color: transparent;
    margin: 2% auto;
    /* 15% from the top and centered */
    padding: 0px;
    width: fit-content;
    /* Could be more or less, depending on screen size */
}

.modal-p-img {
    height: 95vh
}

/* The Close Button */
.closePromotion {
    color: #aaa;
    position: absolute;
    right: 20px;
    font-size: 28px;
}

.closePromotion:hover,
.closePromotion:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;

}