body {
    background: url("../../Images/Background-log-in.svg") no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    transition: 0.5s;
    overflow: hidden;
}

.active1{

    transform:translateX(-1164px);
    transition: 3s;

}




.Screen-logIn{

    /* width: 350px;
    height:"440px"
    border: solid 0.7px #707070;
    background-color: #ffffff;
    border-radius: 0 15px 0 15px;
    padding-left: 28px;
    padding-right: 28px;
    margin-top: 165px; */

    width: 350px;
    height: 0;
    border: none;
    background-color: #ffffff;
    border-radius: 0 15px 0 15px;
    padding-left: 28px;
    padding-right: 28px;
    margin-top: -5rem;
    z-index: 2;
    position: relative;

}

.Screen-logIn h2{


    font-family: 'Montserrat';
    font-size: 15px;
    font-weight: 600;
    text-align: left;
    color: #201e1e;
}

input{

    width: 290px;
    height: 35px;
    border-radius: 25px;
    border: solid 1px #6b6b6b;
    background-color: #ffffff;
    padding-right: 44px;
}


:focus {
    outline:none;
    outline-color: none;
    outline-style: none;
    outline-width: none;
}

button:focus {
    outline: none;
    outline-color: none;
    outline-style: none;
    outline-width: none;
    outline: none;
}

.checkmarkEmail {

    width: 20px;
    height: auto;
    position: absolute;
    margin-left: 250px;

}

.checkmarkPassword {

    width: 20px;
    height: auto;
    position: absolute;
    margin-left: 250px;

}




/*Checkboxes*/




.box {
    width: 15px;
    height: 15px;
    border-radius: 5px;
    box-shadow: 0 0px 10px 0 rgba(44, 40, 40, 0.11);
    border: 2px solid #3b86ff;
    display: inline-block;
    transition: 0.5s;
}

.active {

    width: 15px; 
    transition: 0.5s;
    position: absolute;
}

.Remember-me {

    font-family: 'Montserrat';
    font-size: 12px;
    font-weight: 300;
    text-align: left;
    color: #232222;
}

.Forgot{

    font-family: 'Montserrat';
    font-size: 10px;
    font-weight: 600;
    color: #1e1e1e;
}

.log-in {

    /* width: 65px;
    height: 35px; */
    /* background-color: #3b86ff; */
    
    font-family: 'Ubuntu';
    font-size: 13px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    border: none;
    border-radius: 25px;

}

.log-in:focus{

    box-shadow: 0px 0px 20px 1px #3b86ff;
}


.footer{

    width: 350px;
    border: solid 0.7px #707070;
    background-color: #ffffff;
    border-radius: 0 15px 0 15px;
    padding-left: 28px;
    padding-right: 28px;
    display: inline-block;

}

.linkedin, .facebook, .twitter{

    width: 18px;
    height: 18px;
}
 
.footer p{

    font-family: 'Montserrat';
    font-size: 10px;
    font-weight: 600;
    color: #2c2c2c;
    z-index: 1;
}

.footer span{

    color: #7e72f2;
}

/********************************** loading ****************************/


.loading-overlay{

    background-color: #222222;
    position: f;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
}



.fa-eye{

    font-size: 18px;
    position: absolute;
    color: #00000052;
    margin-left: 250px;
    display: none;
}

.fa-eye1{

    font-size: 18px;
    position: absolute;
    color: #6b6b6b;
    margin-left: 250px;
    display: none;
}

input .Password{

    padding-right: 75px !important;
}





.custom-control-input{

    position: absolute;
    z-index: -2;
    opacity: 0;
    width: 30px;
    /* margin-bottom: 6px; */
    /* margin-right: 9px; */
    left: 95px;
}

.custom-control-label::before{

        position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
    position: absolute;
    z-index: -2;
    opacity: 0;
    width: 30px;
    /* margin-bottom: 6px; */
    /* margin-right: 9px; */
    left: 95px;
}


.custom-control-label::after{

        position: absolute;
    top: .25rem;
    left: -1.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50%/50% 50%;
    position: absolute;
    z-index: -2;
    opacity: 0;
    width: 30px;
    /* margin-bottom: 6px; */
    /* margin-right: 9px; */
    left: 95px;
}









            /* start media query */


/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px){


    .GARAS-Logo{

        width: 130px !important;
    }

    input{

        width: 200px;
        height: 28px;
    }

    .checkmarkEmail {

        margin-left: 170px;
        top: 41%;
    }

    .checkmarkPassword {

        margin-left: 170px;
        top: 59%;
    }

    .Screen-logIn{

        height: 390px !important;
        width: 260px;
    }

    .footer{

        width: 260px;
    }

    .fa-eye{

        margin-left: 145px;
        top: 59.5%;
    }

    .Password{

        padding-right: 60px;
    }

}

@media (min-width: 1200px)and (height:800px) { 


    
.footer{

    width: 350px;


}

}