/* this link defines the down arrow for the menu buttons */
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");

/* Picks not submitted warning banner */
#warning-banner 
{
  display: none;
  background: rgba(100, 0, 0 ,0.5);
  text-align: center;
  color: #999999;
}

#warning-banner a 
{
  color:#CCCCCC;
  text-decoration: none;
}

/* Add a black background color to the top navigation */
.topnav {
  /* background:rgba(0,0,0,0.5); */
  overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a 
{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav #mobile-menu-toggle {
  display: none;
}

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

.rightdropdown {
  float: right;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropdownBtn 
{
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.drop-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.drop-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropdownBtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.drop-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .drop-content {
  display: block;
}

/* Add an active class to highlight the current page -- override color from any other styling */
.activePage, .activeParent .dropdownBtn {
  color: cadetblue !important;
}

/* When the screen is less than 600 pixels wide, hide all links. Show the menu that should open and close the topnav (#mobile-menu-toggle) */
/* 12/17/24 update: hide all links, display hamburger menu always */
/* @media screen and (max-width: 600px), (hover:none), (hover:on-demand)  */
@media screen, (hover:none), (hover:on-demand) 
{
  .dropdown .dropdownBtn 
  {
    display: none;
  }
  
  .topnav #mobile-menu-toggle 
  {
    display: block;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the menu. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
/* 12/17/24 update: hide all links, display hamburger menu always */
/* @media screen and (max-width: 600px), (hover:none), (hover:on-demand)  */
@media screen, (hover:none), (hover:on-demand) 
{
  .topnav.responsive 
  {
    position: relative;
  }

  .topnav.responsive a 
  {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav.responsive .dropdown 
  {
    float: none;
  }

  .topnav.responsive .drop-content 
  {
    position: relative;
  }

  .topnav.responsive .dropdown .dropdownBtn 
  {
    display: block;
    width: 100%;
    text-align: left;
  }
}

.login-bar {
  width:963px;
  padding-left:10px;
  font-size:13px;
  background: rgba(0,0,0,0.5);
}
.login-bar .league-info {
  display: inline-block;
  width: 50%;
  text-align: left;
}

.login-info {
  display: inline-block;
  text-align: right;
  width: 50%;
}

#header-bar {
  position: fixed;
  top: 0;
  z-index: 99;
  background: rgba(0,0,0,100);
}

/* This is a temporary workaround until everywhere else can remove styling and CSS with margins to match */
/* .login-bar, #warning-banner, .topnav { */
  /* margin-left: 10px; */
  /* margin-right: 10px; */
/* } */
/* Logout button needs its own margin for some reason - get rid of this too */
#logout-button {
  margin-right: 20px;
}

#mobile-menu-toggle{padding:1rem;position:relative;z-index:9999}
#mobile-menu-toggle .button_container{position:relative;display:table-cell;height:auto;cursor:pointer;z-index:100;transition:opacity .25s ease}
#mobile-menu-toggle .button_container:hover{opacity:.7}
#mobile-menu-toggle .button_container.active .top{-webkit-transform:translateY(11px) translateX(0) rotate(45deg);-ms-transform:translateY(11px) translateX(0) rotate(45deg);transform:translateY(11px) translateX(0) rotate(45deg);background:#696969}
#mobile-menu-toggle .button_container.active .middle{opacity:0;background:#696969}
#mobile-menu-toggle .button_container.active .bottom{-webkit-transform:translateY(-11px) translateX(0) rotate(-45deg);-ms-transform:translateY(-11px) translateX(0) rotate(-45deg);transform:translateY(-5px) translateX(0) rotate(-45deg);background:#696969}
#mobile-menu-toggle .button_container .bottom,#mobile-menu-toggle .button_container .middle,#mobile-menu-toggle .button_container .top{background:#696969;border:none;width:100%;position:absolute;top:0;left:0;transition:all .35s ease;cursor:pointer}
#mobile-menu-toggle #mobile-menu-toggle_text{display:table-cell;position:relative;text-transform:none;color:#696969;padding-left:1rem}
#mobile-menu-toggle_text
{
  visibility: hidden;
}

#snackbar {
  visibility: hidden;
  width: 500px;
  background-color: #7d0000;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 255;
  left: 50%;
  top: 30px;
  font-size: 17px;
  transform: translate(-50%, -50%);
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;} 
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

#warning_table
{
  width:100%;
  text-align: center;
}

#warning_table td
{
  border: 5px solid black;
}

#logout_title
{
  font-size:16px;
  color:lightskyblue;
}

#logout_text
{
  font-size:12px;
}

/* The Modal window */
.logout_modal 
{
  /* This way it could be display flex or grid or whatever also. */
  display: none;
  
  /* Probably need media queries here */
  
  height: 150px;
  
  position: fixed;
  
  z-index: 100;
  
  top: 12.5%;
  
  /* Use this for centering if unknown width/height */
  /*transform: translate(-50%, -50%); */
  
  /* If known, negative margins are probably better (less chance of blurry text). */
  /* margin: -200px 0 0 -200px; */
  
  border-radius: 20px;
  border: 1px solid #999;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.85); /* Black w/ opacity */

  animation: popup 0.5s;
}

/* Logout Modal background */
.logout_modal_overlay 
{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.5); /* Black w/ opacity */
}


.logout_modal_content 
{
  box-sizing: border-box;
  position: absolute;
  top: 5px;
  left: 5px;
  width: 92%;
  height: 98%;
  overflow: auto;
}

.logoutModalClose 
{
  position: absolute;
  
  /* don't need to go crazy with z-index here, just sits over .modal-guts */
  z-index: 1;
  
  top: 10px;
  
  /* needs to look OK with or without scrollbar */
  right: 20px;
  
  padding: 2px 2px;
  
  color: cadetblue;
  float: right;
  font-size: 28px;
  font-weight: bold;
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.85); /* Black w/ opacity */
}

.logoutModalClose:hover,
.logoutModalClose:focus 
{
  color: #8fe8ea;
  text-decoration: none;
  cursor: pointer;
}

.logoutDisplay 
{
  white-space: nowrap;
  color:#999999;
  font-size: 12px;
  text-align: center;
  width:90%;
  margin-left:5%;
  margin-right:5%;
}

.logoutDisplay td
{
  padding: 5px;
}

.logoutDisplay input[type='button']
{
  font-size:12px;
  background-color:#999999;
  color:black;
  border-radius:25px;
  width:75%;
  height:auto;
}

.logout_button
{
  width:50%;
}