/*
 * Globals
 */

:root {
    --bs-body-color: #212529;
    --bs-primary: #1b5988;
    --bs-success: #0f663e;
    --bs-danger: #c82030;
    --bs-dark: #32373c;
    --brand: #256181;
    --brand-2: #00B8B4;
    --brand-3: #E8F7FA;
    --brand-4: #EA9F5B;
    --brand-5: #FFEDA1;
}

body { background: var(--brand-3); color: var(--bs-body-color) }

/* colors */
.text-primary { color: var(--brand) !important; }
.bg-primary { background-color: var(--brand) !important; }
.text-success { color: var(--bs-success) !important; }
.bg-success, .btn-success { background-color: var(--bs-success) !important; }
.text-danger { color: var(--bs-danger) !important; }
.bg-danger, .btn-danger { background-color: var(--bs-danger) !important; }
.text-dark { color: var(--bs-dark) !important; }
.bg-dark, .btn-dark { background-color: var(--brand) !important; }
.modal .btn-secondary { color: #FFF; }
.bg-danger-subtle { background-color: #f9e4e6; }

/* btn */
.btn-primary { background: var(--brand); border-color: var(--brand); }
.btn-primary:hover { background: var(--brand-2); border-color: var(--brand-2); }
.btn-secondary { background: var(--brand-2); border-color: var(--brand-2); }
.btn-secondary:hover { background: #FFF; border-color: var(--brand-2); color: var(--brand-2); }
.btn-outline-primary:hover { background: var(--brand); border-color: var(--brand); }
.btn-outline-primary { color: var(--brand); border-color: var(--brand); }
.btn-success { border-color: var(--bs-success) !important; }
.btn-success:hover { background-color: #0b4d2e !important; }
.btn-danger { border-color: var(--bs-danger) !important; }
.btn-danger:hover { background-color: #ad1c2a !important; }
.btn-dark { border-color: var(--bs-dark) !important; }
.btn-dark:hover { background-color: #1e2124 !important; }

/* i actions */
.actions i { cursor: pointer; }

/*
 * Base structure
 */

.main-container { max-width: 65em; }


/*
 * Header
 */

.nav-masthead .nav-link {
    padding: .25rem 0;
    font-weight: 700;
    color: rgba(255, 255, 255, .5);
    background-color: transparent;
    border-bottom: .25rem solid transparent;
}

.nav-masthead .nav-link:hover,
.nav-masthead .nav-link:focus {
    border-bottom-color: rgba(255, 255, 255, .25);
}

.nav-masthead .nav-link + .nav-link {
    margin-left: 1rem;
}

.nav-masthead .active {
    color: #fff;
    border-bottom-color: #fff;
}

/*
 * Auth
 */

.login .card {
    max-width: 400px;
    width:100%;
}

/*
 * Dual listbox
 */
.bootstrap-duallistbox-container select.form-control{
    font-size: .9rem;
}

.bootstrap-duallistbox-container .glyphicon::before {
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: 400 !important;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -.125em;
    font-size: 1.5rem;
}

.bootstrap-duallistbox-container .box1 .buttons .glyphicon:first-child,
.bootstrap-duallistbox-container .box2 .buttons .glyphicon:first-child {
    display: none;
}

.bootstrap-duallistbox-container .glyphicon.glyphicon-arrow-right::before {
    content: "\f137";
}

.bootstrap-duallistbox-container .glyphicon.glyphicon-arrow-left::before {
    content: "\f12e";
}

/* signin */
.form-signin { max-width: 450px; padding: 1rem; }

/* Navbar */
.app-navbar { background: var(--brand); }
.app-navbar .nav-link { color: rgba(255, 255, 255, .75); }
.app-navbar .nav-link:hover { color: #fff; }
.app-navbar .nav-link.active { color: #fff; font-weight: 600; border-bottom: 2px solid var(--brand-2); }

/* Cartes KPI */
.kpi-card { border: 0; border-left: 4px solid var(--brand); border-radius: .6rem; }
.kpi-card .kpi-label { font-size: .78rem; color: #6b7a90; text-transform: uppercase; letter-spacing: .02em; }
.kpi-card .kpi-value { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.kpi-card .kpi-sub { font-size: .8rem; color: #8693a5; }
.kpi-card.accent-warn { border-left-color: #c9851f; }
.kpi-card.accent-ok   { border-left-color: var(--brand-2); }