/* ============================================================
   THE FFFL DARK MODE
   ============================================================ */

/* ------------------------------------------------------------
   Basic page
   ------------------------------------------------------------ */

html.dark-mode {
    background-color: #181818;
    color: #ddd;
}
html.dark-mode body {
    background: #181818;
}

/* ------------------------------------------------------------
   Bootstrap panels
   ------------------------------------------------------------ */

html.dark-mode .panel {
    background-color: #2f2f2f;
    border-color: #444;
}

html.dark-mode .panel-default > .panel-heading {
    background-color: #303030;
    color: #eee;
    border-color: #444;
}

html.dark-mode .panel-footer {
    background-color: #303030;
    border-color: #444;
}


/* ------------------------------------------------------------
   Blue and red panels
   ------------------------------------------------------------ */

html.dark-mode .panel-primary.blue_panel {
    border-color: #696969 !important;
}

html.dark-mode .panel-heading.blue_panel-heading {
    background-color: #696969 !important; /*385a9e*/
    border-color: #696969 !important;
}
html.dark-mode .panel-primary.red_panel-primary {
    border-color: #c83f45 !important;
}

html.dark-mode .panel-heading.red_panel-heading {
    background-color: #c83f45 !important;
    border-color: #c83f45 !important;
}

html.dark-mode .red_panel-title {
    color: #fff;
}
html.dark-mode .label.label-primary {
    background-color: #696969 !important;
    border-color: #696969 !important;
}

html.dark-mode .img-thumbnail {
	background-color: #696969 !important;
    border-color: #696969 !important;
}
/* ------------------------------------------------------------
   Tables
   ------------------------------------------------------------ */

html.dark-mode .table {
    color: #ddd;
}

html.dark-mode .table > thead > tr > th,
html.dark-mode .table > tbody > tr > td,
html.dark-mode .table > tfoot > tr > td {
    border-color: #444;
}

/* ------------------------------------------------------------
   Table striped
   ------------------------------------------------------------ */

html.dark-mode .table-striped > tbody > tr:nth-of-type(odd),
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td,
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #4d4d4d !important;
}

html.dark-mode .table-striped > tbody > tr:nth-of-type(even),
html.dark-mode .table-striped > tbody > tr:nth-of-type(even) > td,
html.dark-mode .table-striped > tbody > tr:nth-of-type(even) > th {
    background-color: #2f2f2f !important;
}

/* ------------------------------------------------------------
   Table hover
   ------------------------------------------------------------ */

html.dark-mode .table-hover > tbody > tr:hover,
html.dark-mode .table-hover > tbody > tr:hover > td,
html.dark-mode .table-hover > tbody > tr:hover > th {
    background-color: #4D4D4D !important;
    color: #fff;
}


/* ------------------------------------------------------------
   Forms
   ------------------------------------------------------------ */

html.dark-mode .form-control {
    background-color: #303030;
    color: #eee;
    border-color: #555;
}

html.dark-mode .form-control:focus {
    background-color: #383838;
    color: #fff;
    border-color: #777;
}

html.dark-mode .input-group-addon {
    background-color: #303030;
    color: #ddd;
    border-color: #555;
}


/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

html.dark-mode .btn-default {
    background-color: #333;
    color: #eee;
    border-color: #555;
}

html.dark-mode .btn-default:hover,
html.dark-mode .btn-default:focus {
    background-color: #444;
    color: #fff;
    border-color: #666;
}


/* ------------------------------------------------------------
   Dropdowns
   ------------------------------------------------------------ */

html.dark-mode .dropdown-menu {
    background-color: #292929;
    border-color: #444;
}

html.dark-mode .dropdown-menu > li > a {
    color: #ddd;
}

html.dark-mode .dropdown-menu > li > a:hover,
html.dark-mode .dropdown-menu > li > a:focus {
    background-color: #3a3a3a;
    color: #fff;
}


/* ------------------------------------------------------------
   Links
   ------------------------------------------------------------ */

html.dark-mode a {
    color: #fff;
}

html.dark-mode .blue_links {
    color: #fff;
}


/* ------------------------------------------------------------
   Bootstrap alerts
   ------------------------------------------------------------ */

html.dark-mode .alert {
    border-color: #555;
}


/* ------------------------------------------------------------
   Modal
   ------------------------------------------------------------ */

html.dark-mode .modal-content {
    background-color: #292929;
    color: #ddd;
}

html.dark-mode .modal-header,
html.dark-mode .modal-footer {
    border-color: #444;
}


/* ------------------------------------------------------------
   Header player search
   ------------------------------------------------------------ */

html.dark-mode #header_search_results {
    background-color: #292929;
    border-color: #555;
}

html.dark-mode #header_search_results a {
    color: #ddd;
}

html.dark-mode #header_search_results a:hover {
    background-color: #3a3a3a;
}


/* ------------------------------------------------------------
   Horizontal rules
   ------------------------------------------------------------ */

html.dark-mode hr {
    border-color: #444;
}


/* ------------------------------------------------------------
   Bootstrap wells
   ------------------------------------------------------------ */

html.dark-mode .well {
    background-color: #252525;
    border-color: #444;
}


/* ------------------------------------------------------------
   Text helpers
   ------------------------------------------------------------ */

html.dark-mode .text-muted {
    color: #999;
}


/* ------------------------------------------------------------
   Main content areas
   ------------------------------------------------------------ */

html.dark-mode .top_header,
html.dark-mode #content_area,
html.dark-mode #container,
html.dark-mode .page_title,
html.dark-mode .white {
    background-color: #000000;
    color: #ddd;
}


/* ------------------------------------------------------------
   Bootstrap contextual table rows
   ------------------------------------------------------------ */

html.dark-mode .table > tbody > tr.info,
html.dark-mode .table > tbody > tr.info > td,
html.dark-mode .table > tbody > tr.info > th {
    background-color: #7894c4;
    color: #e0e7f5;
}

html.dark-mode .table > tbody > tr.warning,
html.dark-mode .table > tbody > tr.warning > td,
html.dark-mode .table > tbody > tr.warning > th {
    background-color: #7D782C;
    color: #ffffff;
}

html.dark-mode .table > tbody > tr.danger,
html.dark-mode .table > tbody > tr.danger > td,
html.dark-mode .table > tbody > tr.danger > th {
    background-color: #7B3944;
    color: #fff;
}


/* ------------------------------------------------------------
   Bootstrap bg-info
   ------------------------------------------------------------ */

html.dark-mode .bg-info,
html.dark-mode .bg-info > td,
html.dark-mode .bg-info > th {
    background-color: #7894c4;
    color: #fff;
}

html.dark-mode #container {
    border-color: #777;
}

html.dark-mode .red_font {
    color: #ffb3b3;
}

html.dark-mode .blue_font {
    color: #b8c9ee;
}
html.dark-mode .green_font {
    color: #1EB82F;
}


html.dark-mode .bg-danger {
    background-color: #52282b;
    color: #f0c7c9;
}

html.dark-mode .bg-warning {
     background-color: #7D782C;
    color: #ffffff;
}


/* ------------------------------------------------------------
   Bootstrap pagination
   ------------------------------------------------------------ */

html.dark-mode .pagination > li > a,
html.dark-mode .pagination > li > span {
    background-color: #5879b5;
    color: #fff;
    border-color: #385a9e;
}

/* Active page */
html.dark-mode .pagination > .active > a,
html.dark-mode .pagination > .active > span,
html.dark-mode .pagination > .active > a:hover,
html.dark-mode .pagination > .active > span:hover,
html.dark-mode .pagination > .active > a:focus,
html.dark-mode .pagination > .active > span:focus {
    background-color: #385a9e;
    color: #fff;
    border-color: #385a9e;
}

/* Inactive hover */
html.dark-mode .pagination > li > a:hover,
html.dark-mode .pagination > li > span:hover,
html.dark-mode .pagination > li > a:focus,
html.dark-mode .pagination > li > span:focus {
    background-color: #6f87c0;
    color: #fff;
    border-color: #385a9e;
}

html.dark-mode .white {
    background-color: #000000 !important;
}

html.dark-mode .list-group-item {
    background-color: #252525;
    color: #ddd;
    border-color: #444;
}

html.dark-mode .bg-success {
    background-color: #315a3a;
    color: #d9f0df;
}

html.dark-mode .eliminated_team {
    background-color: #52282b;
}

html.dark-mode .info {
    background-color: #7894c4;
    color: #fff;
}

html.dark-mode .content-grey {
	background-color:#2f2f2f; 
	color: #fff;
}
/* ------------------------------------------------------------
   Bootstrap popovers
   ------------------------------------------------------------ */

html.dark-mode .popover {
    background-color: #2f2f2f;
    color: #ddd;
    border-color: #444;
}

html.dark-mode .popover-content {
    background-color: #2f2f2f;
    color: #ddd;
}

html.dark-mode .popover-title {
    background-color: #303030;
    color: #eee;
    border-color: #444;
}

html.dark-mode .shaded {
    background-color: #828282 !important; /*385a9e*/
    
}

html.dark-mode .table > tbody > tr.info,
html.dark-mode .table > tbody > tr.info > td,
html.dark-mode .table > tbody > tr.info > th {
    background-color: #7894c4 !important; 
    color: #fff;
}

html.dark-mode .table > tbody > tr.warning,
html.dark-mode .table > tbody > tr.warning > td,
html.dark-mode .table > tbody > tr.warning > th {
    background-color: #7D782C !important;
    color: #ffffff;
}

html.dark-mode .table > tbody > tr.danger,
html.dark-mode .table > tbody > tr.danger > td,
html.dark-mode .table > tbody > tr.danger > th {
    background-color: #7B3944 !important;
    color: #fff;
}

html.dark-mode .progress {
    background-color: #828282;
}
html.dark-mode .scroll_overlay {
	background:#2f2f2f;
}

html.dark-mode {
    --scroll-frozen-bg: #2f2f2f;
}