.footer {
    color: #FFFFFF;
}

.footerhighlight {
    color: #09A2FF;
}

/* =======================================================================
home.mako
========================================================================== */

.imgbanner .banner {
    border: 1px solid #111111;
}

.imgsmallposter .small {
    border: 1px solid #111111;
}

.progressbarText {
    color: #FFFFFF;
    text-shadow: 0 0 0.1em #000000;
}

.progress-100 {
    background-image: -moz-linear-gradient(#395F07, #2A4705) !important;
    background-image: linear-gradient(#395F07, #2A4705) !important;
    background-image: -webkit-linear-gradient(#395F07, #2A4705) !important;
    background-image: -o-linear-gradient(#395F07, #2A4705) !important;
}

.progress-80 {
    background-image: -moz-linear-gradient(#A6CF41, #5B990D) !important;
    background-image: linear-gradient(#A6CF41, #5B990D) !important;
    background-image: -webkit-linear-gradient(#A6CF41, #5B990D) !important;
    background-image: -o-linear-gradient(#A6CF41, #5B990D) !important;
}

.progress-60 {
    background-image: -moz-linear-gradient(#FAD440, #F2A70D) !important;
    background-image: linear-gradient(#FAD440, #F2A70D) !important;
    background-image: -webkit-linear-gradient(#FAD440, #F2A70D) !important;
    background-image: -o-linear-gradient(#FAD440, #F2A70D) !important;
}

.progress-40 {
    background-image: -moz-linear-gradient(#FAB543, #F2700D) !important;
    background-image: linear-gradient(#FAB543, #F2700D) !important;
    background-image: -webkit-linear-gradient(#FAB543, #F2700D) !important;
    background-image: -o-linear-gradient(#FAB543, #F2700D) !important;
}

.progress-20 {
    background-image: -moz-linear-gradient(#DA5945, #B11A10) !important;
    background-image: linear-gradient(#DA5945, #B11A10) !important;
    background-image: -webkit-linear-gradient(#DA5945, #B11A10) !important;
    background-image: -o-linear-gradient(#DA5945, #B11A10) !important;
}

.loading-spinner {
    background-image: url("../images/loading32-dark.gif");
}

.popover {
    background-color: #333333;
}

.popover-content {
    background-color: #333333;
}

.popover.bottom .arrow:after {
    border-bottom-color: #333333;
}

/* =======================================================================
home_newShow.mako
========================================================================== */

#displayText {
    border: 1px solid #111111;
    background-color: #3D3D3D;
}

.new-show-table {
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    color: #FFFFFF !important;
}

.new-show-table tr.in-list,
.new-show-table tr.in-list a {
    color: #ACACAC !important;
}

/* =======================================================================
home_addExistingShow.mako
========================================================================== */

ul#rootDirStaticList li {
    background: #3D3D3D;
    color: white;
}

/* =======================================================================
home_trendingShows.mako
========================================================================== */

.traktContainer {
    background-color: #333333;
}

/* =======================================================================
displayShow.mako
========================================================================== */

#prevShow,
#nextShow,
#topcontrol {
    -webkit-filter: none;
    filter: none;
}

h1.title {
    border-bottom: 1px solid #555555;
}

ul.tags li {
    background: url(../images/tag.png) no-repeat scroll 5px 4px #15528F;
}

.tvshowImg,
.movieImg {
    border: 1px solid #111111;
}

#summary {
    border: 1px solid #111111;
    background-color: #3D3D3D;
}

.displayShowTable th.row-seasonheader {
    background-color: transparent;
}

.sickchillTable {
    color: #000000;
}

.sickchillTable th {
    background-color: #15528F;
}

.sickchillTable th,
.sickchillTable td {
    border-top: 1px solid #222222;
    border-left: 1px solid #222222;
}

th.row-seasonheader {
    background-color: transparent;
    color: #FFFFFF;
}

/* =======================================================================
schedule.mako
========================================================================== */

h2.day,
h2.network {
    background-color: #15528F;
}

table.cal-odd {
    background-color: #333333;
}

table.cal-even {
    background-color: #3D3D3D;
}

.calendarShow .text .airtime {
    color: #FFFFFF
}

.calendarShow .text .episode-title {
    color: #AAAAAA
}

/* =======================================================================
config*.mako
========================================================================== */

.component-group {
    border-bottom: 1px dotted #555555;
}

.component-group-desc p {
    color: #DDDDDD;
}

#provider_order_list li,
#service_order_list li {
    background: #333333 !important;
    color: #FFFFFF;
}

#provider_order_list .ui-state-default.torrent-provider {
    background-color: #555555 !important;
}

#provider_order_list .ui-state-default.nzb-provider {
    background-color: #222222 !important;
}

/* =======================================================================
config_postProcessing.mako
========================================================================== */

#config div.example {
    border: 1px solid #111111;
    background-color: #333333;
}

.Key {
    border: 1px solid #111111;
    background-color: #3D3D3D;
}

.Key th,
.tableHeader {
    background: #15528F;
}

.Key tr {
    border-bottom: 1px solid #111111;
}

.Key tr.even {
    background-color: #333333;
}

/* =======================================================================
config_notifications.mako
========================================================================== */

div.metadata_options {
    border: 1px solid #111111;
    background: #333333;
    color: #FFFFFF;
}

div.metadata_options label:hover {
    background-color: #15528F;
    color: #FFFFFF;
}

div.metadata_options label {
    color: #FFFFFF;
}

div.metadata_example label {
    color: #FFFFFF;
}

/* =======================================================================
manage*.mako
========================================================================== */

.separator {
    color: #FFFFFF;
}

/* =======================================================================
Global
========================================================================== */

span.path {
    background-color: #333333;
    color: #09A2FF;
}

/* =======================================================================
bootstrap Overrides
========================================================================== */

body {
    background-color: #222222;
    color: #FFFFFF;
}

pre {
    border-color: #111111;
    background-color: #3D3D3D;
    color: #FFFFFF;
}

/* navbar styling */
.navbar-default {
    border-color: #3E3F3A;
    background: -webkit-gradient(linear, left top, left bottom, from(#297AB8), to(#15528F));
    background: -moz-linear-gradient(top, #297AB8, #15528F);
    background-color: #15528F;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#297AB8', endColorstr='#15528F');
}

.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
    background-color: #124477;
}

.navbar-default .navbar-nav>.active>a,
.navbar-default .navbar-nav>.active>a:hover,
.navbar-default .navbar-nav>.active>a:focus {
    background-color: #124477;
    color: #FFFFFF !important;
}

.navbar-default .navbar-nav>li>a {
    color: #FFFFFF;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #124477;
}

.navbar-default .navbar-toggle .icon-bar {
    background-color: #124477;
}

.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:hover,
.navbar-default .navbar-nav>.open>a:focus {
    background-color: #124477;
    color: #FFFFFF;
}

@media (max-width: 767px) {

    .navbar-default .navbar-nav .open .dropdown-menu>.active>a,
    .navbar-default .navbar-nav .open .dropdown-menu>.active>a:hover,
    .navbar-default .navbar-nav .open .dropdown-menu>.active>a:focus {
        background-color: #124477;
        color: #FFFFFF;
    }
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: #15528F;
    color: #FFFFFF;
    text-decoration: none;
}

.dropdown-menu>li>a {
    padding: 4px 36px 4px 20px;
    color: #FFFFFF;
}

.dropdown-menu {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background-color: #333333;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}

.btn {
    border: 1px solid #111111;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    border-color: #111111;
    background-color: #2672B6;
    /* *background-color: #2672B6; */
    background-image: -ms-linear-gradient(top, #297AB8, #15528F);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#297AB8), to(#15528F));
    background-image: -webkit-linear-gradient(top, #297AB8, #15528F);
    background-image: -o-linear-gradient(top, #297AB8, #15528F);
    background-image: linear-gradient(top, #297AB8, #15528F);
    background-image: -moz-linear-gradient(top, #297AB8, #15528F);
    color: #FFFFFF;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr='#297AB8', endColorstr='#15528F', GradientType=0);
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

.btn:hover,
.btn:active,
.btn.active,
.btn.disabled,
.btn[disabled] {
    background-color: #2672B6;
    /* *background-color: #2672B6;  */
    color: #FFFFFF;
}

.btn:active,
.btn.active {
    color: #FFFFFF;
}

.btn:hover {
    background: #2672B6 0 -150px;
    /* *background-color: #2672B6; */
    color: #FFFFFF;
    text-decoration: none;
    -webkit-transition: background-position 0.0s linear;
    -moz-transition: background-position 0.0s linear;
    -ms-transition: background-position 0.0s linear;
    -o-transition: background-position 0.0s linear;
    transition: background-position 0.0s linear;
}

.btn:focus-visible {
    color: #FFFFFF;
    outline: 2px solid #09A2FF;
    outline-offset: 2px;
}

.btn.active,
.btn:active {
    background: #2672B6 none;
    background-color: #2672B6 \9;
    color: #FFFFFF;
}

.btn.disabled,
.btn[disabled] {
    background: #15528F none;
}

@media (min-width: 768px) {
    .navbar .nav>li>.dropdown-menu:after {
        border-bottom: 6px solid #333333;
    }
}

/* =======================================================================
browser.css overrides
========================================================================== */

.fileBrowserDialog ul li {
    margin: 2px 0;
    background: #333333 !important;
    cursor: pointer;
    list-style-type: none;
}

.fileBrowserDialog ul li a:hover {
    background: none !important;
    color: #09A2FF;
}

/* =======================================================================
formWizard.css
========================================================================== */

legend.legendStep {
    color: #FFFFFF;
}

div.stepsguide .step p {
    border-bottom: 4px solid #23AFDC;
}

div.stepsguide .disabledstep p {
    border-bottom: 4px solid #1178B3;
}

div.formpaginate .prev,
div.formpaginate .next {
    background: #2265A1;
}

/* =======================================================================
pnotify.css
========================================================================== */

.ui-pnotify-container {
    border: 1px solid #111111;
    background-image: -moz-linear-gradient(#333333, #3D3D3D) !important;
    background-image: linear-gradient(#333333, #3D3D3D) !important;
    background-image: -webkit-linear-gradient(#333333, #3D3D3D) !important;
    background-image: -o-linear-gradient(#333333, #3D3D3D) !important;
    -moz-box-shadow: 0 0 2px #000000;
    -webkit-box-shadow: 0 0 2px #000000;
    -o-box-shadow: 0 0 2px #000000;
    box-shadow: 0 0 2px #000000;
    -ms-filter: progid:dximagetransform.microsoft.gradient(startColorstr=#333333, endColorstr=#3D3D3D) !important;
    filter: progid:dximagetransform.microsoft.gradient(startColorstr=#333333, endColorstr=#3D3D3D) !important;
}

.ui-pnotify-title {
    color: #FFFFFF;
}

.ui-pnotify-text {
    color: #FFFFFF;
}

/* =======================================================================
tablesorter.css
========================================================================== */

.tablesorter {
    background-color: transparent;
    color: #FFFFFF;
}

.tablesorter th,
.tablesorter td {
    padding: 4px;
    border-top: #222222 1px solid;
    border-left: #222222 1px solid;
    vertical-align: middle;
}

/* add extra border at right edge */
.tablesorter th:last-child,
.tablesorter td:last-child {
    border-right: #222222 1px solid;
}

.tablesorter th {
    background-color: #15528F;
    border-collapse: collapse;
    color: #FFFFFF;
    font-weight: normal;
    text-align: center;
    text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.3);
}

.tablesorter thead .tablesorter-headerDesc {
    background: #297AB8 url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjB+gC+jP2ptn0WskLQA7) no-repeat center right;
}

.tablesorter thead .tablesorter-headerAsc {
    background: #297AB8 url(data:image/gif;base64,R0lGODlhFQAEAIAAAP///////yH5BAEAAAEALAAAAAAVAAQAAAINjI8Bya2wnINUMopZAQA7) no-repeat center right;
}

thead.tablesorter-stickyHeader {
    border-top: 2px solid #222222;
    border-bottom: 2px solid #222222;
}

/* Zebra Widget - row alternating colors */
.tablesorter tr.odd,
.sickchillTable tr.odd {
    background-color: #333333;
}

.tablesorter tr.even,
.sickchillTable tr.even {
    background-color: #2E2E2E;
}

.tablesorter tr.tablesorter-filter-row,
.tablesorter tr.tablesorter-filter-row td {
    border-bottom: 1px solid #111111;
    background: #333333;
    text-align: center;
}

/* add extra border at left edge */
.tablesorter tr.tablesorter-filter-row td:first-child {
    border-left: #222222 1px solid;
}

/* add extra border at right edge */
.tablesorter tr.tablesorter-filter-row td:last-child {
    border-right: #222222 1px solid;
}

#showListTable tbody {
    color: #000000;
}

/* =======================================================================
token-input.css
========================================================================== */

div.token-input-dropdown {
    border-right-color: #CCCCCC;
    border-bottom-color: #CCCCCC;
    border-left-color: #CCCCCC;
    background-color: #FFFFFF;
    color: #000000;
}

/* =======================================================================
jquery.confirm.css
========================================================================== */

#confirmBox {
    background: #222222;
}

#confirmBox h1 {
    background-color: #15528F;
}

#confirmBox p {
    color: #FFFFFF;
}

/* =======================================================================
bootstrap modal
========================================================================== */

.modal-content {
    background-color: #3D3D3D;
}

.modal-body {
    background-color: #3D3D3D;
}

.modal-header {
    background-color: #15528F;
}

/* =======================================================================
bootstrap panel
========================================================================== */

.panel-default {
    border-color: #111111;
    background-color: #3D3D3D;
}

.panel-heading {
    background-color: #3D3D3D !important;
    color: #FFFFFF !important;
}

/* =======================================================================
new #confirmBox
========================================================================== */
.modal-dialog {
    /*position: fixed;
    top: 30%;
    width: 100%;
    margin: 0 !important;*/
    text-align: center;
}

.modal-content {
    display: inline-block;
    max-width: 460px;
    border: 1px solid #111111;
    border-radius: 0;
    margin: 10px;
    box-shadow: 0 0 12px 0 rgba(0, 0, 0, 0.175);
}

.modal-header {
    border-radius: 0;
    border-bottom: none;
}

.modal-body,
.modal-content {
    background: #222222;
}

.modal-footer {
    border-top: none;
}

.confirmation-modal {
    background: -moz-linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) repeat-x rgba(0, 0, 0, 0.5);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0.5))) repeat-x rgba(0, 0, 0, 0.5);
}

.modal-footer {
    text-align: center;
}

.modal-header .close {
    display: none
}

.modal-footer button {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 2px 15px;
    border: 1px solid #111111;
    border-radius: 3px;
    margin-right: 15px;
    background-clip: padding-box;
    background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0.25));
    background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0.25));
    background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0.25));
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, 0) 51%, rgba(0, 0, 0, 0.25));
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 -1px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 1px 2px rgba(0, 0, 0, 0.15);
    color: #FFFFFF;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75);
}

.modal-footer button:last-child {
    margin-right: 0;
}

.modal-footer button.confirm {
    background-color: #3F7636;
}

.modal-footer button.confirm:hover {
    background-color: #48873E;
}

.modal-footer button.cancel {
    background-color: #8D2D2B;
}

.modal-footer button.cancel:hover {
    background-color: #A13331;
}

/* Ensure .btn-danger remains red */
.btn-danger {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #ffffff !important;
    background-image: none !important;
    /* Remove any gradient background image */
}

/* Ensure .btn-warning remains red */
.btn-warning {
    background-color: #ffc107 !important;
    border-color: #ffc107 !important;
    color: #ffffff !important;
    background-image: none !important;
    /* Remove any gradient background image */
}

.card {
    border: 1px solid #111111 !important;
    background-color: #3D3D3D !important;
}

.label {
    border: 1px solid #111111 !important;
    background-color: #3D3D3D !important;
    color: #FFFFFF !important;
}

.dataTables_filter {
    background-color: #3D3D3D !important;
    color: #FFFFFF !important;
}

.dataTables_filter input {
    background-color: #3D3D3D !important;
    color: #FFFFFF !important;
}

.dataTables_length {
    background-color: #3D3D3D !important;
    color: #FFFFFF !important;
}

.dataTables_info {
    background-color: #3D3D3D !important;
    color: #FFFFFF !important;
}

.dataTables_length label {
    background-color: #3D3D3D !important;
    color: #FFFFFF !important;
}

.dataTables_length label select {
    background-color: #3D3D3D !important;
    color: #FFFFFF !important;
}

.dataTables_scrollHead tr {
    border: 1px solid #111111 !important;
    background-color: #15528F !important;
    color: #FFFFFF !important;
}


/* Custom Navbar Styles */
/* looks like this was screwing my navbar up
.navbar-default .navbar-nav > li > a {
    color: #FFFFFF !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #FFFFFF !important;
    background-color: #124477 !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #FFFFFF !important;
    background-color: #124477 !important;
}
*/
/* Custom Navbar Styles */
/* Navbar styling */
.navbar-light {
    background-color: #15528F !important;
    border-color: #15528F !important;
}

/* Remove padding from navbar */
.navbar {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}


/* Navbar nav link styling */
/* Ensure navbar nav links take full vertical space */
.navbar-light .navbar-nav .nav-link {
    color: #FFFFFF !important;
    /* Ensure text color is readable */
    padding-top: 0.75rem !important;
    /* Adjust top padding */
    padding-bottom: 0.75rem !important;
    /* Adjust bottom padding */
    padding-right: 20px !important;
    /* Add right padding */
    padding-left: 20px !important;
    /* Optional: Add left padding for symmetry */
    height: 100%;
    /* Ensure the height is 100% */
    display: flex;
    /* Make it a flex container */
    align-items: center;
    /* Center items vertically */
}


/* Navbar nav link hover and focus styling */
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus {
    background-color: #0D3E73;
    /* Darker shade of blue */
    color: #DDDDDD !important;
    /* Adjust hover text color */
}

/* Active navbar nav link styling */
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .active>.nav-link:hover,
.navbar-light .navbar-nav .active>.nav-link:focus {
    background-color: #0D3E73;
    /* Darker shade of blue */
    color: #FFFFFF !important;
    /* Ensure text color remains readable */
}

/* Dropdown menu item padding */
.navbar-nav .dropdown-menu .dropdown-item {
    padding-right: 20px;
    /* Adjust the value as needed */
}

/* Navbar toggler customizations */
.navbar-light .navbar-toggler {
    border: 1px solid #FFFFFF;
    /* White border */
    background-color: #15528F;
    /* Matching navbar background color */
    margin-right: 10px;
    /* Add margin to the right of the border */
}

.navbar-light .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255, 255, 255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    /* White lines for the toggler icon */
}

/* Navbar toggler hover and focus styling */
.navbar-light .navbar-toggler:hover,
.navbar-light .navbar-toggler:focus {
    background-color: #124477;
    /* Slightly darker shade on hover/focus for contrast */
    border-color: #FFFFFF;
    /* Ensure the border remains white */
}

/* Add padding to the right of the toggle button */
.navbar-toggler {
    padding-right: 10px;
    /* Adjust the value as needed for more or less padding */
}

/* Generic CSS for selected button colors */
/* Generic CSS for selected button colors */
.btn-check:checked+.btn-outline-primary {
    background-color: #007bff !important;
    /* Primary color */
    background-image: none !important;
    /* Remove any background image */
    color: #fff !important;
}

.btn-check:checked+.btn-outline-danger {
    background-color: #dc3545 !important;
    /* Danger color */
    background-image: none !important;
    /* Remove any background image */
    color: #fff !important;
}

.btn-check:checked+.btn-outline-success {
    background-color: #28a745 !important;
    /* Success color */
    background-image: none !important;
    /* Remove any background image */
    color: #fff !important;
}

.btn-check:checked+.btn-outline-warning {
    background-color: #ffc107 !important;
    /* Warning color */
    background-image: none !important;
    /* Remove any background image */
    color: #fff !important;
}

.nav-tabs {
    border-bottom: none;
    /* Border below tabs */

}

.nav-tabs .nav-item {
    border: 1px solid #111111;
    /* Tab border */
    border-bottom: none;
    /* Remove bottom border */
}

.nav-tabs .nav-link.active {
    background-color: #3D3D3D !important;
    /* Active tab background color */
    color: #FFFFFF !important;
    /* Active tab text color */
    border-color: #3D3D3D #3D3D3D;
    /* Active tab border color */
}

.tab-content {
    border: 1px solid #111111;
    /* Border around tab content */
    border-top: none;
    /* Remove top border */
    padding: 10px;
    /* Add padding */
    background-color: #3D3D3D;
    /* Tab content background color */
}

.nav .nav-tabs {
    border-bottom: 1px solid #111111;
    /* Border below tabs */
    background-color: #3D3D3D;
    /* Tab background color */
}

.nav-link {
    color: blue;
    /* Default color for active and inactive tabs */
}

.nav-link.active {
    color: white;
    /* Color for active tab */
}

.nav-link:not(.active) {
    color: lightgrey !important;
    /* Color for inactive tabs */
}

.alert-error {
    background-color: #f8d7da !important;
    /* Light red background */
    color: #721c24 !important;
    /* Dark red text */
    border-color: #f5c6cb !important;
    /* Red border */
}/*
 * custom.css
 * Color scheme inspired by pogdesign.co.uk/cat (curvy.min.css)
 * Replaces custom_dark.css (kept as custom_dark.css.old for reference).
 * Rollback: restore custom_dark.css.old and revert the <link> in base.html.
 *
 * Source palette (from curvy.min.css):
 *   Page bg:        radial-gradient(#70abd3 0, #00305b 100%)  — light-blue centre → dark navy edges
 *   Header:         rgba(0,0,0,0.55)  semi-transparent black over gradient
 *   Header hover:   rgba(0,0,0,0.80)
 *   Day headers:    radial-gradient(#4d4d4d 0, #333 100%)
 *   Show rows:      rgba(0,22,44,0.55)
 *   Today:          radial-gradient(#ffce30 0, #e07000 100%)
 */

/* =======================================================================
   Page background — radial gradient, fixed so it doesn't scroll
   Manifest: whole page background, visible between/behind all containers
======================================================================== */

body {
    background-color: #00305b;
    background-image: radial-gradient(ellipse at center, #70abd3 0%, #00305b 100%);
    background-attachment: fixed;
    background-size: cover;
    min-height: 100vh;
}

/* =======================================================================
   Navbar — semi-transparent, sticky at top
   Manifest: top navigation bar — slightly lighter than the dark gradient
   edges so it is visually distinct; gradient bleeds through
======================================================================== */

@media (min-width: 992px) {
    header {
        position: sticky;
        top: 0;
        z-index: 1030;
    }
}

.navbar-light,
.navbar-default {
    background: rgba(0, 22, 44, 0.80) !important;
    background-image: none !important;
    border-color: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Logo — add left breathing room so it doesn't touch the page edge */
.navbar-brand {
    padding-left: 0.75rem;
}

/* Round logo corners so it blends into the dark navbar rather than appearing as a pasted rectangle */
.navbar-brand img {
    border-radius: 8px;
}

/* navbar link hover */
.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus,
.navbar-default .navbar-nav>.open>a {
    background-color: rgba(255, 255, 255, 0.55) !important;
    color: #00305b !important;
}

/* navbar link active (current page) */
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .active>.nav-link,
.navbar-light .navbar-nav .active>.nav-link:hover,
.navbar-default .navbar-nav>.active>a {
    background-color: rgba(255, 255, 255, 0.20) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
}

.navbar-light .navbar-toggler {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.navbar-light .navbar-toggler:hover,
.navbar-light .navbar-toggler:focus {
    background-color: rgba(255, 255, 255, 0.2);
}

/* =======================================================================
   Cards and panels — rounded corners to match pogdesign
   Manifest: all .card containers (statistics boxes, trip cards, etc.)
======================================================================== */

.card {
    background: rgba(0, 22, 44, 0.66) !important;
    border-color: rgba(0, 60, 120, 0.4) !important;
    border-radius: 10px !important;
}

/* Chart-wrapping cards — transparent so charts float on the gradient */
.card:has(.chart-container),
.card:has(.chart-container-tall) {
    background: transparent !important;
    border-color: transparent !important;
}

.panel-default {
    background: rgba(0, 22, 44, 0.66);
    border-color: rgba(0, 60, 120, 0.4);
    border-radius: 10px;
}

.panel-heading {
    background-color: rgba(0, 10, 30, 0.5) !important;
    border-radius: 10px 10px 0 0 !important;
}

/* =======================================================================
   Tabs — rounded corners, transparent nav-tabs background so inactive
   tabs are clearly distinguishable from the site gradient
   Manifest: Flight Statistics / Hotel Stats / Accommodations tab panels,
             Settings tabs, Add Flight tabs, etc.
======================================================================== */

.nav-tabs {
    background: transparent;
    border-radius: 10px 10px 0 0;
    border: none;
    padding: 0;
}

.nav-tabs .nav-item {
    border: none;
}

.nav-tabs .nav-link {
    border-radius: 8px 8px 0 0 !important;
    border: 1px solid rgba(0, 60, 120, 0.2);
    border-bottom: none;
    background-color: rgba(0, 22, 44, 0.35);   /* inactive tab — visible but muted */
}

.nav-tabs .nav-link.active {
    background-color: rgba(0, 22, 44, 0.75) !important;
    border-color: rgba(0, 80, 160, 0.4) !important;
    border-bottom: none !important;
}

.tab-content {
    background-color: rgba(0, 22, 44, 0.6);
    border: 1px solid rgba(0, 60, 120, 0.3);
    border-top: none;
    border-radius: 0 0 10px 10px;
}

/* =======================================================================
   Table headers — all tables unified
   Manifest: Flights, Rooms, Trips — all thead.thead-dark headers
   Uses !important to beat both DataTables CDN CSS and template inline styles
======================================================================== */

thead.thead-dark th,
.dataTables_scrollHead thead th,
table.dataTable thead th,
.tablesorter th {
    background-color: rgba(0, 22, 44, 0.88) !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: rgba(0, 80, 160, 0.3) !important;
}

.tablesorter thead .tablesorter-headerDesc,
.tablesorter thead .tablesorter-headerAsc {
    background-color: rgba(0, 22, 44, 0.95) !important;
    background-image: none !important;
}

/* =======================================================================
   Table rows
   Manifest: alternating row colours on Flights/Rooms DataTables
======================================================================== */

.tablesorter tr.odd,
.tablesorter tr.even {
    background-color: transparent;
}

.tablesorter tr.odd {
    background-color: rgba(0, 22, 44, 0.55);
}

.tablesorter tr.even {
    background-color: rgba(0, 22, 44, 0.35);
}

.tablesorter tr.tablesorter-filter-row,
.tablesorter tr.tablesorter-filter-row td {
    background: rgba(0, 22, 44, 0.5);
    border-bottom-color: rgba(0, 60, 120, 0.3);
}

/* =======================================================================
   DataTables wrappers (filter, length, info bars)
   Manifest: "Search:", "Show 25 entries", "Showing 1 to N of N entries" —
   wrapper text is transparent so it floats on the gradient;
   inputs/selects stay dark navy
======================================================================== */

.dataTables_filter,
.dataTables_length,
.dataTables_length label,
.dataTables_info {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

.dataTables_filter input,
.dataTables_length label select {
    background-color: rgba(0, 22, 44, 0.7) !important;
    color: #FFFFFF !important;
    border-color: rgba(0, 80, 160, 0.4) !important;
    border-radius: 4px;
}

/* Spacing between the length (Show N) and filter (Search) controls —
   applied globally so Hotels matches Flights */
.dataTables_wrapper .dataTables_length {
    margin-bottom: 8px;
}

.dataTables_wrapper .dataTables_filter {
    margin-bottom: 8px;
}

/* =======================================================================
   Chart containers
   Manifest: all charts on the Statistics page — match card background
======================================================================== */

.chart-container,
.chart-container-tall {
    background: rgba(0, 22, 44, 0.55) !important;
    border-radius: 8px;
}

/* =======================================================================
   Dropdown menus
   Manifest: any Bootstrap dropdown (if used)
======================================================================== */

.dropdown-menu {
    background-color: rgba(0, 20, 45, 0.9);
    border-color: rgba(0, 60, 120, 0.4);
    border-radius: 8px;
}

.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
    background-color: rgba(0, 60, 120, 0.5) !important;
}

/* =======================================================================
   Modals
   Manifest: confirmation dialogs (Delete flight/hotel, etc.)
======================================================================== */

.modal-content {
    background: rgba(0, 15, 35, 0.92) !important;
    border-radius: 12px !important;
}

.modal-body {
    background: transparent !important;
}

.modal-header {
    background-color: rgba(0, 0, 0, 0.4) !important;
    border-radius: 12px 12px 0 0 !important;
}

/* =======================================================================
   Alerts and flash messages
   Manifest: the alert-error flash (login failures etc.) — keep readable
======================================================================== */

.alert-error {
    background-color: rgba(180, 30, 30, 0.85) !important;
    color: #ffffff !important;
    border-color: rgba(200, 50, 50, 0.6) !important;
}

/* =======================================================================
   Pre / code blocks
   Manifest: any <pre> content
======================================================================== */

pre {
    background-color: rgba(0, 15, 35, 0.7);
    border-color: rgba(0, 60, 120, 0.3);
}

/* =======================================================================
   Version FAB button — match dark blue of tabs / stats cards
   Manifest: fixed "i" button, bottom-right corner
======================================================================== */

#version-fab {
    background: rgba(0, 22, 44, 0.88) !important;
}

#version-fab:hover {
    background: rgba(0, 22, 44, 1) !important;
}