@font-face {
    font-family: Jost;
    src: url('Jost-VariableFont_wght.ttf');
}

/**
 * @Color-Codes - Theme -
 */
:root {
    /* --color-primary: #9469fb; */
    --color-primary: #6423ff;
    --color-hover-primary: #a27ff3;
    --color-error: #E11D48;
    --color-success: #09d2ba;
    --white-color: #ffffff;
    --color-muted-50: 248 250 252;
    --color-muted-100: 241 245 249;
    --color-muted-200: 226 232 240;
    --color-muted-300: 203 213 225;
    --color-muted-400: 148 163 184;
    --color-muted-500: 100 116 139;
    --color-muted-600: 71 85 105;
    --color-muted-700: 51 65 85;
    --color-muted-800: 30 41 59;
    --color-muted-900: 15 23 42;
    --color-muted-950: 2 6 23;
    --color-primary-50: 245 243 255;
    --color-primary-100: 237 233 254;
    --color-primary-200: 221 214 254;
    --color-primary-300: 196 181 253;
    --color-primary-400: 167 139 250;
    --color-primary-500: 139 92 246;
    --color-primary-600: 124 58 237;
    --color-primary-700: 109 40 217;
    --color-primary-800: 91 33 182;
    --color-primary-900: 76 29 149;
    --color-primary-950: 46 16 101;
    --bg-btn-default-hover: 248 250 252;
}

:root,
[data-theme='light-theme'] {
    color-scheme: light;
    --color-text-muted-400: #536a8b;
    --bg-theme-primary: #8B5CF6;
    --bg-auth-main: #FFFFFF;
    --bg-auth-dim: #F1F5F9;
    --bg-auth-fade: #FFFFFF;
    --bg-color-fade: #FFFFFF;
    --bg-input: #FFFFFF;
    --border-muted-400: #aeb9cb7a;
    --input-border: #aeb9cb7a;
    /* --input-text-color: #94a3b8; */
    --input-text-color: #515f72;
    --text-color-default: #121212;
    --bg-backdrop: rgba(30, 41, 59, 0.335);
    --bg-div-default: 255 255 255;
    --bg-btn-default-1: var(--bg-div-default);
    --bg-btn-default-1-hover: var(--color-muted-200);
}

[data-theme='dark-theme'] {
    color-scheme: dark;
    /* --color-text-muted-400: #94a3b8; */
    --color-text-muted-400: #d0d5dc;
    --color-primary: #ad8ff3;
    --bg-auth-main: #1E293B;
    --bg-auth-dim: #0F172A;
    --bg-auth-fade: #1E293B;
    --bg-color-fade: #1E293B;
    --input-border: #c6cad149;
    --border-muted-400: #c6cad149;
    --bg-backdrop: rgba(15, 23, 42, 0.335);
    --bg-input: #131b2ee8;
    --input-text-color: #d0d5dc;
    --text-color-default: #FFFFFF;
    --bg-btn-default-1: var(--color-muted-700);
    --bg-btn-default-1-hover: var(--color-muted-600);
}

/**
 * Base __ Styles
 */

/* -- Resetting Universal Default Styles -- */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    scroll-behavior: smooth !important;
    font-family: 'Jost', sans-serif !important;
}

/**
 * @Common
 */

/* -- Colors -- */
.text-color-default {
    color: var(--text-color-default) !important;
}

.bg-muted-fade {
    background-color: var(--bg-color-fade) !important;
}

.color-muted-400 {
    color: var(--color-text-muted-400) !important;
}

:is([data-theme="dark-theme"] .bg-muted-900\/80) {
    background-color: rgb(var(--color-muted-900)/.8);
}

.bg-muted-800\/70 {
    background-color: rgb(var(--color-muted-800)/.7);
}

.color-text-primary {
    color: var(--color-primary);
}

.backdrop-bg-muted {
    background-color: var(--bg-backdrop) !important;
}

/* -- Svg -- */
svg.svg-stroke-primary\:light {
    stroke: #9b5dff;
    fill: rgba(163, 124, 255, 0.139);
}

svg.svg-stroke-primary\:dark {
    stroke: #6c30cd;
    fill: rgba(139, 92, 246, 0.2);
}

svg.svg-stroke-default {
    stroke: var(--text-color-default);
    fill: rgba(194, 192, 199, 0.317);
}

svg.svg-stroke-muted-400 {
    stroke: var(--color-text-muted-400);
    fill: rgba(194, 192, 199, 0.2);
}

/* -- Font Size -- */
.fs-\[17px\] {
    font-size: 17px !important;
}

.fs-\[1\.3rem\] {
    font-size: 1.3rem !important;
}

.text-dot-85-rem {
    font-size: .85rem !important;
}

.text-dot-89-rem {
    font-size: .89rem !important;
}

.text-dot-95-rem {
    font-size: .95rem !important;
}

.cursor-pointer {
    cursor: pointer !important;
}

.border-full {
    border: 1px solid var(--border-muted-400) !important;
}

/* -- Width -- */
.max-w-\[28rem\] {
    max-width: 28rem !important;
}

/* -- Button -- */
.btn-custom-default-1 {
    border: none;
    color: var(--text-color-default);
    background-color: rgb(var(--bg-btn-default-1)/1);
    border-radius: .5rem;
    font-size: 16px;
    padding: .45rem 1rem;
    transition: background-color .4s cubic-bezier(.4, 0, .2, 1) !important;
}

.btn-custom-default-1:hover {
    background-color: rgb(var(--bg-btn-default-1-hover)/1);
}

.input-error {
    border-color: var(--color-error) !important;
}

.input-error~svg.error {
    stroke: var(--color-error) !important;
    fill: rgba(255, 25, 75, 0.2) !important;
}

input:not([type="submit"]) {
    margin-top: .1rem;
    outline: 2px dashed transparent !important;
    outline-offset: 4px;
}

input:focus:not([type="submit"]) {
    outline-color: var(--input-border) !important;
}

input.input-error:focus:not([type="submit"]) {
    outline-color: var(--color-error) !important;
}

main#auth-main {
    background-color: var(--bg-auth-main);
}

div#auth-img-container {
    background: var(--bg-auth-dim) !important;
}

div#auth-form-container {
    background: var(--bg-auth-fade) !important;
}

.brand-name {
    color: var(--color-text-muted-400);
}

.theme-toggle {
    background-color: var(--bg-auth-fade);
    width: 2.3rem;
    height: 2.3rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    padding: .3rem;
    cursor: pointer;
    line-height: 1;
}

.theme-input {
    display: none;
}

.theme-icon {
    grid-column: 1 / 1;
    grid-row: 1 / 1;
    transition: transform 200ms;
}

.theme-icon>svg {
    width: 1.35rem;
    height: 1.35rem;
}

.icon--moon>svg,
.icon--sun>svg {
    fill: #ffb83c !important;
    stroke: #ffb83c !important;
}

.icon--moon>svg {
    animation: tilt 2.5s linear infinite;
}

.icon--sun>svg {
    animation: rotate 10s linear infinite;
}

.icon--sun {
    transform: scale(1);
}

.icon--moon {
    transition-delay: 100ms;
    transform: scale(0);
}

#theme-toggle-checkbox:checked+.icon--moon {
    transform: scale(1) rotate(360deg);
}

#theme-toggle-checkbox:checked~.icon--sun {
    transition-delay: 100ms;
    transform: scale(0);
}

.greet-text {
    font-size: 2.2rem;
    color: var(--text-color-default);
}

.auth-err-div {
    border-radius: .3rem;
    padding: .8rem .2rem;
    margin: auto !important;
    margin-bottom: 1rem !important;
}

.auth-err-div.err-div {
    border: 1px solid var(--color-error);
    background-color: rgba(255, 25, 75, 0.1);
}

.auth-err-div.err-div>span {
    color: var(--color-error);
}

.auth-err-div.success-div {
    border: 1px solid var(--color-success);
    background-color: rgba(9, 211, 187, 0.2);
}

.auth-err-div.success-div>span {
    color: var(--color-success);
}


input:is(#userName, #passWord, #conf_passWord) {
    background-color: var(--bg-input);
    color: var(--input-text-color) !important;
    border: 1px solid var(--input-border);
    padding-left: 2.5rem;
    padding-right: 2rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
}

input:is(#userName, #passWord, #conf_passWord)::placeholder {
    font-size: .9rem;
    color: var(--input-text-color) !important;
    opacity: .65;
    transition: all .2s ease-in;
}

.form-input-group {
    position: relative;
}

.form-input-group>svg {
    position: absolute;
    top: .65rem;
    left: .5rem;
    width: 1.4rem;
    height: 1.4rem;
    stroke: var(--color-text-muted-400) !important;
    fill: rgba(194, 192, 199, 0.2) !important;
}

.form-input-group>.svg-group {
    position: absolute;
    top: .65rem;
    right: .5rem;
    width: 1.4rem;
    height: 1.4rem;
    vertical-align: middle !important;
    background-color: var(--bg-input);
}

.form-input-group>.svg-group>svg {
    cursor: pointer;
    stroke: var(--color-text-muted-400) !important;
    fill: rgba(194, 192, 199, 0.2) !important;
}

input:is(#userName, #passWord, #conf_passWord):focus~svg {
    stroke: var(--bg-theme-primary) !important;
    fill: rgba(139, 92, 246, 0.2) !important;
}

input.input-error:is(#userName, #passWord, #conf_passWord):focus~span {
    opacity: .9 !important;
}

.remember-me-label {
    position: relative;
    top: 1px;
    width: 18px;
    height: 18px;
    border: 1px solid #c8ccd4;
    border-radius: 3px;
    transition: background 0.1s ease;
    cursor: pointer;
    display: block;
}

.remember-me-label::after {
    content: '';
    position: absolute;
    top: 1.8px;
    left: 5px;
    width: 5px;
    height: 10px;
    opacity: 0;
    transform: rotate(45deg) scale(0);
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transition: all 0.3s ease;
    transition-delay: 0.15s;
}

/* .lbl {
    vertical-align: middle;
    cursor: pointer;
} */

#remember-me-checkbox:checked~.remember-me-label {
    border-color: transparent;
    background: var(--bg-theme-primary);
    animation: jelly 0.6s ease;
}

#remember-me-checkbox:checked~.remember-me-label::after {
    opacity: 1;
    transform: rotate(45deg) scale(1);
}

.remember-me-div {
    position: relative;
}

.hidden-xs-up {
    display: none !important;
}

input[type="submit"] {
    transition: all .2s ease-in-out;
    background-color: var(--bg-theme-primary) !important;
}

button[type="submit"] {
    transition: all .2s ease-in-out;
    background-color: var(--bg-theme-primary) !important;
}

input[type="submit"]:hover {
    opacity: .7;
}

button[type="submit"]:hover {
    opacity: .7;
}

svg.btn-loader {
    display: none;
    width: 1.5em;
    transform-origin: center;
    animation: rotate-360 2s linear infinite;
}

svg.btn-loader>circle {
    fill: none;
    stroke: rgb(222, 226, 231);
    stroke-width: 5;
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    stroke-linecap: round;
    animation: table-loader-dash 1.2s ease-in-out infinite;
}

button.processing-data>svg.btn-loader {
    display: block;
}

button.processing-data>span {
    display: none;
}

.text-muted-underline {
    text-decoration: none !important;
    position: relative !important;
}

.text-muted-underline::after {
    content: '';
    position: absolute;
    top: 1.2rem;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-text-muted-400) !important;
}

.primary-link-hover {
    text-decoration: none !important;
    position: relative !important;
}

.primary-link-hover::after {
    content: '';
    position: absolute;
    top: 1.2rem;
    left: 50%;
    width: 0%;
    height: 1px;
    transition: all 300ms ease-in-out !important;
}

.primary-link-hover:hover {
    color: var(--color-hover-primary) !important;
}

.primary-link-hover:hover::after {
    background: var(--color-hover-primary) !important;
    left: 0%;
    width: 100%;
}

span.auth-error {
    margin-top: .3rem !important;
    display: block;
    font-size: .85rem;
    color: var(--color-error);
    font-weight: 500;
}

/**
 * Responsive __ Styles
 */

/* -- Max -- */
@media (max-width:991.98px) {
    .form-container-inner {
        max-width: 23rem !important;
    }
}

/* -- Min_&_Max -- */

/* -- Min -- */
@media (min-width:992px) {
    .form-container-inner {
        max-width: 21rem !important;
    }
}

/**
 * @Animations
 */

@keyframes rotate {

    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes tilt {

    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-10deg);
    }

    75% {
        transform: rotate(10deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes jelly {
    from {
        transform: scale(1, 1);
    }

    30% {
        transform: scale(1.25, 0.75);
    }

    40% {
        transform: scale(0.75, 1.25);
    }

    50% {
        transform: scale(1.15, 0.85);
    }

    65% {
        transform: scale(0.95, 1.05);
    }

    75% {
        transform: scale(1.05, 0.95);
    }

    to {
        transform: scale(1, 1);
    }
}

@keyframes table-loader-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 200;
        stroke-dashoffset: -35px;
    }

    100% {
        stroke-dashoffset: -125px;
    }
}