﻿@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;
}

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; }

.custom-tooltip {
    position: fixed;
    background: #ff4d00;
    color: #fff;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 13px;
    z-index: 999999;
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


.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: 35px; margin-right:1.5rem; }

.idiomas-pt { display:inline-block; background-image:var(--about-sys-idiomas-pt); background-repeat:no-repeat; background-size:contain; margin-top: 20px; margin-left:1rem; width: 35px; margin-right:1.5rem; }
.idiomas-en { display:inline-block; background-image:var(--about-sys-idiomas-en); background-repeat:no-repeat; background-size:contain; margin-top: 20px; margin-left:1rem; width: 35px; margin-right:1.5rem; }
.idiomas-es { display:inline-block; background-image:var(--about-sys-idiomas-es); background-repeat:no-repeat; background-size:contain; margin-top: 20px; margin-left:1rem; width: 35px; margin-right:1.5rem; }

.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; 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; }
.site-container { margin-left:200px; vertical-align:top; margin-right:50px; transition:margin-right .25s; }
.chat-module { width:48px; height:100%; position:absolute; 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:258px; }
.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; border:0; border-radius:.2rem; margin-top:1.02rem; transition:filter .2s; outline:0; opacity:.9; transition:opacity .2s, background .2s; vertical-align:top; }
.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-green-dark { background-color: #146c43 !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; 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; }

.hidden-field { display:none; }

.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;}

.fld-tn { width:96px; }
.fld-sm { width:128px; }
.fld-sm-140 { width: 140px;}
.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; }

.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:0; color:#F04E23; font-size:.85rem; }
.lateral-menu > ul > li > .fab { width:0; color:#F04E23; font-size:.85rem; }
.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% - 121px); 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:0; width:210px; 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; right:.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:#F04E23; float:right; margin-top:-1.1rem; transition:opacity .2s; pointer-events:none; }
.cm-expanded .ctt-acts { pointer-events:all; }
.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; }

#mobileChat, #localMenu { display:none; }

.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}

/* Estilo do botão de login com Microsoft */
.btn-microsoft {
    background-color: #0061F2; /* Cor do botão de login da Microsoft */
    color: white; /* Cor do texto */
    border: none; /* Sem borda */
    border-radius: 5px; /* Bordas arredondadas */
    /* font-size: 16px;  Tamanho da fonte */
    /* font-weight: bold;  Deixar o texto mais destacado */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px; /* Espaçamento interno */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Transição para efeito de hover */
}

    .btn-microsoft:hover {
        background-color: #0056b3; /* Efeito de hover (escurecendo o azul) */
    }

    .btn-microsoft img {
        height: 20px; /* Tamanho do logo da Microsoft */
        margin-right: 10px; /* Espaço entre o logo e o texto */
    }

    .btn-microsoft:focus {
        outline: none; /* Remover outline ao clicar */
    }




#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; }

@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:auto; width:32px; margin:.5rem; }

    #logo-idiomas { display:inline-block; padding:.55rem; margin:15px !important; }
    #logo-idiomas .opt-text-idioma-pt { display:none !important; }
    #logo-idiomas .opt-text-idioma-en { display:none !important; }

    .idiomas-pt { background-size:auto; width:32px; margin-right: 500px;}
    .idiomas-en { background-size:auto; width:32px; margin-right: 500px;}

    header { height:96px; }
    #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; }

    #mobileChat { display:inline-block; padding:.55rem .5rem .5rem .5rem; margin:0 !important; }
    #mobileChat .fa-comment-alt { font-size:1.25rem !important; }
    #mobileChat .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:0px; background-color:#F5F5F5; }
    .chat-module.cm-expanded { width:100%; }
    .chat-module .fa-comments.chat-title { float:initial; padding-left:.5rem; }

    header { width:100% !important; } 
    .site-container { width:100% !important; margin-left:0; }

    .lateral-menu { position:absolute; width:100%; left:-100vw; }

    .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);
        }
    }

}