body,html
{
    margin: 0 auto;
    color: white;
	font-family: 'Lilita One', cursive;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 11;
	min-width: 500px;
	min-height: 300px;
}
input
{
	border: 0;
	padding: 5px;
}
video
{
	object-fit: contain;
}
img
{
	width: 100px;
	height: 100px;
}
@keyframes cloud
{
  0%   {opacity: 0;transform: scaleY(0.8);transform:translateY(20px);}
  100% {opacity: 1;transform: scaleY(1);transform:translateY(0);}	
}
@keyframes usr {
  0%   {opacity: 0;transform:translateY(-20px);}
  100% {opacity: 1;transform:translateY(0px);}
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
  background: #888; 
}
::-webkit-scrollbar-thumb:hover {
  background: #555; 
}
@keyframes sc {
  0%   {opacity: 0;}
  50%  {opacity: 1;}
  100% {opacity: 0;}
}
.ss
{
	z-index: 10;
	position: relative;
	display: block;
	width: 100%;
	height: calc(100vh - 100px);
	background: url("../img/b.png");
	background-repeat: repeat;
}
.bg
{
	z-index: 5;
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100vh;
}
#top
{
	z-index: 10;
	user-select: none;
	position: relative;
	width: 100%;
	height: 100px;
	line-height: 100px;
	background: url("../img/b.png");
	background-repeat: repeat;
}
#tit
{
	display: block;
	margin: auto;
	width: 300px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	text-shadow: 2px 2px black;
	font-size: 60px;
	color: white;
}
#title
{
	min-width: 300px;
	display: flex;
	align-items: center;
	width: 400px;
	height: 100px;
	float: left;
}
#cont
{
	display: flex;
	clear: both;
	top: 100px;
	align-items: center;
	width: 100%;
	height: 100%;
}

#userpanel
{
	font-family: 'Open Sans', sans-serif;
	display: flex;
	align-items: center;
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	color: black;
}
#up
{
	display: flex;
	align-items: center;
	width: 350px;
	height: 50px;
	margin: auto;
}
.button
{
	font-weight: bold;
	color: black;
	background-color: #ffc42e;
	margin: auto;
	display: block;
	float: left;
	width: 150px;
	height: 50px;
	line-height: 50px;
	text-align: center;
	transition: .4s ease;
	border-radius: 2px;
}
.button:hover
{
	cursor: pointer;
	background-color: white;
	color: black;
}

#bgi
{
	z-index: 3;
	object-fit: contain;
	display: block;
	height: auto;
	width: auto;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	
}
.formclose
{
	display: block;
	position: absolute;
	top: 5%;
	right: 5%;
	background-color: #ff3b3b;
	border-radius: 40px;
	width: 40px;
	height: 40px;
	z-index: 4000;
	line-height: 40px;
	text-align: center;
}
.formclose:hover
{
	cursor: pointer;
}
.form
{
	position: absolute;
	top: 0;
	display: none;
	align-items: center;
	z-index: 5000;
	width: 100%;
	height: 100vh;
	background-color: rgba(12, 12, 12, 0.95);
	transition: 1s ease;
}
#anymous_chat
{
	position: relative;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	display: block;
	float: left;
	margin: auto;
	width: 50%;
	height: 50vh;	
	min-width: 600px;
}
.in
{
	margin-top: auto;
	margin-bottom: auto;
	width: 100px;
	height: 30px;
	border-radius: 5px;
}
.in:focus
{
	outline: none;
	border: 0;
}
#in1
{
	width: 120px;
	position: absolute;
	left: 10px;
	top: 5px;
	color: black;
	background-color: #ffffffb5;
	font-weight: 700;
}

.error
{
	display: block;
	margin: auto;
	width: 70%;
	text-align: left;
	margin-top: 10px;
	color: #bd2828;
	font-size: 15px;
}
.upload
{
	display: block;
	width: 240px;
	height: 100px;
	background-color: black;
	margin: auto;
	overflow: auto;
}
#in2
{
	width: 350px;
	position: absolute;
	left: 150px;
	top: 5px;	
}
#in3
{
	background: url("../img/btnn.png") no-repeat top left;
	background-size: 40px;
	position: absolute;
	left: 535px;
	top: 5px;
	width: 40px;
	height: 40px;	
}
#in3:hover
{
	cursor: pointer;
}
.top
{
	font-weight: 400;
	color: white;
	background-color: #070a1a;
	display: block;
	font-size: 35px;
	user-select: none;
	width: 100%;
	height: 50px;
}
.titl
{
	float: left;
	display: flex;
	align-items: center;
	width: 60%;
	height: 50px;
}
.sc
{
	float: left;
	display: block;
	margin: auto;
	width: 12px;
	height: 12px;
	border-radius: 12px;
	background-color: #ff4230;
	animation: sc 3s infinite;
	transition: all 1s ease-in-out;
}
.c
{
	display: flex;
	align-items: center;
	height: 50px;
	margin-left: 10px;
	margin-right: 10px;
	float: left;
}
.im
{
	font-family: 'Lilita One', cursive;
	user-select: none;
	transform: scale(0.8);
}
.u
{
	font-weight: 600;
	color: #4dff67;
}
.cs
{
	height: 50px;
	line-height: 50px;
	display: block;
	float: left;
}

.stat
{
	float: left;
	display: flex;
	align-items: center;
	width: 40%;
	height: 50px;
}
.statt
{
	display: block;
	margin: auto;
	font-size: 20px;
	float: left;
}
.img
{
	display: block !important;
	opacity: 1 !important;
	width: 30px;
	height: 30px;
	position: absolute;
	bottom: 8px;
	left: -40px;
	z-index: 500;
}
.cloud
{
	color: white;
	position: relative;
	display: block;
	background-color: #2a3550;
	background-image: linear-gradient(to right,#005bea,#209bd4);
	border-radius: 10px 10px 30px 10px;
	-moz-border-radius: 10px 10px 30px 10px;
	-webkit-border-radius: 10px 10px 30px 10px;
	border: 0px solid #000000;
	padding: 15px;
	clear: both;
	margin-top: 10px;
    margin-bottom:10px;
	margin-left: 80px;
	width: 30% !important;
	min-width: 250px;
	font-size: 20px;
	transition: 0.5s cubic-bezier(1, 0, 0, 1);
	animation-name: cloud;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
}
.msg
{
	word-break: break-word;
	font-size: 18px;
	user-select: text;
}
.info
{
	height: 30px;
}
.name
{
	color: #ececec;
	font-weight: 600;
	float: left;
	line-height: 30px;
	font-size: 15px;
	width: 90px;
}
.time
{
	color: white;
	float: left;
	text-align: center;
	line-height: 30px;
	font-size: 15px;
	width: 50px;
	font-size: 10px;	
}
.date
{
	color: white;
	float: left;
	text-align: center;
	line-height: 30px;
	font-size: 15px;
	width: 70px;
	font-size: 10px;
}
.messages
{
	position: absolute;
	top: 50px;
	left: 0;
	width: 100%;
	height: calc(100% - 100px);
	overflow: auto;
	background-color: #040b0e;
	
}
.bottom_panel
{
	z-index: 2000;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 50px;
	width: 100%;
	background-color: #070a1a;
}
.bp
{
	position: relative;
	margin: auto;
	width: 600px;
	height: 50px;
}
.titll
{
	
	margin: auto;
	display: block;
	font-size: 20px;
	color: #209bd4;
}
#login
{
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	display: block;
	float: left;
	margin: auto;
	color: black;
	width: 50%;
	padding: 10px;
	min-width: 300px;
}
.signin
{
	padding: 50px;
	display: flex;
	align-items: center;
	margin: auto;
	background-color: white;
	border-radius: 20px;
}
.login
{
	width: 70%;
	font-size: 25px;
	border-radius: 2px;
	margin-top: 10px;
	border-bottom: 2px solid gray;
	display: block;
	clear: both;
	margin-left: auto;
	margin-right: auto;
}
.login:focus
{
	outline: 0;
	border-bottom: 2px solid #111111;
}
.lb
{
	width: 30%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-top: 12px;
	background-color: #3162cc;
	color: white;
	padding: 10px;
	font-size: 20px;
	text-shadow: 1px 1px black;

}
.lb:hover
{
	cursor: pointer;
	background-color: #2a52a8;
	transition: all 0.33s ease-in-out;
}
.t
{
	font-size: 35px;
	color: #111111;
	user-select: none;
	padding-left: 50px;
}
#bg
{
	z-index: 4;
	display: block;
	height: auto;
	width: auto;
	min-width: 100%;
	min-height: 100%;
	max-width: none;
	position: relative;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}
#ft
{
	text-align: center;
	user-select: none;
	z-index: 20;
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	width: 200px;
	height: 50px;
	line-height: 50px;
	font-size: 20px;
	color: gray;
	text-shadow: 0.5px 0.5px black;
}


#loadtit
{
	color: #676767;
	text-align: center;
	line-height: 100px;
	transform: translate(-50%, -45%);
	width: 200px;
	height: 100px;
	font-size: 45px;
	position: fixed;
	top: 45%;
	left: 50%;
	font-family: 'Lilita One', cursive;
}
#loadbg
{
	transition: 1s ease-in-out;
	user-select: none;
	overflow: hidden;
	z-index: 1000;
	display: flex;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-color: #070a1a;
}
.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 2s infinite ease-in-out;
  animation: load7 2s infinite ease-in-out;
}
.loader {
	float: left;
  color: #209bd4;
  font-size: 10px;
  margin: 80px auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}
.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}
@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}
@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}