/* SABA theme - P-Store */

:root {
    /* Paleta de Web y P-Web: teal #00A599, teal oscuro #008A8A, naranja #FF5800 y fondo mint #CBEDEA. */
    --saba-white: #FFFFFF;
    --saba-green: #00A599;
    --saba-green-dark: #008A8A;
    --saba-green-border: #007373;
    --saba-orange: #FF5800;
    --saba-header-gray: #CED7DB;
    --saba-background: #CBEDEA;
    --saba-panel: #FFFFFF;
    --saba-border: #B5B5B5;
    --saba-grey: #5A5A5A;
}

/* Base */

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

a {
    color: var(--saba-green-dark);
}

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

/* Header */

.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);
    }
}

.navbar-inverse-jf h4 {
    color: var(--saba-green-dark);
}

/* Logo */

.logo-layout {
    width: auto;
    height: 40px;
    margin: 5px 0 0 24px;
    object-fit: contain;
    object-position: left center;
}

/* Containers */

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

    .content h6,
    .content .fa-2x {
        color: var(--saba-green-dark);
    }

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

.p-papp.value-papp {
    color: var(--saba-green-dark);
}

.text-griffin {
    color: var(--saba-green-dark) !important;
}

/* Brand blocks */

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

.card.bg-success {
    background-color: var(--saba-green-dark) !important;
}

/* Buttons */

.bg-papp {
    background-color: var(--saba-green);
    border: 2px solid var(--saba-green-dark);
    color: var(--saba-white);
}

    .bg-papp:hover,
    .bg-papp:focus {
        background-color: var(--saba-green-dark);
        border-color: var(--saba-green-border);
        color: var(--saba-white);
    }

/* Forms */

.form-control,
.form-control-2 {
    color: var(--saba-grey);
    border-color: var(--saba-border);
}

    .form-control:focus,
    .form-control-2:focus {
        color: var(--saba-grey);
        border-color: var(--saba-green);
        box-shadow: 0 0 0 0.15rem rgba(0, 165, 153, 0.18);
    }

@media (min-width: 768px) {
    .form-control-2 {
        color: var(--saba-grey);
        border-color: var(--saba-border);
    }
}

.form-label-group > label {
    color: var(--saba-grey);
}

.form-label-group input:not(:placeholder-shown) ~ label,
.form-label-group select:not(:placeholder-shown) ~ label,
.form-label-group textarea:not(:placeholder-shown) ~ label {
    color: var(--saba-green-dark);
}

input[type="checkbox"] {
    accent-color: var(--saba-green);
}

/* Footer */

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

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

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