main{
    border-radius: 0 0 0 100px;
    background: linear-gradient(0deg, rgba(202, 205, 213, 0.25) 0%, rgba(202, 205, 213, 0.00) 100%);
}

.auth{
    padding-bottom: 100px;
    .auth-form{
        width: 40%;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        @media screen and (max-width: 1024px){
            width: 60%;
        }

        @media screen and (max-width: 768px){
            width: 75%;
        }

        @media screen and (max-width: 420px){
            width: 100%;
        }
    }

    .auth-form-title{
        color: #1D2D53;
        font-size: 2rem;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        margin-bottom: 145px;

        @media screen and (max-width: 1024px){
            margin-bottom: 100px;
        }

        @media screen and (max-width: 768px){
           font-size: 20px;
        }

        @media screen and (max-width: 420px){
            margin-bottom: 50px;
        }
    }

    .auth-remember{
        display: none;

        @media screen and (max-width: 420px){
            display: block;
        }
    }

    .auth-form-inputs{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 23px;
        margin-bottom: 36px;

        @media screen and (max-width: 420px){
           gap: 10px;
           margin-bottom: 20px;
        }

        input{
            width: 100%;
            outline: none;
        }
    }

    .auth-form-input{
        position: relative;

        .req{
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: white;
            font-size: 1.5rem;
            pointer-events: none;
        }
    }

    .auth-form-btn{
        width: 100%;
        margin-bottom: 15px;
        button{
            width: 100%;
            border-radius: 10px;
            background: #1D2D53;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 90px;
            height: 60px;
            color: #FFF;
            font-size: 20px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            border: 0;
            cursor: pointer;
            text-wrap: nowrap;
            padding: 0 20px;

            @media screen and (max-width: 1024px) {
                font-size: 16px;
                gap: 0;
                justify-content: space-between;
            }

            @media screen and (max-width: 420px) {
              height: 48px;
              font-size: 14px;
              justify-content: start;
              gap: 25px;
              .auth-btn-arrow{
                display: none;
              }
            }
        }
    }

    .auth-form-subbtn{
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 35px;

        a{
            color: #0EAA9E;
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }

    
        @media screen and (max-width: 420px){
            .control{
                display: none;
            }
        }
    }

    .auth-form-forgot{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;

        color: #8E96A9;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        margin-bottom: 60px;

        @media screen and (max-width: 420px){
            flex-direction: column;
            align-items: start;
            gap: 20px;
        }

        &::after{
            content: '';
            position: absolute;
            bottom: -30px;
            left: 50%;
            transform: translateX(-50%);
            height: 2px;
            width: 50%;
            background: #CACDD5;
        }

        a{
            display: flex;
            align-items: center;
            gap: 30px;
            padding: 8px 30px;
            border-radius: 10px;
            border: 2px solid  #CACDD5;
            color: var(--, #1D2D53);
            font-style: normal;
            font-weight: 600;
            line-height: normal;
        }
    }

    .auth-form-social{
        color: #8E96A9;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        text-align: center;
    }

    .auth-form-social-btns{
        margin-top: 50px;
        display: flex;
        flex-direction: row;
        gap: 12px;
        justify-content: center;
        align-items: center;

        button{
            background-color: transparent;
            outline: none;
            border: 0;
            cursor: pointer;
        }
    }
}