body {
    margin: 0;
    line-height: normal
}

:root {
    --typography-body-body: Manrope;
    --typography-icons-icons5-500: "Material Symbols Outlined";
    --font-font-awesome-6-brands: "Font Awesome 6 Brands";
    --typography-heading-h2: "Bakbak One";
    --typography-body-body-size: 16px;
    --typography-body-body-size-mobile: 20px;
    --typography-icons-icons5-500-size: 20px;
    --typography-heading-h2-size: 32px;
    --font-size-lgi: 32px;
    --font-size-7xl: 26px;
    --typography-body-bodyxs-size: 12px;
    --typography-body-bodysm-600-size: 14px;
    --viewport: 100%;
    --spacing-inner-s-4: 16px;
    --spacing-inner-s-5: 20px;
    --spacing-inner-s-3: 12px;
    --spacing-inner-s-7: 150px;
    --spacing-inner-s-7-m: 50px;
    --spacing-inner-s-2: 8px;
    --spacing-inner-s-1: 4px;
    --spacing-inner-s-6: 24px;
    --styling-border-radius-r-lg: 12px;
    --styling-border-radius-r-rounded: 9999px;
    --styling-border-radius-r-md: 8px;
    --gap-9xs: 4px;
}

.container {
    max-width: 1600px;
    padding: 0;
}

* {
    transition: all .15s ease-in-out
}

button {
    cursor: pointer
}

i {
    font-style: normal
}

.iconstart {
    width: 16px;
    line-height: 16px;
    display: none
}

.iconend, .iconstart {
    position: relative;
    font-weight: 500
}

.iconend {
    width: 16px;
    line-height: 16px;
    display: none
}

.iconstart1 {
    width: 16px;
    line-height: 16px;
    display: none
}

.iconend1, .iconstart1 {
    position: relative;
    font-weight: 500
}

.iconend1 {
    width: 16px;
    line-height: 16px;
    display: none
}

.iconstart2 {
    width: 16px;
    line-height: 16px;
    display: none
}

.iconend2, .iconstart2, .text-content {
    position: relative;
    font-weight: 500
}

.text-content {
    line-height: 24px;
    font-family: var(--typography-body-body)
}

.iconend2 {
    width: 16px;
    line-height: 16px;
    display: none
}

.iconstart3 {
    line-height: 16px
}

.iconend3, .iconstart3, .textcontent {
    position: relative;
    font-weight: 500
}

.textcontent {
    line-height: 24px;
    font-family: var(--typography-body-body);
    white-space: nowrap
}

.iconend3 {
    width: 16px;
    line-height: 16px;
    display: none
}

.iconstart4 {
    width: 16px;
    line-height: 16px;
    display: none
}

.iconend4, .iconstart4, .input-field {
    position: relative;
    font-weight: 500
}

.input-field {
    line-height: 24px;
    font-family: var(--typography-body-body)
}

.iconend4 {
    width: 16px;
    line-height: 16px;
    display: inline-block
}

.iconstart5 {
    width: 16px;
    line-height: 16px;
    display: none
}

.icon-end, .iconend5, .iconstart5 {
    position: relative;
    font-weight: 500
}

.icon-end {
    line-height: 24px;
    font-family: var(--typography-body-body);
    white-space: nowrap
}

.iconend5 {
    line-height: 16px
}

.welcome-back {
    margin: 0;
    position: relative;
    font-size: inherit;
    line-height: 40px;
    font-weight: 400;
    font-family: inherit;
    color: #28292A
}

.weve-missed-you {
    position: relative;
    font-size: var(--typography-icons-icons5-500-size);
    line-height: 30px;
    font-family: var(--typography-body-body);
    color: #28292A
}

.blocktitle {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-9xs)
}

.stacked-input-msg {
    align-self: stretch;
    position: relative;
    line-height: 20px;
    font-weight: 600;
    color: #28292A;
}

.iconstart6 {
    line-height: 20px;
    position: absolute;
    left: var(--spacing-inner-s-3);
    font-weight: 500;
    z-index: 1;
    color: #28292A;
}

.icon-end1, .iconend6 {
    position: relative;
    font-weight: 500
}

.icon-end1 {
    flex: 1;
    font-size: var(--typography-body-body-size);
    line-height: 24px;
    font-family: var(--typography-body-body);
    color: #28292A !important;
    text-align: left;
    padding: var(--spacing-inner-s-2) var(--spacing-inner-s-3) var(--spacing-inner-s-2) calc(2 * var(--spacing-inner-s-3) + 20px);
    border-radius: var(--styling-border-radius-r-md);
    border: none
}

.icon-end1::placeholder {
    color: #28292A !important;
}

.iconend6 {
    width: 20px;
    line-height: 20px;
    display: none
}

.input-field1 {
    position: relative;
    align-self: stretch;
    border-radius: var(--styling-border-radius-r-md);
    background-color: var(--colors-fill-bgmain);
    border: 1px solid var(--colors-border-neutralbase);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    gap: var(--spacing-inner-s-2)
}

.textcontent12 {
    width: 85px;
    position: relative;
    font-size: var(--typography-body-bodyxs-size);
    line-height: 16px;
    font-weight: 500;
    font-family: var(--typography-body-body);
    color: var(--colors-text-base);
    text-align: left;
    display: none
}

.stackedinput-msg11 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--spacing-inner-s-1);
    text-align: center;
    font-size: var(--typography-icons-icons5-500-size);
    color: var(--colors-border-neutralbase);
    font-family: var(--typography-icons-icons5-500)
}

.stackedinput-msg11 span  {
    font-family: var(--typography-body-body)!important;
    font-size: small!important;
}

.stackedinput-msg12 span  {
    font-family: var(--typography-body-body)!important;
    font-size: small!important;
}

.inputnative {
    gap: var(--spacing-inner-s-2)
}

.inputnative, .inputnativebasic {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

.textcontent21 {
    align-self: stretch;
    position: relative;
    line-height: 20px;
    font-weight: 600
}

.iconstart7 {
    width: 20px;
    line-height: 20px;
    display: inline-block
}

.iconend7, .iconstart7, .textcontent3 {
    position: relative;
    font-weight: 500
}

.textcontent3 {
    flex: 1;
    font-size: var(--typography-body-body-size);
    line-height: 24px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-soft);
    text-align: left
}

.iconend7 {
    width: 20px;
    line-height: 20px;
    display: none
}

.textcontent4 {
    width: 85px;
    position: relative;
    /*font-size: var(--typography-body-bodyxs-size);*/
    line-height: 16px;
    /*font-weight: 500;*/
    font-family: var(--typography-body-body);
    color: var(--colors-text-base);
    text-align: left;
    display: none
}

.stackedinput-msg12 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--spacing-inner-s-1);
    text-align: center;
    font-size: var(--typography-icons-icons5-500-size);
    color: var(--colors-border-neutralbase);
    font-family: var(--typography-icons-icons5-500)
}

.inputnative1 {
    gap: var(--spacing-inner-s-2)
}

.inputnative1, .inputnativebasic1, .stackedinputs {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start
}

.stackedinputs {
    gap: var(--spacing-inner-s-2);
    font-family: var(--typography-body-body)
}

.iconstart8, .text-content1 {
    position: relative;
    font-weight: 500
}

.iconstart8 {
    width: 20px;
    line-height: 20px;
    display: none
}

.text-content1 {
    font-size: var(--typography-body-body-size);
    text-decoration: underline;
    line-height: 24px;
    font-family: var(--typography-body-body);
    color: var(--colors-text-link)
}

.footerlinks, .iconstart9 {
    font-size: var(--typography-icons-icons5-500-size)
}

.footerlinks {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-inner-s-1) var(--spacing-inner-s-1);
    gap: var(--spacing-inner-s-2);
    text-align: center;
    color: var(--colors-text-link)
}

.iconstart9 {
    width: 20px;
    position: relative;
    line-height: 20px;
    display: none
}

.label {
    position: relative;
    line-height: 24px;
    font-weight: 600;
    font-family: var(--typography-body-body)
}

.iconend8 {
    width: 16px;
    position: relative;
    font-weight: 500;
    display: inline-block;
    font-family: var(--typography-icons-icons5-500)
}

.blockfromgroup, .btnprimary {
    align-self: stretch;
    display: flex;
    align-items: center
}

.btnprimary {
    border-radius: var(--styling-border-radius-r-rounded);
    background-color: var(--colors-fill-primary);
    border: 2px solid var(--colors-fill-primary);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-inner-s-2) var(--spacing-inner-s-5);
    gap: var(--spacing-inner-s-2);
    font-size: var(--typography-body-body-size)
}

.btnprimary:hover {
    background-color: var(--colors-fill-primary-hover);
    border: 2px solid var(--colors-fill-primary-hover)
}

.btnprimary:active {
    background-color: var(--colors-fill-primary);
    border: 2px solid var(--colors-fill-primary)
}

.blockfromgroup {
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--spacing-inner-s-5);
    font-size: var(--typography-body-bodysm-600-size);
    font-family: var(--typography-icons-icons5-500)
}

.facebook, .or-login-with {
    position: relative;
    line-height: 30px
}

.or-login-with {
    color: #28292A !important;
}

.fa-brands {
    color: #28292A !important;
}

.facebook {
    margin: 0;
    font-size: inherit;
    line-height: 32px;
    font-weight: 400;
    font-family: inherit
}

.facebookaccount {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-inner-s-1)
}

.google {
    margin: 0;
    position: relative;
    font-size: inherit;
    line-height: 32px;
    font-weight: 400;
    font-family: inherit
}

.googleaccount, .othersign-in {
    display: flex;
    align-items: center;
    justify-content: center
}

.googleaccount {
    flex-direction: column;
    padding: var(--spacing-inner-s-1)
}

.othersign-in {
    flex-direction: row;
    gap: var(--spacing-inner-s-4);
    font-size: var(--typography-heading-h2-size);
    color: var(--colors-text-soft)
}

.facebookaccount, .googleaccount {
    font-family: var(--font-font-awesome-6-brands);
    font-size: 32px
}

.buttontransparent {
    color: #0a0505;
    background: 0 0;
    border: none
}

.buttontransparent:hover {
    transform: translateY(-2px)
}

.buttontransparent:active {
    transform: translateY(2px)
}

.alternate-signing, .blocklogin, .main {
    display: flex;
    flex-direction: column;
    align-items: center
}

.alternate-signing {
    justify-content: flex-start;
    gap: var(--spacing-inner-s-3);
    font-size: var(--typography-icons-icons5-500-size);
    font-family: var(--typography-body-body)
}

.blocklogin, .main {
    box-sizing: border-box
}

.blocklogin {
    width: 320px;
    border-radius: var(--styling-border-radius-r-lg);
    background-color: var(--colors-overlay-backdrop);
    backdrop-filter: blur(24px);
    justify-content: flex-start;
    padding: var(--spacing-inner-s-6);
    gap: var(--spacing-inner-s-6)
}

.main {
    align-self: stretch;
    justify-content: center;
    padding: var(--spacing-inner-s-7) var(--spacing-inner-s-5);
    background-image: url(/assets/frontend/images/login-new.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
    text-align: left;
    font-size: var(--typography-heading-h2-size);
    color: var(--colors-text-base);
    font-family: var(--typography-heading-h2)
}

.iconstart10, .text-content2 {
    position: relative;
    font-weight: 500
}

.iconstart10 {
    width: 20px;
    line-height: 20px;
    display: none
}

.text-content2 {
    font-size: var(--typography-body-body-size);
    text-decoration: underline;
    line-height: 24px;
    font-family: var(--typography-body-body)
}

.footerlinks1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-inner-s-1) var(--spacing-inner-s-1);
    gap: var(--spacing-inner-s-2)
}

.iconstart11, .textcontent5 {
    position: relative;
    font-weight: 500
}

.iconstart11 {
    width: 20px;
    line-height: 20px;
    display: none
}

.textcontent5 {
    font-size: var(--typography-body-body-size);
    text-decoration: underline;
    line-height: 24px;
    font-family: var(--typography-body-body)
}

.footerlinks2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-inner-s-1) var(--spacing-inner-s-1);
    gap: var(--spacing-inner-s-2)
}

.iconstart12, .textcontent6 {
    position: relative;
    font-weight: 500
}

.iconstart12 {
    width: 20px;
    line-height: 20px;
    display: none
}

.textcontent6 {
    font-size: var(--typography-body-body-size);
    text-decoration: underline;
    line-height: 24px;
    font-family: var(--typography-body-body)
}

.footerlinks3 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-inner-s-1) var(--spacing-inner-s-1);
    gap: var(--spacing-inner-s-2)
}

.iconstart13, .textcontent7 {
    position: relative;
    font-weight: 500
}

.iconstart13 {
    width: 20px;
    line-height: 20px;
    display: none
}

.textcontent7 {
    font-size: var(--typography-body-body-size);
    text-decoration: underline;
    line-height: 24px;
    font-family: var(--typography-body-body)
}

.footerlinks4 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-inner-s-1) var(--spacing-inner-s-1);
    gap: var(--spacing-inner-s-2)
}

.iconstart14, .textcontent8 {
    position: relative;
    font-weight: 500
}

.iconstart14 {
    width: 20px;
    line-height: 20px;
    display: none
}

.textcontent8 {
    font-size: var(--typography-body-body-size);
    text-decoration: underline;
    line-height: 24px;
    font-family: var(--typography-body-body)
}

.footerlinks5 {
    display: flex;
    flex-direction: row;
    align-items: center
}

.footerlinks5 {
    justify-content: flex-start;
    padding: var(--spacing-inner-s-1) var(--spacing-inner-s-1);
    gap: var(--spacing-inner-s-2)
}

.iconstart15, .textcontent9 {
    position: relative;
    line-height: 20px;
    font-weight: 500
}

.textcontent9 {
    font-size: var(--typography-body-body-size);
    text-decoration: underline;
    line-height: 24px;
    font-family: var(--typography-body-body);
    white-space: nowrap
}

.footerlinks6 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: var(--spacing-inner-s-1) var(--spacing-inner-s-1);
    gap: var(--spacing-inner-s-2)
}

.iconstart16, .textcontent120 {
    position: relative;
    line-height: 20px;
    font-weight: 500
}

.textcontent120 {
    font-size: var(--typography-body-body-size);
    text-decoration: underline;
    line-height: 24px;
    font-family: var(--typography-body-body);
    white-space: nowrap
}

.footerlinks7 {
    display: flex;
    flex-direction: row;
    align-items: center
}

.footerlinks7 {
    justify-content: flex-start;
    padding: var(--spacing-inner-s-1) var(--spacing-inner-s-1) var(--spacing-inner-s-1) var(--spacing-inner-s-1);
    gap: var(--spacing-inner-s-2)
}

.body, .login-page-desktop {
    display: flex;
    flex-direction: column;
    justify-content: flex-start
}

.body {
    align-self: stretch;
    align-items: center
}

.login-page-desktop {
    width: var(--viewport);
    position: relative;
    align-items: flex-start;
    letter-spacing: normal
}

@media screen and (max-width: 950px) {
    .facebook, .google, .welcome-back {
        font-size: var(--font-size-7xl);
        line-height: 32px
    }

    .facebook, .google {
        line-height: 26px
    }
}

@media screen and (max-width: 700px) {
    .blocklogin {
        max-width: 320px;
        width: 100%;
        padding-top: var(--spacing-inner-s-6);
        padding-bottom: var(--spacing-inner-s-6);
        box-sizing: border-box
    }

    .main {
        padding: var(--spacing-inner-s-7-m) var(--spacing-inner-s-5);
        background-image: url(/assets/frontend/images/login-mobile.jpg);

    }
}

@media screen and (max-width: 450px) {
    .welcome-back {
        font-size: var(--font-size-lgi);
        line-height: 40px
    }

    .or-login-with, .weve-missed-you {
        font-size: var(--typography-body-body-size-mobile);
        line-height: 30px
    }

    .stacked-input-msg {
        font-size: 14px;
        line-height: 20px
    }

    .iconend6, .iconend7, .iconstart6, .iconstart7, .iconstart8, .iconstart9, .or-login-with {
        font-size: var(--typography-body-body-size);
        line-height: 16px
    }

    .facebookaccount, .googleaccount {
        color: var(--colors-text-soft);
        font-size: var(--font-size-lgi);
        line-height: 32px
    }

    .iconstart10, .iconstart11, .iconstart12, .iconstart13, .iconstart14, .iconstart15, .iconstart16 {
        font-size: var(--typography-body-body-size);
        line-height: 16px
    }
}

.container-full-screen {
    width: 100%!important;
    max-width: 100%!important;
}

input:focus {
    box-shadow: none !important;
}