body{
  margin: 0;
  padding: 0;
  background: #111111;
  /* background:url('../img/snow.gif') repeat; */
}

h1, h2, h3, h4{
  margin: 0;
  padding: 0;
  text-transform: uppercase;
  color:yellow;
}

.title {
  margin-bottom: 10px;
  padding: 0;
  text-transform: uppercase;
  color:yellow;
  text-align: center;
}

.container {
 margin: 5%;
}

p, div{
  margin: 0;
  padding: 0;
  color:#F2F2F2;
  /* font-family: Verdana,'Lucida Grande', sans-serif; */
}

ul, li, label, button{
  margin: 0;
  padding: 0;
  color:#28C12C;
}

ul{
  list-style-type: none;
}

ol li {
  color:#F2F2F2;
  margin-bottom: 10px;
}

a{
  text-decoration: none;
  color:#28C12C;
}

form{
  text-align: center;
}

.center {
  text-align: center;
}

.refer-body{
  text-align: center;
}

input[type=submit]{
  background-color:#000000;
  color:#28C12C;
  border: none;
  padding: 10px 16px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.8em;
}

.link{
  font-weight: bold;
  text-decoration: none;
  color:#28C12C;
  text-transform: uppercase;
}

.link-center{
  text-decoration: none;
  color:#28C12C;
  text-transform: uppercase;
  text-align: center;
}

nav{
  display:flex;
  flex-wrap: wrap;
  margin-top: 10px;
  margin-bottom: 10px;
  justify-content: center;
  align-items: center;
  text-transform: uppercase;
  font-weight: 500;
}

nav ul{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

nav li {
  margin-left: 20px;
  margin-bottom: 5px;
}

nav a {
  color:#00FF00;
}

nav a:link{
  color:#00FF00;
}

nav a:visited{
  color:#00FF00;
}

nav a:hover {
  color:yellow;
}

nav a:active {
  color:yellow;
}

.alerts {
  background-color: red;
  color: black;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.notification {
  background-color: yellow;
  color: black;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.events {
  background-color: #111111;
  color: #F2F2F2;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.btn{
  background: #28C12C;
  color: #000000;
}

.btn :disabled, 
.btn[disabled] {
  background: #222222;
  color:silver;
}

button{
  margin-top: 0px;
  border-color: #28C12C;
  background: #000000;
  border:0;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 0.8em;
  padding: 10px 16px;
}

button :disabled,
button[disabled] {
  background: #222222;
  color:silver;
}

.frame {
  margin-bottom: 100px;
  overflow-y:scroll;
  height: 500px;
  border-color:#252525;
  border-style: solid;
  border-width: 1px;
}

.center {
  text-align: center;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #28C12C;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: rgb(0, 0, 0);
  -webkit-transition: .4s;
  transition: .4s;
}

input{
  color:#F2F2F2;
  font-size: medium;
  padding: 10px 1px;
  background-color: #111111;
  border: 1px solid #777;
}

input:focus{
  outline: none;
  border-color: #28C12C;
}

textarea{
  border-color: #222222;
  outline: none;
}

textarea:focus{
  outline: none;
  border-color: #28C12C;
  border-width: 1px;
  border-style: solid;
}

input:checked + .slider {
  background-color: #ffee00;
}

input:focus + .slider {
  box-shadow: 0 0 1px #ffd900;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

progress {
  visibility: hidden;
  border-width: 1px;
  border-color: #777; 
  border-style: solid;
  width: 50%;
  height: 20px;
  box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
}
progress::-webkit-progress-bar {
  background-color: #000000;
}
progress::-webkit-progress-value {
  background-color: #28C12C;
}

form{
  padding: 20px;
  margin: 1%;
  background: #222222;
}

#characters-left{
  color: #28C12C;
  font-size: small;
  margin-bottom:20px;
}

footer{
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #aaa;
}

footer ul {
  display: flex;
  align-items: center;
}

footer li {
  font-size: small;
  color: gray;
  margin-left: 20px;
}

footer a {
  color: gray;
}

footer a:hover{
  color: yellow;
}

#forgot-password{
  margin-top: 20px;
  text-align: right;
}

.error{
  color: #ff0000;
  margin: 10px 2px;
  font-size: 0.8em;
  font-weight: bold;
}

.subtext {
  font-size: small;
  list-style-type: none;
}
.subtext li {
  color: #fff;
}

header{
  display: flex;
  align-items: center;
}

header h2{
  font-size: 3em;
  margin-bottom: 10px;
}
header h3{
  font-size: 1.6em;
  color: #28C12C;
}
header .btn{
  padding: 12px 18px;
  text-transform: uppercase;
  text-align: center;
  font-weight: bold;
  display: inline-block;
  font-size: 0.8em;
}

#registration {
  margin-bottom: 5px;
  padding-bottom: 5px;
}

.registration-field{
  margin-bottom:10px;
}

.register-button-container{
  display: flex;
  justify-content: center;
}

.register {
  font-size: medium;
  color: yellow;
  width: 100%;
  margin-bottom: 10px;
}

.login {
  width: 100%;
}