* {
	box-sizing: border-box;
}

body {
    margin:0px;
    text-align:center;
    overflow-y:hidden;
    overflow-x:hidden;
}

html, body {
    font-family:"Roboto";
    color:white;
    background-color:#99ccff;
}

@-webkit-keyframes cd-slide-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30vh);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes cd-slide-up {
  0% {
    opacity: 0;
    -moz-transform: translateY(30vh);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes cd-slide-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30vh);
    -moz-transform: translateY(30vh);
    -ms-transform: translateY(30vh);
    -o-transform: translateY(30vh);
    transform: translateY(30vh);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}

@keyframes err-slide-down {
  0% {
    opacity: 0;
	margin-top: 0px;
	height: 0px;
  }
  100% {
    opacity: 1;
	margin-top: 4px;
	height: 14px;
  }
}

@keyframes err-slide-up {
  0% {
    opacity: 1;
	margin-top: 4px;
	height: 14px;
  }
  100% {
	opacity: 0;
	margin-top: 0px;
	height: 0px;
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.main {
    margin-top:120px;
    margin-bottom:50px;
    font-size:40px;
    background:#66b3ff;
    padding:60px;
}

.icons {
	color:#ffffff;
	font-size:30px;
}

.m1 {
	animation-timing-function: ease-in;
	-webkit-animation-name: cd-slide-up;
	-moz-animation-name: cd-slide-up;
	animation-name: cd-slide-up;
	-webkit-animation-duration: 0.3s;
	-moz-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
}

.m2 {
	-webkit-animation-name: cd-slide-up;
	-moz-animation-name: cd-slide-up;
	animation-name: cd-slide-up;
	-webkit-animation-duration: 0.5s;
	-moz-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
	margin-top: 10px;
}

.m3 {
	-webkit-animation-name: cd-slide-up;
	-moz-animation-name: cd-slide-up;
	animation-name: cd-slide-up;
	-webkit-animation-duration: 0.6s;
	-moz-animation-duration: 0.6s;
	animation-duration: 0.6s;
	-webkit-animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
	margin-top: 10px;
}

.m4 {
	-webkit-animation-name: cd-slide-up;
	-moz-animation-name: cd-slide-up;
	animation-name: cd-slide-up;
	-webkit-animation-duration: 0.7s;
	-moz-animation-duration: 0.7s;
	animation-duration: 0.7s;
	-webkit-animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
	margin-top: 10px;
	background-color: #0066ff;
	border-radius: 20px;
	display: inline-block;
	width: 120px;
	cursor: pointer;
	height: 40px;
}

.m5 {
	-webkit-animation-name: cd-slide-up;
	-moz-animation-name: cd-slide-up;
	animation-name: cd-slide-up;
	-webkit-animation-duration: 0.8s;
	-moz-animation-duration: 0.8s;
	animation-duration: 0.8s;
	-webkit-animation-fill-mode: backwards;
	-moz-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
}

.withoutaccount {
    font-size: 14px;
    color: black;
    margin-top: 13px;
}

.loading {
	border: 5px solid #f3f3f3;
	border-top: 5px solid #3498db;
	border-radius: 50%;
	width: 13px;
	height: 13px;
	animation: spin 1.5s linear infinite;
}

.loaderror {
	position: relative;
	font-family: blood;
	font-size: 14px;
    color: red;
	height: 0;
	opacity: 0;
}

.errslidedown {
	animation-name: err-slide-down;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

.errslideup {
	animation-name: err-slide-up;
	animation-duration: 0.5s;
	animation-fill-mode: forwards;
}

.user {
	background: #07238a;
    color: #FFFFFF;
    font-size: 16px;
    font-family: blood;
    border-radius: 20px;
    width: 80%;
    margin-left: 10%;
	margin-bottom: 10px;
	text-overflow: unset;
    white-space: nowrap;
    overflow: hidden;
}

.admin {
	background: #790bde;
    color: #FFFFFF;
    font-size: 16px;
    font-family: blood;
    border-radius: 20px;
    width: 80%;
    margin-left: 10%;
	margin-bottom: 10px;
	text-overflow: unset;
    white-space: nowrap;
    overflow: hidden;
}