@font-face {
  font-family: RoboSapien;
  src: url(/static/fonts/RoboSapien-4B1E4.otf);
}

@font-face {
  font-family: AudioWide;
  src: url(/static/fonts/Audiowide-en4g.ttf);
}

/*------------ Basic element formatting ------------------ */

h1 {
	background-color: #888;
	font-family: AudioWide;
	padding-left:8px; 
}

h2 {
	font-family: AudioWide;
}

strong {
	font-family: AudioWide;
}

body {
	margin: 0px;
	background: #171717;
	font-family: Noto Serif;
}

img {
	z-index: 1;
}

/*------------ Menu element formatting ------------------ */

/* Style the navigation menu */
#topnav {
  /*overflow: hidden;*/
  background-color: #333;
  position: relative;
  font-family: AudioWide;
  z-index: 4;
}

/* Hide the links inside the navigation menu (except for logo/home) */
#topnav #myLinks {
  display: block;
  position: absolute;
  right: 0px;
  background-color: #333;
  border-style: groove;
  border-color: #777;
  transition: all 300ms linear;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  display: block;
  visibility: visible;
  opacity: 1;
}

#topnav #myLinks.hide {
  visibility: hidden;
  opacity: 0;
}

#topnav #accountbtn {
  position: absolute;
  right: 50px;
  top: 0px;
  padding: 12px 16px 12px 16px;
  border-style: solid;
  border-width: 2px;
}

/* Hide used for other objects on the page */
.hide {
  visibility: hidden;
  opacity: 0;
  max-height: 0px;
  max-width:0px;
  overflow: hidden
}

/* Style navigation menu links */

/* Style the hamburger menu */
#topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

#topnav a {
  padding: 14px 16px;
  text-decoration: none;
  font-size: 24px;
  display: block;
  position: relative;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  z-index: 1;
  color: white;
  overflow: hidden;
}
#topnav a:hover {
  border-color: steelblue;
  color: black;
}
#topnav a:after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  background: white;
}

/* Fill Skew */
#topnav a::after {
  left: -20%;
  right: -20%;
  -moz-transform: skewX(45deg) scale(0, 1);
  -ms-transform: skewX(45deg) scale(0, 1);
  -webkit-transform: skewX(45deg) scale(0, 1);
  transform: skewX(45deg) scale(0, 1);
}

#topnav a:hover::after {
  -moz-transform: skewX(45deg) scale(1, 1);
  -ms-transform: skewX(45deg) scale(1, 1);
  -webkit-transform: skewX(45deg) scale(1, 1);
  transform: skewX(45deg) scale(1, 1);
}

/* Outermost container */
#container {
    width: 100%;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #046DAA;
  color: white;
} 

/* Main page content object */
#content {
    margin-left: 16px;
    margin-right: 16px;
    margin-top: 22px;
    padding-bottom: 16px;
    background: #333;
    color: white;
}

/* For sub objects with content */
.paragraph_content {
    margin: 16px;
}

@keyframes bluePulse {
  0% {color: #035584;}
  50% {color: #06a3ff;}
  100% {color: #035584;}
}

.blueGlow {
    color: #046DAA;
    animation-name: bluePulse;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}

.innerDiv {
	background-image: url(trans.png); 
	margin-right:50px; 
	padding:4px 10px;
	border-style: inset;
}

.header {
    height: 86px;
}

.sidebar-menu-arrow {
    max-width: 64px;  
    height: auto;
    margin:8px;
}

.menu-wrap {
    left:0;
    top:0;
    padding: 8px;
    width:360px;
    max-height:100%;
    overflow:scroll;
    position:fixed;
    z-index:10;
    border-style: inset;
    transition: .25s;
}


a:link {
    color: #99f;
}

a:visited {
    color: #848;
}

/*------------ Button types ------------------ */

.fancy-button {
  font-family: AudioWide;
  background-color: #046DAA;
  border-radius: 4px;
  border-style: none;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  min-height: 44px;
  outline: none;
  padding: 9px 20px 8px;
  position: relative;
  text-align: center;
  min-width: 10rem;
  max-width: 80%;
}

.fancy-button:hover,
.fancy-button:focus {
  opacity: .75;
}


.fancy-button-small {
  font-family: AudioWide;
  background-color: #046DAA;
  border-radius: 4px;
  border-style: none;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0;
  outline: none;
  padding: 5px 10px 4px;
  position: relative;
  text-align: center;
}

.fancy-button-small:hover,
.fancy-button-small:focus {
  opacity: .75;
}

@keyframes fadeAway {
  0% {opacity: 1.0;}
  100% {opacity: 0.0;}
}

/*------------ Banner types ------------------ */

.popup-banner {
    top:0px;
    font-family: AudioWide;
    color:#fff;
    width: 100%;
    min-height: 50%;
    background-color: darkred;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    position: absolute;
    font-size: 64px;
    text-align: center;
    border-style: solid;
    border-color: #400;
    border-width: 4px;
}

.popup-banner-calm {
    top:0px;
    font-family: AudioWide;
    color:#fff;
    width: 100%;
    min-height: 50%;
    background-color: #046DAA;
    animation-duration: 3s;
    animation-fill-mode: forwards;
    position: absolute;
    font-size: 64px;
    text-align: center;
    border-style: solid;
    border-color: #004;
    border-width: 4px;
}

/*------------ Control and form types ------------------ */

.big-text-entry {
    padding:8px 8px 128px;
    
}

.small-form-status {
    text-align: right;
    font-size: 10pt;
}

textarea,
input[type=password],
input[type=text] {
    color: white;
    background-color: #444;
    border-style: solid;
    border-radius: 1px;
    border-color: #046DAA;
    width: 100%;
    display: flex;
    margin-top: 8px;
    margin-bottom: 8px;
    font-family: arial;
    font-size: 11pt;
    resize: none;
    padding: 8px 0px 8px 8px;
}

textarea:hover,
textarea:focus,
input[type=password]:hover,
input[type=password]:focus,
input[type=text]:hover,
input[type=text]:focus {
    background-color: #555;
}

.msgbox {
    color: white;
    background-color: #444;
    border-style: solid;
    border-radius: 1px;
    border-color: #023566;
    width: 100%;
    margin-top: 8px;
    margin-bottom: 8px;
    font-family: arial;
    font-size: 11pt;
    resize: none;
    padding: 8px 0px 8px 8px;
}

.fileBox {
    color: white;
    background-color: #444;
    border-style: dashed;
    border-radius: 1px;
    border-color: #023566;
    width: 100%;
    display: flex;
    margin-top: 8px;
    margin-bottom: 8px;
    font-family: arial;
    font-size: 11pt;
    resize: none;
    padding: 8px 0px 8px 8px;
}

.namebox {
    float: left;
}

.timestamp {
    float: right;
    margin-right: 8px;
}
/*------------ For the control page I think? ------------------ */

th {
  background-color: #444;
  border: 1px solid #046DAA;
  text-align: left;
  padding: 8px;
  font-family: AudioWide;
  color: #fff;
}

td {
  background-color: #444;
  border: 1px solid #046DAA;
  text-align: left;
  padding: 8px;
  color: #fff;
}


input[type=checkbox] {
  display: none;
}

.switch-wrapper {
  position: relative;
  width: 70px;
  border: 1px solid;
  cursor: pointer;
  height: 22px;
  overflow: hidden;
}

.switch-on,
.switch-off,
.switch-on-disabled,
.switch-off-disabled {
  display: block;
  width: 50%;
  float: left;
  height: 100%;
  transition: 0.5s;
}

.switch-on {
  background-color: green;
  margin-left: -50%;
  text-indent: -18px;
  text-align: center;
  line-height: 21px;
}

.switch-off {
  text-indent: 18px;
  background-color: red;
  text-align: center;
  line-height: 21px;
}

.switch-on-disabled {
  background-color: lightgray;
  margin-left: -50%;
  text-indent: -18px;
  text-align: center;
  line-height: 21px;
  
}

.switch-off-disabled {
  text-indent: 18px;
  background-color: darkgrey;
  text-align: center;
  line-height: 21px;
}

.switch-group:before {
  display: block;
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  margin: 2px;
  background-color: #1b191e;
  top: 0px;
  left: 0;
  transition: 0.5s;
}

.switch-group {
  display: block;
  position: relative;
  height: 23px;
  width: 200%;
  user-select: none;
}

input[type=checkbox]:checked+.switch-group .switch-on {
  margin-left: 0;
}

input[type=checkbox]:checked+.switch-group .switch-on-disabled {
  margin-left: 0;
}

input[type=checkbox]:checked+.switch-group:before {
  left: calc(50% - 22px);
}