/* TalkeyAccount - backend  */

/*a {
    text-decoration: none;
    color: #4ea81c
}

a:hover {
    text-decoration: underline;
}
a:hover, a:focus{
    color: #5dc821;
}
*/

body * {
	position: relative;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#login-form {
	display: block;
	position: absolute;
	top: 50px;
	left: 50%;
	height: auto;
	margin: 0 0 0 -175px;
	width: 350px;
	text-align: center;
}

	#login-form input {
		height: 45px;
		line-height: 45px;
	}

	#login-form .button {
		width: 100%;
		height: 50px;
		line-height: 50px;
	}

	#login-form h1 {
		display: block;
		margin: 0 0 20px 0;
		font-size: 26px;
	}

	#login-form em {
		color: #bbb;
		/*font-weight: bold;*/
		font-style: normal;
	}


header {
	display: table;
	width: 100%;
	height: 60px;
}

#app-title {
	width: 200px;
	display: table-cell;
	text-align: center;
	text-transform: uppercase;
	background-color: #4ea81c;
	font-weight: 500;
	letter-spacing: 1px;
	line-height: 60px;
}

	#app-title a, #app-title a:hover {
		color: #fff;
		text-decoration: none;
		font-size: 17px;
	}

#apps-items {
	padding: 5px 20px;
	width: 220px;
	color: #152864;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
	font-size: 13px;
}


	#apps-items a {
		display: block;
		color: #152864;
		text-align: left;
		text-decoration: none;
		margin: 0px -20px;
		padding: 7px 15px;
		border-left: 5px solid transparent;
	}

	#apps-items > a:hover {
		border-color: #4ea81c;
	}

	#apps-items > a.active {
		border-color: #4ea81c;
		background-color: #92E3CF;
	}

	#apps-items > a:hover, #apps-items > a.active {
	}

.btn-primary {
	background-color: #4ea81c;
	border-color: #4ea81c;
	color: #fff;
}

	.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary:active:focus {
		background-color: #5dc821;
		border-color: #5dc821;
	}

input, select, textarea, button {
	margin: 0;
	outline: none;
	font-size: 13px;
	border: 1px solid transparent;
}

input, select, textarea, button,
.btn, .btn-primary, .button,
.modal-content, .bg-dark {
	border-radius: 3px;
}

.btn,
.button,
.btn-primary,
.label-success,
.label-danger {
	text-decoration: none !important;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	/*-khtml-user-select: none;*/
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	white-space: nowrap;
}

	.btn.disabled,
	.btn-primary.disabled,
	.button.disabled,
	.processingInstance [type="submi"],
	.processingInstance .button {
		cursor: no-drop;
		opacity: 0.5;
		pointer-events: none;
	}

input[type="text"],
textarea.form-control,
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
select, select.form-control {
	height: 34px;
	line-height: 34px;
	padding: 0 15px;
	background: #ffffff;
	/*	background: #eaeaea;
*/ border-color: #dadada;
	color: #222;
}

textarea.form-control {
	line-height: 16px;
	padding: 10px 15px;
	height: auto;
}

	textarea.form-control.sm {
		line-height: 14px;
		padding: 7px 12px;
	}

.small input[type="text"],
.small input[type="email"],
.small input[type="password"],
.small input[type="tel"],
.small input[type="number"],
.small input[type="date"],
.small select,
.small select.form-control {
	height: 25px;
	line-height: 25px;
	padding: 0 10px;
}

input[type="text"].w80p {
	width: 80%;
	padding: 0 10px;
}


input[type="text"].input-sm {
	padding: 0 10px;
}

input::-webkit-input-placeholder {
	color: #adadad;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
}

	input[type="text"].hasError,
	input[type="email"].hasError,
	input[type="password"].hasError,
	input[type="tel"].hasError,
	input[type="number"].hasError,
	input[type="date"].hasError,
	select.hasError,
	textarea.hasError {
		border: 1px solid #d62c2c;
		background: #4e2727;
	}

select, button, [type="submit"] {
	-webkit-appearance: none;
}

input[type="submit"].button {
	padding: 0 15px;
}

select {
	/*background-image: url("/cerebro/www/images/arrow-down.png") !important;*/
	background-position: calc(100% - 10px) center !important;
	background-repeat: no-repeat !important;
	background-size: 15px auto !important;
}

	input:focus, select:focus, textarea:focus, .form-control:focus {
		border-color: #586171;
		outline: none;
		box-shadow: none;
	}

input:-webkit-autofill {
	-webkit-animation-name: autofill;
	-webkit-animation-fill-mode: both;
}

input[name="spotlight"]:-webkit-autofill {
	-webkit-animation-name: autofillWhite;
	-webkit-animation-fill-mode: both;
}

@-webkit-keyframes autofill {
	to {
		color: #444;
		background: #eaeaea;
		border-color: #dadada;
	}
}

@-webkit-keyframes autofillWhite {
	to {
		color: #262c38;
		background: white;
	}
}

fieldset,
legend {
	border-color: #2b313c;
}

legend {
	color: white;
}

legend,
.modal-title {
	font-size: 18px;
	border: none;
}

button, .button, [type="submit"], a {
	cursor: pointer;
}

.btn-with-icon .fa {
	vertical-align: middle;
	margin: -10px 10px -10px -13px;
	padding: 10px;
	background-color: rgba(0,0,0,0.2);
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.btn-with-icon.btn-sm .fa {
	margin: -7px 8px -6px -11px;
	padding: 9px;
}

.button.fa,
[class^="label-"],
.table .button.small {
	height: 25px;
	line-height: 25px;
	text-align: center;
	display: inline-block;
	border-radius: 10px;
	font-size: 12px;
}

.table .button.small {
	padding: 0 5px;
	line-height: 23px;
}

	.table .button.small .fa {
		margin-left: 3px;
	}

.table .button.leftSpace {
}

.button.fa {
	width: 25px;
}

.button, .btn {
	border-radius: 10px;
}

[class^="label-"] {
	white-space: nowrap;
	padding: 0 5px;
}

	[class^="label-"].stretchy {
		height: auto;
		white-space: normal;
	}

code {
	color: #4d7b70;
	padding: 4px 6px;
	background: #373e4a;
}

label {
	font-weight: inherit;
}

#content > .wrapper > .row > [class^="col-"]:not(td):not(th),
#content > .wrapper > .row > [class*=" col-"]:not(td):not(th) {
	padding-top: 15px;
	padding-bottom: 15px;
}

/**
Bootstrap like
 */
.wide {
	width: 100%;
}

.valm {
	vertical-align: middle !important;
}

.noHorPad {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.button {
	display: inline-block;
	height: 35px;
	line-height: 35px;
	padding: 0;
	margin: 0;
	text-align: center;
	font-weight: normal;
}

.holder,
.holder:after,
.holder:before {
	display: block;
	clear: both;
}

	.holder:after,
	.holder:before {
		content: "";
	}

	.holder .inline {
		display: inline-block;
		vertical-align: middle;
		float: none !important;
	}

.button.small {
	height: 30px;
	line-height: 30px;
}

/*.btn,*/
/*.btn-default {*/
/*background: #1b3482;*/
/*border-color: #1b3482;*/
/*color: white;*/
/*box-shadow: none;*/
/*}*/

/*.btn.active,*/
/*.btn:active,*/
/*.btn:hover,*/
/*.btn-default.active,*/
/*.btn-default:active,*/
/*.btn-default:hover,*/
/*.btn-default.focus,*/
/*.btn-default:focus {*/
/*background: #265b89;*/
/*border-color: #265b89;*/
/*color: white;*/
/*}*/

.button.orange,
.btn-warning {
	background-color: #a9822c;
	border-color: #a9822c;
}

	.button.orange.active,
	.button.orange:active,
	.button.orange:hover,
	.btn-warning.active,
	.btn-warning:active,
	.btn-warning:hover {
		background-color: #9a7117;
		border-color: #9a7117;
	}

.button.red,
.btn-error, .btn-danger {
	color: #fff;
	background-color: #d9534f;
	border-color: #d43f3a;
}



	.button.red.active,
	.button.red:active,
	.button.red:hover,
	.btn-error.active,
	.btn-error:active,
	.btn-error:hover,
	.btn-danger.active,
	.btn-danger:active,
	.btn-danger:hover {
		color: #fff;
		background-color: #c9302c;
		border-color: #ac2925;
	}

.button.hasIcon {
	text-align: left;
	padding: 0 50px 0 20px;
}

	.button.hasIcon.small {
		padding: 0 40px 0 10px;
	}

	.button.hasIcon .icon,
	.button.hasIcon .fa {
		left: inherit !important;
		right: 0;
		border: none !important;
	}

		.button.hasIcon .icon img,
		.button.hasIcon .fa img {
			position: absolute;
			top: 50%;
			right: 0;
			height: 20px;
			display: none;
			margin: -10px 6px 0 0;
		}

		.button.hasIcon .icon.loading img,
		.button.hasIcon .fa.loading img {
			display: block;
		}

		.button.hasIcon .icon.loading,
		.button.hasIcon .fa.loading {
			font-size: 0;
		}

.button.bgIcon {
	overflow: hidden;
	border: none;
}

	.button.bgIcon .icon,
	.button.bgIcon .fa {
		background: rgba(0, 0, 0, 0.25);
		top: 0 !important;
		height: 100% !important;
		margin: 0 !important;
		line-height: inherit !important;
	}

.form-group.hasIcon input {
	padding-left: 50px;
}

.form-group > .icon,
.form-group > [class^="icon-"],
.form-group > [class*=" icon-"],
.form-group > .fa,
.button.hasIcon > .icon,
.button.hasIcon > [class^="icon-"],
.button.hasIcon > [class*=" icon-"],
.button.hasIcon > .fa {
	position: absolute;
	top: 50%;
	left: 0;
	height: 20px;
	line-height: 20px;
	text-align: center;
	width: 35px;
	border-right: 1px solid #454a54;
	margin: -10px 0 0 0;
	z-index: 2;
	font-size: 12px;
	pointer-events: none;
}

.form-group em {
	display: block;
	font-size: 12px;
	margin: 5px 0 -5px 0;
}

.form-group.radio-list label,
.form-group.radio-list label input {
	display: inline-block;
	vertical-align: middle;
	margin: 0 15px 0 0;
}

.form-group.radio-list br {
	display: none;
}

#apps {
	background: #eaeaea;
}

.icons .icon-pencil {
	color: #4ea81c;
}

#user-icon .fa.active,
#user-icon .fa:active,
#user-icon .fa:hover {
	background: #4d7b70;
}

#navigation,
[class^="col-"] .bg,
[class*=" col-"] .bg {
	background: rgba(0,0,0,.05);
}

.bg-dark {
	background-color: rgba(0, 0, 0, 0.25);
}

#apps nav a span {
	color: white;
}

.table,
.table .table {
	background: transparent;
}

	.table .thin {
		width: 1px;
		white-space: nowrap;
	}

	.table > thead > tr > th,
	.table > tbody > tr > th,
	.table > tfoot > tr > th,
	.table > thead > tr > td,
	.table > tbody > tr > td,
	.table > tfoot > tr > td {
		border-color: #717171;
		vertical-align: middle;
	}

td label {
	margin-bottom: 0px;
}

.icons .fa-cross,
.red {
	color: #d24142;
}

.table .sort {
	text-decoration: underline;
	white-space: nowrap;
}

	.table .sort .nonVis {
		opacity: 0;
	}

	.table .sort .fa-sort-asc {
		bottom: -3px;
	}

	.table .sort .fa-sort-desc {
		top: -2px;
	}

	.table .sort .fa-sort-asc,
	.table .sort .fa-sort-desc {
		margin-left: 6px;
	}

.table .loading img {
	height: 20px;
	display: inline-block;
	vertical-align: middle;
}

.table .toggler {
	display: inline-block;
	cursor: pointer;
}

.table .has-inner-table {
	padding: 5px 0 5px 0;
	background: rgba(48, 54, 65, 0.5);
}

.table .padd-left {
	padding-left: 28px;
}

.table .faded {
	opacity: 0.5;
}

.table.no-border td {
	border: none !important;
}

err {
	color: red;
}

#snippet--modal,
.modal {
	position: fixed;
	z-index: 1050;
}

.modal {
}

.modal-content {
	background: white; /*#303641;*/
}

.modal-header,
.modal-footer {
	border-color: #4e5765;
}

	.modal-footer > * {
		display: inline-block;
		vertical-align: middle;
	}

.label-success {
	background: transparent;
	border: 1px solid #5cb85c;
	color: #5cb85c;
}

.btn-primary.green {
	background: #5cb85c;
	border-color: #5cb85c;
	color: white;
}

	.btn-primary.green:active,
	.btn-primary.green:hover,
	.btn-primary.green.active {
		background: #489a48;
		border-color: #489a48;
		color: white;
	}

.label-danger {
	background: transparent;
	border: 1px solid #d9534f;
	color: #d9534f;
}

.table-striped > tbody > tr:nth-of-type(odd) {
	background-color: transparent;
}

.table-striped > tbody > tr:nth-of-type(even) {
	/*background-color: rgba(0, 0, 0, 0.15);*/
	background: rgba(0,0,0,0.1);
}

.table-striped > thead > tr > th,
.table-striped > tbody > tr > th,
.table-striped > tfoot > tr > th,
.table-striped > thead > tr > td,
.table-striped > tbody > tr > td,
.table-striped > tfoot > tr > td {
	border-color: #424956;
}

.table-striped > tfoot > tr > th,
.table-striped > tfoot > tr > td {
	border: none;
}

.table-striped > thead > tr > th,
.table-striped > thead > tr > td {
	border-left: none;
	border-right: none;
}

.table-striped > thead > tr > th,
.table-striped > thead > tr > td,
.table-striped > tbody > tr:first-child > th,
.table-striped > tbody > tr:first-child > td {
	border-top: none;
}

.table-striped > tbody > tr > th,
.table-striped > tbody > tr > td {
	border-left: none;
}

	.table-striped > tbody > tr > th:last-child,
	.table-striped > tbody > tr > td:last-child {
		border-right: none;
	}

.table-hover > tbody > tr:hover {
	background-color: rgba(0, 0, 0, 0.15);
}

.datagrid-per-page-submit {
	display: none;
}

.col-per-page {
	width: 10%;
}

.table-bordered tr:not(:first-child) th {
	padding: 0;
}

.datagrid {
	background: transparent;
}

.datagrid,
.table-bordered {
	border: none;
}


#ajax-cover {
	/*position: fixed;*/
	/*width: 100%;*/
	/*height:100%;*/
	/*z-index: 123000;*/
	/*background-color: rgba(0,0,0,0.25);*/
	display: none;
	/*left: 0px;*/
	/*top: 0px;*/
	/*bottom:0px;*/
	/*right:0px;*/
}

#ajax-spinner {
	position: fixed;
	width: 86px;
	height: 86px;
	margin-left: -43px;
	margin-top: -43px;
	left: 50%;
	top: 50%;
	/*background: url('../img/ajax_loader.gif?V=1') no-repeat;*/
	z-index: 123456;
	color: #329cd6;
}

.component-autocomplete input[type="text"] {
	background-color: #3FB498;
	border-color: #0b614c;
	color: #000;
}

	.component-autocomplete input[type="text"]::-webkit-input-placeholder, .component-autocomplete input[type="text"]::placeholder {
		color: #444;
	}

	.component-autocomplete input[type="text"]:-ms-input-placeholder {
		color: #444;
	}

	.component-autocomplete input[type="text"]:focus, .component-autocomplete input[type="text"]:hover {
		border-color: #000;
		background-color: #45c4a6;
	}

.component-autocomplete .autocomplete-list {
	list-style: none;
	padding: 0px;
	margin: 0px;
	position: absolute;
	z-index: 5;
	width: 100%;
	background-color: #fff;
}

	.component-autocomplete .autocomplete-list li a {
		display: block;
		background-color: #3FB498;
		color: #fff;
		margin-bottom: 1px;
		padding: 5px 15px;
	}

		.component-autocomplete .autocomplete-list li a:hover {
			background-color: #45c4a6;
			text-decoration: none;
		}

	.component-autocomplete .autocomplete-list li:last-child a {
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}

.datagrid input[type="date"] {
	width: 130px;
	padding-right: 0px;
}

.datagrid-inline-edit input[type="number"].input-hours, .datagrid input[type="number"].input-hours {
	width: 55px;
	padding-right: 0px;
}

.datagrid-inline-edit input[type=number]::-webkit-inner-spin-button, .datagrid input[type=number]::-webkit-inner-spin-button {
	-webkit-appearance: none;
}


.datagrid .col-finalPrice, .datagrid .col-customPrice {
	white-space: nowrap;
}

.datagrid .row-grid-bottom .col-per-page select.form-control {
	height: 30px;
	line-height: 30px;
}


.table.table-striped td[class*=" col-hours"] {
	background-color: #5c6f79;
}

.table-striped > tbody > tr:nth-of-type(even) td[class*=" col-hours"] {
	background-color: #51626b;
}

.table-hover > tbody > tr:hover td[class*=" col-hours"] {
	background-color: #495961;
}

.table.table-striped label {
	display: block;
}

.text-success {
	color: #4ec750;
}

.text-danger {
	color: #da2a27
}

.datagrid, .datagrid .row-grid-bottom {
	background: transparent;
	border-color: transparent;
}

	.datagrid .editing .form-control {
		margin: -3px;
		padding-bottom: 4px;
		padding-top: 4px;
		height: 28px;
	}

	.datagrid table tbody tr .datagrid-inline-edit textarea.form-control, .datagrid .editing textarea.form-control {
		width: 300px;
		height: 80px;
		line-height: 14px;
	}

	.datagrid tr.state-0 {
		color: #fff;
	}

	.datagrid tr.state-5 {
		color: #57d597;
	}

	.datagrid tr.state-10 {
		color: #4ec750;
	}

.clients-datagrid tbody td a {
	display: block;
	margin: -8px;
	padding: 8px;
}

select.form-control[disabled] {
	background-color: rgba(128,128,128,0.65);
}

.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {
	background-color: rgba(255,255,255,0.1);
}

#content .wrapper {
	padding: 15px 30px;
}

[class^="col-"] > .wrap,
[class*=" col-"] > .wrap,
.row > .wrap {
	padding: 15px;
}

.wrap:after {
	content: "";
	clear: both;
	display: block;
}

#app {
	width: 100%;
	max-width: 100%;
	display: table;
	min-height: 100vh;
}

	#app > section {
		display: table-cell;
		vertical-align: top;
	}

#apps {
	width: 200px;
}


#app-title-right {
	display: table-cell;
	text-align: right;
	padding: 0px 25px;
	background-color: #f5f5f8;
	vertical-align: middle;
}

#app-title-center {
	display: table-cell;
	text-align: center;
	padding: 0px 25px;
	background-color: #f5f5f8;
	vertical-align: middle;
}


#app-title-right h2 {
	margin: auto;
}

#module-title span {
	display: block;
	padding: 10px 0 10px 20px;
	margin: 0;
	font-weight: bold;
	font-size: 16px;
}

#user-info {
	position: absolute;
	bottom: 0;
	left: calc(100% - 10px);
	background: white;
	padding: 15px;
	display: none;
}

	#user-info.visible {
		display: block;
	}

	#user-info strong,
	#user-info span {
		white-space: nowrap;
	}

#breadcrumbs {
	padding: 10px 20px 5px 25px;
}

	#breadcrumbs ul {
		display: table;
		margin: 0;
		padding: 0;
	}

		#breadcrumbs ul > * {
			display: table-cell;
			vertical-align: middle;
			white-space: nowrap;
		}

			#breadcrumbs ul > * > * {
				padding: 4px 10px;
				display: inline-block;
				vertical-align: middle;
			}

			#breadcrumbs ul > *:not(:last-child):after {
				content: "/";
				margin: 0;
				text-decoration: none;
				display: inline-block;
				vertical-align: middle;
			}

			#breadcrumbs ul > * > *,
			#breadcrumbs ul > *:not(:last-child):after {
				color: #ababab;
			}

#content h1 {
	margin: 0 0 15px 0;
	color: #000;
}

.clip-list {
	margin-top: 30px;
}

	.clip-list .clip {
		padding: 15px;
		background-color: rgba(0,0,0,0.2);
		margin-top: 15px;
	}

		.clip-list .clip textarea {
			margin-top: 10px;
			height: 80px;
			font-size: 12px;
		}

	.clip-list .icons {
		text-align: center;
	}

		.clip-list .icons a {
			color: #fff;
		}

.clickable {
	cursor: pointer;
}

.clip-list .thumbnail-wrapper {
	position: relative;
	display: inline-block;
}

	.clip-list .thumbnail-wrapper .cover {
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: 0px;
		width: 100%;
		height: 100%;
		z-index: 3;
	}

		.clip-list .thumbnail-wrapper .cover span {
			position: absolute;
			display: inline-block;
			left: 50%;
			top: 50%;
			margin-top: -24px;
			margin-left: -31px;
			color: #ddd;
			padding: 8px 20px;
			background-color: rgba(0,0,0,0.25);
			text-align: center;
			border-radius: 6px;
		}

		.clip-list .thumbnail-wrapper .cover:hover span {
			background-color: rgba(0,0,0,0.35);
		}

		.clip-list .thumbnail-wrapper .cover:hover i {
			color: #fff;
		}

.label-info {
	background-color: #51626b;
	font-size: 11px;
}


.story-editor {
}

	.story-editor .active-clip .video-cell {
		position: relative;
	}

		.story-editor .active-clip .video-cell .video-cover {
			position: absolute;
			top: 0px;
			left: 15px;
			bottom: 0px;
			right: 15px;
			background-color: rgba(0,0,0,0.25);
			z-index: 1;
		}

	.story-editor .col-wrap {
		padding: 15px;
		background-color: rgba(0,0,0,0.25);
		border-radius: 10px;
	}

	.story-editor .video-controls {
		margin-top: 0px;
		padding: 15px;
		background-color: rgba(0,0,0,0.25);
		margin-bottom: 20px;
	}

		.story-editor .video-controls .controls {
			margin-top: 15px;
		}

.half, input.half {
	width: 50%;
}

.slider-jump-on-time {
	margin-top: 15px;
}

.small-clip a {
	position: relative;
	display: inline-block;
}

	.small-clip a .clip-title {
		position: absolute;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		padding: 5px;
		background: rgba(0,0,0,0.8);
		color: #fff;
		z-index: 1;
		width: 100%;
		bottom: 0px;
		left: 0px;
	}

.small-clip img {
	width: 100%;
}

.event {
	position: relative;
	padding: 15px;
	background-color: rgba(0,0,0,0.25);
	margin: 10px 0;
}

.fa-vm {
	vertical-align: middle;
}

.row.offset-top {
	margin-top: 10px;
}

.row.border-top {
	border-top: 1px solid rgba(255,255,255,0.2);
	padding-top: 15px;
}


.event-details .button-row {
	margin-bottom: 2px;
}

.control-label {
	margin-top: 8px;
	display: inline-block;
}

.btn-mg {
	margin: 0px 2px;
}

.event-details .form-field {
	margin: 10px 0;
	border-bottom: 1px dashed #ccc;
	padding-bottom: 5px;
}

.row {
	margin-bottom: 2px;
}

table.sortable {
	width: 100%;
}



.dnd-drop-zone {
	width: 100%;
	height: 130px;
	border: 2px dashed #666;
	border-radius: 20px;
	text-align: center;
	position: relative;
	color: #666;
	font-size: 20px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding-top: 20px;
}

	.dnd-drop-zone input {
		position: absolute;
		cursor: pointer;
		left: 0px;
		top: 0px;
		opacity: 0;
	}

	.dnd-drop-zone div {
		margin-bottom: 30px;
	}

	.dnd-drop-zone .button {
		font-size: 75%;
	}

	.dnd-drop-zone.mouse-over {
		border-color: #2ecc71;
		color: #2ecc71;
	}

.dnd-rop-zone input[type="submit"] {
	display: none;
}



.images {
	display: block;
	margin: 20px 0;
}

	.images .image {
		width: 200px;
		height: 150px;
		display: inline-block;
		text-align: center;
		overflow: hidden;
		position: relative;
		border: 2px solid #666;
	}

		.images .image:hover {
			border: 2px solid #aaa;
		}

		.images .image img {
			min-width: 100%;
		}

		.images .image .controls {
			position: absolute;
			bottom: 0px;
			right: 0px;
			display: none;
			padding: 5px;
			background-color: rgba(0,0,0,0.75);
		}

		.images .image:hover .controls {
			display: block;
		}

.file-manager * {
	position: relative;
}

.file-manager .row.files {
	margin-left: -5px;
	margin-right: -5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

	.file-manager .row.files .file {
		text-align: center;
		padding-left: 5px;
		padding-right: 5px;
		margin-bottom: 10px;
	}

		.file-manager .row.files .file .card {
			overflow: hidden;
			margin-bottom: 0;
			position: relative;
			display: flex;
			flex-direction: column;
			background-color: #eaeaea;
			border: 1px solid transparent;
			border-radius: 2px;
		}

			.file-manager .row.files .file .card .size {
				position: absolute;
				top: 0;
				right: 0;
				font-size: 8px;
				padding: 0 4px;
				background: rgba(255,255,255,0.9);
				border-radius: 0 0 0 3px;
				z-index: 2;
				color: #707070;
			}

			.file-manager .row.files .file .card .flex-center {
				background: rgba(255,255,255,0.2);
				overflow: hidden;
				position: relative;
				padding: 0 5px;
				height: 60px;
				width: 100%;
				padding-top: 100%;
			}

.files .icon .cell {
	position: relative;
	/*padding: 0 5px;*/
	height: 60px;
	width: 100%;
	padding-top: 10%;
}

.file-manager .row.files .file img {
	position: absolute;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	top: 50%;
	left: 50%;
	height: 101%;
	width: auto;
	-ms-interpolation-mode: bicubic;
}

.file-manager .row.files .file i {
	font-size: 40px;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.file-manager .row.files .file .actions {
	height: 30px;
	white-space: nowrap;
}

	.file-manager .row.files .file .actions .btn {
		font-size: 12px;
	}

.file-manager .row.files .file.orientation-2 img {
	height: auto;
	width: 101%;
}

.file-manager .row.files .file.cloned {
	opacity: 0.2;
}

.file-manager .table .thumbnail-image {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	min-width: 0;
	min-height: 0;
}

.files .name {
	padding: 4px;
	text-overflow: ellipsis;
	overflow: hidden;
	/*white-space: nowrap;*/
	height: 42px;
	font-size: 12px;
}

.file-manager .row.files .file.asParent .card {
	background-color: #ccc;
}

.toolbar {
	display: flex;
	flex-direction: row;
	height: 4.5rem;
	align-items: center;
	padding: 0.05rem 2.1rem 0;
	position: relative;
	margin-bottom: 20px;
}

	.toolbar:not(.toolbar--inner) {
		background-color: #FFFFFF;
		border-radius: 2px;
		box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075);
	}

section.content .toolbar {
	min-height: 4.5rem;
}

.table-list .list-actions, .list .list-actions, .toolbar .actions {
	text-align: right;
}

.toolbar .actions {
	margin: 0.05rem -0.8rem 0 auto;
}

.form-styled table {
	width: 100%;
}

	.form-styled table td {
		padding: 2px 15px;
	}

.form-styled label {
	cursor: pointer;
}

.user-detail {
	display: block;
	margin: -8px;
	padding: 20px;
	border-bottom: 3px solid #3FB498
}

.datagrid table td.col-action {
	text-align: left !important;
}

.text-disabled td:not(.col-action) {
	font-style: italic;
	color: #aaa;
}

.btn.show-detail {
	float: left;
	margin-right: 4px;
}

.users-wrap .datagrid table th.col-action, .users-wrap .datagrid table td.col-action {
	min-width: 350px;
}

.users-wrap td {
	font-size: 12px;
}

input[type="checkbox"] {
	display: none;
}

	input[type="checkbox"] ~ .pretty-checkbox {
		display: inline-block;
		height: 1.5rem;
		width: 1.5rem;
		border: 3px solid #000;
		vertical-align: middle;
		cursor: pointer;
		margin-right: 0.45rem;
		position: relative;
	}

	input[type="checkbox"]:hover ~ .pretty-checkbox {
		border-color: #32cd32;
	}

	input[type="checkbox"]:checked ~ .pretty-checkbox {
		border-color: #32cd32;
	}

	input[type="checkbox"]:disabled ~ .pretty-checkbox {
		border-color: #ccc;
	}

	input[type="checkbox"]:disabled:hover ~ .pretty-checkbox {
		border-color: #ddd;
	}


	input[type="checkbox"]:checked ~ .pretty-checkbox:after, input[type="checkbox"]:checked ~ .pretty-checkbox:before {
		content: " ";
		display: block;
		width: 1rem;
		height: 0.35rem;
		background-color: #000;
		position: absolute;
		top: 10px;
		left: -5px;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	input[type="checkbox"]:checked ~ .pretty-checkbox:after {
		top: 4px;
		left: 2px;
		width: 1.5rem;
		-webkit-transform: rotate(-45deg);
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		transform: rotate(-53deg);
	}

.margin-bottom {
	margin-bottom: 10px;
}

.user-form-wrap table tr th {
	width: 200px;
}

.users-wrap table .col-parent_id {
	padding: 0px;
}

	.users-wrap table .col-parent_id .parent-select {
		padding: 8px;
		-ms-text-overflow: ellipsis;
		text-overflow: ellipsis;
	}

select[style*="display: none"] + .select2 {
	display: none;
}

.form-inline select {
	width: auto;
}

.card {
	margin-bottom: 20px;
}

	.card .card-header {
		background-color: #152864;
		font-size: 17px;
		border-top-left-radius: 3px;
		border-top-right-radius: 3px;
		padding: 7px 20px;
		font-weight: bold;
		color: #fff;
	}

	.card .card-body {
		padding: 15px;
		background-color: #f5f5f8; /*  rgba(63, 180, 152, 0.1) */
		border-bottom-left-radius: 3px;
		border-bottom-right-radius: 3px;
	}

.form-group {
	margin-bottom: 15px;
}
