@import '~bootstrap/scss/_functions';
@import '~bootstrap/scss/_variables';
@import '~bootstrap/scss/_mixins';
@import "assets/css/abstracts/custom-variables.scss";
/*------------------------------------*
---MAIN
*------------------------------------*/
body {
    background: transparent;
    color: $body-color;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    position: absolute;
    width: 100%;
}

.main-panel {
    margin: auto;
    width: 625px;
    padding: 40px;
    max-width: 100%;

    @include media-breakpoint-only(xs){
        padding: 20px;
    }
}

.windows {
    background: url(/images/login/windows.png) no-repeat center;
    padding-left: 24px;
}

.card {
    border-radius: 10px;
    border: 0;

    .card-body {
        padding: 20px;
    }
}

/*------------------------------------*
---LOGO
*------------------------------------*/
.logo-wrapper {
    padding: 20px;
    border-top-left-radius: 9px;
    border-top-right-radius: 9px;
    border-bottom: 1px solid $border-color;
    background: var(--theme-navbar-bg);
    background-size: auto;
}

.logo-wrapper .logo {
    background-image: var(--theme-logo, url('/images/default/menu/logo.png'));
    max-height: 65px;
    width: var(--theme-logo-width, 186px);
    max-width: 300px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    text-indent: -999em;
    margin: 0 auto;

    @include media-breakpoint-only(xs){
       max-width: 100%;
    }
}

/*------------------------------------*
---FORM
*------------------------------------*/
#login_form {
    margin-bottom: 21px;
}

.form-group {
    label {
        color: $gray-700;
    }

    input {
        height: 56px;
        background-color: $gray-200;
        border-color: transparent;
        border-radius: 0.3rem;

        &:focus {
            background-color: $gray-200;
        }
    }
}

.login-input-group {
    position: relative;

    .login-icon {
        position: absolute;
        left: 1rem;
        top: 1.15rem;
        color: $gray-500;
        z-index: 1;
    }

    .form-control-login {
        padding-left: 2.5rem;
    }
}


// Login password input styling
.login-input-group-password {
    .form-control-login-password {
        padding-right: 2.9rem;
    }

    .password-toggle-buttons {

        position: absolute;
        right: 0;
        top: 0;
        bottom: 0;
        z-index: 99;

        .btn-login-password {
            height: 100%;
            border: none;
            background: transparent;
            padding: 0 0.8rem;
        }
    }
}


.form-options {

    @include media-breakpoint-only(xs) {
        font-size: 0.875rem;
    }

    .login-password-recovery-link {
        line-height: 1.68;
        color: $body-color;
        font-weight: 400;
        padding-left: 0.25rem;
        padding-right: 0.25rem;

        @include media-breakpoint-only(xs) {
            line-height: 1.8;
        }
    }
}

/*------------------------------------*
---SOCIAL CONNECT BUTTONS
*------------------------------------*/

$twitter-color: #1da1f2;
$facebook-color: #4267B2;
$microsoft-color: #737373;

.btn.btn-outline-primary.btn-block {
    &.login-twitter {
        border-color: $twitter-color;
        color: $twitter-color;

        &:hover {
            background-color: $twitter-color;
            color: $white;
        }
    }

    &.login-facebook {
        border-color: $facebook-color;
        color: $facebook-color;

        &:hover {
            background-color: $facebook-color;
            color: $white;
        }
    }

    &.login-microsoft {
        border-color: $microsoft-color;
        color: $microsoft-color;

        &:hover {
            background-color: $microsoft-color;
            color: $white;
        }
    }

}


/*------------------------------------*
---COPYRIGHT
*------------------------------------*/

.copyright-wrapper {
    font-size: 0.75rem;

    .login-text-color {
        color: $gray-600;
    }
}
