/**
 * Windows Style Sheet
 * Backend Module
 *
 * Copyright (c) 2013. by Way2CU
 * Author: Mladen Mijatov
 */

@keyframes title_animation {
	from { background-position: 0px 0px; }
	to { background-position: 10px 0px; }
}

@-webkit-keyframes title_animation {
	from { background-position: 0px 0px; }
	to { background-position: 10px 0px; }
}

div.window {
	display: block;
	position: absolute;

	visibility: hidden;
	opacity: 0;

	margin-top: 0px;
	border: 1px solid #595959;
	background-color: #EFEFEF;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);

	transition: top 0.5s, left 0.5s, opacity 0.5s;
	-webkit-transform: translateZ(0);
}

body.rtl div.window {
	box-shadow: -2px 2px 5px rgba(0, 0, 0, 0.4);
}

div.window.focused {
	border-color: #e74c3c;
}

div.window.visible {
	visibility: visible;
	opacity: 1;
}

div.window > div.container {
	display: block;
	overflow: hidden;

	transition: max-height 1s;
}

div.window > div.container,
div.window.loading > div.container {
	max-height: 0px;
}

div.window.loaded > div.container {
	max-height: 1000px;
}

/**
 * Window Border
 */
div.window div.title {
	display: block;

	position: relative;

	background-color: #595959;

	color: #595959;
	font-size: 1.1em;
	font-weight: 700;
	line-height: 100%;

	transition: all 0.3s;
}

div.window.loaded div.title {
	border-bottom: 1px solid #595959;
}

div.window.focused div.title {
	border-color: #e74c3c;
	background-color: #e74c3c;
	color: #e74c3c;
}

div.window.loading div.title {
	background-image: url(../images/loading.png);
	background-repeat: repeat-both;

	animation: title_animation 0.5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	-webkit-animation: title_animation 0.5s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-iteration-count: infinite;
}

div.window div.title div.wrap {
	display: inline-block;
	min-height: 1em;

	padding: 7px;
	padding-left: 32px;
	padding-right: 30px;

	background-image: linear-gradient(45deg, white, white calc(100% - 1.5em), transparent calc(100% - 1.5em), transparent);
	background-position: right top;
	background-size: 100% 30px;
	background-repeat: no-repeat;
}

body.rtl div.window div.title div.wrap {
	padding-left: 30px;
	padding-right: 32px;
	background-image: linear-gradient(-45deg, white, white calc(100% - 1.5em), transparent calc(100% - 1.5em), transparent);
}

div.window div.title span.icon {
	display: block;
	width: 24px;
	height: 24px;

	position: absolute;
	left: 3px;
	top: 50%;

	margin-top: -12px;

	background-image: url(../../backend/images/modules.svg);
	background-position: 0px 0px;
	background-repeat: no-repeat;
	background-size: 48px 24px;

	transition: all 0.3s;
}

body.rtl div.window div.title span.icon {
	left: auto;
	right: 3px;
}

div.window.focused div.title span.icon {
	background-position: -24px 0px;
}

div.window div.title a.close_button {
	display: block;
	width: 1em;
	height: 1em;
	padding: 7px;

	position: absolute;
	right: 0px;
	top: 0px;

	border-radius: 1px;
	background-image: url(../images/close_button.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 10px;
	color: white;

	transition: all 0.3s;
}

body.rtl div.window div.title a.close_button {
	right: auto;
	left: 0px;
}

div.window div.title a.close_button:hover {
	background-color: #4D4D4D;
}

div.window.focused div.title a.close_button:hover {
	background-color: #AC382E;
}

div.window div.content {
	display: block;
	padding: 7px;

	border: 1px solid #CBCBCB;
	border-top: none;
	background-color: #EFEFEF;
}

div.window div.content fieldset {
	display: block;

	margin: 0px;
	margin-bottom: 10px;

	border: 1px solid #d0d0d0;
}

div.window div.content fieldset legend {
	color: #b0b0b0;
}

div.window div.content div.box fieldset {
	margin-bottom: 5px;
}

div.window div.content label {
	display: block;
	margin-bottom: 10px;
}

div.window div.content label.horizontal {
	display: inline-block;
	margin-right: 20px;
}

body.rtl div.window div.content label.horizontal {
	margin-left: 20px;
	margin-right: 0px;
}

div.window div.content label.horizontal:last-of-type,
body.rtl div.window div.content label.horizontal:last-of-type {
	margin-left: 0px;
	margin-right: 0px;
}

div.window div.content label span {
	display: block;
	margin-bottom: 2px;
}

div.window div.content label span small {
	color: #7F7F7F;
}

div.window div.content label a {
	color: #1A60A4;
	text-decoration: none;
}

div.window div.content label a:hover {
	text-decoration: underline;
}

div.window div.content div.scrollable_list {
	margin-bottom: 5px;
}

div.window div.content div:last-child,
div.window div.content label:last-child,
div.window div.content fieldset:last-child {
	margin-bottom: 0px;
}

div.window div.content select,
div.window div.content input,
div.window div.content textarea {
	margin: 0px;
	padding: 5px;

	border: 1px solid #999999;
	outline: 0px;
	background-color: #ffffff;

	color: #444444;
	font-size: 1em;
	font-family: Ubuntu, sans-serif, Arial, Tahoma;

	transition: all 0.3s;
}

div.window div.language_selector:hover ~ * input.multi-language,
div.window div.language_selector:hover ~ * textarea.multi-language {
	border-color: blue;
	box-shadow: inset blue 0px 0px 3px;
}

div.window div.content select.ltr,
div.window div.content input.ltr,
div.window div.content textarea.ltr {
	direction: ltr;
}

div.window div.content input[type=radio],
div.window div.content input[type=checkbox] {
	position: relative;
	bottom: -1px;

	margin-right: 3px;
	padding: 0px;

	float: left;
	clear: both;
}

body.rtl div.window div.content input[type=radio],
body.rtl div.window div.content input[type=checkbox] {
	margin-left: 3px;
	margin-right: 0px;
	float: right;
}

div.window div.content input[type=color] {
	padding: 0px;
	vertical-align: middle;
}

div.window div.content textarea {
	width: 100%;
	resize: none;
}

div.window div.content label.radio span,
div.window div.content label.checkbox span {
	display: inline-block;
}

div.window div.content label.inline span {
	display: inline-block;
	margin-right: 5px;
}

body.rtl div.window div.content label.inline span {
	margin-left: 5px;
	margin-right: 0px;
}

div.window div.content input.code,
div.window div.content textarea.code {
	font-family: Ubuntu Mono;
}

div.window div.content input.code.ltr,
div.window div.content textarea.code.ltr {
	direction: ltr !important;
}

div.window div.content input:focus,
div.window div.content select:focus,
div.window div.content textarea:focus {
	border: 1px solid #345DC9;
	color: #000000;

	transition: all 0.3s;
}

div.window button {
	display: inline-block;
	min-width: 100px;

	margin: 0px;
	margin-left: 5px;
	margin-right: 5px;
	padding: 10px;
	padding-left: 15px;
	padding-right: 15px;

	border: 1px solid #b0b0b0;
	border-radius: 2px;
	background-color: #cccccc;
	background-image: linear-gradient(0deg, #d5d5d5, #ffffff 90%);

	color: #333333;
	font-size: 1em;
	font-family: Ubuntu, sans-serif, Arial, Tahoma;
	font-weight: normal;

	transition: all 0.3s;
}

div.window button:focus {
	outline: none;
}

div.window button:hover {
	border-color: #e74c3c;

	transition: all 0.3s;
}

div.window button:active {
	background-image: linear-gradient(0deg, rgb(250,250,250) 0%, rgb(204,204,204) 100%);
}

div.window button:disabled {
	background-color: #cccccc;
	background-image: none;
}

div.window label button {
	min-width: 0px;
	padding: 3px;
	padding-left: 10px;
	padding-right: 10px;
}

div.window div.button_bar {
	display: block;
	width: calc(100% + 14px);

	position: relative;
	left: -7px;
	top: 7px;

	padding-top: 10px;
	padding-bottom: 10px;

	background-color: #D4D4D4;
	text-align: center;
}

body.rtl div.window div.button_bar {
	left: auto;
	right: -7px;
}

div.window hr,
div.dialog hr {
	margin-top: 15px;
	margin-bottom: 15px;

	border: 0px;
	border-bottom: 1px solid #dadada;
}

div.dialog div.scrollable_list,
div.window div.scrollable_list {
	display: block;
}

div.dialog div.scrollable_list div.list_header,
div.window div.scrollable_list div.list_header {
	display: block;
	padding: 5px;

	border: 1px solid #B8B8B8;
	border-bottom: 0px;
	border-radius: 4px 4px 0px 0px;
	background-color: #E5E5E5;
}

div.dialog div.scrollable_list .list_content,
div.window div.scrollable_list .list_content {
	display: block;
	min-height: 100px;

	overflow-y: scroll;

	border: 1px solid #B8B8B8;
	border-top: 0px;
	background-color: #FFFFFF;
}

div.dialog div.scrollable_list .list_content .list_item,
div.window div.scrollable_list .list_content .list_item {
	display: block;
	padding: 5px;
}

div.dialog div.scrollable_list .list_content .list_item.group_title,
div.window div.scrollable_list .list_content .list_item.group_title {
	margin-top: 5px;
	padding: 5px;

	border-bottom: 1px solid #F0F0F0;

	color: #C0C0C0;
	text-align: center
}

div.dialog div.scrollable_list .list_content .list_item .details,
div.window div.scrollable_list .list_content .list_item .details {
	display: none;
	padding: 5px;
}

div.dialog div.scrollable_list .list_content .list_item .details.visible,
div.window div.scrollable_list .list_content .list_item .details.visible {
	display: block;
}

div.dialog div.scrollable_list .list_content .list_item:hover,
div.window div.scrollable_list .list_content .list_item:hover {
	background-color: #F5F5F5;
	cursor: default;
}

div.dialog div.scrollable_list .column,
div.window div.scrollable_list .column {
	display: inline-block;
	vertical-align: top;
	margin-right: 3px;
}

div.dialog div.scrollable_list .column a,
div.window div.scrollable_list .column a {
	display: inline-block;
	vertical-align: top;

	position: relative;

	margin-top: -4px;
	margin-bottom: -4px;
	padding: 4px;

	background-color: #ecf0f1;

	color: #595959;
	text-decoration: none;
}

div.dialog div.scrollable_list .column a:hover,
div.window div.scrollable_list .column a:hover {
	background-color: #595959;
	color: #FFFFFF;
}

/**
 * Language Selector
 */
div.window div.language_selector {
	display: inline-block;
	min-width: 20px;
	min-height: 20px;

	margin-bottom: 10px;

	border: 1px solid #B8B8B8;
	border-radius: 2px;
	background-color: #D4D4D4;

	text-align: center;
}

div.window div.language_selector.loading {
	background-image: url(../../backend/images/title_animation.gif);
	background-position: center center;
	background-repeat: no-repeat;
}

div.window div.language_selector span {
	display: inline-block;
	padding: 5px;
	border-radius: 1px;
	line-height: 100%;
}

div.window div.language_selector span:hover {
	background-color: #E6E6E6;
}

div.window div.language_selector span.active {
	background-color: white;
}

/**
 * Component Toolbar
 */
div.window div.toolbar {
	display: block;
	height: 22px;

	margin: 0px;
	padding: 2px;

	border: 1px solid #999999;
	border-bottom: 0px;
	background-color: white;
	background-image: url(../../backend/images/toolbar_back.png);
	background-position: top left;
	background-repeat: repeat-x;

	transition: all 0.3s;
}

div.window div.toolbar.active {
	border-color: #345DC9;

	transition: all 0.3s;
}

div.window div.toolbar a.button {
	display: block;
	float: left;

	padding: 3px;
	font-size: 0px;

	transition: all 0.3s;
}

body.rtl div.window div.toolbar a.button {
	float: right;
}

div.window div.toolbar span.separator {
	display: inline-block;
	width: 9px;
	height: 100%;

	float: left;

	background-image: url(../../backend/images/toolbar_separator.png);
	background-position: center top;
	background-repeat: no-repeat;
}

body.rtl div.window div.toolbar span.separator {
	float: right;
}

div.window div.toolbar a.button:hover {
	background-color: #e74c3c;
}

div.window div.toolbar a.button img {
	border: 0px;
}

/**
 * Modal Dialog
 */
div.dialog {
	display: block;
	width: 100%;
	height: 100%;

	position: absolute;
	top: 0px;
	left: 0px;

	background-color: rgba(0, 0, 0, 0.7);
	z-index: 5000;
}

div.dialog div.container {
	display: block;
	min-width: 50px;
	min-height: 30px;

	position: absolute;

	border: 1px solid white;
	background-color: #efefef;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);

	overflow: hidden;
}

div.dialog div.container.loading {
	background-image: url(../../backend/images/title_animation.gif);
	background-position: center center;
	background-repeat: no-repeat;
}

div.dialog div.container div.title_bar {
	display: block;

	padding: 7px;
	background-color: #e74c3c;

	font-size: 1.1em;
	font-weight: 700;
	line-height: 100%;
}

div.dialog div.container div.title_bar div.title {
	display: block;

	padding-left: 2px;
	padding-right: 2px;

	color: white;
	overflow: hidden;
}

div.dialog div.container div.title_bar a.close_button {
	display: block;
	width: 1em;
	height: 1em;
	padding: 7px;

	position: absolute;
	right: 0px;
	top: 0px;

	border-radius: 1px;
	background-image: url(../images/close_button.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: 10px;
	color: white;

	transition: all 0.3s;
}

body.rtl div.dialog div.container div.title_bar a.close_button {
	right: auto;
	left: 0px;
}

div.dialog div.container div.title_bar a.close_button:hover {
	background-color: #ac382e;
}

div.dialog div.container div.content {
	display: block;

	padding: 5px;
	overflow-y: auto;
}

/**
 * Floated boxes
 */
div.window div.box {
	display: inline-block;
	vertical-align: top;
}

div.window div.box.left {
	margin-right: 7px;
}

body.rtl div.window div.box.left {
	margin-left: 7px;
	margin-right: 0px;
}

/**
 * Login Window
 */

div#login_window div.message {
	display: block;
	margin-bottom: 15px;
}

div#login_window div.error_message {
	display: block;

	margin-bottom: 15px;
	padding: 3px;
	padding-left: 5px;
	padding-right: 5px;

	border-radius: 5px;
	background-color: #CC5858;

	color: yellow;
}

div#login_window div.icon {
	display: block;
	width: 50px;

	padding-right: 5px;
	float: left;

	text-align: center;
}

body.rtl div#login_window div.icon {
	padding-right: 0px;
	padding-left: 5px;
	float: right;
}

div#login_window div.controls {
	display: block;
	width: 270px;

	float: left;
}

body.rtl div#login_window div.controls {
	float: right;
}

div#login_window div.input_controls {
	display: block;

	padding-left: 25px;
}

body.rtl div#login_window div.input_controls {
	padding-left: 0px;
	padding-right: 25px;
}

div#login_window div.input_controls input {
	direction: ltr;
}

div#login_window div.input_controls label.captcha input {
	display: block;
	width: 116px;
}

div#login_window div.input_controls label.captcha img {
	border: 1px solid #999999;
}

/**
 * Markdown Preview
 */
div.window div.markdown_preview {
	display: block;
	height: 100%;

	margin: 0px;
	padding: 0px;

	overflow-y: scroll;

	border: 1px solid #999999;
	background-color: white;
}

/**
 * Window Menu
 */
div.window div.main_menu {
	display: block;
	width: calc(100% + 14px);

	position: relative;
	left: -7px;
	top: -7px;

	margin: 0px;
	padding: 0px;

	border-bottom: 1px solid #d5d5d5;
	background-color: #d5d5d5;

	color: #1A1A1A;
	font-size: 1em;
	font-weight: normal;
}

body.rtl div.window div.main_menu {
	left: auto;
	right: -7px;
}

div.window div.main_menu a {
	display: inline-block;

	padding: 7px;

	outline: none;
	color: #595959;
	text-decoration: none;

	transition: all 0.2s;
}

div.window div.main_menu a:hover {
	background-image: linear-gradient(180deg, #d5d5d5 0%, #ffffff 100%);
}

div.window div.main_menu div.floated {
	display: block;
	float: right;
}

body.rtl div.window div.main_menu div.floated {
	float: left;
}

div.window div.main_menu label {
	display: inline-block;

	margin: 0px;
	padding: 0px;
	padding-left: 5px;
	padding-right: 5px;
}

div.window div.main_menu select,
div.window div.main_menu input {
	margin: 3px;
	padding: 2px;

	border: 1px solid #929292;
	background-color: #d5d5d5;

	color: black;
}

div.window div.window_message {
	display: block;

	padding: 10px;
	padding-top: 20px;
	padding-bottom: 20px;

	border: 1px solid #d0d0d0;
	border-radius: 3px;
	background-color: white;

	text-align: center;
}

/**
 * Target IFrames
 */
div.window div.content iframe.target {
	display: none;
}

/**
 * Tooltips
 */
[data-tooltip] {
	position: relative;
}

[data-tooltip]:after {
	display: block;
	width: 70%;

	opacity: 0;
	visibility: hidden;

	position: absolute;
	left: 15px;
	top: 100%;
	margin-top: 42px;

	padding: 4px;
	padding-left: 5px;
	padding-right: 5px;

	content: attr(data-tooltip);
	z-index: 10000;

	border-radius: 3px;
	background-color: rgba(50, 50, 50, 0.9);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);

	color: white;

	transition-delay: 0s;
	transition-duration: 0.3s;
	transition-property: all;
}

body.rtl [data-tooltip]:after {
	left: auto;
	right: 15px;
}

[data-tooltip]:before {
	display: block;
	width: 0px;
	height: 0px;

	opacity: 0;
	visibility: hidden;

	position: absolute;
	left: 30px;
	top: 100%;
	margin-top: 30px;

	border: 6px solid transparent;
	border-bottom-color: rgba(50, 50, 50, 0.9);

	content: '';
	font-size: 0px;
	z-index: 10000;

	transition-delay: 0s;
	transition-duration: 0.3s;
	transition-property: all;
}

body.rtl [data-tooltip]:before {
	left: auto;
	right: 30px;
}

[data-tooltip]:hover:after {
	visibility: visible;
	opacity: 1;
	margin-top: 12px;

	transition-delay: 0.5s;
}

[data-tooltip]:hover:before {
	visibility: visible;
	opacity: 1;
	margin-top: 0px;

	transition-delay: 0.5s;
}

/**
 * Video IFrame
 */
iframe.video {
	border: 0px;
}