/* ---------- Core ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: url("/assets/fonts/Inter/Inter-Regular.ttf");
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    src: url("/assets/fonts/Inter/Inter-SemiBold.ttf");
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: url("/assets/fonts/Inter/Inter-Bold.ttf");
}

html {
    font-size: 14px;
}

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    padding: 0;
    font-family: "Inter", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    background: #efefef;
    color: #343434;
    overflow: hidden;
}
/* ---------- ./Core ---------- */

/* ---------- Alignment ---------- */
.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }
/* ---------- ./Alignment ---------- */

/* ---------- Margin ---------- */

.mb-1 { margin-bottom: 0.5rem !important; }
.mb-2 { margin-bottom: 1rem !important; }
.mb-3 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 2rem !important; }
.mb-5 { margin-bottom: 2.5rem !important; }
.mb-6 { margin-bottom: 3rem !important; }

/* ---------- ./Margin ---------- */

/* ---------- Input ---------- */
input {
    padding: 0.8rem 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 10px;
    font-size: 1rem;
    box-sizing: border-box;
    background: #ffffff;
    color: #495057;
    outline: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

input:hover {
    border-color: #f39200;
}

input:focus {
    border-color: #f39200;
    outline: 0 none;
    outline-offset: 0;
    box-shadow: 0px 0px 10px rgba(240, 144, 0, 0.25), 0px 0px 20px rgba(240, 144, 0, 0.25);
}

input:read-only,
input:disabled {
    background: #e9e9e9 !important;
}

.input-field {
    margin-bottom: 1.5rem;
}

.input-icon-left {
    position: relative;
}

.input-icon-left i.fas,
.input-icon-left i.far,
.input-icon-left i.fab,
.input-icon-left i.fad {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 1.2rem;
    color: #2979FF;
}

.input-icon-left input {
    padding-left: 35px;
}
/* ---------- ./Input ---------- */

/* ---------- Button ---------- */
.button {
    display: block;
    margin: 0;
    padding: 0.8rem 1rem;
    text-align: center;
    text-decoration: none;
    user-select: none;
    box-sizing: border-box;
    border: 1px solid #2979FF;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: normal;
    background:  #2979FF;
    color: #ffffff;
    cursor: pointer;
    overflow: hidden;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.button:hover {
    background: #0a579d;
    color: #ffffff;
    border-color: #0a579d;
}

.button.button-secondary {
    border: 1px solid #b6dafa;
    color: #0b61ae;
    background: #b6dafa;
}

.button.button-secondary:hover {
    border-color: #8ec6f7;
    background: #8ec6f7;
}

.button.button-plain {
    background: transparent !important;
    color: #2979FF !important;
    border-color: transparent !important;
}

.button-fit {
    width: fit-content !important;
    padding: 0;
    border-radius: 0;
}

.button:disabled {
    background: #d2d0d5 !important;
    color: #ffffff !important;
    border-color: #d2d0d5 !important;
}
/* ---------- ./Button ---------- */

/* ---------- Checklist ---------- */
.checklist {
    line-height: 15px;
}

.checklist small {
    display: block;
    color: gray;
}

.checklist small.success {
    color: #2e882e;
}

.checklist small.error {
    color: #f03232;
}
/* ---------- ./Checklist ---------- */

/* ---------- Login Component ---------- */
.login-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.login-panel-container {
    width: 100%;
    height: calc(100vh - 170px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-panel {
    width: 450px;
    height: auto;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.login-panel div:first-of-type {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.login-panel div:last-of-type {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.login-panel-header {
    height: 105px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.login-panel-header img {
    width: 100%;
    height: 100%;
}

.login-panel-body {
    position: relative;
    padding: 3rem 4rem 6.429rem 4rem;
    border-width: 0px .5px .5px .5px;
    border-style: solid;
    border-color: #D2D0D5;
    background: #FFFFFF;
    overflow: hidden;
    box-shadow: 0px 4px 1px -3px #d2d0d5;
}

.login-panel-body img,
.login-panel-body span,
.login-panel-body input,
.login-panel-body button,
.login-panel-body a {
    width: 100%;
}

.login-panel-body .login-title {
    font-size: 1.563rem;
    font-weight: bold;
    margin-bottom: 1.5rem;
    text-align: center;
}

#login_button {
    margin-bottom: 2rem;
}

#reset_submit {
    margin-bottom: 2rem;
}

#reset_back {
    margin: auto;
}

.login-panel-body .errors {
    position: absolute;
    bottom: 3.214rem;
    font-style: italic;
    color: #E60033;
}

.login-panel-body .checklist {
    line-height: 15px;
}

.login-panel-body .checklist small {
    display: block;
}

.login-panel-body .checklist small.success {
    color: #2e882e;
}

.login-panel-body .checklist small.error {
    color: #E60033;
}

.login-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 170px;
}

.login-footer div {
    padding: 1rem;
    font-size: 0.9rem;
    box-sizing: border-box;
    text-align: center;
}

.login-footer .footer-logo {
    height: 80px;
}

.login-footer .footer-text {
    height: 50px;
}

.login-footer div img {
    height: 100%;
}

#email_sent_panel .fa-solid.fa-check {
    display: none;
}

#email_sent_panel .login-title {
    margin-bottom: 1.5rem;
}

#email_sent_panel .input-field {
    margin-bottom: 2rem;
}

@media only screen and (max-width: 992px) {
    .login-panel-container {
        height: 100% !important;
    }

    .login-panel {
        width: 100% !important;
        height: 100% !important;
    }

    .login-panel-header,
    .login-panel-body {
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }

    .login-panel-body {
        height: inherit !important;
    }

    .login-footer {
        position: absolute !important;
        bottom: 0 !important;
        height: 100px !important;
    }

    .login-footer div {
        font-size: 0.6rem !important;
    }

    .login-footer .footer-logo {
        height: 60px !important;
    }

    .login-footer .footer-text {
        height: 40px !important;
    }
}

@media only screen and (max-width: 1440px) {
    html {
        font-size: 12px;
    }

    .mb-1 { margin-bottom: 0rem !important; }
    .mb-2 { margin-bottom: 0.5rem !important; }
    .mb-3 { margin-bottom: 1rem !important; }
    .mb-4 { margin-bottom: 1.5rem !important; }
    .mb-5 { margin-bottom: 2rem !important; }
    .mb-6 { margin-bottom: 2.5rem !important; }


    .login-panel-container {
        height: calc(100vh - 110px);
    }

    .login-panel {
        width: 400px;
    }

    .login-panel-body {
        padding: 2.5rem 3.5rem 3.5rem 3.5rem;
    }

    .login-footer {
        height: 120px;
    }

    .login-footer .footer-logo {
        height: 70px;
    }

    .login-footer .footer-text {
        height: 50px;
    }
}
/* ---------- ./Login Component ---------- */