@font-face {
    font-family: 'helvetica-neue';
    src: url('../res/fonts/helvetica-neue.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Light';
    src: url('../res/fonts/Roboto-Light.ttf') format('truetype');
}

@font-face {
    font-family: 'Roboto-Regular';
    src: url('../res/fonts/Roboto-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'segoe-ui';
    src: url('../res/fonts/segoe-ui.otf') format('opentype');
}

@font-face {
    font-family: 'fa-brands-400';
    src: url('../res/plugins/awesome/webfonts/fa-brands-400.woff2') format('woff2'), url('../res/plugins/awesome/webfonts/fa-brands-400.eot') format('embedded-opentype'), url('../res/plugins/awesome/webfonts/fa-brands-400.ttf') format('truetype'), url('../res/plugins/awesome/webfonts/fa-brands-400.woff') format('woff');
}

@font-face {
    font-family: 'fa-regular-400';
    src: url('../res/plugins/awesome/webfonts/fa-regular-400.eot') format('embedded-opentype'), url('../res/plugins/awesome/webfonts/fa-regular-400.ttf') format('truetype'), url('../res/plugins/awesome/webfonts/fa-regular-400.woff') format('woff'), url('../res/plugins/awesome/webfonts/fa-regular-400.woff2') format('woff2');
}

@font-face {
    font-family: 'fa-solid-900';
    src: url('../res/plugins/awesome/webfonts/fa-solid-900.eot') format('embedded-opentype'), url('../res/plugins/awesome/webfonts/fa-solid-900.ttf') format('truetype'), url('../res/plugins/awesome/webfonts/fa-solid-900.woff') format('woff'), url('../res/plugins/awesome/webfonts/fa-solid-900.woff2') format('woff2');
}

@font-face {
    font-family: 'Nunito';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: local('Nunito Italic'), local('Nunito-Italic'), url('../res/fonts/Nunito-Italic.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: local('Nunito Regular'), local('Nunito-Regular'), url('../res/fonts/Nunito.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: local('Nunito Bold'), local('Nunito-Bold'), url('../res/fonts/Nunito-Bold.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Nunito';
    font-style: normal;
    font-weight: 900;
    font-display: swap;
    src: local('Nunito Black'), local('Nunito-Black'), url('../res/fonts/Nunito-Black.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@keyframes roll {
    0% {
        transform: rotate(0deg);
    }

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

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes jump {
    0% {
        margin-top: 0;
    }

    50% {
        margin-top: -.75rem;
    }

    100% {
        margin-top: 0;
    }
}

:root {
    --main-font: Nunito;
    --input-font: Roboto-Regular;
    --about-sys-idiomas-pt: url("../custom/imgs/logo_brasil_alt.png");
    --about-sys-idiomas-en: url("../custom/imgs/logo_usa_alt.png");
    --about-sys-idiomas-es: url("../custom/imgs/logo_espanha_alt.png");
}

body,
html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: #FAFAFA;
    font-family: var(--main-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

*,
::after,
::before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent;
}

body.start>* {
    display: none;
}

.block-window {
    background: rgba(150, 150, 150, 0.2);
    backdrop-filter: blur(3px);
    z-index: 998;
}

.load-window {
    border: 2px solid rgba(255, 255, 255, .5);
    border-top: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    animation: roll 1s linear infinite;
    z-index: 999;
}

.load-ext-auth {
    border: 2px solid rgba(150, 150, 150, .25);
    border-top: 2px solid rgba(243, 77, 16, 1);
    border-radius: 50%;
    animation: roll 1s linear infinite;
    width: 48px;
    height: 48px;
    margin: 0;
}

.popup-window {
    border-radius: .2rem;
}

.close-popup {
    margin: -.1rem 0 0 0;
    font-size: 2rem;
    padding: 0;
    padding-right: .6rem;
    display: inline-block;
    text-align: right;
    position: absolute;
    right: 0;
    z-index: 1;
    margin-top: .05rem;
}

.close-popup>b {
    cursor: pointer;
    width: 1.5rem;
    text-align: center;
    font-size: 1.5rem;
    color: #888;
}

.soft-block {
    background: #fff;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.01;
    display: block;
    z-index: 9999999999;
}

.partial-block {
    background: rgba(150, 150, 150, 0.2);
    backdrop-filter: blur(6px);
    position: absolute;
}

.partial-block>span {
    display: block;
    text-align: center;
    color: #f34646;
    font-weight: 600;
}

.partial-block>span.fa {
    font-size: 4rem;
    margin-top: 30vh;
    margin-bottom: 1rem;
}

.partial-block>span:last-child {
    padding: 0 20%;
}

header {
    background-color: #353535;
    height: 3.5rem;
    width: calc(100% - 48px);
    transition: width .25s;
    overflow: hidden;
}

.logo {
    display: inline-block;
    background-image: var(--main-sys-logo);
    background-repeat: no-repeat;
    background-size: contain;
    height: 28px;
    margin-top: .75rem;
    margin-left: 1rem;
    width: 165px;
    margin-right: 1.5rem;
}

.logo-idiomas {
    display: inline-block;
    background-image: var(--about-sys-logo-idiomas);
    background-repeat: no-repeat;
    background-size: contain;

    margin-top: 20px;
    margin-left: 1rem;
    width: 1.5rem;
    margin-right: 1.5rem;
}

.idiomas-pt {
    display: inline-block;
    background-image: var(--about-sys-idiomas-pt);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0.5rem 0 0 0.5rem !important;
    width: 2.5rem;
    height: 1.5rem !important;
    cursor: pointer;
}

.idiomas-en {
    display: inline-block;
    background-image: var(--about-sys-idiomas-en);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0.5rem 0 0 0.5rem !important;
    width: 2.5rem;
    height: 1.5rem !important;
    cursor: pointer;
}

.idiomas-es {
    display: inline-block;
    background-image: var(--about-sys-idiomas-es);
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0.5rem 0 0 0.5rem !important;
    width: 2.5rem;
    height: 1.5rem !important;
    cursor: pointer;
}

.auth-logo {
    display: inline-block;
    background-image: var(--login-sys-logo);
    background-repeat: no-repeat;
    background-size: contain;
    height: 28px;
    margin-top: .75rem;
    margin-left: 1rem;
    width: 165px;
    margin-right: 1.5rem;
}

.header-opt {
    font-size: 1.4rem;
    color: #f5f5f5;
    display: inline-block;
    float: right;
    padding: .95rem .4rem .55rem .4rem;
    margin-right: .5rem;
    cursor: pointer;
    vertical-align: top;
    transition: opacity .2s;
}

.header-opt-idioma {
    color: #f5f5f5;
    display: inline-block;
    float: right;
    padding: .95rem .4rem .55rem .4rem;
    margin-right: .5rem;
    margin-top: 1.3rem !important;
    cursor: pointer;
    vertical-align: top;
    transition: opacity .2s;
}

.header-opt-idioma:hover {
    opacity: .85;
}

.header-opt-idioma .fa-chevron-down {
    display: inline-block;
    float: right;
    margin-left: 1rem;
    font-size: .5rem;
    padding-top: .1rem;
}

.opt-left {
    float: initial;
    padding: .65rem .4rem .8rem .4rem;
    margin-right: 1rem;
}

.opt-left>.fa {
    font-size: .9rem !important;
}

.opt-text {
    font-size: .78rem;
    font-family: var(--main-font);
    font-weight: 600;
    margin-left: .75rem;
    display: inline-block;
    vertical-align: top;
    padding-top: .05rem;
    outline: none;
}

.opt-text-idioma-pt {
    font-size: .68rem;
    font-family: var(--main-font);
    font-weight: 600;
    margin-left: -.15rem;
    display: inline-block;
    vertical-align: top;
    padding-top: .05rem;
    outline: none;
}

.opt-text-idioma-en {
    font-size: .68rem;
    font-family: var(--main-font);
    font-weight: 600;
    margin-left: -.5rem;
    display: inline-block;
    vertical-align: top;
    padding-top: .05rem;
    outline: none;
}

.opt-text-idioma-pt-li {
    font-size: .68rem;
    font-family: var(--main-font);
    font-weight: 600;
    margin-left: 100px;
    display: inline-block;
    vertical-align: top;
    padding-top: .05rem;
    outline: none;
    white-space: nowrap;
}

.opt-text-idioma-en-li {
    font-size: .68rem;
    font-family: var(--main-font);
    font-weight: 600;
    margin-left: 100px;
    display: inline-block;
    vertical-align: top;
    padding-top: .05rem;
    outline: none;
    white-space: nowrap;
}

.opt-text-idioma-es-li {
    font-size: .68rem;
    font-family: var(--main-font);
    font-weight: 600;
    margin-left: 100px;
    display: inline-block;
    vertical-align: top;
    padding-top: .05rem;
    outline: none;
    white-space: nowrap;
}

header .fa-user-circle {
    font-size: 2rem !important;
}

header .user {
    padding: .8rem .4rem .7rem .4rem;
}

.about-popup {
    padding: 1rem;
    text-align: center;
}

.a5-logo {
    height: 32px;
    width: 56px;
    display: inline-block;
    background-image: var(--about-owner-logo);
    background-repeat: no-repeat;
    background-size: cover;
}

.so-logo {
    height: 28px;
    width: 165px;
    display: inline-block;
    background-image: var(--about-sys-logo);
    background-repeat: no-repeat;
    background-size: cover;
}

.about-popup>p {
    font-size: .75rem;
    text-align: left;
}

.about-popup>p>span {
    display: inline-block;
    margin-bottom: .4rem;
    font-weight: 600;
}

.about-popup>p>span+span {
    margin-left: .4rem;
    font-weight: 100;
}

.copy-footer,
.owner-address {
    margin-bottom: 0 !important;
}

.copy-footer:after {
    content: var(--about-owner-footer);
    font-weight: 100;
    line-height: 0;
}

.owner-address:after {
    content: var(--about-owner-address);
    font-weight: 100;
    line-height: 0;
}

.abt-link>a {
    color: #5486a9;
    text-decoration: none;
    transition: color .2s;
}

.abt-link>a:hover,
.abt-link>a:focus,
.abt-link>a:active {
    color: #2a5471;
}

.cookie-use {
    font-size: .75rem;
    text-align: left;
    padding: .5rem 1rem;
}

.cookie-use>input[type=checkbox] {
    display: inline-block;
    width: 1rem;
}

.cookie-use>label {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 2rem);
    color: #999;
}

.greetings {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0));
    backdrop-filter: blur(10px);
    width: 100%;
    position: absolute;
    height: 100%;
    padding: 1rem 1rem 1rem 4rem;
}

.greetings .g-logo {
    background-image: url("../res/imgs/logoMini2.png");
    background-repeat: no-repeat;
    background-size: contain;
    height: 2.25rem;
    width: auto;
    margin-top: 3rem;
}

.header-opt:hover {
    opacity: .85;
}

.header-opt .fa-chevron-down {
    display: inline-block;
    float: right;
    margin-left: 1rem;
    font-size: .5rem;
    padding-top: .1rem;
}

#userMenuConfigs {
    transition: color .2s;
}

#userMenuConfigs:hover {
    color: #F04E23;
}

#idioma:hover {
    transition: color .2s;
}

.user-data {
    border-bottom: 1px solid #444;
    pointer-events: none;
}

.user-data>span {
    font-size: .6rem;
    display: block;
    opacity: .75;
}

.user-data>span:first-child {
    font-size: .95rem;
    display: inline-block;
    opacity: 1;
}

.user-data>span:nth-child(2) {
    opacity: .9;
    font-size: .75rem;
}

.user-idioma {
    border-bottom: 1px solid rgb(197, 25, 25);
    pointer-events: none;
}

.user-idioma>span {
    font-size: .6rem;
    display: block;
    opacity: .75;
}

.user-idioma>span:first-child {
    font-size: .95rem;
    display: inline-block;
    opacity: 1;
}

.user-idioma>span:nth-child(2) {
    opacity: .9;
    font-size: .75rem;
}

.upper-sep {
    border-top: 1px solid #444;
}

.bottom-sep {
    border-bottom: 1px solid #444;
}

.lateral-menu {
    width: 200px;
    height: calc(100% - 3.5rem);
    position: absolute;
    left: 0;
    background: #fff;
    box-shadow: 0 0 4px #ccc;
    z-index: 1;
    vertical-align: top;
    transition: width 0.3s ease, left 0.3s ease;
}

.site-container {
    margin-left: 200px;
    vertical-align: top;
    margin-right: 50px;
    transition: margin-right .25s, margin-left 0.3s ease;
}

.chat-module {
    width: 48px;
    height: 100%;
    position: fixed;
    right: 0;
    top: 0;
    background: rgba(150, 150, 150, 0.2);
    box-shadow: 0px 0px 6px #eee;
    border-left: 1px solid #ddd;
    z-index: 2;
    vertical-align: top;
    transition: width .25s;
}

.chat-module>div {
    position: relative;
    height: calc(100% - 50px);
    /*width:100%;*/
}

.sc-contracted {
    margin-right: 0;
}

.sc-nochat {
    margin-right: initial;
}

.cm-expanded {
    width: 256px;
}

.page-body {
    margin: 0;
    padding: 0;
    overflow: auto;
}

.hd-contracted {
    width: calc(100% - 256px);
}

.hd-nochat {
    width: 100%;
}

.pu-title {
    margin: 0;
    padding: .8rem .6rem .6rem .6rem;
    border-bottom: 1px solid #eee;
    color: #464646;
    font-weight: 100;
}

.pu-title-center {
    margin: 0;
    padding: .8rem .6rem .6rem .6rem;
    border-bottom: 1px solid #eee;
    color: #464646;
    font-weight: 100;
    text-align: center;
}

.acc-inf {
    font-size: .85rem;
    padding: .5rem;
}

.acc-input {
    width: 50%;
    margin: 0 25%;
    text-align: center;
    font-family: var(--input-font);
    padding: .3rem;
    font-size: 1.5rem;
    line-height: 1rem;
    outline: none;
    border: 1px solid #ddd;
    border-radius: .2rem;
}

input.acc-input:-webkit-autofill {
    font-family: var(--input-font);
    font-size: 1.5rem;
}

.acc-btn {
    background-color: #5fa2d0 !important;
    color: #fff !important;
}

.generic-alert {
    position: absolute;
    bottom: -500px;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
}

.alert-text {
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    padding: .75rem 2rem .75rem .75rem;
    margin-left: calc(100% - 384px);
    margin-right: .5rem;
    border-radius: .4rem;
    pointer-events: auto !important;
}

.al-error>p {
    background-color: #f34646;
}

.al-success>p {
    background-color: #67c472;
}

.al-alert>p {
    background-color: #ed8557;
}

.al-info>p {
    background-color: #5fa2d0;
}

.generic-alert .close {
    display: inline-block;
    color: #fff;
    position: absolute;
    font-size: 1.35rem;
    margin-top: .75rem;
    right: 1rem;
    cursor: pointer;
    pointer-events: auto !important;
}

.title {
    margin: 0;
    width: 100%;
    padding: .8rem;
    border-bottom: 1px solid #eee;
    color: #242424;
    font-weight: 100;
    background-color: #fff;
    box-shadow: 0 0 2px #eee;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.card {
    background: #fff;
    padding: .5rem;
    border-radius: .1rem;
    box-shadow: 0 0 2px #eee;
    margin: .5rem;
    position: relative;
}

.title-more-buttom {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    background-color: #fff;
    box-shadow: 0 0 2px #eee;
}

.left-title {
    margin: 0;
    width: 100%;
    padding: .8rem;
    color: #242424;
    font-weight: 100;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.right-button {
    margin-top: 0 !important;
    padding: 0 !important;
    margin-right: 26px;
    cursor: pointer;
}

.title-help {
    display: inline-block;
    color: #5fa2d0;
    font-size: 1rem;
    margin-left: .25rem;
    cursor: pointer;
    opacity: .65;
    transition: opacity .2s;
    width: 1.1rem;
    height: 1.1rem;
}

.title-help:hover {
    opacity: 1;
}

.title-help>span {
    margin-top: -.1rem;
    position: absolute;
}

.card-title {
    margin: 0;
    padding: 0 .6rem .6rem .6rem;
    color: #464646;
    font-weight: 100;
}

.card-title2 {
    margin: 0 0 .6rem 0;
    padding: .2rem 0 .4rem 0;
    border-bottom: 1px solid #f0f0f0;
    color: #6587b6;
}

.card-text {
    font-size: .75rem;
    color: #aaa;
}

.multi-cards {
    display: table;
    margin: .25rem;
    padding: 0;
    width: calc(100% - .5rem);
    table-layout: fixed;
}

.multi-cards>div {
    display: table-cell;
    margin: 0;
    padding: 0;
    vertical-align: top;
}

.multi-cards .card {
    margin: .25rem;
}

.counter-card {
    display: table-cell;
    overflow: hidden;
    vertical-align: top;
}

.counter-cardh {
    display: inline-block !important;
    overflow: hidden;
    vertical-align: top;
    width: 100%
}

.counter-card:first-child {
    padding-left: .2rem;
}

.counter-cardh:first-child {
    padding-left: 0;
}

.counter-card:last-child {
    padding-right: .2rem;
}

.counter-cardh:last-child {
    padding-right: 0;
}

.counter-card>.ct-container {
    height: 48px;
    background-color: #fff;
    border: 1px solid #F7F7F7;
    overflow: hidden;
    display: block;
    border-left: 4px solid #bbb;
    margin: 0 .5rem;
}

.counter-cardh>.ct-container {
    margin: .05rem 0;
}

.counter-card:first-child>.ct-container {
    margin-left: 0;
}

.counter-card:last-child>.ct-container {
    margin-right: 0;
}

.counter-card>.ct-container>span:nth-child(1) {
    font-size: 48px;
    display: block;
    float: right;
    margin-top: .5rem;
    margin-right: -.75rem;
    color: #eee;
}

.counter-card>.ct-container>span:nth-child(2) {
    font-size: .6rem;
    display: block;
    margin-left: 1rem;
    margin-top: .5rem;
    color: #aaa;
}

.counter-card>.ct-container>span:nth-child(3) {
    font-size: 1.5rem;
    display: block;
    margin-left: 1rem;
    line-height: 1.3rem;
    color: #888;
}

.chart-title {
    margin: 0 0 .6rem 0;
    padding: .2rem 0 .4rem 0;
    border-bottom: 1px solid #f0f0f0;
    color: #6587b6;
}

.legends>div {
    font-size: .65rem;
}

.legends>div>.fa {
    margin-right: .2rem;
}

.chart-container {
    width: 100%;
    overflow: hidden;
}

.login-card {
    position: absolute !important;
    width: 384px;
    top: calc(50% - 8px);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    left: calc(50% - 192px);
    text-align: center;
    border-radius: 1rem;
}

.pass-strenght {
    width: calc(100% - 2rem);
    height: .25rem;
    background: #eee;
    margin-left: 1rem;
    display: flex;
    flex-direction: row;
}

.pass-strenght>div:nth-child(1) {
    width: 20%;
    background: linear-gradient(to right, #c31e00, #eb4636);
}

.pass-strenght>div:nth-child(2) {
    width: 20%;
    background: linear-gradient(to right, #eb4636, #eb8936);
}

.pass-strenght>div:nth-child(3) {
    width: 20%;
    background: linear-gradient(to right, #eb8936, #e2c726);
}

.pass-strenght>div:nth-child(4) {
    width: 20%;
    background: linear-gradient(to right, #e2c726, #53d32e);
}

.pass-strenght>div:nth-child(5) {
    width: 20%;
    background: linear-gradient(to right, #53d32e, #2f9b10);
}

.pass-strenght>span {
    font-size: .75rem;
    color: #888;
    position: absolute;
    margin-top: .25rem;
    left: 50%;
    transform: translateX(-50%);
}

.btn {
    font-family: segoe-ui;
    font-size: .65rem;
    height: 33px;
    text-transform: uppercase;
    padding: .55rem 1rem !important;
    border: 0;
    border-radius: .2rem;
    margin: .55rem 0.2rem;
    transition: filter .2s;
    outline: 0;
    opacity: .9;
    transition: opacity .2s, background .2s;
    vertical-align: top;
    cursor: pointer;
}

.btn:hover,
button:active,
button:focus {
    opacity: 1;
}

.btn-blue {
    background-color: #5fa2d0 !important;
    color: #fff !important;
}

.btn-red {
    background-color: #f34646 !important;
    color: #fff !important;
}

.btn-orange {
    background-color: #ed8557 !important;
    color: #fff !important;
}

.btn-satan-orange {
    background-color: #F04E23 !important;
    color: #fff !important;
}

.btn-green {
    background-color: #67c472 !important;
    color: #fff !important;
}

.btn-gray {
    background-color: #C9CBCF !important;
    color: #222 !important;
}

.btn-load {
    display: inline-block;
    vertical-align: top;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    animation: roll 1s linear infinite;
}

.btn-gray .btn-load {
    border: 2px solid rgba(34, 2, 0, .5);
    border-top: 2px solid rgba(34, 2, 0, 1);
}

.btn-fixed {
    width: 84px;
}

.btn-fixed-extended {
    width: 150px;
}

.btn-load {
    display: inline-block;
    vertical-align: top;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top: 2px solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    animation: roll 1s linear infinite;
}

.popup-btn-area {
    text-align: center;
    padding: .75rem 0.5rem;
    border-top: 1px solid #eee;
    margin-top: 1rem;
}

.popup-btn-area>.btn {
    margin: 0;
}

.btn:disabled {
    background-color: rgba(200, 200, 200, .5) !important;
    color: #fff !important;
    opacity: 1;
}

.frm-field {
    display: inline-block;
    margin: .5rem;
    vertical-align: top;
    width: 128px;
}

.frm-field>label:first-child {
    display: block;
    font-size: .75rem;
    padding-left: .1rem;
    text-align: left;
    color: #888;
}

.frm-field>input[type="text"] {
    background: #fff;
    font-family: var(--input-font);
    font-size: .8rem;
    padding: .5rem .3rem;
    border: 1px solid #ccc;
    border-radius: .2rem;
    width: 100%;
    outline: 0;
}

.frm-field>input[type="text"]:hover,
.frm-field>input[type="text"]:focus,
.frm-field>input[type="text"]:active {
    background: #fff;
    color: #464646;
    border: 1px solid #ccc;
}

.frm-field>input[type="text"]:focus,
.frm-field>input[type="text"]:active {
    box-shadow: 0 2px 4px #e0e0e0;
    border: 1px solid #ccc;
}

.frm-field>input[type="text"]:disabled {
    opacity: .5;
    box-shadow: initial !important;
}

.frm-field>textarea {
    background: #fff;
    font-family: var(--input-font);
    font-size: .8rem;
    padding: .4rem .4rem;
    border: 1px solid #ccc;
    border-radius: .2rem;
    width: 100%;
    outline: 0;
    resize: none;
}

.frm-field>textarea:hover,
.frm-field>textarea:focus,
.frm-field>textarea:active {
    background: #fff;
    color: #464646;
    border: 1px solid #ccc;
}

.frm-field>textarea:focus,
.frm-field>textarea:active {
    box-shadow: 0 2px 4px #e0e0e0;
    border: 1px solid #ccc;
}

.frm-field>textarea:disabled {
    opacity: .5;
    box-shadow: initial !important;
}

.frm-field>input[type="password"] {
    background: #fff;
    font-family: var(--input-font);
    font-size: .8rem;
    padding: .5rem .3rem;
    border: 1px solid #ccc;
    border-radius: .2rem;
    width: 100%;
    outline: 0;
}

.frm-field>input[type="password"]:hover,
.frm-field>input[type="text"]:focus,
.frm-field>input[type="text"]:active {
    background: #fff;
    color: #464646;
    border: 1px solid #ccc;
}

.frm-field>input[type="password"]:focus,
.frm-field>input[type="text"]:active {
    box-shadow: 0 2px 4px #e0e0e0;
    border: 1px solid #ccc;
}

.frm-field>input[type="password"]:disabled {
    opacity: .5;
    box-shadow: initial !important;
}

.frm-field>input[type="date"] {
    background: #fff;
    font-family: var(--input-font);
    font-size: .8rem;
    padding: .5rem .2rem .45rem .3rem;
    border: 1px solid #ccc;
    border-radius: .2rem;
    width: calc(100% + .5rem);
    outline: 0;
}

.frm-field>input[type="date"]:hover,
.frm-field>input[type="text"]:focus,
.frm-field>input[type="text"]:active {
    background: #fff;
    color: #464646;
    border: 1px solid #ccc;
}

.frm-field>input[type="date"]:focus,
.frm-field>input[type="text"]:active {
    box-shadow: 0 2px 4px #e0e0e0;
    border: 1px solid #ccc;
}

.frm-field>input[type="date"]:disabled {
    opacity: .5;
    box-shadow: initial !important;
}

.frm-field>input[type="datetime-local"] {
    background: #fff;
    font-family: var(--input-font);
    font-size: .8rem;
    padding: .41rem .3rem;
    border: 1px solid #ccc;
    border-radius: .2rem;
    width: 100%;
    outline: 0;
}

.frm-field>input[type="datetime-local"]:hover,
.frm-field>input[type="text"]:focus,
.frm-field>input[type="text"]:active {
    background: #fff;
    color: #464646;
    border: 1px solid #ccc;
}

.frm-field>input[type="datetime-local"]:focus,
.frm-field>input[type="text"]:active {
    box-shadow: 0 2px 4px #e0e0e0;
    border: 1px solid #ccc;
}

.frm-field>input[type="datetime-local"]:disabled {
    opacity: .5;
    box-shadow: initial !important;
}

.frm-field>input[type="time"] {
    background: #fff;
    font-family: var(--input-font);
    font-size: .8rem;
    padding: .41rem 0 .41rem .3rem;
    border: 1px solid #ccc;
    border-radius: .2rem;
    width: 100%;
    outline: 0;
}

.frm-field>input[type="time"]:hover,
.frm-field>input[type="text"]:focus,
.frm-field>input[type="text"]:active {
    background: #fff;
    color: #464646;
    border: 1px solid #ccc;
}

.frm-field>input[type="time"]:focus,
.frm-field>input[type="text"]:active {
    box-shadow: 0 2px 4px #e0e0e0;
    border: 1px solid #ccc;
}

.frm-field>input[type="time"]:disabled {
    opacity: .5;
    box-shadow: initial !important;
}

.frm-field>input[type="file"] {
    background: #fff;
    font-family: var(--input-font);
    font-size: .8rem;
    padding: .3rem .3rem;
    border: 1px solid #ccc;
    border-radius: .2rem;
    width: 100%;
    outline: 0;
}

.frm-field>input[type="file"]:hover,
.frm-field>input[type="text"]:focus,
.frm-field>input[type="text"]:active {
    background: #fff;
    color: #464646;
    border: 1px solid #ccc;
}

.frm-field>input[type="file"]:focus,
.frm-field>input[type="text"]:active {
    box-shadow: 0 2px 4px #e0e0e0;
    border: 1px solid #ccc;
}

.frm-field>input[type="file"]:disabled {
    opacity: .5;
    box-shadow: initial !important;
}

.frm-field>input[type="checkbox"]+label {
    font-size: .75rem;
    margin: 0;
    vertical-align: top;
    padding-top: .15rem;
    display: inline-block;
    cursor: pointer;
}

.frm-field>input[type="checkbox"]:disabled+label {
    opacity: .5;
}

.frm-field>span.readonly {
    display: inline-block;
    font-family: var(--input-font);
    font-size: .8rem;
    padding-left: .2rem;
    word-break: break-word;
}

.frm-field .hint {
    display: inline-block;
    vertical-align: top;
    color: #5fa2d0;
    cursor: pointer;
    margin-left: .2rem;
}

.frm-field>input:-webkit-autofill {
    font-family: var(--input-font);
    font-size: .8rem;
}

.frm-field>select[multiple] {
    height: 34px;
}

.frm-field-with-icon>input {
    padding-right: 2.5rem !important;
}

.frm-field-with-icon>input+span {
    display: inline-block;
    float: right;
    position: absolute;
    margin-left: -2.25rem;
    width: 36px;
    border-left: 1px solid #eee;
    padding: .47rem;
    color: #ddd;
}

.frm-field-with-icon>.action {
    cursor: pointer;
}

.hint-general {
    display: inline-block;
    vertical-align: top;
    color: #5fa2d0;
    cursor: pointer;
    margin-left: .2rem;
}


.frm-popup-alert {
    color: #f34646;
    font-size: .75rem;
    font-weight: 600;
    width: calc(100% - 1rem);
    text-align: center;
    margin-top: 1rem;
    padding: 0 .5rem;
}

.new-frm-popup-alert {
    color: #f34646;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    margin-top: 1rem;
    padding: 0 .5rem;
}

.frm-popup-success {
    color: forestgreen;
    font-size: .75rem;
    font-weight: 600;
    width: calc(100% - 1rem);
    text-align: center;
    margin-top: 1rem;
    padding: 0 .5rem;
}

.frm-popup-qrcode {
    display: flex;
    flex-direction: column;
    align-items: center
}

.frm-popup-qrcode-simple-text {
    color: #464646;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0px;
}

/* Separador do popup sobre */
.about-separator {
    display: block;
    border: 0;
    border-top: 1px solid #eee;
    margin: 0;
}

.fld-tn {
    width: 96px;
}

.fld-sm {
    width: 128px;
}

.fld-md {
    width: 256px;
}

.fld-lg {
    width: 532px;
}

.fld-full {
    width: calc(100% - 2rem);
}

.fld-half {
    width: calc(50% - 2rem);
}

.fld-full-pu {
    width: calc(100% - 2rem);
    margin-left: 1rem;
}

.fld-dt {
    width: 180px;
}

.fld-center {
    text-align: center;
}

.fld-right {
    float: right;
    margin-right: .5rem;
}

.fld-left {
    float: left;
    margin-left: .5rem;
}

.sys-combo-box {
    display: none;
    background: #fff;
    vertical-align: top;
    padding: .4rem;
    border-radius: .2rem;
    font-family: var(--input-font);
    font-size: .8rem;
    font-weight: bold;
    color: #464646;
    border: 1px solid #ccc;
    outline: 0;
}

.sys-combo-box-desk {
    display: inline-block;
}

.ui-selectmenu-button {
    width: 100% !important;
    background: #fff;
    vertical-align: top;
    padding: .4rem;
    border-radius: .2rem;
    font-family: var(--input-font);
    font-weight: bold;
    color: #464646;
    border: 1px solid #ccc;
    outline: 0;
    font-size: .8rem;
}

.ui-selectmenu-button:hover,
.ui-selectmenu-button:focus,
.ui-selectmenu-button:active {
    background: #fff;
    font-weight: bold;
    color: #464646;
    border: 1px solid #ccc;
}

.ui-selectmenu-button:focus,
.ui-selectmenu-button:active {
    box-shadow: 0 2px 4px #e0e0e0;
    border: 1px solid #ccc;
}

.ui-selectmenu-text {
    padding-top: 2px;
    min-width: 100px
}

.ui-selectmenu-disabled {
    opacity: .5;
}

.ui-menu[role="listbox"] {
    border-radius: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    margin-top: 2.2rem;
    padding-bottom: 6px;
    border: 1px solid #ccc;
    border-top: 0;
    max-height: 200px;
    overflow-x: hidden;
    overflow-y: auto;
}

.menu-up.ui-menu[role="listbox"] {
    border-radius: 6px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top: 1px solid #ccc;
    border-bottom: 0;
    margin-top: -.6rem;
}

.ui-menu[role="listbox"]>li {
    font-family: var(--input-font);
    color: #464646;
    font-size: .8rem;
}

.ui-menu[role="listbox"]>li>div {
    padding: .4rem;
    margin: 0;
    transition: background .15s;
}

.ui-menu[role="listbox"] .ui-state-active[role="option"] {
    background: #F04E23;
    color: #FFFFFF;
    border: 0;
}

.ui-front {
    z-index: 99999;
}

.search-container {
    position: absolute;
    background-color: #fff;
    width: calc(100% + 1.25rem);
    border: 1px solid #ccc;
    border-top: 0;
    border-bottom: 0;
    margin-top: -4px;
}

.combo-search {
    background-color: #fff;
    width: calc(100% - .4rem);
    font-family: var(--input-font);
    color: #464646;
    outline: 0;
    padding: .5rem;
    margin: .2rem;
    border-radius: .2rem;
    font-size: .8rem;
    border: 1px solid #ccc;
    transition: all .15s;
}

.combo-search:focus {
    border: 1px solid #ccc;
}

.chosen-container>ul {
    background: #fff !important;
    font-family: var(--input-font);
    font-size: .8rem !important;
    padding: .2rem .4rem .1rem .4rem !important;
    border: 1px solid #c3d2d9 !important;
    border-radius: 4px;
    outline: 0;
    color: #284653;
    width: 100%;
}

.chosen-container .chosen-results li {
    font-family: var(--input-font);
    font-size: .8rem !important;
}

.chosen-container .chosen-results li.no-results {
    font-family: var(--input-font);
    font-size: .8rem !important;
}

.chosen-container .chosen-drop {
    border: 1px solid #c3d2d9;
    border-top: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    margin-top: -.2rem;
}

.chosen-container .chosen-choices {
    font-family: var(--input-font);
    font-size: .8rem !important;
    border: 1px solid #c3d2d9;
    box-shadow: none;
    padding: .2rem .4rem .1rem .4rem !important;
}

.chosen-container .active-result {
    transition: all .15s;
}

.chosen-container .highlighted {
    background: #F04E23 !important;
    color: #FFFFFF !important;
}

.chosen-choices {
    max-height: 150px !important;
    overflow: overlay !important
}

.fld-nopad .ui-selectmenu-button:hover,
.fld-nopad .ui-selectmenu-button:focus,
.fld-nopad .ui-selectmenu-button:active {
    box-shadow: none !important;
}

.fld-nopad .ui-selectmenu-button:focus,
.fld-nopad .ui-selectmenu-button:active {
    box-shadow: none !important;
}

.fld-nopad .ui-selectmenu-disabled {
    opacity: .9;
}

.add-opt {
    display: inline-block;
    position: absolute;
    right: 1.75rem;
    margin-top: .5rem;
    font-size: 1.25rem;
    color: #67c472;
    cursor: pointer;
}

.spl-select {
    margin: 0 1rem;
    padding: .2rem 0;
    border: 1px solid #ddd;
    list-style-type: none;
    font-size: .75rem;
    height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}

.spl-select>li {
    padding: .4rem;
    cursor: pointer;
}

.spl-select>li:hover {
    background-color: #f0f0f0;
}

.spl-select>li>span:last-child {
    display: inline-block;
    float: right;
    margin-right: .42rem;
    color: #ed8557;
    font-size: 1.25rem;
    margin-top: -.05rem;
}

.form-fieldset {
    width: calc(100% - 2rem);
    margin: .6rem 1rem 0 1rem;
    border: 1px solid #ddd;
    border-radius: .2rem;
    padding: .5rem .2rem .25rem .2rem;
    vertical-align: top;
}

.form-fieldset>legend {
    font-size: .7rem;
    line-height: .4rem;
    color: #888;
}

.form-fieldset>.fld-full {
    margin: 0;
    padding: 0;
}

.pg-area {
    border: 1px solid #eee;
    border-radius: .2rem;
    padding: .5rem .2rem .25rem .2rem;
    vertical-align: top;
    margin-bottom: 1rem;
    margin-top: 1rem;
}

.pg-area>legend {
    font-size: 1.15rem;
    color: #464646;
    font-weight: bold;
    padding: 0 .5rem;
}

.pg-area-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: -22px;
}

.pg-area-group {
    border: 1px solid #eee;
    margin: 4px 20px;
    padding: 5px;
    border-radius: .2rem;
}

.pg-area-h3 {
    font-size: 1.15rem;
    color: #464646;
    font-weight: bold;
    padding: 0 0.5rem;
    margin: 0;
    background-color: white;
}

.pg-area-h4 {
    font-size: 0.9rem;
    margin: 0;
    font-weight: 100;
}

.pg-area-a {
    background-color: white;
    padding: 0px 10px;
    cursor: pointer;
    font-size: 0.9rem;
}

th.gridjs-th {
    background: #FFFFFF;
    border-left: 0;
    border-right: 0;
    color: #aaa;
    font-weight: 200;
    font-size: .75rem;
    padding: .6rem .6rem .4rem .6rem;
    line-height: 1.7rem;
    border-radius: 0;
    z-index: 99;
}

th.gridjs-th:hover,
th.gridjs-th:focus {
    background-color: #FFFFFF;
}

.gridjs-sort {
    border: 0;
    background-color: #FFFFFF;
    opacity: .5;
}

/*.gridjs-wrapper { scroll-behavior: smooth; }*/

td.gridjs-td {
    background: #FFFFFF;
    border-left: 0;
    border-right: 0;
    font-size: .75rem;
    color: #464646;
    padding: .55rem;
    border-radius: 0;
    white-space: normal;
    word-break: break-all;
    transition: background .2s;
}

td.gridjs-td .frm-field {
    padding: 0;
    margin: 0;
}

td.gridjs-td .frm-field>* {
    margin: 0;
}

.narrow-rows th.gridjs-th {
    padding: .6rem .2rem .4rem .1rem;
}

.narrow-rows td.gridjs-td {
    padding: .1rem;
}

.narrow-rows2 th.gridjs-th {
    padding: .6rem .2rem .4rem .1rem;
    vertical-align: bottom;
}

.narrow-rows2 td.gridjs-td {
    padding: .3rem;
    font-size: .75rem;
}

.no-linebreak th.gridjs-th {
    padding: .6rem .2rem .4rem .1rem;
    vertical-align: bottom;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-linebreak td.gridjs-td {
    padding: .3rem;
    font-size: .75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.no-search .gridjs-head .gridjs-search {
    display: none;
}

.ctt-grid {
    margin: .5rem 0;
}

.ctt-grid th.gridjs-th {
    border: 0;
    padding: 0;
    height: 0;
}

.ctt-grid td.gridjs-td {
    border: 0;
    font-size: .8rem;
    padding: 0;
    padding-left: 0 .5rem;
}

.no-header thead {
    display: none;
}

.no-header tr.gridjs-tr:first-child td.gridjs-td {
    border-top: 0;
}

.gridjs-message {
    text-align: left !important;
    padding-left: .2rem !important;
}

.gridjs-tr:hover>td.gridjs-td {
    background-color: #f5f5f5;
}

.gridjs-container {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    display: block;
}

.gridjs-wrapper,
.gridjs-footer {
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.gridjs-footer {
    text-align: right;
}

.gridjs-pagination .gridjs-pages {
    text-align: right;
    float: initial;
}

.gridjs-pagination .gridjs-pages button {
    border-radius: 0;
}

.gridjs-pagination .gridjs-pages button:hover {}

.gridjs-pagination .gridjs-pages button:active {}

.gridjs-pagination .gridjs-pages button:focus {}

.gridjs-pagination .gridjs-pages button.gridjs-spread {
    pointer-events: none;
}

.gridjs-pagination .gridjs-pages button[disabled]:hover {
    background: transparent;
    filter: brightness(80%);
}

.gridjs-pagination .gridjs-pages button:first-child::before {
    font-family: fa-solid-900;
    content: "\f053";
}

.gridjs-pagination .gridjs-pages button[disabled]:first-child::before {
    background: transparent;
}

.gridjs-pagination .gridjs-pages button:last-child::after {
    font-family: fa-solid-900;
    content: "\f054";
}

.gridjs-pagination .gridjs-pages button[disabled]:last-child::after {
    background: transparent;
}

.gridjs-pagination .gridjs-pages button.gridjs-currentPage {
    background: #eee;
    color: #222;
    outline: 0 !important;
}

.gridjs-pagination .gridjs-pages button.gridjs-currentPage:hover {
    filter: none;
}

.gridjs-pagination .gridjs-pages button:disabled,
.gridjs-pagination .gridjs-pages button:hover:disabled,
.gridjs-pagination .gridjs-pages button[disabled] {
    cursor: default;
}

.gridjs-head {
    width: 100%;
}

.gridjs-search {
    min-width: 256px;
}

.gridjs-search>input[type="search"] {
    background: #fff;
    font-family: var(--input-font);
    font-size: .8rem;
    padding: .5rem 2.3rem .5rem .6rem;
    border: 1px solid #ccc;
    border-radius: .2rem;
    width: 100%;
    outline: 0;
    line-height: .85rem;
}

.gridjs-search>input[type="search"]:hover,
.frm-field>input[type="text"]:focus,
.frm-field>input[type="text"]:active {
    background: #fff;
    color: #464646;
    border: 1px solid #ccc;
}

.gridjs-search>input[type="search"]:focus,
.frm-field>input[type="text"]:active {
    box-shadow: 0 2px 4px #e0e0e0;
    border: 1px solid #ccc;
}

.gridjs-search>input[type="search"]:disabled {
    opacity: .5;
    box-shadow: initial !important;
}

.gridjs-search::after {
    font-family: fa-solid-900;
    content: "\f002";
    color: #a0a0a0;
    font-size: .8rem;
    padding: .7rem .6rem .5rem .6rem;
    position: absolute;
    margin-left: -2.06rem;
    background-color: #5fa2d0;
    color: #fff;
    border-top-right-radius: .2rem;
    border-bottom-right-radius: .2rem;
}

.gridjs-summary {
    font-size: .75rem;
}

.grid-error,
.grid-error:hover,
.grid-error:focus,
.grid-error:active {
    color: #f00 !important;
    font-weight: 600;
    background-color: transparent !important;
}

.gridjs-notfound,
.grid-notfound:hover,
.grid-notfound:focus,
.grid-notfound:active {
    background-color: transparent !important;
}

.grid-actions {
    text-align: right;
    white-space: nowrap;
}

.grid-actions>.act {
    padding: 0 .2rem;
    font-size: .85rem;
    display: inline-block;
    cursor: pointer;
    opacity: .75;
    transition: opacity .2s;
}

.grid-actions>a.act {
    text-decoration: none;
    color: #767676;
}

.grid-actions>.act:hover {
    opacity: 1;
}

.grid-actions>.fa-edit.act {
    color: #5fa2d0;
}

.grid-actions>.fa-trash-alt.act {
    color: #f34646;
}

.grid-actions>.fa-id-card {
    color: #444;
}

.main-menu {
    position: absolute;
    display: none;
    background-color: #23272D;
    border: 0;
    border-bottom-left-radius: .2rem;
    border-bottom-right-radius: .2rem;
    z-index: 99;
}

.main-menu>ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
    font-size: .75rem;
    color: #fff;
    font-weight: 600;
    width: 186px;
}

.main-menu>ul>li {
    padding: .8rem;
    cursor: pointer;
    transition: background .2s;
}

.main-menu>ul>li:hover {
    background-color: #F04E23;
}

.main-menu>ul>li>.icon {
    color: #ccc;
    width: 1rem;
    margin-right: .75rem;
    font-size: .85rem;
    color: #FFF;
}

.main-menu>ul>li.unavailable {
    text-decoration: line-through;
}

.main-menu>ul>li.unavailable:hover {
    background-color: #566170;
}

.main-menu-idiomas {
    position: absolute;
    display: none;
    background-color: #23272D;
    border: 0;
    border-bottom-left-radius: .2rem;
    border-bottom-right-radius: .2rem;
    z-index: 99;
}

.main-menu-idiomas>ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
    font-size: .75rem;
    color: #fff;
    font-weight: 600;
    width: 186px;
}

.main-menu-idiomas>ul>li {
    padding: .8rem;
    cursor: pointer;
    transition: background .2s;
}

.main-menu-idiomas>ul>li>div {
    margin: 0 0 auto;
}

.main-menu-idiomas>ul>li>div>span {
    margin-left: 100px;
}

.main-menu-idiomas>ul>li:hover {
    background-color: #F04E23;
}

.main-menu-idiomas>ul>li>.icon {
    color: #ccc;
    width: 1rem;
    margin-right: .75rem;
    font-size: .85rem;
    color: #FFF;
}

.main-menu-idiomas>ul>li.unavailable {
    text-decoration: line-through;
}

.main-menu-idiomas>ul>li.unavailable:hover {
    background-color: #566170;
}

@media only screen and (max-width: 630px) {
    .main-menu-lang {
        float: right !important;
        left: auto !important;
        right: 20% !important;
    }
}

/* aqui */
.main-menu-lang {
    position: absolute;
    display: none;
    background-color: #23272D;
    border: 0;
    border-bottom-left-radius: .2rem;
    border-bottom-right-radius: .2rem;
    z-index: 99;
    width: 3.5rem;
}

.main-menu-lang>ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
    font-size: .75rem;
    color: #fff;
    font-weight: 600;
    width: 100%;
}

.main-menu-lang>ul>li {
    padding: 0rem;
    cursor: pointer;
    transition: background .2s;
}

.main-menu-lang>ul>li:hover {
    background-color: #F04E23;
}

.main-menu-lang>ul>li>.icon {
    color: #ccc;
    width: 1rem;
    margin-right: .75rem;
    font-size: .85rem;
    color: #FFF;
}

.main-menu-lang>ul>li.unavailable {
    text-decoration: line-through;
}

.main-menu-lang>ul>li.unavailable:hover {
    background-color: #566170;
}
/* 
.main-menu-lang {
    position: absolute;
    display: none;
    background-color: #23272D;
    border: 0;
    border-bottom-left-radius: .2rem;
    border-bottom-right-radius: .2rem;
    z-index: 99;
    width: 3.5rem;
}

.main-menu-lang>ul {
    margin: 0;
    list-style-type: none;
    padding: 0;
    font-size: .75rem;
    color: #fff;
    font-weight: 600;
    width: 100%;
}

.main-menu-lang>ul>li {
    padding: 0rem;
    cursor: pointer;
    transition: background .2s; 
}

.main-menu-lang>ul>li>div {
    margin: 0 0 auto;
}

.main-menu-lang>ul>li>div>span {
    margin-left: 100px;
}

.main-menu-lang>ul>li:hover {
    background-color: #F04E23;
}

.main-menu-lang>ul>li>.icon {
    color: #ccc;
    width: 1rem;
    margin-right: .5rem;
    margin-left: .5rem;
    font-size: .85rem;
    color: #FFF;
}

.main-menu-lang>ul>li.unavailable {
    text-decoration: line-through;
}

.main-menu-lang>ul>li.unavailable:hover {
    background-color: #566170;
}
*/

/* aqui */
.lateral-menu {
    margin: 0;
    padding: 0;
    font-size: .8rem;
    font-family: helvetica-neue;
    color: #444;
    overflow: auto;
    white-space: nowrap;
}

.lateral-menu>ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.lateral-menu>ul>li {
    padding: .8rem 1rem .8rem 1rem;
    cursor: pointer;
    transition: background .2s;
    font-size: .8rem;
}

.lateral-menu>ul>li>.fa {
    width: 1.25rem;
    color: #F04E23;
    font-size: .85rem;
    display: inline-block;
}

.lateral-menu>ul>li>.fab {
    width: 1.25rem;
    color: #F04E23;
    font-size: .85rem;
    display: inline-block;
}

.lateral-menu>ul>li>.menuIcon {
    width: 1.25rem;
    color: #F04E23;
    font-size: .85rem;
    display: inline-block;
}

.lateral-menu>ul>li:hover {
    background: #f5f5f5;
}

.lateral-menu>ul>li.subgroup {
    padding: .6rem 1rem .6rem .6rem;
    font-size: .65rem;
    background: #fefefe;
    color: #aaa;
    pointer-events: none;
    border-bottom: 1px solid #eee;
    border-top: 1px solid #eee;
    letter-spacing: 1px;
    pointer-events: none;
}

.lateral-menu>ul>li.mod-title {
    font-size: .75rem;
    font-weight: bold;
    padding: .6rem 1rem .6rem .6rem;
    border-bottom: 1px solid #eee;
    background: #fefefe;
    pointer-events: none;
}

.lateral-menu>ul>li.mod-title>em {
    font-style: normal;
}

.lateral-menu>ul>li.mod-title>.fa {
    width: 1.25rem;
    color: #F04E23;
    font-size: .85rem;
    margin-right: .5rem;
}

.lateral-menu>ul>li.mod-title>.fab {
    width: 1.25rem;
    color: #F04E23;
    font-size: .85rem;
    margin-right: .5rem;
}

.lateral-menu-submenu>ul>li {
    font-size: .8rem;
    padding: .6rem !important;
}

.lateral-menu .selected {
    border-left: .2rem solid #F04E23;
    padding-left: .8rem;
    background: #f5f5f5;
}

.mod {
    box-shadow: 0 0 4px #eee;
    border: 0;
}

.mod>.mod-icon {
    float: left;
    font-size: 3rem;
    color: #ddd;
    width: 4rem;
    margin-right: 1rem;
    text-align: center;
}

.mod>h4 {
    margin: 0;
    font-weight: 100;
    margin-top: .2rem;
}

.mod>h4>em {
    font-style: normal;
}

.mod>h4>.fa-external-link-alt {
    color: #5fa2d0;
    cursor: pointer;
    margin-left: .2rem;
    font-size: .85rem;
    vertical-align: top;
    transition: color .2s;
}

.mod>h4>.fa-external-link-alt:hover {
    color: #3676a3;
}

.mod>p {
    font-size: .75rem;
    font-weight: 600;
    color: #888;
    margin: 0 0 .5rem 0;
    max-width: 70%;
}

.mod>.module-status {
    float: right;
    margin-top: -1.5rem;
    font-size: .75rem;
    border-radius: .2rem;
    padding: .2rem .8rem;
}

.mod>.mod-on {
    background-color: #67c472;
    color: #fff;
    opacity: .75;
    pointer-events: none;
}

.mod>.mod-on>span::before {
    content: 'LICENCIADO'
}

.mod>.mod-off {
    background-color: #f1ce5b;
    color: #fff;
    opacity: .95;
    cursor: pointer;
}

.mod>.mod-off>span::before {
    content: 'CONTRATAR'
}

.mod-contract {
    font-size: .8rem;
    padding: .5rem;
}

.chat-title {
    color: #666;
    opacity: .5;
    float: right;
    font-size: 1.5rem;
    margin-right: .65rem;
    margin-top: .5rem;
    transition: opacity .25s;
    cursor: pointer;
    overflow: hidden;
}

.chat-title:hover {
    opacity: 1;
}

.cm-expanded .chat-title {
    color: #464646;
    opacity: 1;
    width: calc(100% - 1.25rem);
}

.cm-expanded .chat-title::before {
    content: 'Chat';
    font-family: var(--main-font);
    font-weight: 100;
    font-size: 1.25rem;
    text-align: left;
}

.toggler {
    color: #666;
    font-size: 1.5rem;
    margin-left: .5rem;
    cursor: pointer;
    opacity: .5;
    transition: opacity .2s, transform .5s;
    position: absolute;
    bottom: .25rem;
    left: -.2rem;
    z-index: 1;
}

.toggler:hover {
    opacity: 1;
}

.toggler-rotated {
    transform: rotate(180deg);
}

.chat-footer {
    position: absolute !important;
    background: #f5f5f5;
    height: 32px !important;
    margin-top: -32px;
    display: inline-block;
}

.chat-no-active *[role=chat-module] {
    display: none;
}

.close-conversation {
    font-size: 1.25rem;
    color: #464646;
    opacity: .5;
    transition: opacity .2s;
    cursor: pointer;
    font-weight: bold;
    position: absolute;
    right: .5rem;
    top: 0;
}

.close-conversation:hover {
    opacity: 1;
}

.conversation-panel {
    display: inline-block;
    background: #f5f5f5;
    height: calc(100% - 50px);
    width: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scroll-behavior: smooth;
    border-top: 1px solid #f0f0f0;
}

.balloon {
    display: block;
    background-color: #fff;
    border-radius: .2rem;
    width: calc(100% - 2rem);
    margin: .2rem;
    font-size: .75rem;
    padding: .2rem .4rem;
    color: #444;
    position: relative;
}

.balloon>img {
    height: 36px;
    display: inline-block;
    margin: 0;
    padding: 0;
    margin-top: .3rem;
}

.balloon.me {
    margin: .2rem 0 .2rem 1.3rem;
    background-color: #66869b;
    color: #fff;
}

.balloon.emot {
    background: transparent;
    text-align: left;
}

.balloon.me.emot {
    text-align: right;
    margin: .2rem 0 .2rem 1.3rem;
}

.conv-date {
    text-align: center;
    font-size: .65rem;
    color: #97720c;
}

.conv-date>span {
    display: inline-block;
    padding: .2rem .4rem;
    background: #f8d77c;
    border-radius: .2rem;
    margin: .2rem 0;
}

.time {
    font-size: .55rem;
    display: block;
    position: absolute;
    margin-top: .4rem;
    opacity: .5;
}

.me .time {
    color: #444;
    right: .5rem;
}

.conv-form {
    margin: 0;
    padding: 0;
}

.conv-form>.far {
    font-size: 1.15rem;
    color: #464646;
    margin: .25rem .2rem .2rem .2rem;
    float: left;
    cursor: pointer;
}

.conv-form>input {
    background: #fff;
    font-family: var(--input-font);
    font-size: .75rem;
    padding: .4rem;
    border: 1px solid #ccc;
    width: 83%;
    outline: none;
    resize: none;
    border-radius: .4rem;
}

.conv-form>button {
    background: transparent;
    border: 0;
    font-size: 1.25rem;
    color: #464646;
    float: right;
    margin: 0;
    margin-right: .3rem;
    cursor: pointer;
    padding: 0;
    padding-top: .15rem;
    outline: none;
}

.emoticons {
    width: calc(100% - .8rem);
    height: 150px;
    overflow-y: auto;
    margin-left: .4rem;
    margin-top: -160px;
    background-color: #fff;
    position: absolute;
    padding: .4rem;
    border: 1px #ccc solid;
    border-radius: .2rem;
    display: none;
}

.emoticons>img {
    height: 26px;
    cursor: pointer;
    opacity: .75;
}

.emoticons>img:hover {
    opacity: 1;
}

.add-contact {
    opacity: 0;
    position: absolute;
    top: .75rem;
    left: 4.5rem;
    color: #71bd7a;
    cursor: pointer;
    font-size: 1.15rem;
    transition: opacity .15s;
    pointer-events: none;
}

.cm-expanded .add-contact {
    opacity: 1;
    pointer-events: all;
}

.chat-mod-alert {
    position: absolute;
    bottom: .5rem;
    right: 2.75rem;
    width: 0px;
    box-shadow: 1px 1px 10px #ccc;
    overflow: hidden;
    z-index: 2;
}

.chat-mod-alert>h5 {
    margin: 0;
    padding: .2rem;
}

.chat-mod-alert>p {
    font-size: .75rem;
    padding: 0 .4rem;
    width: 256px;
}

.chat-mod-alert>span {
    display: block;
    text-align: right;
    font-size: .95rem;
    font-weight: bold;
    margin-top: -.5rem;
    cursor: pointer;
    color: #5fa2d0;
    margin-top: .5rem;
}

.contact-list {
    width: 100%;
    height: calc(100% - 72px);
    overflow-x: hidden;
    overflow-y: auto;
    float: left;
    margin-top: .5rem;
    padding-top: .5rem;
    background: #f5f5f5;
}

.cm-expanded .contact-list {
    height: calc(100% - 74px);
}

.contact-list>ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    overflow: hidden;
    width: 100%;
}

.contact-list>ul>li {
    white-space: nowrap;
    padding: .4rem .4rem 0 .4rem;
    cursor: pointer;
    position: relative;
    opacity: .85;
    transition: opacity .2s, background .2s;
    overflow: hidden;
    width: 100%;
}

.contact-list>ul>li:hover {
    opacity: 1;
    background: rgba(200, 200, 200, 0.1);
}

.contact-list>ul>li:nth-child(n + 14) {
    display: none;
}

.cm-expanded .contact-list>ul>li:nth-child(n + 14) {
    display: block;
}

.ctt-status {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #aaa;
    border-radius: 50%;
    left: -.1rem;
    top: .15rem;
}

.ctt-status.on {
    background: #49de5b;
}

.ctt-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #5fa2d0;
    color: #fff;
    border-radius: 50%;
    font-size: 1rem;
    font-weight: bold;
    padding-left: 2px;
    padding-top: 4px;
    cursor: pointer;
    margin-left: .2rem;
    text-align: center;
    position: relative;
}

.ctt-grid .ctt-icon {
    width: 36px;
    height: 36px;
    padding-left: 0 !important;
    padding-top: 7px;
    margin: .2rem .4rem 0 .5rem;
    background-color: #5fa2d0;
    color: #fff;
}

.ctt-grid .ctt-status {
    margin-top: -.1rem;
    left: .05rem;
}

.cm-expanded .ctt-icon {
    cursor: default;
}

.new-msgs {
    display: inline-block;
    position: absolute;
    background-color: #F04E23;
    color: #fff;
    font-size: .55rem;
    padding: .05rem .2rem 0 .15rem;
    border-radius: .3rem;
    margin-left: -30px;
    margin-top: 18px;
}

.ctt-name {
    display: inline-block;
    font-size: .75rem;
    font-weight: bold;
    color: #464646;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 60%;
    vertical-align: top;
    padding-left: .3rem;
}

.ctt-last {
    display: inline-block;
    font-size: .65rem;
    color: #666;
    font-family: segoe-ui;
    font-style: italic !important;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 80%;
    vertical-align: top;
    padding-left: calc(30px + .8rem);
    float: left;
    margin-top: -1.3rem;
}

.ctt-last>img {
    height: 14px;
    opacity: .5;
}

.ctt-mmt {
    display: none;
    font-size: .65rem;
    color: #666;
    float: right;
    margin-top: -2.2rem;
}

.cm-expanded .ctt-mmt {
    display: inline-block;
}

.ctt-acts {
    display: inline-block;
    opacity: 0;
    font-size: .65rem;
    color: #828282;
    float: right;
    margin-top: -1.1rem;
    transition: opacity .2s;
    pointer-events: none;
}

.cm-expanded .ctt-acts {
    pointer-events: all;
    opacity: 1;
}

.cm-expanded .contact-list>ul>li:hover .ctt-acts {
    opacity: 1;
}

.ctt-add {
    color: #67c472;
    font-family: var(--main-font);
    font-weight: bold;
    cursor: pointer;
    font-size: .75rem;
}

.agt-conv-data {
    float: left;
    display: inline-block;
}

.agt-conv-data>h5 {
    margin: 0;
    padding: 0;
    display: inline-block;
    vertical-align: top;
    color: #464646;
    margin-top: .65rem;
    margin-left: .25rem;
    line-height: .75rem;
    width: 65%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.agt-conv-data>h5>span {
    margin: 0;
    padding: 0;
    display: block;
    vertical-align: top;
    color: #464646;
    font-weight: 100;
    font-size: .65rem;
    margin-top: .1rem;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.agt-conv-data>h5>span:last-child {
    margin-top: .15rem;
    opacity: .75;
}

.ctt-icon-conv {
    display: inline-block;
    width: 36px;
    height: 36px;
    background-color: #5fa2d0;
    color: #fff;
    border-radius: 50%;
    font-size: 1rem;
    text-align: center;
    font-weight: bold;
    overflow: hidden;
    padding-top: 7px;
    cursor: pointer;
    margin-left: .5rem;
    margin-top: .5rem;
}

.ctt-icon-conv>.ctt-status {
    margin-left: -.5rem;
    margin-top: -.25rem;
    left: auto;
    top: auto;
}

.img-preview {
    height: 350px;
    width: calc(100% - 1.2rem);
    background-image: url("../res/imgs/noImage.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: .4rem .6rem;
    border-radius: .2rem;
    position: relative;
}

.img-load {
    display: inline-block;
    vertical-align: top;
    width: 32px;
    height: 32px;
    border: 2px solid rgba(255, 255, 255, .5);
    border-top: 2px solid rgba(95, 162, 208, 1);
    border-radius: 50%;
    animation: roll 1s linear infinite;
    float: right;
    margin-right: .3rem;
    margin-top: -2.95rem;
}

.photo-actions {
    position: absolute;
    bottom: 1rem;
}

.photo-opt {
    font-size: 1.15rem;
    width: 36px;
    text-align: center;
    color: #888;
    margin-top: .6rem;
    opacity: 0.5;
    transition: opacity .2s;
    cursor: pointer;
    font-smooth: alway;
    -webkit-font-smoothing: antialiased;
}

.img-preview:hover .photo-opt {
    opacity: .75;
}

.img-preview:hover .photo-opt:hover {
    opacity: 1;
}

.manual-footer-grid {
    margin-bottom: 0;
    padding-bottom: 0;
}

.grid-footer {
    text-align: right;
    padding-top: .8rem;
    padding-bottom: .8rem;
    border-top: 1px solid #E5E7EB;
    height: 54.406px;
}

.grid-footer>.total {
    float: left;
    font-size: .75rem;
    display: inline-block;
    vertical-align: middle;
    padding-top: 6px;
    padding-bottom: 8px;
    margin-left: 1rem;
}

.grid-footer>.total>span {
    font-weight: bold;
}

.grid-footer>.frm-field {
    margin: 0;
}

.grid-footer .ui-selectmenu-button {
    font-size: .7rem;
    padding: .32rem;
}

.grid-top {
    text-align: left;
}

.grid-top>.frm-field {
    margin: 0;
    padding: 0;
}

.grid-top .ui-selectmenu-button {
    font-size: .7rem;
    padding: .32rem;
}

.grid-actions.monitor>.fa-ellipsis-v {
    padding: .2rem .5rem;
    color: #aaa;
    transition: color .2s;
}

.grid-actions.monitor>.fa-ellipsis-v:hover {
    color: #888;
}

.simple-menu {
    position: absolute;
    min-width: 128px;
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 2px 2px 6px #aaa;
    display: none;
    z-index: 1;
}

.simple-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
    font-family: var(--main-font);
}

.simple-menu ul>li {
    padding: .3rem .5rem;
    transition: background .2s;
    cursor: pointer;
}

.simple-menu ul>li:hover {
    background: #f5f5f5;
}

.simple-menu2 {
    position: absolute;
    min-width: 128px;
    background: #fff;
    border: 1px solid #f0f0f0;
    box-shadow: 2px 2px 6px #aaa;
    display: none;
    z-index: 1;
}

.simple-menu2>ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: .9rem;
    font-family: var(--main-font);
}

.simple-menu2>ul>li {
    padding: .3rem .5rem;
    transition: background .2s;
    cursor: pointer;
}

.simple-menu2>ul>li:hover {
    background: #f5f5f5;
}

.filter-socket-grid {
    color: #ccc;
    transition: color .2s, border .2s;
    cursor: pointer;
    padding: .2rem .4rem 0 .4rem;
    border: 1px dashed #ccc;
    border-radius: .2rem;
}

.filter-socket-grid:hover {
    color: #5fa2d0;
    border: 1px dashed #5fa2d0;
}

.filter-socket-grid>span::after {
    display: inline-block;
    content: attr(data-without-content);
    font-family: var(--main-font);
    font-size: .75rem;
    font-weight: 600;
    vertical-align: top;
    padding-top: .15rem;
    padding-left: .2rem;
}

.filter-socket-grid.with-filter {
    color: #67c472;
    border: 1px dashed #67c472;
    opacity: .75;
    transition: opacity .2s;
}

.filter-socket-grid.with-filter:hover {
    color: #67c472;
    border: 1px dashed #67c472;
    opacity: 1;
}

.filter-socket-grid.with-filter>span::after {
    display: inline-block;
    content: attr(data-content);
    font-family: var(--main-font);
    font-size: .75rem;
    font-weight: 600;
    vertical-align: top;
    padding-top: .15rem;
    padding-left: .2rem;
}

.filter-socket-grid.with-filter>span>.fa-times-circle {
    color: #f34646;
    float: right;
    margin-left: 1rem;
    font-size: .75rem;
}

.general-load-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 4px;
    background: #F04E23;
    transition: width .1s;
    z-index: 999;
}

.local-load-bar {
    height: 6px;
    background: #5fa2d0;
    transition: width .1s;
    border-radius: 2px;
}

.treeview {
    width: auto;
    display: inline-block;
    vertical-align: top;
}

.treeview ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    font-size: .75rem;
}

.treeview li.node {
    padding: .2rem .2rem .2rem 0;
}

.treeview li.submenu {
    overflow: hidden;
}

.treeview .fa-chevron-right {
    font-size: .65rem;
    width: 1rem;
    height: 1rem;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    padding-top: .13rem;
    cursor: pointer;
}

.treeview .fa-none {
    width: 1rem;
    cursor: default;
}

.treeview .tree_node_ctt {
    display: inline-block;
}

.export-btn {
    display: inline-block;
    cursor: pointer;
    opacity: .85;
    transition: opacity .2s;
    position: relative;
    vertical-align: bottom;
}

.export-btn:hover {
    opacity: 1;
}

.export-btn::before {
    font-family: fa-solid-900;
    content: "\f6dd";
    color: #67c472;
    font-size: 1.1rem;
    line-height: .5rem;
}

.export-btn::after {
    font-family: fa-solid-900;
    content: "\f019";
    color: #464646;
    font-size: .65rem;
    vertical-align: bottom;
    position: absolute;
    margin-left: -.3rem;
    top: .5rem;
}

.export-btn-pop {
    display: inline-block;
    cursor: pointer;
    opacity: .85;
    transition: opacity .2s;
    position: relative;
    vertical-align: bottom;
}

.export-btn-pop:hover {
    opacity: 1;
}

.export-btn-pop::before {
    font-family: fa-solid-900;
    content: "\f6dd";
    color: #67c472;
    font-size: 1.1rem;
    line-height: .5rem;
}

.export-btn-pop::after {
    font-family: fa-solid-900;
    content: "\f019";
    color: #464646;
    font-size: .65rem;
    vertical-align: bottom;
    position: absolute;
    margin-left: -.3rem;
    top: .85rem;
}

.general-backpage {
    display: inline-block;
    color: #888;
    font-size: 2rem;
    margin: 0 1rem 0 .3rem;
    cursor: pointer;
    position: absolute;
    left: 210px;
    margin-top: -.15rem;
}

.tmp-user {
    color: #ccc;
    cursor: pointer;
}

#mobileChatTopo,
#localMenu {
    display: none;
}

/* ===== SISTEMA DE MENU RESPONSIVO ===== */

/* Botão Flutuante do Menu Lateral */
.floating-top-button {
    position: fixed;
    top: 20px;
    left: 20px;
    width: 30px;
    height: 30px;
    border-radius: .5rem;
    /* background: #3498db rgba(186, 0, 0, 0.3); */
    background: rgba(240, 78, 35, 1);
    display: none; /* Oculto por padrão */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
    transition: all 0.3s ease;
    z-index: 1000;
}

.floating-top-button:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

.floating-top-button:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}

.floating-top-button .fa {
    color: white;
    font-size: 18px;
}

/* ===== TELAS GRANDES (Desktop) ===== */
@media (min-width: 611px) {
    /* Menu lateral fixo e visível */
    .lateral-menu {
        width: 200px;
        left: 0;
        position: absolute;
    }
    
    /* Menu colapsado (só ícones) */
    .lateral-menu.collapsed {
        width: 50px !important;
    }
    
    /* Ocultar textos quando menu estiver colapsado */
    .lateral-menu.collapsed .opt-text {
        display: none !important;
    }
    
    /* Ocultar textos de subgrupos quando menu estiver colapsado */
    .lateral-menu.collapsed .subgroup {
        display: none !important;
    }
    
    /* Ocultar títulos de módulos quando menu estiver colapsado */
    .lateral-menu.collapsed .mod-title {
        display: none !important;
    }
    
    /* Ocultar todos os textos dos itens do menu quando colapsado */
    .lateral-menu.collapsed li span:not(.fa):not(.fab):not(.menuIcon) {
        display: none !important;
    }
    
    /* Ocultar elementos em que não são ícones quando menu colapsado */
    .lateral-menu.collapsed li em {
        display: none !important;
    }
    
    /* Centralizar ícones quando menu colapsado */
    .lateral-menu.collapsed li {
        text-align: center !important;
        padding: .8rem .5rem !important;
    }
    
    /* Ajustar ícones quando menu colapsado */
    .lateral-menu.collapsed li .fa,
    .lateral-menu.collapsed li .fab,
    .lateral-menu.collapsed li .menuIcon {
        margin: 0 !important;
        width: 1.25rem !important;
        display: block !important;
        text-align: center !important;
    }
    
    /* Botão de colapsar menu (apenas em desktop) */
    .lateral-menu::before {
        content: "◀";
        position: absolute;
        top: 10px;
        right: 5px;
        cursor: pointer;
        color: #666;
        font-size: 12px;
        z-index: 10;
        transition: transform 0.3s ease;
        padding: 10px; /* Área maior para facilitar o clique */
        border-radius: 2px;
        width: 30px; /* Largura fixa */
        height: 30px; /* Altura fixa */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .lateral-menu.collapsed::before {
        content: "▶";
        transform: rotate(0deg);
        padding: 10px; /* Área maior para facilitar o clique */
        border-radius: 2px;
        width: 30px; /* Largura fixa */
        height: 30px; /* Altura fixa */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* ContentContainer se adapta ao menu */
    .site-container {
        margin-left: 200px;
    }
    
    .site-container.menu-collapsed {
        margin-left: 50px !important;
    }
    
    /* Ocultar botão flutuante em telas grandes */
    .floating-top-button {
        display: none !important;
    }
    
    /* Ocultar #localMenu em telas grandes (não precisamos dele) */
    #localMenu {
        display: none !important;
    }
}

/* ===== TELAS PEQUENAS (Mobile) ===== */
@media (max-width: 610px) {
    /* Menu lateral como overlay */
    .lateral-menu {
        position: fixed;
        width: 100vw;
        /* left: -100vw; */
        z-index: 1000;
        height: 100vh;
        top: 0;
    }
    
    /* Menu aberto */
    .lateral-menu.open {
        left: 0;
    }
    
    /* Botão X para fechar menu em mobile */
    .lateral-menu.open::after {
        content: "✕";
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
        color: #666;
        font-size: 18px;
        z-index: 1001;
        background: rgba(255, 255, 255, 0.9);
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    
    /* ContentContainer ocupa toda a tela */
    .site-container {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Mostrar botão flutuante no canto inferior esquerdo */
    .floating-top-button {
        display: flex !important;
        width: 45px;
        height: 45px;
        bottom: 20px;
        left: 20px;
        top: auto;
        z-index: 90 !important;
    }
    
    /* Botão flutuante quando menu está aberto */
    .floating-top-button.menu-open {
        z-index: 998 !important; /* Atrás do menu */
    }
    
    .floating-top-button .fa {
        font-size: 16px;
    }
    
    /* Ocultar #localMenu em telas pequenas */
    #localMenu {
        display: none !important;
    }
}

.forgot-form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.forgot-form a {
    font-size: .8rem;
    margin-right: 1.5rem;
    cursor: pointer;
    color: #b3b3b3;
    transition: .3s
}

.forgot-form a:hover {
    color: #484848;
}

.forgot-div {
    color: #f34646;
    font-size: 0.8rem;
    border: 1px solid #f34646;
    padding: 10px 5px;
    margin-top: 10px;
    width: 90%;
    border-radius: 5px;
    transition: ease;
    transition-duration: .3s
}






#confirmMessage,
#submitMessage {
    display: flex;
    justify-content: center;
}

input[type="file"] {
    display: none;
}

.container-export {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}

.container-export>label:first-child {
    color: #888;
    display: block;
    text-align: left;
    font-size: .75rem;
    padding-left: .1rem;
}

.import-model-caution-text {
    margin: .4rem;
    color: #464646;
    font-size: .75rem;
    margin-left: .8rem;
    font-style: italic;
    display: inline-block;
    position: relative;
    color: sandybrown
}

.hint {
    color: #5fa2d0;
    cursor: pointer;
    margin-left: .2rem;
    vertical-align: top;
    display: inline-block;
}

.importer-label {
    color: gray;
    margin: 4px;
    width: 100px;
    height: 100px;
    padding: 10px;
    display: flex;
    cursor: pointer;
    min-width: 100px;
    max-width: 400px;
    font-size: .8rem;
    border-radius: 5px;
    text-align: center;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #f7f2f2;
    transition: background .6s
}

.importer-label:hover {
    background-color: #dcdada;
    color: #595858;
}

.container-buttons {
    padding: 5px;
    display: flex;
    justify-content: center;
}

.import-model {
    margin: .4rem;
    color: #464646;
    font-size: .75rem;
    margin-left: .8rem;
    font-style: italic;
    display: inline-block;
    position: relative;
}

.phase-2 {
    padding: 10px
}

.users-logo {
    font-size: 1.2rem;
    margin-top: 2px;
}

.alert {
    color: #f34646;
    font-size: .75rem;
    font-weight: 600;
    text-align: center;
    padding: 0 .5rem;
    margin: 0;
    font-weight: 400;
    text-align: start;
}

.alert>span {
    font-weight: 600;
}

.problem-row {
    margin-bottom: .2rem;
    color: #f34646;
    font-weight: bold;
}

.problem-row-alert {
    margin-bottom: .2rem;
    color: darkorange;
    font-weight: bold;
}

.problem-row:last-child {
    margin-bottom: 0;
}

.problem-row span:first-child {
    margin-right: .3rem;
}

.problem-row.no-probs {
    color: #67c472;
}

.problem-row .fa-exclamation-triangle {
    color: #efc708;
}

.problem-row .fa-exclamation-triangle+span {
    color: #efc708;
}

/* container do index (opcional, caso queira alinhar à direita) */
#mainAlert {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* botão do alerta */
.version-alert-indicator {
    position: relative;
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.version-alert-indicator .fa {
    font-size: 18px;
    line-height: 1;
    color: #d98324;
    /* laranja de alerta */
}

.version-alert-indicator .va-badge {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #e02424;
    /* vermelho */
    border-radius: 50%;
    top: 0;
    right: 0;
}

/*Default commands*/
.ml-0 {
    margin-left: 0 !important;
}

.ml-1 {
    margin-left: 0.1rem !important;
}

.ml-2 {
    margin-left: 0.2rem !important;
}

.ml-3 {
    margin-left: 0.3rem !important;
}

.ml-4 {
    margin-left: 0.4rem !important;
}

.ml-5 {
    margin-left: 0.5rem !important;
}

.ml-6 {
    margin-left: 0.6rem !important;
}

.ml-7 {
    margin-left: 0.7rem !important;
}

.ml-8 {
    margin-left: 0.8rem !important;
}

.ml-9 {
    margin-left: 0.9rem !important;
}

.ml-10 {
    margin-left: 1rem !important;
}

.mr-0 {
    margin-right: 0 !important;
}

.mr-1 {
    margin-right: 0.1rem !important;
}

.mr-2 {
    margin-right: 0.2rem !important;
}

.mr-3 {
    margin-right: 0.3rem !important;
}

.mr-4 {
    margin-right: 0.4rem !important;
}

.mr-5 {
    margin-right: 0.5rem !important;
}

.mr-6 {
    margin-right: 0.6rem !important;
}

.mr-7 {
    margin-right: 0.7rem !important;
}

.mr-8 {
    margin-right: 0.8rem !important;
}

.mr-9 {
    margin-right: 0.9rem !important;
}

.mr-10 {
    margin-right: 1rem !important;
}

.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: 0.1rem !important;
}

.mt-2 {
    margin-top: 0.2rem !important;
}

.mt-3 {
    margin-top: 0.3rem !important;
}

.mt-4 {
    margin-top: 0.4rem !important;
}

.mt-5 {
    margin-top: 0.5rem !important;
}

.mt-6 {
    margin-top: 0.6rem !important;
}

.mt-7 {
    margin-top: 0.7rem !important;
}

.mt-8 {
    margin-top: 0.8rem !important;
}

.mt-9 {
    margin-top: 0.9rem !important;
}

.mt-10 {
    margin-top: 1rem !important;
}

.mb-0 {
    margin-bottom: 0rem !important;
}

.mb-1 {
    margin-bottom: 0.1rem !important;
}

.mb-2 {
    margin-bottom: 0.2rem !important;
}

.mb-3 {
    margin-bottom: 0.3rem !important;
}

.mb-4 {
    margin-bottom: 0.4rem !important;
}

.mb-5 {
    margin-bottom: 0.5rem !important;
}

.mb-6 {
    margin-bottom: 0.6rem !important;
}

.mb-7 {
    margin-bottom: 0.7rem !important;
}

.mb-8 {
    margin-bottom: 0.8rem !important;
}

.mb-9 {
    margin-bottom: 0.9rem !important;
}

.mb-10 {
    margin-bottom: 1rem !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.1rem !important;
}

.p-2 {
    padding: 0.2rem !important;
}

.p-3 {
    padding: 0.3rem !important;
}

.p-4 {
    padding: 0.4rem !important;
}

.p-5 {
    padding: 0.5rem !important;
}

.p-6 {
    padding: 0.6rem !important;
}

.p-7 {
    padding: 0.7rem !important;
}

.p-8 {
    padding: 0.8rem !important;
}

.p-9 {
    padding: 0.9rem !important;
}

.p-10 {
    padding: 1rem !important;
}

.w-0 {
    width: 0 !important;
}

.w-1 {
    width: 0.1rem !important;
}

.w-2 {
    width: 0.2rem !important;
}

.w-3 {
    width: 0.3rem !important;
}

.w-4 {
    width: 0.4rem !important;
}

.w-5 {
    width: 0.5rem !important;
}

.w-6 {
    width: 0.6rem !important;
}

.w-7 {
    width: 0.7rem !important;
}

.w-8 {
    width: 0.8rem !important;
}

.w-9 {
    width: 0.9rem !important;
}

.w-10 {
    width: 1rem !important;
}

.h-0 {
    height: 0 !important;
}

.h-1 {
    height: 0.1rem !important;
}

.h-2 {
    height: 0.2rem !important;
}

.h-3 {
    height: 0.3rem !important;
}

.h-4 {
    height: 0.4rem !important;
}

.h-5 {
    height: 0.5rem !important;
}

.h-6 {
    height: 0.6rem !important;
}

.h-7 {
    height: 0.7rem !important;
}

.h-8 {
    height: 0.8rem !important;
}

.h-9 {
    height: 0.9rem !important;
}

.h-10 {
    height: 1rem !important;
}

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

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

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

.d-inline-block {
    display: inline-block !important;
}

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

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

.d-inline-flex {
    display: inline-flex !important;
}

.d-inline-grid {
    display: inline-grid !important;
}

.d-inline-table {
    display: inline-table !important;
}

.d-inline-block {
    display: inline-block !important;
}

.d-inline-table {
    display: inline-table !important;
}

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

.d-table-row {
    display: table-row !important;
}

.d-table-cell {
    display: table-cell !important;
}

.d-table-caption {
    display: table-caption !important;
}

.d-table-header {
    display: table-header-group !important;
}

.d-table-footer {
    display: table-footer-group !important;
}

.f-none {
    float: none !important;
}

.f-left {
    float: left !important;
}

.f-right {
    float: right !important;
}

.f-center {
    float: center !important;
}

.w-perc-95 {
    width: 95% !important;
}

.px-4 {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.py-4 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

.mx-2 {
    margin-left: 2px !important;
    margin-right: 2px !important;
}

.mx-4 {
    margin-left: 4px !important;
    margin-right: 4px !important;
}

.my-2 {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.my-4 {
    margin-top: 4px !important;
    margin-bottom: 4px !important;
}


/*Default commands*/
#chatToggler {
    display: block;
}
/* ===== BOTÃO MOBILE CHAT ===== */
#mobileChatTopo.active {
    background: rgba(52, 152, 219, 0.2);
    border-radius: 3px;
}

#mobileChatTopo.active .fa-comment-alt {
    color: #3498db;
}

/* ===== BADGE DE MENSAGENS NOVAS ===== */
.chat-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    background-color: #ff4444;
    color: white;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border: 2px solid white;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
    z-index: 990;
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s ease;
}

.chat-badge.show {
    opacity: 1;
    transform: scale(1);
}

.chat-badge.pulse {
    animation: chatBadgePulse 0.6s ease-in-out 3;
}

@keyframes chatBadgePulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Badge responsivo */
@media (max-width: 768px) {
    .chat-badge {
        min-width: 15px;
        height: 15px;
        font-size: 9px;
        top: 3px;
        right: 50px;
    }
}

/* ===== BOTÃO FECHAR CHAT ===== */
.chat-close-btn {
    display: none;
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    color: #333;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
    transition: background-color 0.2s;
    font-size: 14px;
    z-index: 10;
    /* box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); */
}

.chat-close-btn:hover {
    background: rgba(255, 255, 255, 1);
}

.chat-close-btn:active {
    background: rgba(240, 240, 240, 1);
}

/* ===== CABEÇALHOS DOS MENUS ===== */
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background: #2c3e50;
    color: white;
    border-bottom: 1px solid #34495e;
    font-weight: bold;
    font-size: 14px;
}

/* Ocultar menu-header em telas grandes (desktop) */
@media only screen and (min-width: 611px) {
    .menu-header {
        display: none !important;
    }
}

.menu-title {
    flex: 1;
}

.menu-close-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 5px;
    border-radius: 3px;
    transition: background-color 0.2s;
    font-size: 16px;
}

.menu-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.menu-close-btn:active {
    background: rgba(255, 255, 255, 0.2);
}

/* ===== MENU HAMBÚRGUER RESPONSIVO ===== */
/* Estilo do ícone hambúrguer tradicional */
.hamburger-menu {
    cursor: pointer;
    transition: all 0.3s ease;
}

.hamburger-icon {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 20px;
    height: 16px;
    margin: 0 auto;
}

.hamburger-icon span {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #f5f5f5;
    border-radius: 1px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Animação do hambúrguer quando ativo */
.hamburger-menu.active .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.hamburger-menu.active .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

.hamburger-menu.active .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}



/* Breakpoints responsivos */
/* ===== SISTEMA PROGRESSIVO DE OCULTAÇÃO ===== */
/* Breakpoint 1: Ocultar textos apenas quando espaço fica realmente apertado */
@media only screen and (max-width: 800px) {

    #ctxSite .opt-text,
    #home .opt-text,
    #mainConfigs .opt-text,
    #mobileChatTopo .opt-text {
        display: none !important;
    }
}

/* Breakpoint 2: Site entra no hambúrguer */
@media only screen and (max-width: 610px) {
    #ctxSite {
        display: none !important;
    }

    /* Mostrar hambúrguer quando primeiro item some */
    #responsiveHamburger {
        display: inline-block !important;
    }
}

/* Breakpoint 3: Home entra no hambúrguer */
@media only screen and (max-width: 600px) {
    #home {
        display: none !important;
    }
}

/* Breakpoint 4: Módulos entram no hambúrguer */
@media only screen and (max-width: 590px) {
    #mainConfigs {
        display: none !important;
    }
}

/* ===== ITENS SEMPRE VISÍVEIS ===== */
/* Garantir que itens essenciais nunca sejam ocultos */
#version-alert-indicator,
#userMenuConfigs {
    display: inline-block !important;
}





/* Ajustar header para elementos restantes em telas pequenas */
@media only screen and (max-width: 600px) {
    header {
        overflow-x: auto;
        white-space: nowrap;
    }

    .header-opt {
        min-width: 48px;
        text-align: center;
    }

    .header-opt .opt-text {
        display: none !important;
    }

    .header-opt .fa,
    .header-opt .far,
    .header-opt .fab {
        font-size: 0.9rem !important;
    }

    .header-opt {
        padding: .7rem .3rem .5rem .3rem !important;
    }

    /* Manter logo e idiomas sempre visíveis */
    .logo {
        min-width: 120px;
    }

    #logo-idiomas {
        min-width: 1.5rem;
    }
}

@media only screen and (max-width: 480px) {
    /* Mostrar botão de fechar em telas pequenas */
    .chat-close-btn {
        display: block;
    }
    /* Ocultar chat em telas muito pequenas por padrão */
    .chat-module {
        display: none !important;
    }

    #chatToggler {
        display: none;
    }

    /* Mostrar chat quando ativo - regra mais específica */
    .chat-module.chat-active,
    .chat-module.cm-expanded.chat-active {
        display: block !important;
        visibility: visible !important;
        position: fixed !important;
        z-index: 1000 !important;
        right: 0 !important;
        top: 0 !important;
        height: 100vh !important;
        width: 100vw !important;
        background-color: #fff !important;
    }

    /* Garantir que chat seja oculto quando NÃO tem chat-active */
    .chat-module:not(.chat-active) {
        display: none !important;
    }

    /* Header ainda mais compacto */
    header {
        height: 3rem;
        padding: 0 .5rem;
        min-width: 320px;
        /* Garantir largura mínima */
    }

    /* Ajustar tamanho do logo-idiomas para 35px */
    #logo-idiomas {
        /* width: 25px !important; */
        min-width: 1.5rem !important;
        /* height: 35px !important; */
        margin-top: .3rem;
    }

    #logo-idiomas img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }



    .header-opt {
        padding: .5rem .2rem .3rem .2rem !important;
        min-width: 40px;
    }

    .header-opt .fa,
    .header-opt .far,
    .header-opt .fab {
        font-size: 1rem !important;
    }

    .logo {
        width: 100px;
        height: 24px;
        margin-top: .5rem;
    }

    #logo-idiomas {
        width: 30px;
        height: 20px;
        margin-top: .3rem;
    }


    .ctt-grid .ctt-icon {
        width: 36px;
        height: 36px;
        padding-left: 0 !important;
        padding-top: 7px;
        margin: .2rem .4rem 0 .5rem;
        background-color: #5fa2d0;
        color: #fff;
    }
    .contact-list {
        width: 100%;
        height: calc(100% - 72px);
        overflow-x: hidden;
        overflow-y: auto;
        float: left;
        margin-top: .5rem;
        padding-top: .5rem;
        background: #f5f5f5;
    }
}

/* Ocultar menu hambúrguer em telas grandes */
@media only screen and (min-width: 611px) {
    #responsiveHamburger {
        display: none !important;
    }
}

/* Ocultar menu hambúrguer por padrão */
#responsiveHamburger {
    display: none;
}

/* ===== FIM MENU HAMBÚRGUER RESPONSIVO ===== */



@media only screen and (orientation: portrait) and (max-device-width: 480px) {

    body,
    html {
        background-position: 17% 20%;
    }

    .greetings {
        backdrop-filter: blur(5px);
        top: 0;
        width: 100%;
        height: 100%;
        left: 0;
        margin: 0;
        padding: 0;
    }

    .login-card {
        top: 0 !important;
        border-radius: 0;
        -ms-transform: initial;
        transform: initial;
        margin: 0;
        height: 100%;
        width: 100%;
        left: 0;
        background: rgba(255, 255, 255, .65);
        overflow: auto;
    }

    .login-card .logo {
        height: 48px;
        width: 236px;
        margin-bottom: 5%;
    }

    .login-card .card-title {
        font-size: 1.5rem;
        margin-bottom: 12%;
    }

    .login-card .card-text {
        color: #464646;
        font-size: .95rem;
        margin-bottom: 10% !important;
        display: block;
    }

    .login-card form {
        margin-bottom: 0 !important;
    }

    .login-card .frm-field input {
        font-size: 1rem !important;
        padding: .75rem;
    }

    .login-card .frm-field>input:-webkit-autofill {
        font-family: var(--input-font);
        font-size: 1rem !important;
    }

    .login-card .frm-field-with-icon>input {
        padding-right: 3rem !important;
    }

    .login-card .frm-field-with-icon>input+span {
        margin-left: -3rem;
        width: 48px;
        margin-top: .05rem;
        padding: .8rem .5rem;
        font-size: 1.1rem;
    }

    .login-card .frm-field .btn {
        margin-top: 20% !important;
        height: auto;
        padding: .85rem 1rem;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .cookie-use>label {
        color: #464646 !important;
    }

    .logo {
        background-size: contain;
        width: 32px;
        margin: .5rem;
    }

    #logo-idiomas {
        display: inline-block;
        padding: .55rem;
        margin-top: 0.8rem !important;
    }

    #logo-idiomas .opt-text-idioma-pt {
        display: none !important;
    }

    #logo-idiomas .opt-text-idioma-en {
        display: none !important;
    }



    header {
        height: 100%;
    }

    #ctxSite {
        width: 80%;
        margin: 0;
        padding: .5rem;
    }

    #ctxSite .opt-text .fa-chevron-downD {
        float: right;
    }

    #localMenu {
        display: inline-block;
        padding: .55rem .5rem .5rem .5rem;
        margin: 0 !important;
        margin-left: .25rem !important;
    }

    #localMenu .fa-bars {
        font-size: 1.25rem !important;
    }

    #localMenu .opt-text {
        display: none !important;
    }

    #home {
        padding: .5rem;
        margin: 0 !important;
    }

    #home .fa-home {
        font-size: 1.25rem !important;
    }

    #home .opt-text {
        display: none !important;
    }

    #mainConfigs {
        padding: .5rem;
        margin: 0 !important;
    }

    #mainConfigs .fa-th {
        font-size: 1.25rem !important;
    }

    #mainConfigs .opt-text {
        display: none !important;
    }

    #mobileChatTopo {
        display: inline-block;
        padding: .55rem .5rem .5rem .5rem;
        margin: 0 !important;
    }

    #mobileChatTopo .fa-comment-alt {
        font-size: 1.25rem !important;
    }

    #mobileChatTopo .opt-text {
        display: none !important;
    }

    #userMenuConfigs {
        padding: .65rem .5rem .5rem .5rem;
        margin: 0 !important;
    }

    #userMenuConfigs .fa-user-circle {
        font-size: 1.65rem !important;
    }

    .main-menu {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
    }

    .main-menu>ul {
        width: 100%;
    }

    .chat-module {
        width: 48px;
        background-color: #F5F5F5;
    }

    .chat-module.cm-expanded {
        width: 256px;
    }

    .chat-module .fa-comments.chat-title {
        float: initial;
        padding-left: .5rem;
    }

    header {
        width: 100% !important;
    }

    .site-container {
        width: 100% !important;
        margin-left: 0;
    }


    .site-container .title {
        font-size: .9rem;
        padding: .25rem .5rem;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .generic-alert {
        right: 0;
        width: calc(100% - 3rem) !important;
    }

    .alert-text {
        margin-left: .5rem;
    }
}

@media only screen and (orientation: landscape) and (max-device-width: 670px) {

    body,
    html {
        background-position: 17% 20%;
    }

    .greetings {
        backdrop-filter: blur(5px);
        top: 0;
        width: 100%;
        height: 100%;
        left: 0;
        margin: 0;
        padding: 0;
    }

    .login-card {
        top: 0 !important;
        border-radius: 0;
        -ms-transform: initial;
        transform: initial;
        margin: 0;
        height: 100%;
        width: 100%;
        left: 0;
        background: rgba(255, 255, 255, .65);
        overflow: auto;
    }

    .login-card .logo {
        height: 32px;
        width: 208px;
        margin-bottom: 0;
        float: left;
        margin: 0;
    }

    .login-card .card-title {
        font-size: 1.25rem;
        margin-bottom: 0 !important;
        margin-top: 12vh !important;
        padding-bottom: .5vh;
    }

    .login-card .card-text {
        color: #464646;
        font-size: .85rem;
        margin: 0 0 2vh 0 !important;
        display: block;
    }

    .login-card form {
        margin: 0 .5vw !important;
    }

    .login-card .frm-field input {
        font-size: 1rem !important;
        padding: .75rem;
    }

    .login-card .frm-field>input:-webkit-autofill {
        font-family: var(--input-font);
        font-size: 1rem !important;
    }

    .login-card .frm-field-with-icon>input {
        padding-right: 3rem !important;
    }

    .login-card .frm-field-with-icon>input+span {
        margin-left: -3rem;
        width: 48px;
        margin-top: .05rem;
        padding: .8rem .5rem;
        font-size: 1.1rem;
    }

    .login-card .frm-field .btn {
        margin-top: 0 !important;
        height: auto;
        padding: .85rem 1rem;
        font-weight: bold;
        letter-spacing: 1px;
    }

    .cookie-use>label {
        color: #464646 !important;
    }

    #spinner {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 9999;
    }

    .loader {
        border: 6px solid #f3f3f3;
        border-top: 6px solid #3498db;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        animation: spin 0.8s linear infinite;
    }

    @keyframes spin {
        0% {
            transform: rotate(0deg);
        }

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

}

/* ===== CLASSES CSS PARA SYS.RENDER (CSP SAFE) ===== */
.sys-combo-icon-up {
    float: right;
    padding: 0.3em 0 0.2em 0.6em;
    border-left: 1px solid #ABB5C4;
    color: #ABB5C4;
}

.sys-combo-icon-down {
    float: right;
    padding: 0.3em 0 0.2em 0.6em;
    border-left: 1px solid #ABB5C4;
    color: #ABB5C4;
}

.sys-combo-menu-margin-up {
    margin-top: 2px;
}

.sys-combo-menu-margin-down {
    margin-top: -4px;
}

.sys-combo-menu-top-adjust {
    top: 4px !important;
}

/* ===== CLASSES CSS PARA MASTER.JS (CSP SAFE) ===== */
.view-container-opacity-0 {
    opacity: 0;
}

.view-container-opacity-1 {
    opacity: 1;
}

.view-container-transition {
    transition: opacity 0.3s ease-out;
}

/* ===== CLASSES CSS PARA USERS.JS (CSP SAFE) ===== */
.users-import-menu {
    position: absolute;
    transform: translateY(-50%);
    display: block;
    z-index: 9999;
}

/* ===== CLASSES CSS PARA WRITEUSER.JS (CSP SAFE) ===== */
.write-user-admin-icon {
    color: #f00;
    margin-left: 0.5rem;
}

/* ===== CLASSES CSS PARA SYS.JS (CSP SAFE) ===== */
.sys-expand-button {
    float: right;
    margin: -1.75rem 0.2rem 0 0;
}

.sys-tree-node-padding {
    padding-left: 1rem;
}

.sys-tree-node-padding-level-1 {
    padding-left: 1.4rem;
}

.sys-tree-node-padding-level-2 {
    padding-left: 1.8rem;
}

.sys-tree-node-padding-level-3 {
    padding-left: 2.2rem;
}

.sys-tree-node-padding-level-4 {
    padding-left: 2.6rem;
}

.sys-tree-node-padding-level-5 {
    padding-left: 3rem;
}

/* Botão de fechar chat - oculto por padrão em telas grandes */
/* .chat-close-btn {
    display: none;
} */

/* Chat Mobile Tela Cheia */
@media (max-width: 768px) {

    /* Mostrar botão de fechar em telas pequenas
    .chat-close-btn {
        display: block;
    } */

    .chat-module.mobile-fullscreen.chat-active {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        background-color: #fff !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        display: block !important;
        visibility: visible !important;
    }
}