﻿body {
   background-color: #001D33 !important;
   display: initial !important;
}

.newbodybackground{
	background-color: #001D33 !important;
	display: initial !important;
	background-image: radial-gradient(circle, #f7f7f7 20%, #f7f7f7 90%) !important;
}

.corner-div {
  position: fixed;
  top: 0;
  right: 0;
}

.dropdown {
  color: black;
  padding: 10px;
  border: none;
  font-size: 16px;
  position: fixed;
  margin-left:auto;
}


.dropdown option {
  color: black;
  border: none;
}

body::after {
   content: "";
   background-size: cover;
   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
   filter: grayscale(100%);
   opacity: 0.10;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   position: fixed;
   z-index: -1;
   background-repeat: no-repeat;
   background-position: center center;
}

.branding {
   text-align: center;
   color: rgb(255, 255, 255);
   padding: 8vh 0px 3vh;
}

.box {
   display: flex;
   flex-direction: column;
   width: 400px;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
   box-sizing: border-box;
   color: rgb(94, 108, 132);
   margin: 10em auto 24px;
   padding: 24px 40px;
   background: rgb(255, 255, 255);
   border-radius: 3px;
}

.usagebox{
   display: flex;
   flex-direction: column;
   width: 400px;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px;
   box-sizing: border-box;
   color: rgb(94, 108, 132);
   margin: 0px auto 24px;
   padding: 24px 40px;
   background: rgb(255, 255, 255);
   border-radius: 3px;
}

label {
   font-size: 14px;
}

label i {
   position: absolute;
   right: 0px;
   margin: 2px 12px 2px 10px;
   color: rgb(206, 212, 218);
   font-size: 20px !important
}

label i:hover {
   color: darkgrey;
}

.note {
   font-size: 12px;
   color: rgb(222, 235, 255);
   width: 400px;
   text-align: center;
   -webkit-box-align: center;
   align-items: center;
   margin: 0px auto 24px;
   border-radius: 3px;
}

.note a {
   color: rgb(222, 235, 255);
}

.note a:hover {
   text-decoration: underline;
   color: rgb(222, 235, 255);
}

.footer {
   position: absolute;
   font-size: 12px;
   color: rgb(222, 235, 255);
   width: 100%;
   text-align: center;
   -webkit-box-align: center;
   align-items: center;
   margin: 24px auto 16px;
   box-sizing: border-box;
   bottom: 0px;
   min-width: 400px;
   background: transparent;
   padding: 8px 16px;
   left: 0px;
}

@media only screen and (max-width: 560px) {
   .footer {      
      margin-bottom: 86px;
   }
}


.footer a {
   color: rgb(222, 235, 255);
}

.footer a:hover {
   text-decoration: underline;
   color: rgb(222, 235, 255);
}

.btn-primary {
   background-color: #00b1eb !important;
   border-color: #00b1eb !important;
}

.btn-primary:hover {
   background-color: #017fa8 !important;
   border-color: #017fa8 !important;
}

/* will hide the footer element when resolution drops under a certain level */
@media only screen and (max-height: 840px) {
   .footer {
      position: relative;
      width: 400px;
   }
}

.g-recaptcha {
}

.alert {
   font-size: 0.9rem;
}

.wrapper {
   margin: 0 auto;
}


/* Remove Spinners for Type Number */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}

input[type=number] {
    -moz-appearance:textfield; /* Firefox */
}

