/* SABA theme - Portugal */

:root {
    --saba-text: #00857C;
    --saba-white: #FFFFFF;
    --saba-green: #00857C;
    --saba-green-dark: #006E67;
    --saba-green-border: #005952;
    --saba-orange: #D14900;
    --saba-orange-dark: #A73A00;
    --saba-menu-gray: #555254;
    --saba-menu-gray-dark: #403D3F;
    --saba-menu-gray-hover: #6A6668;
    --saba-header-gray: #CED7DB;
    --saba-background: #F5F7F8;
    --saba-panel: #FFFFFF;
    --saba-border: #B5B5B5;
    --saba-border-strong: #7D7D7D;
    --saba-input: #EFEFEF;
    --saba-error: #D32F2F;
}

/* Base */

body {
    color: var(--saba-text);
    background-color: var(--saba-background);
}

a {
    color: var(--saba-text);
}

    a:hover,
    a:focus {
        color: var(--saba-green);
    }

/* Header */

.navbar-inverse,
.navbar-inverse-jf {
    background-color: var(--saba-header-gray);
    border-color: var(--saba-header-gray);
    border-bottom: 10px solid var(--saba-green);
}

@media (min-width: 300px) {
    .navbar-inverse-jf {
        background-color: var(--saba-header-gray);
        border-color: var(--saba-header-gray);
        border-bottom-color: var(--saba-green);
    }
}

@media (min-width: 400px) {
    .navbar-inverse-jf {
        background-color: var(--saba-header-gray);
        border-color: var(--saba-header-gray);
        border-bottom-color: var(--saba-green);
    }
}

@media (min-width: 480px) {
    .navbar-inverse-jf {
        background-color: var(--saba-header-gray);
        border-color: var(--saba-header-gray);
        border-bottom-color: var(--saba-green);
    }
}

/* Sidebar / left menu */

.sidebar,
.sidebar .nav-item,
.sidebar .nav-link,
.navbar-nav.sidebar,
#accordionSidebar {
    background-color: var(--saba-menu-gray) !important;
    color: var(--saba-white) !important;
}

    .sidebar .nav-link,
    .sidebar .nav-link span,
    .sidebar .nav-link i,
    .navbar-nav.sidebar .nav-link,
    .navbar-nav.sidebar .nav-link span,
    .navbar-nav.sidebar .nav-link i {
        color: var(--saba-white) !important;
    }

        .sidebar .nav-link:hover,
        .sidebar .nav-link:focus,
        .navbar-nav.sidebar .nav-link:hover,
        .navbar-nav.sidebar .nav-link:focus {
            background-color: var(--saba-menu-gray-hover) !important;
            color: var(--saba-white) !important;
        }

    /* Submenu desplegado */
    .sidebar .collapse-inner,
    .sidebar .collapse-menu,
    .sidebar .dropdown-menu {
        background-color: var(--saba-white) !important;
        border: 1px solid var(--saba-border-strong) !important;
    }

    .sidebar .collapse-item,
    .sidebar .dropdown-item {
        color: var(--saba-text) !important;
        background-color: var(--saba-white) !important;
    }

        .sidebar .collapse-item:hover,
        .sidebar .dropdown-item:hover {
            background-color: #E7F3F1 !important;
            color: var(--saba-green) !important;
        }

        /* Elemento activo del submenu */
        .sidebar .collapse-item.active,
        .sidebar .dropdown-item.active,
        .sidebar .collapse-item.selected,
        .sidebar .dropdown-item.selected {
            background-color: var(--saba-green) !important;
            color: var(--saba-white) !important;
            font-weight: 600;
        }

    /* Subtítulos internos tipo "Dados mestre" */
    .sidebar .collapse-header,
    .sidebar .submenu-title,
    .sidebar .nav-subtitle {
        background-color: var(--saba-green) !important;
        color: var(--saba-white) !important;
        font-weight: 600;
    }

/* Logo */

.icon-layout {
    width: auto;
    height: 42px;
    max-width: 180px;
    object-fit: contain;
    object-position: left center;
}

@media (min-width: 400px) {
    .icon-layout {
        width: auto;
        height: 48px;
        max-width: 200px;
    }
}

@media (min-width: 480px) {
    .icon-layout {
        width: auto;
        height: 56px;
        max-width: 220px;
    }
}

/* Texts */

.session-icon-layout {
    color: var(--saba-orange) !important;
}


.session-text-layout,
.text-griffin,
.text,
.text a,
.titleContent,
.iconsTitleContent,
.title-page-jf,
.closeSpan,
.closeSpan:hover {
    color: var(--saba-text) !important;
}

/* Brand blocks */

.bg-griffin,
.activeMenu {
    background-color: var(--saba-green) !important;
    color: var(--saba-white) !important;
}

.spanMenuActive {
    background-color: var(--saba-green) !important;
    color: var(--saba-white) !important;
}

/* Tables */

.bg-table {
    background-color: #D7DCDD;
    color: var(--saba-text);
    border-bottom: 2px solid var(--saba-border-strong);
}

.bg-table-detail,
.dataTables_processing {
    background-color: var(--saba-green);
    color: var(--saba-white);
}

table.dataTable tbody tr.selected {
    background-color: rgba(0, 133, 124, 0.25);
}

table.dataTable thead th,
table.dataTable tfoot th {
    background-color: #D7DCDD;
    color: var(--saba-text);
    border-bottom: 2px solid var(--saba-border-strong);
}

/* Forms */

.form-control,
.form-control-2,
.combo-filtro,
.dataTables_length .form-control {
    color: var(--saba-text);
    border-color: var(--saba-border);
}

.inputForm,
.inputTextArea,
.inputInline,
.numberInput,
.numberInputParking,
.mediumInput,
option {
    background-color: var(--saba-input) !important;
    border-color: var(--saba-input) !important;
    color: var(--saba-text) !important;
}

    .inputTextArea:focus,
    .inputForm:focus,
    .inputInline:focus,
    .numberInput:focus,
    .numberInputParking:focus,
    .mediumInput:focus,
    .form-control:focus,
    .form-control-2:focus,
    .combo-filtro:focus {
        border-color: var(--saba-green) !important;
        box-shadow: 0 0 0 0.15rem rgba(0, 133, 124, 0.18);
    }

/* Containers */

.global_menu_content {
    background-color: var(--saba-background);
}

.content {
    border-color: var(--saba-border);
    background-color: var(--saba-panel);
}

/* Buttons */

.btn-primary,
.btn_createUpdate {
    background-color: var(--saba-green) !important;
    border: 2px solid var(--saba-green-dark) !important;
    color: var(--saba-white) !important;
    font-weight: 600;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn_createUpdate:hover,
    .btn_createUpdate:focus {
        background-color: var(--saba-green-dark) !important;
        border-color: var(--saba-green-border) !important;
        color: var(--saba-white) !important;
    }

.btn-secondary,
.btn_cancel {
    background-color: var(--saba-menu-gray) !important;
    border: 2px solid var(--saba-menu-gray-dark) !important;
    color: var(--saba-white) !important;
    font-weight: 600;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn_cancel:hover,
    .btn_cancel:focus {
        background-color: var(--saba-menu-gray-hover) !important;
        border-color: var(--saba-menu-gray-dark) !important;
        color: var(--saba-white) !important;
    }

.btn-link {
    color: var(--saba-text) !important;
}

    .btn-link:hover,
    .btn-link:focus {
        color: var(--saba-green) !important;
    }

/* Modals / jQuery UI */

.ui-widget-header {
    background-color: var(--saba-green);
    color: var(--saba-white);
}

.ui-dialog .ui-dialog-buttonpane {
    border-top-color: var(--saba-green);
}

.modal-dialog,
.modal-header {
    color: var(--saba-text);
}

.modal-footer {
    background-color: var(--saba-green);
}

    .modal-footer .bt-left,
    .modal-footer .bt-right {
        background-color: var(--saba-green);
        color: var(--saba-white);
    }

        .modal-footer .bt-left:hover,
        .modal-footer .bt-right:hover {
            background-color: var(--saba-green-dark);
        }

    .modal-footer .bt-left {
        border-right-color: var(--saba-white) !important;
    }

/* Checkbox legacy */

.checkboxThree {
    background-color: var(--saba-green);
}

    .checkboxThree:after {
        color: var(--saba-header-gray);
    }

    .checkboxThree label {
        background-color: var(--saba-header-gray);
    }

/* Errors */

.errorlogi,
.field-validation-error,
p.val_error {
    color: var(--saba-error) !important;
}

/* Toast */

.messagePopUpBody,
.messagePopUpIcon,
.messagePopUpIcon.warning,
.messagePopUpIcon.error,
.messagePopUpClose {
    background-color: var(--saba-text);
}

/* Footer */

footer.sticky-griffin-footer,
footer.sticky-griffin-login-footer {
    background-color: var(--saba-header-gray);
    color: var(--saba-text);
}

    footer.sticky-griffin-footer a,
    footer.sticky-griffin-login-footer a {
        color: var(--saba-text);
    }

        footer.sticky-griffin-footer a:hover,
        footer.sticky-griffin-login-footer a:hover {
            color: var(--saba-green);
        }

    footer.sticky-griffin-footer .separator,
    footer.sticky-griffin-login-footer .separator {
        color: var(--saba-text);
    }

/* Menú principal lateral */

#accordionSidebar .nav-link,
#accordionSidebar .nav-link span,
#accordionSidebar .nav-link i,
.navbar-nav.sidebar .nav-link,
.navbar-nav.sidebar .nav-link span,
.navbar-nav.sidebar .nav-link i {
    color: var(--saba-white) !important;
}

    #accordionSidebar .nav-link:hover,
    #accordionSidebar .nav-link:focus,
    #accordionSidebar .nav-link:hover span,
    #accordionSidebar .nav-link:focus span,
    #accordionSidebar .nav-link:hover i,
    #accordionSidebar .nav-link:focus i {
        background-color: var(--saba-menu-gray-hover) !important;
        color: var(--saba-white) !important;
    }

/* Menús desplegables laterales */

#accordionSidebar .dropdown-menu {
    background-color: var(--saba-white) !important;
    border: 1px solid var(--saba-border-strong) !important;
}

    #accordionSidebar .dropdown-menu .dropdown-item {
        color: var(--saba-text) !important;
        background-color: var(--saba-white) !important;
    }

        #accordionSidebar .dropdown-menu .dropdown-item:hover,
        #accordionSidebar .dropdown-menu .dropdown-item:focus {
            color: var(--saba-green) !important;
            background-color: #E7F3F1 !important;
        }

/* Separadores inline style legacy */

#accordionSidebar [style*="#ffde14"],
#accordionSidebar [style*="#FFDE14"],
.dropdown-menu [style*="#ffde14"],
.dropdown-menu [style*="#FFDE14"] {
    background-color: var(--saba-green) !important;
    color: var(--saba-white) !important;
    border-color: var(--saba-green-dark) !important;
}


/* LOGIN LOGO */

.login-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 560px;
    max-height: 140px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 26px;
    object-fit: contain;
}

@media (max-width: 768px) {

    .login-logo {
        max-width: 340px;
        max-height: 100px;
        width: 85%;
    }
}

.login-container {
    padding-top: 40px;
}

.card-login {
    margin-top: -10px;
    max-width: 440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

    .card-login .card-img-top {
        width: auto;
        max-width: 340px;
        height: auto;
        margin: 0 auto 18px auto;
        display: block;
    }

    .login-card-body,
    .card-login .card-body {
        background: rgba(255,255,255,0.10);
        padding: 14px 16px;
        border-radius: 8px;
        backdrop-filter: blur(2px);
    }

        .login-card-body form,
        .card-login .card-body form,
        .card-login .form-group {
            width: 100%;
        }

    .card-login .form-group {
        margin-bottom: 22px;
    }

    .card-login .form-control {
        height: 42px;
        border: 2px solid rgba(255,255,255,0.35);
        background: rgba(255,255,255,0.92);
        color: #222C32;
        font-size: 14px;
    }

    .card-login .btn-primary {
        height: 42px;
        font-size: 16px;
    }

    .card-login .dropdown,
    .card-login .language-selector {
        margin-top: 18px;
    }

@media (min-width: 768px) {
    .card-login {
        min-width: 520px;
    }
}

@media (min-height: 900px) {
    .login-container {
        padding-top: 80px;
    }
}

@media (max-width: 576px) {
    .card-login {
        max-width: 92vw;
    }

        .login-card-body,
        .card-login .card-body {
            padding: 22px;
        }

        .card-login .card-img-top {
            max-width: 260px;
        }
}