/* Site.css version 2.467  */      

* {
  box-sizing:border-box;
}

html, body {
  height: 97%;
  font-size: 16px;
  font-family: Arial,sans-serif;
  margin:0;
}

.overallcontainer {
  display: flex;
  flex-flow: column;
  height: 100%;
  max-width: 1100px;
}

.responsive-iframe {
  width:100%;
  height:100%;
  border:0;
}

.container {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: auto;
  padding-top: 0%;
  padding-bottom: 0%;
  padding-left: 4%;
  padding-right: 0%;
}

.footer {
  flex-grow: 0;
  flex-shrink: 0;
  background-color:#eee;
}

.footer_text {  
  font: 0.75rem Arial,sans-serif;
  font-style: italic;
  padding: 0px;
  line-height: 10px;
  height: 10px;
  text-align: center;
}

#title {
  width: 100%;
  height: auto;
}

.row {
  display: flex;
}

.column1 {
  flex: 60%;
}

.column2 {
  flex: 40%;
}

h1
{
  font: bold 1.125rem Arial,sans-serif;
  text-align: center; 
}

h2
{
  font: bold 1.0rem Arial,sans-serif;
  text-align: left;
}

h3
{
  font: bold 0.875rem Arial,sans-serif;
  text-align: center;
}

p, hr
{
  font: 0.875rem Arial,sans-serif;
  text-align: justify;
  margin-right: 4%;
}

.paragraph_style {
  color: black;
  font-family: Verdana,sans-serif;
  font-size: 0.9rem;
  border: 1px solid black; 
  padding: 2%; 
  border-radius: 10px;
  box-shadow: 10px 10px 5px black;
  width: 96%;
}

ul, li
{
  font: 0.875rem Arial,sans-serif;
  text-align: justify;
  margin-right: 4%;
}

.update_text_left {
  color: #999999;
  font-style: italic;
}

.footnote_text {
  color: #999999;
  font: 0.75rem Arial,sans-serif;
}

.calendar_text {
  font-family: Arial,helvetica,sans-serif;
  border-collapse: collapse;
  width: 100%;
  margin-right:4%;
}

.calendar_text td, #calendar_text th {
  border: 1px solid #ddd;
  padding: 10px;
}

.calendar_text th {
  padding-top: 12px;
  padding-bottom: 12px;
  padding-left: 10px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

.btn {
  font-family: Arial,helvetica,sans-serif;
  font-size: 0.9375rem;
  color: white;
  border: 1px solid lightgray;
  padding: 10px 20px;
  cursor: pointer;
  margin: 0% -0.5%;
}

.btnorange {background-color:#f59300;}
.btnorange:hover, .btnorange:active {background-color:#ffcc80; color:black;}

.btnblue {background-color:dodgerblue;}
.btnblue:hover, .btnblue:active {background-color:#33ccff; color:black;}

.btnpblue {background-color:#003153;}
.btnpblue:hover, btnpblue:active {background-color:#33aaff; color:black;}

.btngreen {background-color:#00cc44;}
.btngreen:hover, btngreen:active {background-color:#99ffbb; color:black;}

.btnbrown {background-color:#996633;}
.btnbrown:hover, btnbrown:active {background-color:#e6ccb3; color:black;}

.btnred {background-color:#ff0000;}
.btnred:hover, .btnred:active {background-color:#ff9999; color:black;}

.btnpurple {background-color:#8800cc;}
.btnpurple:hover, .btnpurple:active {background-color:#dd99ff; color:black;}

.btninfo {background-color:#2d89ef;}
.btninfo:hover, .btninfo:active {background-color:#1657a1;}

.btnpilot {background-color:#af7ac5;}
.btnpilot:hover, .btnpilot:active {background-color:#6d4180;}

.btnscores {background-color:#16c234;}
.btnscores:hover, .btnscores:active {background-color:#076e18;}

.btncanceled {background-color:#ed0c13;}
.btncanceled:hover, .btncanceled:active {background-color: #9e080d;}

.btnteam {background-color:#f379bb;}
.btnteam:hover, .btnteam:active {background-color:#a13a71;}

.btnmap {background-color:#8f2f2f;}
.btnmap:hover, .btnmap:active {background-color:#4d1010;}

.btnlocation {background-color:#946313;}
.btnlocation:hover, .btnlocation:active {background-color:#5e3c05;}

.btncurrent {background-color:#ff00002f; color:black; float:right; margin:0;}
.btncurrent:hover, .btncurrent:active {background-color:#aa00001f;}

.btngrid {background-color:blue; float:right; margin:0;}
.btngrid:hover, .btngrid:active {background-color:#33aaff; color:black;}

.btnweather {background-color:#34baeb; min-width:190px;}
.btnweather:hover, .btnweather:active {background-color:#0b7dda;}

.btnpete {background-color:#f4d03f; min-width:350px;}
.btnpete:hover, .btnpete:active {background-color:#f1c40f;}

.navbar {
  flex-grow: 0;
  flex-shrink: 0;
  background-color: #333;
  font-family: Arial;
  max-width:1100px;  
}

.navbar a {
  float: left;
  font-size: 1.0rem;
  color: white;
  text-align: center;
  padding: 14px 18px;
  text-decoration: none;
}

.dropbtn {
  cursor: pointer;
  font-size: 1.0rem;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

.dropdown {
  float: left;
  position: relative;
  display: inline-block;
}
                            
.navbar a.active {background-color: red;}
.navbar a:focus, .dropbtn:focus {background-color: #ddd; color:black;}

.dropdown-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;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {background-color: #ddd}

.dropdown1 {
  display: inline-block;
  position: relative;
}

.dropdown1-content {
  display: none;
  position: absolute;
  font-family: Arial,helvetica,sans-serif;
  background-color: #f1f1f1;
  min-width: 190px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown1-content a {
  color: black;
  padding: 12px;
  text-decoration: none;
  display: block;
}

.dropdown1-content a:hover {background-color: #ddd}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 0.75rem;
}

.tab button:hover {background-color: #ddd;}
.tab button.active {background-color: #ccc;}

.tabcontent {
  display: none;
  border-top: none;
  height: inherit;
  max-height: calc(100vh - 56px);  
  width: inherit;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1%;
  margin-bottom: 1%;
}

.image_container {
  position: relative;
  text-align: center;
  color: white;
}

.bottom_left {
  position: absolute;
  bottom:5%;
  color: black;
  font-family: Verdana,sans-serif;
  font-size: 0.9rem;
  border: 1px solid black; 
  padding: 0.5%; 
  border-radius: 10px;
  box-shadow: 10px 10px 5px black;
  background-color:rgb(255,255,255);
}

#current {
  background-color: #ff00001f;
}

#topBtn {
  display: none;
  position: fixed;
  bottom: 55px;
  right: 30px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 10px;
  font-size: 1.125rem;
}

#calBtn {
  display: none;
  position: fixed;
  bottom: 55px;
  right: 90px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: blue;
  color: white;
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  font-size: 1.125rem;
}

#topBtn:hover, #calBtn:hover {
  background-color: #555;
}

table.sortable td,
table.sortable th {
  font: 14px Arial,sans-serif;
  text-align: left;
  padding: 0.125em 0.25em;
  width: 8em;
}

table.sortable th {
  border-bottom: thin solid #888;
  position: relative;
  background: beige;
}

table.sortable th.no-sort {
  padding-top: 0.35em;
}

table.sortable th:nth-child(5) {
  width: 10em;
}

table.sortable th button {
  padding: 4px;
  margin: 1px;
  font-weight: bold;
  background: transparent;
  border: none;
  display: inline;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  outline: none;
  cursor: pointer;
}

table.sortable th button span {
  position: absolute;
  right: 4px;
}

table.sortable th[aria-sort="descending"] span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.sortable th[aria-sort="ascending"] span::after {
  content: "▲";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.show-unsorted-icon th:not([aria-sort]) button span::after {
  content: "♢";
  color: currentcolor;
  font-size: 100%;
  position: relative;
  top: -3px;
  left: -4px;
}

table.sortable tbody tr:nth-child(odd) {
  background-color: #ddd;
}

table.sortable th button:focus,
table.sortable th button:hover {
  padding: 2px;
  border: 2px solid currentcolor;
  background-color: #e5f4ff;
}

table.sortable th button:focus span,
table.sortable th button:hover span {
  right: 2px;
}

table.sortable th:not([aria-sort]) button:focus span::after,
table.sortable th:not([aria-sort]) button:hover span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.sortable td {
  text-align:left;
}

.tooltip1 {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip1 .tooltiptext1 {
  visibility: hidden;
  width: max-content;
  max-width: 500px;
  background-color: #555;
  color: #fff;
  text-align: justify;
  border-radius: 5px 0px 5px 5px;
  padding: 8px 8px;
  position: absolute;
  display:block;
  z-index: 1;
  right: 38px;
  top: 5px;
  opacity: 0;
}

.tooltip1 .tooltiptext1::after {
  content: " ";
  position: absolute;
  top: 5px;
  left: 100%; /* To the right of the tooltip */
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent #555;}

.tooltip1:hover .tooltiptext1 {
  visibility: visible;
  opacity: 1;
}

.popper,
.tooltip {
  position: absolute;
  z-index: 9999;
  background: #FFC107;
  color: black;
  width: 150px;
  border-radius: 3px;
  box-shadow: 0 0 2px rgba(0,0,0,0.5);
  padding: 10px;
  text-align: center;
}
.style5 .tooltip {
  background: #1E252B;
  color: #FFFFFF;
  max-width: 200px;
  width: auto;
  font-size: .8rem;
  padding: .5em 1em;
}
.popper .popper__arrow,
.tooltip .tooltip-arrow {
  width: 0;
  height: 0;
  border-style: solid;
  position: absolute;
  margin: 5px;
}

.tooltip .tooltip-arrow,
.popper .popper__arrow {
  border-color: #FFC107;
}
.style5 .tooltip .tooltip-arrow {
  border-color: #1E252B;
}
.popper[x-placement^="top"],
.tooltip[x-placement^="top"] {
  margin-bottom: 5px;
}
.popper[x-placement^="top"] .popper__arrow,
.tooltip[x-placement^="top"] .tooltip-arrow {
  border-width: 5px 5px 0 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  bottom: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.popper[x-placement^="bottom"],
.tooltip[x-placement^="bottom"] {
  margin-top: 5px;
}
.tooltip[x-placement^="bottom"] .tooltip-arrow,
.popper[x-placement^="bottom"] .popper__arrow {
  border-width: 0 5px 5px 5px;
  border-left-color: transparent;
  border-right-color: transparent;
  border-top-color: transparent;
  top: -5px;
  left: calc(50% - 5px);
  margin-top: 0;
  margin-bottom: 0;
}
.tooltip[x-placement^="right"],
.popper[x-placement^="right"] {
  margin-left: 5px;
}
.popper[x-placement^="right"] .popper__arrow,
.tooltip[x-placement^="right"] .tooltip-arrow {
  border-width: 5px 5px 5px 0;
  border-left-color: transparent;
  border-top-color: transparent;
  border-bottom-color: transparent;
  left: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}
.popper[x-placement^="left"],
.tooltip[x-placement^="left"] {
  margin-right: 5px;
}
.popper[x-placement^="left"] .popper__arrow,
.tooltip[x-placement^="left"] .tooltip-arrow {
  border-width: 5px 0 5px 5px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-bottom-color: transparent;
  right: -5px;
  top: calc(50% - 5px);
  margin-left: 0;
  margin-right: 0;
}

#start_height1, #start_height2, #start_height3 {
  display: block;
  width: 60%;
}

#start_height_cap1, #start_height_cap2, #start_height_cap3 {
  left: 62%;
  bottom: 11%; 
}

@media screen and (max-height:600px)
{
  #title {display:none;}
  .bottom_left {bottom:1%;}
}

@media screen and (max-width:525px)
{
  #calBtn {bottom:98px;}
  #topBtn {bottom:98px;}
}

@media screen and (max-width:500px)
{
  #title {display:none;}
  .column2 {display:none;}
  .tooltip1 .tooltiptext1 {max-width:250px;}
  .bottom_left {bottom:-1%;}
  #start_height1 {width:95%;}
  #start_height_cap1 {position:relative; left:0%; box-shadow:none;}
  #start_height2 {width:95%;}
  #start_height_cap2 {position:relative; left:0%; box-shadow:none;}
  #start_height3 {width:95%;}
  #start_height_cap3 {position:relative; left:0%; box-shadow:none;}
}