/* ============================================ */
/* Modern Theme for AdminLTE 2 / OPTOCON       */
/* Visual modernization without breaking HTML   */
/* ============================================ */

/* ======================== */
/* FA4→FA5 font-family fix  */
/* ======================== */
/* AdminLTE 2 CSS uses font-family:FontAwesome in ::before rules.
   FA5 font is named "Font Awesome 5 Free". Override all such rules. */
.sidebar-toggle::before,
.sidebar-menu .treeview > a::after,
.direct-chat-timestamp::before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
}
/* Hide the old ::before on sidebar-toggle since we now use <i> icon */
.sidebar-toggle::before {
    display: none !important;
}

/* ======================== */
/* Dark Sidebar             */
/* ======================== */
.main-sidebar,
.left-side {
    background-color: #343a40 !important;
}
.main-sidebar .sidebar {
    background-color: #343a40;
}

/* Sidebar menu items */
.sidebar-menu > li > a {
    color: #c2c7d0;
    border-left: 3px solid transparent;
    transition: all 0.2s ease;
}
.sidebar-menu > li > a:hover {
    background-color: rgba(255,255,255,.08) !important;
    color: #fff;
}
.sidebar-menu > li.active > a {
    background-color: rgba(255,255,255,.12) !important;
    color: #fff;
    border-left-color: #f39c12;
}

/* Sidebar headers */
.sidebar-menu > li.header {
    color: #8aa4bf;
    background: transparent !important;
    font-size: 11px;
    letter-spacing: 0.05em;
    padding: 12px 15px 5px;
    text-transform: uppercase;
    border-bottom: none;
}

/* Treeview submenu */
.sidebar-menu .treeview-menu {
    background-color: rgba(0,0,0,.15);
}
.sidebar-menu .treeview-menu > li > a {
    color: #adb5bd;
}
.sidebar-menu .treeview-menu > li > a:hover {
    color: #fff;
    background-color: transparent !important;
}
.sidebar-menu .treeview-menu > li.active > a {
    color: #fff;
}

/* Sidebar icons */
.sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fas,
.sidebar-menu > li > a > .far,
.sidebar-menu > li > a > .ion,
.sidebar-menu > li > a > .glyphicon {
    width: 20px;
    text-align: center;
}

/* Sidebar user panel */
.sidebar .user-panel {
    border-bottom: 1px solid rgba(255,255,255,.1);
}

/* ======================== */
/* Header / Navbar          */
/* ======================== */
.skin-yellow .main-header .logo {
    background-color: #e08e0b;
}
.skin-yellow .main-header .logo:hover {
    background-color: #d4860a;
}
.skin-yellow .main-header .navbar {
    background-color: #f39c12;
}

/* Sidebar toggle button */
.sidebar-toggle {
    color: #fff !important;
}
.sidebar-toggle:hover {
    background-color: rgba(0,0,0,.1) !important;
}

/* ======================== */
/* Cards / Boxes modernize  */
/* ======================== */
.box {
    border-radius: 0.5rem;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.1);
    border-top: none;
}
.box.box-default {
    border-top: 3px solid #dee2e6;
}
.box.box-primary {
    border-top: 3px solid #007bff;
}
.box.box-info {
    border-top: 3px solid #17a2b8;
}
.box.box-success {
    border-top: 3px solid #28a745;
}
.box.box-warning {
    border-top: 3px solid #f39c12;
}
.box.box-danger {
    border-top: 3px solid #dc3545;
}

.box-header {
    border-bottom-color: #f0f0f0;
}

/* ======================== */
/* Tables modernize         */
/* ======================== */
.table > thead > tr > th {
    border-bottom: 2px solid #dee2e6;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    color: #6c757d;
    letter-spacing: 0.02em;
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(0,0,0,.02);
}
.table-hover > tbody > tr:hover {
    background-color: rgba(0,0,0,.04);
}

/* ======================== */
/* Buttons modernize        */
/* ======================== */
.btn {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.btn-default {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #495057;
}
.btn-default:hover {
    background-color: #e9ecef;
    border-color: #dee2e6;
    color: #212529;
}

/* ======================== */
/* Form controls modernize  */
/* ======================== */
.form-control {
    border-radius: 0.375rem;
    border-color: #ced4da;
    transition: border-color 0.15s ease;
}
.form-control:focus {
    border-color: #f39c12;
    box-shadow: 0 0 0 0.2rem rgba(243, 156, 18, 0.15);
}

/* ======================== */
/* Badges / Labels          */
/* ======================== */
.label {
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 11px;
    padding: 3px 8px;
}
.badge {
    border-radius: 0.25rem;
    font-weight: 600;
}

/* ======================== */
/* Content area             */
/* ======================== */
.content-wrapper {
    background-color: #f4f6f9;
}

/* Content header breadcrumbs */
.content-header > .breadcrumb {
    background: transparent;
}
.content-header > .breadcrumb > li + li:before {
    color: #97a2b1;
}

/* ======================== */
/* Footer                   */
/* ======================== */
.main-footer {
    background-color: #fff;
    border-top: 1px solid #dee2e6;
    color: #869099;
    font-size: 13px;
}

/* ======================== */
/* Modals modernize         */
/* ======================== */
.modal-content {
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 5px 25px rgba(0,0,0,.2);
}
.modal-header {
    border-bottom-color: #f0f0f0;
}
.modal-footer {
    border-top-color: #f0f0f0;
}

/* ======================== */
/* Select2 polish           */
/* ======================== */
.select2-container--default .select2-selection--single {
    border-color: #ced4da;
    border-radius: 0.375rem;
}

/* ======================== */
/* DataTable polish         */
/* ======================== */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #f39c12 !important;
    border-color: #f39c12 !important;
    color: #fff !important;
}

/* ======================== */
/* Scrollbar (webkit)       */
/* ======================== */
.sidebar::-webkit-scrollbar {
    width: 5px;
}
.sidebar::-webkit-scrollbar-track {
    background: rgba(0,0,0,.1);
}
.sidebar::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.2);
    border-radius: 3px;
}

/* ======================== */
/* Nav tabs modernize       */
/* ======================== */
.nav-tabs-custom {
    border-radius: 0.5rem;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.1);
}
.nav-tabs-custom > .nav-tabs > li.active > a {
    border-top-color: #f39c12;
}

/* ======================== */
/* Typography               */
/* ======================== */
body {
    font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: #212529;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    color: #212529;
}

/* ======================== */
/* PNotify z-index fix      */
/* ======================== */
.ui-pnotify {
    z-index: 9999 !important;
}