body {

    margin: 0px;

    padding: 0px;

    min-height: 100vh;

    color: var(--color-white);

    font-family: 'Inter', sans-serif;

    position: relative;

    overflow-x: hidden;
}
body::before {

    content: '';

    position: fixed;

    inset: 0;

    background:

        linear-gradient(
            rgba(2,6,18,0.78),
            rgba(2,6,18,0.88)
        ),

        url('/assets/img/login-bg.png');

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    filter: blur(8px);

    transform: scale(1.05);

    z-index: -2;
}



/* =========================
   LINKS
========================= */

a {

    text-decoration: none;

    color: inherit;

}

/* =========================
   LISTAS
========================= */

ul {

    list-style: none;

}

/* =========================
   TITLES
========================= */

h1,
h2,
h3,
h4 {

    font-weight: 700;

    color: var(--color-white);

}

/* =========================
   TEXT
========================= */

p {

    color: var(--color-text-muted);

}

/* =========================
   MAIN
========================= */

main {

    width: 100%;

}/* =========================
PAGE LOADER
========================= */

.page-loader {

    position: fixed;

    inset: 0;

    background: #060816;

    display: flex;

    align-items: center;

    justify-content: center;

    z-index: 99999;

    transition:
        opacity 0.4s ease;
}

.page-loader.hidden {

    opacity: 0;

    pointer-events: none;
}

/* =========================
SPINNER
========================= */

.loader-spinner {

    width: 54px;

    height: 54px;

    border-radius: 50%;

    border:
        3px solid rgba(255,255,255,0.08);

    border-top:
        3px solid #3b82f6;

    animation:
        loaderSpin 0.8s linear infinite;
}

/* =========================
FORM ELEMENTS
========================= */

input,
select,
textarea {

    width: 100%;

    padding: 14px;

    border-radius: 12px;

    border: 1px solid var(--color-border);

    background: var(--color-sidebar);

    color: var(--color-white);

    font-size: 14px;

    outline: none;

}

input:focus,
select:focus,
textarea:focus {

    border-color: var(--color-primary);

}

/* =========================
SPIN
========================= */

@keyframes loaderSpin {

    to {

        transform: rotate(360deg);
    }
}@media screen and (max-width: 900px) {

    body {

        background-attachment: scroll;
    }
}