/* css
   Fonts/colors below are tokenized against styling/tokens.css (loaded
   globally by base.html as app/static/css/tokens.css) -- var(--fv-*)
   works regardless of load order since custom properties resolve at
   used-value time, not parse time. Left alone deliberately: .stat-good/
   .stat-bad (their red/blue doesn't map to positive/negative here -- an
   existing, possibly widely-relied-on convention, not the tokens'
   positive/negative colors) and the yellow "total row" tfoot highlights
   (a distinct semantic highlight, not a token-worthy accent). */

@import url(datatables.css);

* {
    font-family: var(--fv-font-body);
}

body {
    font-family: var(--fv-font-body);
}

a {
    text-decoration: none;
}

a.active {
    font-weight: bold;
}

body {
    margin: 0;
    padding: 0;
    font-size: 12px;
}

h1 {
    text-transform: uppercase;
    font-weight: 800;
    font-family: var(--fv-font-display);
    margin: 25px 0;
}

h1.bigblack {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 25px;
    margin-top: 10px;
    font-family: var(--fv-font-display);
}

h2.bigblack {
    font-weight: 800;
    text-transform: uppercase;
    font-size: 17px;
    margin-top: 10px;
    font-family: var(--fv-font-display);
}

div#header {
    background-image: url("/static/images/flames-small-white.png");
    background-repeat: no-repeat;
    background-size: 55px 50px;
    background-color: var(--fv-red);
    height: 58px;
    border-bottom: 1px solid black;
}

div#header p.logged_in {
    margin-top: 2px;
    margin-right: 10px;
    color: #fff;
}

div#header a {
    color: white;
}

/* flames navbar */

.navbar-flames {
    background-color: var(--fv-red);
    border: none;
    border-radius: 0;
    margin: 0;
}

.navbar-flames .container {
    padding-right: 0;
    padding-left: 0;
}

@media (min-width: 768px) {
    .navbar-flames .navbar-inner--full-bleed-md {
        width: auto;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-left: 150px; 
        padding-right: 150px;
    }
}

.navbar-flames .navbar-nav {
    border: none;
    float: none;
    display: inline-block;
}

.navbar-flames .navbar-collapse {
    text-align: center;
}

.navbar-flames img {
        height: 50px;
        padding-top: 5px;
        border: 0;
}

.navbar-flames .navbar-nav>li {
    font-size: 14px;
}

.navbar-flames .navbar-nav>li>a {
    letter-spacing: 0.15em;
    color: white;
    text-transform: uppercase;
}

.navbar-flames .navbar-nav>li.separator {
    padding-top: 10px;
    padding-bottom: 15px;
    color: #fff;
    font-size: 18px;
    opacity: 0.75;
}

.navbar-flames .navbar-nav>li>.dropdown-menu {
    margin-top: 5px;
    background-color: #efefef;
}

.navbar-flames .navbar-nav>li.dropdown-header>a {
    font-family: var(--fv-font-display) !important;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 0;
    color: #000;
}

.navbar-flames .navbar-nav>li.dropdown-header>a>.bigger {
    font-family: var(--fv-font-display) !important;
    font-weight: 800;
    font-size: 15px;
}

.navbar-flames .navbar-nav>li>.dropdown-menu>li>a {
    color: #000 !important;
    font-size: 12px;
    text-transform: uppercase;
    font-family: var(--fv-font-mono);

}

.navbar-flames .navbar-nav>li>a {
    font-family: var(--fv-font-mono);
}

.navbar-flames .navbar-nav>li>.dropdown-menu>li>a:hover {
    background-color: var(--fv-red);
    color: white !important;
}

.navbar-flames .navbar-nav>li>a:active {
    color: yellow;
}

.navbar-flames .navbar-nav>li>a:hover {
    color: yellow;
}

.navbar-flames .navbar-nav>.open>a,
.navbar-flames .navbar-nav>.open>a:hover,
.navbar-flames .navbar-nav>.open>a:focus {
    background-color: initial;
    color: white;
}

.navbar-flames .navbar-form input {
    width: 200px;
}

.navbar-flames .navbar-toggle {
    float: left;
    margin-left: 20px;
}

.navbar-flames .navbar-toggle .icon-bar {
    background-color: white;
}

.navbar-right .dropdown-menu {
    right: auto;
}

/* BEGIN BOOTSTRAP OVERRIDE */

@media (min-width: 1200px) {
    .container {
        width: 1240px;
    }
}

p {
    padding: 5px 0;
}

label {
    font-weight: normal;
}

.form-control,
.btn { 
    font-size: 12px;
}

.input-group-addon {
    font-size: 12px;
}
/* END BOOTSTRAP OVERRIDE */

div#main-content {
    padding: 10px;
}

/* Full-bleed main area (e.g. Game Reports + Vite); drop Bootstrap container max-width and horizontal inset */
#main-content.main-content--full-bleed {
    max-width: none;
    width: 100%;
    padding: 0;
}

div#footer {
    margin: 50px auto;
    padding: 20px 10px;
    color: #999;
}

.align-left { 
    text-align: left !important;
}

.align-center {
    text-align: center !important;
}

div.clear { clear: both; }

div.no-title .ui-dialog-titlebar {
    display: none;
}

button.flames-button, a.flames-button, input.flames-button {
    display: block;
    background-color: var(--fv-red, #c00000);
    border: 1px solid var(--fv-red, #c00000);
    color: white;
    border: 0;
    font-weight: normal;
    padding: 10px;
    margin: 10px 0;
    text-decoration: none;
    border-radius: var(--fv-radius-control, 8px);
}

.btn-flames {
    background-color: var(--fv-red);
    color: #fff;
}

.btn-flames:hover {
    background-color: yellow;
    border-color: #000;
}

a.flames-button {
    width: auto;
    display: inline-block;
}

a.flames-button:hover {
    background-color: #ff0000;
    border-color: black;
}

a.flames-button:active {
    background-color: #ff0000;
    border-color: black;
}

div.controlbox {
    margin: 20px 0;
}

div.controlbox label {
    margin-right: 20px;
}

.ajax-indicator {
    display: none;
}

table.report-table {

}

table.report-table thead tr th {
    text-align: center;
}

table.report-table thead tr th.sorting_desc,
table.report-table thead tr th.sorting_asc {
    background-color: var(--fv-rule-strong);
}

table.report-table tbody tr td {
    text-align: center;
}

table.report-table tbody tr td.sorting_1,
table.report-table tbody tr td.sorting_0,
table.report-table tbody tr.hover td {
    background-color: var(--fv-rule-strong) !important;
}

/*
table.report-table>tbody>tr:nth-child(even)>td
{
    background-color: #eaeaea;
}

table.report-table>tbody>tr:nth-child(odd)>td
{
    background-color: #f7f7f7;
}
*/

.flash {
    background: #cee5F5;
    padding: 0.5em;
    border: 1px solid #aacbe2;
}

.error {
    color: #ff0000;
    font-weight: bold;
}

textarea.no-resize { 
    resize: none;
}

tr.striped>td {
    background-color: var(--fv-surface-inset);
}

tr.unstriped>td {
    /* collided with percentile highlighting
    background-color: #fff !important;
    */
}

.border-right {
    border-right: 1px solid var(--fv-border);
}

.margin-bottom-10 {
    margin-bottom: 10px;
}

.margin-bottom-20 {
    margin-bottom: 20px;
}

.margin-top-5 {
    margin-top: 5px;
}

.margin-top-10 {
    margin-top: 10px;
}

.margin-top-20 {
    margin-top: 20px;
}

/* jquery UI widget override */

.ui-widget {
    font-size: 1em;
}

/* Datepicker: replace the stock jQuery UI orange/blue/gold theme with a
   beige card matching the rest of the app -- no gold/yellow anywhere. */
.ui-datepicker {
    /* Stock jQuery UI hardcodes width:17em, which -- at this app's 12px base
       font-size -- comes out to ~204px, too narrow for 7 columns of 30px day
       cells (the Saturday column was overflowing outside the card). */
    width: auto;
    background: var(--fv-surface-inset);
    border: 1px solid var(--fv-border);
    border-radius: var(--fv-radius-card);
    box-shadow: var(--fv-shadow-raised);
    padding: 14px;
    font-family: var(--fv-font-body);
}

.ui-datepicker .ui-datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    color: var(--fv-text);
    padding: 0 0 12px;
}

.ui-datepicker .ui-datepicker-title {
    /* jQuery UI's header markup order is actually prev, next, title -- use
       `order` to place it visually between them so space-between centers it
       across the full header width instead of just the leftover space. */
    order: 2;
    flex: 1;
    text-align: center;
    font: 700 15px var(--fv-font-display);
    color: var(--fv-text);
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    /* jQuery UI places these with position:absolute + top/left/right; flex
       on the header above handles placement instead, so free them from it */
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fv-surface);
    border: 1px solid var(--fv-border-input);
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev { order: 1; }
.ui-datepicker .ui-datepicker-next { order: 3; }

.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
    background: var(--fv-track);
    border-color: var(--fv-border);
    top: auto;
}

/* The stock icon is a sprite image (images/ui-icons_*.png) that isn't part
   of this build, so the glyph renders blank -- draw a plain chevron instead. */
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    margin: 0;
    background: none;
    border: none;
    border-top: 2px solid var(--fv-text);
    border-right: 2px solid var(--fv-text);
    text-indent: -9999px;
    overflow: hidden;
}

.ui-datepicker .ui-datepicker-prev span {
    transform: translate(-25%, -50%) rotate(-135deg);
}

.ui-datepicker .ui-datepicker-next span {
    transform: translate(-75%, -50%) rotate(45deg);
}

.ui-datepicker table.ui-datepicker-calendar {
    margin: 0;
}

.ui-datepicker .ui-datepicker-calendar th {
    font: 600 10px var(--fv-font-mono);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fv-text-muted);
    padding-bottom: 6px;
}

.ui-datepicker .ui-datepicker-calendar td {
    padding: 1px;
}

.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span {
    display: block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--fv-text);
    font-size: 12.5px;
}

.ui-datepicker .ui-datepicker-calendar td span {
    color: var(--fv-text-faint); /* disabled/out-of-range days */
}

.ui-datepicker .ui-datepicker-calendar td a.ui-state-hover {
    background: var(--fv-track);
    color: var(--fv-text);
}

.ui-datepicker .ui-datepicker-calendar td a.ui-state-active {
    background: var(--fv-red);
    color: #fff;
    font-weight: 600;
}

/* Stock theme paints "today" gold -- use a plain outline instead */
.ui-datepicker .ui-datepicker-today a {
    border: 1px solid var(--fv-text-faint);
    background: transparent;
}

.ui-datepicker .ui-datepicker-buttonpane {
    background: transparent;
    border-top: 1px solid var(--fv-border);
    margin: 10px 0 0;
    padding: 10px 0 0;
}

/* Only the Close/Apply button is used here, not jQuery UI's default "Today" button */
.ui-datepicker .ui-datepicker-buttonpane .ui-datepicker-current {
    display: none;
}

.ui-datepicker .ui-datepicker-buttonpane button {
    float: none;
    display: block;
    width: 100%;
    margin: 0;
    background: var(--fv-red);
    border: none;
    border-radius: var(--fv-radius-control);
    color: #fff;
    font: 600 11px var(--fv-font-mono);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 9px;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-buttonpane button:hover {
    background: var(--fv-red-brand);
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
    background: var(--fv-surface);
    color: var(--fv-text);
    border: 1px solid var(--fv-border-input);
    border-radius: var(--fv-radius-control);
}

#ui-datepicker-div {
    z-index: 9999 !important;
}

/* Range highlight for FV.initDateRangePicker() (js/date_range_picker.js) --
   jQuery UI's beforeShowDay class lands on the <td>, not the <a>. */
.ui-datepicker td.fv-range-day {
    background: var(--fv-red-tint);
    padding: 0;
}
.ui-datepicker td.fv-range-start {
    border-radius: 999px 0 0 999px;
}
.ui-datepicker td.fv-range-end {
    border-radius: 0 999px 999px 0;
}
.ui-datepicker td.fv-range-start a,
.ui-datepicker td.fv-range-end a {
    background: var(--fv-red);
    color: #fff;
}

/* table-flames */
.table-flames {}
.table-flames>thead>tr>th { text-align: center; }

.table-flames>tbody>tr:nth-child(odd)>td { background-color: var(--fv-surface-inset); }
.table-flames>tbody>tr:last-child>td { border-bottom: 1px solid var(--fv-border); }
.table-flames>tbody>tr.section { background-color: #ffdddd; }
.table-flames>tbody>tr.header>td { font-weight: bold; text-align: center; background-color: var(--fv-surface-dark); color: var(--fv-on-dark); }

.table-flames>tfoot>tr { background-color: var(--fv-surface-inset); border-top: 1px solid var(--fv-border); }


/* table-centered */
.table-centered>thead>tr>th { text-align: center; }
.table-centered>tbody>tr>td { text-align: center; }
.table-centered>tfoot>tr>td { text-align: center; }

/* table-small */
.table-small {}
.table-small>thead>tr>th { font-size: .9em; padding: 3px; }
.table-small>tbody>tr>td { font-size: .9em; padding: 3px; }
.table-small>tfoot>tr>td { font-size: .85em; }

.stat-good { color: red; background-color: #FFEBE6 !important; }
.stat-bad { color: blue; background-color: #c4ebff !important; }

/* .. */

/* table-darkborder */
.table-darkborder { border: 1px solid var(--fv-border); border-collapse: collapse; }
.table-darkborder>thead>tr:last-child>th { border-bottom: 1px solid var(--fv-border); }
.table-darkborder>thead>tr>th { text-align: center; background-color: var(--fv-surface-dark); color: var(--fv-on-dark); }
.table-darkborder>thead>tr>th:first-child { border-left: 1px solid var(--fv-border); }

.table-darkborder>tbody>tr>td { text-align: center; }
.table-darkborder>tbody>tr:nth-child(odd)>td { background-color: var(--fv-surface-inset); }
.table-darkborder>tbody>tr:last-child>td { border-bottom: 1px solid var(--fv-border); }
.table-darkborder>tbody>tr.section { background-color: #ffdddd; }
.table-darkborder>tbody>tr.header>td { font-weight: bold; text-align: center; background-color: var(--fv-surface-dark); color: var(--fv-on-dark); }
.table-darkborder>tbody>tr.header>td:first-child { border-left: 1px solid var(--fv-border); }
.table-darkborder>tbody>tr.header>td:last-child { border-right: 1px solid var(--fv-border); }

.table-darkborder>tfoot>tr { text-align: center; background-color: #ffff00; border-top: 1px solid #ccc; font-weight: bold; }

/* ... */
.modal-footer:empty { display: none; }

.inline-block { display: inline-block; }

img.team-logo { width: 84px; height: 56px; }

/* ... */

.btn-xs,
.btn-group-xs > .btn {
  padding: 1px 5px;
  font-size: 11px;
  line-height: 1.5;
  border-radius: 3px;
}

@media screen {
    .noscreen {
        display: none;
    }
}

@media print {
    .noprint { display: none; }
    nav { display: none; }
}

img.ajax-image {
    margin: 10px 0;
}

/* .. */

.text-red { color: var(--fv-red); }

/* Fonts downloaded from a certain website */

@font-face{
    font-family:DecimaMonoPro;
    src:url(/static/fonts/decimamonopro-bold-webfont.woff2) format("woff2"), url(/static/fonts/decimamonopro-bold-webfont.woff) format("woff");
    font-style:normal;
    font-weight:700
}

@font-face{
    font-family:DecimaMonoPro;
    src:url(/static/fonts/decimamonopro-webfont.woff2) format("woff2"), url(/static/fonts/decimamonopro-webfont.woff) format("woff");
    font-style:normal;
    font-weight:400
}
/* BARLOW */

/* Thin (100) */
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-Thin.woff2') format('woff2');
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-ThinItalic.woff2') format('woff2');
  font-weight: 100;
  font-style: italic;
}

/* ExtraLight (200) */
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-ExtraLightItalic.woff2') format('woff2');
  font-weight: 200;
  font-style: italic;
}

/* Light (300) */
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
}

/* Regular (400) */
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
}

/* Medium (500) */
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
}

/* SemiBold (600) */
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-SemiBoldItalic.woff2') format('woff2');
  font-weight: 600;
  font-style: italic;
}

/* Bold (700) */
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
}

/* ExtraBold (800) */
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-ExtraBoldItalic.woff2') format('woff2');
  font-weight: 800;
  font-style: italic;
}

/* Black (900) */
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Barlow';
  src: url('/static/fonts/barlow/Barlow-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
}

.decimamono {
    font-family: var(--fv-font-mono);
}

.read-report { opacity: 0.6; }
.read-report>a { color: #000 !important; opacity: 0.6; }