@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:wght@300;400;500;600;700&family=Roboto+Condensed:wght@300;400;500;600;700&display=swap');


:root {
  --main-font: "Jost";
  --table-font:"Roboto Condensed";
  --header-font:"Bebas Neue";
  --dark-grey: #343A40;
  --medium-grey: #7A7A7A;
  --light-grey: #E7E7E7;
  --orange: #F33619;
  --button-color:#F33619;
  --highlight-color:#078FCE;
}


.navbar-brand{
  padding:0px;
  line-height: 0px;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover{
  color:white;
}

.navbar-brand-title {
  display:flex;
  height:50px;
  align-items:center;
  margin-left:10px;
  margin-right:10px;
}

.navbar-brand-title-text{
  margin-left:5px;
}

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


.load-container{
  top:70%!important;
}


/* Default styles for .well (applies to screens with width >= 767px) */
.well {
  min-height: 640px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Media query for screens with width less than 767px */
@media only screen and (max-width: 766px) {
  .well {
    /* Reset or override styles for screens with width less than 767px */
    min-height: 20px; /* Reset min-height */
    max-width: 100%; /* Reset max-width */
    min-width: 100%; /* Reset min-width */
    display: block; /* Reset display */
  }
  
  .load-container{
    top:50%!important;
  }
}





@media (min-width: 768px){
.col-sm-8 {
    height: 500px;
}
}


.app-buttons {
  margin-top:auto;
}

.navbar{
  margin-bottom:10px;
}

/* Default navbar background color */
.navbar-default {
  background-color: var(--dark-grey);
}

/* fonts for navbar tabs */
.navbar-nav {
  font-family: var(--header-font);
  color:white!important;
  font-size:28px;
}

.navbar-default .navbar-nav>.active>a{
  background-color: var(--orange);
  color:white;
}

.navbar-default .navbar-brand, .navbar-brand:hover {
  color:white;
  font-family: var(--header-font);
  font-size:30px;
}

.navbar-default .navbar-nav>li>a {
  color:var(--light-grey);
}

.navbar-default .navbar-nav>li>a:hover {
  color:white;
}

.navbar-nav>li>.dropdown-menu{
  padding:0px;
}

.navbar-nav>li>.dropdown-menu a {
  color: var(--dark-grey);
  font-size:25px;
}

.navbar-nav>li>.dropdown-menu a:hover {
  color: var(--orange);
}

.dropdown-menu>.active>a, .dropdown-menu>.active>a:hover {
  background-color: var(--orange);
  color:white!important;
}


@media only screen and (max-width: 767px) {
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
    color: #E7E7E7;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
    color: white;
}
}

.page-header {
  font-family: var(--header-font);
  margin:0px;
  margin-bottom:10px;
  border:none;
}

body{
  font-family: var(--main-font);
  font-size:15px;
}

.Reactable{
  font-family: var(--table-font);
}

.Reactable .player{
  white-space:nowrap;
  overflow:hidden;
}

.Reactable .player-name{
  font-weight:bold;
  margin-bottom:-2px;
}

.Reactable .team-name{
  font-weight:bold;
  text-transform:uppercase;
}

.Reactable .team-division{
  font-size:12px;
  color:#505050;
  padding-top:0px;
}

.app-buttons button, .app-buttons a.btn.btn-default {
  width:100%;
  margin:2px 0px;
  background-color: var(--orange)!important;
  color: #fff!important;
  border-color: #C2230A!important;
}

.btn-danger {
  background-color: var(--orange)!important;
  color: #fff!important;
  border-color: #C2230A!important;
}


.app-buttons button:hover,
.app-buttons a.btn.btn-default:hover,
.app-buttons button:active, .btn-danger:hover, .btn-danger:active,
.app-buttons a.action-btn.btn-default:active {
  background-color: #C2230A!important; 
  color: #fff!important; 
  border-color: #C2230A!important; 
}


.placeholder-container {
  text-align:center;
}

.placeholder-header{
  font-weight:bold;
  font-size:35px;
}

.placeholder-content{
  font-size:25px;
}


.irs--shiny .irs-grid {
  font-family: var(--main-font);
}


.irs--shiny .irs-bar {
	background-color: var(--orange);
	border:none;
}


.irs--shiny .irs-from, .irs--shiny .irs-to, .irs--shiny .irs-single {
  font-family: var(--main-font);
  background-color: var(--orange);
}