html {
	background: url('./images/background.jpg') no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

html{
	width: 100%;
	height: 100%;

	/*font-family: "Courier New", Courier;*/
	font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;

	color: #000000;
}

body{
	height: 100%;
	margin: 0;
}


h2{
	margin-bottom: 40px;

	font-size: 40px;
	font-weight: 700;

	text-align: center;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

h4{
	font-size: 20px;
	margin: 20px 0 10px 0;
}

h5{
	padding: 0;
	margin: 10px 0 10px 0;

	font-size: 17px;
}

#wrapper{
	position: relative;

	width: 100%;
	height: 100%;

	min-width: 1100px;

	padding: 40px 0;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#main-content{
	width: 100%;
	height: 100%;
}

#wrapper2{
	width: 80%;
	height: 100%;
	
	min-width: 1010px;
	min-height: 700px;

	margin: 0 auto;
	
	background: rgba(192, 192, 192, 0.4);
	
	border: solid 2px #ffffff;
	
	border-radius: 30px;
	
	box-sizing: border-box;
	-moz-box-sizing: border-box;

	overflow: hidden;
}

/* --- Login Form --- */

#login-form{
	width: 40%;
	min-width: 400px;
	height: 340px;
	margin: auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

#login-form input{
	font-size: 15px;

	margin: 10px 25%;
}

#login-form a{
	width: 200px;
	margin: auto;
	overflow: auto;
}

#logout{
	position: relative;

	top: 20px;
	left: calc(100% - 70px);

	width: 50px;
	height: 50px;

	background: url('./images/close.png') no-repeat;
	background-size: cover;

	cursor: pointer;
}

#loading{
	position: absolute;

	width: 100%;
	height: 100%;

	background: rgba(255, 255, 255, 0.6);

	z-index: 1;
}
/* --- App MENU --- */

#left-side{
	width: 30%;
	min-width: 300px;
	height: 100%;
	
	float: left;

	padding: 2%;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#app-menu{
	width: 100%;
	height: calc(100% - 50px);

	margin: 0;
	padding: 0;
}

.app-menu-item{
	width: 100%;
	float: left;

	cursor: pointer;
}

.app-menu-item h3{
	width: calc(100% - 70px);

	float: left;

	margin: 0;
	padding: 20px 0 20px 30px;

	font-size: 25px;

	border-radius: 10px;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.app-menu-item-highlight{
	background: #83ba62 50% 50% repeat-x;
	color: #ffffff;

	border-radius: 10px;
}

.app-settings{
	width: 50px;
	height: 50px;
	
	margin: 10px;
	
	float: right;
	
	background: url('./images/settings.png') no-repeat;
	background-size: cover;
}

/* --- Send Message --- */
#sendMSG{
	width: 50%;
	height: 100%;
	float: left;

	padding: 0 20px;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#message-text{
	width: 100%;
	height: 70px;

	font-size: 20px;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#send-options{
	max-height: calc(100% - 280px);
	overflow: auto;
}

/* --- History Message --- */
#history{
	width: 50%;
	height: 100%;
	float: left;

	padding: 0 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.history-item{

}

.history-main{
	width: calc(100% - 50px);
}

.history-more{
	display: none;

	position: relative;
}

.history-more-btn{
	width: 50px;
	height: 50px;

	float: right;
	margin: auto;

	background: url('./images/more.png') no-repeat;
	background-size: cover;

	cursor: pointer;
}

#btn-refreshHistory{
	display: none;
}

#history-log{
	height: 80%;
	overflow: auto;
}

/* --- App Settings --- */
#settings{
	display: none;

	width: 100%;
	height: 100%;

	float: left;

	padding: 0 20px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

.back{
	position: relative;

	width: 50px;
	height: 50px;

	top: 0;
	left: 0;

	float: left;

	cursor: pointer;

	background: url('./images/back.png') no-repeat;
	background-size: cover;
}

#settings-content{
	width: 100%;
	height: calc(100% - 120px);

	overflow-y: scroll; 
	overflow-x: hidden;
}

#settings-bar h3{
	width: 50%;

	float: left;

	text-align: center;

	cursor: pointer;
}

#settings-ios{

}

#settings-changeCert{
	display: none;
}

#settings-android{
	display: none;
}

/* --- ПЕРЕПИСАТЬ!!!!!!!! --- */

.float{
	float: left;
}

.left{
	text-align: left;
}

.right{
	text-align: right;
	float: right;
}

/*#left-side li:hover, #left-side li:active, #left-side li:focus{
	background: blue;
}*/

#main{
	width: 70%;
	min-width: 700px;
	height: 100%;
	
	float: left;


	padding: 2%;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
}






hr{
	border: solid 1px black;
}



.button{
	display: block;

	padding: 10px 20px;
	margin: 20px 15px;
	
	color: #ffffff;
	background: #5ba0fc;
	
	cursor: pointer;
	
	border-radius: 5px;
	
	font-size: 30px;
	font-weight: bold;

	text-align: center;
	text-decoration: none;

	-webkit-user-select: none; /* Chrome/Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+ */

	/* Rules below not implemented in browsers yet */
	-o-user-select: none;
	user-select: none;

	/*font-family: "Perfect DOS VGA 437";*/
}

.red{
	background: #fc8e6a;
	margin-bottom: 0px;
}

/* --- CSS Spoiler --- */
.spoiler{
	position: relative;
	overflow: hidden;
	height: 100%;
}

.spoiler > input[type="checkbox"]{

	position: absolute;

	top: 12px;

	width: calc(100% + 40px);
	height: 35px;

	margin-left: -40px;
	
	cursor: pointer;

	border-color: transparent!important;
	border-style: none!important;
	background: transparent none!important;

	z-index:1;
}

.spoiler-in > input[type="checkbox"]{
	top: 0px;
}

.spoiler > input + .spoiler-box > div{
	display: none;
}

.spoiler > input + .spoiler-box{
	
	height: auto;
}

.spoiler > input:checked + .spoiler-box{

	height: 100%;

	overflow: scroll;
}

.spoiler > input:checked + .spoiler-box > div{
	display: block;

	padding-left: 20px;
}

.spoiler > input:checked + .spoiler-box > .spoiler-table{
	display: table;

	padding-left: 20px;
}

.spoiler > input + .spoiler-box > span.open{
	display: block;
}

.spoiler > input:checked + .spoiler-box > span.open{
	display: none;
}


.spoiler > input + .spoiler-box > span.close{
	display: none;
}

.spoiler > input:checked + .spoiler-box > span.close{
	display: block;
}

#send-options-list{
	overflow: auto;
}