html {
  height:100%;
  margin:0;
  padding:0;
  color:white;
}

body {
  font-family:'Calibri',sans-serif;
  font-size: 12pt;
  background-color: #111;
  color:white;
  margin:0;
  padding:0;
  background: #7d7e7d; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover,  #7d7e7d 0%, #0e0e0e 100%); /* FF3.6+ */
  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); /* Chrome,Safari4+ */
  background: -webkit-radial-gradient(center, ellipse cover,  #7d7e7d 0%,#0e0e0e 100%); /* Chrome10+,Safari5.1+ */
  background: -o-radial-gradient(center, ellipse cover,  #7d7e7d 0%,#0e0e0e 100%); /* Opera 12+ */
  background: -ms-radial-gradient(center, ellipse cover,  #7d7e7d 0%,#0e0e0e 100%); /* IE10+ */
  background: radial-gradient(ellipse at center,  #7d7e7d 0%,#0e0e0e 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}

#termsbox {
  position:absolute;
  top:10%;
  left:25%;
  width:50%;
  height:70%;
  z-index:1;
  background-color: midnightblue;
  color:white;
  padding:30px;
  border-radius: 8px;
  display:none;
}
#termscontent {
  height:95%;
  overflow:auto;
  font-size:10pt;
}
#termsbox h4 {
  font-family:'Calibri',sans-serif;
  font-size:16pt;
}

#pictureframe {
  position:absolute;
  top:10%;
  left:15%;
  width:70%;
  height:80%;
  z-index:1;
}

#loginbox {
  background-color: midnightblue;
  color:white;
  padding:20px;
  border-radius: 10px;
  border: 1px solid #111;
  box-shadow: 5px 5px 5px #333;
  opacity: .98;
  margin-top:15%;
  z-index:5;
}

.lbl { width:400px; text-align: center; }

.oh { width:400px; margin-bottom: 8px; }

.txt {
  height:30px;
  background-color: #555;
  border:1px inset #222;
  color:white;
  border-radius: 8px;
  width:93%;
  margin-left:2%;
  text-align:center;
}

.right { text-align:right; width:96%; }
.forgot a { font:10pt 'Calibri',sans-serif; color:lightgray; }
.btn { margin-top:5px; margin-left:20px; }
.logo { width: 100%; text-align: center; }
.smallterms {
  font: 9pt 'Calibri',sans-serif;
  font-style: italic;
  color:gray;
  text-align: center;
  margin-top:10px;
  padding-top:10px;
  border-top:1px inset;
}
.smallterms a { color: lightgray; }

.loginerr {
  font:14pt sans-serif;
  text-align: center;
  width:100%;
  color:red;
}


.smallterms {
  margin-top:2rem;font-size:0.85rem;color:lightgray;font-style:italic;
}

.redmsg {
  text-align:center;margin-top:1rem;margin-bottom:1rem;background-color:red;padding:1rem;color:white;font-weight:bold;
}

.colorwhite { color:white; }

.mt10r { margin-top:10rem; }
.pad3r { padding:3rem; }
.logo { width:200px; }

#conninfo {
  font-size:9pt;
  text-align: center;
  font-style: italic;
  margin-top:1rem;
}

.page {
  margin:1rem;
}

.row { display:block; width:100%; }
.col { display:block; width:100%; }

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
  .row { display:flex; }
  .col { flex:1; }
}


.pad-left-1 { padding-left:1rem; }
.pad-left-2 { padding-left:2rem; }
.pad-right-1 { padding-right: 1rem; }
.pad-right-2 { padding-right: 2rem; }
.pad-top-1 { padding-top: 1rem; }
.pad-top-2 { padding-top: 2rem; }
.pad-bottom-1 { padding-bottom: 1rem; }
.pad-bottom-2 { padding-bottom: 2rem; }
.margin-left-1 { margin-left:1rem; }
.margin-left-2 { margin-left:2rem; }
.margin-right-1 { margin-right: 1rem; }
.margin-right-2 { margin-right: 2rem; }
.margin-top-1 { margin-top: 1rem; }
.margin-top-2 { margin-top: 2rem; }
.margin-bottom-1 { margin-bottom: 1rem; }
.margin-bottom-2 { margin-bottom: 2rem; }
.padding-1 { padding:1rem; }
.padding-2 { padding:2rem; }
.margin-1 { margin:1rem; }
.margin-2 { margin:2rem; }

input { width:95%; padding:.5rem; font-size:1rem; margin-bottom:1rem; }
label { font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; font-size:1.2rem; }
button { background-color:rgb(4, 4, 133); color:white; padding-left:2rem; padding-right:2rem; padding-top:.5rem; padding-bottom:.5rem; border-radius: 5px; border:0; }
button:hover { background-color: rgb(6, 6, 160); }

.text-center { text-align: center; }
.text-right { text-align: right; }