/* These styles are generated from project.scss. */

@font-face {
  font-family: "Roboto Condensed";
  src: url('../fonts/RobotoCondensed/RobotoCondensed-Regular.ttf');
}

body {
  font-family: "Roboto Condensed", sans-serif;
  /*background-color: rgb(30, 75, 121);*/
  background-color: #4d4d4d;
  color: white;
}

.modal-content {
  background-color: #4d4d4d;
}

.bg-light, .navbar-light, .navbar-brand {
  background-color: rgb(30, 75, 121)!important;
  color: white!important;
}

.navbar-toggler-icon {
  color: white!important;
}

.navbar-toggler {
  color: white!important;
  border-color: white!important;
  background-color: white!important;
}

.nav-link {
  padding: 0;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
  color: black!important;
}

a.nav-link {
  color: #e6e6ff!important;
}

a {
  color: #80bdff;
}

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

label {
  font-weight: bold;
  margin-bottom: 0;
}

.strike {
   text-decoration: line-through;
}

.is_cut {
  background-color: red;
}

.on-cutting-line {
  border-bottom: black 2px solid;
}

.selections-box {
  font-size: 0.80rem;
}

#leaderboard {
  margin: 0;
  padding: 0;
}

#leaderboard-table th, #leaderboard-table td {
  padding: 0;
  text-align: center;
  font-size: .75rem;
  color: white!important;
}

#sweat-table th, #sweat-table td {
  padding: 0;
  text-align: center;
  font-size: .75rem;
  color: white;
}

#picks-table th, #picks-table td {
  padding: 0;
  text-align: center;
  font-size: .75rem;
  vertical-align: middle;
  color: white!important;
}

#picks-table .form-control {
  font-size: .75rem;
  padding: 0;
  line-height: 1;
}

@media (min-width: 800px) {
    #leaderboard-table th, #leaderboard-table td {
        font-size: 1.1rem;
    }

    #sweat-table th, #sweat-table td {
        font-size: 1.1rem;
    }

    #picks-table th, #picks-table td {
        font-size: 1.1rem;
    }

    .selections-box {
        font-size: 1.1rem;
    }
}

._1, ._1A, ._1a {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(188,0,0);
    color: white;
}

._2, ._2B, ._2X, ._2b, ._2x {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(195,205,212);
    color: black;
}

._3 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(37,59,132);
    color: white;
}

._4 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(193,168,0);
    color: black;
}

._5 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(28,91,27);
    color: white;
}

._6 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: black;
    color: white;
}

._7 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(182,61,19);
    color: black;
}

._8 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(178,118,146);
    color: black;
}

._9 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(19,161,156);
    color: black;
}

._10 {
      display: inline-block;
      width: 27px;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      font-weight: 700;
      vertical-align: top;
      text-align: center;
      border-radius: 1px;
      background-color: rgb(97,15,154);
      color: white;
}

._11 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(107,107,107);
    color: white;
}

._12 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(47,154,59);
    color: black;
}

._13 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(65,55,51);
    color: white;
}

._14 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(121,0,49);
    color: white;
}

._15 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(240,230,140);
    color: black;
}

._16 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: lightblue;
    color: red;
}

._17 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(0,0,128);
    color: white;
}

._18 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: forestgreen;
    color: yellow;
}

._19 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: #002366;
    color: red;
}

._20 {
    display: inline-block;
    width: 27px;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 700;
    vertical-align: top;
    text-align: center;
    border-radius: 1px;
    background-color: rgb(255,0,255);
    color: yellow;
}

.brackets > div {
  vertical-align: top;
  clear: both;
}
.brackets > div > div {
  float: left;
  height: 100%;
}
.brackets > div > div > div {
  margin: 50px 0;
}
.brackets div.bracketbox {
  position: relative;
  width: 100%; height: 100%;
  border-top: 1px solid #555;
  border-right: 1px solid #555;
  border-bottom: 1px solid #555;
}

.brackets div.bracketbox > span {
  position: absolute;
  left: 40px;
  font-size: 0.85em;

}
.brackets div.bracketbox > span.info1 {
  position: absolute;
  top: -20px;
  left: 280px;
  font-size: 0.8em;
  color: #BBB;
}
.brackets div.bracketbox > span.info2 {
  position: absolute;
  bottom: -20px;
  left: 280px;
  font-size: 0.8em;
  color: #BBB;
}
.brackets div.bracketbox > span.teama {
  top: -13.5px;
  background-color: white;
  padding	: 5px 20px 5px 20px;
  border: 1px solid black;
}
.brackets div.bracketbox > span.teamb {
  bottom: -13.5px;
  background-color: white;
  padding	: 5px 20px 5px 20px;
  border: 1px solid black;
}
.brackets div.bracketbox > span.teamc {
  bottom: -13.5px;
  background-color: white;
  padding	: 5px 20px 5px 20px;
  border: 1px solid black;
}
.brackets > .group2 {
  height: 260px;
  width: 25%;
}
.brackets > .group4 {
  height: 260px;
  width: 75%;
}
.brackets > .group5 {
  height: 260px;
  width: 75%;
}
.brackets > .group2 > div {
  width: 49%;
}
.brackets > .group3 {
  height: 320px;
  width: 50%;
}
.brackets > .group3 > div {
  width: 32.7%;
}
.brackets > .group4 > div {
  width: 24.5%;
}
.brackets > .group5 > div {
  width: 19.6%;
}
.brackets > .group6 {
  height: 2000px;
}
.brackets > .group6 > div {
  width: 16.3%;
}
.brackets > .group7 > div {
  width: 13.3%;
}
.brackets > div > .r1 > div {
  height: 60px;
}
.brackets > div > .r2 > div {
  margin: 80px 0 110px 0;
  height: 110px;
}
.brackets > div > .r3 > div {
  margin: 135px 0 220px 0;
  height: 220px;
}
.brackets > div > .r4 > div {
  margin: 250px 0 445px 0;
  height: 445px;
}
.brackets > div > .r5 > div {
  margin: 460px 0 900px 0;
  height: 900px;
}
.brackets > div > .r6 > div {
  margin: 900px 0 0 0;
  height : 1800px;
}
.brackets > div > .r7 > div {
  margin: 1800px 0 0 0;
}
.brackets div.final > div.bracketbox {
  border-top: 0px;
  border-right: 0px;
  height: 0px;
}
.brackets > div > .r4 > div.drop {
  height: 180px;
  margin-bottom: 0px;
}
.brackets > div > .r5 > div.final.drop {
  margin-top: 345px;
  margin-bottom: 0px;
  height: 1px;
}
.brackets > div > div > div:last-of-type {
  margin-bottom: 0px;
}

.verticalTableHeader {
    text-align:center;
    white-space:nowrap;
    transform-origin:50% 50%;
    transform: rotate(90deg);

}
.verticalTableHeader:before {
    content:'';
    padding-top:110%;/* takes width as reference, + 10% for faking some extra padding */
    display:inline-block;
    vertical-align:middle;
}

.race-official {
  background-color: #ff9999;
}

.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
}