body {
	_background: #074d72 url(img/beta.png) top right no-repeat;
	background: #fbfbfb url(img/bg-1.png) 0 0 repeat-x;
	background-size: 100% 100px;
}

.container {
	background: transparent;
	width: 100% !important;
}

.logo {
	padding: 15px 20px 5px 40px;
}

.pad-10 {
	border: 1px solid red;
}



.login-icon {
	color: #b4c9d4;
	font-size: 60px;
	_margin-top: -10px;
	_margin-right: 30px;
}




.top-menu {
	color: #b4c9d4;
	font-size: 35px;
	margin-top: -10px;
	margin-right: 30px;
}

.top-menu:hover {
	color: #fff;
}



/****************** Screenshot *********************/



div#editor-box > img {
	max-width: 500px;
	max-height: 500px;
}



.contain {
	background-size: 100%;
	background-repeat: no-repeat;
}



/*******************/





.reply, .reply-all {
	opacity: 0;
	float: right;
	margin-right: 10px;
	display: inline-block;
	width: 16px;
	height: 16px;
	transition: opacity .25s ease-out;
	-moz-transition: opacity .25s ease-out;
	-webkit-transition: opacity .25s ease-out;
	-o-transition: opacity .25s ease-out;
}

.reply {
	background: url(img/reply.png) center center no-repeat;
}

.reply:hover {
	background: url(img/reply-hover.png) center center no-repeat;
}



.reply-all {
	background: url(img/reply-all.png) center center no-repeat;
}

.reply-all:hover {
	background: url(img/reply-all-hover.png) center center no-repeat;
}

.message:hover .reply, .message:hover .reply-all {
	opacity: 1;
}



span.num {
	background: #ff4569;
	padding: 1px 5px;
	border-radius: 50%;
	color: #fff;
	font-size: .7em;
	font-weight: 700;
	margin-left: 10px;
	display: none;
}





.welcome {
	_border: 1px solid red;
	color: #fff;
	margin-left: 20px;
	font-size: .8em;
}

.welcome img {
	display: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	margin-right: 10px;
	border: 2px solid #fff;
}



.main {
	background: transparent;
	border-radius: 10px;
	padding: 0px 0px;
	margin-bottom: 0px;
	height: calc(100vh - 90px);
	min-height: 420px;
	_display: flex;
	position: relative;
}
/*
.main:before, .main:after {
	z-index: -1;
	position: absolute;
	content: "";
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 80%;
	max-width:300px;
	background: #000;
	/*-webkit-box-shadow: 0 15px 10px #000;
	-moz-box-shadow: 0 15px 10px #000;
	box-shadow: 0 20px 20px #000;
	-webkit-transform: rotate(-3deg);
	-moz-transform: rotate(-3deg);
	-o-transform: rotate(-3deg);
	-ms-transform: rotate(-3deg);
	transform: rotate(-3deg);*/
}

.main:after {
	-webkit-transform: rotate(3deg);
	-moz-transform: rotate(3deg);
	-o-transform: rotate(3deg);
	-ms-transform: rotate(3deg);
	transform: rotate(3deg);
	right: 10px;
	left: auto;
}


.premium_message {
	background: url(img/premiumcom.png) right bottom no-repeat;
}


.message-block {
	background: transparent;
	height: 100%;
}

.messages-block {
	background: #fff;
	height: calc(100vh - 90px);
	max-height: 100%;
	_max-height: 100%;
	overflow-y: auto;
	border-radius: 7px;
	min-height: 100%;
	word-wrap: break-word;
	border: 10px solid #fff;
	border-top: 20px solid #fff;
	border-bottom: 20px solid #fff;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
}

*::-webkit-scrollbar {
 	width: 7px;		/* width of the entire scrollbar */
}
*::-webkit-scrollbar-track {
	background: #eee;        /* color of the tracking area */
}
*::-webkit-scrollbar-thumb {
	background-color: #aaa;    /* color of the scroll thumb */
	border-radius: 2px;       /* roundness of the scroll thumb */
	border: 0;  /* creates padding around scroll thumb */
}








.tab-content {
	padding-top: 20px;
}

/*

.messages-block-shadow {
	box-shadow: 0 0 5px #888;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

*/

.messages-main {
	

}

.message {
	padding: 10px;
	margin: 0 10px 20px 10px;
	background-color: #fff;
	-webkit-transition: background-color 1000ms linear;
	-ms-transition: background-color 1000ms linear;
	transition: background-color 1000ms linear;
	_border-radius: 0 5px 5px 5px;
	border-top: 1px solid #f8f8f8;
	border-left: 1px solid #f8f8f8;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, .3);
}

.message-block form {
	height: 100%;
}

.message-title {
	font-size: 0.8em;
	_display: block;
	_border: 1px solid red;
}



.message-title-aux {
	padding-top: 5px;
}





.photo {
	width: 48px;
	height: 48px;
	background-position: 0 0;
	background-size: 100%;
	background-repeat: no-repeat;
	margin-right: 10px;
}

.online-status {
	display: inline-block;
	width: 10px;
	height: 10px;
	position: relative;
	top: 30px;
	left: 35px;
	border-radius: 50%;
	_box-shadow: 0 0 2px #000;
	_background: #000;
}

#users-container .online-status, .to-user .online-status {
	top: 27px;
}

.status-online {
	border: 1px solid #000;
	background-color: #64DD17;
}

.status-away {
	border: 1px solid #000;
	background-color: #FFC400;
}

.status-offline {
	border: 1px solid #000;
	background-color: #BDBDBD;
}




.message-search-container {
	min-height: 480px;
	max-height: 480px;
	overflow: hidden;
	_border: 1px solid red;
}

.message-search {
	_border: 1px solid red;
	display: inline-block;
}

.search-content {
	min-height: 410px;
	max-height: 410px;
	overflow-y: auto;
	margin-top: 20px;
	padding-top: 20px;
	border: 1px solid #ccc;
}
.nivo-lightbox-ajax {
	max-width: 1000px !important;
	max-height: 100% !important;
	padding: 20px !important;
	_overflow: hidden !important;
}

.nivo-lightbox-wrap {
	position: absolute;
	top: 20px !important;
	right: 20px !important;
	bottom: 20px !important;
	left: 20px !important;
	max-height: 100% !important;
}






.msg-delete {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
	cursor: no-drop;
	_background: url(img/msg-delete.png) center center no-repeat;
	opacity: .1;
	font-weight: bold;
}

.msg-delete:hover {
	color: #000;
}



.msg-time {
	margin-right: 10px;
	font-size: .7rem;
	color: #555;
}

.message .msg-time span {
	opacity: 0;
	transition: opacity .25s ease-out;
	-moz-transition: opacity .25s ease-out;
	-webkit-transition: opacity .25s ease-out;
	-o-transition: opacity .25s ease-out;
}

.message:hover .msg-time span {
	opacity: 1;
}



.message-body {
	margin: 10px 10px 0px 0px;
	padding: 10px 20px 10px 15px;
	display: block;
	border-top: 1px dashed #ddd;
}

.message-not-read {
	background-color: #FFFFAA;
}



label.checkbox {
	display: inline-block;
	width: 50%;
	_padding: 0 5px;
	padding: 0;
	margin: 0px;
	font-size: 0.9em;
	_background: #fafafa;
	_border: 1px solid #f4f4f4;
	_border-left: 5px solid red;
	border-radius: 3px;
	cursor: pointer;
}

label.bcc {
	width: auto !important;
}



.in-msg-img {
	max-width: 100%;
}


.message-form {
	_padding: 10px 0 0 0;
	_background: red;
}

.message-field {
	height: 140px;
	min-height: 140px;
	max-height: 140px;
	overflow-y: auto;
	outline-width: 0;
}
.message-field:focus {
	outline: none;
	outline-width: 0;
}
[contenteditable] {
  outline: 0px solid transparent;
}


.tab-pane {
	height: calc(100vh - 420px);
	overflow-y: auto;
}

.message-form-users {
	background: #fff;
	_height: 65%;
	overflow: none;
	margin-bottom: 20px;
	padding: 0 20px;
	border-radius: 7px;
	border: 10px solid #fff;
	border-top: 20px solid #fff;
	border-bottom: 20px solid #fff;
	height: calc(100vh - 300px);
	min-height: 160px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .3);
	position: relative;
}


@media (max-width: 768px) {
	.main {
		height: auto;
		_max-height: 600px;
	}

	.logo {
		text-align: center;
	}

	.logo img {
		width: 100px;
	}

	.main {
		_border-radius: 0;
	}

	.message-block {
		height: 50%;
		padding-top: 20px;
		_border-top: 1px solid #ced4da;
	}

	.message-form-users {
		height: 50%;
	}

}

label.full-width {
	width: 100%;
}

.message-form-textarea {
	height: 25%;
	min-height: 160px;
	_border: 1px solid red;
}

textarea {
	resize: none;
	border: 10px solid #fff !important;
	_border: none !important;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, .3) !important;
}



.msg-send {
	background-image: url(img/send.png);
	background-position: 90% center;
	background-repeat: no-repeat;
	padding-right: 40px;
}



.red {
	_width: 100px;
	_height: 100px;
	background: red;
}



input[type=checkbox] {
	vertical-align: bottom;
	position: relative;
	top: -2px;
	background-color: red;
	*overflow: hidden;
}







form.login-form {
	border: 1px solid #ced4da;
	width: 100%;
	padding-top: 30px;
	border-radius: 5px;
	padding-bottom: 30px;
}



.login-photo {
	display: inline-block;
	width: 96px;
	height: 101px;
	_background: #cfd8dd;
	margin-bottom: 20px;
	background-size: 96px 96px;
	background-position: 0 96px;
	background-repeat: no-repeat;
	border-bottom: 5px solid #888 !important;
}

.login-photo img {
	width: 96px;
	height: 96px;
}



.logout-link {
	display: inline-block;
	width: 36px;
	height: 36px;
	background: url(img/logout-2.png) center center no-repeat;
	margin-top: 5px;
	margin-bottom: 5px;
}

.logout-link:hover {
	color: #fff;
	text-decoration: none;
}

.users-link {
	display: inline-block;
	width: 36px;
	height: 36px;
	background: url(img/users-2.png) center center no-repeat;
	margin-right: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.search-link {
	display: inline-block;
	width: 36px;
	height: 36px;
	background: url(img/search.png) center center no-repeat;
	margin-right: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.play-link, .pause-link {
	display: inline-block;
	width: 36px;
	height: 36px;
	background-position: center center;
	background-repeat: no-repeat;
	border-radius: 50%;
	margin-top: 7px;
}

.play-link {
	background-image: url(img/play.png);
	margin-right: 20px;
}

.play-link:hover {
	background-image: url(img/play-hover.png);
}

.pause-link {
	background-image: url(img/pause.png);
	margin-right: 100px;
}

.pause-link:hover {
	background-image: url(img/pause-hover.png);
}

.play-active {
	background-color: #f00;
}

.pause-active {
	background-color: #f00;
}





form.users-add {
	_max-width: 500px;
}

.users-add-cbk {
	padding-top: 15px;
	margin: 10px 0 0px 0;
	border-top: 1px solid #ced4da;
	display: block;
	_border: 1px solid red;
	height: 80px;
}





label.checkbox-red {
	background: red;
}

/*



.nivo-lightbox-content {
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	_max-height: 100vh;
}

.nivo-lightbox-content:has(> .nivo-lightbox-image) {
	width: auto;
	max-width: auto;
}

.nivo-lightbox-ajax {
	max-width: 800px;
	border-radius: 10px;
	_max-height: 400px;
}

*/



.nivo-lightbox-content > .nivo-lightbox-ajax {
	margin-left: auto;
	margin-right: auto;
	max-width: 800px;
	border-radius: 10px;
}



div.to-user {
	display: block;
	margin-bottom: 20px;
	border: 1px solid #ced4da;
	border-radius: 5px;
	padding: 10px;
}



.read-by-user {
	background: url(img/read-by-user.png) right bottom no-repeat;
}



div.to-user img {
	width: 48px;
	margin-right: 20px;
}



div.to-user span {
	_display: inline-block;
	_border: 1px solid red;
	_margin-top: 10px;
}





div.user {
	display: block;
	margin-bottom: 20px;
	border: 1px solid #ced4da;
	border-radius: 5px;
	padding: 10px;
}

div.user img {
	width: 48px;
	margin-right: 20px;
}

div.user span {
	display: inline-block;
	_border: 1px solid red;
	_margin-top: 10px;
}

.user .last-active {
	font-size: .7rem;
	color: #aaa;
}



.users-add-link, .users-show-link {
	_font-size: .8em;
}

.users-show-link {
	margin-right: 10px;
}



#users-container {
	margin-top: 20px;
	overflow-y: auto;
	overflow-x: hidden;
	border: 1px solid #ced4da;
	_border-radius: 5px;
	padding: 20px;
	max-height: 380px;
}



#users-container h6 {
	margin-bottom: 20px;
}



.users {
	max-height: 400px;
}



.lb-title {
	_margin-top: 0;
	_padding-top: 0;
	margin-bottom: 15px;
}









a.link-icon:before{
	margin: 0 5px 0 0;
	vertical-align: bottom;
	position: relative;
	top: 2px;
	*overflow: hidden;
}

a.link-icon {
	vertical-align: bottom;
	position: relative;
	top: -5px;
	*overflow: hidden;
}



a.link-icon[href$=".exe"]:before, a.link-icon[href$=".msi"]:before {
	content:url(img/filetypes/exe.png);
}

a.link-icon[href$=".docx"]:before, a.link-icon[href$=".doc"]:before {
	content:url(img/filetypes/docx.png);
}

a.link-icon[href$=".pttx"]:before, a.link-icon[href$=".ptt"]:before {
	content:url(img/filetypes/pptx.png);
}

a.link-icon[href$=".xlsx"]:before, a.link-icon[href$=".xls"]:before, a.link-icon[href$=".csv"]:before {
	content:url(img/filetypes/xlsx.png);
}

a.link-icon[href$=".pdf"]:before {
	content:url(img/filetypes/pdf.png);
}

a.link-icon[href$=".mp3"]:before, a.link-icon[href$=".wav"]:before, a.link-icon[href$=".ogg"]:before {
	content:url(img/filetypes/audio.png);
}

a.link-icon[href$=".txt"]:before {
	content:url(img/filetypes/txt.png);
}

a.link-icon[href$=".zip"]:before, a.link-icon[href$=".rar"]:before {
	content:url(img/filetypes/archive.png);
}





.filesize {
	font-size: 0.7em;
}

















.js .inputfile {
	width: 0.1px;
	height: 0.1px;
	opacity: 0;
	overflow: hidden;
	position: absolute;
	z-index: -1;
}



.inputfile + label {
	max-width: 60%;
	font-size: 0.8em;
	/* 20px */

	_font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
	display: inline-block;
	overflow: hidden;
	padding: 6px 15px 6px 10px;
	/* 10px 20px */

	color: #888;
	_background-color: #1E88E5;
	border-radius: 5px;
	border: 1px solid #ced4da;
}



.no-js .inputfile + label {
	display: none;
}



.inputfile:focus + label,

.inputfile.has-focus + label {
	outline: 1px dotted #000;
	outline: -webkit-focus-ring-color auto 5px;
}



.inputfile + label * {
	/* pointer-events: none; */

	/* in case of FastClick lib use */

}



.inputfile + label svg {
	width: 1.2em;
	height: 1.2em;
	vertical-align: middle;
	fill: currentColor;
	margin-top: -0.4em;
	/* 4px */

	_margin-right: 0.25em;
	/* 4px */

}



.inputfile:focus + label,

.inputfile.has-focus + label,

.inputfile + label:hover {
	background-color: #eee;
}







.emoji {
	background: #fff;
	width: calc(100% - 40px);
	height: calc(100vh - 340px);
	position: absolute;
	z-index: 99999;
	cursor: default;
}

#toggle-emoji {
	width: 24px;
	height: 24px;
	cursor: pointer;
}
#close-emoji {
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(img/close.png) center center no-repeat;
	position: absolute;
	bottom: 20px;
	right: 20px;
}
#message-field img {
	width: 18px;
	height: 18px;
}
.em {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-color: transparent;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	border: none;
}
.emoji .em {
	width: 32px;
	height: 32px;
	margin: 5px;
	cursor: pointer;
}


.em-1F3C6 {background-image: url(img/emoji/1F3C6.png);}
.em-1F6AB {background-image: url(img/emoji/1F6AB.png);}
.em-1F44D {background-image: url(img/emoji/1F44D.png);}
.em-1F44E {background-image: url(img/emoji/1F44E.png);}
.em-1F60A {background-image: url(img/emoji/1F60A.png);}
.em-1F60D {background-image: url(img/emoji/1F60D.png);}
.em-1F60F {background-image: url(img/emoji/1F60F.png);}
.em-1F61C {background-image: url(img/emoji/1F61C.png);}
.em-1F61E {background-image: url(img/emoji/1F61E.png);}
.em-1F62D {background-image: url(img/emoji/1F62D.png);}
.em-1F62E {background-image: url(img/emoji/1F62E.png);}
.em-1F92D {background-image: url(img/emoji/1F92D.png);}
.em-1F337 {background-image: url(img/emoji/1F337.png);}
.em-1F338 {background-image: url(img/emoji/1F338.png);}
.em-1F382 {background-image: url(img/emoji/1F382.png);}
.em-1F388 {background-image: url(img/emoji/1F388.png);}
.em-1F389 {background-image: url(img/emoji/1F389.png);}
.em-1F525 {background-image: url(img/emoji/1F525.png);}
.em-1F600 {background-image: url(img/emoji/1F600.png);}
.em-1F601 {background-image: url(img/emoji/1F601.png);}
.em-1F602 {background-image: url(img/emoji/1F602.png);}
.em-1F604 {background-image: url(img/emoji/1F604.png);}
.em-1F605 {background-image: url(img/emoji/1F605.png);}
.em-1F609 {background-image: url(img/emoji/1F609.png);}
.em-1F615 {background-image: url(img/emoji/1F615.png);}
.em-1F618 {background-image: url(img/emoji/1F618.png);}
.em-1F620 {background-image: url(img/emoji/1F620.png);}
.em-1F625 {background-image: url(img/emoji/1F625.png);}
.em-1F641 {background-image: url(img/emoji/1F641.png);}
.em-1F642 {background-image: url(img/emoji/1F642.png);}
.em-1F914 {background-image: url(img/emoji/1F914.png);}
.em-203C {background-image: url(img/emoji/203C.png);}
.em-2753 {background-image: url(img/emoji/2753.png);}
.em-2764 {background-image: url(img/emoji/2764.png);}