/* CSS Document */

* {
  box-sizing: border-box;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

[class*="col-"] {
     float: left;
     padding: 3px;
     border: 0px solid red;
}


.row::after {
     content: "";
     clear: both;
     display: table;
}

.datainput {
     border: solid lightgray 2px;
     border-radius: 10px;
     box-shadow: 0px 0px 10px black;
     margin: 15px 0px 15px;
     padding: 0px 10px;
     background-color: white;
}

body {
     margin: 0px 0px 0px 0px;
     font-family: 'Cairo', sans-serif;
     background-color: #1b5bab;
}

p, h3, input[type=text], input[type=password], input[type=submit], li, input[type=file], input[type=date], input[type=time], input[type=number], input[type=url], textarea, select, input[type=password] {
     color: black;
     font-size: 18px;
     line-height: 28px;
     font-family: Cairo;
}

input[type=text], input[type=date], input[type=time], input[type=number], input[type=url], textarea, option, input[type=password] {
     background-color: cornsilk;
}

input[type=submit]{
     cursor: pointer;
}

.notes {
     font-size: 16px;
     line-height: 20px;
}

.menubar {
     /*background-color: #042749;*/
      background-color: #1b5bab;
     height: 100vh;
}

.flex-container > div {
  width: 30%;
  margin: 5px 0.5%;
  padding: 0px;
     border: solid lightgray 1px;
}

.flex-container > div:hover {
     background-color: lightgray;
}

.flex-container {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 0px;
    justify-content: center;
	font-size: 16px;
}

#hamburger {
     display: none;
}

#menu {
     display: block;
}

#vim {
     width: 25%;
     height: 25%;
}

.glow {
  font-size: 40px;
  color: #fff;
  text-align: center;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  animation: glow 1s ease-in-out infinite alternate;
}

.spkrpic {
     width: 150px; 
}

.serpic {
     width: 225px; 
     vertical-align: middle; 
     margin-right: 0px;
     box-shadow: 0px 0px 10px blue;
}
.songcol {
     column-count: 3;
}

tr:nth-child(even) { background-color: lightgray; }

table {
	width: 100%;
	font-size: 16px;
}

td {
	padding: 5px;
}


.graph {
    width:100%; 
    margin: 0px auto 100px auto; 
    border: solid black 2px; 
    height: 305px; 
    background-color: white; 
    color: antiquewhite;
    /*box-shadow: 5px 3px 8px black;*/
}

#barchart {
	font-size: 18px; 
	font-weight:normal;
     color: darkgray;
}

#mfblogo {
     width: 10%;
}

.buttonx {
     font-size: 16px
}

.btn {
   font-size: 20px;
   overflow: auto;
   background-color: purple;
   color: white;
   border: solid white 3px;
   border-radius: 10px;
   padding: 10px;
   font-family: Cairo;
   cursor: pointer;
}

.btn:hover {
   background-color: #042749;
}

#vid {
   width: 60%;
}

@-webkit-keyframes glow {
  from {
    text-shadow: 0 0 10px #000, 0 0 20px #000, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 80px #e60073;
  }
  to {
    text-shadow: 0 0 20px #fff, 0 0 30px #ff4da6, 0 0 40px #ff4da6, 0 0 50px #ff4da6, 0 0 60px #ff4da6, 0 0 70px #ff4da6, 0 0 80px #ff4da6;
  }
}

#vidstream {
     width: 33%;
     text-align: left;
}

legend {
     font-size: 24px; background-color: lightgray; border: solid black 1px; color: black;
}

#myBtnTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: red; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 10px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

@media only screen and (max-width: 1400px){
     p {
          font-size: 16px;
     }
}

@media only screen and (max-width: 900px) {
     /* For mobile phones: */
     [class*="col-"] {
     width: 100%;
     }
     
     .menubar {
          height: auto;
     }
     
     p, h3, input[type=text], input[type=password], li, input[type=file], input[type=date], input[type=time], input[type=number], input[type=url], textarea, select, input[type=password] {
          font-size: 16px;
          line-height: 18px;
     }
     
     input[type=submit]{
          background-color: lightgray; 
          padding: 10px 10px;
          border-radius: 10px;
          font-size: 16px;
          border: solid gray 1px;
     }
     
     h1 {
          font-size: 24px;
     }
     
     .datainput {
          padding: 0px 4px;
          margin: 15px 20px;
     }
  
     #hamburger {
          display: block;
     } 
     
     #menu {
          display: none;
     }
    
     #vim {
          width: 75%;
          height: 75%;
     } 
     
     .flex-container > div {
          width: 100%;
          margin: 0px;
          padding: 0px;
     }
     
     .songcol {
          column-count: 1;
          font-size: 12px;
     }

     .graph {
		width:100%; 
		margin-bottom: 30px;
	}
	
	#barchart {
		font-size: 9px; 
		font-weight: normal;
	}

     #vidstream {
          width: 100%;
     }

     legend {
          font-size: 16px; background-color: lightgray; border: solid black 1px; color: black;
     }

     #logo {
          display: none;
     }
     
     #mfblogo {
         width: 50%;
     }
      #vid {
      width: 100%;
   }
}