/**
 * This file is part of OpenMediaVault.
 *
 * @license   http://www.gnu.org/licenses/gpl.html GPL Version 3
 * @author    Volker Theile <volker.theile@openmediavault.org>
 * @copyright Copyright (c) 2009-2018 Volker Theile
 *
 * OpenMediaVault is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * any later version.
 *
 * OpenMediaVault is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with OpenMediaVault. If not, see <http://www.gnu.org/licenses/>.
 */

/******************************************************************************/
/* Corporate colors
/* default:     #98b7cf
/* darker:      #829bad
/* more darker: #6c8191
/******************************************************************************/

/******************************************************************************/
/* Common pages                                                               */
/******************************************************************************/
.login-page .product-logo,
.shutdown-page .product-logo,
.error-page .product-logo {
	position: absolute;
	width: 330px;
	height: 42px;
	right: 20px;
	bottom: 20px;
	background: url("/images/header_logo.png");
	background: url("/images/header_logo.svg"), none;
	background-size: 100% 100%;
	background-attachment: scroll;
	background-repeat: no-repeat;
	background-color: transparent;
	background-position: bottom right;
}

/******************************************************************************/
/* Login page                                                                 */
/******************************************************************************/
.login-page {
	background: #98b7cf;
}
/******************************************************************************/
/* Shutdown page                                                              */
/******************************************************************************/
.shutdown-page {
	background: #98b7cf;
}
.shutdown-page .shutdown-icon {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	right: 0px;
	background: url("/images/shutdown_64.png");
	background: url("/images/shutdown_64.svg"), none;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: transparent;
	background-position: center;
}
/******************************************************************************/
/* 404 page                                                                   */
/******************************************************************************/
.error-page {
	font-family: "Open Sans", sans-serif;
    font-size: 14px;
	background: #98b7cf;
	color: #ffffff;
}
.error-page hr {
	border: none;
	color: #ffffff;
	background-color: #FFFFFF;
	height: 1px;
}
.error-page .error-icon {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	right: 0px;
	background: url("/images/error.png");
	background: url("/images/error.svg"), none;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-color: transparent;
	background-position: center;
	background-size: 64px;
}
/******************************************************************************/
/* Workspace page                                                             */
/******************************************************************************/
a {
	color: #6c8191; /* more darker */
}
div#header {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	height: 80px;
	background: #98b7cf; /* #475668, #98b7cf, #3C404B */
}
div#headerlogo {
	float: left;
	width: 330px;
	height: 42px;
	margin-top: 20px;
	margin-left: 20px;
	background: url("/images/header_logo.png");
	background: url("/images/header_logo.svg"), none;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-color: transparent;
	background-position: center left;
}
div#headerrlogo {
	float: right;
	height: 100%;
	width: 362px;
	background-image: url("/images/header_rlogo.png");
	display: none;
}
/******************************************************************************/
/* Globals                                                                    */
/******************************************************************************/
.x-monospaced {
	font-family: monospace;
}
.x-text-center {
	text-align: center;
}
/******************************************************************************/
/* Windows */
.omv-window .x-toolbar-footer .x-btn.x-btn-disabled {
	/* Show the 'not-allowed' cursor for disabled buttons in the footer */
	/* toolbar. These are for example the 'OK' or 'Cancel' buttons. */
	cursor: not-allowed;
	pointer-events: auto;
}
/******************************************************************************/
/* Tooltip - Default */
.x-tip-default {
	border-color: #2f343f;
	background-color: #2f343f;
	box-shadow: none !important;
}
.x-tip-body-default {
	color: #fff;
}
/* Tooltip - Invalid form field */
.x-tip-form-invalid {
	border-color: #ff3b30;
	background-color: #ff3b30;
	box-shadow: none !important;
}
.x-tip-body-form-invalid {
	filter: invert(100%);
	-webkit-filter: invert(100%);
	-moz-filter: invert(100%);
	-o-filter: invert(100%);
	-ms-filter: invert(100%);
	color: #000;
	background-image: url("../images/exclamation.png");
	background-image: url("../images/exclamation.svg"), none;
	background-position: 3px center;
	padding: 6px 3px 0px 25px;
}
/* Tip toolbar */
.x-toolbar-tip {
	background: #ffeb99;
}
/******************************************************************************/
/* Configuration activation toolbar */
.x-toolbar-applycfg {
	background: #ffeb99;
	background-image: none;
}
/******************************************************************************/
/* Loadmask */
.x-mask.x-focus {
	border-color: #98b7cf;
}
.x-mask-msg {
	padding: none;
	background: #2f343f;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	border-style: solid;
	border-width: 1px;
	border-color: #2f343f;
}
.x-mask-msg-inner {
	padding: 0 5px;
	border-style: solid;
	border-width: 0px;
	background-color: #2f343f;
	color: #fff;
}
.x-mask-msg-text {
	padding: 5px 5px 5px 20px;
	background-image: url("/images/loading.gif");
	background-repeat: no-repeat;
	background-position: 0 center;
}
/******************************************************************************/
/* Meditation message box */
.x-message-box-guru {
	width: 100%;
	background-color: #000000;
	padding: 7px;
}
.x-message-box-guru-body {
	padding: 12px 0px 12px 0px;
	border: solid 6px #ff0000;
	color: #f72000;
	font-family: courier, "Courier New", monospace;
	font-weight: bold;
	font-size: large;
	text-align: center;
	-webkit-animation: x-message-box-guru-border-flash 2s infinite;
	-moz-animation: x-message-box-guru-border-flash 2s infinite;
	-o-animation: x-message-box-guru-border-flash 2s infinite;
	animation: x-message-box-guru-border-flash 2s infinite;
}
@keyframes x-message-box-guru-border-flash {
	0% {
		border-color: #ff0000;
	}
	50% {
		border-color: #ff0000;
	}
	51% {
		border-color: #000000
	}
	100% {
		border-color: #000000
	}
}
/******************************************************************************/
/* Invalid form fields */
.x-form-invalid-icon-default,
.x-form-invalid-under-default,
.x-form-invalid-icon-toolbar,
.x-form-invalid-under-toolbar {
	background-image: url("../images/exclamation.png");
	background-image: url("../images/exclamation.svg"), none;
}
.x-form-invalid-icon-default {
	background-repeat: no-repeat;
}
/* Mark read-only form fields */
.x-form-item-default.x-form-readonly input,
.x-form-item-default.x-form-readonly textarea {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=30);
	opacity: 0.3;
}
/* Customize textarea fields */
.x-form-textarea-monospaced textarea {
	font-family: monospace;
	font-size: 11px;
	padding: 0;
}
/* Field info text */
.x-form-fieldinfo {
	font-size: 11px;
	color: #333333;
	line-height: 14px;
}
/* Form grid field */
.x-form-invalid .x-form-gridfield-body .x-grid {
	border: 1px solid #cc3300;
}
/******************************************************************************/
/* Grid columns */
.x-grid-cell-booleaniconcolumn,
.x-grid-cell-iconcolumn {
	background-repeat: no-repeat;
	background-position: center;
}
.x-grid-cell-booleaniconcolumn-yesno-true,
.x-grid-cell-booleaniconcolumn-yes {
	background-image: url("../images/yes.png");
	background-image: url("../images/yes.svg"), none;
}
.x-grid-cell-booleaniconcolumn-yesno-false,
.x-grid-cell-booleaniconcolumn-no {
	background-image: url("../images/no.png");
	background-image: url("../images/no.svg"), none;
}
.x-grid-cell-booleaniconcolumn-led-blue,
.x-grid-cell-iconcolumn-led-blue {
	background-image: url("../images/led_blue.png");
	background-image: url("../images/led_blue.svg"), none;
}
.x-grid-cell-booleaniconcolumn-enabled-false,
.x-grid-cell-booleaniconcolumn-led-false,
.x-grid-cell-booleaniconcolumn-led-gray,
.x-grid-cell-iconcolumn-led-gray {
	background-image: url("../images/led_gray.png");
	background-image: url("../images/led_gray.svg"), none;
}
.x-grid-cell-booleaniconcolumn-enabled-true,
.x-grid-cell-booleaniconcolumn-led-true,
.x-grid-cell-booleaniconcolumn-led-green,
.x-grid-cell-iconcolumn-led-green {
	background-image: url("../images/led_green.png");
	background-image: url("../images/led_green.svg"), none;
}
.x-grid-cell-booleaniconcolumn-led-red,
.x-grid-cell-iconcolumn-led-red {
	background-image: url("../images/led_red.png");
	background-image: url("../images/led_red.svg"), none;
}
.x-grid-cell-booleaniconcolumn-switch-true,
.x-grid-cell-booleaniconcolumn-switch-on {
	background-image: url("../images/switch_on.png");
	background-image: url("../images/switch_on.svg"), none;
}
.x-grid-cell-booleaniconcolumn-switch-false,
.x-grid-cell-booleaniconcolumn-switch-off {
	background-image: url("../images/switch_off.png");
	background-image: url("../images/switch_off.svg"), none;
}
.x-grid-cell-usergroupiconcolumn {
	background-repeat: no-repeat;
	background-position: center;
	background-size: 16px 16px;
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	opacity: 0.7;
}
.x-grid-cell-usergroupiconcolumn-user {
	background-image: url("../images/user.png");
	background-image: url("../images/user.svg"), none;
}
.x-grid-cell-usergroupiconcolumn-group {
	background-image: url("../images/group.png");
	background-image: url("../images/group.svg"), none;
}
.x-grid-cell-booleaniconcolumn-rj45-true {
	background-image: url("../images/rj45_yes.png");
	background-image: url("../images/rj45_yes.svg"), none;
}
.x-grid-cell-booleaniconcolumn-rj45-false {
	background-image: url("../images/rj45_no.png");
	background-image: url("../images/rj45_no.svg"), none;
}
/******************************************************************************/
/* Grid checkbox column */
.x-grid-checkcolumn-cell-inner :focus {
	outline: 0px;
}
.x-grid-cell.x-selmodel-column {
	vertical-align: middle;
}
/******************************************************************************/
/* Button */
.x-btn-icon-el {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	opacity: 0.7;
}
.x-btn-icon-16x16 {
	background-size: 16px 16px;
}
/******************************************************************************/
/* Checkbox */
.x-form-cb-default {
	margin-top: 8px;
}
.x-form-checkbox-default,
.x-form-radio-default {
	width: 32px;
	height: 16px;
}
.x-form-cb-label-default.x-form-cb-label-after {
	padding-left: 37px;
}
.x-form-checkbox-default:before,
.x-form-cb-checked .x-form-checkbox-default:before {
	content: none;
}
.x-form-cb-checked .x-form-checkbox-default {
	background-position: left;
	background-image: url("../images/switch_on.png");
	background-image: url("../images/switch_on.svg"), none;
}
.x-form-checkbox-default {
	background-position: left;
	background-image: url("../images/switch_off.png");
	background-image: url("../images/switch_off.svg"), none;
}
.x-form-checkbox-focus.x-form-checkbox-default,
.x-form-cb-checked .x-form-checkbox-focus.x-form-checkbox-default {
	background-position: left;
}
/******************************************************************************/
/* Tabs */
.x-tab-bar-default {
	background-color: #98b7cf;
}
.x-tab-invalid {
	border: 1px solid #cc3300;
}
/******************************************************************************/
/* Progress bar */
.x-progress-bar {
	background-color: #b3b3b3;
	background-image: none;
	border-top-color: #b3b3b3;
	border-bottom-color: #b3b3b3;
	border-right-color: #b3b3b3;
}
.x-progress-default {
	border-width: 0px; /* Flat design */
}
.x-progress-default .x-progress-bar-default {
	background-color: #4cd964; /* Green */
	background-image: none; /* Flat design */
}
.x-progress-warning .x-progress-bar-default {
	background-color: #ff3b30; /* Red */
}
/******************************************************************************/
/* Menu */
.x-menu-item-icon {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	opacity: 0.7;
}
.x-menu-item-icon-16x16 {
	background-size: 16px 16px;
}
/******************************************************************************/
/* Workspace header */
.x-workspace-header {
}
/******************************************************************************/
/* Workspace navigation toolbar */
.x-workspace-navigation-toolbar {
}
/******************************************************************************/
/* Workspace dashboard */
.x-workspace-dashboard-widget-icon {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	opacity: 0.7;
	background-size: 16px 16px;
}
/******************************************************************************/
/* Workspace node view */
.x-workspace-node-view {
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
	opacity: 0.7;
}
.x-workspace-node-view-category {
}
.x-workspace-node-view-category-header {
	border-bottom: 1px solid #d8d8d8;
	font-weight: bold;
	font-size: small;
}
.x-workspace-node-view-category-header .x-item-selected {
	background-color: #e0e0e0;
}
.x-workspace-node-view-category-header .x-item-over {
	background-color: #efefef;
	cursor: pointer;
}
.x-workspace-node-view-category-header .thumb-wrap {
	padding: 5px;
}
.x-workspace-node-view-category-items .thumb-wrap .thumb {
	padding: 5px;
	padding-bottom: 0;
}
.x-workspace-node-view-category-items .thumb-wrap .thumb img {
	height: 32px;
	width: 32px;
}
.x-workspace-node-view-category-items .thumb-wrap {
	float: left;
	padding: 5px;
	text-align: center;
	width: 96px;
	height: 80px;
}
.x-workspace-node-view-category-items .thumb-wrap span {
	display: block;
	overflow: visible;
	word-break: break-word; /* Non standard for webkit */
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}
.x-workspace-node-view-category-items .x-item-selected {
	background-color: #e0e0e0;
}
.x-workspace-node-view-category-items .x-item-over {
	background-color: #efefef;
	cursor: pointer;
}
/******************************************************************************/
/* Workspace node tree */
.x-workspace-node-tree .x-grid-row-over .x-grid-td {
	cursor: pointer;
}
.x-workspace-node-tree .x-tree-icon-parent,
.x-workspace-node-tree .x-tree-icon-parent-expanded {
	width: 0px;
	visibility: hidden;
}
.x-workspace-node-tree.x-tree-lines .x-tree-elbow-line {
	visibility: hidden;
}
/*
@supports ((filter: invert()) or (-webkit-filter: invert())) {
	.x-workspace-node-tree .x-grid-body {
		background: #98b7cf;
	}
	.x-workspace-node-tree .x-grid-cell {
		background-color: transparent;
	}
	.x-workspace-node-tree .x-tree-node-text {
		color: white;
	}
	.x-workspace-node-tree .x-tree-icon, .x-tree-elbow-img {
		opacity: 1;
		filter: invert(100%);
		-webkit-filter: invert(100%);
	}
	.x-workspace-node-tree .x-grid-tree-node-leaf .x-grid-cell {
		background-color: rgba(255,255,255,0.1);
	}
	.x-workspace-node-tree .x-grid-row-focused .x-grid-td,
	.x-workspace-node-tree .x-grid-row-over .x-grid-td {
		background-color: rgba(0,0,0,0.2);
	}
}
*/
/******************************************************************************/
/* About box */
.x-box-aboutbox {
	margin: 15px;
	text-align: left;
	padding: 5px 10px;
	background-color: #eee;
	font-family: "Myriad Pro","Myriad Web","Tahoma","Helvetica","Arial",sans-serif;
	color: #393939;
	border-radius: 4px;
}
.x-box-aboutbox a {
	text-decoration: none !important;
	font-style: italic;
	color:#444444;
}
/******************************************************************************/
/* RRD graph panel */
.x-panel-rrdgraph {
	margin: 10px 10px 10px 10px;
	text-align: center;
}
.x-panel-rrdgraph img {
	border: 0 none;
	font-size: 11px;
	margin: 1px 1px 1px 1px;
}
/******************************************************************************/
/* Bugfixes/Workarounds
/******************************************************************************/
/* Fix Chrome 56 render bug (EXTJS-23628) */
/* https://www.sencha.com/forum/showthread.php?335045-Text-field-heights-are-incorrect-and-text-is-misaligned-in-Chrome-56&p=1171870&viewfull=1#post1171870 */
.x-webkit .x-form-text {
	height: 100% !important;
}
.x-webkit :not(.x-form-textarea-body) > .x-form-trigger-wrap {
	height: initial;
}