@font-face {
    font-family: SpaceGrotesk;
    font-style: normal;
    font-weight: 400;
    font-display: fallback;
    src: local("SpaceGrotesk") ,  url(../fonts/SpaceGrotesk-Regular.ttf) format("truetype");
}
@font-face {
    font-family: SpaceGrotesk;
    font-style: normal;
    font-weight: 500;
    font-display: fallback;
    src: local("SpaceGrotesk") ,  url(../fonts/SpaceGrotesk-Medium.ttf) format("truetype");
}
@font-face {
    font-family: SpaceGrotesk;
    font-style: normal;
    font-weight: 600;
    font-display: fallback;
    src: local("SpaceGrotesk") ,  url(../fonts/SpaceGrotesk-SemiBold.ttf) format("truetype");
}
@font-face {
    font-family: SpaceGrotesk;
    font-style: normal;
    font-weight: 700;
    font-display: fallback;
    src: local("SpaceGrotesk") ,  url(../fonts/SpaceGrotesk-Bold.ttf) format("truetype");
}
@font-face {
    font-family: SpaceGrotesk;
    font-style: normal;
    font-weight: 300;
    font-display: fallback;
    src: local("SpaceGrotesk") ,  url(../fonts/SpaceGrotesk-Light.ttf) format("truetype");
}
:root{
   /* --primary: linear-gradient(to right, #FF9B00, #ED1C24);*/
    --primary: radial-gradient(127.68% 423.02% at 31.82% -13.39%, #FF9B00 12.5%, #ED1C24 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

    --primary-fallback: #FF9B00;
    --bg-gradient: linear-gradient(to right, rgba(255, 151, 2, 0.1),rgba(255, 151, 2, 0));
    --yellow-gradient: linear-gradient(to right, #FDD089, #FFC700);
    --yellow-gradient: radial-gradient(127.68% 423.02% at 31.82% -13.39%, #FFE600 12.5%, #FF9702 100%) /* warning: gradient uses a rotation that is not supported by CSS and may not behave as expected */;

    --yellow-gradient-fallback: #FDD089;
    --brand1: #0000FF;
    --brand2: #ED1C24;
    --brand3: #FF9702;
    --black: #060919;
    --white: #FFFFFF;
    --white2: #FAFAFA;
    --white7: #F8FBFB;
    --bg: #F7F5ED;
    --grey1: #3E4150;
    --grey2: #6C7188;
    --grey3: #DADCE2;
    --grey4: #F0F1F4;
    --grey5: #9299BA;
    --blue: #2563EB;
    --green: #14A800;
    --yellow: #FFC947;
    --red: #A51E22;
    --red2: #FD1E1E;
    --red4: #FFD9D9;
    
    

    font-family: SpaceGrotesk;
}

/* main html */
*{
    box-sizing: border-box;
    color: var(--black);
    font-family: SpaceGrotesk;
    -webkit-font-smoothing: antialiased;
}
html,body{
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    background: var(--bg);
}
fieldset{
    border: 0;
    margin: 0;
    padding: 0;
}
header{
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--black);
    height: 120px;
}
header .main-wrapper{
    gap: 40px;
    align-items: center;
    justify-content: space-between;
}
header .header-content-wrapper{
    display: flex;
    gap: 24px;
}
header .logo{
    display: flex;
    gap: 42px;
    align-items: center;
    justify-content: flex-start;
}
header .logo .school-profile-logo-wrapper{
    border-left: 1px solid var(--grey2);
    padding-left: 24px;
}
header .logo .school-profile-logo{

    width: 64px;
    height: 64px;
    border-radius: 94px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--white);
    border: 1px solid rgba(218, 220, 226, 0.5);
    overflow: hidden;
}
.school-profile-logo img{
    width: 80%;
    height: auto;
}
.header-search-wrapper{
    background: var(--white) url('../storage/images/search-icon.svg') no-repeat;
    background-size: 20px 20px;
    background-position: 24px center;
    padding: 8px 8px 8px 44px;
    border-radius: 62px;
    width: auto;
    justify-content: left;
    display: flex;
    align-items: center;
}
.header-search-wrapper form{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-search-wrapper input{
    background: none;
    border: 0;
    width: 100%;
    outline: none;
    padding: 0 24px 0 12px !important;
}
.header-search-wrapper .header-search-submit{
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    background: var(--black);
    color: var(--white);
    padding: 8px 16px;
    border-radius: 60px;
}
.header-search-submit span{
    color: inherit;
}
.header-search-wrapper input::placeholder{
    font-size: 16px;
    font-weight: 400;
    line-height: 19.5px;
    text-align: left;
    color: var(--black);
    opacity: 0.4;
}
.header-menu-icon{
    gap: 24px;
    justify-content: right;
    display: flex;
    align-items: center;
}
.header-menu-icon > span{
    cursor: pointer;
    display: inline-block;
}
.header-basket-button{
    background: url('../storage/images/basket-icon-white.svg') no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
    position: relative;
    margin-right: 11px;
    display: inline-block;
}
.header-basket-button .basket-counter{
    width: 26px;
    height: 26px;
    border-radius: 40px;
    background: var(--yellow-gradient);
    border: 3px solid var(--black);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 28px;
    text-align: center;
    color: var(--black);
    position: absolute;
    top: -14px;
    right: -14px;
}
.header-basket-button .basket-counter.hidden-counter{
    display: none;
}
.header-user-button{
    background: url('../storage/images/mobile-user-white.svg') no-repeat;
    background-size: contain;
    width: 24px;
    height: 24px;
}
.header-search-button{
    display: none;
}
@media all and (max-width: 960px){
    .logo img{
        width: 57px;
        height: 36px;
    }
    header{
        height: 56px;
    }
    header .logo .school-profile-logo-wrapper{
        display: none;
    }
    header .header-menu-icon{
        gap: 16px;
    }
    .header-search-wrapper{
        position: absolute;
        top: 56px;
        left: 0;
        width:100%;
        background: var(--black);
        z-index: 10;
        border-top: 1px solid var(--grey1);
        border-radius: 0;
        padding: 0;
    }
    .header-search-wrapper form{
        display: flex;
        width: 100%;
        padding: 14px 2.5%;
        align-items: center;
        justify-content: space-between;
    }
    .header-search-wrapper button.header-search-submit{
        background: url('../storage/images/search-icon-grey.svg') no-repeat;
        background-size: contain;
        background-position: center center;
        width: 18px;
        height: 18px;
        overflow: hidden;
        padding: 0  !important;
    }
    .header-search-wrapper form input{
        background: none !important;
        border: 0 !important;
        color: white !important;
        padding: 0 12px 0 0 !important;
        border-radius: 0 !important;
    }
    .header-search-wrapper form input::placeholder{
        color: rgba(108, 113, 136, 0.5);
    }
    
    .header-search-wrapper button span{
        display: none;
    }
    .header-basket-button, .header-user-button{
        width: 18px;
        height: 18px;
    }
    .header-basket-button .basket-counter{
        width: 16px; 
        height: 16px;
        top: -8px;
        right: -8px;
    }
    .header-search-button{
        padding: 0 !important;
        background: url('../storage/images/mobile-search-icon.svg') no-repeat;
        background-size: 18px 18px;
        background-position: center center;
        width: 18px;
        height: 18px;
        display: inline-block;
    }
    .mobile-search-closed{
        display: none;
    }
}
/*
footer{
    background: #F0F0F0;
    justify-content: space-around;
    padding: 52px 0 90px 0 !important; 
}
    */
footer{
    background: var(--black);
    justify-content: space-around;
    gap: 40px;
    border-top: 2px solid transparent;
    position: relative;
    color: white;
}
footer::before{
    background: var(--primary-fallback);
    background: var(--primary);
    content: '';
    position: absolute;
    top: -2px;
    width: 100%;
    height: 2px;    
}
main{
    width: 100%;
    float: left;
    min-height: 50vh;
}
/* typography */
p, h1, h2, h3{
    margin: 0;
    padding: 0;
}
h2, .heading-large{
    font-size: 42px;
    font-weight: 700;
    line-height: 48px;
}
a{
    text-decoration: none;
    color: inherit;
}
.typo-base{
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
}
.typo-l{
    font-size: 21px;
    font-weight: 400;
    line-height: 34px;
}
.typo-xl{
    font-size: 24px;
    line-height: 34px;
}
.medium{
    font-weight: 500;
}
.semibold{
    font-weight: 600;
}
.bold{
    font-weight: 700;
}

/* colors */
.color-primary{
    color: var(--primary-fallback);
    background: var(--primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.color-grey1{
    color: var(--grey1);
}
.color-grey2{
    color: var(--grey2);
}
.color-grey3{
    color: var(--grey3);
}
.color-grey4{
    color: var(--grey4);
}
.color-grey5{
    color: var(--grey5);
}
.color-red{
    color: var(--red);
}
.color-black{
    color: var(--black);
}
.color-white{
    color: var(--white);
}
.color-white2{
    color: var(--white2);
}
.color-bg{
    color: var(--bg);
}
.color-green{
    color: var(--green);
}
.bg-gradient{
    background: var(--bg-gradient);
}
.bg-gradient-primary{
    background: var(--primary-fallback);
    background: var(--primary);
}
.bg-gradient-secondary{
    background: var(--yellow-gradient-fallback);
    background: var(--yellow-gradient);
}
.bg-white{
    background: var(--white);
}
.bg-fluid-gradient{
    background: var(--yellow-gradient-fallback);
    background: var(--yellow-gradient);
}
/* global */
.main-wrapper{
    width: 100%;
    max-width: 1296px;
    /*max-width: 95%;*/
    display: flex;
}
.flex-main-row{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    padding: 72px 0;
}
.flex-main-row-medium{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    padding: 48px 0;  
}
.flex-main-row-medium .main-wrapper{
    gap: 48px;
}
.flex-main-row-small{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    padding: 36px 0;
}
.flex-main-col{
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: space-around;
    padding: 72px 0;
}
.flex-row, .flex-fluid-row{
    display: flex;
    flex-direction: row;
    width: 100%;
}
.flex-col{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.school-profile-accessories .main-wrapper{
    gap: 48px;
}
.school-profile-accessories .title-row{
    gap: 16px;
}
.school-accessories{
    gap: 32px;
}
.school-accessories .flex-col{
    gap: 24px;
}
.school-accessories > .flex-col > .flex-col > .flex-row{
    gap: 12px;
    align-items: center;
}
.school-accessories > .flex-col > .flex-col > .flex-row >  .flex-row{
    gap: 6px;
    width: auto;
}
.school-accessories .school-accessories-title{
    font-size: 21px;
    font-weight: 500;
    line-height: 28px;
    background: url('../storage/images/list-ok-orange.png') no-repeat;
    background-size: 18px 14px;
    background-position: left center;
    padding-left: 30px;
    
}
.school-accessories .school-accessories-extra-info{
    height: 30px;
    padding: 0px 12px;
    border-radius: 6px;
    background: var(--white);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--grey1);
    display: flex;
    justify-content: center;
    align-items: center;
}
.school-profile-accessories h3{
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;   
}
@media screen and (max-width: 960px){
    .main-wrapper{
        width: 95%;
        margin-left: 2.5%;
        margin-right: 2.5%;
    }
    .flex-fluid-row{
        flex-direction: column;
        align-items: center !important;
    }
}


/* fanshop hero baner*/
.fanshop-hero-title{
    padding: 52px 0 120px 0;
    background: var(--black);
}
.fanshop-hero-title .main-wrapper{
    gap: 0;
}

.fanshop-hero-title h1{
    color: var(--white);
    font-size: 70px;
    font-weight: 700;
    line-height: 82px;
    letter-spacing: -1px;
    text-align: left;
    
}
.fanshop-hero-subtitle{
    color: var(--primary-fallback);
    color: var(--primary);
    font-size: 36px;
    font-weight: 700;
    line-height: 46px;
    text-align: left;
    display: inline-block;
    width: auto;
}



.fanshop-button-black{
    padding: 16px 54px;
    border-radius: 62px;
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    line-height: 19.5px;
    text-align: center;
    background: var(--black);
}

/* footer part */
/*
footer .main-wrapper{
    gap: 25px;
    position: relative;
   
}
.footer-content-wrapper{
    justify-content: space-between;
}
.footer-main-navigation{
    gap: 26px;
}
.footer-main-navigation h3{
    color: var(--black);
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 3px;
    text-align: left;   
}
.footer-main-navigation a,.footer-main-navigation p{
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    text-align: left;
    color: var(--black);
    opacity: 0.6;
}
.footer-line{
    width: 100%;
    float: left;
    border-top: 1px solid var(--black);
    opacity: 0.1;
}
.footer-note{
    justify-content: space-between !important;
}
.footer-note .typo-base{
    font-size: 14px;
    font-weight: 400;
    line-height: 17.07px;
    color: var(--black);
    opacity: 0.6;
    
}
.footer-payment-methods-icons{
    gap: 12px;
    justify-content: right;
}
.payment-icon-button{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46.61px;
    height: 30.03px;
    border-radius: 6px;
    padding: 10px 7px;
    background: var(--white);   
}
@media all and (max-width: 960px){
    footer .main-wrapper{
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        gap: 64px;
    }
    footer .footer-navigation-wrapper{
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        
    }
    .footer-navigation-container{
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        gap: 64px;
    }
    footer nav a{
        text-align: center;
    }
    .footer-content{
        align-items: center;
    }
    .footer-content-note p{
        text-align: center;
    }
}
    */
    
footer .main-wrapper{
    flex-direction: row;
    justify-content: space-between;
}
footer .footer-navigation-wrapper{
    display: flex;
    justify-content: space-around;
}
.footer-content{
    display: flex;
    flex-direction: column;
    gap: 24px;
    
}
.footer-content-note p{
    color: var(--grey3);
}
footer .social-media{
    display: flex;
    gap: 12px;
}
.social-icon-holder{
    width: 32px;
    height: 32px;
    border-radius: 45px;
    background: var(--grey1);
    padding: 6px;
    display:flex;
    justify-content: center;
    align-items: center;
}
.footer-navigation-container{
    display: flex;
    justify-content: space-between;
    gap: 64px;
}
.footer-navigation-container nav{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
footer nav a{
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--grey3);
}
.footer-line{
    width: 100%;
    float: left;
    border-top: 1px solid var(--grey1);
}
.footer-note{
    display: flex;
    justify-content: center;
    color: var(--grey2);
}
@media all and (max-width: 960px){
    footer .main-wrapper{
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        gap: 64px;
    }
    footer .footer-navigation-wrapper{
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        
    }
    .footer-navigation-container{
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        gap: 64px;
    }
    footer nav a{
        text-align: center;
    }
    .footer-content{
        align-items: center;
    }
    .footer-content-note p{
        text-align: center;
    }
}

/* homepage components */
.hero-wrapper{
    color: var(--white);
    justify-content: space-around;
    position: relative;
    gap: 10px;
}
.hero-background.homepage{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 500px;
    background: var(--black);
    z-index: 0;
}
.hero-wrapper .main-wrapper{
    flex-direction: column;
    position: relative;
}
.hero-title-content{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.hero-title{
    font-size: 70px;
    font-weight: 700;
    line-height: 82px;

}
.hero-text-vector{
    background: url('../storage/images/text-vector.png') no-repeat;
    background-size: 323px 26px;
    background-position: left  bottom;
    padding: 0 10px;
}
.hero-title-content p{
    margin: 0;
    padding: 0;
}
.hero-subtitle{
    font-size: 28px;
    font-weight: 500;
    line-height: 34px;
    color: var(--grey1);
}
.hero-widget-wrapper{
    display: flex;
    gap: 25px;
    justify-content: space-between;
    margin: 5rem 0;
}
.hero-widget{
    width: 30%;
    max-width: 411px;
    aspect-ratio: 411/504;
    position: relative;
    border-radius: 26px;
}
.hero-widget img{
    width: 100%;
    height: auto;
    aspect-ratio: 411/504;
    z-index: 0;
}
.widget-mask{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 411/504;
    border-radius: 26px;
}
.widget-mask.orange{
    background: linear-gradient(to bottom, rgba(255, 151, 2, 0),  rgba(255, 151, 2, 0) 50%, rgba(255, 151, 2, 1));
}
.widget-mask.blue{
    background: linear-gradient(to bottom,  rgba(0, 0, 255, 0),   rgba(0, 0, 255, 0) 50%,  rgba(0, 0, 255, 1));

}
.widget-mask.red{
    background: linear-gradient(to bottom, rgba(237, 28, 36, 0),  rgba(237, 28, 36, 0) 50%, rgba(237, 28, 36, 1));
}
.hero-widget p{
    position: absolute;
    left: 10%;
    top: 60%;
    width: 80%;
    font-size: 26px;
    font-weight: 700;
    line-height: 34px;
    text-align: center;
}
.hero-widget .widget-button-wrapper{
    position: absolute;
    bottom: -7px;
    left: 5%;
    width: 90%;
    text-align: center;
}
@media all and (max-width: 960px){
    .hero-widget-wrapper{
        flex-direction: column;
        justify-content: middle;
        gap: 40px;
    }
    .hero-widget{
        width: 100%;
    }
}

.homepage-component-grey{
    background: #f8fbfb;
    padding: 32px 48px;
    display: flex;
    align-items: center;
    border-radius: 26px 26px 0 0;
    gap: 24px;
}
.homepage-component-white{
    background: var(--white);
    padding: 48px;
    border-radius: 0 0 26px 26px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}
.homepage-component-white > *{
    margin: 0; padding: 0;
}
.homepage-component-white h2{
    font-size: 42px;
    font-weight: 700;
    line-height: 48px;
}
.homepage-component{
    position: relative;
}
.homepage-component-button-wrapper{
    position: absolute; 
    bottom: -10px;
    left: 0;
    text-align: center;
    width: 100%;
}
@media all and (max-width: 960px){
    .homepage-component-grey{
        flex-direction: row;
        justify-content: center;
    }
}
.list-wrapper{
    
    background: var(--bg-gradient);
    margin-bottom: 2px;
}
.list-component-main-title-wrapper{
    display: flex;
    justify-content: space-between;
    gap: 95px;
    flex-grow: 1;
    margin-bottom: 72px;
}
.list-component-main-title-wrapper h2{
    font-size: 64px;
    font-weight: 700;
    line-height: 72px;
}
.list-component-content-box{
    padding: 24px;
    border-radius: 8px;
    background: #FBECBA;
    position: relative;
    max-width: 470px;
}
.list-component-content-box::after, .list-component-content-box::before{
    content: '';
    background: url('../storage/images/star-component.png') no-repeat;
    background-size: 27px 33px;
    width: 27px;
    height: 33px;
    position: absolute;
}
.list-component-content-box::before{
    right: -30px;
    top: -36px;
}
.list-component-content-box::after{
    left: -30px;
    bottom: -36px;
}
.list-component-content-box p{
    font-size: 21px;
    font-weight: 700;
    line-height: 28px;
    color: var(--grey1);
    text-align: center;
}
.list-component{
    gap: 32px;
}
.list-component h3{
    font-size: 42px;
    font-weight: 700;
    line-height: 48px;
    display: flex;
    gap: 24px;
    justify-content: left;
    align-items: center;
    padding: 10px 0 10px 7px;
}
.list-item-primary, .list-item-secondary{
    margin-right: 24px;
    text-align: center;
    display: inline-block;
    position: relative;
    z-index: 10;
    padding-left: 14px;
    color: white;
}
.list-item-primary::before, .list-item-secondary::before{
    content: "";
    width: 50px;
    height: 50px;
    z-index: -1;
    rotate: 45deg;
    position: absolute;
    display: inline-block;
    left: 0;
    top: -10px;
    border-radius: 8px;
}
.list-item-primary::before{
    background: #FF9B00;
    background: linear-gradient(to top right, #FF9B00, #ED1C24);
}
.list-item-secondary::before{
    background: #FFE600;
    background: linear-gradient(to top right, #FFE600, #FF9702);
}
.list-component-content{
    display: flex;
    gap: 56px;
    padding: 0 0 0 36px;
    align-items: center;
}
.list-component-content p{
    font-size: 24px;
    font-weight: 400;
    line-height: 40px;
}
.list-component-content p:not(:last-of-type){
    padding-bottom: 16px;
}
.list-component-image-box{
    width: 189px !important;
    height: 189px;
    overflow: hidden;
    border-radius: 12px;
    background: var(--grey3);
    flex-shrink: 0;
    object-fit: cover;
}
.list-component-image-box img{
    width: 100%;
    height: 100%;
}
@media all and (max-width: var(--mobile-width)){

}
.homepage-banner{
    background: var(--yellow-gradient-fallback);
    background: url('../storage/temp-bg/dotted-grid.png'), var(--yellow-gradient);
    background-size: contain;
    border-radius: 26px;
    justify-content: center;
    align-items: center;
    gap: 86px;
    padding: 86px;    
}
.homepage-banner p{
    font-size: 64px;
    font-weight: 700;
    line-height: 72px;
    text-align: center;
}
/* project components */
.hero-section{
    background: var(--black);
    padding: 48px 0 120px 0;
    gap: 10px;
}
.hero-section .main-wrapper{
    flex-direction: column;
    gap: 16px;
    justify-content: space-between;
}
.hero-section-title{
    font-size: 70px;
    font-weight: 700;
    line-height: 82px;
    letter-spacing: -1px;
    color: var(--white);
}
.hero-section-subtitle{
    font-size: 28px;
    font-weight: 500;
    line-height: 34px;
    color: var(--grey2);
}
.content-image-container-regular{
    gap: 72px;
    align-items: center;
}
.content-image-container-content{
    gap: 24px;
}
.content-image-container-content h2{
    font-size: 42px;
    font-weight: 700;
    line-height: 48px;   
}
.content-image-container-content p{
    font-size: 21px;
    line-height: 34px;
}
.content-image-container-image-frame{
    background: url('../storage/images/image-frame.png') no-repeat;
    background-size: 100% auto;
    width: 466px;
    max-width: 466px;
    padding-bottom: 14px;
    flex-grow: 0;
    flex-shrink: 1;
}
.content-image-container-image-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding-right: 11%;
    width: 89%;
    overflow: hidden;
    object-fit: cover;
    border-radius: 15px;
}

.content-image-container-image-wrapper img, .content-image-container-simple-image-wrapper img{
    width: 100%;
    height: 100%;
}

.content-text-vector{
    z-index: 3;
    position: relative;
    white-space: nowrap;
}
.content-text-vector::before{
    content: "";
    position: absolute;
    z-index: -1;
    left: -25px;
    bottom: -9px;
    background: url('../storage/images/text-vector.png') no-repeat;
    background-size: 320px 26px;
    width: 320px;
    height: 26px;
}
.simple-list-layout .main-wrapper{
    gap: 48px;
}
.simple-list-layout h2{
    font-size: 42px;
    font-weight: 700;
    line-height: 48px;
}
.list-component-layout{
    gap: 32px;
}
.list-component-layout .flex-col{
    gap: 24px;
    align-items: flex-start;
}
.list-component-item{
    gap: 16px;
}
.list-item-small-primary{
    width: 50px;
    height: 50px;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
    
}
.list-item-small-primary span{
    position: relative;
    left: 12px;
    top: 12px;
}
.list-item-small-primary::before{
    background: #FF9B00;
    background: var(--primary);
    content: "";
    width: 35px;
    height: 35px;
    z-index: -1;
    rotate: 45deg;
    position: absolute;
    display: inline-block;
    left: 4px;
    top: 4px;
    border-radius: 8px;
}
.list-item-small{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 50px;
    height: 50px;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}
.list-item-small::before{
    background: var(--white);
    content: "";
    width: 35px;
    height: 35px;
    z-index: -1;
    rotate: 45deg;
    border-radius: 8px;
    display: inline-block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -17px 0 0 -17px;
}
.list-item-small.primary::before{
    background: #FF9B00;
    background: var(--primary);
}
.list-item-small.primary span{

}
.simple-list-component-content{
    gap: 12px;
    padding: 9px 0 0 0;
}
.simple-list-component-content h3{
    font-size: 28px;
    font-weight: 500;
    line-height: 34px;
}
.simple-list-component-content p{
    font-size: 14px;
    line-height: 24px;
    color: var(--grey2);
    font-weight: 500;
}
.dark-baner-grid{
    background: var(--black) url('../storage/temp-bg/grid.png') no-repeat;
    background-size: cover;
    color: white;
}
.dark-baner-grid .main-wrapper{
    gap: 48px;
}
.dark-baner-grid-wrapper{
    gap: 24px;
    justify-content: space-between;
    flex-wrap: wrap;
}
.dark-baner-grid-item{
    gap: 12px;
    padding: 32px;
    border-radius: 12px;
    width: 30%;
    min-width: 26%;
    flex-grow: 1;
    flex-shrink: 1;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
.dark-baner-grid-item h3{
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    text-align: center;
}
.dark-baner-grid-item p{
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
}
.dark-baner-grid-item a{
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-align:center;
    text-transform: uppercase;
}
@media screen and (max-width: 960px){
    .dark-baner-grid-item{
        width: 100%;
    }
}
.project-component1{
    padding: 144px 0;
}
.project-component1 .main-wrapper{
    justify-content: space-between;
    align-items: center;
    gap: 76px;
}
.project-component1-content{
    gap: 24px;
}
.project-component1-content h3{
    font-size: 42px;
    font-weight: 700;
    line-height: 48px;
    text-align: left;
}
.project-component1-content p{
    font-size: 21px;
    font-weight: 400;
    line-height: 34px;
    text-align: left;
    color: var(--grey1);
}
.project-component1-button-wrapper{
    text-align: left;
}
.project-component1-button-wrapper a{
    padding-top: 24px;
    padding-bottom: 24px;
    float: left;
}
.project-component1-list{
    gap: 24px;
}
.project-component1-list div{
    position: relative;
}
.project-component1-list div:first-child::before{
    content: "";
    background: url('../storage/images/custom-list-graphic.png') no-repeat;
    background-size: 67px 66px;
    position: absolute;
    top: -66px;
    left: -67px;
    width: 67px;
    height: 66px;
}
.project-component1-list div:last-child p::before{
    content: "";
    background: url('../storage/images/custom-list-graphic.png') no-repeat;
    background-size: 67px 66px;
    position: absolute;
    bottom: -66px;
    right: -67px;
    width: 67px;
    height: 66px;
    rotate: 180deg;
}
.project-component1-list div:not(:last-of-type) p::after{
    content: "";
    background: url('../storage/images/list-item-separator.png') no-repeat;
    background-size: 2px 60px;
    position: absolute;
    left: 45px;
    bottom: -50px;
    width: 2px;
    height: 50px;
}
.project-component1-list div p{
    font-size: 20px;
    font-weight: 500;
    line-height: 34px;
    text-align: left;
    padding: 24px 32px;
    gap: 16px;
    border-radius: 12px;
    background: var(--white);
    display: table;
    border-collapse: separate;
    position: relative;
}
.project-component1-list div span.numbering{
    color: var(--grey3);
    font-size: 22px;
    font-weight: 700;
    line-height: 34px;
    padding-right: 16px;
    display: table-cell;
}
.project-component2{
    background: linear-gradient(to bottom, var(--bg), var(--bg) 100px, var(--white7) 100px, var(--white7));
    padding: 43px 0;
}
.project-component2 .main-wrapper{
    gap: 46px;
    align-items:flex-end;
}
.project-component2-image-wrapper{
    background: url('../storage/images/contact-us.png') no-repeat;
    background-size: contain;
    width: 507px;
    height: 308px;
    min-width: 35%;
    flex-grow: 0;
    flex-shrink: 0;
}
.project-component2-content{
    gap: 10px;
    padding: 36px 0;
}
.project-component2-content h3{
    font-size: 42px;
    font-weight: 700;
    line-height: 48px;
}
.project-component2-content p{
    font-size: 21px;
    font-weight: 400;
    line-height: 34px;
    color: var(--grey1);    
}
/* fanshop components */
.content-image-container-large{
    gap: 84px;
    align-items: center;
}
.content-image-container-large-content{
    gap: 72px;
}
.content-image-container-large-content h2{
    font-size: 64px;
    font-weight: 700;
    line-height: 72px;   
}
.content-image-container-large-content p{
    font-size: 21px;
    line-height: 34px;
}
.content-image-container-large-content .button{
    padding: 24px 48px;
}
.content-image-container-large-image-frame{
    background: url('../storage/images/image-frame.png') no-repeat;
    background-size: 100% auto;
    width: 515px;
    max-width: 515px;
    height: 476px;
    padding-bottom: 14px;
    flex-grow: 0;
    flex-shrink: 0;
}
.content-image-container-large-image-wrapper{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    padding-right: 11%;
    width: 89%;
    overflow: hidden;
    object-fit: cover;
    border-radius: 15px;
}

.content-image-container-large-image-wrapper img{
    width: 100%;
    height: 100%;
}
/* school list components */
.filter-tabs{
    margin-bottom: 1px;
}
.filter-tabs .main-wrapper{
    gap: 12px;
}
.filter-tabs input[type=search]{
    padding: 18px 54px 18px 24px;
    border-radius: 12px;
    background: var(--white) url('../storage/images/search-icon.png') no-repeat;
    background-size: 20px 20px;
    background-position: right 20px center;
    border: 0;
    outline: none;
    min-width: 355px;
    box-sizing: border-box;
    flex-grow: 1;
    flex-shrink: 1;
}
.filter-tabs input[type=search], .filter-tabs .filter-button{
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.filter-tabs input[type=search], .filter-tabs .filter-button, .filter-options-item{
    color: var(--black);
    font-size: 14px;
    line-height: 18px;
}
.filter-tabs input[type=search]::placeholder{
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--grey2);
    opacity: 0.5;
}
.filter-tabs .main-wrapper div{
    position: relative;
}
.filter-button-wrapper{
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    width: calc(20% - 10px);
}

.filter-button-wrapper > *{
    width: 100%;
}

.filter-tabs .filter-button, .filter-button{
    padding:  18px 24px;
    border-radius: 12px;
    background: var(--white);
    color: var(--black);
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    height: 56px;
}
.filter-button.button-opened .filter-button-icon{
    rotate: 180deg;
    transition: all ease-in 0.2s;
}
.filter-button .filter-button-icon{
    background: var(--white) url('../storage/images/dropdown-grey.png') no-repeat;
    background-size: 10px 5px;
    background-position: center center;
    display: inline-block;
    width: 10px;
    height: 5px;
    rotate: 0deg;
    transition: all ease-in 0.2s;
}
.filter-options{
    position: absolute !important;
    background: var(--white);
    padding: 8px;
    border-radius: 12px;
    box-shadow: 0px 6px 16px 0px rgba(6, 9, 25, 0.06);
    display: none;
    z-index: 5;
    flex-direction: column;
    top: 60px;
}
.filter-options ul{
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 4px 0 !important;
    list-style: none;
    margin: 0;
    overflow-y: scroll;
    overflow-x: hidden;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}
.filter-tabs .filter-options ul{
    height: 230px;
}
.filter-options ul::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }
.filter-options.visible{
    display: flex;
}
.filter-options li{
    margin: 0;
    padding: 0;
}
.filter-options .filter-options-item{
    width: 100%;
    display: block;
    padding: 8px 12px 8px 12px;
    border-radius: 6px;
    background: var(--white);
    box-sizing: border-box;
    cursor: pointer;
}
.filter-options-item:hover{
    background: var(--bg);
}
.filter-options-item.selected{
    background: var(--primary-fallback);
    background: var(--primary);
}
.filter-options input[type=search]{
    min-width: 100%;
    padding: 8px 26px 8px 12px;
    border-radius: 6px;
    background: var(--grey4) url('../storage/images/search-icon-grey-small.png') no-repeat;
    background-size: 14px 14px;
    background-position: right 12px center;
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    
}
.filter-options input[type=search]::placeholder{
    font-weight: 400;
    font-size: inherit;
    line-height: inherit;
}
/* custom option dropdown */
.custom-option-wrapper{
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    width: auto;
    min-width: 196px;
}
.custom-option-wrapper > *{
    width: 100%;
}
.custom-option-wrapper .filter-button{
    padding:  18px 16px;
    border-radius: 12px;
    background: var(--white);
    color: var(--black);
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    height: 46px;
}
.custom-option-wrapper .filter-options{
    top: 50px;
}
/* end of custom options */
.fitler-results{
    padding: 16px 0;
    justify-content: space-around;
}
.fitler-results .main-wrapper{
    gap: 24px;
    justify-content: left;
}
.fitler-results .main-wrapper > div{
    gap: 12px;
    align-items: center;
    width: auto !important;
}
.fitler-results .label{
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 1px;
    color: var(--grey2);    
}
.fitler-results .selected-results{
    gap: 6px;
}
.fitler-results .selected-option{
    padding: 0px 34px 0px 12px;
    border-radius: 4px;
    background: var(--white) url('../storage/images/x-grey-circle-icon.png') no-repeat;
    background-size: 14px 14px;
    background-position: right 10px center;
    font-family: Space Grotesk;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    color: var(--grey1);

}
.school-list{
    padding: 48px 0;
    justify-content: space-around;
    
}
.school-list .main-wrapper{
    gap: 48px;
}
.school-list-item{
    gap: 16px;
    border-radius: 12px;
    box-sizing: border-box;
    overflow: hidden;
}
.school-list-info{
    gap: 16px;
    padding: 24px 32px;
    align-items: center;
}
.school-list-info .school-logo, .school-short-info-box .school-logo{
    border: 1px solid var(--grey3);
    box-shadow: 0px 0px 34px 0px #0609190D;
    width: 80px !important;
    height: 80px !important;
    border-radius: 94px;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}
.school-list-content{
    gap: 2px;
}
.school-list-content h2{
    font-size: 21px;
    font-weight: 500;
    line-height: 28px;   
}
.school-list-content a.fanshop-link{
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
}
.school-list-accessibility{
    padding: 20px 16px;
    gap: 8px;
    background: linear-gradient(to right, rgba(240, 241, 244, 0.3) 0%, var(--white) 69.05%, var(--white));
    align-items: center;
    justify-content: center;
}
.school-list-accessibility > div{
    gap: 6px;
    align-items: center;
}
.school-selection-label{
    font-size: 8px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    color: var(--grey2);   
    text-transform: uppercase;
}
.school-selection-item{
    font-size: 10px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--grey1);
    background: var(--grey4);
    height: 22px;
    padding: 0px 6px;
    border-radius: 4px;
}
.pagination{
    display: flex;
    padding: 48px 0;
    justify-content: center;
}
.pagination .main-wrapper{
    justify-content: center;
    gap: 12px;
}
.pagination-number{
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    flex-grow: 0;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--grey2);
    text-align: center;
}
.pagination-number.current-page{
    background: var(--primary-fallback);
    background: var(--primary);
    color: var(--black);
    font-weight: 700;
}

/* school profile page */
.hero-section-variant1{
    padding: 48px 0;
    background: var(--black);
}
.hero-section-variant1 .main-wrapper{
    gap: 10px;
    align-items: center;
}
.hero-section-variant1 .fanshop-arrow-link{
    font-size: 21px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    position: relative;
}
.fanshop-arrow-link::after{
    content: "";
    background-image: url('../storage/images/arrow-red-icon.png');
    background-repeat: no-repeat;
    background-size: 5px 10px;
    background-position: right top 10px;
    padding-right: 15px;
    width: 5px; 
    height: 10px;    
}
.school-short-info{
    background: linear-gradient(to bottom, var(--black) 50%, rgba(0,0,0,0) 50%);
}
.school-short-info-box{
    padding: 24px;
    gap: 24px;
    border-radius: 12px;    
    background: var(--white); 
    align-items: center;
    position: relative;
    box-sizing: border-box;
}
.school-short-info-box p{
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: var(--black);
}
.school-short-info-box .button-wrapper{
    position: absolute;
    bottom: -16px;
    left: 0;
    justify-content: center;
}
.school-short-info-box .show-more-button{
    padding: 7px 26px 7px 12px;
    box-sizing: border-box;
    border-radius: 60px;
    background: var(--grey4) url('../storage/images/arrow-down-grey.png') no-repeat;
    background-size: 8px 4px;
    background-position: right 12px center;
    height: 32px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    color: var(--black);
    text-transform: uppercase;
}
.school-profile-basic-info{
    padding: 48px 0px 72px 0px;
    justify-content: space-around;
}
.school-profile-basic-info .main-wrapper{
    gap: 36px;
}
.school-profile-basic-info h2{
    font-size: 42px;
    font-weight: 700;
    line-height: 48px;
}
.school-profile-basic-content{
    gap: 32px;
    flex-wrap: wrap;
}
.school-profile-basic-content > div{
    width: calc(50% - 16px);
    box-sizing: border-box;
    gap: 2px;
}
.school-profile-basic-content .label{
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    color: var(--grey1);
    text-transform: uppercase;    
}
.school-profile-basic-content p{
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;
}
.school-advanced-info .main-wrapper{
    gap: 32px;
    flex-wrap: wrap;
}
.flex-fluid-half-row{
    width: 35%;
    max-width: 50%;
    flex-grow: 1;
    box-sizing: border-box;
}
.school-advanced-info h2{
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;
}
.carousel-main-wrapper{
    gap: 24px;
}
.carousel-wrapper{
    position: relative;
}
.carousel-outer-wrapper{
    overflow: hidden;
}
.carousel-inner-wrapper{
    gap: 12px;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    overflow-y: hidden;
    overflow-x: auto;
    scroll-behavior: smooth;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
}
.carousel-inner-wrapper::-webkit-scrollbar {
    display: none; /* for Chrome, Safari, and Opera */
  }
.carousel-image-wrapper{
    width: 249px;
    height: 141px;
    background: url('../storage/images/default-foto.png') no-repeat;
    background-size: contain;
    overflow: hidden;
    flex-grow: 0;
    flex-shrink: 0;
}
.carousel-bt{
    position: absolute;
    top: calc(50% - 20px);
    background: url('../storage/images/carousel-bt.png') no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
#next-bt{
    right: -20px;
}
#prev-bt{
    left: -20px;
    rotate: 180deg;
}
.yellow-list-wrapper{
    gap:24px;
}
.yellow-list-wrapper .flex-col{
    gap: 24px;
}
.yellow-list-item{
    background: url('../storage/images/list-ok-yellow.png') no-repeat;
    background-size: 18px 14px;
    background-position: left center;
    font-size: 21px;
    font-weight: 500;
    line-height: 28px;
    padding-left: 30px;
}
.school-interesting-topics{
    gap: 16px;
}
.school-interesting-topics p{
    font-size: 20px;
    font-weight: 400;
    line-height: 36px;
    color: var(--grey1);
}
.school-badges{
    gap: 24px;
}
.school-badges .flex-row{
    gap: 10px;
    padding: 16px;
    border-radius: 8px;
    background: var(--white);
    align-items: center;
    box-sizing: border-box;
}
.sport-club-badge{
    background: var(--bg) url('../storage/images/school-club-badge.png') no-repeat;
    background-size: 38px 39px;
    background-position: center center;
}
.prominent-badge{
    background: var(--bg) url('../storage/images/prominent-badge.png') no-repeat;
    background-size: 38px 38px;
    background-position: center center;
}
.success-badge{
    background: var(--bg) url('../storage/images/success-badge.png') no-repeat;
    background-size: 38px 38px;
    background-position: center center;
}
.sport-club-badge, .prominent-badge, .success-badge{
    width: 56px;
    height: 56px;
    flex-grow: 0;
    flex-shrink: 0;
}
.school-badges p{
    font-size: 20px;
    font-weight: 500;
    line-height: 26px;
    flex-grow: 1;
    flex-shrink: 1;
}
/*contact form page */
.contact-form-wrapper{
    padding: 96px 0;
}
.contact-form-wrapper .main-wrapper{
    gap: 144px;
}
.contact-form-baner{
    gap: 24px;
}
.banner-content{
    gap: 24px;
}
.banner-content h2{
    font-size: 64px;
    font-weight: 700;
    line-height: 72px;   
}
.banner-content p{
    font-size: 28px;
    font-weight: 500;
    line-height: 34px;
    color: var(--grey2);    
}
.contact-form form{
    width: 100%;
    float: left;
}
.contact-form fieldset{
    gap: 36px;
    width: 521px;
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    align-items: flex-start;
}
.contact-form .form-elements{
    gap: 16px;
}
.contact-form .form-line{
    gap: 16px;
    justify-content: space-between;
}
.form-line input{
    flex-grow: 1;
    flex-shrink: 1;
}

.user-form-wrapper .main-wrapper{
    gap: 71px;
    align-items: flex-start;
}
.user-form-wrapper ul{
    list-style: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.form-separator{
    width: 1px;
    height: 100%;
    border-right: 1px solid var(--grey2);
    opacity: 0.3;
}
.user-form-baner{
    gap: 24px;
}
.user-form-content{
    gap: 32px;
    align-items: flex-start;
    justify-content: flex-start;
}
.user-form-content > .flex-col{
    gap: 24px;
}
.user-form-baner p{
    font-size: 21px;
    font-weight: 400;
    line-height: 34px;
    color: var(--grey2);    
}
.user-form-wrapper .link{
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--grey2);
    white-space: nowrap;
}
.user-form-wrapper a{
    text-decoration: underline;
    white-space: nowrap;
}
.user-form-wrapper .contact-form{
    width: 632px;
    min-width: 632px;
}
.contact-form.full-width{
    width: 100%;
    min-width: 100%;
}
.contact-form.full-width fieldset{
    width: 100%;
}
.center-line{
    justify-content: center;
}
.separate-line{
    justify-content: space-between;
}
.center-line.multi-button{
    gap: 24px;

    box-sizing: border-box;
}
.center-col{
    align-items: center;
}
/* register profile custom form parts */
.register-profile-double-col{
    gap: 36px;
}
.register-profile-double-col .flex-fluid-row{
    gap: 16px;
}
.radio-elements{
    gap: 8px;
    align-items: center;
}
.radio-elements .flex-row{
    width: auto;
    gap: 8px;
}
.radio-elements label{
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.radio-elements .radio-wrapper{
    padding: 12px 16px;
    border-radius: 10px ;
    border: 1px solid var(--grey3);
    background: var(--white);
    align-items: center;
    box-sizing: border-box;
}
.radio-wrapper label{
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--grey2);
}
/* popup component */
#popup-wrapper{
    width: 100%;
    height: 100vh;
    position:fixed;
    background: rgba(6, 9, 25, 0.3);
    display: none;
    top: 0;
    bottom: 0;
    z-index: 99;
}
#popup-wrapper.popup-visible{
    display:block;
}
#popup-content-wrapper{
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 10px;
    bottom: 0;
    width: 100%;
    height: 100vh;
    overflow: auto;
    padding: 5vh 0;
    box-sizing: border-box;
}

.stop-scrolling{
    overflow: hidden;
}
.lost-password-window{
    background: var(--white);
    width: 632px;
    border-radius: 12px;
    box-shadow: 0px 16px 32px 0px #0609191A;
    overflow: hidden;
}
.popup-window-heading{
    padding: 24px;
    border-bottom: 1px solid var(--bgbg);
    justify-content: space-between;
    box-sizing: border-box;
}
.popup-window-heading h2{
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
}
.close-window{
    background-color: var(--grey4);
    background: var(--grey4) url('../storage/images/x-icon.svg') no-repeat;
    background-size: 10px 10px;
    background-position: center center;
    width: 32px;
    height: 32px;    
    border-radius: 24px;
    cursor: pointer;
}
.lost-password-window .contact-form{
    padding: 24px;
    box-sizing: border-box;
    background: var(--bg);
}
.lost-password-window fieldset{
    gap: 24px;
}
.lost-password-window .popup-note{
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
#popup-wrapper .profile-image-wrapper{
    background: var(--grey3);
}
/* floating label input regular */ 
.floating-input-field-regular{
    position: relative;
    width: 100%;
    height: 58px;
    display: flex;
}
.floating-input-field-regular.textarea{
    height: 143px;
}
form fieldset .floating-input-field-regular input, form fieldset .floating-input-field-regular textarea{
    width: 100%;
    height: 58px;
    padding: 23px 24px 9px 24px !important;
    gap: 10px;
    border-radius: 12px;
    border: 1px solid var(--grey3);
    opacity: 0px;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--black);
}
form fieldset .floating-input-field-regular textarea{
    height: 143px;
}
.floating-input-field-regular input::placeholder, .floating-input-field-regular textarea::placeholder{
    opacity: 0;
}

.floating-input-field-regular label{
    position: absolute;
    left: 25px;
    top: calc(50% - 12px);
    pointer-events: none;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: left;
    color: var(--grey2);
    transition: all 0.2s ease-out;
}
.floating-input-field-regular textarea + label{
    top: 17px;
}
#orderForm .floating-input-field-regular label{
    font-size: 16px;
}
.floating-input-field-regular input:focus + label, .floating-input-field-regular input:not(:placeholder-shown) +label{
    transform: translateY(calc(50% - 24px));
    font-size: 12px !important;
}
.floating-input-field-regular textarea:focus + label, .floating-input-field-regular textarea:not(:placeholder-shown) +label{
    transform: translateY(calc(-12px));
}
@supports (not (-ms-ime-align:auto)) {
    .floating-input-field-regular label{

        transform: translateY(calc(50% - 12px));
        transition: all 0.2s ease-out;
        font-size: 16px;
      }
  
      .floating-input-field-regular input:focus + label, .floating-input-field-regular input:not(:placeholder-shown) +label{
        transform: translateY(calc(50% - 24px));
        font-size: 12px !important;

      }
  }
  #orderForm .form-elements{
    gap: 12px;
  }
/* form components */
input, .custom-checkbox, .custom-radio{
    border: 1px color var(--grey3);
}
form label{
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    white-space: nowrap;
}
form input:not([type=checkbox]):not([type=radio]), form textarea{
    
    outline: none;
    padding: 16px 24px;
    border-radius: 12px;
    background: var(--white);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: var(--black);

}
form input::placeholder, form textarea::placeholder{
    font-family: SpaceGrotesk;
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: rgba(108, 113, 136, 0.5);
}
input[type=checkbox]{
    accent-color: var(--grey3);
    width: 24px;
    height: 24px;
    border-radius: 4px;
}
input[type=radio]{
    accent-color: var(--grey3);
    width: 20px;
    height: 20px;
    border-radius: 24px;
}
.custom-checkbox-wrapper, .custom-radio-wrapper{
    position: relative;
}

.custom-checkbox-wrapper input[type=checkbox], .custom-radio-wrapper input[type=radio], .custom-checkbox-wrapper input[type=radio]{
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    opacity: 0;
}
.custom-checkbox-wrapper label, .custom-radio-wrapper label{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}
.custom-radio-wrapper label.white-label{
    background: var(--white);
    padding: 8px 12px;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid var(--grey3);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--grey2);
}
.admin-profile-form .simple-label{
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 1px;
    color: var(--black);
    text-transform: uppercase;
}
.admin-profile-form .light-label{
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    color: rgba(108, 113, 136, 0.5);
    letter-spacing: 0;
    text-transform: lowercase;
}
label::first-letter, .custom-checkbox-wrapper label:first-letter{
    text-transform: capitalize !important;
}
.admin-profile-form .light-label + input[type=text]{
    padding: 0;
}
.custom-checkbox-wrapper label.profile-forms-label{
    padding: 8px 12px;
    gap: 8px;
    border-radius: 10px;
    border: 1px solid var(--grey3);
    background: var(--white);
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    box-sizing: border-box;
}
.custom-checkbox-wrapper label.profile-forms-label.wide{
    padding: 16px;
    width: 100%;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.custom-checkbox-wrapper .custom-checkbox{
    width: 24px;
    height: 24px;
    border-radius: 6px;
    background: var(--white);
    border: 1px solid var(--grey3);
}
.custom-checkbox-wrapper .custom-checkbox.small{
    width: 20px;
    height: 20px;
}
.custom-checkbox-wrapper .custom-checkbox-filled{
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: var(--grey3);
    border: 0;
    position: relative;
    display: inline-block;
}
.custom-checkbox-wrapper input[type=checkbox]:checked + label .custom-checkbox, .custom-checkbox-wrapper input[type=radio]:checked + label .custom-checkbox{
    background: var(--yellow-gradient);
    border:0;
    display: inline-block;
}
.custom-checkbox-wrapper input[type=checkbox]:checked + label .custom-checkbox::after, .custom-checkbox-wrapper input[type=radio]:checked + label .custom-checkbox::after{
    content: "";
    background: url('../storage/images/checkbox-checked-grey1.svg') no-repeat;
    background-size: 14px 12px;
    background-position: center center;
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
}
.custom-checkbox-wrapper input[type=checkbox]:checked + label .custom-checkbox.small::after{
    content: "";
    background: url('../storage/images/checkbox-checked-grey1.svg') no-repeat;
    background-size: 12px 10px;
    background-position: center center;
    width: 20px;
    height: 20px;
    display: inline-block;
    position: absolute;
}
.custom-checkbox-wrapper input[type=checkbox]:checked + label .custom-checkbox-filled::after{
    content: "";
    background: url('../storage/images/checkbox-checked-grey1.svg') no-repeat;
    background-size: 12px 10px;
    background-position: center center;
    width: 24px;
    height: 24px;
    display: inline-block;
    position: absolute;
}
.custom-radio-wrapper .custom-radio{
    width: 20px;
    height: 20px;
    border-radius: 24px;
    background: white;
    border: 1px solid var(--grey2);
    box-sizing: border-box;
}
.custom-radio-wrapper input[type=radio]:checked + label .custom-radio{
    border: 2px solid var(--grey1);
    position: relative;
}
.custom-radio-wrapper input[type=radio]:checked + label .custom-radio::after{
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    position: absolute;
    top: calc(50% - 4px);
    left: calc(50% - 4px);
    background: var(--grey1);
    border-radius: 24px;
    box-sizing: border-box;
}
.contact-form textarea{
    height: 130px;
}
.contact-form button{
    flex-grow: 0;
    flex-shrink: 0;
    width: auto;
}
.flex-input-note-row{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.flex-auto-width-content{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}
.flex-auto-width-content .flex-row{
    width:auto;
    gap: 8px;
}
.form-space-line{
    justify-content: space-between;
    align-items: center;
}
.multi-field-row{
    gap: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}
.multi-field-row .custom-input-field{
    flex-shrink: 1;
    flex-grow: 1;
    min-width: 27%;
}
.custom-input-field{
    display: flex;
    flex-direction: column;
    padding: 6px 24px 9px 24px;
    padding: 16px 24px;
    border-radius: 12px;
    border: 1px solid var(--grey3);
    background: var(--white);
    position: relative;
}
.custom-input-field.small{
    padding: 10px 24px 6px 24px;
}
.custom-input-field label{
    font-weight: 400;
    line-height: 24px;
    display: block;
    transform: translate(0, -20px);
    transition: all 0.2s ease-out;
}
.custom-input-field input{
    position: relative;
    top: 8px;
}
.custom-input-field input:focus + label,
  .custom-input-field input:focus + label,
  .custom-input-field input:not(:placeholder-shown) + label  {
    font-size: 11px;
    transform: translate(0, 10px);
  }

  
  @supports (not (-ms-ime-align:auto)) {
    .custom-input-field label {

        font-size: 16px !important;
        font-weight: 400 !important;
        color: rgba(108, 113, 136, 0.5) !important;

        transform: translate(0, -15px);
        transition: all 0.2s ease-out;
      }
  
      .custom-input-field input:focus + label,
      .custom-input-field input:not(:placeholder-shown) + label {
        color: var(--grey2) !important;
        font-size: 12px !important;
        font-size: 400 !important;
        transform: translate(0, -26px);
      }
  }
.custom-input-field.small label{
    font-size: 12px;
    font-weight: 400;
    line-height: 12px;    
}
form .custom-input-field input:not([type=checkbox]):not([type=radio]),
form .custom-input-field textarea{
    padding: 0;   
    width: auto;
    min-width: auto;
    font-family: SpaceGrotesk;
}
.custom-image-upload-wrapper{
    position: relative;
}
.custom-image-upload-wrapper.larger-upload{
    height: 202px;
}
.custom-image-upload-wrapper input{
    position: absolute;
    opacity: 0;
    z-index: 1;;
}
.custom-image-upload-wrapper label{
    font-size: 16px;
    line-height: 26px;
    color: rgb(108, 113, 136, 0.5);
    position: relative;
    z-index: 5;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    padding: 16px;
    border: 1px dotted var(--grey2);
    cursor: pointer;
    background: var(--white);
}
.custom-image-upload-wrapper.larger-upload label{
    padding: 16px;
}
.custom-image-upload-wrapper label span.image-upload-icon{
    background: url('../storage/images/image-upload-icon.svg') no-repeat;
    background-size: 19px 24px;
    background-position: left center;
    padding-left: 31px;
}
/* components */
button, .button, .black-button{
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    border-radius: 60px;
    padding: 24px 48px;
    cursor: pointer;
    border: 0;
}
button.medium, .button.medium{
    padding: 16px 32px;
}
.clean-button{
    padding: 0;
}
.link-button{
    padding: 0;
    background: none;
}
.regular-button, header button, .black-button{
    padding: 10px 32px;
}
button.primary, .primary-button{
    background: var(--primary);
    color: var(--white);
    box-shadow: 0px 15px 36px 0px #F657144D;
}
button.primary span, .primary-button span{
    color: var(--white);
}
button.secondary, .black-button{
    gap: 12px;
    background: var(--black);
    color: var(--white);
    
}
button.white, .white-button{
    background: var(--white);
    color: var(--black);
}
button.admin-form-save{
    background: var(--white) url('../storage/images/save-icon.svg') no-repeat;
    background-size: 20px 20px;
    background-position: 48px center;
    padding-left: 80px;
    border: 1px solid #A4EEB3;
}
.widget-button{
    width: auto;
    padding: 10px 20px 10px 20px;
    border-radius: 6px;
    background: var(--white);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: center;
    color: var(--black);
    text-transform: uppercase;
}
.text-button{
    cursor: pointer;
}
/* icons */
.arrow-orange-icon{
    background: url('../storage/images/arrow-orange-icon.png') no-repeat;
    background-size: 4px 8px;
    background-position: right center;
    padding-right: 12px;
}
.arrow-blue-icon{
    background: url('../storage/images/arrow-blue-icon.png') no-repeat;
    background-size: 4px 8px;
    background-position: right center;
    padding-right: 12px;
}
.arrow-red-icon{
    background: url('../storage/images/arrow-red-icon.png') no-repeat;
    background-size: 4px 8px;
    background-position: right center;
    padding-right: 12px;
}
.arrow-down-grey{
    background: url('../storage/images/arrow-down-grey.png') no-repeat;
    background-size: 12px 6px;
    background-position: right 20px;
    padding-right: 20px;
}
.arrow-down-black{
    background: url('../storage/images/arrow-down-black.png') no-repeat;
    background-size: 10px 5px;
    background-position: right center;
    padding-right: 20px;
}
.list-icon-white{
    background: url('../storage/images/list-icon-white.png') no-repeat;
    background-size: 18px 14px;
    background-position: right center;
    padding-left: 20px;
}



/* admin section */
.flex-main-row-tiny{
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: space-around;
    padding: 32px 0;
}

.user-profile-navigation{
    background: var(--bg-gradient);
}
.user-profile-navigation .main-wrapper{
    gap: 32px;
}
.user-profile-navigation a{
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 1px;
    padding: 10px 0;
    border-radius: 36px;
    text-transform: uppercase;
}
.user-profile-navigation a.active-admin-page{
    background: var(--primary-fallback);
    background: var(--primary);
}

/* example hours */
.admin-profile-form label{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--grey2);
}
.admin-profile-form input[type=checkbox]:checked + label{
    color: var(--white);
    background: var(--black);
    font-weight: 700;
    line-height: 28px;
}
.admin-profile-form .profile-form-content{
    gap: 10px;
}
.profile-form-content p{
    font-size: 21px;
    font-weight: 400;
    line-height: 34px;    
}
.admin-profile-form fieldset .form-content{
    gap: 16px;
}
.form-tab-line{
    padding: 16px;
    gap: 8px;
    border-radius: 12px;
    border: 1px solid var(--grey3);
    background: var(--white);
    cursor: pointer;
    box-sizing: border-box;
}
.form-tab-line.checked{
    background: var(--black);
}

/* admin profile */
.admin-profile .main-wrapper{
    gap: 0;
}
.profile-info-column{
    gap: 32px;
    width: 411px;
    min-width: 411px;
    align-items: flex-start;
}
.main-profile-wrapper{
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}
.update-profile-button{
    position: absolute;
    top: 16px;
    right: 16px;
    text-transform: uppercase;
    color: var(--white);
    background: url('../storage/images/pencil-edit-icon.svg') no-repeat;
    background-size: 14px 14px;
    background-position: left center;
    padding-left: 20px;
    cursor: pointer;
}
.profile-heading-wrapper{
    padding: 32px;
    gap: 12px;
    background: var(--black);
    box-sizing: border-box;
    align-items: center;
}
.profile-image-wrapper{
    width: 120px;
    height: 120px;
    background: var(--grey1);
    border-radius: 96px;
    overflow: hidden;
}
.profile-heading-wrapper h1{
    color: var(--white);
    font-size: 28px;
    font-weight: 600;
    line-height: 38px;
    text-align: center;
}
.profile-heading-wrapper p{
    color: var(--grey2);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: center;
}
.profile-info-wrapper{
    background: var(--white);
}
.profile-info-wrapper .flex-col{
    box-sizing: border-box;
    padding: 16px 24px;
    gap: 0px;
}
.profile-info-wrapper .flex-col:not(:last-of-type){
    border-bottom: 1px solid var(--bg);
}
.profile-info-text{
    font-size: 16px;
    font-weight: 400;
    line-height: 20.42px;
}
.profile-info-label{
    color: var(--grey2);
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
}
.user-profile-wrapper{
    gap: 8px;
}
.user-profile-wrapper h3 span{
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    background: url('../storage/images/right-arrow-icon-grey.svg') no-repeat;
    background-size: 4px 12px;
    background-position: right center;
    padding-right: 12px;
}

.user-profile-wrapper .profile-info-wrapper{
    border-radius: 12px;
    overflow: hidden;
}
.user-profile-wrapper .profile-info-wrapper .flex-col{
    padding: 12px 16px;
}

.profile-contnet-column{
    position: relative;
    padding: 32px 0;
}
.profile-content-heading{
    margin: 32px 0;
    background: white;
    background: var(--bg-gradient);
    background: 
linear-gradient(90deg, rgba(255, 156, 1, 0.1) 0%, rgba(255, 255, 255, 1) 100%);

    top: 316px;
    left: 563px;
    padding: 32px 32px 32px 32px;
    border-radius: 0px 12px 12px 0px;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
}
.profile-content-heading .heading-content{
    gap: 2px;
}
.profile-content-heading h2{
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;   
}
.profile-content-heading p{
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;   
}
.profile-content-heading .heading-meter{
    width: 60px;
    min-width: 60px;
    height: 60px;
    flex-grow: 0;
    flex-shrink: 0;
    position: relative;
}
.profile-content-parts{
    gap: 32px;
    margin-left: 32px;
    box-sizing: border-box;
    width: calc(100% - 32px);
}
.profile-content-list{
    gap: 12px;
}
.profile-content-part-wrapper, .profile-content-list-heading{
    gap: 12px;
    align-items: center;
}
.profile-content-list-heading .list-item-small-primary{
    position: relative;
    top: 4px;
}
.profile-content-list-heading .list-item-small-primary span{
    font-size: 14px;
    font-weight: 700;
    line-height: 28px;
    color: var(--white) !important;
    position: relative;
    top: 7px;
    left: 18px;
}
.profile-content-list-heading h2{
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    background: url('../storage/images/right-arrow-icon-grey.svg') no-repeat;
    background-size: 6px 16px;
    background-position: right center;
    padding-right: 18px;
}
.profile-content-part-wrapper{
    padding: 32px 0px;
    gap: 16px;
    border-radius: 12px;
    align-items: center;
    background: var(--white);
}
.profile-content-part-wrapper.no-padding{
    padding: 0;
    gap: 0;
}
.profile-content-part-wrapper .empty-note{
    color: var(--grey2);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.profile-content-part-item{
    padding: 12px 16px;
    gap: 6px;
    box-sizing: border-box;
}
.profile-content-part-item:not(:last-of-type){
    border-bottom: 1px solid var(--bg);
}
.profile-content-item-label{
    color: var(--grey2);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.profile-content-part-item .flex-row{
    gap: 10px;
}
.profile-content-item-text{
    background-color: var(--bg);
    padding: 16px 12px 16px 12px;
    border-radius: 10px;
    color: var(--grey1);
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;   
    display: flex;
    gap: 10px;
    align-items: center;
}
.profile-content-item-text.ok-check-icon{
    background-image: url('../storage/images/admin-selected-icon.svg');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 12px center;
    padding-left: 40px;
}
.profile-content-part-item p{
    color: var(--grey1);
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
}
.admin-add-button{
    box-sizing: border-box;
    padding: 8px 16px;
    border-radius: 60px;
    border: 1px solid var(--black);
    background: var(--white);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
}
.admin-add-button.plus-icon{
    background: var(--white) url('../storage/images/plus-icon.svg') no-repeat;
    background-size: 10px 10px;
    background-position: 16px center;
    padding-left: 34px;
}
.admin-prominent-badge-icon{
    width: 32px;
    height: 32px;
    gap: 10px;
    border-radius: 8px;
    background: var(--white) url('../storage/images/prominent.svg') no-repeat;
    background-size: 22px 22px;
    background-position: center center;
}
.admin-add-button.save-bt{
    border: 1px solid #A4EEB3;
}
.admin-add-button.remove-bt{
    border: 1px solid #F1AAAA;
}
/* admin profile forms */
.profile-forms-navigation{
    background: var(--bg-gradient);
}
.profile-forms-navigation .main-wrapper{

    position: relative;
}
.profile-forms-navigation .main-wrapper > .flex-col{
    gap: 6px;
    position: relative;
    flex-grow: 1;
    flex-shrink: 1;
    width: 100%;
}
.basket-form-navigation .main-wrapper > .flex-col:first-child{
    width: auto !important;
}
.basket-form-navigation .main-wrapper > .flex-col:last-child{
    width: auto !important;
}
.profile-forms-navigation .main-wrapper > .flex-col::after{
    background: white;
    content: "";
    height: 2px;
    display: inline-block;
    position: absolute;
    top: 25px;
    left: 0;
    width: 100%;
}
.profile-forms-navigation .main-wrapper > .flex-col:first-of-type::after{
    width: 50%;
    left: 50%;
}
.profile-forms-navigation .main-wrapper > .flex-col:last-of-type::after{
    width: 50%;
    left: 0;
}
.profile-forms-navigation a{
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: center;
    color: var(--grey2);
    gap: 6px;
}
.profile-forms-navigation .list-item-small.primary~a{
    font-weight: 700;
    color: var(--black);
}
.profile-forms-navigation .list-item-small.primary span{
    font-weight: 700;
    color: var(--white);
}
.profile-forms-navigation .nav-title{
    text-transform: uppercase;
    white-space: nowrap;
}
.form-tab-line-small{
    position: relative;
    overflow: hidden;
}
.form-tab-line-small input{
    position: absolute;
    left: 0px;
    z-index: 1;
}
.form-tab-line-small label{
    position: relative;
    z-index: 9;
    width: 100%;
    padding: 7px 12px;
    box-sizing: border-box;
    border-radius: 10px;
    border: 1px solid var(--grey3);
    background: var(--white);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    color: var(--grey2);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.form-tab-line-small label .custom-checkbox{
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid var(--grey2);
    display: inline-block;
}
.form-tab-line label .custom-checkbox{
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 1px solid var(--grey2);
    display: inline-block;
}
.form-tab-line-small input[type=checkbox]:checked ~ label{
    font-size: 13px;
    line-height: 22px;
    font-weight: 500;
    padding: 7px 12px;
}
.form-tab-line-small input[type=checkbox]:checked ~ label .custom-checkbox{
    background:  url('../storage/images/input-checked.svg') no-repeat;
    background-size: 20px 20px;
    background-position: left center;
}
.expanded-form-row{
    border: 1px solid var(--grey3);
    border-radius: 12px;
    gap: 12px;
    padding: 0 0 12px 0;
}
.extended-tab-line{
    padding: 0 16px;
    gap: 12px;
    box-sizing: border-box;
    flex-wrap: wrap;

}
.extended-tab-line .flex-row{
    width: auto;
}
.admin-profile-form .main-wrapper{
    gap: 0;
}
.admin-profile-form fieldset{
    gap: 48px;
}
.admin-profile-form fieldset .form-content{
    gap: 16px;
}
.admin-profile-form h2{
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
}
.admin-profile-form form input[type=number]{
    box-sizing: border-box;
    padding: 8px 12px !important;
    gap: 10px;
    border-radius: 10px !important;
    max-width: 40px;
    height: 40px;
    border: 1px solid var(--grey3);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
    margin-right: 4px;
}
.admin-profile-form input::-webkit-outer-spin-button,
.admin-profile-form input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.admin-profile-form input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}
.extended-number-element{
    gap: 12px;
    align-items: center;
}
.additional-info-form-line input{
    flex-grow: 1;
    flex-shrink: 1;
}
.single-col-form-frame{
    gap: 36px;
}
.double-col-form-frame{
    gap: 24px 36px;
    flex-wrap: wrap;
    box-sizing: border-box;
}
.double-col-form-frame > div{
    flex-basis: calc(50% - 18px);
}
@media all and (max-width: 960px){
    .double-col-frame > div{
        flex-basis: 100%;
    }
}
.uploaded-images-main-wrapper{
    border-radius: 12px;
    padding: 16px;
    gap: 16px;
    background: var(--white);
}
.uploaded-image-container{
    gap: 16px;
    max-width: 100%;
    flex-wrap: wrap;
}
.uploaded-image-wrapper{
    width: 175px;
    height: 98px;
    border-radius: 8px;
    background: var(--grey3);
    position: relative;
    justify-content: center;
    align-items: center;
}
.remove-uploaded-image{
    position: absolute;
    right: 6px;
    top: 6px;
    background: white url('../storage/images/x-icon.svg') no-repeat;
    background-size: 6px 6px;
    background-position: center center;
    border-radius: 24px;
    width: 16px;
    height: 16px;
}

.admin-profile-form .school-badges .badge-container .persona-name{
    position: relative;
    display: inline-block;
    padding-right: 24px;
}
.admin-profile-form .school-badges .badge-container .persona-name::after{
    content: " . ";
    position: absolute;
    right: 5px;
    top: -5px;
    color: inherit;
    font-weight: 700;
    
}
.admin-profile-form .school-badges .badge-container{
    cursor: pointer;
}
.admin-profile-form .school-badges .selected-badge{
    border: 1px solid var(--black);
}
.admin-profile-form .school-badges .prominent-badge{
    border-radius: 8px;
}
/* progress circle  */

.progress {
    height: 60px;
    width: 60px;
    cursor: pointer;

}

.progress-circle {
  transform: rotate(-90deg);
    box-sizing: border-box;
    float: left;
}

.progress-circle-back {
	fill: none; 
	stroke: rgba(255, 151, 2, 0.3);
	stroke-width:4px;
}

.progress-circle-prog {
	fill: none; 
	stroke: var(--primary-fallback);
	stroke-width: 4px;  
	stroke-dasharray: 0 188.5;    
	stroke-dashoffset: 0px;
    transition: stroke-dasharray 0.7s linear 0s;
}
.progress-circle-prog.one {
    stroke-dasharray: 37 188.5;
    stroke-dashoffset: 0px;
    transition: stroke-dasharray 0.7s linear 0s;
}
.progress-circle-prog.two {
    stroke-dasharray: 74 188.5;
    stroke-dashoffset: 0px;
    transition: stroke-dasharray 0.7s linear 0s;
}
.progress-circle-prog.three {
    stroke-dasharray:  111 188.5;
    stroke-dashoffset: 0;
    transition: stroke-dasharray3 0.7s linear;
    animation-iteration-count:initial;
  animation-name: stroke-dasharray3;
  animation-duration: 0.7s;
  animation-direction: alternate;
  animation-timing-function: linear;
}
@keyframes stroke-dasharray3 {
    from{
        stroke-dasharray: 0 188.5;
    }
    to {
        stroke-dasharray: 111 188.5;
    }
  }
.progress-circle-prog.four {
    stroke-dasharray: 148 188.5;
    stroke-dashoffset: 0px;
    transition: stroke-dasharray 0.7s linear 0s;
}
.progress-circle-prog.five {
    stroke-dasharray: 188.5 188.5;
    stroke-dashoffset: 0px;
    transition: stroke-dasharray 0.7s linear 0s;
}
.progress-text {
	width: 100%;
	position: absolute;
	top: 16px;
	text-align: center;
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
}



/* fanshop */



.fanshop-hero-category{
    padding: 40px 0;
}
.fanshop-hero-category .main-wrapper{
    gap: 0;
    justify-content: left;
}
.fanshop-hero-category h2, .fanshop-product-category h2{
    font-size: 42px;
    font-weight: 700;
    line-height: 48px;
    text-align: left;
}
.fanpage-category-row h3{
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    text-align: center;
    color: var(--black);
}
/*

.fanshop-add-button{
    padding: 16px 54px;
    background: var(--white);
    border-radius: 62px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 500;
    line-height: 19.5px;
    color: var(--black);
    cursor:pointer;
}
*/


.fanpage-category-row{
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 32px 0px 48px 0px;
    gap: 36px;   
}
.fanpage-category-row .product-category-wrapper{
    flex-shrink: 1;
    width: calc(25% - 36px);
}
.fanpage-category-row .product-category-wrapper.mock-box{
    height: 0;
}
.fanpage-category-row .product-category-wrapper a{
    gap: 16px;
}
@media all and (min-width: 961px){
    .fanpage-category-row .product-category-wrapper{
       width: calc(25% - 36px) !important;
    }
}
@media all and (max-width: 1140px){
    .fanpage-category-row .product-category-wrapper{
        width: calc(33% - 24px) !important;
    }
}
@media all and (max-width: 960px){
    .fanpage-category-row .product-category-wrapper{
        width: calc(50% - 18px) !important;
    }
}
@media all and (max-width: 640px){
    .fanpage-category-row .product-category-wrapper{
        width: 300px !important;
    }
}
.product-image-wrapper{
    border-radius: 20px;
    background: var(--white);
    overflow: hidden;
    width: 100%;
    aspect-ratio: 300/300;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-image-wrapper img{
    width: 90%;
    height: auto;
}
/* fanshop hero products */
.fanshop-hero-offer{
    padding: 72px 0;
    background: var(--bg-gradient);
}
.fanshop-hero-offer .main-wrapper{
    gap: 32px;
}
.fanshop-hero-offer .fanpage-hero-row{
    gap: 31px;
    flex-wrap: wrap;
    justify-content: space-between;
}
.product-large-wrapper{
    flex-shrink: 1;
    aspect-ratio: 300/300;
    padding: 27.5px 16px;
    border-radius: 12px;
    background: var(--white);
}
.product-large-wrapper a{
    gap: 16px;
    align-items: center;
    justify-content: center;
}
.product-large-wrapper img{
    width: 124px;
    height: 155px;
    aspect-ratio: 124/155;
}
.product-large-wrapper h3{
    color: var(--black);
    font-size: 20px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
}
.product-large-wrapper .product-price{
    color: var(--grey2);
    font-size: 16px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: center;
}
@media all and (min-width: 961px){
    .product-large-wrapper{
       width: calc(25% - 31px) !important;
    }
}
@media all and (max-width: 1140px){
    .product-large-wrapper{
        width: calc(33% - 20.7px) !important;
    }
}
@media all and (max-width: 960px){
    .product-large-wrapper{
        width: calc(50% - 15.5px) !important;
    }
}
@media all and (max-width: 640px){
    .product-large-wrapper{
        width: 300px !important;
    }
}
.product-large-wrapper.mock-box{
    height: 0;
    padding: 0;
}
/* fanshop hero carousel*/
.fanshop-hero-carousel{
    padding: 40px 0;
}
.fanshop-hero-carousel .main-wrapper{
    gap: 16px;
}
.fanshop-hero-carousel h2{
    color: var(--black);
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;
    text-align: left;
}
.product-medium-wrapper{
    background: var(--white);
    padding: 22px 16px;
    gap: 12px;
    border-radius: 12px;   
    width: 246px;
    min-width: 246px;
    height: 246px;
    aspect-ratio: 246/246;
    justify-content: center;
    align-items: center;
}
.product-medium-wrapper img{
    width: 96px;
    height: 120px;
}
.product-medium-wrapper h3{
    color: var(--black);
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
}
.product-medium-wrapper .product-price{
    color: var(--grey2);
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: center;
}
/* category page */
.fanshop-category-page{
    padding: 0;
}
.fanshop-category-page .fanpage-category-row{
    padding: 0 0 48px 0;
}
/* newsletter */
.main-newsletter-wrapper{
    background: #F0F0F0;
    background: linear-gradient(to bottom, white 50%, #F0F0F0 50%);
    padding: 0;
}
.main-newsletter-wrapper .main-wrapper{
    background: var(--black);
    padding: 36px 64px;
    border-radius: 20px;
    justify-content: space-between;
    align-items: center;
}
.main-newsletter-wrapper h3{
    color: var(--white);
    font-size: 40px;
    font-weight: 700;
    line-height: 45px;
    text-align: left;
}
.newsletter-form-wrapper{
    gap: 14px;
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 350px;
}
.newsleeter-custom-input{
    padding: 12px 16px 12px 16px;
    gap: 12px;
    border-radius: 62px;
    background: var(--white) url('../storage/images/email-icon.svg') no-repeat;
    background-size: 20px 16px;
    background-position: left 16px center;
    padding-left: 48px;
}
.newsleeter-custom-input input{
    background: none;
    border: 0;
    appearance: none;
    width: 100%;
    padding: 0 !important;
}
.newsleeter-custom-input input::placeholder{
    font-size: 16px;
    font-weight: 400;
    line-height: 19.5px;
    text-align: left;
    color: var(--black);
    opacity: 0.4;
    font-family: inherit;
}
.newsletter-button{
    padding: 12px 16px;
    border-radius: 62px;
    background: var(--white);
    color: var(--black);
    font-size: 16px;
    font-weight: 500;
    line-height: 19.5px;
    text-align: center;    
}
/* category page */
.category-page-wrapper{
    padding: 83px 0;
}
.category-page-wrapper .main-wrapper{
    gap: 43px;
}
.hero-section-subtitle{
    font-size: 36px;
    font-weight: 700;
    line-height: 46px;
    text-align: left;
}
.hero-section-variant2 {
    padding: 52px 0 120px 0;
    background: var(--black);
}
.fanshop-hero-products{
    padding: 49px 0;
}
.fanshop-hero-products .main-wrapper{
    gap: 54px;
    align-items: center;
}
.hero-main-product-wrapper{
    gap: 95px;
    padding: 0 0 46px 0;
}
.hero-products-row{
    gap: 20px;
    justify-content: space-between;
}
.hero-products-row .product-category-wrapper{
    gap: 19px;
}
.hero-products-row .product-image-wrapper{
    width: 296px;
    height: 296px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    border: 1px solid #D4D0D0;
    overflow: hidden;
}
.hero-products-row .product-content{
    gap: 32px;
    align-items: center;
}
.hero-products-row .product-content .flex-row{
    justify-content: space-between;
    align-items: end;
}
.hero-products-row .product-content .flex-row p{
    padding-left: 11px;
}
.hero-products-row .stock-status{
    font-size: 15px;
    font-weight: 700;
    line-height: 18.29px;
    color: var(--brand3);
}
.hero-products-row .product-price-note{
    font-size: 20px;
    font-weight: 300;
    line-height: 24.38px;
    text-align: left;
    color: var(--black);
    
}
.hero-products-row .product-price{
    font-weight: 700; 
}
.yellow-button{
    background: var(--brand3);
    color: var(--white);
    padding: 12px 26px;
    border-radius: 62px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    font-size: 16px;
    font-weight: 500;
    line-height: 19.5px;

}

/*fanshop product list page */
.product-list-main-wrapper{
    padding: 0 0 67px 0;
}
.product-list-main-wrapper .main-wrapper{
    gap: 32px;
}
.filter{
    flex-basis: 300px;
    background: var(--white);
}

.product-grid-main-wrapper{
    padding: 16px 0 0 0;
    gap: 48px;
}
.product-grid-heading-wrapper{
    border-bottom: 1px solid var(--grey3);
    padding: 0 0 16px 6px;
    justify-content: space-between;
}
.product-grid-heading{
    gap: 8px;
    align-items: center;
}
.product-grid-heading h1{
    color: var(--black);
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    text-align: left;
}
.product-grid-heading .product-grid-counter{
    background: var(--grey3);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: var(--black);       
}
.product-grid-order-options{
    gap: 12px;
    text-transform: uppercase;
    align-items: center;
    justify-content: right;
}
.product-grid-order-options label{
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 1px;   
}

.product-grid-wrapper{
    gap: 16px;
}
.product-grid-wrapper.admin-section-grid{
    gap: 24px;
}
.product-grid-category-frame{
    gap: 12px;
}
.product-grid-wrapper .hero-products-row{
    gap: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
}
@media all and (min-width: 961px){
    .product-grid-wrapper .hero-products-row > *{
        width: calc(25% - 12px) !important;
    }
}
@media all and (max-width: 1140px){
    .product-grid-wrapper .hero-products-row > *{
        width: calc(33% - 11px) !important;
    }
}
@media all and (max-width: 960px){
    .product-grid-wrapper .hero-products-row > *{
        width: calc(50% - 9px) !important;
    }
}
@media all and (max-width: 640px){
    .product-grid-wrapper .hero-products-row{
        flex-direction: column;
        align-items: center;
    }
    .product-grid-wrapper .hero-products-row > *{
        width: 229px !important;
    }
}
.product-grid-wrapper .product-regular-wrapper{
    width: 229px;
    height: 229px;
    flex-shrink: 1;
    flex-grow: 0;
    min-width: 15%;
    aspect-ratio: 229/229;

    padding: 12px 16px;

    border-radius: 12px;
    opacity: 0px;
    background: var(--white);
    overflow: hidden;
}
.product-regular-wrapper a{
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}
.product-regular-wrapper.hidden{
    width: 0;
    height: 0;
    padding:0;
}
.product-regular-wrapper h3{
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    color: var(--black);
}
.product-regular-wrapper .product-price{
    font-size: 12px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: center;
    color: var(--grey2);    
}

/* filter style */
.filter-main-wrapper{
    width: 300px;
    min-width: 300px;

}
.filter-inner-wrapper{
    width: 100%;
    padding: 24px 0;
    gap: 24px;
    border-radius: 12px;
    background: var(--white);
}
.filter-inner-wrapper > .flex-col:not(.filter-heading){
    border-top: 1px solid var(--bg);
    padding: 16px 24px 0 24px;
}
.filter-inner-wrapper > .flex-col h4{
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    margin: 0;
    padding: 0;
}
.filter-icon-heading{
    justify-content: space-between;
    align-items: center;
}
.filter-icon-heading .filter-close-icon{
    background: url('../storage/images/arrow-down-black.png') no-repeat;
    background-size: 10px 5px;
    width: 10px;
    height: 5px;
    display: inline-block;
    rotate: 180deg;
}
.filter-heading{
    justify-content: space-between;
    padding: 0 24px;
    align-items: baseline;
}
.filter-heading h3{
    font-size: 21px;
    line-height: 28px;
    font-weight: 700;
}
.filter-inner-wrapper .filter-icon{
    background: url('../storage/images/filter-icon.svg') no-repeat;
    background-size: 17px 16px;
    background-position: center center;
    display: inline-block;
    width: 17px;
    height: 16px;
}
.filter-category-wrapper{
    gap: 12px;
}
.filter-selected-products-counter{
    gap: 8px;
    align-items: center;
}
.filter-selected-products-icon{
    background: url('../storage/images/input-checked.svg') no-repeat;
    background-size: 20px 20px;
    background-position: left center;
    width: 20px; 
    height: 20px;
}
.filter-selected-products-counter p{
    font-size: 16px;
    line-height: 28px;
    font-weight: 700;
}
.category-item-wrapper{
    gap: 8px;
}
.category-main-item{
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    cursor: pointer;
}
.category-child-wrapper{
    padding-left: 16px;
    gap: 6px;
}
.category-child-item{
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    cursor: pointer;
}
.category-main-item.filter-selected{
    background: var(--bg);
    border-radius: 4px;
    padding: 2px 6px;
}
.filter-price-range-wrapper{
    gap: 20px;
}
.filter-color-wrapper{
    gap: 16px;
}
.filter-color-row{
    gap: 12px;
    flex-wrap: wrap;
}
.filter-color-picker{
    width: 19px;
    height: 19px;
    border-radius: 45px;
    display: inline-block;
    background: white;
    cursor: pointer;
    border: 0 !important;
    outline: 3px solid white;
    outline-offset: -6px;
}
.filter-color-picker.filter-white{
    border: 0.5px solid var(--grey3) !important;
    outline: 2px solid var(--grey3);
}
.filter-color-picker.filter-white.filter-selected{
    border: 1px solid var(--grey1) !important;
}
/* filter colors */
.filter-red{
    border: 9px double #E74C3C;
}
.color-picker.filter-red{
    background-color: #E74C3C;
}
.filter-orange{
    border: 9px double  #E67E22;
}
.color-picker.filter-orange{
    background-color: #E67E22;;
}
.filter-yellow{
    border: 9px double #F1C40F;
}
.color-picker.filter-yellow{
    background-color:  #F1C40F;
}
.filter-green{
    border: 9px double  #2ECC71;
}
.color-picker.filter-green{
    background-color:  #2ECC71;
}
.filter-cyan{
    border: 9px double #34C7DB;
}
.color-picker.filter-cyan{
    background-color: #34C7DB;
}
.filter-blue{
    border: 9px double #346DDB;
}
.color-picker.filter-blue{
    background-color:#346DDB ;
}
.filter-purple{
    border: 9px double #9B59B6;
}
.color-picker.filter-purple{
    background-color: #9B59B6;
}
.filter-light-grey{
    border: 9px double #F2F2F2;
}
.color-picker.filter-light-grey{
    background-color: #F2F2F2;
}
.filter-black{
    border: 9px double #060919;
}
.color-picker.filter-black{
    background-color: #060919;
}
/* end of filter colors */
.filter-color-picker.filter-selected{
    outline: none !important;
}
.filter-sizes-wrapper{
    gap: 12px;
}
.filter-size-row{
    gap: 4px;
    flex-wrap: wrap;
}
.filter-size-tab{
    background: var(--grey4);
    height: 30px;
    padding: 3px 12px;
    border-radius: 4px;
    color: var(--grey1);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}
.filter-size-tab.filter-selected{
    background: var(--black);
    color: var(--white);
}
/* custom input range */


  
[slider] {
    position: relative;
    height: 6px;
    border-radius: 20px;
    text-align: left;
    margin: 7px 0 0 0;
    padding-bottom: 28px;
  }
  
  [slider] > div {
    position: absolute;
    left: 0;
    right: 0;
    height: 6px;
  }
  
  [slider] > div > [inverse-left] {
    position: absolute;
    left: 0;
    height: 6px;
    border-radius: 20px;
    background-color: var(--bg);
    margin: 0 7px 0 0px;
  }
  
  [slider] > div > [inverse-right] {
    position: absolute;
    right: 0;
    height: 6px;
    border-radius: 20px;
    background-color: var(--bg);
    margin: 0 0 0 7px;
  }
  
  [slider] > div > [range] {
    position: absolute;
    left: 0;
    height: 6px;
    border-radius: 20px;
    background-color: var(--black);
  }
  
  [slider] > div > [thumb] {
    position: absolute;
    top: -7px;
    z-index: 2;
    height: 20px;
    width: 20px;
    text-align: left;
    margin-left: -11px;
    cursor: pointer;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4);
    background-color: #FFF;
    border-radius: 50%;
    outline: none;
    outline: 6px solid var(--black);
    border: 0;
    outline-offset: -6px;
  }
  
  [slider] > input[type=range] {
    position: absolute;
    pointer-events: none;
    -webkit-appearance: none;
    z-index: 3;
    height: 6px;
    top: -2px;
    width: 100%;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
  }
  
  div[slider] > input[type=range]::-ms-track {
    -webkit-appearance: none;
    background: transparent;
    color: transparent;
  }
  
  div[slider] > input[type=range]::-moz-range-track {
    -moz-appearance: none;
    background: transparent;
    color: transparent;
  }
  
  div[slider] > input[type=range]:focus::-webkit-slider-runnable-track {
    background: transparent;
    border: transparent;
  }
  
  div[slider] > input[type=range]:focus {
    outline: none;
  }
  
  div[slider] > input[type=range]::-ms-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 0px;
    border: 0 none;
    background: red;
  }
  
  div[slider] > input[type=range]::-moz-range-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 0px;
    border: 0 none;
    background: red;
  }
  
  div[slider] > input[type=range]::-webkit-slider-thumb {
    pointer-events: all;
    width: 20px;
    height: 20px;
    border-radius: 0px;
    border: 0 none;
    background: red;
    -webkit-appearance: none;
  }
  
  div[slider] > input[type=range]::-ms-fill-lower {
    background: transparent;
    border: 0 none;
  }
  
  div[slider] > input[type=range]::-ms-fill-upper {
    background: transparent;
    border: 0 none;
  }
  
  div[slider] > input[type=range]::-ms-tooltip {
    display: none;
  }
  
  [slider] > div > [sign] {
    opacity: 1;
    position: absolute;
    margin-left: 0;
    top: 11px;
    z-index:3;
    width: auto;
    height: 24px;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    color: var(--grey2);
    white-space: nowrap;
  }  
  [slider] > div > [sign] > span {
    font-size: 12px;
    font-weight: 700;
    line-height: 24px;
    color: var(--grey2);
  }

/* product detail */
.product-detail-main-wrapper{
    padding: 0;
    gap: 0;
}
.product-detail-main-wrapper .main-wrapper{
    gap: 32px;
    padding: 32px 0;
    border-radius: 26px;
    background: var(--white);
}
.product-detail-top-wrapper{
    padding: 0 32px 48px 32px;
    gap: 32px;
    border-bottom: 1px solid var(--bg);
    align-items: center;
}
.product-gallery-wrapper{
    gap: 12px;
}
 .product-thumbnail-wrapper{
    gap: 12px;
    position: relative;
    width: 158px;
    flex-basis: 158px;
    height: 480px;

    flex-shrink: 0;
    flex-grow: 0;
    justify-content: flex-start;
    align-items: center;
}
.product-thumbnail-outer-wrapper{
    width: 158px;
    flex-basis: 158px;
    flex-shrink: 0;
    flex-grow: 0;
    height: 480px;
    min-height: 480px;
    overflow: hidden;
    justify-content: flex-start;
    align-items: center;
}
.product-thumbnail-inner-wrapper{
    gap: 12px;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    -ms-overflow-style: none; /* for Internet Explorer, Edge */
    scrollbar-width: none; /* for Firefox */
    overflow-y: scroll; 
    scroll-behavior: smooth;
    justify-content: flex-start;
    align-items: center;
    padding: 3px 0
}
.product-thumbnail-inner-wrapper::-webkit-scrollbar {
    display: none;
}
.thumbnail-slider-bt{
    background: url('../storage/images/product-thumb-slider-arrow.svg') no-repeat;
    background-size: 12px 6px;
    position: absolute;
    width: 12px;
    height: 6px;
}
.thumbnail-slider-bt.inactive{
    background: url('../storage/images/product-thumb-slider-inactive-arrow.svg') no-repeat;
}
#up-bt{
    top: -16px;
    left: calc(50% - 3px);
    rotate: 180deg;
}
#up-bt.inactive{
    rotate: 0deg;
}
#down-bt{
    bottom: -16px;
    left: calc(50% - 3px);
}
#down-bt.inactive{
    rotate: 180deg;
}
.product-thumbnail-wrapper img, .product-gallery-main-image img{
    border-radius: 12px;
}
.product-thumbnail-wrapper img.selected{
    box-shadow: 0px 0px 0px 2px var(--black);
    border: 3px solid var(--white);
    box-sizing: border-box;
}
.product-thumbnail-wrapper img{
    cursor: pointer;
}
.product-gallery-main-image{
    justify-content: center;
    align-items: top;
}
.animate-fade-out {
    opacity: 0 !important;
    transition: opacity 0.7s ease;
 }
 .animate-fade-in {
    opacity: 1 !important;
    transition: opacity 0.7s ease;
 }
.product-detail-top-wrapper .product-eshop-content{
    gap: 40px;
    align-items: flex-start;
    justify-content: space-around;
    height: auto;
}
.product-detail-top-wrapper .product-eshop-content >*{
    display: flex;
}
.product-heading{
    gap: 8px;
    align-items: left;
}
.product-price-row{
    gap: 12px;
}
.product-heading h1{
    color: var(--black);
    font-size: 32px;
    font-weight: 700;
    line-height: 42px;
    text-align: left !important;
    margin: 0 !important;
    padding: 0;
}
.product-price-row .product-price{
    color: var(--black);
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    text-align: left;  
}
.product-price-row .product-old-price{
    color: var(--grey3);
    font-size: 24px;
    font-weight: 500;
    line-height: 34px;
    text-align: left;
    text-decoration: line-through;
}
.product-price-row .product-discount{
    padding: 0px 6px;
    border-radius: 4px;
    background: var(--green);
    color: var(--white);
    font-size: 10px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.product-eshop-content{
    gap: 40px;
    justify-content: space-between;
    align-items: center;
}
.variant-selection-wrapper{
    gap: 16px;
}
.variant-selection{
    gap: 8px;
}
.variant-items{
    flex-wrap: wrap;
}
.variant-items.colors{
    gap: 20px;
}
.variant-items.sizes{
    gap: 8px;
}
.variant-selection label{
    color: var(--black);
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    text-align: left; 
}
.eshop-custom-selector{
    position: relative;
}
.eshop-custom-selector input{
    opacity: 0;
   /* width: 0;*/
    position: absolute;
    z-index: -1;
}
.eshop-custom-selector label{
    cursor: pointer;
   
}
.eshop-custom-selector input:disabled ~ label{
    opacity: 0.2;
    cursor: default;
}
.color-picker{
    width: 32px;
    min-width: 32px;
    height: 32px;
    border-radius: 45px;
    overflow: hidden;
    border-style: solid !important;
    border-width: 16px;
    display: inline-block;
    position: relative;
    border-style: double;
    outline: 3px solid white;
    border: 0;
    outline-offset: -6px;
}
.color-picker .half-circle{
    width: 16px;
    height: 32px;
    display: inline-block;
    position: relative;
    left: 0;
    float: left;
}
.color-picker .quarter-circle{
    width: 16px;
    height: 16px;
    display: inline-block;
    position: relative;
    left: 0;
    float: left;
}
.color-picker .third-circle{

}
.color-picker svg{
    float: left;
    position: absolute;
    left: 0;
    z-index: 10;
    transform: rotate(-90deg);
}
.color-picker svg circle{
    position: relative;
    stroke-width: 16px;
    stroke-dasharray: 0 55;
    stroke-dashoffset: 0;
}
.color-picker .outline{
    width: 32px;
    min-width: 32px;
    height: 32px;
    outline: 3px solid white;
    border: 0;
    outline-offset: -6px;
    border-radius: 45px;
    position: absolute;
    left:0;
    top: 0;
}
.color-picker.filter-white{
    border: 1px solid var(--black) !important;
}
.eshop-custom-selector input:checked + label.color-picker{
    outline: none;
    position: relative;
    border: 0;
    z-index: 10;
}
.eshop-custom-selector input:checked + label.color-picker .outline{
    outline: none;
    border: 0;
    z-index: 10;
}
.size-picker{
    display: flex;
    height: 40px;
    min-height: 40px;
    justify-content: center;
    align-items: center;
    padding: 0px 16px;
    border-radius: 4px;
    text-transform: uppercase;
    color: var(--grey1);
    font-size: 13px;
    font-weight: 500;
    line-height: 24px;
    background: var(--grey4);    
}
.eshop-custom-selector input:checked + label.size-picker{
    background: var(--black);
    color: var(--white);
}
.eshop-amount-wrapper{
    border-radius: 62px;
    justify-content: space-between;
    align-items: center;
    padding: 7px 10px;
    background: var(--bg);
    width: 120px;
    max-width: 120px;
    flex-grow: 0;
    flex-shrink: 0;
}
form .eshop-amount-wrapper input{
    background: none;
    border: none;
    appearance: none;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 28px !important;
    border-radius: 0 !important;
    width: 40px;
    max-width: 40px;
    text-align: center;
}
.decrease-amount{
    width: 24px;
    height: 24px;
    border-radius: 32px;
    background: var(--white) url('../storage/images/product-quantity-decrease.svg') no-repeat;
    background-size: 10px 1.15px;
    background-position: center center;
}
.increase-amount{
    width: 24px;
    height: 24px;
    border-radius: 32px;
    background: var(--white) url('../storage/images/product-quantity-increase.svg') no-repeat;
    background-size: 10px 10px;
    background-position: center center;
}
.eshop-button{
    padding: 16px 32px;
    border-radius: 60px;
    box-shadow: 0px 15px 36px 0px rgba(246, 87, 20, 0.3);
    color: var(--white);
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    flex-grow: 1;
}
.product-eshop-parts{
    gap: 24px;
    align-items: center;
}


.product-detail-content-wrapper{
    padding: 0 32px;
    gap: 4px;
}
.product-detail-content-wrapper h3{
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
    color: var(--black);
    
}
.product-detail-content-wrapper div > *{
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
    text-align: left;
    color: var(--black);
}

/*breadcrumb navigation */
.breadcrumb-navigation{
    padding: 0;
}
.breadcrumb-wrapper{
    padding: 24px 0 24px 6px;
    gap: 12px;
    align-items: center;
}
.breadcrumb-wrapper > *{
    color: var(--black);
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
}
.breadcrumb-wrapper a{
    background: url('../storage/images/breadcrumb-arrow.svg') no-repeat;
    background-size: 4px 8px;
    background-position: right center;
    padding-right: 16px;
    display:flex;
    align-items: center;
}
.breadcrumb-home-icon{
    background: url('../storage/images/breadcrumb-home-icon.svg') no-repeat;
    background-size: 15px 16px;
    background-position: left center;
    width: 15px;
    height: 16px;
    display: inline-block;
}
/* product carousel */
.product-list-carousel .main-wrapper{
    gap: 16px; 
}
.product-list-carousel .main-wrapper h2{
    font-size: 24px;
    line-height: 34px;
    font-weight: 700;
    color: var(--black);
}
.product-carousel-outer-wrapper{
    position: relative;
}
.product-carousel-wrapper{
    gap: 16px;
    align-items: flex-start;
    justify-content: left !important;
}
.product-carousel-wrapper .product-regular-wrapper{
    width: 246px;
    min-width: 246px;
    max-width: 246px;
    height: 246px;
    background: var(--white);
    border-radius: 12px;
    align-items: center;
    padding: 12px 16px;
    gap: 12px;
}
.product-carousel-bt{
    position: absolute;
    top: calc(50% - 20px);
    background: url('../storage/images/carousel-nav-black.svg') no-repeat;
    background-size: contain;
    width: 40px;
    height: 40px;
    cursor: pointer;
}
#next-bt{
    right: -20px;
}
#prev-bt{
    left: -20px;
    rotate: 180deg;
}

/*basket */
.empty-basket-main-wrapper{
    padding: 48px 0 71px 0;
    justify-content: space-around;
}
.empty-basket-main-wrapper .main-wrapper{
    gap: 49px;
    justify-content: flex-start;
    align-items: center;
}
.empty-basket-graphic{
    background: url('../storage/images//empty-basket.svg') no-repeat;
    background-size: 500px 309px;
    width: 500px;
    height: 309px;
    display: flex;
}
.empty-basket-content{
    gap: 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.empty-basket-content h1{
    color: var(--black);
    font-size: 42px;
    font-weight: 700;
    line-height: 48px;
}
.empty-basket-content p{
    color: var(--grey2);
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;    
}
.main-row-basket{
    padding: 42px 0 67px 0;
    justify-content: space-around;
}
.main-row-basket-large{
    padding: 42px 0 114px 0;
    justify-content: space-around;
}
.main-row-basket .main-wrapper{
    gap: 52px;
}
.basket-item-wrapper{
    gap: 24px;
}
.basket-item{
    padding: 16px 24px 16px 16px;
    gap: 156px;
    border-radius: 12px;
    opacity: 0px;
    background: var(--white);
    align-items: center;
    justify-content: space-between;
}
.basket-item > div{
    display: flex;
}
.basket-item-main-data{
    display: flex;
    gap: 16px;
    justify-content: left;
    align-items: center;
}
.basket-item-main-data img{
    width: 100px;
    height: 100px;
    border-radius: 12px;
}
.eshop-amount-wrapper{
    border-radius: 62px;
    align-items: center;
    padding: 7px 10px;
    background: var(--bg);
    display: grid !important;
    grid-template-columns: 24px auto 24px;
    width: 140px;
    max-width: 140px;
    height: 44px;
    gap: 8px;
    
}
.basket-price-data{
    display: flex;
    gap: 126px;
    align-items: center;
    justify-content: space-between;
}
.basket-quantity-wrapper{
    display: flex;
    width: 140px;
    max-width: 140px;
}
.basket-quantity-wrapper > *{
    display: flex;
}
.eshop-amount-wrapper input{
    background: none !important;
    border: none;
    appearance: none;
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    width: auto;
    max-width: auto;
    min-width: 0;
    text-align: center;
    padding: 0 !important
}
.eshop-amount-wrapper span{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 24px;
    min-width: 24px;
    flex-basis: 24px;
    height: 24px;
    border-radius: 32px;
    background: var(--white);
    cursor: pointer;
}
.basket-price-per-item-wrapper{
    display: flex;
    width: 120px;
    justify-content: right;
    align-items: center;
}
.basket-price-per-item-wrapper span{
    white-space: nowrap;
}
.total-price-wrapper{
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: right;
    min-width: 150px;
}
.remove-baket-item{
    background: var(--grey4) url('../storage/images/remove-basket-item.svg') no-repeat;
    background-size: 8px 8px;
    background-position: center center;
    width: 24px;
    height: 24px;
    padding: 5px;
    border-radius: 24px;
    
}



.basket-footer-summary-wrapper{
    justify-content: right;
}
.basket-footer-summary-container{
    width: 100%;
    max-width: 340px;
    gap:52px;
}
.basket-footer-summary-data{
    gap: 7px;
}
.basket-footer-summary-data > .flex-row{
    justify-content: space-between;
}
.basket-footer-summary-wrapper .button{
    text-align: center;
}
.basket-next-step-icon{
    background: url('../storage/images/carousel-arrow.svg') no-repeat;
    background-size: 5px 10px;
    background-position: right center;
    padding-right: 17px;
}

.basket-grid-wrapper, .basket-inner-form-wrapper {
    gap: 32px;
}
.basket-grid-wrapper fieldset{
    gap: 42px;
    border: 0;
    margin: 0;
    padding: 0;
}
.basket-form-wrapper{
    gap: 29px;
}
.basket-form-box{
    gap: 12px;
}
.basket-form-box h2{
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
}
.basket-form-box .form-box-content{
    gap: 12px;
}
.basket-form-label{
    justify-content: space-between;
    color: var(--grey2);
}
.basket-form-box .custom-checkbox-wrapper label.profile-forms-label{
    gap: 12px;
}


.basket-grid-wrapper .flex-row.basket-buttons-wrapper{
    justify-content: space-between;
    align-items: flex-start;
}


.basket-summary-wrapper{
    width: 100%;
    max-width: 411px;
    align-items: flex-start;
    position: relative;
    gap: 1px;
}
.basket-summary-container{
    border-radius: 12px;
    gap: 1px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-self: flex-start;
}

.basket-summary-wrapper .base-box{
    padding: 16px;
    justify-content: space-between;
    background: var(--white);
    align-items: center;
}
.basket-summary-wrapper .summary-box{
    padding: 16px;
    gap: 4px;
    background: var(--white2);
}
.summary-box > .flex-row{
    justify-content: space-between;
}
.summary-box span{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.summary-box .basket-summary-total-price{
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
}
.basket-grid-wrapper .flex-row{
    align-items: center;
}
.summary-item-main-data{
    gap: 12px;
}
.summary-item-main-data img{
    width: 48px;
    height: 48px;
    border-radius: 6px;
}
.summary-item-main-data h3{
    font-size: 16px;
    font-weight: 700;
    line-height: 20.42px;
    text-align: left;
}
.summary-item-main-data  span{
    color: var(--grey2);
    font-size: 12px;
    font-weight: 500;
    line-height: 15.31px;
    text-align: left;
}
.basket-summary-wrapper .total-price-per-item{
    white-space: nowrap !important;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
}
.price-content::after{
    content: " €";
    display: inline;
}
.basket-summary-label{
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
}
.basket-summary-value{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.basket-buttons-wrapper{
    gap: 29px;
}

.user-logged-button{
    background: var(--grey1) url('../storage/images/signed-user.svg') no-repeat;
    background-size: 20px 20px;
    background-position: left 24px center;
    padding: 17px 32px 17px 24px;
    padding-left: 56px;
    gap: 12px;
    border-radius: 60px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    color: var(--white);
    
}
.basket-checkout-button{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 17px;
}
.basket-checkout-button span{
    text-transform: uppercase;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    letter-spacing: 1px;
}
.basket-checkout-data{
    justify-content: right;
}
.basket-checkout-data p{
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-align: right;
    color: var(--grey2);
}
.basket-checkout-data p a{
    text-decoration: underline;
    cursor: pointer;
}
.basket-register-wrapper{
    display: flex;
    margin-bottom: 8px;
}
.hidden-form-line{
    display: none;
}
.hidden{
    display: none !important;
}


/* client profile */
.client-profile .main-wrapper{
    gap: 36px;
  }
  .client-content-column{
    gap: 12px;

  }
  .list-item-medium{
    padding: 16px;
    border-radius: 12px;
    background: var(--white);
    align-items: center;
    gap: 36px;
  }
  .list-item-medium > *{
    display: flex;
  }
  .order-date{
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--grey2);
  }
  .order-number{
    text-decoration: underline;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
  }
  .order-total-price{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
  }
  .order-status{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
  }
  .order-invoice.invoice-icon{
    background: url('../storage/images/invoice-icon.svg') no-repeat;
    background-size: 13px 16px;
    background-position: left center;
    padding-left: 16px;
    font-size: 13px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    color: var(--grey2);
  }
  .order-products{
    display: flex;
    gap: 12px;
    width: 108px;
  }
  .order-products img{
    border-radius: 6px;
    width: 48px;
    height: 48px;
  }
  /* order detail */
  .payment-notification{
    padding: 0 0 48px 0;
    justify-content: space-around;
  }
  .payment-notification .main-wrapper{
    gap: 16px;
    padding: 16px;
  }
  .payment-notification h2{
    font-size: 20px;
    font-weight: 500;
    line-height: 34px;
    text-align: left;
    color: var(--grey2);

  }
  .payment-notification p{
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    text-align: left;
  }
  .order-detail-main-wrapper{
    justify-content: space-around;
    padding: 0 0 45px 0; 
  }
  .order-detail-main-wrapper .main-wrapper{
    gap: 32px;
  }
  .order-detail-wrapper{
    gap: 12px;
  }
  .order-detail-heading{
    gap: 4px;
  }
  .order-detail-heading h2{
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    text-align: left;
  }
  .order-detail-heading span{
    color: var(--grey2);
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
  }
  .order-detail-address-wrapper{
    width: 100%;
    max-width: 411px;
    gap: 12px;
    margin-top: 34px;
  }
  .order-detail-address-wrapper h3{
    font-size: 18px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
  }
  .order-detail-address-wrapper .base-box span{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
  }
  .order-detail-address-wrapper .base-box span.base-box-title{
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
  }
.order-detail-summary-wrapper{
    margin-top: 20px;
    justify-content: right;

  }
  .order-detail-summary-container{
    gap: 4px;
    width: 100%;
    max-width: 340px;
  }
    .order-detail-summary-container > .flex-row{
    justify-content: space-between;
    align-items: flex-end !important;
  }
  .order-detail-summary-container > .flex-row span{
    font-size: 18px;
    font-weight: 500;
    line-height: 28px;
    text-align: left;
  }
  .order-detail-summary-container > .flex-row span.basket-summary-total-price{
    font-family: Space Grotesk;
    font-size: 24px;
    font-weight: 700;
    line-height: 34px;
    text-align: left;
  }
  .order-detail-additional-info{
    justify-content: space-between;
    padding: 26px 16px;
  }
  .order-detail-additional-info span{
    font-size: 16px;
    font-weight: 700;
    line-height: 28px;
    text-align: left;
  }
  .order-detail-status-icon-green{
    background: url('../storage/images/dot-separator-green.svg') no-repeat;
    background-size: 4px 4px;
    background-position: left center;
    padding-left: 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-align: left;
    text-transform: uppercase;
  }
  .order-detail-item-price-wrapper{
    gap: 24px;
    min-width: 150px;
    justify-content: right;
  }
  .order-detail-item-price-wrapper span{
    white-space: nowrap;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
  }


  /* notification */
.alert{
    padding: 12px;
    border-radius: 12px;
    align-items: flex-start; 
    justify-content: flex-start;
    gap: 10px;
}
.alert.alert-danger{
    background: var(--red4);
}
.alert.alert-success{
    background: #BEF3CA;
}
.alert.alert-common{
    background: #E6E7FF;
}
.alert i{
    width: 28px;
    height: 28px;
    border-radius: 50px;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 28px;
}
.alert-danger i{
    background: #FD1E1E url('../storage/images/error-notification-icon.svg') no-repeat;
    background-size: 13.7px 12px;
    background-position: center center;
}
.alert-success i{
    background: #0EC720 url('../storage/images/status-notificaiton-icon.svg') no-repeat;
    background-size: 15.4px 12px;
    background-position: center center;
}
.alert-common i{
    background: #1E4FFD url('../storage/images/common-notification-icon.svg') no-repeat;
    background-size: 13.2px 12px;
    background-position: center center;
}
.alert ul{
    list-style: none;
    display: flex;
    flex-grow: 1;
    flex-shrink: 1;
    width: auto;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    width: 100%;
}
.alert ul li{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}
.alert .remove-notification{
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    max-width: 24px;
    max-height: 24px;
    background: var(--white) url('../storage/images/alert-close-icon.svg') no-repeat;
    background-size: 8px 8px;
    background-position: center center;
    width: 24px;
    height: 24px;
    border-radius: 24px;

}
/* inside form notifications */
.is-invalid{
    border: 1px solid var(--red2) !important;
    display:flex;
}
.alert.small{
    position: relative;
    top: -8px;
    gap: 6px;
    align-items: center;
}
.alert.small::before{
    content: "";
    position: absolute;
    display: block;
    top: -5px;
    left: 17px;
    width: 0; 
    height: 0; 
    border-left: 4.5px solid transparent;
    border-right: 4.5px solid transparent;
    border-bottom: 10px solid var(--red4);
}
.alert.small i{
    width: 20px;
    height: 20px;
    border-radius: 50px;
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 20px;
}
.alert-danger.small i{
    background-size: 11.42px 10px;
    background-position: 4.2px 4px;
}
.alert.small ul li{
    font-size: 12px;
    font-weight: 500;
    line-height: 24px;
    text-align: left;
    color: var(--black);
}
.alert-wrapper{
    display: flex;
    padding: 0 0 16px 0;
    flex-direction: column;
    align-items: center;
}