/*#region Variáveis*/
:root {
    --sys-color-base: #f5f5f5;
    --sys-color-menubar: #2E7D32; /* MDC GREEN 800 - verde escuro */
    --sys-color-menu-2: #4CAF50; /* MDC GREEN 500 - verde claro */
    --sys-color-dark-1: #5C5C5C; /* cinza */
    --sys-color-dark-2: #2E7D32; /* MDC GREEN 800 - verde escuro */
    --sys-color-dark-3: #FFFF00; /* MDC YELLOW A200 - amarelo */
    --sys-color-dark-4: #4CAF50; /* MDC GREEN 500 - verde claro */
    --sys-color-light-1: #FFFFFF; /* branco */
    --sys-color-light-2: #f5f5f5; /* MDC GRAY 100 - cinza claro */
    --sys-color-light-3: #FFFDE7; /* MDC YELLOW 50 - amarelo clarinho */
    --sys-color-light-4: #E8F5E9; /* MDC GREEN 50 - verde clarinho */
    --sys-color-light-5: #FCE4EC; /* MDC PINK 50 - rosa clarinho */
    --sys-color-hover: #F8F9FA;
    --sys-container-max-width: 1860px;
    --sys-color-btn-hover: #eceff1;
    --sys-loading-bg: #5C5C5C; /* cinza */
    --sys-loading-fg: #FFFFFF; /* branco */
}

[data-bs-theme=dark] {
    --sys-color-base: #1d1f21; /* #212529*/
    --sys-color-menu-2: #1d1f21;
    --sys-color-dark-1: #dee2e6;
    --sys-color-dark-2: #388e3c; /* MDC GREEN 700 */
    --sys-color-light-3: #333323;
    --sys-color-dark-4: #1b5e20; /* MDC GREEN 900 */
    --sys-color-light-1: #212529;
    --sys-color-light-2: #424242;
    --sys-color-light-4: #091f0a;
    --sys-color-hover: #2B3035;
    --sys-color-btn-hover: #13100e;
}

/*#endregion*/

html {
    width: 100%;
    height: 100%;
    background: var(--sys-color-dark-2) url('../img/moneyloris-mascot-transparent.svg') center center no-repeat;
    background-size: 15rem;
}

body {
    background-color: var(--sys-color-base) !important;
    min-height: 100vh;
}

main {
    padding-bottom: 5rem;
}

/* region CUSTOM FONTS */

@font-face {
    font-family: 'Lovelo Black';
    src: url('/fonts/lovelo-black-webfont.woff2') format('woff2'), url('/fonts/lovelo-black-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lovelo Line Bold';
    src: url('/fonts/lovelo-linebold-webfont.woff2') format('woff2'), url('/fonts/lovelo-linebold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Lovelo Line Light';
    src: url('/fonts/lovelo-linelight-webfont.woff2') format('woff2'), url('/fonts/lovelo-linelight-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/*#endregion*/

/* #region TITULO e VOLTAR */

.container-titulo {
    padding-top: 1.25rem;
    padding-bottom: 1.5rem;
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .container-titulo .area-titulo {
        display: flex;
        align-items: center;
    }

        .container-titulo .area-titulo .botao-voltar {
            cursor: pointer;
        }

            .container-titulo .area-titulo .botao-voltar:hover {
                filter: brightness(80%);
            }

            .container-titulo .area-titulo .botao-voltar .b-web {
                color: var(--sys-color-dark-2);
                font-size: 3rem;
            }

            .container-titulo .area-titulo .botao-voltar .b-cel {
                color: #fff;
                font-size: 1.5rem;
                padding: 0 0.35rem;
                display: none;
            }

        .container-titulo .area-titulo .titulo {
            font-size: 1.75rem;
            font-weight: bold;
            margin-left: 1rem;
            color: var(--sys-color-dark-1);
        }

    .container-titulo .area-opcoes {
    }

@media (max-width: 991px) { /*lg*/

    .container-titulo {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
        background-color: var(--sys-color-menu-2);
        align-items: baseline;
    }

        .container-titulo .area-titulo {
            height: 1.5rem;
        }

            .container-titulo .area-titulo .botao-voltar {
                margin-top: 0.25rem;
            }

                .container-titulo .area-titulo .botao-voltar .b-web {
                    display: none;
                }

                .container-titulo .area-titulo .botao-voltar .b-cel {
                    display: unset;
                }

            .container-titulo .area-titulo .titulo {
                font-size: 1.25rem;
                font-weight: 500;
                color: #fff;
            }
}

/* #endregion */

.sys-clicavel {
    cursor: pointer;
}

    .sys-clicavel:hover {
        background-color: var(--sys-color-hover);
    }

.sys-chip {
    margin: 4px;
    border-radius: 12px;
    background-color: #e0e0e0;
    color: rgba(0,0,0,.87);
    height: 30px;
    font-size: 14px;
    position: relative;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 12px;
    border-width: 0;
    outline: none;
}

.sys-list-group-item-clicavel {
    cursor: pointer;
}

    .sys-list-group-item-clicavel:hover {
        filter: brightness(95%);
    }

/* #region BOTOES */

.sys-icon-button {
    color: var(--sys-color-dark-2);
    padding: 0.15rem 0.75rem;
    font-size: 16px;
    cursor: pointer;
}

    .sys-icon-button:hover {
        background-color: var(--sys-color-btn-hover);
    }

@media (max-width: 991px) { /*lg*/
    .sys-icon-button {
        padding: 0 0.35rem;
    }
}

/* #endregion */

/* #region CORES */

.sys-bg-light-1 {
    background-color: var(--sys-color-light-1) !important;
}

.sys-bg-light-2 {
    background-color: var(--sys-color-light-2) !important;
}

.sys-bg-light-3 {
    background-color: var(--sys-color-light-3) !important;
}

.sys-bg-light-4 {
    background-color: var(--sys-color-light-4) !important;
}

.sys-bg-light-5 {
    background-color: var(--sys-color-light-5) !important;
}

.sys-bg-dark-1 {
    background-color: var(--sys-color-dark-1) !important;
}

.sys-bg-dark-2 {
    background-color: var(--sys-color-dark-2) !important;
}

.sys-bg-dark-3 {
    background-color: var(--sys-color-dark-3) !important;
}

.sys-bg-dark-4 {
    background-color: var(--sys-color-dark-4) !important;
}

.sys-fg-dark-1 {
    color: var(--sys-color-dark-1) !important;
}

.sys-fg-dark-2 {
    color: var(--sys-color-dark-2) !important;
}

.sys-fg-dark-3 {
    color: var(--sys-color-dark-3) !important;
}

.sys-fg-dark-4 {
    color: var(--sys-color-dark-4) !important;
}

/* #endregion */

/* #region CONTAINER */

.sys-container-fullhd {
    width: 100%;
    padding-right: var(--bs-gutter-x, 0.75rem);
    padding-left: var(--bs-gutter-x, 0.75rem);
    margin-right: auto;
    margin-left: auto;
}

@media (max-width: 991px) { /*lg*/
    .sys-container-fullhd {
        width: 100%;
        padding: 0;
    }
}

@media (min-width: 1921px) {
    .sys-container-fullhd {
        max-width: var(--sys-container-max-width);
    }
}

/* #endregion */

.sys-modal-alto .modal-content {
    min-height: 75vh;
}

.required-asterisk:after {
    content: " *";
    color: red;
    font-weight: bold;
}

.small-marks {
    font-size: 0.625rem;
}

    .small-marks *:not(:last-child):after {
        content: " \2022";
        margin: 0 0.25rem;
        font-weight: normal;
    }


/* #region TELAS DE ERRO */

.sys-error-area {
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(100vh - 80px);
}

    .sys-error-area .error-icone {
        font-size: 16rem;
    }

        .sys-error-area .error-icone.erro {
            color: var(--sys-color-dark-2) !important;
        }

        .sys-error-area .error-icone.acesso {
            color: #f44336 !important;
        }

    .sys-error-area .error-texto {
        color: var(--sys-color-dark-1) !important;
        font-size: 3rem;
    }

@media (max-width: 991px) { /*lg*/

    .sys-error-area .error-icone {
        font-size: 10rem;
    }

    .sys-error-area .error-texto {
        font-size: 2rem;
    }
}

/* #endregion */

/* #region ANIMATIONS */
@keyframes adm-fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.9;
    }
}

@keyframes adm-spin360 {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.sys-animations-fadein {
    animation: adm-fadein 0.5s;
}

/* #region TELA DE LOADING */

#loading-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sys-loading-bg);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
    opacity: 0.9;
    pointer-events: none;
    animation: adm-fadein 1s;
}

    #loading-splash .container {
        text-align: center;
    }

        #loading-splash .container i {
            font-size: 4rem !important;
            color: var(--sys-loading-fg);
            animation: adm-spin360 2s linear infinite;
        }

        #loading-splash .container .message {
            font-size: 1.5rem;
            color: var(--sys-loading-fg);
            margin-top: 1rem;
        }

/* #endregion */

/* #region Vue.js */

[v-cloak] > * {
    display: none;
}

.ext-component-loading {
    pointer-events: none;
    position: relative;
}

    .ext-component-loading:before {
        content: "Carregando dados..";
        background-repeat: no-repeat;
        background-position: center 30%;
        background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
        position: absolute;
        top: 5rem;
        left: 0;
        right: 0;
        margin-left: auto;
        margin-right: auto;
        width: 300px;
        height: 100px;
        text-align: center;
        z-index: 100;
        background-color: var(--sys-color-base);
        border: 1px solid var(--bs-border-color);
        border-radius: 10px;
        padding: 50px 0;
    }

    .ext-component-loading * {
        opacity: 0.9;
        filter: blur(5px);
        cursor: wait !important;
    }

/* #endregion */

/* #region SPLASH Message */

@keyframes kf-splash {
    0% {
        opacity: 0;
    }

    25% {
        opacity: 1;
    }

    75% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.splash-message {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--sys-color-dark-2);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1050;
    pointer-events: none;
    animation: kf-splash 1.5s forwards;
}

    .splash-message .container {
        text-align: center;
        pointer-events: none;
    }

        .splash-message .container img {
            height: 30vh;
        }

        .splash-message .container .message {
            font-size: 4.5rem;
            line-height: 5.5rem;
            font-weight: bold;
            color: var(--sys-color-dark-3);
            margin-top: 1rem;
        }

@media (max-width: 575px) { /*sm*/
    .splash-message .container img {
        height: 25vh;
    }

    .splash-message .container .message {
        font-size: 3rem;
        line-height: 3.75rem;
        margin-top: 1rem;
    }
}

/* #endregion */