body {

	background: #074d72 url(img/beta.png) top right no-repeat;

}

.container {

	background: transparent;

}

.logo {

	padding: 15px 0 5px 0;

}



.action-handler {
	_display: none;
}


@font-face {
	_font-family: 'DIGITAL';
	_src: url('DS-DIGII.TTF');


	font-family: 'Digital Dismay';
	src: url('DigitalDismay.otf');
}
/*
html {
  height: 100%;
  background: radial-gradient(#000, #555);
}
*/
.digital-clock {
	  margin: auto;
	  margin-top: 10px;
	  _position: absolute;
	  _top: 0;
	  _left: 0;
	  _bottom: 0;
	  _right: 0;
	  width: 160px;
	  height: 40px;
	  color: #ffffff;
	  border: 2px solid #999;
	  border-radius: 4px;
	  text-align: center;
	  font: 35px/38px 'Digital Dismay', 'DIGITAL', Helvetica;
	  background: linear-gradient(90deg, #000, #333);
	  _font-weight: 200;
	  letter-spacing: 3px;
}
.two-dots {
	letter-spacing: 0;
}


table.retards {
	width: 100%;
}
table.retards td, table.retards th {
	border:  1px solid #ddd;
}



.team-1, .team-2 {
	display: inline-block;
	width: 14px;
	height: 14px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	margin-right: 10px;
}
.team-1 {
	background-image: url(img/1.png);
}
.team-2 {
	background-image: url(img/2.png);
}


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

h5 {
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
}

table {
	margin-top: 20px !important;
}



div#editor-box > img {

	max-width: 500px;

	max-height: 500px;

}



.contain {

	background-size: 100%;

	background-repeat: no-repeat;

}



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



.pause-request-btn {
	margin: 5px;
}



.pause-give {
	font-size: 26px;
	margin: -3px 8px 0 8px;
	padding: 0 5px;
	font: 25px/28px 'Digital Dismay', 'DIGITAL', Helvetica;
	font-weight: bold;
	letter-spacing: 2px;
	box-shadow: 1px 1px 3px #ccc;
}

.pause-give:hover {
	text-decoration: none;
	box-shadow: 1px 1px 3px #aaa;
}


















.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;

}





.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: #fff;

	border-radius: 10px;

	padding: 20px 20px 80px 20px;

	margin-bottom: 20px;

	_height: calc(100vh - 110px);

	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;
}





.message-block {

	background: #fff;

	height: 100%;

}

.messages-block {

	background: #fff;

	height: calc(100vh - 180px);

	max-height: 100%;

	_max-height: 100%;

	overflow-y: auto;

	border-radius: 5px;

	_position:relative;

	border: 1px solid #ced4da;

	min-height: 100%;

	word-wrap: break-word;

}

.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: 20px 10px;

	background-color: #fff;

	-webkit-transition: background-color 1000ms linear;

	-ms-transition: background-color 1000ms linear;

	transition: background-color 1000ms linear;

}

.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;

}









.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;

}

.msg-delete:hover {

	color: #000;

}



.msg-time {

	margin-right: 10px;

	font-size: .7rem;

	color: #aaa;

}

.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-radius: 0 15px 15px 15px;

	border: 1px solid #ced4da;

}

.message-not-read {

	background-color: #FFFFAA;

}



label.checkbox {

	display: inline-block;

	width: 50%;

	_padding: 0 5px;

	padding: 0;

	margin: 0px;

	font-size: 0.8em;

	_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-users {

	_height: 65%;

	overflow: auto;

	margin-bottom: 20px;

	_border: 1px solid #ced4da;

	padding: 20px;

	border-radius: 5px;

	border: 1px solid #ced4da;

	height: calc(100vh - 380px);

	min-height: 160px;

}

@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: 20%;

	min-height: 160px;

	_border: 1px solid red;

}

textarea {

	resize: none;

	border: 1px solid #ced4da;

}



.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;

}


.team-login {
	_background: #eee;
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 10px;
	margin: 10px;
	width: 23%;
	display: inline-block;
	text-align: center;
}


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

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



.agent-logs {

}

.agent-logs td, .agent-logs th {
	padding: 5px 10px;
}

.table-salaire {
	width: 100%;
	font-size: 13px;
}


.table-salaire tr:hover {
	background-color: #fffde7;
}


.table-salaire th, .total-td {
	_border-bottom: 1px solid #ccc;
	_font-size: 13px;
}


.table-salaire td, .table-salaire th {
	padding: 5px 10px;
	_border-bottom: 1px solid #eee;
}




.chat-link {

	display: inline-block;

	width: 36px;

	height: 36px;

	background: url(img/chat.png) center center no-repeat;

	margin-top: 0px;
	margin-right: 20px;

}

.chat-link:hover {

	color: #fff;

	text-decoration: none;

}


.logout-link {

	display: inline-block;

	width: 36px;

	height: 36px;

	background: url(img/logout-2.png) center center no-repeat;

	margin-top: 0px;
	margin-right: 20px;

}

.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: 7px;

}



.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;

}













.my-pauses {

	width: 100%;

	margin-top: 30px;

}

.my-pauses th {

	border-bottom: 1px solid #ccc;

	font-size: 13px;

	padding: 10px;

}

.my-pauses td {

	border-bottom: 1px solid #eee;

	padding: 10px;

}



.pause-waiting {

	display: inline-block;

	width: 14px;

	height: 14px;

	background: url(img/pause-waiting.png) center center no-repeat;

}

.pause-granted {

	display: inline-block;

	width: 14px;

	height: 14px;

	background: url(img/pause-granted.png) center center no-repeat;

}

.pause-rejected {

	display: inline-block;

	width: 14px;

	height: 14px;

	background: url(img/pause-rejected.png?5445) center center no-repeat;

}