* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Segoe UI", "Helvetica Neue", "Lucida Grande", "Roboto", "Ebrima", "Nirmala UI", "Gadugi", "Segoe Xbox Symbol", "Segoe UI Symbol", "Meiryo UI", "Khmer UI", "Tunga", "Lao UI", "Raavi", "Iskoola Pota", "Latha", "Leelawadee", "Microsoft YaHei UI", "Microsoft JhengHei UI", "Malgun Gothic", "Estrangelo Edessa", "Microsoft Himalaya", "Microsoft New Tai Lue", "Microsoft PhagsPa", "Microsoft Tai Le", "Microsoft Yi Baiti", "Mongolian Baiti", "MV Boli", "Myanmar Text", "Cambria Math";
}

:root {
    --error: #e81123;
}

/* PAGE BACKGROUND + CENTERING */
html,
body {
    height: 100%;
    background-color: #e2e5d3;          /* fallback */
    background-image: url('../images/back.svg');   /* from assets/app.css => back.svg in same folder */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: #1b1b1b;
}

/* Use flex to center the active section on the page */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Only one section is visible at a time (others have .d-none) */
section {
    width: 100%;
    max-width: 440px;
}

/* TYPOGRAPHY */
.title {
    line-height: 1.75rem;
    color: #1b1b1b;
    font-size: 1.5rem;
    font-weight: 600;
}

/* MAIN AUTH BOX */
.auth-wrapper {
    width: 100%;
    padding: 44px;
    margin: 0 auto 16px auto;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    min-width: 320px;
}

/* SIGN-IN OPTIONS BOX UNDER MAIN CARD */
.opts {
    padding: 10px 44px;
    max-width: 440px;
    cursor: pointer;
    margin: 0 auto;
    background-color: #fff;
    -webkit-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    -moz-box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}

.opts:hover {
    background-color: rgba(0, 0, 0, .1);
}

/* INPUTS */
.input {
    padding: 4px 8px;
    border-style: solid;
    border-width: 2px;
    border-color: rgba(0, 0, 0, .4);
    background-color: rgba(255, 255, 255, .4);
    height: 2rem;
    padding: 6px 10px;
    padding-left: 10px;
    border-width: 1px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-left-width: 1px;
    border-color: rgba(0, 0, 0, .6);
    height: 36px;
    outline: none;
    border-radius: 0;
    -webkit-border-radius: 0;
    background-color: transparent;
    border-top-width: 0;
    border-left-width: 0;
    border-right-width: 0;
    padding-left: 0;
    width: calc(100% - 20px);
}

.input:hover {
    border-color: rgba(0, 0, 0, .8);
}

.input::placeholder {
    font-size: 15px;
}

/* LINKS */
.mb-0 {
    margin-bottom: 0;
}

a.link {
    text-decoration: none;
    color: #0067b8;
}

a:hover {
    text-decoration: underline !important;
    color: #666;
}

a:focus {
    border: 1px dotted #000;
    text-decoration: underline !important;
}

/* BUTTONS */
.btn {
    margin: 0 0 0 auto;
    display: block;
    background-color: #0067b8;
    color: #fff;
    border: 2px solid #0067b8;
    padding: 5px 30px;
    font-size: 15px;
    cursor: pointer;
}

.btn:hover {
    background-color: #005da6;
}

.btn-group {
    text-align: right;
    width: 100%;
    margin: 16px 0;
}

.btn-group > .btn {
    display: inline;
}

.btn-group > .btn:not(:last-child) {
    margin-right: 5px;
}

.btn-sec {
    background-color: #b2b2b2;
    color: #000;
    border-color: #b2b2b2;
}

.btn-sec:hover {
    background-color: rgba(0, 0, 0, .3);
}

#btn_final:hover {
    text-decoration: underline;
}

/* ICONS & SMALL ELEMENTS */
.has-icon {
    display: flex;
    gap: 5px;
    align-items: center;
}

.has-icon .icon {
    display: inline-flex;
}

.mb-16 {
    margin-bottom: 16px;
}

.mt-16 {
    margin-top: 16px;
}

.d-none {
    display: none !important;
}

.back {
    border: none;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background-color: unset;
    cursor: pointer;
}

.back:hover {
    background-color: rgba(0, 0, 0, .1);
}

.identity {
    display: inline-flex;
    gap: 5px;
}

.d-block {
    display: block;
}

.w-100 {
    width: 100%;
}

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

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

.text-title {
    font-size: 1.5rem;
}

label.has-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.checkbox {
    width: 20px;
    height: 20px;
}

.p {
    font-weight: 400;
    font-size: 15px;
    margin: 16px 0;
}

.fs-13 {
    font-size: 13px;
}

#user_identity {
    font-size: 15px;
    color: #1b1b1b;
}

img {
    vertical-align: middle;
}

/* FOOTER */
.footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    overflow: visible;
    z-index: 99;
    clear: both;
    min-height: 28px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: end;
}

.footer a,
.footer span {
    color: #000;
    font-size: 12px;
    line-height: 28px;
    margin-left: 8px;
    margin-right: 8px;
    text-decoration: none;
}

.footer span {
    font-size: 20px;
    line-height: 20px;
}

.footer a:hover {
    text-decoration: underline;
}

/* MOBILE STYLES */
@media screen and (max-width: 600px) {
    html,
    body {
        height: auto;
        min-height: 100vh;
        background-color: #fff;
        background-image: none; /* simpler mobile view */
    }

    body {
        display: block;
    }

    section {
        max-width: 100%;
        width: 100%;
    }

    .auth-wrapper {
        box-shadow: none !important;
        padding: 24px !important;
        width: 100% !important;
        max-width: unset !important;
        min-width: 0;
        margin: 0 auto 16px auto !important;
    }

    .opts {
        box-shadow: none !important;
        padding: 8px 24px !important;
        border: 1px solid #999;
        max-width: calc(100% - 48px);
        margin: 12% auto !important;
    }

    .footer {
        position: static;
        justify-content: flex-start;
        padding: 8px 24px;
    }
}