@import "../../variables.scss";


.LoginBlock {
    background: url(/assets/banner-bg.png) no-repeat center top;
    overflow: hidden;
    .LoginHeader {
        padding: $pad + 35 0;
        @media (max-width: $md) {
            padding: $pad + 15 0;
        }
        img {
            width: 200px;
            display: block;
            margin: 0 auto;
            @media (max-width: $md) {
                width: 160px;
            }
        }
    }
    .LoginFooter {
        padding: $pad + 20 0;
        box-shadow: 20px 10px 80px rgba($black, 0.1);
        font-size: $font + 6;
        text-transform: uppercase;
        color: $blue;
        text-align: center;
        background-color: $white;
        margin-top: $mrg + 130;
        @media (max-width: $md) {
            font-size: $font + 4;
            margin-top: $mrg + 40;
            padding: $pad + 10;
        }
    }
}

.LoginCard {
    background-color: $white;
    border: solid 2px $blue;
    border-radius: $bdr-rds + 25;
    box-shadow: 10px 0 20px rgba($black, 0.1);
    max-width: 620px;
    margin: $mrg + 40 auto;
    padding: $pad + 40;
    @media (max-width: $md) {
        margin: 0;
        padding: $pad + 5;
        max-width: 100%;
        border-radius: $bdr-rds + 6;
    }
    h1 {
        text-align: center;
        font-size: $font + 25;
        font-weight: $font-weight-heavy;
        margin-bottom: $mrg + 30;
        @media (max-width: $md) {
            font-size: $font + 12;
            margin-bottom: $mrg + 10;
        }
    }
    p{
        text-align: center;
        font-size: $font + 10;
        color: $black;
        padding: 0 $pad + 10 $pad + 40;
        margin-bottom: 0;
        @media (max-width: $md) {
            font-size: $font + 4;
            padding: 0 $pad + 10 $pad + 10;
        }
    }
    .CaptchaCard {
        padding-bottom: $pad + 20;
        img {
            display: block;
        }
    }
    button {
        min-width: 140px;
        margin: $mrg + 25 auto 0;
        font-size: $font + 6;
        padding: $pad - 2 $pad + 15;
        img {
            display: block;
            width: 20px;
            margin-left: $mrg;
        }
    }
    
}

.OtpCardBlock {
    margin: $mrg + 70 auto;
    @media (max-width: $md) {
        margin: 0;
    }
    .OtpCard {
        display: flex;
        align-items: center;
        justify-content: space-between;
        max-width: 440px;
        margin: 0 auto  $mrg + 20;
        .ContactInput {
            box-shadow: none;
            border-radius: $bdr-rds;
            height: 58px;
            line-height: 58px;
            border: solid 1px rgba($black, 0.15);
            width: 62px;
            padding: 0;
            text-align: center;
            @media (max-width: $md) {
                width: 40px;
                height: 40px;
                line-height: 40px;
            }
        }
    }
    .ResendCode {
        max-width: 440px;
        margin: 0 auto;
        padding-bottom: $pad + 10;
        @media (max-width: $md) {
            padding-bottom: 0;
        }
        a {
            color: $lightblue;
        }
    }
}