/*
 * Backoffice theme: a light, flat refresh in the WeGetFinancing palette.
 * Loaded by portal_base.html after webpack-main.css and portal.css; colours,
 * borders, radii and shadows only, so no page layout changes. Brand palette:
 * the website's blues (logo #3973B9) and mktwidgets' navy and neutrals.
 */
body.skin-black-light {
    --wgf-blue: #3973b9;
    --wgf-blue-dark: #2c5c96;
    --wgf-sky: #69b6e6;
    --wgf-tint: #eaf1fb;
    --wgf-navy: #071d3a;
    --wgf-ink: #2f3a4f;
    --wgf-muted: #59617d;
    --wgf-soft: #f4f8ff;
    --wgf-line: #dfe5ef;

    background-color: #f7f9fc;
    color: var(--wgf-ink);
}
/* Text fields only: buttons keep their own colours. */
body.skin-black-light input:not([type="submit"]):not([type="button"]):not([type="reset"]),
body.skin-black-light textarea,
body.skin-black-light select option {
    color: var(--wgf-ink);
}
body.skin-black-light a {
    color: var(--wgf-blue);
}
body.skin-black-light a:hover,
body.skin-black-light a:focus {
    color: var(--wgf-blue-dark);
}
body.skin-black-light h1,
body.skin-black-light h2,
body.skin-black-light h3,
body.skin-black-light h4 {
    color: var(--wgf-navy);
}
body.skin-black-light ::selection {
    background: var(--wgf-blue);
}

/* Header */
body.skin-black-light .main-header {
    box-shadow: 0 1px 0 var(--wgf-line), 0 2px 8px rgba(7, 29, 58, 0.04);
}
body.skin-black-light .main-header > .logo,
body.skin-black-light .main-header .navbar .navbar-custom-menu .navbar-nav > li > a {
    border-color: var(--wgf-line);
}
body.skin-black-light .main-header .navbar .nav > li > a {
    color: var(--wgf-ink);
}
body.skin-black-light .main-header .navbar .nav > li > a:hover,
body.skin-black-light .main-header .navbar .nav > li > a:focus {
    background: var(--wgf-soft);
    color: var(--wgf-blue);
}

/* Sidebar (webpack-main.css styles it through #sidebar-menu) */
body.skin-black-light .main-sidebar,
body.skin-black-light .left-side {
    background-color: #ffffff;
    border-right-color: var(--wgf-line);
}
body.skin-black-light #sidebar-menu {
    border-bottom-color: var(--wgf-line);
}
body.skin-black-light #sidebar-menu .sidebar-menu > li.header {
    background: transparent;
    color: var(--wgf-muted);
    font-size: 11px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
body.skin-black-light #sidebar-menu .sidebar-menu > li > a {
    color: var(--wgf-ink);
}
body.skin-black-light #sidebar-menu a:hover {
    color: var(--wgf-blue);
    background-color: var(--wgf-soft);
}
body.skin-black-light #sidebar-menu .active a,
body.skin-black-light #sidebar-menu .active .treeview-menu {
    background-color: var(--wgf-tint);
}
body.skin-black-light #sidebar-menu .sidebar-menu > li.active > a {
    color: var(--wgf-navy);
    border-left-color: var(--wgf-blue);
}
body.skin-black-light #sidebar-menu .treeview-menu > li > a {
    color: var(--wgf-muted);
}
body.skin-black-light #sidebar-menu .treeview-menu > li > a:hover,
body.skin-black-light #sidebar-menu .treeview-menu > li.active > a {
    color: var(--wgf-blue);
}

/* Breadcrumbs */
body.skin-black-light .breadcrumbs,
body.skin-black-light .breadcrumbs a {
    color: var(--wgf-muted);
}
body.skin-black-light .breadcrumbs a:hover {
    color: var(--wgf-blue);
}
body.skin-black-light .breadcrumbs span.current-crumb {
    color: var(--wgf-navy);
    font-weight: 600;
}

/* Widgets: a flat card with a solid brand header instead of the gloss. */
body.skin-black-light .widget {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(7, 29, 58, 0.06), 0 4px 14px rgba(7, 29, 58, 0.05);
}
body.skin-black-light .widget > div.widget-head {
    background: var(--wgf-blue);
    filter: none;
    text-shadow: none;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: 10px 10px 0 0;
}
body.skin-black-light .widget > div.widget-head a:hover {
    color: var(--wgf-tint);
}
body.skin-black-light .widget-content {
    border-color: var(--wgf-line);
    border-top: 0;
    border-radius: 0 0 10px 10px;
}

/* Form controls */
body.skin-black-light .form-control,
body.skin-black-light input[type="text"],
body.skin-black-light input[type="email"],
body.skin-black-light input[type="number"],
body.skin-black-light input[type="password"],
body.skin-black-light select,
body.skin-black-light textarea {
    border-color: var(--wgf-line);
    border-radius: 6px;
}
body.skin-black-light .form-control:focus,
body.skin-black-light input[type="text"]:focus,
body.skin-black-light input[type="email"]:focus,
body.skin-black-light input[type="number"]:focus,
body.skin-black-light input[type="password"]:focus,
body.skin-black-light select:focus,
body.skin-black-light textarea:focus {
    border-color: var(--wgf-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(57, 115, 185, 0.15);
}

/* Buttons */
body.skin-black-light .btn {
    border-radius: 6px;
}
body.skin-black-light .btn-default {
    border-color: var(--wgf-line);
    color: var(--wgf-ink);
}
body.skin-black-light .btn-default:hover,
body.skin-black-light .btn-default:focus {
    background: var(--wgf-soft);
    border-color: #c9d6ea;
    color: var(--wgf-blue);
}

/* Tables */
body.skin-black-light .table > thead > tr > th {
    border-bottom-color: var(--wgf-line);
    color: var(--wgf-navy);
}
body.skin-black-light .table > tbody > tr > td {
    border-top-color: #edf1f7;
}
body.skin-black-light .table-hover > tbody > tr:hover,
body.skin-black-light .table-striped > tbody > tr:nth-of-type(odd):hover {
    background-color: var(--wgf-soft);
}