/* Login page */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;700&display=swap');

 /*
@font-face {
    font-family: "Poppins";
    src:url("../fonts/poppins/Poppins-Bold.ttf") format("TrueType"),
        url("../fonts/poppins/Poppins-Medium.ttf") format("TrueType"),
        url("../fonts/poppins/Poppins-Regular.ttf") format("TrueType");
} */

:root{
    --primary: #066ac9;     --primary-light: #e6f0f9;   --primary-dark: #055aab;

    --secondary: #e4e6ef;   --secondary-dark: #b5b5c3;

    --success: #0cbc87;     --success-light: #e6f8f3;   --success-dark: #0aa073;
    
    --info: #6f42c1;        --info-light: #f0ecf9;      --info-dark: #5014d0;

    --warning: #f7c32e;     --warning-light: #fef6e0;   --warning-dark: #f1bc00;

    --danger: #d6293e;      --danger-light: #fbe9eb;    --danger-dark: #c92235;

    --dark: #181c32;        --dark-light: #eff2f5;      --dark-dark: #131628;

    --scrollbar-track: transparent;
    --scrollbar-track-width: .5rem;
    --scrollbar-thumb: #cccccf;

    --bs-gutter-x   : 1rem;

    --font1         : "Poppins", sans-serif;
    --font2         : var(--bs-font-sans-serif);

    --fsize1        : calc(1.3rem + .6vw);
    --fsize2        : calc(1.275rem + .3vw);
    --fsize3        : calc(1.26rem + .12vw);
    --fsize4        : 1.25rem;
    --fsize5        : 1.15rem;
    --fsize6        : 1.075rem;
}

html, body { font-family: var(--font1); color: var(--dark); background: #fff; }
html.login { height: 100%; }
html.login body { background: url('../img/layout/bg.jpg') no-repeat 0 0/100% 100%!important; height: 100%; }

p, em, span, strong, .alert { font-size: .875rem; }

.fs-1, .fs-1 * { font-size: var(--fsize1)!important; }
.fs-2, .fs-2 * { font-size: var(--fsize2)!important; }
.fs-3, .fs-3 * { font-size: var(--fsize3)!important; }
.fs-4, .fs-4 * { font-size: var(--fsize4)!important; }
.fs-5, .fs-5 * { font-size: var(--fsize5)!important; }
.fs-6, .fs-6 * { font-size: var(--fsize6)!important; }

.login-box-locked { width: 100%; max-width: 400px; margin: auto; box-shadow: 0 1rem 3rem rgba(0,0,0,.02)!important; } 
.login-box-locked svg { width: 100%; max-width: 250px; }

.btn:not(.btn.btn-sm,.btn.btn-lg) { padding: .5rem 1rem; }
.btn { outline: 0!important; text-align: center; display: inline-flex; display: -ms-inline-flexbox; align-items: center; -ms-flex-align: center; justify-content: center; font-size: .875rem; }
.btn.btn-primary { color: #fff; background-color: var(--primary); border-color: var(--primary); }
.btn.btn-primary:hover{ color: #fff; border-color: var(--primary-dark); background-color: var(--primary-dark); }
.btn.btn-primary:focus { color: #fff; border-color: var(--primary-dark); background-color: var(--primary-dark)!important; box-shadow: 0 0 0 0.25rem rgba(54, 153, 255,.4) }

.card { border: 0; }
.login-box-locked form label { font-size: .875rem; font-weight: 500; } 

/* Alert */
.alert { font-weight: 500; }
.alert p { margin: 0px; }
.alert-primary { color: var(--primary-dark); background-color: var(--primary-light); border-color: var(--primary-light); }
.alert-secondary { color: var(--secondary-light); background-color: var(--secondary); border-color: var(--secondary); }
.alert-success { color: var(--success-dark); background-color: var(--success-light); border-color: var(--success-light); }
.alert-warning { color: var(--warning-dark); background-color: var(--warning-light); border-color: var(--warning-light); }
.alert-danger { color: var(--danger-dark); background-color: var(--danger-light); border-color: var(--danger-light); }
.alert-info { color: var(--info-dark); background-color: var(--info-light); border-color: var(--info-light); }
.alert-dark { color: var(--dark-dark); background-color: var(--dark-light); border-color: var(--dark-light); }

/* Forms */
.form-control,.form-control:disabled { background-color: #f5f8fa; border-color: #f5f8fa; color: #5e6278; font-size: .875rem; padding: .75rem 1rem; font-weight: 500; box-shadow: none; }
.form-control:active, .form-control:focus { background-color: #eef3f7; border-color: #eef3f7!important; color: #5e6278; transition: color .2s ease,background-color .2s ease; box-shadow: none; }
.form-control::placeholder, span.place-holder { color: #a1a5b7; font-weight: 500; }


@media (min-width: 768px) {
    .login-box-locked .card-body { padding: 40px; }
}