/* Consulta Fácil - customizações do Roundcube */
/* =========================================================
   CONSULTA FÁCIL - ROUNDCUBE CUSTOM SKIN
   ========================================================= */

:root {
    --cf-green: #069E6F;
    --cf-blue: #3E7A96;
    --cf-blue-dark: #2F6C81;
    --cf-navy: #2D2F48;
    --cf-cyan: #00BBB4;
    --cf-bg: #F5F7F8;
    --cf-border: #DDE4E7;
}

/* =========================================================
   LOGIN
   ========================================================= */

body.task-login {
    background:
        linear-gradient(
            135deg,
            rgba(6, 158, 111, 0.06),
            rgba(0, 187, 180, 0.03) 45%,
            rgba(45, 47, 72, 0.05)
        ),
        #ffffff;
}

.task-login #layout {
    background: transparent;
}

.task-login #layout-content {
    background: transparent;
}

/* Logo */

.task-login #logo {
    margin-bottom: 2rem;
}

.task-login #logo img {
    width: auto;
    max-width: 280px;
    max-height: 110px;
}

/* Formulário */

.task-login .formcontent {
    max-width: 400px;
}

.task-login .input-group-text {
    background: #ffffff;
    border-color: var(--cf-border);
    color: var(--cf-navy);
}

.task-login input.form-control {
    border-color: var(--cf-border);
    background: #ffffff;
    color: var(--cf-navy);
    box-shadow: none;
}

.task-login input.form-control:focus {
    border-color: var(--cf-green);
    box-shadow: 0 0 0 0.15rem rgba(6, 158, 111, 0.12);
}

/* Botão Entrar */

.task-login .button.mainaction,
.task-login .btn-primary {
    background: var(--cf-green) !important;
    border-color: var(--cf-green) !important;
    color: #ffffff !important;
    border-radius: 7px;
    font-weight: 600;
    transition: 0.2s ease;
}

.task-login .button.mainaction:hover,
.task-login .btn-primary:hover {
    background: #05875f !important;
    border-color: #05875f !important;
}

/* Texto inferior */

.task-login #login-footer,
.task-login .support-link {
    color: #6d7479;
}

.task-login a {
    color: var(--cf-green);
}

.task-login a:hover {
    color: var(--cf-blue-dark);
}


/* =========================================================
   INTERFACE INTERNA
   ========================================================= */

/* Barra lateral principal */

#layout-menu {
    background: var(--cf-navy);
}

#layout-menu .popover-header,
#layout-menu .header {
    background: var(--cf-navy);
}

/* Ícones/menu */

#layout-menu .button {
    color: rgba(255, 255, 255, 0.8);
}

#layout-menu .button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}

#layout-menu .button.selected,
#layout-menu .button.active {
    background: var(--cf-green);
    color: #ffffff;
}

/* Links */

a {
    color: var(--cf-green);
}

a:hover {
    color: var(--cf-blue-dark);
}

/* Cabeçalhos */

.header-title {
    color: var(--cf-navy);
}

/* Itens selecionados */

.listing li.selected,
.listing tr.selected td,
.messagelist tr.selected td {
    background-color: rgba(6, 158, 111, 0.10) !important;
}

/* Botões principais */

.btn-primary,
button.mainaction,
.button.mainaction {
    background-color: var(--cf-green) !important;
    border-color: var(--cf-green) !important;
}

.btn-primary:hover,
button.mainaction:hover,
.button.mainaction:hover {
    background-color: #05875f !important;
    border-color: #05875f !important;
}

/* Campos */

.form-control:focus,
.custom-select:focus {
    border-color: var(--cf-green);
    box-shadow: 0 0 0 0.15rem rgba(6, 158, 111, 0.12);
}

/* Badges / indicadores */

.badge-primary {
    background-color: var(--cf-green);
}

/* Barra de progresso */

.progress-bar {
    background-color: var(--cf-cyan);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 768px) {
    .task-login #logo img {
        max-width: 220px;
        max-height: 90px;
    }
}
/* =========================================================
   MENU LATERAL
   ========================================================= */

#layout-menu {
    background: #2D2F48 !important;
}

#taskmenu {
    background: #2D2F48 !important;
}

#taskmenu a {
    color: rgba(255,255,255,.88) !important;
    transition: background .18s ease, color .18s ease;
}

#taskmenu a:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}

#taskmenu a.selected,
#taskmenu a.active {
    background: #069E6F !important;
    color: #fff !important;
}

/* Logo da barra lateral */
#layout-menu #logo,
#layout-menu .logo {
    background: #2D2F48 !important;
}

#layout-menu #logo img,
#layout-menu .logo img {
    width: auto !important;
    max-width: 48px !important;
    max-height: 58px !important;
    object-fit: contain;
}

/* Área inferior do menu */
#layout-menu .special-buttons {
    background: #25273d !important;
}
/* Destaques gerais */

#layout-content .header,
#layout-list .header {
    border-color: #DDE4E7 !important;
}

a,
a:visited {
    color: #069E6F;
}

a:hover {
    color: #2F6C81;
}

/* Seleções e indicadores */

.listing li.selected,
.listing tr.selected > td,
.messagelist tr.selected > td {
    background: rgba(6, 158, 111, .10) !important;
}

/* Indicadores / progresso */

.progress-bar,
.quota-widget .bar {
    background-color: #00BBB4 !important;
}