* {
  box-sizing: border-box;
}

html {
	font-weight: 300;
	font-family: Verdana;
}
/*
html, input {
  
}
*/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body-style {
  background-color: #010101;
}

ul {
  list-style: none;
  word-wrap: break-word;
}

/* Pages */

.pages {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

.page {
  height: 100%;
  width: 100%;
}

.logo {
	border: 0;
	max-width: 100%;
}

.highlightblue {
	color: deepskyblue !important;
	alink: deepskyblue;
	vlink: deepskyblue;
	text-decoration: none;
}

/* Login Page */

.login.page {
  background-color: #010101;
}

.login.page .form {
  height: 100px;
  text-align: center;
}

.login.page .form .usernameInput {
	background-color: transparent;
	border: none;
	border-bottom: 2px solid #dedede;
	outline: none;
	text-align: center;
	max-width: 400px;
	font-size: 2.0em;
}

.login.page .form .urlInput {
	background-color: transparent;
	border: none;
	border-bottom: 2px solid #dedede;
	outline: none;
	text-align: center;
	width: 30% !important;
	font-size: 1.6em;
	color: lime !important;
}

.urlpreview {
	font-weight: 450;
	font-size: 1.6em;
	color: #009700 !important;
}

.urlpreview:hover {
	font-weight: 450;
	font-size: 1.6em;
	color: lime !important;
}

.urlpreviewwrap {

	color: #009700 !important;
}

.urlpreviewwrap a {
	text-decoration: none;
}

.urlpreviewwrap:hover {

	color: lime !important;
}

.urlpreviewpath {
	font-weight: 450;
	font-size: 1.6em;
	color: #009700 !important;
}

.urlpreviewpath:hover {
	font-weight: 450;
	font-size: 1.6em;
	color: lime !important;
}

.login.page .title {
  font-size: 2.0em;
}

.login.page .usernameInput {
  font-size: 2.0em;
  letter-spacing: 3px;
}

.login.page .title, .login.page .usernameInput {
  color: #dedede;
  font-weight: 100;
}

.enterNicknameTitle {
	color: #dedede;
}

/* Chat page */
.chat.page {
	background-color: #010101;
	display: none;
}

/* Font */

.log {
	font-size: 1.3em;
	height: 100%;
	margin: 0;
	overflow-y: scroll;
	padding: 10px 20px 10px 20px;
	color: #f8f8ff;
}

.serverClass {
	font-size: 1.3em;
	height: 100%;
	margin: 0;
	overflow-y: scroll;
	padding: 10px 20px 10px 20px;
	color: #ffffff;
}

.chatArea {
	height: 100%;
	padding-bottom: 60px;
}

.messages {
	font-family: Verdana;
	font-size: 1.2em;
	height: 100%;
	margin: 0;
	overflow-y: scroll;
	padding: 10px 20px 10px 20px;
	color: #dddddd;
}

.message.typing .messageBody {
	color: gray;
}

.username {
	font-family: Verdana;
	overflow: hidden;
	padding-right: 15px;
	text-align: right;
	color: #1e90ff;
}

/* Input */

.inputMessage {
	position: absolute;
	width: 100%;
	height: 60px;
	
	border-color: #000000; 
	border-top: 0px;
	border-left: 10px;
	border-bottom: 10px;
	border-right: 0px;
	
	padding-top: 0px;
	padding-left: 10px;
	
	margin-top: 0px;
	margin-right: -90px;
	
	bottom: 0;
	left: 0;
	
	outline: none;
	color: #000;
	font-weight: 500;
	font-size: 1.5em;
	z-index: 100;
}

.inputMessageButton {
	border-top: 0px;
	padding-top: 5px;
	margin-top: 0px;
	position: absolute;
	width: 80px;
	height: 60px;
	right: 0;
	bottom: 0;
	z-index: 200;
}

.usernameInputButton{
	/*width: 100%;*/
	max-width: 70px !important;
	margin-right: auto;
	margin-left: auto;
	height: 50px;
	font-weight: 510;
}

.joinRoomButton {
	font-weight: 500;
}

.copyrightChaturls {
	color: #1e80d7;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	bottom: 2px;
	position: absolute;
	font-size: 1.1em;
}

.copyrightChaturlsiframe {
	color: #1e80d7;
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	bottom: 2px;
	position: absolute;
	font-size: 0.9em;
}

.copyrightYear {
	color: #1e80d7;
}

.rememberNicknameLabel {
	color: #808080;
}

label {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
input[type=checkbox].css-checkbox {
	position: absolute; 
	overflow: hidden; 
	clip: rect(0 0 0 0); 
	height:1px; 
	width:1px; 
	margin:-1px; 
	padding:0;
	border:0;
}
input[type=checkbox].css-checkbox + label.css-label {
	padding-left:20px;
	height:15px; 
	display:inline-block;
	line-height:15px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
	cursor:pointer;
}
input[type=checkbox].css-checkbox:checked + label.css-label {
	background-position: 0 -15px;
}
.css-label{
	background-image:url(dark-check-green.png);
	color: #9e9e9e;
}
.vlad{background-image:url(vlad.png);}
input[type=checkbox].css-checkbox.lrg + label.css-label.lrg {
	padding-left:22px;
	height:20px; 
	display:inline-block;
	line-height:20px;
	background-repeat:no-repeat;
	background-position: 0 0;
	font-size:15px;
	vertical-align:middle;
	cursor:pointer;
}
input[type=checkbox].css-checkbox.lrg:checked + label.css-label.lrg{
	color: #9e9e9e;
	background-position: 0 -20px;
}

/* W3 */
.w3-theme-l5 {color:#000 !important; background-color:#f0f0f0 !important}
.w3-theme-l4 {color:#000 !important; background-color:#cccccc !important}
.w3-theme-l3 {color:#fff !important; background-color:#999999 !important}
.w3-theme-l2 {color:#fff !important; background-color:#666666 !important}
.w3-theme-l1 {color:#fff !important; background-color:#333333 !important}
.w3-theme-d1 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d2 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d3 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d4 {color:#fff !important; background-color:#000000 !important}
.w3-theme-d5 {color:#fff !important; background-color:#000000 !important}

.w3-theme-light {color:#000 !important; background-color:#f0f0f0 !important}
.w3-theme-dark {color:#fff !important; background-color:#000000 !important}
.w3-theme-action {color:#fff !important; background-color:#000000 !important}

.w3-theme {color:#fff !important; background-color:#000000 !important}
.w3-text-theme {color:#000000 !important}
.w3-border-theme {border-color:#000000 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#000000 !important}
.w3-hover-text-theme:hover {color:#000000 !important}
.w3-hover-border-theme:hover {border-color:#000000 !important}

/* Scrollbar */
/* width */
::-webkit-scrollbar {
	width: 16px;
}

/* Track */
::-webkit-scrollbar-track {
	background: #040404; 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: #0B0B0B;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: #333; 
}

/* END */