.SocialMediaWrapper .inputwrapper {
    width: 100%;
    display: block;
}

.SocialMediaWrapper .inputwrapper + .inputwrapper {
    margin-top: 10px;
}

.LoginText {
    font-size: 22px;
    font-weight: bold;
}

.IconSocial{
    height: 18px;
    margin-right: 10px;
    margin-top: -2px;
}

.account .SeparatorText {
    margin: 0 10px;
    color: #282828;
    font-weight: 400;
    font-style: normal;
}

.SmallScreenContent {
    display: none;
}

@media only screen and (max-width: 800px) {  
    .LoginText {
        font-size: 18px;
    }
    
    .LargeScreenContent {
        display: none;
    }

    .SmallScreenContent {
        display: block;
    }
}

.PasscodeInput .input-text + .input-text,
.PasscodeInput-Box + .PasscodeInput-Box{
    margin-left: var(--space-s);
}

.PasscodeInput-Box {
    border-radius: var(--border-radius-soft);
    padding: var(--space-none) var(--space-xxs) !important;
    -webkit-transition: all 180ms linear;
    transition: all 180ms linear;
    font-size: 20px;
    font-family: var(--font-regular);
    height: 53px !important;
    width: 53px;
    text-align: center;
}

.PasscodeInput-Box.is-filled {
    background: var(--color-canvas-grey);
}

.PasscodeInput > *{
    width: calc((100% - (5 * var(--space-s)))/ 6);
    max-width: 50px;
}

.PasscodeInput-Box {
    width: 100%;
}

.PasscodeInput-Box:focus{
    border: var(--border-size-s) solid var(--color-primary);
}

.PasscodeInput-Box.not-valid{
    border: var(--border-size-s) solid var(--color-dark-astra-pink);
}

.modal:has(.OTP-modal) {
    z-index: 98;
};