:root {
    --btn-font-size: 0.875rem;
    --btn-font-weight: 500;
    --btn-border-radius: 4px;
    --btn-border-radius-rounded: 36px;
    --color-primary-bg: #ace7da;
    --color-normal-bg: #f5f5f5;
    --color-disabled-bg: #f0f0f0;
    --color-text: #3c3c3c;
    --color-disabled-text: #979797;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Geologica, Roboto, 'Helvetica Neue', sans-serif;
}

.main {
    display: flex;
    align-items: center;
    min-height: 100vh;
    background: #ffffff;
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-background-clip: text;
    transition: background-color 5000s ease-in-out 0s;
    box-shadow: inset 0 0 20px 20px #23232329;
}

button, input, optgroup, select, textarea {
    font-family: Geologica, Roboto, 'Helvetica Neue', sans-serif;
}


a {
    cursor: pointer;
    color: #3b9dec;
}

button {
    all: unset;
}

button {
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    border-radius: var(--btn-border-radius);
    color: var(--color-text);
    cursor: pointer;
}

    button.primary {
        background-color: var(--color-primary-bg);
        color: #005E3C;
        border: 2px solid #005E3C;
        font-weight: 500;
    }

    button.normal {
        background-color: var(--color-normal-bg);
    }

    button.rounded {
        border-radius: var(--border-radius-rounded);
    }

    button:disabled {
        background-color: var(--color-disabled-bg);
        color: var(--color-disabled-text);
        cursor: not-allowed;
    }

.auth-container {
    max-width: 1000px;
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    width: 100%;
    padding-right: calc(var(--bs-gutter-x) * 0.5);
    padding-left: calc(var(--bs-gutter-x) * 0.5);
    margin-right: auto;
    margin-left: auto;
}

section {
    max-width: 1500px;
    text-align: center;
    position: relative;
}

form {
    position: relative;
    display: flex;
    flex-direction: column;
    margin-top: 40px;
    padding: 20px 100px;
    border-radius: 180px;
    background-color: white;
    z-index: 1;
}

.login-container {
    max-width: 580px;
    margin-left: 8px;
}

.login-wrapper {
    margin: 20px 0;
}

.login-brackground {
    margin: 0 auto;
    position: absolute;
    background-color: #1b4f9b;
    top: 175px;
    left: 0;
    height: 352px;
    width: 100%;
    border-radius: 190px;
}

.login-person {
    position: absolute;
    top: 8px;
    right: 8%;
    transition: content 0.7s ease-in-out, right 0.7s ease-in-out;
}

    .login-person.default-image {
        content: url('/images/login/login-person-1.png');
        animation: fadeInRight 0.7s ease-in-out;
    }

    .login-person.second-image {
        content: url('/images/login/login-person-2.png');
        right: 3%;
        animation: fadeInLeft 0.7s ease-in-out;
    }

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
    }
}

.login-non-register {
    text-align: center;
    margin-top: 36px;
    font-size: 0.875rem;
    font-weight: 400;
}

    .login-non-register.mobile {
        display: none;
    }

.login-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    padding-bottom: 30px;
}

.login-forgot-password {
    text-align: center;
    text-decoration: underline;
    font-weight: 400;
    font-size: 0.875rem;
    margin: 12px 0 20px 0;
}

.login-btn-container {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 15px;
}

    .login-btn-container button,
    .login-btn-container a {
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    .login-btn-container a {
        border-radius: 4px;
    }

    .login-btn-container button:hover,
    .login-btn-container a:hover {
        background-color: #6dd0ba;
    }

    .login-btn-container button:first-child {
        height: 36px;
        padding: 0 16px;
        text-transform: uppercase;
    }

.input-field.password {
    position: relative;
}

    .input-field.password input[type=password],
    .input-field.password input[type=text] {
        padding-right: 40px !important;
    }

button.toggle-password:focus:not(:focus-visible) {
    background-color: transparent;
}

.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    height: -moz-available; /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    height: fill-available;
}

    .toggle-password i {
        font-size: 1.8em;
        color: #979797;
    }

/** MATERIALIZE CUSTOM **/
/*TABS*/
.tabs .tab {
    text-transform: initial;
    -webkit-box-flex: initial;
    -webkit-flex-grow: initial;
    -ms-flex-positive: initial;
    flex-grow: initial;
    justify-content: center;
}

.tabs .indicator {
    background-color: #00B996;
}

.tabs .tab a:hover, .tabs .tab a {
    color: #606060;
}

    .tabs .tab a:hover, .tabs .tab a.active {
        color: #00B996;
    }

    .tabs .tab a:focus, .tabs .tab a:focus.active {
        background-color: transparent;
    }
/*INPUTS*/
input[type=email] {
    text-transform: lowercase;
}

    input:not([type]), input[type=text]:not(.browser-default), input[type=password]:not(.browser-default), input[type=email]:not(.browser-default), input[type=url]:not(.browser-default), input[type=time]:not(.browser-default), input[type=date]:not(.browser-default), input[type=datetime]:not(.browser-default), input[type=datetime-local]:not(.browser-default), input[type=tel]:not(.browser-default), input[type=number]:not(.browser-default), input[type=search]:not(.browser-default), textarea.materialize-textarea {
        border: 1px solid #979797;
        border-radius: 4px;
        padding: 0 10px;
        width: -moz-available; /* WebKit-based browsers will ignore this. */
        width: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
        width: fill-available;
        margin: 0;
    }

        input.valid:not([type]), input.valid:not([type]):focus, input.valid[type=text]:not(.browser-default), input.valid[type=text]:not(.browser-default):focus, input.valid[type=password]:not(.browser-default), input.valid[type=password]:not(.browser-default):focus, input.valid[type=email]:not(.browser-default), input.valid[type=email]:not(.browser-default):focus, input.valid[type=url]:not(.browser-default), input.valid[type=url]:not(.browser-default):focus, input.valid[type=time]:not(.browser-default), input.valid[type=time]:not(.browser-default):focus, input.valid[type=date]:not(.browser-default), input.valid[type=date]:not(.browser-default):focus, input.valid[type=datetime]:not(.browser-default), input.valid[type=datetime]:not(.browser-default):focus, input.valid[type=datetime-local]:not(.browser-default), input.valid[type=datetime-local]:not(.browser-default):focus, input.valid[type=tel]:not(.browser-default), input.valid[type=tel]:not(.browser-default):focus, input.valid[type=number]:not(.browser-default), input.valid[type=number]:not(.browser-default):focus, input.valid[type=search]:not(.browser-default), input.valid[type=search]:not(.browser-default):focus, textarea.materialize-textarea.valid, textarea.materialize-textarea.valid:focus, .select-wrapper.valid > input.select-dropdown {
            border: 1px solid #979797;
            -webkit-box-shadow: initial;
            box-shadow: initial;
        }

            input.valid:not([type]):focus + label, input.valid[type=text]:not(.browser-default):focus + label, input.valid[type=password]:not(.browser-default):focus + label, input.valid[type=email]:not(.browser-default):focus + label, input.valid[type=url]:not(.browser-default):focus + label, input.valid[type=time]:not(.browser-default):focus + label, input.valid[type=date]:not(.browser-default):focus + label, input.valid[type=datetime]:not(.browser-default):focus + label, input.valid[type=datetime-local]:not(.browser-default):focus + label, input.valid[type=tel]:not(.browser-default):focus + label, input.valid[type=number]:not(.browser-default):focus + label, input.valid[type=search]:not(.browser-default):focus + label, textarea.materialize-textarea.valid:focus + label {
                color: #00B996;
            }

        input:not([type]):focus:not([readonly]), input[type=text]:not(.browser-default):focus:not([readonly]), input[type=password]:not(.browser-default):focus:not([readonly]), input[type=email]:not(.browser-default):focus:not([readonly]), input[type=url]:not(.browser-default):focus:not([readonly]), input[type=time]:not(.browser-default):focus:not([readonly]), input[type=date]:not(.browser-default):focus:not([readonly]), input[type=datetime]:not(.browser-default):focus:not([readonly]), input[type=datetime-local]:not(.browser-default):focus:not([readonly]), input[type=tel]:not(.browser-default):focus:not([readonly]), input[type=number]:not(.browser-default):focus:not([readonly]), input[type=search]:not(.browser-default):focus:not([readonly]), textarea.materialize-textarea:focus:not([readonly]) {
            border: 1px solid #00B996;
            -webkit-box-shadow: initial;
            box-shadow: initial;
        }

        input:not([type]).validate + label, input[type=text]:not(.browser-default).validate + label, input[type=password]:not(.browser-default).validate + label, input[type=email]:not(.browser-default).validate + label, input[type=url]:not(.browser-default).validate + label, input[type=time]:not(.browser-default).validate + label, input[type=date]:not(.browser-default).validate + label, input[type=datetime]:not(.browser-default).validate + label, input[type=datetime-local]:not(.browser-default).validate + label, input[type=tel]:not(.browser-default).validate + label, input[type=number]:not(.browser-default).validate + label, input[type=search]:not(.browser-default).validate + label, textarea.materialize-textarea.validate + label {
            width: auto;
        }

        input:not([type]).validate.invalid + label, input[type=text]:not(.browser-default).validate.invalid + label, input[type=password]:not(.browser-default).validate.invalid + label, input[type=email]:not(.browser-default).validate.invalid + label, input[type=url]:not(.browser-default).validate.invalid + label, input[type=time]:not(.browser-default).validate.invalid + label, input[type=date]:not(.browser-default).validate.invalid + label, input[type=datetime]:not(.browser-default).validate.invalid + label, input[type=datetime-local]:not(.browser-default).validate.invalid + label, input[type=tel]:not(.browser-default).validate.invalid + label, input[type=number]:not(.browser-default).validate.invalid + label, input[type=search]:not(.browser-default).validate.invalid + label, textarea.materialize-textarea.validate.invalid + label {
            color: #F44336;
        }

        input.invalid:not([type]), input.invalid:not([type]):focus, input.invalid[type=text]:not(.browser-default), input.invalid[type=text]:not(.browser-default):focus, input.invalid[type=password]:not(.browser-default), input.invalid[type=password]:not(.browser-default):focus, input.invalid[type=email]:not(.browser-default), input.invalid[type=email]:not(.browser-default):focus, input.invalid[type=url]:not(.browser-default), input.invalid[type=url]:not(.browser-default):focus, input.invalid[type=time]:not(.browser-default), input.invalid[type=time]:not(.browser-default):focus, input.invalid[type=date]:not(.browser-default), input.invalid[type=date]:not(.browser-default):focus, input.invalid[type=datetime]:not(.browser-default), input.invalid[type=datetime]:not(.browser-default):focus, input.invalid[type=datetime-local]:not(.browser-default), input.invalid[type=datetime-local]:not(.browser-default):focus, input.invalid[type=tel]:not(.browser-default), input.invalid[type=tel]:not(.browser-default):focus, input.invalid[type=number]:not(.browser-default), input.invalid[type=number]:not(.browser-default):focus, input.invalid[type=search]:not(.browser-default), input.invalid[type=search]:not(.browser-default):focus, textarea.materialize-textarea.invalid, textarea.materialize-textarea.invalid:focus, .select-wrapper.invalid > input.select-dropdown, .select-wrapper.invalid > input.select-dropdown:focus {
            border: 1px solid #F44336;
            -webkit-box-shadow: initial;
            box-shadow: initial;
        }

.input-field > label {
    left: 10px;
}

    .input-field > label:not(.label-icon).active {
        -webkit-transform: translateY(-14px) scale(0.8);
        transform: translateY(-9px) scale(0.8);
        -webkit-transform-origin: 0 0;
        transform-origin: 0 0;
        background-color: white;
        padding: 0 5px;
    }

.input-field {
    margin-top: 0rem;
    margin-bottom: 0.5rem;
}

input:-internal-autofill-selected {
    background-color: transparent !important;
}

.gc-login-toast-wrapper {
    width: 100%;
    max-width: 1000px;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    z-index: 99999;
}

.gc-login-toast {
    padding: 1rem;
    background-color: #EA453D;
    color: white;
    border-radius: 4px;
    border-width: 1px;
    border-color: #EA453D;
}


.gc-login-toast-text {
    font-weight: 300;
    margin: 0;
}

.gc-login-toast-success-wrapper {
    width: 100%;
    max-width: 1000px;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    background-color: transparent !important;
    z-index: 99999;
}

.gc-login-toast-success {
    padding: 1rem;
    background-color: #005E3C;
    color: white;
    border-radius: 4px;
    border-width: 1px;
    border-color: #005E3C;
}

.gc-login-input {
    font-weight: 300;
}

.gc-login-label {
    font-weight: 300;
}


@media screen and (max-width: 1000px) {
    .main {
        min-height: initial;
        height: 70vh;
    }

    form {
        border-radius: 0;
        padding: 15px 100px 0;
        margin-top: 10px;
    }

    .login-brackground {
        display: none;
    }

    .login-person {
        position: fixed;
        top: initial;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0 auto;
        width: 279px;
        height: 300px;
        transition: content 0.5s ease-in-out;
    }

        .login-person.default-image {
            content: url('/images/login/login-person-mobile-1.png');
        }

        .login-person.second-image {
            content: url('/images/login/login-person-mobile-2.png');
        }

    .login-container {
        max-width: 100%;
        margin: 0 auto;
    }

    .login-non-register.desktop {
        display: none;
    }

    .login-non-register.mobile {
        display: block;
        text-align: center;
        margin-left: 0;
        margin-top: 0;
    }

    .login-title {
        display: none;
    }

    /** MATERIALIZE CUSTOM **/
    /*TABS*/
    .tabs {
        display: flex;
        display: -webkit-box;
        display: -webkit-flex;
        display: -ms-flexbox;
        justify-content: center;
    }
}

@media screen and (max-width: 1000px) and (max-height: 850px) {
    .auth-container {
        margin-top: 80px;
    }

    .login-person {
        position: absolute;
        top: 110%;
        bottom: 0;
    }
}

@media screen and (max-width: 1000px) and (min-height: 1000px) {
    .main {
        height: 80vh;
    }
}

@media screen and (max-width: 700px) {
    .auth-container {
        margin-top: 140px;
    }

    form {
        border-radius: 0;
        padding: 15px 0 0;
    }
}

@media screen and (max-width: 450px) {
    .tabs {    
        justify-content: initial;
    }

    .login-wrapper > div {
        margin: 0 auto;
        width: auto;
    }
}

input[type="password"]::-ms-reveal,
input[type="password"]::-ms-clear {
    display: none;
}