.fmfl-logo-small {
    background-image: url('images/FMFLLogo-TransBG.png');
    background-position-x: center;
    background-position-y: center;
}

.SelectedTeam {
    background-color: yellow;
    color: black;
    font-weight: bold;
}

.elimMatch {
    border: 1px solid #666666;
    margin: 5px;
    padding: 5px;
}

.elimMatch1 {
    text-align: center;
}

.elimMatch2 {
    text-align: center;
}

.elimMatchVS {
    text-align: center;
    font-size: 8pt;
    font-style: italic;
}

.elimQtrMatch {
    margin-top: 5px;
    margin-bottom: 60px;
}

.elimSemiMatch {
    margin-top: 5px;
    margin-bottom: 170px;
}

.elimWinner {
    background-color: yellow;
    color: black;
    font-weight: bold;
    padding: 3px;
}

/* ****** SELECT STARTERS  ********************/
#searchBoxPosition .dataTables_filter input {
    display: inline-block;
    margin-bottom: 0px !important;
    margin: 0px 4px;
}

#SELECTEDRACE {
    vertical-align: middle;
}

.jumbotron {
    background-color: #ffffff;
    margin-bottom: 0px;
    padding: 20px;
}


.btn-fmfl-primary {
    background-color: #292562 !important;
    border-color: #292562;
    color: #fff !important;
}

.btn-fmfl-secondary {
    background-color: #d52027 !important;
    border-color: #d52027;
    color: #fff !important;
}

.bg-fmfl-primary {
    background-color: #292562 !important;
}

.bg-fmfl-secondary {
    background-color: #d52027 !important;
}

.label-fmfl-primary {
    background-color: #292562 !important;
}

.label-fmfl-secondary {
    background-color: #d52027 !important;
}

.label-fmfl-secondary.arrowed:before {
    border-right-color: #d52027;
    -moz-border-right-colors: #d52027;
}

.font-white {
    color: #fff !important;
}

.font-black {
    color: #000 !important;
}

h3 {
    border-bottom: 1px solid #ccc;
}

/* edit frm-pick css here to limit height
    #frm-pick {
    max-height:600px;
}
    */
/* ****************************************** */


/*@media only screen and (min-width: 500px) {
    .collapse {
        display: block;
    }

    .sidebar {
        display: none;
    }
}

@media only screen and (max-width: 500px) {
     .collapse {
        display: none;
     }

     .sidebar {
        display: block;
     }
}*/

/* These rules are for the arcade page and they are here because you can't use media queries in a Razor template file, and I didn't want to break them 
   since they are related */
.game-list {
    width: 700px;
}

.game-list h2 {
    margin-top: 12px;
}

@media only screen and (max-width: 992px) {
    .game-list {
        width: 100%;
    }
}

.game-list .paypal-link {
    display: none;
}

@media only screen and (max-width: 548px) {
    .game-list .paypal-link {
        display: inherit;
        margin-top: 1px;
    }
}

/* The following rules modify the navbar to allow a promotional image */
.navbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
}

.navbar-toggle {
    margin-left: 8px;
    margin-right: 0;
}

.navbar-header-logo {
    padding-left: 8px;
    padding-top: 2px;
    padding-bottom: 2px
}

.navbar-promotion-content {
    display: flex;
    flex-grow: 2;
    column-gap: 24px;
    justify-content: center;
    row-gap: 8px;
}

.navbar-promotion-content .promo-text a {
    color: #FFFFFF;
    font-size: 36px;
}

@media only screen and (max-width: 860px) {
    .navbar-header-logo {
        flex-grow: 2;
        padding-left: 0;
        padding-right: 47px;
        text-align: center;
    }

    .navbar-promotion-content {
        flex-grow: 1;
        flex-wrap: wrap;
        padding-bottom: 4px;
        padding-top: 4px;
        width: 100%;
    }

    .navbar-buttons {
        display: flex;
        justify-content: center;
        width: 100%;
    }
}

@media only screen and (max-width: 470px) {
    .navbar-header-logo {
        padding-right: 0;
    }
}

/* The following rules are for promotion content on the picks page */
.promotion-container {
    margin-top: 3px;
    margin-bottom: 14px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promotion-container iframe {
    aspect-ratio: 16 / 9;
    height: 100%
}

@media only screen and (max-width: 570px) {
    .promotion-container {
        height: auto;
    }
}

/* Removes the linear gradient present in the main content area under Ace.css Skin 3 */
.skin-3 .main-container:before {
    background: #FFF !important;
}

/* Ensures header logo images that have a height greater than 50px don't stretch the header */
.navbar-header-logo .header-logo {
    max-height: 50px;
}

/* The following rules override various ace.css styles for the nav bar to improve the visual presentation */
.ace-nav > li > a {
    /* Allows the account section to have everything nicely centered, as well as use the chosen game color */
    align-items: center;
    background-color: transparent;
    display: flex;
    justify-content: center;
}

.ace-nav > li > a:hover, .ace-nav > li > a:focus, .ace-nav > li.open > a {
    /* Makes the background on hover slightly darker than the default background color for the game */
    background-color: rgb(0, 0, 0, 0.2);
}

.ace-nav .nav-user-photo {
    /* Removes negative margin and allows the user's avatar to be centered vertically */
    margin-top: 0;
}

.ace-nav > li {
    /* This value makes the account section use the entire vertical space of the header, assuming all game images keep a height of 50px. The extra pixels are 
        needed to account for padding. */
    height: 54px;
    line-height: 54px;
}

.dropdown-menu.dropdown-close.dropdown-menu-right {
    /* Prevents the account drop-down menu from forcing a horizontal scrollbar when displayed */
    right: 0;
}

@media (min-width: 480px) and (max-width: 540px), (max-width: 360px) {
    /* Maintains the spacing between the avatar and team name at mobile widths */
    .navbar:not(.navbar-collapse) .navbar-buttons .nav-user-photo {
        margin-right: 8px;
    }
}

@media only screen and (max-width: 480px) {
    /* Keeps the account section background transparent at mobile widths */
    .navbar:not(.navbar-collapse) .ace-nav {
        background-color: transparent;
        display: flex;
        justify-content: center;
    }
}

/* Override of Bootstrap styles */
.nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
    background-color: rgb(0, 0, 0, 0.2);
}

/* The following rules override various Ace.css styles and apply custom styling on the countdown bar */
.widget-box.countdown-bar-container {
    border: none;
}

.countdown-bar-container .countdown-bar {
    display: flex;
    align-items: center;
}

.countdown-bar-container .countdown-bar .countdown-bar-details {
    flex-grow: 2;
}

.widget-color-dark > .widget-header {
    background-color: #e3e3e3;
}

.widget-box[class*="widget-color-"] > .widget-header {
    color: #5a5a5a;
}

.widget-color-dark > .widget-header .widget-toolbar:before {
    border-color: #222;
    bottom: 2px;
    box-shadow: -1px 0 0 rgba(255, 255, 255, 0.2), inset 1px 0 0 rgba(255, 255, 255, 0.1);
}

@media only screen and (max-width: 548px) {
    .countdown-bar .paypal-link {
        display: none;
    }
}

#cntdwn2 {
    padding-left: 4px;
    padding-right: 4px;
}

/* Set all widget boxes to have a lighter border color */
.widget-box.widget-color-dark {
    border-color: #CCC;
}

/* For better spacing around the user agreement link in the footer*/
.user-agreement {
    line-height: 20px;
}

/* For better spacing of arcade page buttons */
.pick-starters-link {
    margin-right: 8px;
}

@media only screen and (max-width: 391px) {
    .pick-starters-link {
        margin-bottom: 14px;
    }
}

/* These rules are for the error pages */
.error-header {
    text-align: center;
    margin-bottom: 24px;
}

.error-content-container {
    padding-left: 24px;
    padding-right: 24px;
    text-align: center;
}

.error-content {
    font-size: 16px;
}

/* This rule is for the driver list on the picks page, and resembles ones in Ace.css for hiding elements at certain breakpoints. Here we needed one for a 
   specific width that wasn't in Ace. */
@media only screen and (max-width: 600px) {
    .hidden-600 {
        display: none !important;
    }
}