@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

.Almuni {
    overflow: hidden;
    background-color:$st-eighth-bg;
    .login-img{
        width: 100%;
        height: 100vh;
        position: relative;
        border-radius: 0 4px 4px 0;
        overflow: hidden;
        .loginvedio {
            video { 
                height: 100vh; 
                object-fit: cover; 
                width: 100%; 
                position: absolute;
                top: 0;
                left: 0;
                opacity: 0.5;
            }
        }
        .mask{
            position: absolute; 
            width: 100%; 
            top: 0; 
            left: 0; 
            height: 100%;
            z-index: 1;
            justify-content: center;
            align-items: center;
            display: flex;
            .mask-in {
                width: 80%;
            }
            h1{
                font-size: 3rem;
                color: #ffff;
                margin-top:15px;
                text-align:left;
                font-weight: 700;
                padding: 0;
            }
            p{
                font-size: 1.8rem; 
                color:#E55353;
                font-weight: 500;
                margin: 0px;
                text-align: left;
            }
            @media #{$medium} {
                padding: 70px 30px; 
                top: 0; 
                bottom: 0;            
            }
            @media #{$small} {
                // position: relative;
                // padding: 50px;
            }
        }
        img{
            width: 100%; 
            height: 100%; 
            object-fit: cover;
        }
        &:before { 
            background: rgba(0,0,0,0.7);
            content: "";
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left:0;
        }
        @media #{$medium} {
           border-radius: 0;            
        }
        @media #{$small} {
            height: auto;
            border-radius: 0;            
         } 
    }
    .login-page {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        width: 100%;
        .login-field { 
            width: 70%; 
            h1 {
                font-weight: 700; 
                font-size: 40px;
                line-height: 48px;
                color: $st-text-primary;
                padding: 0;
            }
            p{
                font-weight: 400;
                font-size: 16px;
                line-height: 24px;
                color: $st-text-secondary;
                padding: 8px 0;
            }
            .loginForm {
                margin: 30px 0;
                label {
                    font-size: 14px;
                    // padding: 0px 0 5px 0;
                    padding: 0 0 10px 0;
                    clear: both;
                    color: $st-text-primary;
                    font-weight: 500;
                }
                input[type="text"], input[type="number"], input[type="password"] {
                    line-height: 40px; 
                    margin: 0px;
                    height: 44px;
                    padding: 0 10px;
                    border-radius: 5px;
                    border: 1px solid $st-border-primary;
                    background: $st-eighth-bg;
                    font-size: 14px;
                    color: $st-text-secondary;
                    width: 100%;
                    text-align: left;
                    -moz-appearance: textfield;
                    &::-webkit-outer-spin-button,
                    &::-webkit-inner-spin-button {
                        -webkit-appearance: none;
                        margin: 0;
                    } 
                }
                .input-icon { 
                    position: relative;
                    display: flex; 
                    align-items: center;
                    justify-content: center;
                    width: 100%; 
                    margin:0 0 15px 0;
                    a {
                        margin:10px 0 10px 0;
                        font-size: 20px;
                        display: inline-flex;
                        align-items: center;
                        font-weight: 400;
                        color: #667085;
                        position: absolute;
                        right: 12px;
                        svg {
                            color: #555555;
                            &:hover {
                                color: #0097bd;
                            }
                        }
                    }
                }
                .remember-me {
                    display: block;
                    align-items: center;
                    justify-content: space-between;
                    color: $st-text-secondary;
                    padding:15px 0 25px 0;
                    label {
                        display: block;
                        float: left;
                        align-items: center;
                        font-size: 15px;
                        font-weight: 500;
                        color: $st-text-primary;
                        input[type="checkbox"] {
                                width:15px;
                                height:15px; 
                                float:left; 
                                margin:3px 5px 0 0;
                        } 
                    }
                    .forgot {
                        font-size: 15px; 
                        font-weight: 500; 
                        margin: 0; 
                        float: right;
                        color:$st-text-third;
                        &:hover {
                            text-decoration: underline;
                        }
                    }
                }
                strong { 
                    display:block; 
                    font-size:15px;
                    text-align:center;
                    margin:20px 0 5px 0;
                    color: $st-text-primary;
                    font-weight:normal;
                    a {
                        font-weight: bold;
                        &:hover {
                            color: $st-text-primary;
                        }
                    }
                }
                .login-btn1{
                    width: 100%;
                    padding: 13px 30px;
                    border-radius: 5px;
                    display: block;
                    margin: 10px 0px 15px 0px;
                    border: 0;
                    color: #fff;
                    font-size: 16px;
                    font-weight: 600;
                    background: $st-primary-bg;
                }
            }
            @media #{$small} {
             width: 95%;
            }  
        }
        .instructions {
            font-size: 0.75rem;
            border-radius: 0.5rem;
            background: #000000;
            color: #fff;
            padding: 0.25rem;
            position: relative;
            bottom: -10px;
        }
        .instructions > svg {
            margin-right: 0.25rem;
        }
        .offscreen {
            position: absolute;
            left: -9999px;
        }
        .hide {
            display: none;
        }
        .valid {
            color: limegreen;
            margin-left: 0.25rem;
        }
        .invalid {
            color: red;
            margin-left: 0.25rem;
        }
        .errmsg {
            background-color: lightpink;
            color: firebrick;
            font-weight: bold;
            padding: 0.5rem;
            margin-bottom: 0.5rem;
        }
        .line {
            display: inline-block;
        }
        .flexGrow {
            flex-grow: 1;
            display: flex;
            justify-content: flex-start;
            align-items: flex-end;
        }
        @media #{$small} {
            margin: 0;
            // padding: 30px;
            padding: 12px;
            height: auto; 
            width: 100%;
        }  
    }
    @media #{$small} {
       width: auto;
    }
}


@media (max-width:767px)
   {
    .Almuni .row .col-md-6:first-child { order: 2; }
}

/*working only in ipad landscape device*/

@media all and (width: 1024px) and (height: 768px) and (orientation:landscape){
    .login-page{
        margin: 0px;
        padding: 20px;
        width: 100%;

    }
    .mask{padding: 70px 30px;  top: auto; bottom: 0;}
    .login-img {  border-radius: 0; }
        
}