/*
Template Name: Admin Template
Author: Wrappixel

File: scss
*/

@import url(https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700);

/*Theme Colors*/


/**
 * Table Of Content
 *
 * 	1. Color system
 *	2. Options
 *	3. Body
 *	4. Typography
 *	5. Breadcrumbs
 *	6. Cards
 *	7. Dropdowns
 *	8. Buttons
 *	9. Typography
 *	10. Progress bars
 *	11. Tables
 *	12. Forms
 *	14. Component
 */


/*******************
Login register and recover password Page
******************/

.form-control:focus {
    /* rgb(228 106 118 / 0.6) */
    border-color: #324A62;
}

.login-register, .forgot-pass {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 100%;
    width: 100%;
    padding: 10% 0;
    position: fixed;
}

.login-box {
    width: 33%;
    margin: 0 11.5% 0 0;
    position: relative;
    right: 0;
}

.login-box .footer {
    width: 100%;
    left: 0px;
    right: 0px;
}

.login-box .social {
    display: block;
    margin-bottom: 30px;
}

#recoverform {
    display: none;
}

.login-sidebar {
    padding: 0px;
    margin-top: 0px;
}

.login-sidebar .login-box {
    right: 0px;
    position: absolute;
    height: 100%;
}

.login-register {
    background-image: url(/assets/images/background/layer.png);
    background-size: 28%;
    background-position: 80% center;
    padding: 8% 0 10%;

}

.forgot-pass {
    background-image: url(/assets/images/background/layer.png);
    background-size: 28%;
    background-position: 80% center;
    padding: 10% 0 10%;
}

.login-box .logo {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
    height: 150px;
    z-index: 1;
    border-radius: 50%;
    background-color: #fff;
    padding: 10px;
}

.navbar-box .card{
    float: left;
    margin-left: 10%;
    padding: 20px;
    padding-top: 30px;
    border-radius: 10px;
}

.navbar-box {
    width: 100%;
    margin: 0 13%;
    position: relative;
    right: 0;
}


.login-box.card {
    float: left;
    margin-left: 10%;
    padding: 20px;
    padding-top: 30px;
    background-color: #324A62;
    border-radius: 10px;
}

#loginform h3 {
    font-weight: 700;
    color: #6a6a6a;
}

#loginform input {
    padding: 20px;
    padding-left: 20px;
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (max-width: 420px) {
    .login-register,.forgot-pass {
        padding: 35% 5% 10%;
        background-image: none;
        position: relative;
    }
    .login-box.card {
        width: 100%;
        float: none;
        margin: 0 auto;
    }
    .login-box.card .card-body {
        padding: 20px 0 0;
    }
}


/* Small devices (portrait tablets and large phones, 600px and up) */

@media only screen and (min-width: 420px) and (max-width: 600px) {
    .login-register,.forgot-pass {
        padding: 20% 15% 10%;
        background-image: none;
        position: relative;
    }
    .login-box.card {
        float: none;
        margin: 10% 0 0;
        width: 100%;
    }
}


/* Medium devices (landscape tablets, 768px and up) */

@media only screen and (min-width: 600px) and (max-width: 767px) {
    .login-register,.forgot-pass {
        padding: 15% 12.5% 10%;
        background-image: none;
        position: relative;
    }
}


/* Large devices (laptops/desktops, 992px and up) */

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .login-register,.forgot-pass {
        padding: 17.5% 15% 10%;
        background-image: none;
        position: relative;
    }
}


/* Large devices (laptops/desktops, 1200px and up) */

@media only screen and (min-width: 992px) and (max-width: 1200px) {
    .login-register {
        padding: 17.5% 0% 0%;
        background-image: url(/assets/images/background/login-bg.jpg);
        position: absolute;
    }
    .forgot-pass {
        padding: 17.5% 0% 0%;
        background-image: url(/assets/images/background/forgotpass.png);
        position: absolute;
    }
    .login-box.card {
        width: 350px;
        ;
        float: left;
        margin-right: 7.5%;
    }
}


/* Extra large devices (large laptops and desktops, 1600px and up) */

@media only screen and (min-width: 1600px) {
    .login-box.card {
        width: 650px;
        float: left;
        margin-top: 5%;
        margin-right: 10%;
    }
    .login-box.card .card-body {
        padding: 50px;
    }
}