/* helpers */
.b1{ border:2px solid red !important; }
.b2{ border:2px solid blue !important; }
.b3{ border:2px solid green !important; }
.b4{ border:2px solid #990033 !important; background-color: rgba(153, 0, 51, 0.1) }
.b5{ border:2px solid #FF9900 !important; background-color: rgba(255, 153, 0, .1) }

/* specials */
.pointer{ cursor: pointer;}
.upper{ text-transform: uppercase; }
.pre{ white-space: nowrap;}
.o05{opacity: 0.5;}
.small{font-size:smaller;}
.shadow0{ box-shadow: none; }
.block{ display: block; }
.bold{ font-weight: 600; }

.hide{ display: none; }
.r{ float:right; }
.l{ float:left; }
.clear:after{ clear: both; display: block; content: ''; }
.tc{ text-align: center; }
.tl{ text-align: left; }
.tr{ text-align: right; }
.tvc{ vertical-align: middle !important; }
.w100p,.wFull{ width:100% !important; }
.w50p{ width:50%; }

/* paddings and margins shortcuts */

.mr20{ margin-right: 20px; }
.ml20{ margin-left: 20px; }

.mw50{ min-width: 50px; }
.mw100{ min-width: 100px; }
.mw120{ min-width: 120px; }
.mw150{ min-width: 150px; }
.mw180{ min-width: 180px; }
.mw200{ min-width: 200px; }
.mw250{ min-width: 250px; }
.mw300{ min-width: 300px; }
.mw350{ min-width: 350px; }
.mw450{ min-width: 450px; }
.mw500{ min-width: 500px; }
.mw600{ min-width: 600px; }

.mw100p{ min-width: 100%; }

.w20{ width:20px; }
.w30{ width:30px; }
.w40{ width:40px; }
.w50{ width:50px; }
.w60{ width:60px; }
.w80{ width:80px; }
.w100{ width:100px; }
.w130{ width:130px; }
.w150{ width:150px; }
.w300{ width:300px; }
.w400{ width:400px; }
.w500{ width:500px; }

.max45{ max-width:45px !important; }
.max150{ max-width:150px !important; }
.max200{ max-width:200px !important; }
.max500{ max-width:500px !important; }

.ww200{ width: 200px; max-width: 200px; }
.ww250{ width: 250px; max-width: 250px; }
.ww350{ width: 350px; max-width: 350px; }

/* buttons */

.btn-white{ border-color:rgb(233, 233, 233); background: white;}
.btn{ box-shadow: none; }

/* other colors */

.color-grey{ color:#bbb; }

.select2borderLeft0 .select2-selection{
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* select2 fix */
.select2-results UL {max-height:450px !important;}

/*
.wAuto{ width:100% !important; border:1px solid red; }

@media (max-width: 1280px) {
	.wAuto{ min-width:800px; border:1px solid blue; }
}

@media (max-width: 1920px) {
	.wAuto{ min-width:800px; border:1px solid green; }
}
*/
/* theme panels */

.page-content{ max-width: 1920px; margin:0 auto; } /* override theme */
/*
@media (max-width: 1920px) {
	.page-content{  border:1px solid green; }
}
*/

.form-group LABEL{margin-bottom: 0 !important;}

.panel .panel-container hr { margin-left: -16px; margin-right: -16px; }
.panel .panel-container .panel-footer{ text-align: right; padding: 1rem; border-top:1px solid #eee; margin-top:6px; }
.panel-tag{ margin:0; padding: 10px 10px 10px 15px; }
.panel-tag.clear > div:first-child{ float: left; margin-top:7px; margin-bottom: 6px;}
.panel-tag.clear > div:last-child{ float: right; text-align: right; margin-left:20px;}

.panel-split{ margin:24px -16px 16px -16px; padding:12px 16px; font-size: 15px; }
.panel-toolbar .btn-panel.panel-reload{background: #fd3995;}

/* --- datatable --- */
.dataTable{margin-top:15px;}

/* table hover */
.table-hover tbody tr:hover { background-color: rgba(242, 232, 255, 0.41) !important; box-shadow: inset 0 0 0; }

.table{ table-layout: auto; width:auto; margin-bottom: 0; }
.table td{ padding: 9px 10px !important; color:#555; font-family: "arial"; }
.table td b{ color:#444; background: transparent !important; }

.p1, .table TD.p1{ padding: 1px !important; }
.p3, .table TD.p3{ padding: 3px !important; }

.label-white{ background: #f8f8f8; color:#333; }
.table TD .label,
.table .btn.btn-xs{
	padding: 1px 5px !important;
	font-family: "tahoma";
	font-size: 12px; font-weight: normal !important;
	display: inline-block;
	line-height: 15px !important;
	height: 17px;
	outline: none;
	vertical-align: top;
	border:none;
	margin-bottom: 1px;
}
.table>thead>tr>th{ border-bottom: none; vertical-align: top; }
.table>thead>tr.filters>th{
	background: rgb(242, 242, 242); linear-gradient(to top, rgb(242, 242, 242), rgb(250, 250, 250));
	padding:2px;
	border-bottom: none;
	vertical-align: middle;
}
.table>thead>tr.filters>th{ font-weight: normal; position: relative; }
.table>thead>tr.filters>th.filtered{ background: rgb(242, 242, 242); linear-gradient(to top, rgb(242, 242, 242), rgb(250, 250, 250)) }
/*
.table>thead>tr.filters>th INPUT{ padding-left: 6px; padding-right: 6px; font-size: 12px; min-width: 25px !important; }
.table>thead>tr.filters>th > INPUT{ width:100%; }
*/
.table>thead>tr.filters>th .btn{  height: 25px !important; line-height: 12px; margin-top: 1px; padding-top: 6px; }
.table>thead>tr.filters>th .form-control{ height: 27px; }
.table>thead>tr.filters>th SELECT.form-control { padding: 1px 5px; }
.table>thead>tr.filters>th:hover DIV.menu{ display: block; }

.table>thead>tr.filters	.inputX2 INPUT{ width:calc(50% - 2px) !important; display: inline-block; }

TABLE.table>tbody>tr>td.delete{ width:33px; text-align: center; cursor:pointer; vertical-align: middle; padding:0 5px !important; }
TABLE.table>tbody>tr>td i.active{ cursor:pointer; }

/*
.table>thead>tr.filters>th DIV.menu{
	z-index: 100;
	display: none;
	position:absolute;
	left: -2px !important;
	margin-top:4px;
	background: #D2D9DF;
	padding:8px 6px 6px 6px;
	-webkit-border-bottom-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-moz-border-radius-bottomright: 3px;
	-moz-border-radius-bottomleft: 3px;
	border-bottom-right-radius: 3px;
	border-bottom-left-radius: 3px;
}
.table>thead>tr.filters>th DIV.menu DIV{ white-space: nowrap; min-width: 60px !important; }
*/
.table>thead>tr.paginationLine TH{ padding:9px 8px !important; }
.resetFilters{ opacity: 0.2; font-size: 15px; }
.resetFilters:hover{ cursor: pointer; opacity: 1; color:rgb(136, 106, 181); }
.table>thead>tr>th.edit{ width:38px; }
/*
.table>thead>tr.filters DIV.dataRange{ position: relative; }
.table>thead>tr.filters DIV.dataRange > I.fa { position:absolute; display: block; right: 9px; top:6px; color:#aaa; cursor: pointer; opacity: 0.5; }
.table>thead>tr.filters DIV.dataRange > I.fa:hover { opacity: 0.8; }
.table>thead>tr.filters DIV.dataRange INPUT { padding-right: 30px !important; }
*/
.table-noBorders tbody tr td{ border:none; }
.table TD.small{ line-height: 10px !important; font-size: 11px; color:#777; }
.table TD.timeCreated{ line-height: 12px !important; font-size: 11px; color:#777; padding: 2px 5px  2px 5px !important; vertical-align: middle; text-align: center;  }

/* table FA`as */
TABLE.table>tbody>tr>td .fa{ font-size:18px; }
TABLE.table>tbody>tr>td .fa{font-size:15px; color:inherit; }
TABLE.table>tbody>tr>td > A.fa,
TABLE.table>tbody>tr>td > I.fa,
TABLE.table>tbody>tr>td > A I.fa{ color:#aaa;}
TABLE.table>tbody>tr>td:hover > A.fa,
TABLE.table>tbody>tr>td:hover > I.fa{color:#444;}
TABLE.table>tbody>tr>td .fa-times,
TABLE.table>tbody>tr>td .fa-toggle-on,
TABLE.table>tbody>tr>td .fa-toggle-off{ font-size:18px; }
TABLE.table>tbody>tr>td .fa-search{ font-size:13px; margin-top:3px; display: inline-block; }

TABLE.table>tbody td A.hover:hover{ background: rgb(249, 239, 255); padding: 3px 5px; border-radius:2px; margin-left:-5px !important;}

.table .emptyLine TD{ color:#ccc; text-align: center; vertical-align: middle; padding: 50px 10px !important;  }

/* table checkbox */
TABLE.table tr .checkbox{ padding:0 !important; width:33px; text-align: center; vertical-align: top; }
TABLE.table TBODY tr .checkbox{ padding-top:9px !important;}
TABLE.table tr .checkbox INPUT{ padding: 0; position: absolute; z-index: -1; width: 1px; height: 1px; opacity: 0;}
TABLE.table tr .checkbox LABEL{ width: 18px; height: 18px; position: relative;}
TABLE.table tr .checkbox LABEL:before{ position: absolute;width: 18px;height: 18px;content: ""; display: block;background-color: #fff;border: #adb5bd solid 2px; border-radius:2px;}
TABLE.table tr .checkbox LABEL:after{position: absolute;width: 18px; height: 18px;content: ""; display: block;background: no-repeat 50%; top:0;}
TABLE.table tr .checkbox INPUT:checked ~ LABEL::after {background-color: rgb(136, 106, 181);border: rgb(136, 106, 181) solid 2px; border-radius:2px;background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3e%3cpath fill='%23fff' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/%3e%3c/svg%3e");}

/* table colulmn hider */
.hide-btn-holder DIV.btn{ min-width: 20px; font-size: 10px; line-height: 15px; text-transform: uppercase;  background-color: #f7f7f7; color:#777; padding: 1px 9px; border:none; border-radius:0; }
.hide-btn-holder DIV.btn.off{ color: #ccc; background: #fafafa; }
.hide-btn-holder DIV.btn:hover{  background: rgb(231, 225, 240); color:rgb(136, 106, 181); }

/* arrows */

.nowrap {
	white-space: nowrap;
}
.table > thead > tr > th .orderArrows {
	margin: 2px auto 2px auto;
	display: table;
	white-space: nowrap;
}
.table > thead > tr > th.orderArrowsRight .orderArrows {
	margin-top: 10px;
	margin-left: 5px;
	display: inline;
	white-space: nowrap;
	right: 5px;
}
.table > thead > tr > th .orderArrows SPAN {
	display: inline-block;
	margin: 2px 0 0 0;
	width: 0;
	height: 0;
	cursor: pointer;
}
.table > thead > tr > th .orderArrows SPAN.up {
	border-right: 7px solid transparent;
	border-bottom: 9px solid #ccc;
	border-left: 7px solid transparent;
}
.table > thead > tr > th .orderArrows SPAN.down {
	border-right: 7px solid transparent;
	border-top: 9px solid #ccc;
	border-left: 7px solid transparent;
}
.table > thead > tr > th .orderArrows SPAN.up:hover,
.table > thead > tr > th .orderArrows SPAN.up.orderByThis {
	border-bottom: 9px solid #009eb4;
}
.table > thead > tr > th .orderArrows SPAN.down:hover,
.table > thead > tr > th .orderArrows SPAN.down.orderByThis {
	border-top: 9px solid #009eb4;
}
.table > thead > tr > th DIV {
	display: inline-block;
}


/* table paginations */
.paginatorTotal{ margin:6px 20px 0 5px; float: right; text-align: right; font-weight: 400 !important; color:#aaa; font-family: Roboto,Arial; }
.paginatorExec{ margin-left:-2px; margin-right:-2px; }
.paginatorExec button{
	border:none;
	background: transparent;
	border-radius:4px;
	margin:0 2px;
	display: inline-block;
	padding: 6px 12px !important;
	font-size:13px;
	font-size: 13px;
	font-family: Roboto,Arial;
	font-weight: 400;
	color:rgb(136, 106, 181);
	border:none;
}
.paginatorExec button.active,
.paginatorExec button.btn-next,
.paginatorExec button.btn-back,
.paginatorExec button.button{ background: rgb(231, 225, 240); color:rgb(136, 106, 181); }
.paginatorExec button.btn-next,
.paginatorExec button.btn-back{ background: rgb(231, 225, 240); color:rgb(136, 106, 181); }
.paginatorExec button.selected,
.paginatorExec button:hover{ background: rgb(136, 106, 181); color:white; }
.paginatorExec button[disabled],
.paginatorExec button[disabled]:hover{ background: #f4f4f4; color:#bbb; }


/* Override some shit */

.userPhoto{
	height: 256px;
	min-width:128px;
	background: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden;
}
.profile-image.rounded-circle{ width:48px; height:48px; }
.bg-silver{background-color:#f0f0f0};
.bordered-left-radius-0{border-top-left-radius: 0 !important;border-bottom-left-radius: 0 !important;}
.alert { margin-bottom: 1rem; }

/* errors  */

.oneError{
	margin-top: 1px;
	margin-bottom: 2px;
	margin-right: 1px;
	color: #fd3995;
	background-color: rgba(253, 57, 149, 0.08);
	line-height: 17px;
	display: inline-block;
	padding: 2px 16px;
	text-align: left;
	white-space: nowrap;
	vertical-align: baseline;
	border-radius: .25em;
	font-size: 12px;
	font-family: sans-serif;
}
.oneError A{ color:inherit; }

.error{
    border-color:#fd3995;
    color:#fd3995;
    background-color: rgba(253, 57, 149, 0.08);
}

/* edit inline */

[data-cell-edit]{ background:  rgba(136, 106, 181, 0.1) !important; }
[data-cell-edit]:hover,[data-cell-drop]:hover  { background-color: rgba(136, 106, 181, 0.5) !important; cursor: cell;   }
[data-cell-edit].pj, [data-cell-drop].pj{ padding: 1px !important; background: transparent !important; border:none; position: relative; }
[data-cell-edit] TEXTAREA,
[data-comment] TEXTAREA
{ padding: 1px 5px !important; min-height: 16px; position:absolute;
	min-width: 100%; min-height: 100%;
	left: 0; right: 0; top: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	resize: both;
	background: white;
	z-index: 5;
}
[data-cell-edit] TEXTAREA:hover{ box-shadow: #00c5df 0 0 0 2px; }
[data-cell-edit] INPUT{ display: block; width: 100%; height: 100%; padding-left:7px;  }
[data-cell-edit].cursorCell{ background:  rgba(136, 106, 181, 0.21) !important; box-shadow: inset 0 0 0 1px rgb(136, 106, 181); }

[data-cell-drop]{ background:  rgba(136, 106, 181, 0.1) !important; position: relative; cursor: pointer;  }
[data-cell-drop]:after { position: absolute; content: ''; display: block; width: 0; height: 0; top:4px; right:3px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid rgba(0,0,0, 0.2); }
[data-cell-drop] SELECT{ padding: 1px 5px !important; height: 16px; position:absolute;
	min-width: 100%; min-height: 100%;
	left: 0; right: 0; top: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	resize: both;
}
.pj[data-cell-drop]:after { display:none }

[data-cell-color=danger]{ background: rgba(255, 83, 0, 0.09) !important; }

[data-comment],
.dataComment{ position: relative; background: rgba(29, 233, 255, 0.07) !important;  } /* .dataComment - used only for styling */
[data-comment].pj,
.dataComment.pj{ padding: 1px !important; background: transparent !important; border:none; position: relative; }

[data-comment] > DIV,
.dataComment > DIV { position:absolute; right: 1px; top:1px; height: calc(100% - 2px); color: white !important; }

[data-comment] > DIV > SPAN,
.dataComment > DIV > SPAN{ font-size:18px !important; }

/* ------------------------------------------------------------------------------------------------------------------ */
/* remboUpload */

.remboUpload{position: absolute;	width: 1px;	height: 1px;	left:-1000px;	top:-1000px;	overflow: hidden; }
.remboUpload INPUT{display:none}
.remboUploadProgress{
    z-index:10000;
    opacity: 1; transition: opacity 1s;
	position: absolute; bottom:15px; border-radius:5px; background: rgba(255,255,255,0.85);
	color:black;
	left:15px;
	padding:4px 4px !important;
	width: 300px;
	content: 'asd';
}
.remboUploadProgress .progress > DIV{ margin:0; text-align: center;}
.remboUploadProgress .progress SPAN{ position: absolute; left:48%; color:#555; }
.remboUploadProgress .text{	font-size: 11px; color:#333; width: inherit; overflow: hidden; margin-bottom:4px; margin-left:1px;
	height: 32px;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.dropArea{
    border:1px dashed #ccc;
    padding:15px 30px;
    text-align: center;
    min-height: 40px;
    width: 100%;
    border-radius:3px;
    /**/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color:#ccc;
    text-shadow: 1px 1px 0 white;
}
.dropArea:hover{ background-color: rgba(136, 106, 181, 0.05);}

/* users */

.photo33{
	width:33px;
	height: 33px;
	border-radius:3px;
	overflow: hidden;
	background: #fdfdfd;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url(/assets/user2.png);
}
.layoutPhotoRounded{
	width:40px;
	height: 40px;
	border-radius:20px;
	overflow: hidden;
	background: #fdfdfd;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-image: url(/assets/user2.png);
	border:3px solid #ddd;
	/*box-shadow: 0 0 3px rgba(0,0,0, 0.5);*/
}


/*
d6e6fcd118
3113cbcf76
6dcc643d66
4a392c9344

*/

/* modals */
.modal-header{ border-bottom:1px solid rgba(0, 0, 0, 0.07); }
.modal-footer{ border-top:1px solid #f4f4f4; }

.page-logo{ height: 128px; line-height: 128px; text-align: center; }
.page-logo IMG{ width:auto; height: 96px;}

/* === old CMS styles ============================================================================================= */

/* menuStructures */
#structureHolder > .menuBlock{ margin-left:0; }
#structureHolder > .menuBlock > .menuBlock{ margin-left:0; }


.menuBlock{ padding:0; margin:3px 0 3px 35px; }
.menuBar{ border-radius: 4px; padding: 2px 10px; border:2px solid #fff; background: #fafafa; cursor:pointer; font-size: 15px; }
/*.menuBar .fa{ font-size: 47px; }*/
.menuBar:hover{	border:2px solid #00b48a; }
.menuBar:after{	clear: both; display: block; content: ''; }
.menuBar.light{ background: rgba(0, 180, 138, 0.1) !important; }
.menuBar .fa{ opacity: 0.3; margin-left: 4px; border-radius:2px; background-color: #656361; color:white; padding: 2px 3px; font-size: 14px; font-weight: normal; }
.menuBar .fa:hover{ opacity:1; }
.menuBar label{
	font-size: 14px;
	margin: 0 0 0 25px !important;
	line-height: 17px;
}
.menuBlock.disabledMenu{ color:#e2e2e2; }
.menuBlock.disabledMenu .fa{background-color: #e2e2e2;}
.menuBlock .fa.white{
	cursor:pointer;
	text-align: center;
	height:30px;
	width: 30px;
	line-height: 27px;
	margin-top:5px;
	border-radius:2px; color:#bbb; padding: 0; font-size: 17px; font-weight: normal;
}
.menuBlock .fa.white:hover { color:#777; }
.menuBlock .childrenHolder:before{ display: block; content: ''; clear: both; }
.menuBlock .childrenHolder{ display: none; }
.menuBlock label{ padding-left: 0px !important; }

/* uploadController */

.x{
	z-index:10003;
	height: 19px;
	width: 20px;
	border-radius: 2px;
	overflow: hidden;
	background-color: #444;
	color:white;
	cursor:pointer;
	padding: 1px;
	position:absolute;
	top:4px;
	right:4px;
	text-align: center;
	opacity: 0.5;
}
.x:before{
	content: '\d7';
	text-align: center;
	color:white;
	font-size: 28px;
	line-height: 18px;
	font-family: Arial, Helvetica, sans-serif;
}
.x:hover{ background-color: #dd0000; }


/* PAGES */

.pageBlock{
	margin:15px 0;
	border-radius:4px;
	border: 2px dashed #fff;
	padding:5px;
	position: relative;
	background-color: #fafafa;
}
.pageBlock:hover{ border-color: #715896; }
.pageBlock.block-type-text .innerContent{
	font-size:17px;
	line-height: 25px;
	color:#111;
	width: 100%;
	padding: 15px 15px 5px 15px;
	text-align: left;
}

.pageBlock .photoHolder{
	display: block;
	overflow: hidden;
	overflow-x: scroll;
	padding: 0;
	height: 118px;
}
.pageBlock .photoHolder{ display: block; content: ''; clear: both; }
.pageBlock .photoHolder > DIV.albumPhoto{ margin:0; padding: 0; display: block; float: left; }
.pageBlock .photoLine TR TD{ padding: 0 1px 0 0; position: relative; }
.pageBlock .photoLine TR TD:last-child{ padding: 0 0 0 0; }

.pageBlock > .btnBlockDelete{ position: absolute; top:8px; right:7px; font-size:17px; width: 27px; height: 27px; text-align: center; color: #eee; cursor:pointer; opacity: 0.5; }
.pageBlock:hover > .btnBlockDelete{ color: #ccc; opacity: 1; }
.pageBlock > .btnBlockDelete:hover{  color: #ff5b57; opacity: 1; }

/*
#pageContent .btnBlockAdd{opacity:0.7;}
#pageContent .btnBlockAdd:hover{opacity:1;}
*/

.ck-editor__editable_inline { min-height: 300px; }
.ck-content{
	font-size: 17px;
	line-height: 25px;
	color: #111;
}
.explainText{
	font-size:13px;
}
.editorChapter{
	text-align: center;
	font-size: 17px;
	line-height: 25px;
	color: #111;
	width: 100%;
	height: 60px;
	border:1px solid rgb(196, 196, 196);
	padding:17px 12px;
}

.block-type-chapter{
	font-size:25px; color:#777;
}

.card-outline-grey{ border-color:#ddd; }
.card-outline-grey:hover{ border-color:#aaa; }

/* --- ALBUM css ---*/

#albumPhotoHolder{ min-height: 40px; }
.albumPhoto{
	display: inline-block;
	text-align: left;
	padding:1px;
	width:160px;
	height:100px;
	max-height: 160px;
	cursor:pointer;
	background-color:white;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover !important;
	position: relative;
}

DIV.btnErase{ position: absolute; right: 10px; top: 5px; z-index: 10; width: 18px; height: 18px; cursor: pointer; }
DIV.btnErase SPAN.fa{ opacity: 0.5; color:white; font-size: 23px; }
DIV.btnErase:hover SPAN.fa{ opacity: 1; color: rgb(253, 57, 149); text-shadow: 0 0 3px rgba(255,255,255,0.5); }
DIV.albumPhoto:hover DIV.btnErase SPAN.fa{ opacity: 0.9; }

#photoPreviewTool IMG{
	width: auto;
	height: auto;
	max-height: 80%;
	max-width: 80%;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: none;
	box-shadow: 5px 5px 15px rgba(0,0,0,0.15);
}
#photoPreviewTool .spinnerHolder{
	margin: auto;
	position: fixed;
	top: 40%;
	left: 50%;
	transform: translate(-50%, -40%);
}
#photoPreviewTool{
	position: absolute;
	top:0; left:0;
	width:100%;
	height: 100%;
	background: rgba(255,255,255, 0.5);
	cursor: pointer;
	display: block;
	z-index:10000;
}

/* chats window */

.slimScrollDiv{height: 500px !important;}

.chats{list-style-type:none;margin:0;padding:12px 15px 15px}
.chats>div+div,.chats>li+li{margin-top:15px}
.chats>div:after,.chats>div:before,.chats>li:after,.chats>li:before{content:'';display:table;clear:both}
.chats .name{color:#333;display:block;margin-bottom:5px;font-weight:600;text-decoration:none}
.chats .name .label{font-size:8px;padding:1px 4px 2px;margin-left:3px;position:relative;top:-1px}
.chats .date-time{font-size:10px;display:block;float:right;color:#999;margin-top:3px}
.chats .image{float:left;width:60px;height:60px;border-radius:4px;overflow:hidden}
.chats .image img{max-width:100%}
.chats .image+.message{margin-left:68px;  background: rgb(247, 244, 255);}
.chats .message{padding:7px 12px;font-size:12px;position:relative;background:#fff;border-radius:5px;/* border:1px solid #eee;*/}
.chats .message:before{content:'';position:absolute;top:15px;left:-13px;border:7px solid transparent;border-right-color:#fff}
.tab-overflow,.tab-overflow .nav.nav-tabs{border-radius:2px 2px 0 0;overflow:hidden}
.chats .right .name{text-align:right}
.chats .right .date-time{float:left}
.chats .right .image{float:right}
.chats .right .image+.message{margin-right:67px;margin-left:0; background: #fafafa;}
.chats .right .message:before{left:auto;right:-13px;border-right-color:transparent;border-left-color:#fff}

.userAvatar{
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-image: url(/backend/images/user.png);
}

.chats .right .message::before{
    top: 9px !important;
    right: -13px !important;
}

.chats .message{ font-size: 14px; line-height: 25px; padding-bottom: 10px;}

#messagesHolder{
    overflow: hidden;
    overflow-y: scroll;
    min-height: 500px;
    height: 700px;
    /*max-height: 1000px;*/
    padding-bottom: 10px;
}


/* copy text */
/*.copyText{  border-radius:2px; display: inline-block; margin:-1px -4px; padding: 1px 4px; }*/
.copyText:hover {
	background-color: rgba(181, 82, 255, 0.11);
	cursor: copy;
}

/*.btn.copyText{padding:1px 7px; margin-left:0px; margin-right:0px; border-radius:3px; }*/
.btn-primary.copyText:hover {
	background-color: rgb(0, 125, 193) !important;
}

.btn-secondary.copyText:hover {
	background-color: rgb(89, 99, 104) !important;
}

.btn-danger.copyText:hover {
	background-color: rgb(255, 43, 0) !important;
}

/*.copyText{ cursor: copy; border-radius:2px; padding-left: 5px; padding-right: 5px; }*/
.copyColor {
	position: absolute;
	opacity: 1;
	width: auto;
	max-width: 600px;
	display: inline-block;
	min-width: 40px;
	background: rgba(255, 255, 255, 0.95) !important;
	color: #222 !important;
	border-radius: 2px !important;
	box-shadow: 5px 3px 5px rgba(0, 0, 0, 0.3);
	border: 1px solid #ccc;
	cursor: default;
	line-height: 17px;
	z-index: 20000;
	padding: 5px 15px;
}

.copyColor SPAN {
	font-size: smaller;
	opacity: 0.6;
}

/* autocomplete */
DIV.autocomplete {
	margin-top:10px;
	position: absolute;
	/*top:33px; left:2px;*/
	min-width: 100px;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 0;
	overflow-y: scroll;
	height: auto;
	min-height: 20px;
	max-height: 350px;
	background: white;
	z-index: 1000;
	box-shadow: 3px 3px 1px rgba(0, 0, 0, 0.05);
	background-color: rgb(240, 230, 255);
}
.table > thead > tr.filters DIV.autocomplete {
	margin-left: 1px;
	margin-top: 2px;
	max-height: 550px;
}
DIV.autocomplete > DIV {
	padding: 7px 12px;
	text-align: left;
	white-space: pre;
	cursor: pointer;
	display: block;
	width: 100%;
	font-size: 13px;
	background-color: white;
}
DIV.autocomplete > DIV:nth-child(2n) {
	background-color: #f9f8ff;
}
DIV.autocomplete > DIV:hover {
	background-color: rgb(136, 106, 181);
	color: white;
}