:root {
    --teal: #009DA4;
    --teal-light: #7AC8CC;
    --green: #00BD8D;
    --lime: #00BD8D;
    --yellow: #E8B722;
    --yellow-dark: #E8B722;
    --yellow-light: #FDF8E9;
    --blue-light: #5EBCE4;
    --deepskyblue: #5EBCE4;
    --blue-dark: #328AEC;
    --royalblue: #328AEC;
    --red: #FF5858;
    --gray-light: #5A5D63;
    --gray-dark: #3B3E45;
    --white: #FFF;
    --black: #000;
    /*cores dos produtos*/
    --quattrus: #009DA4;
    --gestiona: #008CFF;
    --bonus: #542CA7;
    --monitor: #EC801B;
    --project: #970F53;
    --conexa: #000059;
    /*cores da fonte ou ícone*/
    --fonte: #5A5D63;
    --desativado: #AFB0B2;
    --inativo: #C1C2C5;
    --cabecalho-grid: #F4F4F4;
    --cabecalho-grid-icones-hover: #E6E6E6;
    --menu-lateral: #31353C;
    --menu-lateral-icones-hover: #5A5D63;
    --linha-grid: #C1C2C5;
    --linha-grid-selecionada: #EDF8F9;
    --linha-grid-hover: #F7F7F7;
    --tooltip: #31353C;
    --menu-contexto-hover: #F3F3F3;
}

/*Botões Padrão Quattrus*/

.botao-sem-cor {
    background-color: var(--white);
    border: 1px solid var(--inativo);
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    height: 35px;
    width: 115px;
}

    .botao-sem-cor.x-btn-default-small .x-btn-inner,
    .botao-sem-cor .x-btn-inner a,
    .botao-sem-cor .x6-btn-inner {
        color: var(--fonte);
        font: 600 12px Roboto, sans-serif;
        text-transform: none;
    }

    .botao-sem-cor:hover {
        background-color: var(--inativo);
        border-color: var(--inativo);
        color: var(--fonte);
    }

    .botao-sem-cor.x-btn-focus,
    .botao-sem-cor.x-btn-default-small-focus,
    .botao-sem-cor.x6-btn-focus,
    .botao-sem-cor.x6-btn-default-small-focus {
        background-color: var(--inativo) !important;
        border-style: none !important;
        box-shadow: none !important;
    }

.botao-com-cor {
    background-color: var(--teal);
    border: 1px solid #4CBEB8;
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    height: 35px;
    width: 115px;
}

    .botao-com-cor .x-btn-inner a,
    .botao-com-cor .x6-btn-inner,
    .botao-com-cor .x-btn-inner-default-small {
        color: var(--white);
        font: 600 12px Roboto, sans-serif;
        text-transform: none;
    }

    .botao-com-cor:hover {
        background-color: var(--teal-light);
        border-color: var(--teal-light);
        color: white;
    }

    .botao-com-cor.x-btn-focus,
    .botao-com-cor.x-btn-default-small-focus,
    .botao-com-cor.x6-btn-focus,
    .botao-com-cor.x6-btn-default-small-focus {
        background-color: var(--teal-light) !important;
        border-style: none !important;
        box-shadow: none !important;
    }

.x6-message-box.caixa-mensagem-ok .x6-toolbar.x6-docked.x6-toolbar-footer a {
    background-color: var(--teal);
    border: 1px solid var(--teal);
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    height: 35px;
    width: 115px;
}

.caixa-mensagem-ok.x6-btn-focus,
.caixa-mensagem-ok.x6-btn-default-small-focus {
    background-color: var(--teal-light) !important;
    border-style: none !important;
    box-shadow: none !important;
}

.x6-message-box.caixa-mensagem-ok a .x6-btn-inner {
    color: var(--white);
    font: 600 12px Roboto, sans-serif;
    text-transform: none;
}

.x6-message-box.caixa-mensagem-ok .x6-toolbar.x6-docked.x6-toolbar-footer a:hover {
    background-color: var(--teal-light);
    border-color: var(--teal-light);
    color: white;
}

.botao-cinza {
    background-color: var(--gray-light);
    border: 1px solid var(--gray-light);
    text-align: center;
    border-radius: 8px;
    cursor: pointer;
    height: 35px;
    width: 115px;
}
.checkboxPadrao.x6-form-cb-checked .x6-form-checkbox {
    color: #009da4 !important;
}
.checkboxPadrao .x6-form-checkbox.x6-form-checkbox-focus.x6-form-checkbox-default {
    color: #009da4 !important;
}
/*RadioButtons do sistema*/
.x6-form-cb-checked .x6-form-radio {
    color: #009da4 !important;
}
.x6-ssm-extender-drag-handle {
    background-color: #009da4 !important;
}
.x6-tool-close {
    color: #31353C !important;
}
.x6-tool-maximize {
    color: #31353C !important;
}
.x6-tool-collapse-top,
.x6-tool-expand-bottom {
    color: #31353C !important;
}
/*Pagingtoolbar icones*/
.x6-btn-icon-el.x6-tbar-loading,
.x6-btn-icon-el.x6-tbar-page-last,
.x6-btn-icon-el.x6-tbar-page-next {
    color: #009da4 !important;
}
/*Cor datefield*/
.x6-datepicker-selected div.x6-datepicker-date {
    background-color: #009da4 !important
}

.x6-datepicker-footer .x6-btn-inner-default-toolbar-small {
    color: #009da4 !important
}
.x6-monthpicker-item a.x6-monthpicker-selected {
    background-color: #009da4 !important
}
.x6-monthpicker-buttons .x6-btn-inner-default-toolbar-small {
    color: #009da4 !important
}
/*Estilo param as mensagens de alerta*/
.msgAlerta .x6-toolbar-footer .x6-btn-default-small {
    background-color: transparent !important; 
    color: #009da4 !important;
}

.msgAlerta .x6-toolbar-footer .x6-btn-default-small.x6-btn-focus,
.msgAlerta .x6-toolbar-footer .x6-btn-default-small:focus {
    background-color: #009da4 !important; 
    color: #fff !important;
}

.msgAlerta .x6-toolbar-footer .x6-btn-inner-default-small {
    color: #009da4 !important; 
}

.msgAlerta .x6-toolbar-footer .x6-btn-default-small.x6-btn-focus .x6-btn-inner-default-small,
.msgAlerta .x6-toolbar-footer .x6-btn-default-small:focus .x6-btn-inner-default-small {
    color: #fff !important; 
}


/* Estilo para as barras de rolagem em todo o sistema */
::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #888;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.botao-cinza .x6-btn-inner {
    color: var(--white);
    font: 600 12px Roboto, sans-serif;
    text-transform: none;
}

    .botao-cinza:hover {
        background-color: var(--gray-dark);
        border: 1px solid var(--gray-dark);
    }

    .botao-cinza.x6-btn-focus,
    .botao-cinza.x6-btn-default-small-focus {
        background-color: #dbdbdb !important;
        border-style: none !important;
        box-shadow: none !important;
    }

/*Alinhamento da modal*/

.alinhamento-janela-direita {
    position: fixed !important;
    right: 0px !important;
    left: auto !important;
    top: 50px !important;
    height: 95% !important;
    /*overflow: auto;*/
    box-shadow: none !important;
}

.alinhamento-janela-direita-EGU {
    position: fixed !important;
    right: 0px !important;
    left: auto !important;
    top: 0px !important;
    height: 100% !important;
    overflow: auto;
    box-shadow: rgb(136 136 136) 0px 0px 6px !important;
}

.alinhamento-direita-EGU {
    right: 450px !important;
}


/*Avatar*/

.avatar-sm {
    width: 28px !important;
    position: absolute;
    border-radius: 50%;
}

/*Toast*/

.toast {
    background: var(--yellow-light);
    width: 400px !important;
    padding: 5px 17px;
    top: 8% !important;
    left: 73% !important;
    border: 1px solid var(--yellow-dark);
    box-shadow: none;
    animation: show_toast 0.3s ease forwards;
}

@keyframes show_toast {
    0% {
        transform: translateX(100%)
    }
}

.toast .x6-docked {
    padding: 10px 5px 0px 17px;
}

.toast .x6-tool.x6-box-item.x6-tool-default.x6-tool-after-title {
    left: 94% !important;
    top: 0 !important;
}

.toast .x6-tool-close::before {
    color: var(--gray-light);
}

.toast .x6-toolbar-text-default,
.toast .x6-autocontainer-innerCt {
    padding: 0px 0px 3px 0px !important;
    font: 15px Roboto, sans-serif;
    background: var(--yellow-light);
    color: var(--gray-light);
}

.toast:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background-color: var(--yellow-dark);
    box-shadow: 2px 2px 40px 0 rgba(0, 0, 0, 0.20), 2px 2px 5px 0 rgba(0, 0, 0, 0.08) !important;
}

.avatar img {
    border-radius: 50%;
    position: relative;
    left: -5px;
    z-index: 1;
    width: 50px;
}

/*Avatar (Ultimate)*/

.avatars {
    display: flex;
    list-style-type: none;
    margin: auto;
    padding: 0px 10px;
    flex-direction: row;
}

.avatars__item {
    background-color: #596376;
    /*border: 2px solid #1f2532;*/
    border-radius: 100%;
    color: #fff;
    /*display: block;*/
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 100;
    height: 45px;
    width: 45px;
    line-height: 45px;
    text-align: center;
    transition: margin 0.1s ease-in-out;
    overflow: hidden;
    margin-left: -5px;

    display: flex;
    align-items: center;
    justify-content: center;
}

    .avatars__item:first-child {
        z-index: 5;
    }

    .avatars__item:last-child {
        z-index: 0;
    }

    .avatars__item img {
        width: 100%;
    }

/*.avatars:hover .avatars__item {
    margin-right: 10px;
}*/

/*botão para colapsar e expandir a header */

.buttonCollapsed {
    border-radius: 50%;
    width: 20px !important;
    height: 20px !important;
    background-color: #F5F5F5 !important;
    padding: 0 !important;
}

.chevronIcon {
    background-image: url('../../images/icones_menu3/chevron-up-solid.svg');
    background-size: 9px 9px;
    color: var(--gray-light);
}
.iconeLixeira {
    background: url('../../images/icone_lixeira.svg') no-repeat;
    width: 25px !important;
    height: 25px !important;
}

.expand_more::before {
    content: 'expand_less';
    font: 16px/16px 'Material Icons', 'FontAwesome';
    color: var(--gray-light);
}

.expand_less::before {
    content: 'expand_more';
    font: 16px/16px 'Material Icons', 'FontAwesome';
    color: var(--gray-light);
}

/* Override grid header (toolbar cinza) 
    TODO: Corrigir essas questões via tema
*/
.x6-panel-header-default {
    background-color: var(--cabecalho-grid) !important;
    padding: 9px 0px 9px 15px !important; /*40px de altura*/
    display: flex;
    align-items: center;
}

.x6-panel-header-title-default > .x6-title-text-default {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--fonte);
}
}

/*botão checkbox*/

.checkbox .x6-form-checkbox-default {
    color: var(--gray-light);
    font-size: 20px;
}

.checkbox.x6-form-cb-checked .x6-form-checkbox,
.checkbox .x6-form-checkbox-focus.x6-form-checkbox-default {
    color: var(--teal) !important;
    font-size: 20px;
}
}

.x6-tool-img {
    color: var(--gray-light);
}

.btn-checkin-badge {
    width: 20px;
    height: 20px;
    background: var(--red);
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    margin: -30px 52px;
    font-size: 14px;
}

.icon-three-dots {
    background-size: auto;
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(/JS/icg-2.0/dashboard/resourses/icones/tres-pontos.svg) !important;
    background-color: transparent !important;
}

/* Override ícone de menu no botão (seta azul criada).
    Correção paliativa para ocultar seta azul criada no botão quando a propriedade menu é utilizada
    TODO: Corrigir essas questões via tema
*/
.x6-btn-wrap-default-small.x6-btn-arrow-right::after {
    content: none;
}

/*Header / Breadcrumb*/
.breadcrumb-icon-left {
    /* color: var(--fonte) !important;*/
    color: #009da4 !important; /* alterção para cor do ícone corresponder ao Breadcrumb do design system */
    font-size: 12px;
    padding: 3px;
}

/*Badges*/
.badge {
    width: fit-content;
    padding: 5px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 23px;
    font-weight: 700;
}
    .badge.gray {
        background: #82899050;
        color: #828990;
    }
    .badge.blue {
        background: #59a3e750;
        color: #59a3e7;
    }
    .badge.red {
        background: #d8615e50;
        color: #d8615e;
    }
    .badge.yellow {
        background: #cfca3250;
        color: #cfca32;
    }
    .badge.green {
        background: #3bc77050;
        color: #3bc770;
    }
    .badge.violet {
        background: #7f6ca950;
        color: #7f6ca9;
    }
    .badge.orange {
        background: #f2a51850;
        color: #f2a518;
    }

/*Portal Quattrus*/
.box-mapa-conexa-content {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}