/*! jQuery UI - v1.10.3 - 2013-10-28
* http://jqueryui.com
* Includes: jquery.ui.core.css, jquery.ui.resizable.css, jquery.ui.selectable.css, jquery.ui.accordion.css, jquery.ui.autocomplete.css, jquery.ui.button.css, jquery.ui.datepicker.css, jquery.ui.dialog.css, jquery.ui.menu.css, jquery.ui.progressbar.css, jquery.ui.slider.css, jquery.ui.spinner.css, jquery.ui.tabs.css, jquery.ui.tooltip.css, jquery.ui.theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=segoe%20ui%2C%20verdana%2C%20arial%2C%20sans-serif&fwDefault=bold&fsDefault=11px&cornerRadius=2px&bgColorHeader=%23cccccc&bgTextureHeader=highlight_soft&bgImgOpacityHeader=75&borderColorHeader=%23aaaaaa&fcHeader=%23222222&iconColorHeader=%23222222&bgColorContent=%23ffffff&bgTextureContent=flat&bgImgOpacityContent=75&borderColorContent=%23aaaaaa&fcContent=%23222222&iconColorContent=%23222222&bgColorDefault=%23e6e6e6&bgTextureDefault=glass&bgImgOpacityDefault=75&borderColorDefault=%23d3d3d3&fcDefault=%23555555&iconColorDefault=%23888888&bgColorHover=%23dadada&bgTextureHover=glass&bgImgOpacityHover=75&borderColorHover=%23999999&fcHover=%23212121&iconColorHover=%23454545&bgColorActive=%23ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=%23aaaaaa&fcActive=%23212121&iconColorActive=%23454545&bgColorHighlight=%23fbf9ee&bgTextureHighlight=glass&bgImgOpacityHighlight=55&borderColorHighlight=%23fcefa1&fcHighlight=%23363636&iconColorHighlight=%232e83ff&bgColorError=%23fef1ec&bgTextureError=glass&bgImgOpacityError=95&borderColorError=%23cd0a0a&fcError=%23cd0a0a&iconColorError=%23cd0a0a&bgColorOverlay=%23aaaaaa&bgTextureOverlay=flat&bgImgOpacityOverlay=0&opacityOverlay=30&bgColorShadow=%23aaaaaa&bgTextureShadow=flat&bgImgOpacityShadow=0&opacityShadow=30&thicknessShadow=8px&offsetTopShadow=-8px&offsetLeftShadow=-8px&cornerRadiusShadow=8px
* Copyright 2013 jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}


/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin-top: 2px;
	padding: .5em .5em .5em .7em;
	min-height: 0; /* support: IE7 */
}
.ui-accordion .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-noicons {
	padding-left: .7em;
}
.ui-accordion .ui-accordion-icons .ui-accordion-icons {
	padding-left: 2.2em;
}
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	position: absolute;
	left: .5em;
	top: 50%;
	margin-top: -8px;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-button {
	display: inline-block;
	position: relative;
	padding: 0;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	overflow: visible; /* removes extra width in IE */
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}
/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2.2em;
}
/* button elements seem to need a little more width */
button.ui-button-icon-only {
	width: 2.4em;
}
.ui-button-icons-only {
	width: 3.4em;
}
button.ui-button-icons-only {
	width: 3.7em;
}

/* button text element */
.ui-button .ui-button-text {
	display: block;
	line-height: normal;
}
.ui-button-text-only .ui-button-text {
	padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
	padding: .4em;
	text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
	padding-left: 2.1em;
	padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.ui-button {
	padding: .4em 1em;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon,
.ui-button-text-icon-primary .ui-icon,
.ui-button-text-icon-secondary .ui-icon,
.ui-button-text-icons .ui-icon,
.ui-button-icons-only .ui-icon {
	position: absolute;
	top: 50%;
	margin-top: -8px;
}
.ui-button-icon-only .ui-icon {
	left: 50%;
	margin-left: -8px;
}
.ui-button-text-icon-primary .ui-button-icon-primary,
.ui-button-text-icons .ui-button-icon-primary,
.ui-button-icons-only .ui-button-icon-primary {
	left: .5em;
}
.ui-button-text-icon-secondary .ui-button-icon-secondary,
.ui-button-text-icons .ui-button-icon-secondary,
.ui-button-icons-only .ui-button-icon-secondary {
	right: .5em;
}

/* button sets */
.ui-buttonset {
	margin-right: 7px;
}
.ui-buttonset .ui-button {
	margin-left: 0;
	margin-right: -.3em;
}

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month-year {
	width: 100%;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 49%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 21px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-se {
	width: 12px;
	height: 12px;
	right: -5px;
	bottom: -5px;
	background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-menu {
	list-style: none;
	padding: 2px;
	margin: 0;
	display: block;
	outline: none;
}
.ui-menu .ui-menu {
	margin-top: -3px;
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	padding: 0;
	width: 100%;
	/* support: IE10, see #8844 */
	list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.ui-menu .ui-menu-divider {
	margin: 5px -2px 5px -2px;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-menu-item a {
	text-decoration: none;
	display: block;
	padding: 2px .4em;
	line-height: 1.5;
	min-height: 0; /* support: IE7 */
	font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
	font-weight: normal;
	margin: -1px;
}

.ui-menu .ui-state-disabled {
	font-weight: normal;
	margin: .4em 0 .2em;
	line-height: 1.5;
}
.ui-menu .ui-state-disabled a {
	cursor: default;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item a {
	position: relative;
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: .2em;
	left: .2em;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	position: static;
	float: right;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("bundle/ui/images/animated-overlay.gif");
	height: 100%;
	filter: alpha(opacity=25);
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-slider {
	position: relative;
	text-align: left;
}
	.ui-slider .ui-slider-handle {
		position: absolute;
		z-index: 2;
		width: 1.9em;
		height: 1.9em;
		cursor: pointer;

	}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.65em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 22px;
}
.ui-spinner-button {
	width: 16px;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to overide default borders */
.ui-spinner a.ui-spinner-button {
	border-top: none;
	border-bottom: none;
	border-right: none;
}
/* vertical centre icon */
.ui-spinner .ui-icon {
	position: absolute;
	margin-top: -8px;
	top: 50%;
	left: 0;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}

/* TR overrides */
.ui-spinner .ui-icon-triangle-1-s {
	/* need to fix icons sprite */
	background-position: -65px -16px;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav li a {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active a,
.ui-tabs .ui-tabs-nav li.ui-state-disabled a,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading a {
	cursor: text;
}
.ui-tabs .ui-tabs-nav li a, /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active a {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
	-webkit-box-shadow: 0 0 5px #aaa;
	box-shadow: 0 0 5px #aaa;
}
body .ui-tooltip {
	border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: segoe ui, verdana, arial, sans-serif;
	font-size: 11px;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: segoe ui, verdana, arial, sans-serif;
	font-size: 1em;
}
.ui-widget-content {
	border: 1px solid #aaaaaa;
	background: #ffffff url(bundle/ui/images/ui-bg_flat_75_ffffff_40x100.png) 50% 50% repeat-x;
	color: #222222;
}
.ui-widget-content a {
	color: #222222;
}
.ui-widget-header {
	border: 1px solid #aaaaaa;
	background: #cccccc url(bundle/ui/images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x;
	color: #222222;
	font-weight: bold;
}
.ui-widget-header a {
	color: #222222;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {
	border: 1px solid #d3d3d3;
	background: #e6e6e6 url(bundle/ui/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
	font-weight: bold;
	color: #555555;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
	color: #555555;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #999999;
	background: #dadada url(bundle/ui/images/ui-bg_glass_75_dadada_1x400.png) 50% 50% repeat-x;
	font-weight: bold;
	color: #212121;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited {
	color: #212121;
	text-decoration: none;
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {
	border: 1px solid #aaaaaa;
	background: #ffffff url(bundle/ui/images/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
	font-weight: bold;
	color: #212121;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #212121;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #fcefa1;
	background: #fbf9ee url(bundle/ui/images/ui-bg_glass_55_fbf9ee_1x400.png) 50% 50% repeat-x;
	color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #cd0a0a;
	background: #fef1ec url(bundle/ui/images/ui-bg_glass_95_fef1ec_1x400.png) 50% 50% repeat-x;
	color: #cd0a0a;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #cd0a0a;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #cd0a0a;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70);
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35);
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url(bundle/ui/images/ui-icons_222222_256x240.png);
}
.ui-widget-header .ui-icon {
	background-image: url(bundle/ui/images/ui-icons_222222_256x240.png);
}
.ui-state-default .ui-icon {
	background-image: url(bundle/ui/images/ui-icons_888888_256x240.png);
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon {
	background-image: url(bundle/ui/images/ui-icons_454545_256x240.png);
}
.ui-state-active .ui-icon {
	background-image: url(bundle/ui/images/ui-icons_454545_256x240.png);
}
.ui-state-highlight .ui-icon {
	background-image: url(bundle/ui/images/ui-icons_2e83ff_256x240.png);
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url(bundle/ui/images/ui-icons_cd0a0a_256x240.png);
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-carat-1-n { background-position: 0 0; }
.ui-icon-carat-1-ne { background-position: -16px 0; }
.ui-icon-carat-1-e { background-position: -32px 0; }
.ui-icon-carat-1-se { background-position: -48px 0; }
.ui-icon-carat-1-s { background-position: -64px 0; }
.ui-icon-carat-1-sw { background-position: -80px 0; }
.ui-icon-carat-1-w { background-position: -96px 0; }
.ui-icon-carat-1-nw { background-position: -112px 0; }
.ui-icon-carat-2-n-s { background-position: -128px 0; }
.ui-icon-carat-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -64px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -64px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 2px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 2px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 2px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 2px;
}

/* Overlays */
.ui-widget-overlay {
	background: #aaaaaa url(bundle/ui/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
	opacity: .3;
	filter: Alpha(Opacity=30);
}
.ui-widget-shadow {
	margin: -8px 0 0 -8px;
	padding: 8px;
	background: #aaaaaa url(bundle/ui/images/ui-bg_flat_0_aaaaaa_40x100.png) 50% 50% repeat-x;
	opacity: .3;
	filter: Alpha(Opacity=30);
	border-radius: 8px;
}

/* Slider */
.slick-slider
{
    position: relative;

    display: block;
    box-sizing: border-box;

    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list
{
    position: relative;

    display: block;
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}

.slick-track
{
    position: relative;
    top: 0;
    left: 0;

    display: block;
    margin-left: auto;
    margin-right: auto;
}
.slick-track:before,
.slick-track:after
{
    display: table;

    content: '';
}
.slick-track:after
{
    clear: both;
}
.slick-loading .slick-track
{
    visibility: hidden;
}

.slick-slide
{
    display: none;
    float: left;

    height: 100%;
    min-height: 1px;
}
[dir='rtl'] .slick-slide
{
    float: right;
}
.slick-slide img
{
    display: block;
}
.slick-slide.slick-loading img
{
    display: none;
}
.slick-slide.dragging img
{
    pointer-events: none;
}
.slick-initialized .slick-slide
{
    display: block;
}
.slick-loading .slick-slide
{
    visibility: hidden;
}
.slick-vertical .slick-slide
{
    display: block;

    height: auto;

    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}

@charset 'UTF-8';
/* Slider */
.slick-loading .slick-list
{
    background: #fff url('bundle/slick/ajax-loader.gif') center center no-repeat;
}

/* Icons */
@font-face
{
    font-family: 'slick';
    font-weight: normal;
    font-style: normal;

    src: url('bundle/slick/fonts/slick.eot');
    src: url('bundle/slick/fonts/slick.eot?#iefix') format('embedded-opentype'), url('bundle/slick/fonts/slick.woff') format('woff'), url('bundle/slick/fonts/slick.ttf') format('truetype'), url('bundle/slick/fonts/slick.svg#slick') format('svg');
}
/* Arrows */
.slick-prev,
.slick-next
{
    font-size: 0;
    line-height: 0;

    position: absolute;
    top: 50%;

    display: block;

    width: 20px;
    height: 20px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);

    cursor: pointer;

    color: transparent;
    border: none;
    outline: none;
    background: transparent;
}
.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus
{
    color: transparent;
    outline: none;
    background: transparent;
}
.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before
{
    opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before
{
    opacity: .25;
}

.slick-prev:before,
.slick-next:before
{
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;

    opacity: .75;
    color: white;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-prev
{
    left: -25px;
}
[dir='rtl'] .slick-prev
{
    right: -25px;
    left: auto;
}
.slick-prev:before
{
    content: '←';
}
[dir='rtl'] .slick-prev:before
{
    content: '→';
}

.slick-next
{
    right: -25px;
}
[dir='rtl'] .slick-next
{
    right: auto;
    left: -25px;
}
.slick-next:before
{
    content: '→';
}
[dir='rtl'] .slick-next:before
{
    content: '←';
}

/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 30px;
}

.slick-dots
{
    position: absolute;
    bottom: -25px;

    display: block;

    width: 100%;
    padding: 0;
    margin: 0;

    list-style: none;

    text-align: center;
}
.slick-dots li
{
    position: relative;

    display: inline-block;

    width: 20px;
    height: 20px;
    margin: 0 5px;
    padding: 0;

    cursor: pointer;
}
.slick-dots li button
{
    font-size: 0;
    line-height: 0;

    display: block;

    width: 20px;
    height: 20px;
    padding: 5px;

    cursor: pointer;

    color: transparent;
    border: 0;
    outline: none;
    background: transparent;
}
.slick-dots li button:hover,
.slick-dots li button:focus
{
    outline: none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before
{
    opacity: 1;
}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 6px;
    line-height: 20px;

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

    width: 20px;
    height: 20px;

    content: '•';
    text-align: center;

    opacity: .25;
    color: black;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    opacity: .75;
    color: black;
}

/* BASICS */

.CodeMirror {
  /* Set height, width, borders, and global font properties here */
  font-family: monospace;
  height: 300px;
  color: black;
  direction: ltr;
}

/* PADDING */

.CodeMirror-lines {
  padding: 4px 0; /* Vertical padding around content */
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  padding: 0 4px; /* Horizontal padding of content */
}

.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  background-color: white; /* The little square between H and V scrollbars */
}

/* GUTTER */

.CodeMirror-gutters {
  border-right: 1px solid #ddd;
  background-color: #f7f7f7;
  white-space: nowrap;
}

.CodeMirror-linenumbers {
}

.CodeMirror-linenumber {
  padding: 0 3px 0 5px;
  min-width: 20px;
  text-align: right;
  color: #999;
  white-space: nowrap;
}

.CodeMirror-guttermarker {
  color: black;
}

.CodeMirror-guttermarker-subtle {
  color: #999;
}

/* CURSOR */

.CodeMirror-cursor {
  border-left: 1px solid black;
  border-right: none;
  width: 0;
}
/* Shown when moving in bi-directional text */
.CodeMirror div.CodeMirror-secondarycursor {
  border-left: 1px solid silver;
}

.cm-fat-cursor .CodeMirror-cursor {
  width: auto;
  border: 0 !important;
  background: #7e7;
}

.cm-fat-cursor div.CodeMirror-cursors {
  z-index: 1;
}

.cm-fat-cursor .CodeMirror-line::selection,
.cm-fat-cursor .CodeMirror-line > span::selection,
.cm-fat-cursor .CodeMirror-line > span > span::selection {
  background: transparent;
}

.cm-fat-cursor .CodeMirror-line::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span::-moz-selection,
.cm-fat-cursor .CodeMirror-line > span > span::-moz-selection {
  background: transparent;
}

.cm-fat-cursor {
  caret-color: transparent;
}

@-moz-keyframes blink {
  0% {
  }

  50% {
    background-color: transparent;
  }

  100% {
  }
}

@-webkit-keyframes blink {
  0% {
  }

  50% {
    background-color: transparent;
  }

  100% {
  }
}

@keyframes blink {
  0% {
  }

  50% {
    background-color: transparent;
  }

  100% {
  }
}

/* Can style cursor different in overwrite (non-insert) mode */
.CodeMirror-overwrite .CodeMirror-cursor {
}

.cm-tab {
  display: inline-block;
  text-decoration: inherit;
}

.CodeMirror-rulers {
  position: absolute;
  left: 0;
  right: 0;
  top: -50px;
  bottom: 0;
  overflow: hidden;
}

.CodeMirror-ruler {
  border-left: 1px solid #ccc;
  top: 0;
  bottom: 0;
  position: absolute;
}

/* DEFAULT THEME */

.cm-s-default .cm-header {
  color: blue;
}

.cm-s-default .cm-quote {
  color: #090;
}

.cm-negative {
  color: #d44;
}

.cm-positive {
  color: #292;
}

.cm-header, .cm-strong {
  font-weight: bold;
}

.cm-em {
  font-style: italic;
}

.cm-link {
  text-decoration: underline;
}

.cm-strikethrough {
  text-decoration: line-through;
}

.cm-s-default .cm-keyword {
  color: #708;
}

.cm-s-default .cm-atom {
  color: #219;
}

.cm-s-default .cm-number {
  color: #164;
}

.cm-s-default .cm-def {
  color: #00f;
}

.cm-s-default .cm-variable,
.cm-s-default .cm-punctuation,
.cm-s-default .cm-property,
.cm-s-default .cm-operator {
}

.cm-s-default .cm-variable-2 {
  color: #05a;
}

.cm-s-default .cm-variable-3, .cm-s-default .cm-type {
  color: #085;
}

.cm-s-default .cm-comment {
  color: #a50;
}

.cm-s-default .cm-string {
  color: #a11;
}

.cm-s-default .cm-string-2 {
  color: #f50;
}

.cm-s-default .cm-meta {
  color: #555;
}

.cm-s-default .cm-qualifier {
  color: #555;
}

.cm-s-default .cm-builtin {
  color: #30a;
}

.cm-s-default .cm-bracket {
  color: #997;
}

.cm-s-default .cm-tag {
  color: #170;
}

.cm-s-default .cm-attribute {
  color: #00c;
}

.cm-s-default .cm-hr {
  color: #999;
}

.cm-s-default .cm-link {
  color: #00c;
}

.cm-s-default .cm-error {
  color: #f00;
}

.cm-invalidchar {
  color: #f00;
}

.CodeMirror-composing {
  border-bottom: 2px solid;
}

/* Default styles for common addons */

div.CodeMirror span.CodeMirror-matchingbracket {
  color: #0b0;
}

div.CodeMirror span.CodeMirror-nonmatchingbracket {
  color: #a22;
}

.CodeMirror-matchingtag {
  background: rgba(255, 150, 0, .3);
}

.CodeMirror-activeline-background {
  background: #e8f2ff;
}

/* STOP */

/* The rest of this file contains styles related to the mechanics of
   the editor. You probably shouldn't touch them. */

.CodeMirror {
  position: relative;
  overflow: hidden;
  background: white;
}

.CodeMirror-scroll {
  overflow: scroll !important; /* Things will break if this is overridden */
  /* 50px is the magic margin used to hide the element's real scrollbars */
  /* See overflow: hidden in .CodeMirror */
  margin-bottom: -50px;
  margin-right: -50px;
  padding-bottom: 50px;
  height: 100%;
  outline: none; /* Prevent dragging from highlighting the element */
  position: relative;
  z-index: 0;
}

.CodeMirror-sizer {
  position: relative;
  border-right: 50px solid transparent;
}

/* The fake, visible scrollbars. Used to force redraw during scrolling
   before actual scrolling happens, thus preventing shaking and
   flickering artifacts. */
.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
  position: absolute;
  z-index: 6;
  display: none;
  outline: none;
}

.CodeMirror-vscrollbar {
  right: 0;
  top: 0;
  overflow-x: hidden;
  overflow-y: scroll;
}

.CodeMirror-hscrollbar {
  bottom: 0;
  left: 0;
  overflow-y: hidden;
  overflow-x: scroll;
}

.CodeMirror-scrollbar-filler {
  right: 0;
  bottom: 0;
}

.CodeMirror-gutter-filler {
  left: 0;
  bottom: 0;
}

.CodeMirror-gutters {
  position: absolute;
  left: 0;
  top: 0;
  min-height: 100%;
  z-index: 3;
}

.CodeMirror-gutter {
  white-space: normal;
  height: 100%;
  display: inline-block;
  vertical-align: top;
  margin-bottom: -50px;
}

.CodeMirror-gutter-wrapper {
  position: absolute;
  z-index: 4;
  background: none !important;
  border: none !important;
}

.CodeMirror-gutter-background {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
}

.CodeMirror-gutter-elt {
  position: absolute;
  cursor: default;
  z-index: 4;
}

.CodeMirror-gutter-wrapper ::selection {
  background-color: transparent
}

.CodeMirror-gutter-wrapper ::-moz-selection {
  background-color: transparent
}

.CodeMirror-lines {
  cursor: text;
  min-height: 1px; /* prevents collapsing before first draw */
}

.CodeMirror pre.CodeMirror-line,
.CodeMirror pre.CodeMirror-line-like {
  /* Reset some styles that the rest of the page might have set */
  -moz-border-radius: 0;
  -webkit-border-radius: 0;
  border-radius: 0;
  border-width: 0;
  background: transparent;
  font-family: inherit;
  font-size: inherit;
  margin: 0;
  white-space: pre;
  word-wrap: normal;
  line-height: inherit;
  color: inherit;
  z-index: 2;
  position: relative;
  overflow: visible;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-variant-ligatures: contextual;
  font-variant-ligatures: contextual;
}

.CodeMirror-wrap pre.CodeMirror-line,
.CodeMirror-wrap pre.CodeMirror-line-like {
  word-wrap: break-word;
  white-space: pre-wrap;
  word-break: normal;
}

.CodeMirror-linebackground {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 0;
}

.CodeMirror-linewidget {
  position: relative;
  z-index: 2;
  padding: 0.1px; /* Force widget margins to stay inside of the container */
}

.CodeMirror-widget {
}

.CodeMirror-rtl pre {
  direction: rtl;
}

.CodeMirror-code {
  outline: none;
}

/* Force content-box sizing for the elements where we expect it */
.CodeMirror-scroll,
.CodeMirror-sizer,
.CodeMirror-gutter,
.CodeMirror-gutters,
.CodeMirror-linenumber {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.CodeMirror-measure {
  position: absolute;
  width: 100%;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.CodeMirror-cursor {
  position: absolute;
  pointer-events: none;
}

.CodeMirror-measure pre {
  position: static;
}

div.CodeMirror-cursors {
  visibility: hidden;
  position: relative;
  z-index: 3;
}

div.CodeMirror-dragcursors {
  visibility: visible;
}

.CodeMirror-focused div.CodeMirror-cursors {
  visibility: visible;
}

.CodeMirror-selected {
  background: #d9d9d9;
}

.CodeMirror-focused .CodeMirror-selected {
  background: #d7d4f0;
}

.CodeMirror-crosshair {
  cursor: crosshair;
}

.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection {
  background: #d7d4f0;
}

.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection {
  background: #d7d4f0;
}

.cm-searching {
  background-color: #ffa;
  background-color: rgba(255, 255, 0, .4);
}

/* Used to force a border model for a node */
.cm-force-border {
  padding-right: .1px;
}

@media print {
  /* Hide the cursor when printing */
  .CodeMirror div.CodeMirror-cursors {
    visibility: hidden;
  }
}

/* See issue #2901 */
.cm-tab-wrap-hack:after {
  content: '';
}

/* Help users use markselection to safely style text background */
span.CodeMirror-selectedtext {
  background: none;
}

/* The lint marker gutter */
.CodeMirror-lint-markers {
  width: 16px;
}

.CodeMirror-lint-tooltip {
  background-color: #ffd;
  border: 1px solid black;
  border-radius: 4px 4px 4px 4px;
  color: black;
  font-family: monospace;
  font-size: 10pt;
  overflow: hidden;
  padding: 2px 5px;
  position: fixed;
  white-space: pre;
  white-space: pre-wrap;
  z-index: 100;
  max-width: 600px;
  opacity: 0;
  transition: opacity .4s;
  -moz-transition: opacity .4s;
  -webkit-transition: opacity .4s;
  -o-transition: opacity .4s;
  -ms-transition: opacity .4s;
}

.CodeMirror-lint-mark {
  background-position: left bottom;
  background-repeat: repeat-x;
}

.CodeMirror-lint-mark-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJFhQXEbhTg7YAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAMklEQVQI12NkgIIvJ3QXMjAwdDN+OaEbysDA4MPAwNDNwMCwiOHLCd1zX07o6kBVGQEAKBANtobskNMAAAAASUVORK5CYII=");
}

.CodeMirror-lint-mark-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAADCAYAAAC09K7GAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sJDw4cOCW1/KIAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAAHElEQVQI12NggIL/DAz/GdA5/xkY/qPKMDAwAADLZwf5rvm+LQAAAABJRU5ErkJggg==");
}

.CodeMirror-lint-marker {
  background-position: center center;
  background-repeat: no-repeat;
  cursor: pointer;
  display: inline-block;
  height: 16px;
  width: 16px;
  vertical-align: middle;
  position: relative;
}

.CodeMirror-lint-message {
  padding-left: 18px;
  background-position: top left;
  background-repeat: no-repeat;
}

.CodeMirror-lint-marker-warning, .CodeMirror-lint-message-warning {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAANlBMVEX/uwDvrwD/uwD/uwD/uwD/uwD/uwD/uwD/uwD6twD/uwAAAADurwD2tQD7uAD+ugAAAAD/uwDhmeTRAAAADHRSTlMJ8mN1EYcbmiixgACm7WbuAAAAVklEQVR42n3PUQqAIBBFUU1LLc3u/jdbOJoW1P08DA9Gba8+YWJ6gNJoNYIBzAA2chBth5kLmG9YUoG0NHAUwFXwO9LuBQL1giCQb8gC9Oro2vp5rncCIY8L8uEx5ZkAAAAASUVORK5CYII=");
}

.CodeMirror-lint-marker-error, .CodeMirror-lint-message-error {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAHlBMVEW7AAC7AACxAAC7AAC7AAAAAAC4AAC5AAD///+7AAAUdclpAAAABnRSTlMXnORSiwCK0ZKSAAAATUlEQVR42mWPOQ7AQAgDuQLx/z8csYRmPRIFIwRGnosRrpamvkKi0FTIiMASR3hhKW+hAN6/tIWhu9PDWiTGNEkTtIOucA5Oyr9ckPgAWm0GPBog6v4AAAAASUVORK5CYII=");
}

.CodeMirror-lint-marker-multiple {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAMAAADzjKfhAAAACVBMVEUAAAAAAAC/v7914kyHAAAAAXRSTlMAQObYZgAAACNJREFUeNo1ioEJAAAIwmz/H90iFFSGJgFMe3gaLZ0od+9/AQZ0ADosbYraAAAAAElFTkSuQmCC");
  background-repeat: no-repeat;
  background-position: right bottom;
  width: 100%;
  height: 100%;
}

.CodeMirror-lint-line-error {
  background-color: rgba(183, 76, 81, 0.08);
}

.CodeMirror-lint-line-warning {
  background-color: rgba(255, 211, 0, 0.1);
}

.select2-container {
  box-sizing: border-box;
  display: inline-block;
  margin: 0;
  position: relative;
  vertical-align: middle;
}

  .select2-container .select2-selection--single {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    height: 28px;
    user-select: none;
    -webkit-user-select: none;
  }

    .select2-container .select2-selection--single .select2-selection__rendered {
      display: block;
      padding-left: 8px;
      padding-right: 20px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .select2-container .select2-selection--single .select2-selection__clear {
      background-color: transparent;
      border: none;
      font-size: 1em;
    }

  .select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered {
    padding-right: 8px;
    padding-left: 20px;
  }

  .select2-container .select2-selection--multiple {
    box-sizing: border-box;
    cursor: pointer;
    display: block;
    min-height: 32px;
    user-select: none;
    -webkit-user-select: none;
  }

    .select2-container .select2-selection--multiple .select2-selection__rendered {
      display: inline;
      list-style: none;
      padding: 0;
    }

    .select2-container .select2-selection--multiple .select2-selection__clear {
      background-color: transparent;
      border: none;
      font-size: 1em;
    }

  .select2-container .select2-search--inline .select2-search__field {
    box-sizing: border-box;
    border: none;
    font-size: 100%;
    margin-top: 5px;
    margin-left: 5px;
    padding: 0;
    max-width: 100%;
    resize: none;
    height: 18px;
    vertical-align: bottom;
    font-family: sans-serif;
    overflow: hidden;
    word-break: keep-all;
  }

    .select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button {
      -webkit-appearance: none;
    }

.select2-dropdown {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  box-sizing: border-box;
  display: block;
  position: absolute;
  left: -100000px;
  width: 100%;
  z-index: 1051;
}

.select2-results {
  display: block;
}

.select2-results__options {
  list-style: none;
  margin: 0;
  padding: 0;
}

.select2-results__option {
  padding: 6px;
  user-select: none;
  -webkit-user-select: none;
}

.select2-results__option--selectable {
  cursor: pointer;
}

.select2-container--open .select2-dropdown {
  left: 0;
}

.select2-container--open .select2-dropdown--above {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--open .select2-dropdown--below {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-search--dropdown {
  display: block;
  padding: 4px;
}

  .select2-search--dropdown .select2-search__field {
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
  }

    .select2-search--dropdown .select2-search__field::-webkit-search-cancel-button {
      -webkit-appearance: none;
    }

  .select2-search--dropdown.select2-search--hide {
    display: none;
  }

.select2-close-mask {
  border: 0;
  margin: 0;
  padding: 0;
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  min-height: 100%;
  min-width: 100%;
  height: auto;
  width: auto;
  opacity: 0;
  z-index: 99;
  background-color: #fff;
  filter: alpha(opacity=0);
}

.select2-hidden-accessible {
  border: 0 !important;
  clip: rect(0 0 0 0) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 4px;
}

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px;
  }

  .select2-container--default .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    height: 26px;
    margin-right: 20px;
    padding-right: 0px;
  }

  .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #999;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
  }

    .select2-container--default .select2-selection--single .select2-selection__arrow b {
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      left: 50%;
      margin-left: -4px;
      margin-top: -2px;
      position: absolute;
      top: 50%;
      width: 0;
    }

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left;
}

.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  left: 1px;
  right: auto;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
  background-color: #eee;
  cursor: default;
}

  .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear {
    display: none;
  }

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
  border-color: transparent transparent #888 transparent;
  border-width: 0 4px 5px 4px;
}

.select2-container--default .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
  padding-bottom: 5px;
  padding-right: 5px;
  position: relative;
}

  .select2-container--default .select2-selection--multiple.select2-selection--clearable {
    padding-right: 25px;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__clear {
    cursor: pointer;
    font-weight: bold;
    height: 20px;
    margin-right: 10px;
    margin-top: 5px;
    position: absolute;
    right: 0;
    padding: 1px;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    box-sizing: border-box;
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0;
    padding-left: 20px;
    position: relative;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: bottom;
    white-space: nowrap;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    cursor: default;
    padding-left: 2px;
    padding-right: 5px;
  }

  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent;
    border: none;
    border-right: 1px solid #aaa;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: #999;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    padding: 0 4px;
    position: absolute;
    left: 0;
    top: 0;
  }

    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover, .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:focus {
      background-color: #f1f1f1;
      color: #333;
      outline: none;
    }

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 5px;
  padding-right: 2px;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  border-left: 1px solid #aaa;
  border-right: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__clear {
  float: left;
  margin-left: 10px;
  margin-right: auto;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border: solid black 1px;
  outline: 0;
}

.select2-container--default.select2-container--disabled .select2-selection--multiple {
  background-color: #eee;
  cursor: default;
}

.select2-container--default.select2-container--disabled .select2-selection__choice__remove {
  display: none;
}

.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, .select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, .select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
}

.select2-container--default .select2-search--inline .select2-search__field {
  background: transparent;
  border: none;
  outline: 0;
  box-shadow: none;
  -webkit-appearance: textfield;
}

.select2-container--default .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}

.select2-container--default .select2-results__option .select2-results__option {
  padding-left: 1em;
}

  .select2-container--default .select2-results__option .select2-results__option .select2-results__group {
    padding-left: 0;
  }

  .select2-container--default .select2-results__option .select2-results__option .select2-results__option {
    margin-left: -1em;
    padding-left: 2em;
  }

    .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
      margin-left: -2em;
      padding-left: 3em;
    }

      .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
        margin-left: -3em;
        padding-left: 4em;
      }

        .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
          margin-left: -4em;
          padding-left: 5em;
        }

          .select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
            margin-left: -5em;
            padding-left: 6em;
          }

.select2-container--default .select2-results__option--group {
  padding: 0;
}

.select2-container--default .select2-results__option--disabled {
  color: #999;
}

.select2-container--default .select2-results__option--selected {
  background-color: #ddd;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #5897fb;
  color: white;
}

.select2-container--default .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px;
}

.select2-container--classic .select2-selection--single {
  background-color: #f7f7f7;
  border: 1px solid #aaa;
  border-radius: 4px;
  outline: 0;
  background-image: -webkit-linear-gradient(top, white 50%, #eeeeee 100%);
  background-image: -o-linear-gradient(top, white 50%, #eeeeee 100%);
  background-image: linear-gradient(to bottom, white 50%, #eeeeee 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}

  .select2-container--classic .select2-selection--single:focus {
    border: 1px solid #5897fb;
  }

  .select2-container--classic .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 28px;
  }

  .select2-container--classic .select2-selection--single .select2-selection__clear {
    cursor: pointer;
    float: right;
    font-weight: bold;
    height: 26px;
    margin-right: 20px;
  }

  .select2-container--classic .select2-selection--single .select2-selection__placeholder {
    color: #999;
  }

  .select2-container--classic .select2-selection--single .select2-selection__arrow {
    background-color: #ddd;
    border: none;
    border-left: 1px solid #aaa;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 26px;
    position: absolute;
    top: 1px;
    right: 1px;
    width: 20px;
    background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
    background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%);
    background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFCCCCCC', GradientType=0);
  }

    .select2-container--classic .select2-selection--single .select2-selection__arrow b {
      border-color: #888 transparent transparent transparent;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      height: 0;
      left: 50%;
      margin-left: -4px;
      margin-top: -2px;
      position: absolute;
      top: 50%;
      width: 0;
    }

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear {
  float: left;
}

.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow {
  border: none;
  border-right: 1px solid #aaa;
  border-radius: 0;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  left: 1px;
  right: auto;
}

.select2-container--classic.select2-container--open .select2-selection--single {
  border: 1px solid #5897fb;
}

  .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow {
    background: transparent;
    border: none;
  }

    .select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b {
      border-color: transparent transparent #888 transparent;
      border-width: 0 4px 5px 4px;
    }

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  background-image: -webkit-linear-gradient(top, white 0%, #eeeeee 50%);
  background-image: -o-linear-gradient(top, white 0%, #eeeeee 50%);
  background-image: linear-gradient(to bottom, white 0%, #eeeeee 50%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFEEEEEE', GradientType=0);
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  background-image: -webkit-linear-gradient(top, #eeeeee 50%, white 100%);
  background-image: -o-linear-gradient(top, #eeeeee 50%, white 100%);
  background-image: linear-gradient(to bottom, #eeeeee 50%, white 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEEEEEE', endColorstr='#FFFFFFFF', GradientType=0);
}

.select2-container--classic .select2-selection--multiple {
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 4px;
  cursor: text;
  outline: 0;
  padding-bottom: 5px;
  padding-right: 5px;
}

  .select2-container--classic .select2-selection--multiple:focus {
    border: 1px solid #5897fb;
  }

  .select2-container--classic .select2-selection--multiple .select2-selection__clear {
    display: none;
  }

  .select2-container--classic .select2-selection--multiple .select2-selection__choice {
    background-color: #e4e4e4;
    border: 1px solid #aaa;
    border-radius: 4px;
    display: inline-block;
    margin-left: 5px;
    margin-top: 5px;
    padding: 0;
  }

  .select2-container--classic .select2-selection--multiple .select2-selection__choice__display {
    cursor: default;
    padding-left: 2px;
    padding-right: 5px;
  }

  .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent;
    border: none;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    color: #888;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    padding: 0 4px;
  }

    .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
      color: #555;
      outline: none;
    }

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice {
  margin-left: 5px;
  margin-right: auto;
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__display {
  padding-left: 5px;
  padding-right: 2px;
}

.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

.select2-container--classic.select2-container--open .select2-selection--multiple {
  border: 1px solid #5897fb;
}

.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple {
  border-top: none;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.select2-container--classic .select2-search--dropdown .select2-search__field {
  border: 1px solid #aaa;
  outline: 0;
}

.select2-container--classic .select2-search--inline .select2-search__field {
  outline: 0;
  box-shadow: none;
}

.select2-container--classic .select2-dropdown {
  background-color: white;
  border: 1px solid transparent;
}

.select2-container--classic .select2-dropdown--above {
  border-bottom: none;
}

.select2-container--classic .select2-dropdown--below {
  border-top: none;
}

.select2-container--classic .select2-results > .select2-results__options {
  max-height: 200px;
  overflow-y: auto;
}

.select2-container--classic .select2-results__option--group {
  padding: 0;
}

.select2-container--classic .select2-results__option--disabled {
  color: grey;
}

.select2-container--classic .select2-results__option--highlighted.select2-results__option--selectable {
  background-color: #3875d7;
  color: white;
}

.select2-container--classic .select2-results__group {
  cursor: default;
  display: block;
  padding: 6px;
}

.select2-container--classic.select2-container--open .select2-dropdown {
  border-color: #5897fb;
}

/*!
 * Quill Editor v1.3.6
 * https://quilljs.com/
 * Copyright (c) 2014, Jason Chen
 * Copyright (c) 2013, salesforce.com
 */
.ql-container {
  box-sizing: border-box;
  height: 100%;
  margin: 0px;
  position: relative;
}
.ql-container.ql-disabled .ql-tooltip {
  visibility: hidden;
}
.ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  pointer-events: none;
}
.ql-clipboard {
  left: -100000px;
  height: 1px;
  overflow-y: hidden;
  position: absolute;
  top: 50%;
}
.ql-clipboard p {
  margin: 0;
  padding: 0;
}
.ql-editor {
  box-sizing: border-box;
  height: 100%;
  outline: none;
  overflow-y: auto;
  padding: 4px;
  tab-size: 0;
  -moz-tab-size: 0;
  text-align: left;
  white-space: pre-wrap;
  word-wrap: break-word;
}




.ql-editor > * {
  cursor: text;
}
.ql-editor p,
.ql-editor ol,
.ql-editor ul,
.ql-editor pre,
.ql-editor blockquote,
.ql-editor h1,
.ql-editor h2,
.ql-editor h3,
.ql-editor h4,
.ql-editor h5,
.ql-editor h6 {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol,
.ql-editor ul {
}
.ql-editor ol > li,
.ql-editor ul > li {
  list-style-type: none;
}
.ql-editor ul > li::before {
  content: '\2022';
}
.ql-editor ul[data-checked=true],
.ql-editor ul[data-checked=false] {
  pointer-events: none;
}
.ql-editor ul[data-checked=true] > li *,
.ql-editor ul[data-checked=false] > li * {
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before,
.ql-editor ul[data-checked=false] > li::before {
  color: #777;
  cursor: pointer;
  pointer-events: all;
}
.ql-editor ul[data-checked=true] > li::before {
  content: '\2611';
}
.ql-editor ul[data-checked=false] > li::before {
  content: '\2610';
}
.ql-editor li::before {
}
.ql-editor ol li,
.ql-editor ul li {
}

.ql-editor ol li {
  counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  counter-increment: list-0;
}
.ql-editor ol li:before {
  content: counter(list-0, decimal) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-increment: list-1;
}
.ql-editor ol li.ql-indent-1:before {
  content: counter(list-1, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-1 {
  counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-2 {
  counter-increment: list-2;
}
.ql-editor ol li.ql-indent-2:before {
  content: counter(list-2, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-2 {
  counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-3 {
  counter-increment: list-3;
}
.ql-editor ol li.ql-indent-3:before {
  content: counter(list-3, decimal) '. ';
}
.ql-editor ol li.ql-indent-3 {
  counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-4 {
  counter-increment: list-4;
}
.ql-editor ol li.ql-indent-4:before {
  content: counter(list-4, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-4 {
  counter-reset: list-5 list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-5 {
  counter-increment: list-5;
}
.ql-editor ol li.ql-indent-5:before {
  content: counter(list-5, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-5 {
  counter-reset: list-6 list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-6 {
  counter-increment: list-6;
}
.ql-editor ol li.ql-indent-6:before {
  content: counter(list-6, decimal) '. ';
}
.ql-editor ol li.ql-indent-6 {
  counter-reset: list-7 list-8 list-9;
}
.ql-editor ol li.ql-indent-7 {
  counter-increment: list-7;
}
.ql-editor ol li.ql-indent-7:before {
  content: counter(list-7, lower-alpha) '. ';
}
.ql-editor ol li.ql-indent-7 {
  counter-reset: list-8 list-9;
}
.ql-editor ol li.ql-indent-8 {
  counter-increment: list-8;
}
.ql-editor ol li.ql-indent-8:before {
  content: counter(list-8, lower-roman) '. ';
}
.ql-editor ol li.ql-indent-8 {
  counter-reset: list-9;
}
.ql-editor ol li.ql-indent-9 {
  counter-increment: list-9;
}
.ql-editor ol li.ql-indent-9:before {
  content: counter(list-9, decimal) '. ';
}
.ql-indent-1 {
  padding-left: 3em;
}
li.ql-indent-1 {
  padding-left: 4.5em;
}
.ql-indent-2 {
  padding-left: 6em;
}
li.ql-indent-2 {
  padding-left: 7.5em;
}
.ql-indent-3{
  padding-left: 9em;
}
li.ql-indent-3 {
  padding-left: 10.5em;
}
.ql-indent-4 {
  padding-left: 12em;
}
li.ql-indent-4 {
  padding-left: 13.5em;
}
.ql-indent-5 {
  padding-left: 15em;
}
li.ql-indent-5 {
  padding-left: 16.5em;
}
.ql-indent-6{
  padding-left: 18em;
}
li.ql-indent-6 {
  padding-left: 19.5em;
}
.ql-indent-7 {
  padding-left: 21em;
}
li.ql-indent-7 {
  padding-left: 22.5em;
}
.ql-indent-8{
  padding-left: 24em;
}
li.ql-indent-8 {
  padding-left: 25.5em;
}
.ql-indent-9 {
  padding-left: 27em;
}
li.ql-indent-9 {
  padding-left: 28.5em;
}

.ql-editor .ql-video {
  display: block;
  max-width: 100%;
}
.ql-editor .ql-video.ql-align-center {
  margin: 0 auto;
}
.ql-editor .ql-video.ql-align-right {
  margin: 0 0 0 auto;
}
.ql-editor .ql-bg-black {
  background-color: #000;
}
.ql-editor .ql-bg-red {
  background-color: #e60000;
}
.ql-editor .ql-bg-orange {
  background-color: #f90;
}
.ql-editor .ql-bg-yellow {
  background-color: #ff0;
}
.ql-editor .ql-bg-green {
  background-color: #008a00;
}
.ql-editor .ql-bg-blue {
  background-color: #06c;
}
.ql-editor .ql-bg-purple {
  background-color: #93f;
}
.ql-editor .ql-color-white {
  color: #fff;
}
.ql-editor .ql-color-red {
  color: #e60000;
}
.ql-editor .ql-color-orange {
  color: #f90;
}
.ql-editor .ql-color-yellow {
  color: #ff0;
}
.ql-editor .ql-color-green {
  color: #008a00;
}
.ql-editor .ql-color-blue {
  color: #06c;
}
.ql-editor .ql-color-purple {
  color: #93f;
}
.ql-editor .ql-font-serif {
}
.ql-font-monospace {
  font-family: Monaco, Courier New, monospace;
}
.ql-size-small {
  font-size: 0.75em;
}
.ql-size-large {
  font-size: 1.25em;
}
.ql-size-huge {
  font-size: 1.5em;
}
.ql-editor .ql-direction-rtl {
  direction: rtl;
  text-align: inherit;
}
.ql-editor .ql-align-center {
  text-align: center;
}
.ql-editor .ql-align-justify {
  text-align: justify;
}
.ql-editor .ql-align-right {
  text-align: right;
}
.ql-editor.ql-blank::before {
  color: rgba(0,0,0,0.6);
  content: attr(data-placeholder);
  left: 5px;
  pointer-events: none;
  position: absolute;
  right: 5px;
}
.ql-snow.ql-toolbar:after,
.ql-snow .ql-toolbar:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button {
  background: none;
  border: none;
  cursor: pointer;
  display: inline-block;
  float: left;
  height: 24px;
  padding: 2px 4px;
  width: 28px;
  margin-left: 0px;
  border: solid 1px transparent;
}
.ql-snow.ql-toolbar button svg,
.ql-snow .ql-toolbar button svg {
  float: left;
  height: 100%;
}
.ql-snow.ql-toolbar button:active:hover,
.ql-snow .ql-toolbar button:active:hover {
  outline: none;
}
.ql-snow.ql-toolbar input.ql-image[type=file],
.ql-snow .ql-toolbar input.ql-image[type=file] {
  display: none;
}
.ql-snow.ql-toolbar button:hover,
.ql-snow .ql-toolbar button:hover,
.ql-snow.ql-toolbar button:focus,
.ql-snow .ql-toolbar button:focus,
.ql-snow.ql-toolbar button.ql-active,
.ql-snow .ql-toolbar button.ql-active,
.ql-snow.ql-toolbar .ql-picker-label:hover,
.ql-snow .ql-toolbar .ql-picker-label:hover,
.ql-snow.ql-toolbar .ql-picker-label.ql-active,
.ql-snow .ql-toolbar .ql-picker-label.ql-active,
.ql-snow.ql-toolbar .ql-picker-item:hover,
.ql-snow .ql-toolbar .ql-picker-item:hover,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected {
  color: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow .ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button:focus .ql-fill,
.ql-snow .ql-toolbar button:focus .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,
.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill {
  fill: #06c;
}
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow .ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button:focus .ql-stroke,
.ql-snow .ql-toolbar button:focus .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke,
.ql-snow .ql-toolbar button.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,
.ql-snow.ql-toolbar button:hover .ql-stroke-miter,
.ql-snow .ql-toolbar button:hover .ql-stroke-miter,
.ql-snow.ql-toolbar button:focus .ql-stroke-miter,
.ql-snow .ql-toolbar button:focus .ql-stroke-miter,
.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,
.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,
.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter {
  stroke: #06c;
}
@media (pointer: coarse) {
  .ql-snow.ql-toolbar button:hover:not(.ql-active),
  .ql-snow .ql-toolbar button:hover:not(.ql-active) {
    color: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
    fill: #444;
  }
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
  .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
  .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
    stroke: #444;
  }
}
.ql-snow {
  box-sizing: border-box;
}
.ql-snow * {
  box-sizing: border-box;
}
.ql-snow .ql-hidden {
  display: none;
}
.ql-snow .ql-out-bottom,
.ql-snow .ql-out-top {
  visibility: hidden;
}
.ql-snow .ql-tooltip {
  position: absolute;
  transform: translateY(10px);
  z-index:10000;
}
.ql-snow .ql-tooltip a {
  cursor: pointer;
  text-decoration: none;
}
.ql-snow .ql-tooltip.ql-flip {
  transform: translateY(-10px);
}
.ql-snow .ql-formats {
  display: inline-block;
  vertical-align: middle;
}
.ql-snow .ql-formats:after {
  clear: both;
  content: '';
  display: table;
}
.ql-snow .ql-stroke {
  fill: none;
  stroke: #444;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.ql-snow .ql-stroke-miter {
  fill: none;
  stroke: #444;
  stroke-miterlimit: 10;
  stroke-width: 2;
}
.ql-snow .ql-fill,
.ql-snow .ql-stroke.ql-fill {
  fill: #444;
}
.ql-snow .ql-empty {
  fill: none;
}
.ql-snow .ql-even {
  fill-rule: evenodd;
}
.ql-snow .ql-thin,
.ql-snow .ql-stroke.ql-thin {
  stroke-width: 1;
}
.ql-snow .ql-transparent {
  opacity: 0.4;
}
.ql-snow .ql-direction svg:last-child {
  display: none;
}
.ql-snow .ql-direction.ql-active svg:last-child {
  display: inline;
}
.ql-snow .ql-direction.ql-active svg:first-child {
  display: none;
}
.ql-snow .ql-editor h1 {
}
.ql-snow .ql-editor h2 {
}
.ql-snow .ql-editor h3 {
}
.ql-snow .ql-editor h4 {
}
.ql-snow .ql-editor h5 {
}
.ql-snow .ql-editor h6 {
}
.ql-snow .ql-editor a {
  text-decoration: underline;
}
.ql-snow .ql-editor blockquote {
  border-left: 4px solid #ccc;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 16px;
}
.ql-snow .ql-editor code,
.ql-snow .ql-editor pre {
  background-color: #f0f0f0;
  border-radius: 3px;
}
.ql-snow .ql-editor pre {
  white-space: pre-wrap;
  margin-bottom: 5px;
  margin-top: 5px;
  padding: 5px 10px;
}
.ql-snow .ql-editor code {
  font-size: 85%;
  padding: 2px 4px;
}
.ql-snow .ql-editor pre.ql-syntax {
  background-color: #23241f;
  color: #f8f8f2;
  overflow: visible;
}
.ql-snow .ql-editor img {
  max-width: 100%;
}
.ql-snow .ql-picker {
  color: #444;
  display: inline-block;
  float: left;
  font-size: 14px;
  font-weight: 500;
  height: 24px;
  position: relative;
  vertical-align: middle;
}
.ql-snow .ql-picker-label {
  cursor: pointer;
  display: inline-block;
  height: 100%;
  padding-left: 8px;
  padding-right: 2px;
  position: relative;
  width: 100%;
}
.ql-snow .ql-picker-label::before {
  display: inline-block;
  line-height: 22px;
}
.ql-snow .ql-picker-options {
  background-color: #fff;
  display: none;
  min-width: 100%;
  padding: 4px 8px;
  position: absolute;
  white-space: nowrap;
}
.ql-snow .ql-picker-options .ql-picker-item {
  cursor: pointer;
  display: block;
  padding-bottom: 5px;
  padding-top: 5px;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  color: #ccc;
  z-index: 2;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
  fill: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
  stroke: #ccc;
}
.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  display: block;
  margin-top: -1px;
  top: 100%;
  z-index: 1;
}
.ql-snow .ql-color-picker,
.ql-snow .ql-icon-picker {
  width: 28px;
}
.ql-snow .ql-color-picker .ql-picker-label,
.ql-snow .ql-icon-picker .ql-picker-label {
  padding: 2px 4px;
}
.ql-snow .ql-color-picker .ql-picker-label svg,
.ql-snow .ql-icon-picker .ql-picker-label svg {
  right: 4px;
}
.ql-snow .ql-icon-picker .ql-picker-options {
  padding: 4px 0px;
}
.ql-snow .ql-icon-picker .ql-picker-item {
  height: 24px;
  width: 24px;
  padding: 2px 3px;
}
.ql-snow .ql-color-picker .ql-picker-options {
  padding: 3px 5px;
  width: 152px;
}
.ql-snow .ql-color-picker .ql-picker-item {
  border: 1px solid transparent;
  float: left;
  height: 16px;
  margin: 2px;
  padding: 0px;
  width: 16px;
}
.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg {
  position: absolute;
  margin-top: -9px;
  right: 0;
  top: 50%;
  width: 18px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=''])::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=''])::before {
  content: attr(data-label);
}
.ql-snow .ql-picker.ql-header {
  width: 98px;
}
.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: 'Heading 1';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: 'Heading 2';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: 'Heading';
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: 'Large';
}
  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: 'Heading 5';
  }
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: 'Heading 6';
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  font-size: 2em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  font-size: 1.75em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  font-size: 1.5em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  font-size: 1.1em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  font-size: 0.83em;
}
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  font-size: 0.67em;
}
.ql-snow .ql-picker.ql-font {
  width: 108px;
}
.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: 'Sans Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  content: 'Serif';
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  content: 'Monospace';
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]::before {
  font-family: Georgia, Times New Roman, serif;
}
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]::before {
  font-family: Monaco, Courier New, monospace;
}
.ql-snow .ql-picker.ql-size {
  width: 98px;
}
.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: 'Normal';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  content: 'Small';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  content: 'Large';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  content: 'Huge';
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]::before {
  font-size: 10px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]::before {
  font-size: 18px;
}
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]::before {
  font-size: 32px;
}
.ql-snow .ql-color-picker.ql-background .ql-picker-item {
  background-color: #fff;
}
.ql-snow .ql-color-picker.ql-color .ql-picker-item {
  background-color: #000;
}
.ql-toolbar.ql-snow {
  box-sizing: border-box;
  padding: 2px;
  border-bottom: 1px solid #aaa;
}
.ql-toolbar.ql-snow .ql-formats {
  margin-right: 10px;
}
.ql-toolbar.ql-snow .ql-picker-label {
  border: 1px solid transparent;
}
.ql-toolbar.ql-snow .ql-picker-options {
  border: 1px solid transparent;
  box-shadow: rgba(0,0,0,0.2) 0 2px 8px;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options {
  border-color: #ccc;
}
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,
.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover {
  border-color: #000;
}
.ql-toolbar.ql-snow + .ql-container.ql-snow {
  border-top: 0px;
}
.ql-snow .ql-tooltip {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 0px 5px #ddd;
  color: #444;
  padding: 5px 12px;
  white-space: nowrap;
}
.ql-snow .ql-tooltip::before {
  content: "Visit URL:";
  line-height: 26px;
  margin-right: 8px;
}
.ql-snow .ql-tooltip input[type=text] {
  display: none;
  border: 1px solid #ccc;
  font-size: 13px;
  height: 26px;
  margin: 0px;
  padding: 3px 5px;
  width: 170px;
}
.ql-snow .ql-tooltip a.ql-preview {
  display: inline-block;
  max-width: 200px;
  overflow-x: hidden;
  text-overflow: ellipsis;
  vertical-align: top;
}
.ql-snow .ql-tooltip a.ql-action::after {
  border-right: 1px solid #ccc;
  content: 'Edit';
  margin-left: 16px;
  padding-right: 8px;
}
.ql-snow .ql-tooltip a.ql-remove::before {
  content: 'Remove';
  margin-left: 8px;
}
.ql-snow .ql-tooltip a {
  line-height: 26px;
}
.ql-snow .ql-tooltip.ql-editing a.ql-preview,
.ql-snow .ql-tooltip.ql-editing a.ql-remove {
  display: none;
}
.ql-snow .ql-tooltip.ql-editing input[type=text] {
  display: inline-block;
}
.ql-snow .ql-tooltip.ql-editing a.ql-action::after {
  border-right: 0px;
  content: 'Save';
  padding-right: 0px;
}
.ql-snow .ql-tooltip[data-mode=link]::before {
  content: "Enter link:";
}
.ql-snow .ql-tooltip[data-mode=formula]::before {
  content: "Enter formula:";
}
.ql-snow .ql-tooltip[data-mode=video]::before {
  content: "Enter video:";
}
.ql-snow a {
  color: #06c;
}
.ql-container.ql-snow {
  min-height: 50px;
}




.ql-toolbar.ql-snow > *:last-child {
  float: right;
  margin-right: 0;
} 



@font-face {
  font-family: 'Glyphicons Halflings';
  src: url(bundle/fonts/glyphicons-halflings-regular.eot);
  src: url(bundle/fonts/glyphicons-halflings-regular.eot?#iefix) format('embedded-opentype'),url(bundle/fonts/glyphicons-halflings-regular.woff2) format('woff2'),url(bundle/fonts/glyphicons-halflings-regular.woff) format('woff'),url(bundle/fonts/glyphicons-halflings-regular.ttf) format('truetype'),url(bundle/fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular) format('svg');
}


.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-weight: normal;
  line-height: 1;
}

.glyphicon-asterisk:before {
  content: "\2a";
}

.glyphicon-plus:before {
  content: "\2b";
}

.glyphicon-euro:before {
  content: "\20ac";
}

.glyphicon-minus:before {
  content: "\2212";
}

.glyphicon-cloud:before {
  content: "\2601";
}

.glyphicon-envelope:before {
  content: "\2709";
}

.glyphicon-pencil:before {
  content: "\270f";
}

.glyphicon-glass:before {
  content: "\e001";
}

.glyphicon-music:before {
  content: "\e002";
}

.glyphicon-search:before {
  content: "\e003";
}

.glyphicon-heart:before {
  content: "\e005";
}

.glyphicon-star:before {
  content: "\e006";
}

.glyphicon-star-empty:before {
  content: "\e007";
}

.glyphicon-user:before {
  content: "\e008";
}

.glyphicon-film:before {
  content: "\e009";
}

.glyphicon-th-large:before {
  content: "\e010";
}

.glyphicon-th:before {
  content: "\e011";
}

.glyphicon-th-list:before {
  content: "\e012";
}

.glyphicon-ok:before {
  content: "\e013";
}

.glyphicon-remove:before {
  content: "\e014";
}

.glyphicon-zoom-in:before {
  content: "\e015";
}

.glyphicon-zoom-out:before {
  content: "\e016";
}

.glyphicon-off:before {
  content: "\e017";
}

.glyphicon-signal:before {
  content: "\e018";
}

.glyphicon-cog:before {
  content: "\e019";
}

.glyphicon-trash:before {
  content: "\e020";
}

.glyphicon-home:before {
  content: "\e021";
}

.glyphicon-file:before {
  content: "\e022";
}

.glyphicon-time:before {
  content: "\e023";
}

.glyphicon-road:before {
  content: "\e024";
}

.glyphicon-download-alt:before {
  content: "\e025";
}

.glyphicon-download:before {
  content: "\e026";
}

.glyphicon-upload:before {
  content: "\e027";
}

.glyphicon-inbox:before {
  content: "\e028";
}

.glyphicon-play-circle:before {
  content: "\e029";
}

.glyphicon-repeat:before {
  content: "\e030";
}

.glyphicon-refresh:before {
  content: "\e031";
}

.glyphicon-list-alt:before {
  content: "\e032";
}

.glyphicon-flag:before {
  content: "\e034";
}

.glyphicon-headphones:before {
  content: "\e035";
}

.glyphicon-volume-off:before {
  content: "\e036";
}

.glyphicon-volume-down:before {
  content: "\e037";
}

.glyphicon-volume-up:before {
  content: "\e038";
}

.glyphicon-qrcode:before {
  content: "\e039";
}

.glyphicon-barcode:before {
  content: "\e040";
}

.glyphicon-tag:before {
  content: "\e041";
}

.glyphicon-tags:before {
  content: "\e042";
}

.glyphicon-book:before {
  content: "\e043";
}

.glyphicon-print:before {
  content: "\e045";
}

.glyphicon-font:before {
  content: "\e047";
}

.glyphicon-bold:before {
  content: "\e048";
}

.glyphicon-italic:before {
  content: "\e049";
}

.glyphicon-text-height:before {
  content: "\e050";
}

.glyphicon-text-width:before {
  content: "\e051";
}

.glyphicon-align-left:before {
  content: "\e052";
}

.glyphicon-align-center:before {
  content: "\e053";
}

.glyphicon-align-right:before {
  content: "\e054";
}

.glyphicon-align-justify:before {
  content: "\e055";
}

.glyphicon-list:before {
  content: "\e056";
}

.glyphicon-indent-left:before {
  content: "\e057";
}

.glyphicon-indent-right:before {
  content: "\e058";
}

.glyphicon-facetime-video:before {
  content: "\e059";
}

.glyphicon-picture:before {
  content: "\e060";
}

.glyphicon-map-marker:before {
  content: "\e062";
}

.glyphicon-adjust:before {
  content: "\e063";
}

.glyphicon-tint:before {
  content: "\e064";
}

.glyphicon-edit:before {
  content: "\e065";
}

.glyphicon-share:before {
  content: "\e066";
}

.glyphicon-check:before {
  content: "\e067";
}

.glyphicon-move:before {
  content: "\e068";
}

.glyphicon-step-backward:before {
  content: "\e069";
}

.glyphicon-fast-backward:before {
  content: "\e070";
}

.glyphicon-backward:before {
  content: "\e071";
}

.glyphicon-play:before {
  content: "\e072";
}

.glyphicon-pause:before {
  content: "\e073";
}

.glyphicon-stop:before {
  content: "\e074";
}

.glyphicon-forward:before {
  content: "\e075";
}

.glyphicon-fast-forward:before {
  content: "\e076";
}

.glyphicon-step-forward:before {
  content: "\e077";
}

.glyphicon-eject:before {
  content: "\e078";
}

.glyphicon-chevron-left:before {
  content: "\e079";
}

.glyphicon-chevron-right:before {
  content: "\e080";
}

.glyphicon-plus-sign:before {
  content: "\e081";
}

.glyphicon-minus-sign:before {
  content: "\e082";
}

.glyphicon-remove-sign:before {
  content: "\e083";
}

.glyphicon-ok-sign:before {
  content: "\e084";
}

.glyphicon-question-sign:before {
  content: "\e085";
}

.glyphicon-info-sign:before {
  content: "\e086";
}

.glyphicon-screenshot:before {
  content: "\e087";
}

.glyphicon-remove-circle:before {
  content: "\e088";
}

.glyphicon-ok-circle:before {
  content: "\e089";
}

.glyphicon-ban-circle:before {
  content: "\e090";
}

.glyphicon-arrow-left:before {
  content: "\e091";
}

.glyphicon-arrow-right:before {
  content: "\e092";
}

.glyphicon-arrow-up:before {
  content: "\e093";
}

.glyphicon-arrow-down:before {
  content: "\e094";
}

.glyphicon-share-alt:before {
  content: "\e095";
}

.glyphicon-resize-full:before {
  content: "\e096";
}

.glyphicon-resize-small:before {
  content: "\e097";
}

.glyphicon-exclamation-sign:before {
  content: "\e101";
}

.glyphicon-gift:before {
  content: "\e102";
}

.glyphicon-leaf:before {
  content: "\e103";
}

.glyphicon-eye-open:before {
  content: "\e105";
}

.glyphicon-eye-close:before {
  content: "\e106";
}

.glyphicon-warning-sign:before {
  content: "\e107";
}

.glyphicon-plane:before {
  content: "\e108";
}

.glyphicon-random:before {
  content: "\e110";
}

.glyphicon-comment:before {
  content: "\e111";
}

.glyphicon-magnet:before {
  content: "\e112";
}

.glyphicon-chevron-up:before {
  content: "\e113";
}

.glyphicon-chevron-down:before {
  content: "\e114";
}

.glyphicon-retweet:before {
  content: "\e115";
}

.glyphicon-shopping-cart:before {
  content: "\e116";
}

.glyphicon-folder-close:before {
  content: "\e117";
}

.glyphicon-folder-open:before {
  content: "\e118";
}

.glyphicon-resize-vertical:before {
  content: "\e119";
}

.glyphicon-resize-horizontal:before {
  content: "\e120";
}

.glyphicon-hdd:before {
  content: "\e121";
}

.glyphicon-bullhorn:before {
  content: "\e122";
}

.glyphicon-certificate:before {
  content: "\e124";
}

.glyphicon-thumbs-up:before {
  content: "\e125";
}

.glyphicon-thumbs-down:before {
  content: "\e126";
}

.glyphicon-hand-right:before {
  content: "\e127";
}

.glyphicon-hand-left:before {
  content: "\e128";
}

.glyphicon-hand-up:before {
  content: "\e129";
}

.glyphicon-hand-down:before {
  content: "\e130";
}

.glyphicon-circle-arrow-right:before {
  content: "\e131";
}

.glyphicon-circle-arrow-left:before {
  content: "\e132";
}

.glyphicon-circle-arrow-up:before {
  content: "\e133";
}

.glyphicon-circle-arrow-down:before {
  content: "\e134";
}

.glyphicon-globe:before {
  content: "\e135";
}

.glyphicon-tasks:before {
  content: "\e137";
}

.glyphicon-filter:before {
  content: "\e138";
}

.glyphicon-fullscreen:before {
  content: "\e140";
}

.glyphicon-dashboard:before {
  content: "\e141";
}

.glyphicon-heart-empty:before {
  content: "\e143";
}

.glyphicon-link:before {
  content: "\e144";
}

.glyphicon-phone:before {
  content: "\e145";
}

.glyphicon-usd:before {
  content: "\e148";
}

.glyphicon-gbp:before {
  content: "\e149";
}

.glyphicon-sort:before {
  content: "\e150";
}

.glyphicon-sort-by-alphabet:before {
  content: "\e151";
}

.glyphicon-sort-by-alphabet-alt:before {
  content: "\e152";
}

.glyphicon-sort-by-order:before {
  content: "\e153";
}

.glyphicon-sort-by-order-alt:before {
  content: "\e154";
}

.glyphicon-sort-by-attributes:before {
  content: "\e155";
}

.glyphicon-sort-by-attributes-alt:before {
  content: "\e156";
}

.glyphicon-unchecked:before {
  content: "\e157";
}

.glyphicon-expand:before {
  content: "\e158";
}

.glyphicon-collapse-down:before {
  content: "\e159";
}

.glyphicon-collapse-up:before {
  content: "\e160";
}

.glyphicon-log-in:before {
  content: "\e161";
}

.glyphicon-flash:before {
  content: "\e162";
}

.glyphicon-log-out:before {
  content: "\e163";
}

.glyphicon-new-window:before {
  content: "\e164";
}

.glyphicon-record:before {
  content: "\e165";
}

.glyphicon-save:before {
  content: "\e166";
}

.glyphicon-open:before {
  content: "\e167";
}

.glyphicon-saved:before {
  content: "\e168";
}

.glyphicon-import:before {
  content: "\e169";
}

.glyphicon-export:before {
  content: "\e170";
}

.glyphicon-send:before {
  content: "\e171";
}

.glyphicon-floppy-disk:before {
  content: "\e172";
}

.glyphicon-floppy-saved:before {
  content: "\e173";
}

.glyphicon-floppy-remove:before {
  content: "\e174";
}

.glyphicon-floppy-save:before {
  content: "\e175";
}

.glyphicon-floppy-open:before {
  content: "\e176";
}

.glyphicon-credit-card:before {
  content: "\e177";
}

.glyphicon-transfer:before {
  content: "\e178";
}

.glyphicon-cutlery:before {
  content: "\e179";
}

.glyphicon-header:before {
  content: "\e180";
}

.glyphicon-compressed:before {
  content: "\e181";
}

.glyphicon-earphone:before {
  content: "\e182";
}

.glyphicon-phone-alt:before {
  content: "\e183";
}

.glyphicon-tower:before {
  content: "\e184";
}

.glyphicon-stats:before {
  content: "\e185";
}

.glyphicon-sd-video:before {
  content: "\e186";
}

.glyphicon-hd-video:before {
  content: "\e187";
}

.glyphicon-subtitles:before {
  content: "\e188";
}

.glyphicon-sound-stereo:before {
  content: "\e189";
}

.glyphicon-sound-dolby:before {
  content: "\e190";
}

.glyphicon-sound-5-1:before {
  content: "\e191";
}

.glyphicon-sound-6-1:before {
  content: "\e192";
}

.glyphicon-sound-7-1:before {
  content: "\e193";
}

.glyphicon-copyright-mark:before {
  content: "\e194";
}

.glyphicon-registration-mark:before {
  content: "\e195";
}

.glyphicon-cloud-download:before {
  content: "\e197";
}

.glyphicon-cloud-upload:before {
  content: "\e198";
}

.glyphicon-tree-conifer:before {
  content: "\e199";
}

.glyphicon-tree-deciduous:before {
  content: "\e200";
}

.glyphicon-briefcase:before {
  content: "\1f4bc";
}

.glyphicon-calendar:before {
  content: "\1f4c5";
}

.glyphicon-pushpin:before {
  content: "\1f4cc";
}

.glyphicon-paperclip:before {
  content: "\1f4ce";
}

.glyphicon-camera:before {
  content: "\1f4f7";
}

.glyphicon-lock:before {
  content: "\1f512";
}

.glyphicon-bell:before {
  content: "\1f514";
}

.glyphicon-bookmark:before {
  content: "\1f516";
}

.glyphicon-fire:before {
  content: "\1f525";
}

.glyphicon-wrench:before {
  content: "\1f527";
}



/*We are not using images, remove in time!!!*/

.ComTD {
  border: solid 1px #c8c8c8;
  border-right: none;
}

  .ComTD.ComTD100--1:first-child {
    border-right: solid 1px #c8c8c8;
    border-radius: 4px;
  }

  .ComTD:first-child {
    border-bottom-left-radius: 4px;
    border-top-left-radius: 4px;
  }

  .ComTD:last-child {
    border-bottom-right-radius: 4px;
    border-top-right-radius: 4px;
    border-right: solid 1px #c8c8c8;
  }

.ComTB {
  border-collapse: separate;
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
  margin: 0;
  padding-top: 0;
  background-position: left top;
  background-repeat: no-repeat;
  cursor: pointer;
  border-bottom: none;
  min-width: 200px;
  min-height: 25px;
}

.ComTB04--1 {
  background-image: url(../images/vote/comp-04--1.png);
}

.ComTB04-0 {
  background-image: url(../images/vote/comp-04-000.png);
}

.ComTB04-25 {
  background-image: url(../images/vote/comp-04-025.png);
}

.ComTB04-50 {
  background-image: url(../images/vote/comp-04-050.png);
}

.ComTB04-75 {
  background-image: url(../images/vote/comp-04-075.png);
}

.ComTB04-100 {
  background-image: url(../images/vote/comp-04-100.png);
}

.ComTB05--1 {
  background-image: url(../images/vote/comp-05--1.gif);
}

.ComTB05-0 {
  background-image: url(../images/vote/comp-05-000.gif);
}

.ComTB05-20 {
  background-image: url(../images/vote/comp-05-020.gif);
}

.ComTB05-40 {
  background-image: url(../images/vote/comp-05-040.gif);
}

.ComTB05-60 {
  background-image: url(../images/vote/comp-05-060.gif);
}

.ComTB05-80 {
  background-image: url(../images/vote/comp-05-080.gif);
}

.ComTB05-100 {
  background-image: url(../images/vote/comp-05-100.gif);
}

.ComTB07--1 {
  background-image: url(../images/vote/comp-07--1.png);
}

.ComTB07-0 {
  background-image: url(../images/vote/comp-07-000.png);
}

.ComTB07-14 {
  background-image: url(../images/vote/comp-07-014.png);
}

.ComTB07-29 {
  background-image: url(../images/vote/comp-07-029.png);
}

.ComTB07-43 {
  background-image: url(../images/vote/comp-07-043.png);
}

.ComTB07-57 {
  background-image: url(../images/vote/comp-07-057.png);
}

.ComTB07-71 {
  background-image: url(../images/vote/comp-07-071.png);
}

.ComTB07-86 {
  background-image: url(../images/vote/comp-07-086.png);
}

.ComTB07-100 {
  background-image: url(../images/vote/comp-07-100.png);
}

.ComTB010--1 {
  background-image: url(../images/vote/comp-010--1.png);
}

.ComTB010-0 {
  background-image: url(../images/vote/comp-010-000.png);
}

.ComTB010-10 {
  background-image: url(../images/vote/comp-010-010.png);
}

.ComTB010-20 {
  background-image: url(../images/vote/comp-010-020.png);
}

.ComTB010-30 {
  background-image: url(../images/vote/comp-010-030.png);
}

.ComTB010-40 {
  background-image: url(../images/vote/comp-010-040.png);
}

.ComTB010-50 {
  background-image: url(../images/vote/comp-010-050.png);
}

.ComTB010-60 {
  background-image: url(../images/vote/comp-010-060.png);
}

.ComTB010-70 {
  background-image: url(../images/vote/comp-010-070.png);
}

.ComTB010-80 {
  background-image: url(../images/vote/comp-010-080.png);
}

.ComTB010-90 {
  background-image: url(../images/vote/comp-010-090.png);
}

.ComTB010-100 {
  background-image: url(../images/vote/comp-010-100.png);
}


.ComTBYN--1 {
  background-image: url(../images/vote/comp-yn--1.gif);
}

.ComTBYN-0 {
  background-image: url(../images/vote/comp-yn-000.gif);
}

.ComTBYN-100 {
  background-image: url(../images/vote/comp-yn-100.gif);
}

.ComTB100--1 {
  background-image: url(../images/vote/comp-100--1.gif);
}

.ComTB100-0 {
  background-image: url(../images/vote/comp-100-000.gif);
}

.ComTB100-100 {
  background-image: url(../images/vote/comp-100-100.gif);
}

.ComTBSmiley04--1 {
  background-image: url(../images/vote/smiley-04--1.png);
}

.ComTBSmiley04-0 {
  background-image: url(../images/vote/smiley-04-000.png);
}

.ComTBSmiley04-25 {
  background-image: url(../images/vote/smiley-04-025.png);
}

.ComTBSmiley04-50 {
  background-image: url(../images/vote/smiley-04-050.png);
}

.ComTBSmiley04-75 {
  background-image: url(../images/vote/smiley-04-075.png);
}

.ComTBSmiley04-100 {
  background-image: url(../images/vote/smiley-04-100.png);
}

.ComTBSmiley02--1 {
  background-image: url(../images/vote/smiley-02--1.png);
}

.ComTBSmiley02-0 {
  background-image: url(../images/vote/smiley-02-000.png);
}

.ComTBSmiley02-50 {
  background-image: url(../images/vote/smiley-02-050.png);
}

.ComTBSmiley02-100 {
  background-image: url(../images/vote/smiley-02-100.png);
}

.ComTBSmileyColor04--1 {
  background-image: url(../images/vote/smileycolor-04--1.png);
}

.ComTBSmileyColor04-0 {
  background-image: url(../images/vote/smileycolor-04-000.png);
}

.ComTBSmileyColor04-25 {
  background-image: url(../images/vote/smileycolor-04-025.png);
}

.ComTBSmileyColor04-50 {
  background-image: url(../images/vote/smileycolor-04-050.png);
}

.ComTBSmileyColor04-75 {
  background-image: url(../images/vote/smileycolor-04-075.png);
}

.ComTBSmileyColor04-100 {
  background-image: url(../images/vote/smileycolor-04-100.png);
}

.ComTBSmileyColor02--1 {
  background-image: url(../images/vote/smileycolor-02--1.png);
}

.ComTBSmileyColor02-0 {
  background-image: url(../images/vote/smileycolor-02-000.png);
}

.ComTBSmileyColor02-50 {
  background-image: url(../images/vote/smileycolor-02-050.png);
}

.ComTBSmileyColor02-100 {
  background-image: url(../images/vote/smileycolor-02-100.png);
}

.ComInpRes {
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  border-bottom-style: none;
  background-color: transparent;
  text-align: right;
}

.ComTDInfo {
  vertical-align: middle;
  text-align: right;
}

.ComTD05--1, .ComTD010--1, .ComTD04--1, .ComTD07--1, .ComTD100--1 {
  width: 30px;
}


.ComTD100--1, .ComTD100-0 {
  text-align: center;
  vertical-align: middle;
}

.ComTD100-100 {
  text-align: center;
  vertical-align: middle;
}

.ComTD05--1, .ComTD05-0, .ComTD05-20, .ComTD05-40, .ComTD05-60, .ComTD05-80, .ComTD05-100, .ComTD010--1, .ComTD010-0, .ComTDSmiley04-0, .ComTDSmiley04-25, .ComTDSmiley04-50, .ComTDSmiley04-75, .ComTDSmiley04-100, .ComTDSmileyColor04-0, .ComTDSmileyColor04-25, .ComTDSmileyColor04-50, .ComTDSmileyColor04-75, .ComTDSmileyColor04-100, .ComTD07--1, .ComTD07-0 {
  text-align: center;
  vertical-align: middle;
}

.ComTD04--1, .ComTD04-0 {
  text-align: center;
  vertical-align: middle;
}

.ComTD04-25, .ComTD04-50, .ComTD04-75, .ComTD04-100 {
  text-align: center;
  vertical-align: middle;
}

.ComTB04-0 .ComTD04-0 {
  background-color: #FF0000;
}

.ComTB04-25 .ComTD04-0, .ComTB04-25 .ComTD04-25 {
  background-color: #FF7F00;
}

.ComTB04-50 .ComTD04-0, .ComTB04-50 .ComTD04-25, .ComTB04-50 .ComTD04-50 {
  background-color: #FFFF00;
}

.ComTB04-75 .ComTD04-0, .ComTB04-75 .ComTD04-25, .ComTB04-75 .ComTD04-50, .ComTB04-75 .ComTD04-75 {
  background-color: #7FFF00;
}

.ComTB04-100 .ComTD04-0, .ComTB04-100 .ComTD04-25, .ComTB04-100 .ComTD04-50, .ComTB04-100 .ComTD04-75, .ComTB04-100 .ComTD04-100 {
  background-color: #00CC00;
}



.ComTD07-100 {
  text-align: center;
  vertical-align: middle;
}

.ComTD07-14, .ComTD07-29, .ComTD07-43, .ComTD07-57, .ComTD07-71, .ComTD07-86 {
  text-align: center;
  vertical-align: middle;
}

.ComTB07--1 .ComTD07--1 {
  background-color: #6495ED;
}

.ComTB07-0 .ComTD07-0 {
  background-color: #FF0000;
}

.ComTB07-14 .ComTD07-0, .ComTB07-14 .ComTD07-14 {
  background-color: #FF4700;
}

.ComTB07-29 .ComTD07-0, .ComTB07-29 .ComTD07-14, .ComTB07-29 .ComTD07-29 {
  background-color: #FF9400;
}

.ComTB07-43 .ComTD07-0, .ComTB07-43 .ComTD07-14, .ComTB07-43 .ComTD07-29, .ComTB07-43 .ComTD07-43 {
  background-color: #FFDB00;
}

.ComTB07-57 .ComTD07-0, .ComTB07-57 .ComTD07-14, .ComTB07-57 .ComTD07-29, .ComTB07-57 .ComTD07-43, .ComTB07-57 .ComTD07-57 {
  background-color: #DBFF00;
}

.ComTB07-71 .ComTD07-0, .ComTB07-71 .ComTD07-14, .ComTB07-71 .ComTD07-29, .ComTB07-71 .ComTD07-43, .ComTB07-71 .ComTD07-57, .ComTB07-71 .ComTD07-71 {
  background-color: #94FF00;
}

.ComTB07-86 .ComTD07-0, .ComTB07-86 .ComTD07-14, .ComTB07-86 .ComTD07-29, .ComTB07-86 .ComTD07-43, .ComTB07-86 .ComTD07-57, .ComTB07-86 .ComTD07-71, .ComTB07-86 .ComTD07-86 {
  background-color: #42FF00;
}

.ComTB07-100 .ComTD07-0, .ComTB07-100 .ComTD07-14, .ComTB07-100 .ComTD07-29, .ComTB07-100 .ComTD07-43, .ComTB07-100 .ComTD07-57, .ComTB07-100 .ComTD07-71, .ComTB07-100 .ComTD07-86, .ComTB07-100 .ComTD07-100 {
  background-color: #00CC00;
}





.ComTD010-10, .ComTD010-20, .ComTD010-30, .ComTD010-40, .ComTD010-50, .ComTD010-60, .ComTD010-70, .ComTD010-80, .ComTD010-90, .ComTD010-100 {
  text-align: center;
  vertical-align: middle;
  width: 15px;
}

.ComTD010-100 {
  width: 20px;
}

.ComTDSmileyColor02-0, .ComTDSmileyColor02-50, .ComTDSmileyColor02-100, .ComTDSmiley02-0, .ComTDSmiley02-50, .ComTDSmiley02-100 {
  text-align: center;
  vertical-align: middle;
}

.ComTDSmiley04--1, .ComTDSmileyColor04--1, .ComTDSmileyColor02--1, .ComTDSmileyColor02--1 {
  text-align: center;
  vertical-align: middle;
}

.ComTDYN-100 {
  vertical-align: middle;
  text-align: left;
}



.ComInp {
  border-top-style: none;
  border-right-style: none;
  border-left-style: none;
  border-bottom-style: none;
}


.EvalQuestion {
  max-width: 800px;
}

  .EvalQuestion .ComTB {
    min-width: 550px;
    min-height: 30px;
  }

  .EvalQuestion .ComTD {
    min-width: 50px;
  }

  .EvalQuestion .count, .EvalCatalog .count {
  }

  .EvalQuestion .answer .value {
    display: none;
  }

  .EvalQuestion .answer .importance {
    padding-top: 10px;
  }


.ComTB010--1, .ComTB010-0, .ComTB010-10, .ComTB010-20, .ComTB010-30, .ComTB010-40, .ComTB010-50, .ComTB010-60, .ComTB010-70, .ComTB010-80, .ComTB010-90, .ComTB010-100 {
  width: auto;
  background-image: none;
}

  .ComTB010--1 .ComTD010--1 {
    background-color: #6495ED;
  }

  .ComTB010-0 .ComTD010-0 {
    background-color: #FF0000;
  }

  .ComTB010-10 .ComTD010-0, .ComTB010-10 .ComTD010-10 {
    background-color: #FF3300;
  }

  .ComTB010-20 .ComTD010-0, .ComTB010-20 .ComTD010-10, .ComTB010-20 .ComTD010-20 {
    background-color: #FF6600;
  }

  .ComTB010-30 .ComTD010-0, .ComTB010-30 .ComTD010-10, .ComTB010-30 .ComTD010-20, .ComTB010-30 .ComTD010-30 {
    background-color: #FF9900;
  }

  .ComTB010-40 .ComTD010-0, .ComTB010-40 .ComTD010-10, .ComTB010-40 .ComTD010-20, .ComTB010-40 .ComTD010-30, .ComTB010-40 .ComTD010-40 {
    background-color: #FFCC00;
  }

  .ComTB010-50 .ComTD010-0, .ComTB010-50 .ComTD010-10, .ComTB010-50 .ComTD010-20, .ComTB010-50 .ComTD010-30, .ComTB010-50 .ComTD010-40, .ComTB010-50 .ComTD010-50 {
    background-color: #FFFF00;
  }

  .ComTB010-60 .ComTD010-0, .ComTB010-60 .ComTD010-10, .ComTB010-60 .ComTD010-20, .ComTB010-60 .ComTD010-30, .ComTB010-60 .ComTD010-40, .ComTB010-60 .ComTD010-50, .ComTB010-60 .ComTD010-60 {
    background-color: #CCFF00;
  }

  .ComTB010-70 .ComTD010-0, .ComTB010-70 .ComTD010-10, .ComTB010-70 .ComTD010-20, .ComTB010-70 .ComTD010-30, .ComTB010-70 .ComTD010-40, .ComTB010-70 .ComTD010-50, .ComTB010-70 .ComTD010-60, .ComTB010-70 .ComTD010-70 {
    background-color: #99FF00;
  }

  .ComTB010-80 .ComTD010-0, .ComTB010-80 .ComTD010-10, .ComTB010-80 .ComTD010-20, .ComTB010-80 .ComTD010-30, .ComTB010-80 .ComTD010-40, .ComTB010-80 .ComTD010-50, .ComTB010-80 .ComTD010-60, .ComTB010-80 .ComTD010-70, .ComTB010-80 .ComTD010-80 {
    background-color: #66FF00;
  }

  .ComTB010-90 .ComTD010-0, .ComTB010-90 .ComTD010-10, .ComTB010-90 .ComTD010-20, .ComTB010-90 .ComTD010-30, .ComTB010-90 .ComTD010-40, .ComTB010-90 .ComTD010-50, .ComTB010-90 .ComTD010-60, .ComTB010-90 .ComTD010-70, .ComTB010-90 .ComTD010-80, .ComTB010-90 .ComTD010-90 {
    background-color: #33FF00;
  }

  .ComTB010-100 .ComTD010-0, .ComTB010-100 .ComTD010-10, .ComTB010-100 .ComTD010-20, .ComTB010-100 .ComTD010-30, .ComTB010-100 .ComTD010-40, .ComTB010-100 .ComTD010-50, .ComTB010-100 .ComTD010-60, .ComTB010-100 .ComTD010-70, .ComTB010-100 .ComTD010-80, .ComTB010-100 .ComTD010-90, .ComTB010-100 .ComTD010-100 {
    background-color: #00CC00;
  }

.ComTD010--1 div::after {
  content: "?";
}

.ComTD010-0 div::after {
  content: "0";
}

.ComTD010-10 div::after {
  content: "1"
}

.ComTD010-20 div::after {
  content: "2";
}

.ComTD010-30 div::after {
  content: "3";
}

.ComTD010-40 div::after {
  content: "4";
}

.ComTD010-50 div::after {
  content: "5";
}

.ComTD010-60 div::after {
  content: "6";
}

.ComTD010-70 div::after {
  content: "7";
}

.ComTD010-80 div::after {
  content: "8";
}

.ComTD010-90 div::after {
  content: "9";
}

.ComTD010-100 div::after {
  content: "10";
}



.ComTDYN--1, .ComTDYN-0, .ComTDYN-100 {
  text-align: center;
  vertical-align: middle;
  background-image: none;
}

.ComTDYN-0, .ComTDYN-100 {
  width: 85px;
}

.ComTDYN--1 div::after {
  content: "?";
}

.ComTDYN-0 div::after {
  content: "No";
}

.ComTDYN-100 div::after {
  content: "Yes";
}

.ComTBYN--1 .ComTDYN--1 {
  background-color: #6495ED;
}

.ComTBYN-0 .ComTDYN-0 {
  background-color: #FF0000;
}

.ComTBYN-100 .ComTDYN-100 {
  background-color: #00CC00;
}

.ComTBYN--1, .ComTBYN-0, .ComTBYN-100 {
  background-image: none;
}

.ComTB100--1 .ComTD100--1 {
  background-color: #6495ED;
}

.ComTD100--1 div::after {
  content: "?";
}

.ComTB100--1, .ComTB100-0, .ComTB100-100 {
  background-image: none;
}

.ComTD100 {
  padding: 0 10px 0 10px;
}

.ComTB05--1, .ComTB05-0, .ComTB05-20, .ComTB05-40, .ComTB05-60, .ComTB05-80, .ComTB05-100 {
  background-image: none;
}

.ComTD05--1, .ComTD05-0 {
}

.ComTD05-20, .ComTD05-40, .ComTD05-60, .ComTD05-80, .ComTD05-100 {
}

.ComTB05--1 .ComTD05--1 {
  background-color: #6495ED;
}

.ComTB05-0 .ComTD05-0 {
  background-color: #FF0000;
}

.ComTB05-20 .ComTD05-0, .ComTB05-20 .ComTD05-20 {
  background-color: #FF6600;
}

.ComTB05-40 .ComTD05-0, .ComTB05-40 .ComTD05-20, .ComTB05-40 .ComTD05-40 {
  background-color: #FFCC00;
}

.ComTB05-60 .ComTD05-0, .ComTB05-60 .ComTD05-20, .ComTB05-60 .ComTD05-40, .ComTB05-60 .ComTD05-60 {
  background-color: #CCFF00;
}

.ComTB05-80 .ComTD05-0, .ComTB05-80 .ComTD05-20, .ComTB05-80 .ComTD05-40, .ComTB05-80 .ComTD05-60, .ComTB05-80 .ComTD05-80 {
  background-color: #66FF00;
}

.ComTB05-100 .ComTD05-0, .ComTB05-100 .ComTD05-20, .ComTB05-100 .ComTD05-40, .ComTB05-100 .ComTD05-60, .ComTB05-100 .ComTD05-80, .ComTB05-100 .ComTD05-100 {
  background-color: #00CC00;
}

.ComTD05--1 div::after {
  content: "?";
}

.ComTD05-0 div::after {
  content: "0";
}

.ComTD05-20 div::after {
  content: "1"
}

.ComTD05-40 div::after {
  content: "2";
}

.ComTD05-60 div::after {
  content: "3";
}

.ComTD05-80 div::after {
  content: "4";
}

.ComTD05-100 div::after {
  content: "5";
}

.ComTB04--1, .ComTB04-0, .ComTB04-25, .ComTB04-50, .ComTB04-75, .ComTB04-100 {
  background-image: none;
}

.ComTD04--1 div::after {
  content: "?";
}

.ComTD04-0 div::after {
  content: "0";
}

.ComTD04-25 div::after {
  content: "1";
}

.ComTD04-50 div::after {
  content: "2";
}

.ComTD04-75 div::after {
  content: "3";
}

.ComTD04-100 div::after {
  content: "4";
}


.ComTB07--1, .ComTB07-0, .ComTB07-14, .ComTB07-29, .ComTB07-43, .ComTB07-57, .ComTB07-71, .ComTB07-86, .ComTB07-100 {
  background-image: none;
}

.ComTD07--1 div::after {
  content: "?";
}

.ComTD07-0 div::after {
  content: "0";
}

.ComTD07-14 div::after {
  content: "1";
}

.ComTD07-29 div::after {
  content: "2";
}

.ComTD07-43 div::after {
  content: "3";
}

.ComTD07-57 div::after {
  content: "4";
}

.ComTD07-71 div::after {
  content: "5";
}

.ComTD07-86 div::after {
  content: "6";
}

.ComTD07-100 div::after {
  content: "7";
}

.EvalQuestion .MainEditDiv {
  max-width: 557px;
}

.EvalQuestion .MainEditDivBody {
  min-height: 100px;
}


.ComTDYN--1, .ComTD05--1, .ComTD07--1, .ComTD010--1 {
  vertical-align: middle;
  text-align: center;
  width: 30px;
}

  .ComTDYN--1 div, .ComTD05--1 div, .ComTD07--1 div, .ComTD010--1 div {
  }


/* 
 ----------------------------------------------------------
 SECTION "Generic"
---------------------------------------------------------- 
*/
:root {
  --banner-back-color: #234f63;
  --menu-sel-back-color: transparent;
  --nav1-back-color: #3f6577;
  --nav1-color: #FFF;
  --nav1-hover-back-color: rgb(49, 143, 173);
  --nav1-hover-color: #316ac5;
  --nav1-sel-back-color: rgb(49, 143, 173);
  --nav1-sel-color: #FFF;
  --nav2-back-color: rgba(88, 88, 88, 1);
  --nav2-color: #FFF;
  --nav2-hover-back-color: rgb(49, 143, 173);
  --nav2-hover-color: #FFF;
  --nav2-sel-back-color: #808080;
  --nav2-sel-color: #FFF;
  --nav2-head-back-color: rgb(186, 185, 185);
  --nav2-head-color: #000;
  --nav3-back-color: rgb(121, 121, 121);
  --nav3-color: #FFF;
  --nav3-hover-back-color: rgb(64, 160, 191);
  --nav3-hover-color: #FFF;
  --nav3-sel-back-color: rgb(49, 143, 173);
  --nav3-sel-color: #FFF;
  --toolbox-back-color: rgba(229, 229, 229, 1);
  --toolbox-color: #000;
  --toolbox-hover-back-color: rgba(49, 142, 172, 1);
  --toolbox-hover-color: #FFF;
  --action-hover-back-color: rgba(49, 142, 172, 1);
  --chart-hover-border-color: rgba(49, 142, 172, 1);
  --a-color: #318fad;
  --a-hover-color: #26748e;
  --a-active-color: #78C1DD;
  --filter-btn-back-color: #18607d;
}
/*update css min*/
@-ms-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-webkit-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}


article, aside, details, figcaption, figure, footer, header, hgroup, nav, section, summary {
  display: block;
}
/*Used for setting class on html when scroll*/
#scrolled-height-1, #scrolled-height-2, #scrolled-height-3, #scrolled-left-1, #scrolled-left-2, #scrolled-left-3, #scrolled-top-1, #scrolled-top-2, #scrolled-top-3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  display: block;
}

html, input, select, textarea {
  font-size: 13px;
  font-family: "Proxima Nova", "Segoe UI",Thonburi,Arial,Verdana,Sans-Serif,"Lucida Grande", Helvetica;
  color: #000000;
}

  /*hide the x on input to clear content*/
  input[type="search"]::-webkit-search-decoration,
  input[type="search"]::-webkit-search-cancel-button,
  input[type="search"]::-webkit-search-results-button,
  input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
  }

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  background-color: #ffffff;
}

  body *[onclick] {
    cursor: pointer !important;
  }

::-webkit-input-placeholder {
  color: #999;
}

:-moz-placeholder {
  color: #999;
}

::-moz-placeholder {
  color: #999;
}

:-ms-input-placeholder {
  color: #999;
}

a:focus {
  outline: none;
}

img {
  border: none;
  display: table-cell; /*removes whitespace after*/
  margin: 0;
}

.C img {
  /*display: table-cell removes whitespace after but also align left*/
  margin-left: auto;
  margin-right: auto;
}

button {
  cursor: pointer;
}

select {
  cursor: pointer;
}

input[size="5"] {
  width: 50px;
}

input[size="10"] {
  width: 90px;
}
input[size="20"] {
  width: 150px;
}
input[size="40"] {
  width: 250px;
}
input[size="50"] {
  width: 250px;
}

sub {
  padding: 0;
  margin: 0;
  position: relative;
  top: -2px;
  line-height: 5px;
}


blockquote {
  font-weight: normal;
  margin: 0 10px 0;
}




/*Scrollbar overlapping*/
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  html {
    margin-right: 17px;
  }
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  padding: 0;
  margin: 0;
}

td {
  padding: 0;
}

th {
  padding: 0;
  font-weight: normal;
  color: #000000;
  border-bottom: #6e8295 1px solid;
  border-bottom-color: #CCCCCC;
  vertical-align: bottom;
}

p {
  margin-top: 3px;
  margin-bottom: 3px;
}

hr {
  padding-bottom: 0;
  color: #000000;
  padding-top: 0;
  height: 1px;
}

h1 {
  margin: 0;
  font-weight: lighter;
  font-size: 30px;
  padding: 0;
}

h2 {
  padding-top: 0;
  margin-top: 0;
  font-weight: lighter;
  font-size: 25px;
  max-width: 500px;
}

h3 {
  font-weight: lighter;
  font-size: 22px;
  max-width: 800px;
}

h4 {
  margin: 0;
  margin-top: 10px;
  font-size: 20px;
  font-weight: lighter;
  max-width: 800px;
}

h5 {
  margin-top: 2px;
  font-weight: normal;
  font-size: 14px;
  margin-bottom: 2px;
  max-width: 800px;
}

h6 {
  padding-right: 0;
  padding-left: 0;
  font-weight: normal;
  font-size: 11px;
  padding-bottom: 0;
  margin: 0;
  color: #ff0066;
  padding-top: 0;
  text-align: center;
  max-width: 800px;
}


li {
  padding-bottom: 5px;
}

ul {
  margin-left: 15px;
  padding-inline-start: 0px;
}

form {
  padding: 0;
  margin: 0;
}

textarea {
  padding-left: 3px;
  padding-bottom: 0;
  padding-top: 0;
}

input:focus {
  border-color: #000;
}



input, button, select, textarea {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  font-size: 100%;
}

button, input {
  line-height: normal;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

td.changed {
  border-left-color: #6060ff;
  border-left-style: solid;
  border-left-width: 3px;
  color: #777;
}
.Compare {
  display: none;
  padding-left: 5px;
  margin-left: 10px;
}
.TDInp .Compare {
  line-height: 31px;
}
  .Compare.changed, .Compare.changed-onload {
    display: inline-block;
    border-left-style: solid;
    border-left-width: 3px;
    color: #777;

  }
  .Compare.changed-onload {
    border-left-color: #8080ff;
  }
  .Compare.changed {
    border-left-color: rgb(35, 35, 192);
  }
.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.opacity-full {
  opacity: 1;
  transition: opacity 0.5s;
}

.opacity-half {
  opacity: 0.5;
  transition: opacity 0.5s;
}

.nobr, .TDRGnobr, .TDRBBnobr {
  white-space: nowrap;
}

.TD, .td {
  padding: 6px;
}

.TH, .th, .th-sort {
  padding: 6px;
}

.NA {
  cursor: default;
}


.TD2 {
  min-width: 33px;
}


.TDInp {
  padding: 4px 1px;
}

.TDTxt {
  padding: 11px 9px;
}

.TDInp2 {
  padding-top: 1px;
  min-width: 33px;
}

.TDImg {
  padding-right: 0;
  padding-left: 0;
  padding-bottom: 0;
  padding-top: 0;
}

.TD[valign='top'] {
  vertical-align: top;
}

.TDTop {
  padding: 6px;
  padding-top: 11px;
  vertical-align: top;
}

.TDSpace {
  padding-right: 0;
  padding-left: 0;
  font-size: 3px;
  padding-bottom: 0;
  margin: 0;
  padding-top: 0;
  height: 8px;
}

.Top, .VT {
  vertical-align: top;
}


.Bottom, .VB {
  vertical-align: bottom;
}

.L {
  text-align: left;
}

.C {
  text-align: center;
}

  .C > * {
    margin-left: auto;
    margin-right: auto;
    float: none !important
  }

.R {
  text-align: right;
}

  .R > div,
  .R > input,
  .R > img {
    float: right !important; /*table-cell dont allow align right*/
  }


.J {
  text-align: justify;
}

.B {
  font-weight: bold;
}

.I {
  font-style: italic !important;
}

.H {
  cursor: help;
}

.G, .Gray {
  color: #777 !important;
}

.E, .Error, .Red {
  color: #CC3333 !important;
}

.ReqBG {
  background-position: left top;
  background-image: url('../images/stripeRed.gif');
  background-repeat: repeat;
}

.Line-through, .Line-through TEXTAREA, .Line-through DIV, .Line-through INPUT {
  text-decoration: line-through;
}

.Green {
  color: #467246 !important;
}

.Blue {
  color: #0052A4 !important;
}

.Orange {
  color: #FF6600 !important;
}

.StripedCC2 {
  background-position: left top;
  background-image: url('../images/stripeCC2.gif');
  background-repeat: repeat;
}

.StripedLight {
  background-position: left top;
  background-image: url('../images/stripeGrayLight.gif');
  background-repeat: repeat;
}

.StripedRed {
  background-position: left top;
  background-image: url('../images/stripeRed.gif');
  background-repeat: repeat;
}

.NM {
  margin: 0;
}

.NP {
  padding: 0;
}

.NB {
  border: none !important;
}

.PR {
  padding-right: 15px;
}

.BB, .TDRBBnobr {
  border-bottom: #cccccc 1px solid;
}

.BB2 {
  border-bottom: #7ba4e0 2px solid;
}

.BT {
  border-top: #cccccc 1px solid;
}

.BT2 {
  border-top: #cccccc 2px solid !important;
}

.BR {
  border-right: #cccccc 1px solid;
}

.BR2 {
  border-right: #cccccc 2px solid;
}

.BRG {
  border-right: #CCCCCC 1px thin !important;
}

.BL {
  border-left: #cccccc 1px solid;
}

.BL2 {
  border-left: #cccccc 2px solid !important;
}

.BLB { /* Border Left Bold */
  border-left: 2px solid #cccccc !important;
}

.BWT { /* Border Horz 1px Vert 2px */
  border-width: 1px 2px;
}

.BR3 {
  border-right: #333 2px solid;
}

.BL3 {
  border-left: #333 2px solid;
}

.BT3 {
  border-top: #333 3px solid;
}

.BB3 {
  border-bottom: #333 3px solid;
}






.table {
  display: table;
  margin-bottom: 0px !important;
}

.table-header {
  display: table-row;
}

.table-footer {
  display: table-row;
}

.table-row {
  display: table-row;
}

  .table-row:nth-child(even) {
    background-color: #F0F0F0;
  }

    .table-row:nth-child(even):hover,
    .table-row:nth-child(even).hover,
    .table-row:nth-child(even) .hover,
    .table-row:nth-child(even).Over,
    .table-row:nth-child(even).sel {
      background-color: #E9E9E9;
    }

  .table-row:nth-child(odd) {
    background-color: #FFFFFF;
  }

    .table-row:nth-child(odd):hover,
    .table-row:nth-child(odd).hover,
    .table-row:nth-child(odd) .hover,
    .table-row:nth-child(odd).Over,
    .table-row:nth-child(odd).sel {
      background-color: #F3F3F3;
    }

.table-row-group {
  display: table-row-group;
}

.table-caption {
  display: table-caption;
}

.table-cell {
  display: table-cell;
  padding-left: 2px;
  vertical-align:middle;
}

.table-action {
  display: table;
  margin-top: 0px !important;
}

.middle {
  vertical-align: middle;
}

.bottom {
  vertical-align: bottom;
}

.center > * {
  margin-left: auto;
  margin-right: auto;
}


.Desc {
  background-position: left center;
  background-image: url("cubes_images/cubes_sort_pil_op.gif");
  padding-left: 13px !important;
  background-repeat: no-repeat;
}

.Asc {
  background-position: left center;
  padding-left: 13px !important;
  background-image: url("cubes_images/cubes_sort_pil_down.gif");
  background-repeat: no-repeat;
}

.btn {
  display: inline-block;
  padding: 5px 10px;
  margin: 0px;
  font-weight: normal;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  min-height: 31px;
  line-height:19px;
  color: #333333;
  background-color: #dddddd;
  background-position: 3px center;
  background-repeat: no-repeat;
  background-size: auto 20px;
}

  .btn:visited {
    color: #333333;
  }

  .btn.small {
    font-size: 12px;
    line-height: 16px;
    height: 20px;
  }

  .btn:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }

  .btn:hover,
  .btn:focus {
    color: #000;
    text-decoration: none;
    border-color: #000;
    background-color: rgba(49, 142, 172, 1);
    color: #fff;
    border-color: rgba(49, 142, 172, 1);
    outline: 0;
  }

  .btn:active,
  .btn.active {
    color: #000;
    text-decoration: none;
    border-color: #000;
    background-color: rgba(49, 142, 172, 1);
    color: #fff;
    border-color: rgba(49, 142, 172, 1);
    outline: 0;
  }

  a.disabled,
  .TD.disabled,
  .TD:disabled,
  td.disabled,
  li.disabled,
  li.disabled *,
  .btn:disabled,
  .btn.disabled,
  .btn[disabled],
  fieldset[disabled] .btn,
  input:disabled,
  input.disabled,
  select:disabled {
    cursor: not-allowed !important;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
  }

.btn-left {
  margin-right: -1px;
}

.btn-right {
  margin-left: -1px;
}

.btn-middle {
}

select, .MainSel, .MainSel100, .MainSelect, .MainSel0, .MainSel1 {
}




.MainText100, .MainText, .MainEditDivBody, .form-control, select, .MainSel, .MainSel100, .MainSelect, .MainSel0, .MainSel1, .MainInp, .MainInpR, .MainInpTime, .MainInp1, .MainInp0, .MainInp100, .MainInpNum {
  max-width: 310px;
  min-width: 31px;
  min-height: 31px;
  display: block;
  padding: 6px 4px;
  background-color: #fcfcfc;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
  -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  float: left;
}

  .MainText100:focus, .MainText:focus .MainEditDivBody:focus, .form-control:focus, select:focus, .MainSel:focus, .MainSel100:focus, .MainSelect:focus, .MainSel0:focus, .MainSel1:focus, .MainInp:focus, .MainInpTime:focus, .MainInpR:focus, .MainInp1:focus, .MainInp0:focus, .MainInp100:focus, .MainInpNum:focus, .ql-body:focus-within, .CodeMirror-body:focus-within {
    border-color: #66afe9;
    background-color: #fff;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.6);
  }

  .MainInpCBox:hover::-ms-check, .MainText100:hover, .MainText:hover .MainEditDivBody:hover, .btn:hover, .form-control:hover, .MainSel:hover, .MainSel100:hover, .MainSelect:hover, .MainSel0:hover, .MainSel1:hover, .MainInp:hover, .MainInpTime:hover, .MainInpR:hover, .MainInp1:hover, .MainInp0:hover, .MainInp100:hover, .MainInpNum:hover {
    border-color: #66afe9;
  }

div.MainSel {
  background-image: url(../images/svg-black/move-down-01.svg);
  background-size:9px 9px;
  background-position: calc(100% - 4px) 11px;
  background-repeat:no-repeat;
}


/*Set parent to diaplay block*/
*:has( > .MainText100), *:has( > .MainText) {
  display: inline-block;
}

td:has( > .MainText100), td:has( > .MainText) {
  display: table-cell;
}


/* Cross-browser consistent dropdown arrow */
select.MainSel, select.MainSelect {
  padding-right: 16px;
  background-image: url('../images/dropdownarrow-01.png');
  background-position-x: right;
  background-position-y: center;
  background-repeat: no-repeat;
  -moz-appearance: none;
  -webkit-appearance: none;
  -ms-appearance: none;
}

  select.MainSel::-ms-expand, select.MainSelect::-ms-expand {
    display: none;
  }


.MainEditDivBody {
  min-width: 150px;
}



.MainText100 {
  padding-bottom: 0;
  overflow: auto;
  width: 100%;
  padding-top: 5px 4px;
  max-width: 450px;
  min-width: 450px;
}

select::-ms-expand {
  background-color: #ffffff;
  border: none;
  color: #808080;
}

select:hover::-ms-expand {
  color: #66afe9;
}

input[type=file]::-ms-browse {
  background-color: transparent;
  border: none;
  color: #999;
}

input[type=file]::-ms-value {
  border: none;
  background-color: transparent;
}

.MainInp[onkeyup*="DisplaySearch"], .MainInpSearch {
  background-image: url('cubes_images/cubes-ban-search-loop.png');
  background-position: center right 4px;
  background-repeat: no-repeat;
}

  .MainInp[onkeyup*="DisplaySearch"]::-ms-clear, .MainInpSearch::-ms-clear {
    display: none;
  }


input[type='radio'] {
  margin: 4px 0 0;
  margin-top: 1px \9;
  line-height: normal;
  padding: 0;
  height: 16px;
  width: 16px;
}
/* The switch - the box around the slider */
/* The switch - the box around the slider */
.MainInpCBoxSwitch {
  position: relative;
  display: inline-block;
  width: 39px;
  height: 31px;
  float: left;
  left: 0px;
  top: 0px;
}
.TDInp .MainInpCBoxSwitch {
}
/*Stativ for display value*/
.TD div.MainInpCBoxSwitch {
  left: -2px;
  top: -1px;
  cursor: text;
}
label.MainInpCBoxSwitch {
  cursor: text;
}
div.MainInpCBoxSwitch::after {
  line-height: 31px;
}
.cell-value label.MainInpCBoxSwitch {
}
.cell-element.static:has( > div.MainInpCBoxSwitch) {
  margin-top:0;
}

div.MainInpCBoxSwitch .slider {
  cursor: text;
}
/* Hide default HTML checkbox */
.MainInpCBox, .MainInpCBox:disabled {
  opacity: 0;
  width: 40px;
  height: auto;
}

  /* The slider */
  .MainInpCBox + .slider, div.MainInpCBoxSwitch .slider {
    position: absolute;
    cursor: pointer;
    top: 11px;
    left: 0;
    right: 0;
    bottom: 9px;
    background-color: #ffffff;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075);
    -webkit-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
    border: 1px solid #aaa;
    border-radius: 8px;
    -webkit-transition: .2s;
    transition: .2s;
  }

    .MainInpCBox + .slider:before, div.MainInpCBoxSwitch .slider:before {
      position: absolute;
      content: "";
      height: 21px;
      width: 21px;
      left: -1px;
      top: -6px;
      border: 1px solid #aaa;
      border-radius: 50%;
      background-image: none;
      background-repeat: no-repeat;
      background-position: 2px 2px;
      background-size: 15px;
      background-color: #fff;
      -webkit-transition: .2s;
      transition: .2s;
    }
  .MainInpCBox:focus + .slider {
    border-color: #66afe9;
    outline: 0;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.6);
  }

    .MainInpCBox:focus + .slider:before {
      border-color: #66afe9;
    }

  .MainInpCBox:checked + .slider:before, div.MainInpCBoxSwitch.checked .slider:before {
    background-color: rgb(13, 110, 253);
    background-image: url('../images/svg-white/check-01.svg');
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }

  .MainInpCBox:disabled + .slider {
    cursor: not-allowed;
    opacity: 0.50;
    filter: alpha(opacity=50);
    -webkit-box-shadow: none;
    box-shadow: none;
  }
div.MainInpCBoxSwitch .slider {
  cursor: help;
  opacity: 0.50;
  filter: alpha(opacity=50);
  -webkit-box-shadow: none;
  box-shadow: none;
}




div[id$='_DispDataValue'] {
  display:inline-block;
}

*[onmouseover^=popOver]:not([onmouseover="popOver(this,\'Title\',\'\');"]) {
  cursor:help;
}


.MainSel0 {
  background-color: #f4f4f4;
}


.MainInpR {
  text-align: right;
}

.MainInp1 {
  background-color: transparent;
}

.MainInp0 {
  background-color: transparent;
}

.MainInp100 {
  overflow: hidden;
  width: 100%;
  max-width: 450px;
}

.MainText {
  overflow: visible;
}

.MainText100 {
  overflow: visible;
}

.MainInpNum {
  text-align: right;
}

.MainInpTime {
  text-align: right;
  width: 50px;
}

.MainSel100 {
  overflow: hidden;
  min-width: 100%;
}

@media all /*ServerWorking*/ {

  .ServerWorking {
    position: fixed;
    z-index: 100001;
    width: 300px;
    height: 100px;
    top: 45%;
    left: 50%;
  }

    .ServerWorking div {
      width: 300px;
      height: 100px;
      margin-left: -150px;
      margin-top: -50px;
      line-height: 100px;
      text-align: center;
      background-position: 15px center;
      background-image: url(../images/loading32x32.gif);
      background-repeat: no-repeat;
      background-color: #ececec;
      visibility: visible;
      white-space: nowrap;
      font-size: 17px;
      font-weight: bold;
      color: #000000;
      padding-left: 40px;
      animation: borderBlackGray 1s linear 0 infinite alternate;
      -webkit-animation: borderBlackGray 1s ease-in-out infinite;
      border: solid 1px #999;
      border-radius: 10px;
      -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
      -moz-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
      box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
    }

  @keyframes borderBlackGray {
    0% {
      border-color: #999;
      -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
      -moz-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
      box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
    }

    50% {
      border-color: #aaa;
      -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,.5);
      -moz-box-shadow: 2px 2px 9px 0 rgba(0,0,0,.5);
      box-shadow: 2px 2px 9px 0 rgba(0,0,0,.5);
    }

    100% {
      border-color: #999;
      -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
      -moz-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
      box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
    }
  }

  .ServerWorkingBody {
    z-index: 100000;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #fff;
    background-color: rgba(236, 236, 236,.5);
    width: 100%;
    height: 100%;
  }
}

@media all /*PopEdit PopLoader PopDisplay*/ {
  /***********************************************************************************************
  EDIT PUPOP to be discontinued
************************************************************************************************/

  #EditIFrame {
    background-color: Transparent;
  }

  .DisplayEditBodyDiv {
    -webkit-box-shadow: 5px 5px 2000px 2000px rgba(0,0,0,0.6);
    -moz-box-shadow: 5px 5px 2000px 2000px rgba(0,0,0,0.6);
    -ms-box-shadow: 5px 5px 2000px 2000px rgba(0,0,0,0.6);
    box-shadow: 5px 5px 2000px 2000px rgba(0,0,0,0.6);
    display: block;
    height: 0;
    width: 0;
    -o-transition: box-shadow 1s 0 ease;
    -webkit-transition: box-shadow 1s 0 ease;
    -moz-transition: box-shadow 1s 0 ease;
    -ms-transition: box-shadow 1s 0 ease;
    transition: box-shadow 1s 0 ease;
  }

  body:hover .DisplayEditBodyDiv {
    -webkit-box-shadow: 5px 5px 2000px 2000px rgba(0,0,0,0.4);
    -moz-box-shadow: 5px 5px 2000px 2000px rgba(0,0,0,0.4);
    -ms-box-shadow: 5px 5px 2000px 2000px rgba(0,0,0,0.4);
    box-shadow: 5px 5px 2000px 2000px rgba(0,0,0,0.4);
    -o-transition: box-shadow 0.4s 0 ease;
    -webkit-transition: box-shadow 0.4s 0 ease;
    -moz-transition: box-shadow 0.4s 0 ease;
    -ms-transition: box-shadow 0.4s 0 ease;
    transition: box-shadow 0.4s 0 ease;
  }

  .PopDisplay {
    display: block;
    margin: 0;
    padding: 0;
  }


  .PopDisplayDiv.project {
    display: table;
  }

    .PopDisplayDiv.project .info {
      display: table-cell;
      vertical-align: top;
      min-height: 80px;
    }

    .PopDisplayDiv.project .title {
      color: #fff;
    }

    .PopDisplayDiv.project .info > .title {
      min-height: 40px;
      line-height: 40px;
      font-weight: bold;
      text-align: center;
      vertical-align: middle;
      padding: 5px;
      background-color: #ccc;
    }

    .PopDisplayDiv.project .info .person {
      min-height: 40px;
      text-align: center;
      padding: 5px;
    }

      .PopDisplayDiv.project .info .person .title {
        opacity: 0.7;
        color: #000;
      }

    .PopDisplayDiv.project .image {
      display: table-cell;
      vertical-align: top;
    }

  .PopDisplayTable {
    width: 310px;
  }

  .PopDisplayImageTD {
    overflow: hidden;
    vertical-align: middle;
    text-align: center;
    padding: 5px;
    width: 100px;
  }

  .PopDisplayTextTD {
    vertical-align: top;
    overflow: hidden;
    padding: 0;
    width: 210px;
  }

  .PopDisplayTable.contact .PopDisplayIconTD {
    border: none;
    width: 40px;
  }

  .PopDisplayTable.contact .PopDisplayTextTD {
    border: none;
    width: 210px;
  }

  .PopDisplayTable.contact {
  }

    .PopDisplayTable.contact td {
      vertical-align: top;
      padding: 5px !important;
    }

    .PopDisplayTable.contact .MainIcon {
      width: 16px;
      opacity: .3;
      background-position: top center;
    }


  .PopEditHeadTDLeft {
  }

  .PopEditTopCenter, .PopEditTopLeft, .PopEditTopRight {
    text-align: center;
    background-color: #f9f8f7;
    padding-right: 15px;
    padding-left: 5px;
    padding-bottom: 2px;
    padding-top: 2px;
    font-weight: bold;
  }

  .PopEditHeadTDCenterDiv {
    text-align: center;
    font-weight: bold;
  }

  .PopEditHeadTDRight {
    text-align: right;
  }

  .DisplayEditCloseDiv {
    background-image: url(../images/svg-black/window-close-01.svg);
    background-repeat: no-repeat;
    background-position: 23px center;
    background-size: 16px 16px;
    width: 45px;
    height: 20px;
    position: absolute;
    top: 1px;
    right: 1px;
    display: block;
    cursor: pointer;
    border-top-right-radius: 3px;
  }

  .PopEditMiddelCenterDiv {
    padding-bottom: 4px;
    padding-top: 4px;
    background-color: #FEFEFE;
  }

  .PopEditBottomCenter, .PopEditBottomLeft, .PopEditBottomRight {
    text-align: center;
    background-color: #f9f8f7;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 4px;
    padding-top: 2px;
    font-weight: bold;
  }

  #pop_edit_competence .PopEditBottomCenter {
    font-weight: normal;
  }

  .PopEditBottomRight {
    text-align: right;
  }

  .PopEditBottomLeft {
    text-align: left;
  }

  .PopEditBottomTable {
    width: 100%;
  }

  #PopEditBodyDiv {
    background-color: #f9f8f7;
    border-radius: 7px;
    overflow: hidden;
  }

  .PopEditBody {
    background: transparent;
  }




  .PopHidden {
    display: none;
    z-index: 1000;
    position: absolute;
    text-align: center;
  }

  .PopLoading {
    border-right: #666666 1px solid;
    border-top: #666666 1px solid;
    border-left: #666666 1px solid;
    border-bottom: #666666 1px solid;
    z-index: 100;
    position: absolute;
    background-color: #ffffff;
  }

  .PopDisplay {
    z-index: 100000;
    position: absolute;
    display: block;
  }

  .PopDisplayText {
    z-index: 100000;
    padding: 10px;
    padding-top: 5px;
    text-align: center;
  }

  .PopTable {
  }

  .PopTableTitle {
    background-color: #f9f8f7;
    margin: -3px;
    border-bottom: #666666 1px solid;
    margin-bottom: 10px;
    padding: 3px;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
  }

  .PopTD {
    margin: 0;
    padding: 3px;
    position: relative;
    z-index: inherit;
  }


  .PopPersonImageBody {
    text-align: center;
  }

  .PopPerson, .PopPersonRElation {
    width: 63px;
    float: left;
  }

  .PopPersonImageDivOff, .PopPersonImageDivOver, .PopPersonImageDivDown {
    width: 62px;
    height: 97px;
    margin: 1px 1px 1px 0;
    float: left;
  }

  .PopPersonImageInnerDiv {
    width: 60px;
    height: 80px;
    overflow: hidden;
  }

  .PopPersonImageImageInfo {
    width: 60px;
    height: 80px;
    display: none;
    overflow: hidden;
    font-size: 11px;
  }

  .PopPersonImageInfoDiv {
    border-style: none solid solid solid;
    border-width: 1px;
    border-color: #C0C0C0;
    width: 60px;
    height: 14px;
    background-color: #EEE;
    overflow: hidden;
    font-size: 11px;
  }

  .PopPersonRelation .PopPersonImageDivOff .PopPersonImageInfoDiv {
    background-color: #A6A6A6;
    border-color: #A6A6A6;
    font-weight: normal;
  }

  .PopPersonRelation .PopPersonImageDivOver .PopPersonImageInfoDiv {
    font-weight: normal;
  }

  .PopPersonImageInnerNoImageDiv {
    padding: 1px;
    width: 60px;
    height: 80px;
    overflow: hidden;
    background-position: left top;
    background-repeat: no-repeat;
    background-image: url('../images/nophoto_person.gif');
    font-size: 11px;
  }

  .PopPersonImageTopDiv {
    display: none;
  }



  .PopPersonImageInfoDiv {
  }

  .PopPersonImageDivOver .PopPersonImageInnerDiv, .PopPersonImageDivDown .PopPersonImageInnerDiv {
  }

  .PopPersonImageDivOver .PopPersonImageInfoDiv, .PopPersonImageDivDown .PopPersonImageInfoDiv {
  }

  .PopPersonImageDivOff .PopPersonImageInfoDiv.B {
    font-weight: normal;
  }

  .PopPersonImageDivOver .PopPersonImageInfoDiv.B {
    font-weight: normal;
  }
}

/***********************************************************************************************
  OTHER
************************************************************************************************/


.Drag {
  cursor: move;
}

.AbsentVacationCalendarDetailed TD DIV {
  height: 16px;
  width: 16px;
}

.AbsentVacationCalendarColor TD DIV {
  height: 16px;
  width: 16px;
}

.AbsentVacationCalendarColor TD {
  border-color: #FFFFFF;
}



/* local fix to reveal background-image */
.view_absence_list td span.MainIcon {
  display: block;
}

#Absence_TypeLabel_Color {
  border-radius: 0;
  height: 30px;
}


input.MainAIcon {
  padding: 0;
  margin: 0;
  border-style: none;
  background-color: transparent;
  width: 16px;
  height: 16px;
}

.MainIcon {
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 16px;
  height: 16px;
  display: inline-block;
  background-size: 16px 16px;
}

.Icon {
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 16px;
  min-height: 16px;
  min-width: 16px;
  display: block;
  background-size: 16px 16px;
}

.MainIcon.C {
  background-position: center center !important;
}

.BtnIcon {
  background-position: 3px center;
  background-repeat: no-repeat;
  padding-left: 35px;
}

.IconSmallLockClosed {
  background-image: url('cubes_images/icon_lock.gif');
  background-repeat: no-repeat;
  background-position: left 2px;
  width: 15px;
  height: 14px;
  clear: none;
  float: left;
}

.IconSmallLockOpen {
  background-image: url('cubes_images/icon_lock_open.gif');
  background-repeat: no-repeat;
  background-position: left center;
  width: 14px;
  height: 12px;
  clear: none;
  float: left;
}





.FormatDisabled .IconStyleBold {
  background-color: #CC33FF;
  background-image: none;
}

.MapPersonContent {
  border: 1px solid #FF0000;
}

#DoDisplayTitle,
.PopDisplayDiv {
  background-color: rgb(234, 234, 234);
  border-radius: 10px;
  overflow: hidden;
  -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
  -moz-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
  box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
}

#DoDisplayTitle {
  background-color: rgb(245, 245, 245);
  border-radius: 5px;
  overflow: hidden;
  -webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.25);
  -moz-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.25);
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.25);
}

.PopDIV {
  padding: 2px;
}

#CalendarTable .TD {
  padding: 4px 6px;
}


.MainTHSpace {
  padding: 0;
  font-size: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  border-left-style: none !important;
  border-left-color: inherit !important;
  border-left-width: medium;
  border-right-style: none !important;
  border-right-color: inherit !important;
  border-right-width: medium;
  border-top-style: none !important;
  border-top-color: inherit !important;
  border-top-width: medium;
  border-bottom-style: none !important;
  border-bottom-color: inherit !important;
  border-bottom-width: medium;
}

.CalenderLongDate {
  color: #666666;
}

@media all /*Bulletin*/ {
  /***********************************************************************************************
  BULLETIN
************************************************************************************************/

  .Bulletin {
  }

    .Bulletin .BulletinAddTable {
      border-style: none;
    }

    .Bulletin .BulletinTitleBodyClosed .BulletinTitleTD {
      background-image: url('../images/icon/menu_left_icon_open.gif');
    }

    .Bulletin .BulletinTitleBodyEdit .BulletinTitleTD {
      background-image: url('../images/icon/menu_left_icon_none.gif');
    }

    .Bulletin .BulletinTitleTD {
      border-style: none;
      background-repeat: no-repeat;
      padding-top: 20px;
    }

    .Bulletin .BulletinTitleTable {
      border-width: 1px;
      border-color: #CCCCCC;
      border-style: none none solid none;
      background-color: transparent;
    }

    .Bulletin .BulletinImageTD {
      width: 45px;
      text-align: left;
      vertical-align: top;
      padding-top: 5px;
    }

    .Bulletin .BulletinDescriptionTD {
      padding-top: 3px;
    }

    .Bulletin .BulletinDeleteTD, .Bulletin .BulletinEditTD, .Bulletin .BulletininAddFileTD {
      width: 18px;
    }

    .Bulletin .BulletinEditByDiv {
      padding-top: 4px;
      padding-bottom: 4px;
      color: #808080;
      clear: both;
    }

    .Bulletin .BulletinFilesDiv TD {
      padding-top: 4px;
      font-weight: bold;
    }

    .Bulletin .BulletinFilesImageDiv {
      padding: 0;
      margin: 2px;
      border: none;
      float: left;
      clear: none;
      text-align: center;
      vertical-align: middle;
      overflow: hidden;
      cursor: progress;
    }

    .Bulletin .BulletinFileListDiv {
      clear: both;
    }

      .Bulletin .BulletinFileListDiv UL {
        margin: 0;
        padding: 0;
        width: 100px;
      }

    .Bulletin .BulletinFileOff, .Bulletin .BulletinFileOver, .Bulletin .BulletinFileDown, .Bulletin .BulletinFileSel {
      margin: 0;
      padding-right: 7px;
      padding-left: 25px;
      padding-top: 4px;
      background-position: 4px 3px;
      background-repeat: no-repeat;
      height: 22px;
      color: #5985a5;
      text-decoration: underline;
      font-size: 11px;
      list-style-type: none;
      cursor: pointer;
      white-space: nowrap;
    }

    .Bulletin .BulletinFileOver {
      color: #cc0000;
    }

    .Bulletin .BulletinDontLikeTD, .Bulletin .BulletinLikeTD, .Bulletin .BulletinLikeTextTD, .Bulletin .BulletinCommentCountTD {
      border-top-style: none;
      border-bottom-style: none;
      height: 20px;
    }

    .Bulletin .BulletinLikeTD {
      font-weight: bold;
      padding-left: 25px;
      width: 40px;
      border-left-style: none;
    }

    .Bulletin .BulletinDontLikeTD {
      font-weight: bold;
      width: 40px;
    }

    .Bulletin .BulletinCommentCountTD {
      border-right-style: none;
      text-align: right;
      padding-right: 5px;
    }

      .Bulletin .BulletinCommentCountTD A {
        cursor: pointer;
        text-decoration: underline;
      }

    .Bulletin .BulletinLikeOff, .Bulletin .BulletinLikeOver, .Bulletin .BulletinLikeDown, .Bulletin .BulletinLikeSel, .Bulletin .BulletinLikeNA {
      font-size: 10px;
      font-weight: normal;
      color: #666666;
      padding-top: 3px;
      padding-left: 16px;
      background-repeat: no-repeat;
      background-position: left center;
    }

    .Bulletin .BulletinLikeSel, .Bulletin .BulletinLikeDown {
      font-weight: bold;
      color: #0000CC;
    }

    .Bulletin .BulletinDontLikeOff, .Bulletin .BulletinDontLikeOver, .Bulletin .BulletinDontLikeDown, .Bulletin .BulletinDontLikeSel, .Bulletin .BulletinDontLikeNA {
      font-size: 10px;
      font-weight: normal;
      color: #666666;
      padding-top: 3px;
      padding-left: 16px;
      background-repeat: no-repeat;
      background-position: left center;
    }

    .Bulletin .BulletinDontLikeSel, .Bulletin .BulletinDontLikeDown {
      color: #cc0000;
    }

    .Bulletin .BulletinLikeOff,
    .Bulletin .BulletinLikeOver,
    .Bulletin .BulletinLikeDown,
    .Bulletin .BulletinLikeSel,
    .Bulletin .BulletinLikeNA, .icon_like {
      background-image: url('../images/svg-black/like-01.svg');
    }

    .Bulletin .BulletinDontLikeOff,
    .Bulletin .BulletinDontLikeOver,
    .Bulletin .BulletinDontLikeDown,
    .Bulletin .BulletinDontLikeSel,
    .Bulletin .BulletinDontLikeNA, .icon_dislike {
      background-image: url('../images/svg-black/dislike-01.svg');
    }

    .Bulletin .BulletinCommentIconTD {
      background-color: #F0F0F0;
      border-bottom-style: none;
      border-left-style: none;
      width: 20px;
      padding: 2px 0 2px 4px;
    }

    .Bulletin .BulletinCommentAddTextTD {
      background-color: #F0F0F0;
      padding: 2px;
      border-bottom-style: none;
      border-right-style: none;
    }

    .Bulletin .BulletinCommentAddInputTD {
      background-color: #F0F0F0;
      border-bottom-style: none;
      padding-right: 2px;
      padding-bottom: 2px;
      padding-left: 2px;
    }

    .Bulletin .BulletinCommentTextTD, .Bulletin .BulletinCommentStyleTD, .Bulletin .BulletinCommentImageTD, .Bulletin .BulletinCommentDeleteTD {
      border-bottom-style: none;
      padding-top: 2px;
      padding-bottom: 2px;
      text-align: left;
      vertical-align: top;
    }

    .Bulletin .BulletinCommentStyleTD {
      width: 100px;
    }

    .Bulletin .BulletinCommentAddBtnTD {
      width: 40px;
      border-right-style: none;
      border-bottom-style: none;
    }

    .Bulletin .BulletinCommentAddImageTD {
      border-left-style: none;
      border-bottom-style: none;
    }

    .Bulletin .BulletinCommentImageTD {
      border-left-style: none;
    }

    .Bulletin .BulletinCommentDeleteTD {
      width: 18px;
      border-right-style: none;
    }
}

@media all /*Gallery*/ {
  /***********************************************************************************************
  GALLERY
************************************************************************************************/
  .Gallery {
  }

    .Gallery .GalleryBody {
      border: 1px solid #0E4152;
    }

    .Gallery .GalleryFullScreen {
      background-color: #000000;
    }

    .Gallery .GalleryLargeBody {
      overflow: hidden;
    }

    .Gallery .GalleryLarge {
      background-image: url('../images/LoadingBlack.gif');
      background-position: center center;
      background-repeat: no-repeat;
      cursor: pointer;
      background-color: #000000;
    }

    .Gallery .GalleryThumpOff, .Gallery .GalleryThumpOver, .Gallery .GalleryThumpDown, .Gallery .GalleryThumpSel {
      border-color: #0E4152;
      border-style: solid;
      margin-right: 0;
      border-width: 0 0 2px 0;
      float: left;
      cursor: pointer;
      background-color: #000000;
      overflow: hidden;
    }

    .Gallery .GalleryThumpOver {
      border-color: #999999;
    }

    .Gallery .GalleryThumpDown {
      border-color: #999999;
    }

    .Gallery .GalleryThumpSel {
      border-color: #cccccc;
    }

    .Gallery .GalleryMenuBody {
      margin-top: 0;
      height: 28px;
      background-color: #000;
    }

      .Gallery .GalleryMenuBody TD {
        height: 28px;
      }

        .Gallery .GalleryMenuBody TD DIV {
          color: #FFFFFF;
        }

    .Gallery .GalleryMenuCount {
      width: 50px;
      text-align: center;
    }

    .Gallery .GalleryMenuPrevOff, .Gallery .GalleryMenuPrevOver, .Gallery .GalleryMenuPrevDown, .Gallery .GalleryMenuPrevSel {
      cursor: pointer;
      background-image: url('cubes_images/GalleryPrev.png');
      background-repeat: no-repeat;
      background-position: left center;
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryMenuPrevOff {
      background-image: url('cubes_images/GalleryPrevOff.png');
    }

    .Gallery .GalleryMenuNextOff, .Gallery .GalleryMenuNextOver, .Gallery .GalleryMenuNextDown, .Gallery .GalleryMenuNextSel {
      cursor: pointer;
      background-image: url('cubes_images/GalleryNext.png');
      background-repeat: no-repeat;
      background-position: right center;
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryMenuNextOff, .Gallery .GalleryMenuNextSel {
      background-image: url('cubes_images/GalleryNextOff.png');
    }

    .Gallery .GalleryMenuPlayOff, .Gallery .GalleryMenuPlayOver, .Gallery .GalleryMenuPlayDown, .Gallery .GalleryMenuPlaySel {
      cursor: pointer;
      background-image: url('cubes_images/GalleryPlayOver.png');
      background-repeat: no-repeat;
      background-position: center center;
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryMenuPlayOff, .Gallery .GalleryMenuPlaySel {
      background-image: url('cubes_images/GalleryPlayOff.png');
    }

    .Gallery .GalleryMenuPauseOff, .Gallery .GalleryMenuPauseOver, .Gallery .GalleryMenuPauseDown, .Gallery .GalleryMenuPauseSel {
      cursor: pointer;
      background-image: url('cubes_images/GalleryPause.png');
      background-repeat: no-repeat;
      background-position: center center;
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryMenuPauseOff {
      background-image: url('cubes_images/GalleryPauseOff.png');
    }

    .Gallery .GalleryMenuDownloadOff, .Gallery .GalleryMenuDownloadOver, .Gallery .GalleryMenuDownloadDown, .Gallery .GalleryMenuDownloadSel {
      cursor: pointer;
      background-image: url('cubes_images/GalleryDownload.png');
      background-repeat: no-repeat;
      background-position: center center;
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryMenuDownloadOff {
      background-image: url('cubes_images/GalleryDownloadOff.png');
    }

    .Gallery .GalleryMenuFullScreenOff, .Gallery .GalleryMenuFullScreenOver, .Gallery .GalleryMenuFullScreenDown, .Gallery .GalleryMenuFullScreenSel {
      cursor: pointer;
      background-image: url('cubes_images/GalleryFullScreen.png');
      background-repeat: no-repeat;
      background-position: center center;
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryMenuFullScreenOff {
      background-image: url('cubes_images/GalleryFullScreenOff.png');
    }

    .Gallery .GalleryMenuNormalScreenOff, .Gallery .GalleryMenuNormalScreenOver, .Gallery .GalleryMenuNormalScreenDown, .Gallery .GalleryMenuNormalScreenSel {
      cursor: pointer;
      background-image: url('cubes_images/GalleryNormalScreen.png');
      background-repeat: no-repeat;
      background-position: center center;
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryMenuNormalScreenOff {
      background-image: url('cubes_images/GalleryNormalScreenOff.png');
    }

    .Gallery .GalleryMenuTitle {
      text-align: center;
      padding-right: 122px;
    }

    .Gallery .GalleryThumpBody {
      background-color: #000000;
      height: 26px;
    }

    .Gallery .GalleryThumpPrevOff, .Gallery .GalleryThumpPrevOver, .Gallery .GalleryThumpPrevDown, .Gallery .GalleryThumpPrevSel {
      cursor: pointer;
      background-repeat: no-repeat;
      background-position: left center;
      background-image: url('cubes_images/GalleryThumpPrev.png');
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryThumpPrevOff, .Gallery .GalleryThumpPrevSel {
      background-image: url('cubes_images/GalleryThumpPrevOff.png');
    }

    .Gallery .GalleryThumpNextOff, .Gallery .GalleryThumpNextOver, .Gallery .GalleryThumpNextDown, .Gallery .GalleryThumpNextSel {
      cursor: pointer;
      background-image: url('cubes_images/GalleryThumpNext.png');
      background-repeat: no-repeat;
      background-position: right center;
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryThumpNextOff {
      background-image: url('cubes_images/GalleryThumpNextOff.png');
    }

    .Gallery .GalleryMenuThumpShowAllOff, .Gallery .GalleryMenuThumpShowAllOver, .Gallery .GalleryMenuThumpShowAllDown, .Gallery .GalleryMenuThumpShowAllSel {
      cursor: pointer;
      background-image: url('cubes_images/GalleryMenuThumpShowAll.png');
      background-repeat: no-repeat;
      background-position: center center;
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryMenuThumpShowAllOff {
      background-image: url('cubes_images/GalleryMenuThumpShowAllOff.png');
    }

    .Gallery .GalleryMenuThumpShowOneRowOff, .Gallery .GalleryMenuThumpShowOneRowOver, .Gallery .GalleryMenuThumpShowOneRowDown, .Gallery .GalleryMenuThumpShowOneRowSel {
      cursor: pointer;
      background-image: url('cubes_images/GalleryMenuThumpShowOneRow.png');
      background-repeat: no-repeat;
      background-position: center center;
      width: 28px;
      height: 26px;
    }

    .Gallery .GalleryMenuThumpShowOneRowOff {
      background-image: url('cubes_images/GalleryMenuThumpShowOneRowOff.png');
    }
}

@media all /*'Content Cont'*/ {
  /***********************************************************************************************
  CONTENT
************************************************************************************************/
  .ContImage, .ContImage DIV {
    height: 18px;
    overflow: hidden;
  }

  .ContImageNA {
    padding-right: 7px;
    padding-left: 2px;
    width: 100%;
    padding-top: 1px;
    padding-bottom: 1px;
    background-position: 4px 3px;
    background-repeat: no-repeat;
    color: #CCC;
    text-decoration: none;
  }

  .ContImageOff {
    padding-right: 7px;
    padding-left: 2px;
    width: 100%;
    padding-top: 1px;
    padding-bottom: 1px;
    background-position: 4px 3px;
    background-repeat: no-repeat;
    color: #000000;
    text-decoration: none;
  }

    .ContImageOver, .ContImageOff:hover {
      color: #cc0000;
      padding-right: 7px;
      padding-left: 2px;
      width: 100%;
      padding-top: 1px;
      padding-bottom: 1px;
      cursor: pointer;
      background-color: #e1e1e1;
      background-position: 2px 1px;
      background-repeat: no-repeat;
      background-color: #dedddd;
    }

    .ContImageOff TD {
      color: #000;
    }

      .ContImageOver TD, .ContImageDown TD, .ContImageOff TD:hover {
        color: #000;
      }

  .ContImageDown {
    padding-right: 7px;
    padding-left: 2px;
    width: 100%;
    padding-top: 1px;
    padding-bottom: 1px;
    cursor: pointer;
    background-color: #d3d3d3;
    background-position: 2px 1px;
    background-repeat: no-repeat;
  }

  .ContImageNa {
    padding-right: 5px;
    padding-left: 2px;
    width: 100%;
    padding-top: 2px;
    padding-bottom: 2px;
    background-position: 4px 3px;
    background-repeat: no-repeat;
    cursor: default;
    color: #828282;
  }
}

@media all /*'EditNote'*/ {
  /***********************************************************************************************
  EditNote
************************************************************************************************/

  section.EditNote {
    background-color: rgb(246, 246, 246);
    border-top: none;
  }

  .MainBody section[data-section].EditNote {
    border-top: none;
    padding-top: 20px;
  }


  .EditNotePosts {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0 20px !important;
  }

  .EditNotePost {
    margin: 0 30px 30px 0;
    background-color: #FEFEFE;
    width: 330px;
    border-radius: 5px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-top: solid 5px #999;
  }

    .EditNotePost.closed {
      border-color: #ccc;
      background-image: url('../images/stripeGrayLight.gif')
    }

    .EditNotePost.open {
      border-color: #78C1DD;
    }

    .EditNotePost.future {
      border-color: rgba(35, 79, 99, 1);
    }

    .EditNotePost.followup {
      border-color: #cc0000;
    }

    .EditNotePost.future.followup {
      border-color: #ea9929;
    }

  .EditNoteDescription {
    padding: 4px;
  }

  .EditNoteDescriptionDivScrol {
    width: 326px;
    height: 80px;
    overflow: auto;
  }

  .EditNoteDescriptionDiv {
    width: 308px;
  }

  .EditNoteFollowupDate {
    padding: 2px 2px 2px 5px;
    color: #000000;
  }

  .EditNoteFollowup .EditNoteFollowupDate {
    color: #FF0000;
  }

  .EditNoteVisibleFrom {
    padding: 2px 2px 2px 5px;
    width: 70px;
    color: #666666;
    white-space: nowrap;
  }

  .EditNoteTitle {
    padding: 4px;
    font-weight: bold;
  }

  .EditNoteTitle {
    width: 250px;
    padding: 4px;
    font-weight: bold;
  }

  .EditNotePerson {
    padding: 4px;
  }

  .EditNoteEdit {
    text-align: right;
  }

  .EditNoteUrl {
    padding-right: 5px;
  }

  .EditNote .IconSmallLockClosed {
    padding-right: 5px;
  }

  .EditNoteFunction {
    float: none;
    clear: both;
    height: 25px;
    padding-top: 5px;
    margin: 0 20px !important;
  }

  .EditNoteAddNew {
    padding: 0 5px 0 10px;
    width: 140px;
    float: left;
  }

  .EditNoteShowAll {
    width: 120px;
    float: left;
    padding-right: 5px;
    padding-left: 5px;
  }
}


input.ContOff {
  border-style: none;
  background-color: transparent;
  text-align: left;
  padding-top: 0;
  width: 100%;
}

input.ContOver, input.ContDown {
  width: 100%;
  text-align: left;
  padding-top: 1px;
  padding-left: 27px;
  background-position: 1px 0;
}



.IconClosed {
  background-image: url('../images/icon/menu_left_icon_close.gif');
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 16px !important;
}

.IconOpen {
  background-image: url('../images/icon/menu_left_icon_open.gif');
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 16px !important;
}

.IconNA {
  background-image: url('../images/icon/menu_left_icon_na.gif');
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 16px !important;
}



.Number-1 {
  color: #CC0000;
}

.Number0 {
}

.Number1 {
  color: #009900;
}

.FooterHtml {
  display: none;
}

.Mark {
  cursor: crosshair;
}

.Hidden {
  visibility: hidden;
}

.DisplayNone {
  display: none;
}

.A {
  cursor: pointer;
}

.AOff, .AOver, .ADown, .ASel {
  color: #5985a5;
  text-decoration: underline;
  cursor: pointer;
}

.AOver, .ADown, .ASel {
  color: #318fad;
}




.edit_person_competence input[id^=Date] {
  min-height: 25px;
  padding: 2px 4px;
  margin: 3px 0;
}


@media all /*'PerTalk'*/ {

  .PerTalkTitle {
    font-size: 30px;
    text-align: center;
  }

  .PerTalkDescription {
    color: #777 !important;
  }

  .PerTalkValueHeader {
    padding: 20px;
  }

    .PerTalkValueHeader .Title {
      font-size: 22px;
    }

    .PerTalkValueHeader .Description {
    }

  .PerTalkValueGroup {
    padding-top: 30px;
    padding-bottom: 30px;
  }

    .PerTalkValueGroup .Title {
      font-size: 30px;
      text-align: center;
    }

    .PerTalkValueGroup .Description {
    }

  .PerTalkValue {
    margin-top: 5px;
    margin-bottom: 40px;
    margin-right: 20px;
    margin-left: 20px;
  }


    .PerTalkValue .Question {
      padding-bottom: 5px;
    }

      .PerTalkValue .Question .Title {
        font-size: 15px;
        padding-bottom: 3px;
      }

    .PerTalkValue .Row:hover .Title:before {
      content: "";
      position: relative;
      top: -5px;
      left: -5px;
      line-height: 0;
      font-size: 0;
      margin-left: -5px;
      width: 0;
      height: 120px;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 5px solid #000;
    }



    .PerTalkValue .Question .Description {
      font-size: 12px;
      color: #777 !important;
    }

    .PerTalkValue .Name {
      display: none;
    }

    .PerTalkValue .Image {
      padding-right: 10px;
      vertical-align: top;
    }

    .PerTalkValue .Value > *,
    .PerTalkValue .Value > * > *,
    .PerTalkValue .Value > * > * > *,
    .PerTalkValue .Value > * > * > * > *,
    .PerTalkValue .Value > * > * > * > * > *,
    .PerTalkValue .Value > * > * > * > * > * > *,
    .PerTalkValue .Value > * > * > * > * > * > * > *,
    .PerTalkValue .Value > * > * > * > * > * > * > * > *,
    .PerTalkValue .Value > * > * > * > * > * > * > * > * > * {
      border-color: transparent !important;
      border-width: 0 !important;
      box-shadow: none;
    }

    .PerTalkValue .Value:focus-within {
      border-color: #66afe9;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
      box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.6);
    }


    .PerTalkValue .Value {
      display: inline-block;
      position: relative;
      border: 1px solid #ccc;
      text-decoration: none;
      border-radius: 5px;
      padding: 0;
      background-color: transparent;
      margin-left: 5px;
      min-width: 300px;
      max-width: 800px;
      margin-top: 0px;
      min-height: 40px;
    }

      .PerTalkValue .Value .view {
        padding: 10px;
      }

      .PerTalkValue .Value .edit {
        padding: 5px;
      }

      .PerTalkValue .Value:after, .PerTalkValue .Value:before {
        border: solid transparent;
        content: " ";
        display: block;
        height: 0;
        position: absolute;
        pointer-events: none;
        width: 0;
        right: 100%;
      }

      .PerTalkValue .Value:before {
        border-color: transparent;
        border-width: 1px;
        border-right-color: #ccc;
        top: 20px;
        margin-top: -11px;
        border-width: 11px;
      }

      .PerTalkValue .Value:after {
        border-color: transparent;
        border-right-color: #FFF;
        top: 20px;
        margin-top: -10px;
        border-width: 10px;
      }



    .PerTalkValue .NotOwn .Value {
      color: #000 !important;
    }

    .PerTalkValue .Own .Value {
      color: #444 !important;
    }

    .PerTalkValue .Interviewer, .PerTalkValue .Person {
      padding-left: 10px;
    }

    .PerTalkValue .Person {
      padding-top: 5px;
    }

    .PerTalkValue .Note {
      font-style: italic !important;
      padding: 10px;
    }

    .PerTalkValue .NoteValue {
      color: #777 !important;
    }

    .PerTalkValue .DoDate {
      padding-left: 20px;
      padding-top: 5px;
    }

    .PerTalkValue .NotCompleted TD {
      color: #CC3333 !important;
    }

    .PerTalkValue .DoDate .Label {
      color: #777 !important;
      padding: 2px;
    }

    .PerTalkValue .DoDate .Date {
      padding: 2px;
    }

    .PerTalkValue .DoDate .ResponsibleLabel, .PerTalkValue .DoDate .CompletedLabel {
      color: #777 !important;
      padding: 2px;
    }

    .PerTalkValue .DoDate .Responsible, .PerTalkValue .DoDate .CompletedDate {
      padding: 2px;
    }

    .PerTalkValue .OtherInfo {
      padding-left: 20px;
    }

  .PerTalkApprove {
  }

    .PerTalkApprove .Label {
      font-size: 30px;
    }

  .PerTalkApproveAlert {
    color: #CC3333 !important;
    font-weight: bold;
  }




  .PerTalkValue.Agree {
    margin: 0;
    margin-left: 20px;
  }

    .PerTalkValue.Agree .Row {
      display: table-row;
    }

    .PerTalkValue.Agree:after {
      visibility: hidden;
      display: block;
      content: "";
      clear: both;
    }

    .PerTalkValue.Agree .Row > div {
      border: 1px solid #aaa;
      border-top: none;
      border-left: none;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

    .PerTalkValue.Agree.Options .Row > div {
      border-right: none;
    }

    .PerTalkValue.Agree .Row .Question {
      width: 400px;
      padding-right: 5px;
      padding-top: 5px;
      padding-bottom: 5px;
      border-bottom: none;
    }

    .PerTalkValue.Agree .Row .Question {
    }

    .PerTalkValue.Agree:hover .Row .Question {
    }

    .PerTalkValue.Agree.Question.Edit .Row .Option:hover > div {
      background-image: url('../images/svg-black/check-01.svg');
      background-size: 30px auto;
      background-repeat: no-repeat;
      background-position: center center;
      opacity: 0.4;
      height: 50px;
      width: 100px;
    }

    .PerTalkValue.Agree.Question .Row .Option.sel > div {
      background-image: url('../images/svg-black/check-01.svg');
      background-size: 30px auto;
      background-repeat: no-repeat;
      background-position: center center;
      opacity: 1;
      height: 50px;
      width: 100px;
    }

    .PerTalkValue.Agree.Question.Edit .Row:hover .Option.sel > div {
      opacity: .8;
    }

    .PerTalkValue.Agree .Row .Option {
      width: 100px;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

      .PerTalkValue.Agree .Row .Option > div {
        width: 100px;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
      }


    .PerTalkValue.Agree .Row .Question div {
      width: 400px;
      height: 50px;
      text-align: left;
      display: table-cell;
      vertical-align: middle;
    }

    .PerTalkValue.Agree.Options .Row .Question div {
      height: 30px;
    }

    .PerTalkValue.Agree.Options .Row .Option div {
      height: 30px;
      font-size: 15px;
    }

    .PerTalkValue.Agree .Row .Text {
      width: 500px;
      vertical-align: middle;
      margin-bottom: 100px;
    }



  .PROBATION_REVIEW .PerTalkValueHeader {
    padding-bottom: 0px;
  }

    .PROBATION_REVIEW .PerTalkValueHeader h3 {
      margin-bottom: 0px;
    }

  .PROBATION_REVIEW .PerTalkValue.Agree {
    margin: 0;
    margin-left: 20px;
  }

    .PROBATION_REVIEW .PerTalkValue.Agree .Row {
      display: table-row;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree:after {
      visibility: hidden;
      display: block;
      content: "";
      clear: both;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree .Row > div {
      border: 1px solid #aaa;
      border-top: none;
      border-left: none;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree.Options .Row > div {
      border-right: none;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree .Row .Question {
      width: 400px;
      padding-right: 5px;
      padding-top: 5px;
      padding-bottom: 5px;
      border-bottom: none;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree .Row .Question {
    }

    .PROBATION_REVIEW .PerTalkValue.Agree:hover .Row .Question {
    }

    .PROBATION_REVIEW .PerTalkValue.Agree.Question.Edit .Row .Option:hover > div {
      background-image: url('../images/svg-black/check-01.svg');
      background-size: 30px auto;
      background-repeat: no-repeat;
      background-position: center center;
      opacity: 0.4;
      height: 50px;
      width: 100px;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree.Question .Row .Option.sel > div {
      background-image: url('../images/svg-black/check-01.svg');
      background-size: 30px auto;
      background-repeat: no-repeat;
      background-position: center center;
      opacity: 1;
      height: 50px;
      width: 100px;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree.Question.Edit .Row:hover .Option.sel > div {
      opacity: .8;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree .Row .Option {
      width: 100px;
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }

      .PROBATION_REVIEW .PerTalkValue.Agree .Row .Option > div {
        width: 100px;
        text-align: center;
        display: table-cell;
        vertical-align: middle;
      }


    .PROBATION_REVIEW .PerTalkValue.Agree .Row .Question div {
      width: 400px;
      height: 50px;
      text-align: left;
      display: table-cell;
      vertical-align: middle;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree.Options .Row .Question div {
      height: 30px;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree.Options .Row .Option div {
      height: 30px;
      font-size: 15px;
    }

    .PROBATION_REVIEW .PerTalkValue.Agree .Row .Text {
      width: 500px;
      vertical-align: middle;
      margin-bottom: 100px;
    }

  .PROBATION_REVIEW .PerTalkValue.Question.PrevAgree:not(.Agree) .Row .Question .Title {
  }


  .PROBATION_REVIEW .PerTalkValue {
    padding-top: 20px;
    padding-bottom: 20px;
  }

    .PROBATION_REVIEW .PerTalkValue.Agree {
      padding-top: 0px;
      padding-bottom: 0px;
    }

    .PROBATION_REVIEW .PerTalkValue.PrevAgree {
      padding-top: 0px;
      padding-bottom: 0px;
      margin-top: 0;
      clear: both;
    }

      .PROBATION_REVIEW .PerTalkValue.PrevAgree:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
      }

    .PROBATION_REVIEW .PerTalkValue.Question.PrevAgree .Row {
    }

    .PROBATION_REVIEW .PerTalkValue.Question.PrevAgree .Question {
      width: 400px;
      vertical-align: bottom;
    }

      .PROBATION_REVIEW .PerTalkValue.Question.PrevAgree .Question .Title {
        height: 50px;
        display: table-cell;
        vertical-align: bottom;
      }

    .PROBATION_REVIEW .PerTalkValue.Question.PrevAgree .Text {
      width: 500px;
    }

      .PROBATION_REVIEW .PerTalkValue.Question.PrevAgree .Text .view {
        padding: 5px;
        font-style: italic;
      }

      .PROBATION_REVIEW .PerTalkValue.Question.PrevAgree .Text textarea {
        width: 901px;
        max-width: 901px;
        margin-top: -1px;
        margin-left: -1px;
        min-height: 50px;
      }
      /*Add space for change icon*/
      .PROBATION_REVIEW .PerTalkValue.Question.PrevAgree .Text .edit {
        width: 920px;
      }

    .PROBATION_REVIEW .PerTalkValue.Question .Text textarea {
      width: 900px;
      max-width: 900px;
      min-height: 100px;
    }




  .PerTalkValue.Question.PrevAgree:not(.Agree) .Row .Question .Title {
  }




}

@media all /*'Questionnaire'*/ {
  .Questionnaire {
  }

    .Questionnaire * {
    }

    .Questionnaire .catalog {
      padding-top: 50px;
    }

      .Questionnaire .catalog .title {
        font-size: 25px;
      }

      .Questionnaire .catalog.level-0 .title {
        font-size: 28px;
        font-weight: lighter;
      }


      .Questionnaire .catalog .description {
        color: #666;
      }

    .Questionnaire .options.header {
      display: table;
      min-height: 50px;
    }

      .Questionnaire .options.header .description {
        display: table-cell;
        width: 400px;
      }

    .Questionnaire .options.question.header .value {
      display: table-cell;
      width: 100px;
      text-align: center;
      vertical-align: bottom;
      padding-bottom: 5px;
      border-bottom: 1px solid #ccc;
      border-left: none;
      border-right: none;
    }

    .Questionnaire .options.question:hover .text:before {
      content: "";
      position: relative;
      top: -5px;
      left: -5px;
      line-height: 0;
      font-size: 0;
      margin-left: -5px;
      width: 0;
      height: 120px;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 5px solid #000;
    }

    .Questionnaire .question {
      display: table;
      min-height: 50px;
    }

    .Questionnaire .options.question .text {
    }

    .Questionnaire .options.question .value {
      display: table-cell;
      width: 100px;
      text-align: center;
      vertical-align: middle;
    }

    .Questionnaire .options.question .value {
      border: 1px solid #aaa;
      border-right: none;
      border-top: none;
    }

    .Questionnaire .options.question:not(.header) .value:last-of-type {
      border-right: 1px solid #aaa;
    }

    .Questionnaire .options.edit .value:hover div {
      background-image: url('../images/svg-black/check-01.svg');
      background-size: 30px auto;
      background-repeat: no-repeat;
      background-position: center center;
      opacity: 0.4;
      width: 100%;
      height: 49px;
    }

    .Questionnaire .options .value.sel div {
      background-image: url('../images/svg-black/check-01.svg');
      background-size: 30px auto;
      background-repeat: no-repeat;
      background-position: center center;
      opacity: 1 !important;
      width: 100%;
      height: 49px;
    }

    .Questionnaire .question .text {
      display: table-cell;
      width: 400px;
      padding: 5px 10px 5px 0;
      vertical-align: middle;
    }

    .Questionnaire .question:hover .text {
    }

    .Questionnaire .question .value {
      display: table-cell;
      width: 530px;
      vertical-align: top;
    }

      .Questionnaire .question .value textarea {
        min-height: 50px;
        width: 500px;
        min-width: 500px;
        max-width: 500px;
        margin-top: -1px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

        .Questionnaire .question .value textarea.changed {
          margin-left: 0 !important;
          border-left-width: 1px !important;
        }


    .Questionnaire .question-detailed {
      display: table;
    }

      .Questionnaire .question-detailed .text {
        display: block;
        padding: 25px 10px 5px 0;
      }

      .Questionnaire .question-detailed textarea {
        min-height: 50px;
        min-width: 900px;
        max-width: 900px;
      }

      .Questionnaire .question-detailed .comment div {
        min-height: 50px;
        min-width: 900px;
        max-width: 900px;
      }

    .Questionnaire .question-select {
      min-height: 50px;
      display: table;
    }

      .Questionnaire .question-select .text {
        display: block;
        padding: 25px 10px 5px 0;
      }

    .Questionnaire .comment .answer, .Questionnaire .select .answer {
      border: 1px solid #aaa;
      padding: 6px 4px;
      border-radius: 4px;
    }

    .Questionnaire .question .value.comment .answer {
      min-height: 50px;
      width: 500px;
      min-width: 500px;
      max-width: 500px;
      margin-top: -1px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }
}

@media all /*'BannerRotator'*/ {
  .BannerRotator {
    overflow: hidden;
  }

    .BannerRotator .Inner {
      overflow: hidden;
    }

    .BannerRotator .Menu {
      position: absolute;
    }

  .BannerRotatorMenu {
    height: 15px;
    padding-bottom: 5px;
    padding-right: 5px;
    overflow: hidden;
  }

    .BannerRotatorMenu .Items {
    }

    .BannerRotatorMenu .ItemOff, .BannerRotatorMenu .ItemOver, .BannerRotatorMenu .ItemDown, .BannerRotatorMenu .ItemSel {
      background-position: center center;
      background-image: url('cubes_images/BannerRotatorMenuOff.png');
      background-repeat: no-repeat;
      cursor: pointer;
      width: 10px;
      height: 10px;
      float: left;
    }

    .BannerRotatorMenu .ItemOver {
      background-image: url('cubes_images/BannerRotatorMenuOver.png');
    }

    .BannerRotatorMenu .ItemSel {
      background-image: url('cubes_images/BannerRotatorMenuSel.png');
    }

    .BannerRotatorMenu .ItemDown {
      background-image: url('cubes_images/BannerRotatorMenuDown.png');
    }
}

@media all /*ContentRotator'*/ {
  .ContentRotator {
  }

    .ContentRotator ul {
      display: block;
      list-style: none;
    }

    .ContentRotator li {
      display: none; /*start hidden*/
      list-style: none;
    }

    .ContentRotator .content {
      display: block; /*show when init*/
      width: 100%;
      height: 100%;
      position: absolute;
      left: -100%;
      top: 0;
    }

      .ContentRotator .content.back-out {
        left: -100%;
        transition: all .5s 0 linear;
      }

      .ContentRotator .content.next-out {
        left: 100%;
        transition: all .5s 0 linear;
      }

      .ContentRotator .content.next-in {
        left: -100% !important;
        transition: nont !important;
      }

      .ContentRotator .content.back-in {
        left: 100% !important;
        transition: nont !important;
      }

      .ContentRotator .content.show {
        left: 0 !important;
        transition: all .5s 0 linear !important;
      }

    .ContentRotator .nav {
      position: absolute;
      right: 20px;
      bottom: 5px;
      height: 12px;
    }

      .ContentRotator .nav li {
        display: block;
        list-style: none;
        float: left;
        background-color: #fff;
        background-color: rgba(255,255,255,.3);
        width: 12px;
        height: 12px;
        border-radius: 6px;
        margin-right: 10px;
        cursor: pointer;
        text-indent: -9999px;
        overflow: hidden;
        box-shadow: 1px 1px 5px 0 rgba(0,0,0,0.1);
      }

        .ContentRotator .nav li.active {
          background-color: rgba(255,255,255,1);
          cursor: auto;
        }

    .ContentRotator .next {
      position: absolute;
      right: 0;
      top: 0;
      width: 32px;
      height: 100%;
      background-image: url('metro/navigate_right_white.png');
      background-position: 0 center;
      opacity: .2;
      background-repeat: no-repeat;
      cursor: pointer;
    }

      .ContentRotator .next:hover {
        opacity: 1;
        transition: all .1s 0 ease;
      }

    .ContentRotator .prev {
      position: absolute;
      left: 0;
      top: 0;
      width: 21px;
      height: 100%;
      background-image: url('metro/navigate_left_white.png');
      background-position: 2px center;
      background-repeat: no-repeat;
      cursor: pointer;
      opacity: .2;
    }

      .ContentRotator .prev:hover {
        opacity: 1;
        transition: all .1s 0 ease;
      }
}

@media all /*Footer'*/ {

  footer {
    height: 0;
  }

  .FooterMenuCulture li {
    width: 150px;
  }
}

.CalendarPrivateSmall {
  height: 9px;
  padding-right: 10px;
  background-position: center right;
  background-repeat: no-repeat;
  background-image: url(../images/icon/CalendarPrivateSmall.png);
}



@media all /*culture currency language flags'*/ {
  .culture .check,
  .currency .check,
  .language .check {
    width: 20px;
    height: 20px;
    background-size: 20px auto;
  }

  .culture tr:hover .check,
  .currency tr:hover .check,
  .language tr:hover .check {
    background-image: url('../images/svg-black/check-01.svg');
  }

  .culture .check.sel,
  .currency .check.sel,
  .language .check.sel {
    background-image: url('../images/svg-black/check-01.svg');
    opacity: .5;
  }

  .culture .icon,
  .language .icon {
    width: 20px;
    height: 20px;
    background-size: 20px auto;
  }

    .culture .icon.da-DK,
    .language .icon.DA {
      background-image: url('../images/flags/flag_DK_256.png');
    }

    .culture .icon.en-GB,
    .language .icon.EN {
      background-image: url('../images/flags/flag_GB_256.png');
    }

    .culture .icon.en-US,
    .language .icon.US {
      background-image: url('../images/flags/flag_US_256.png');
    }

    .culture .icon.sk-SK,
    .language .icon.SK {
      background-image: url('../images/flags/flag_SK_256.png');
    }

    .culture .icon.it-IT,
    .language .icon.IT {
      background-image: url('../images/flags/flag_IT_256.png');
    }

    .culture .icon.sv-SE,
    .language .icon.SV {
      background-image: url('../images/flags/flag_SE_256.png');
    }

    .culture .icon.ja-JP,
    .language .icon.JA {
      background-image: url('../images/flags/flag_JP_256.png');
    }

    .culture .icon.de-DE,
    .language .icon.DE {
      background-image: url('../images/flags/flag_DE_256.png');
    }

    .culture .icon.nl-BE,
    .language .icon.NL {
      background-image: url('../images/flags/flag_NL_256.png');
    }

    .culture .icon.nl-BE,
    .language .icon.NL {
      background-image: url('../images/flags/flag_NL_256.png');
    }

    .culture .icon.zh-CN,
    .language .icon.CN {
      background-image: url('../images/flags/flag_CN_256.png');
    }

    .culture .icon.ar-SA,
    .language .icon.AR {
      background-image: url('../images/flags/flag_AR_256.png');
    }

  #CULTURE_SECTION h2:before,
  #LANGUAGE_SECTION h2:before,
  #CURRENCY_SECTION h2:before {
    content: "";
    display: inline-flex;
    width: 30px;
    height: 30px;
    background-size: 30px 30px;
    background-repeat: no-repeat;
    background-position: center center;
    position: relative;
    top: 5px;
  }

  #CURRENCY_SECTION h2:before {
    background-image: url(../images/svg-black/currency-01.svg);
  }

  #LANGUAGE_SECTION h2:before {
    background-image: url(../images/svg-black/language-01.svg);
  }

  #CULTURE_SECTION h2:before {
    background-image: url(../images/svg-black/culture-01.svg);
  }
}

.DebugInfo {
  position: absolute;
  right: 20px;
  bottom: 20px;
  background-color: #f2f2f2;
  border: 2px dashed red;
  padding: 5px;
  opacity: 0.5;
  filter: alpha(opacity=50);
}

  .DebugInfo TH {
    text-align: left;
    font-weight: bold;
    color: #C00;
  }



.MainTabOff, .MainTabDown, .MainTabOver, .MainTabSel {
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 0;
  margin: 0;
  cursor: pointer;
  padding-top: 0;
  font-weight: bold;
}

.MainTabDown {
  color: #cc0000;
}

.MainTabOff {
  color: #999;
}

.MainTabOver {
  color: #cc0000;
}

.MainTabSel {
  color: #000000;
}

.ChartPreload {
  background-image: url(../images/Loading3.gif);
  background-position: center center;
  background-repeat: no-repeat;
}

@media all /*Search'*/ {
  .Search .display {
    margin-top: 10px;
    margin-bottom: 10px;
  }

    .Search .display .type {
      float: none;
      clear: both;
      display: block;
      width: 100%;
    }

      .Search .display .type ul {
        list-style: none;
        float: none;
        display: table-row;
        margin: 0;
        padding: 0;
      }

      .Search .display .type li {
        margin-right: 3px;
        padding: 0;
        border: solid 1px transparent;
      }

      .Search .display .type .Sel {
        background-color: #EEE;
        border: solid 1px #999;
      }

      .Search .display .type .Over {
        background-color: #EEE;
        border: solid 1px black;
        cursor: pointer;
      }

      .Search .display .type .list, .Search .display .type .tiles, .Search .display .type .details {
        background-position: center center;
        background-repeat: no-repeat;
        width: 22px;
        height: 22px;
        float: left;
        display: block;
        overflow: hidden;
        margin: 0;
        padding: 0;
      }

      .Search .display .type .list {
        background-image: url('../images/icon16/ViewList.png');
      }

      .Search .display .type .tiles {
        background-image: url('../images/icon16/ViewTiles.png');
      }

      .Search .display .type .details {
        background-image: url('../images/icon16/ViewDetails.png');
      }

  .Search .setup .icon {
    background-position: center center;
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    background-image: url('../images/icon16/SetupBlackOff.png');
    cursor: pointer;
  }

  .Search .setup .iconOver, .Search .setup .iconSel, .Search .setup .iconDown {
    background-image: url('../images/icon16/SetupBlack.png');
  }




  .Search .result.person .list .PerImg {
    height: 24px;
    width: 24px;
  }


  .Search .result.person .detailed .PerImg {
    height: 38px;
    width: 38px;
  }


  .Search .Filter .input {
    padding: 0;
    margin: 0;
  }

    .Search .Filter .input .string {
      width: 200px;
      float: left;
      display: block;
    }

    .Search .Filter .input .btn {
      border-left: none;
      padding: 0;
      height: 31px;
      width: 30px;
      float: left;
      border: none;
      background: transparent;
      background-image: url('cubes_images/cubes-ban-search-loop.png');
      background-repeat: no-repeat;
      background-position: center center;
      cursor: pointer;
    }



      .Search .Filter .input .btn:hover {
        border-color: #000;
        background-image: url('cubes_images/cubes-ban-search-loop-over.png');
      }



  .Search .Filter .btnSel, .Search .Filter .btn.loading {
    background-image: url('../images/Loading16x16.gif');
  }

  .Searchloading .tr1 TD, .Searchloading .tr0 TD {
    filter: alpha(opacity=50);
    opacity: 0.5;
  }


  .Search .result .group .row {
    margin: 10px 0;
    width: 310px;
    height: 60px;
    float: left;
    overflow: hidden;
    background-color: transparent;
  }

  .Search .result .group .body {
    width: 290px;
    height: 60px;
    background-color: #efefef;
    border-radius: 30px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
  }

    .Search .result .group .body:hover {
      background-color: #e2e2e2;
    }

  .Search .result .group .image {
    float: left;
    padding: 5px;
  }

    .Search .result .group .image .PerImg {
      width: 50px;
      height: 50px;
    }

      .Search .result .group .image .PerImg > div {
      }

  .Search .result .group .title {
    padding: 5px;
    padding-bottom: 0;
    text-align: left;
    float: left;
    width: 210px;
    overflow: hidden;
  }

    .Search .result .group .title a {
      color: #000;
    }

  .Search .result .group .info {
    padding: 1px 5px;
    float: left;
    width: 210px;
    overflow: hidden;
    color: #666;
  }

  .Search .result .group .rel {
    padding: 0 5px;
    float: left;
    width: 210px;
    overflow: hidden;
  }

  .Search .sort-select-box {
    background-color: #f9f8f7;
    border: solid 1px #000;
    padding: 5px;
    position: absolute;
    left: 0;
    top: 15px;
  }

  .Search .Over .IconCalendarUserOff {
    background-image: url(../images/icon16/CalendarUSer.png);
  }

  .Search .Over .IconEditMasterDataOff {
    background-image: url(../images/icon16/Edit.gif);
  }
}

.HiddenData {
  text-decoration: line-through;
}

  .HiddenData td {
    text-decoration: line-through;
  }

#TitleDiv {
  max-width: 300px;
}








.Pointer {
  cursor: pointer;
}




.icon16 {
  display: block;
  float: left;
  width: 16px;
  height: 16px;
}



.debug-body {
  max-width: 50%;
  padding-left: 390px;
}

.debug-value {
  display: block;
  max-height: 30px;
  max-width: 400px;
  overflow: hidden;
}

  .debug-value:hover {
    max-height: 400px;
    max-width: 100%;
    overflow: scroll;
  }



.nav {
  margin: 0;
  padding: 0;
  list-style: none;
  background-position: -100%;
  background-repeat: no-repeat;
}


  .nav:before,
  .nav:after {
    display: table;
    content: " ";
  }

  .nav:after {
    clear: both;
  }

  .nav ul {
    margin: 0;
    padding: 0;
  }

  .nav li {
    margin: 0;
    padding: 0;
    position: relative;
    display: block;
    list-style: none;
  }

    .nav li a {
      position: relative;
      display: block;
      text-decoration: none;
    }

      .nav li a:hover,
      .nav li a:focus {
      }

  .nav > li.disabled > a {
    color: #999999;
  }

    .nav > li.disabled > a:hover,
    .nav > li.disabled > a:focus {
      color: #999999;
      cursor: not-allowed;
    }


.icon {
  background-repeat: no-repeat;
}

.btn.icon, .BtnIcon {
  background-position: 5px center;
  padding-left: 35px;
  background-size: 20px 20px;
  /* svg background images are left-aligned by their attribute preserveAspectRatio */
}

@media all /*Chart'*/ {


  .Chart {
  }


    .Chart p {
      margin: 0;
    }

    .Chart .box {
      border: solid 0px #7a7a7a;
      border-radius: 4px;
      background-color: #dcdcdc;
      text-align: center;
    }

    .Chart .line {
      background-color: #000;
      z-index: -1;
    }

      .Chart .line.dotted {
        z-index: -2;
        background-image: url('../images/stripe.gif');
      }


    .Chart .box.dep .person {
      margin-top: 0px;
      height: 50px;
      overflow: hidden;
    }

    .Chart .box p {
      font-size: 12px;
      line-height: 15px;
      font-weight: normal;
      padding-left: 5px;
      padding-right: 5px;
      color: #000000;
      overflow: hidden;
    }

    .Chart .box.dep .person.showinchart .name {
      font-weight: bold;
    }


    .Chart .box.dep .person .image {
      height: 45px;
      width: 45px;
      float: left;
      padding-left: 3px;
    }

    .Chart .box.dep .person .PerImg {
      height: 42px;
      width: 42px;
    }

    .Chart .box.dep .person .name {
      padding: 0px 5px 0 5px;
    }

    .Chart .box.dep .person-all .image {
      height: 35px;
      width: 35px;
    }

    .Chart .box.dep .person-all .name {
      padding-top: 2px;
    }

    .Chart .box.dep .person-all .name, .Chart .box.dep .person-all .person-title {
      padding-left: 5px;
    }

    .Chart .box.dep .person-all .PerImg {
      width: 31px;
      height: 31px;
      padding-left: 3px;
      padding-bottom: 3px;
    }

    .Chart .box.dep .person-all .person {
      overflow: hidden;
      clear: both;
      height: 35px;
      text-align: left;
      clear: both;
    }

      .Chart .box.dep .person-all .person > div {
      }


    .Chart .box .title {
      height: 45px;
      width: 100%;
      overflow: hidden;
    }

      .Chart .box .title p {
        padding: 3px 5px 0 5px;
        font-weight: bold;
        height: 45px;
        width: 174px;
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

    .Chart .box.dep.Blue .title, .Chart .box.dep.Orange .title {
      height: 35px;
      margin-bottom: 5px;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .Chart .box.dep.Blue .title {
      background-color: blue;
    }

    .Chart .box.dep.Orange .title {
      background-color: orange;
    }


    .Chart .box .person-1 {
      width: 50%;
      float: left;
    }

    .Chart .box .person-2 {
      width: 50%;
      float: right;
    }

    .Chart .box.proj .person {
      height: 40px;
      width: 100%;
      font-weight: bold;
      position: absolute;
      top: 35px;
      left: 0;
      overflow: hidden;
    }




    .Chart .box.proj .name {
      padding-top: 1px;
    }

    .Chart .box.proj .person-name {
      height: 14px;
      line-height: 14px;
      overflow: hidden;
      width: 100%;
    }

    .Chart .box.proj .person-1 {
      height: 40px;
      width: 50%;
      font-weight: bold;
      position: absolute;
      top: 35px;
      left: 0;
      overflow: hidden;
    }

    .Chart .box.proj .person-2 {
      height: 40px;
      width: 50%;
      font-weight: bold;
      position: absolute;
      top: 35px;
      left: 50%;
      overflow: hidden;
    }

    .Chart .box .count {
      min-width: 18px;
      padding: 3px 3px 0px 3px;
      border-bottom-right-radius: 4px;
      background-color: transparent;
      position: absolute;
      bottom: 0;
      right: 0;
      border: none;
    }

      .Chart .box .count p {
        font-size: 10px;
      }

    .Chart .box.link.down .count, .Chart .box.support .count {
      border-bottom-right-radius: 0;
    }

    .Chart .box.support {
      border-radius: 20px;
    }

      .Chart .box.support.count {
        border-bottom-right-radius: 0;
      }

      .Chart .box.support.all {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      }

    .Chart .box.proj.support .count {
      /*border-bottom-right-radius: 20px;*/
    }

    .Chart .box.link:hover,
    .Chart .box.link:hover .count {
      border-color: var(--chart-hover-border-color) !important;
      background-color: #edecec !important;
      cursor: pointer;
    }

    .Chart a:active .box.link,
    .Chart a:active .box.link:active .count {
      border-color: #318fad !important;
      background-color: #f8f8f8 !important;
    }

    .Chart .box.link:hover {
    }

    .Chart .box.link.up {
      border-top-width: 4px !important;
    }

    .Chart .box.link.down {
      border-bottom-width: 4px !important;
    }

    .Chart .box.dotted {
      border-style: dashed !important;
    }

    .Chart .box .person-title {
      color: #666;
    }

    .Chart .box.proj .person-all {
      width: 100%;
      font-weight: bold;
      position: absolute;
      top: 35px;
      left: 0;
      overflow: hidden;
      text-align: left;
      padding-left: 3px;
    }

      .Chart .box.proj .person-all p {
        width: 100%;
        overflow: hidden;
        padding: 0;
        margin: 0;
        cursor: pointer;
      }

        .Chart .box.proj .person-all p:hover {
        }

    .Chart .box.projper {
      width: 314px;
      height: 80px;
    }

    .Chart .box.per {
      width: 200px;
      height: 87px;
    }

      .Chart .box.per.link {
        height: 90px;
      }

      .Chart .box.per .PerImg {
        width: 50px;
        height: 50px;
        margin-top: 5px;
        margin-left: 5px;
      }

      .Chart .box.per .person {
        position: absolute;
        right: 0;
        top: 0;
        height: 80px;
        width: 145px;
        overflow: hidden;
      }


    .Chart .box .img-right {
      border-left: solid 1px #000;
      float: right;
      overflow: hidden;
    }

      .Chart .box .img-right img {
        max-height: 75px;
      }

    .Chart .box.per .person-name {
      font-weight: bold;
      height: 50px;
      width: 145px;
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }


  .ChartProjBox {
  }

    .ChartProjBox p {
      margin: 0;
      padding: 0;
    }

    .ChartProjBox a {
      text-decoration: none !important;
    }

    .ChartProjBox .box {
      border: solid 0px #737373;
      border-radius: 10px;
      background-color: #ffffff;
      text-align: center;
    }

    .ChartProjBox .line {
      background-color: #737373;
      z-index: 1;
    }

      .ChartProjBox .line.dotted {
        background-color: #737373;
        z-index: 1;
        background-image: url('../images/stripe.gif');
      }

    .ChartProjBox .box p {
      font-size: 11px;
      line-height: 13px;
      font-weight: normal;
      padding-left: 2px;
      padding-right: 2px;
      margin-bottom: -2px;
      color: #666;
    }


    .ChartProjBox .box .title {
      height: 39px;
      width: 100%;
      overflow: hidden;
    }

      .ChartProjBox .box .title p {
        padding: 1px;
        height: 39px;
        width: 152px;
        line-height: 11px;
        font-weight: bold;
        color: #fff;
        display: table-cell;
        vertical-align: middle;
        text-align: left;
        width: 100%;
        padding-left: 8px;
        padding-right: 8px;
      }

    .ChartProjBox .box[style*="background-color:#FFFFFF"] .title p {
      color: #666;
      background-color: #f6f6f6;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    .ChartProjBox .box.proj .person {
      height: 43px;
      width: 100%;
      font-weight: bold;
      position: absolute;
      top: 39px;
      left: 0;
      overflow: hidden;
      background-color: #dcdcdc;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
    }

    .ChartProjBox .box.proj .person-1 {
      background-color: #dcdcdc;
    }

    .ChartProjBox .box.proj .name:hover, .ChartProjBox .box.proj .person-name:hover {
      color: #f00;
    }

    .ChartProjBox .box.proj .name {
      padding: 1px;
      height: 14px;
      overflow: hidden;
      text-align: left;
      width: 100%;
      padding-left: 8px;
    }

    .ChartProjBox .box.proj .person-type {
      padding: 1px;
      height: 14px;
      overflow: hidden;
      text-align: left;
      width: 100%;
      padding-left: 8px;
      opacity: 0.7;
    }

    .ChartProjBox .box.proj .person-name {
      padding: 1px;
      height: 14px;
      overflow: hidden;
      text-align: left;
      width: 100%;
      padding-left: 8px;
    }

    .ChartProjBox .box.proj .person-1 {
      height: 40px;
      width: 50%;
      font-weight: bold;
      position: absolute;
      top: 35px;
      left: 0;
      overflow: hidden;
    }

    .ChartProjBox .box.proj .person-2 {
      height: 40px;
      width: 50%;
      font-weight: bold;
      position: absolute;
      top: 35px;
      left: 50%;
      overflow: hidden;
    }

    .ChartProjBox .box .count {
      min-width: 18px;
      padding: 2px;
      position: absolute;
      bottom: 0px;
      right: 0px;
    }

      .ChartProjBox .box .count p {
        min-width: 15px;
        display: table-cell;
        vertical-align: middle;
        text-align: right;
        overflow: hidden;
      }


    .ChartProjBox .box.link.down .count, .ChartProjBox .box.support .count {
      border-bottom-right-radius: 0;
    }

    .ChartProjBox .box.support {
      border-radius: 20px;
    }

      .ChartProjBox .box.support.count {
        border-bottom-right-radius: 0;
      }

      .ChartProjBox .box.support.all {
      }

    .ChartProjBox .box.proj.support .count {
      /*border-bottom-right-radius: 20px;*/
    }

    .ChartProjBox .box.link:hover,
    .ChartProjBox .box.link:hover .link,
    .ChartProjBox .box.link:hover .count {
      border-color: #FF0000 !important;
      cursor: pointer;
    }

    .ChartProjBox a:active .box.link,
    .ChartProjBox a:active .box.link:active .count {
    }

    .ChartProjBox .box.link:hover .person {
      background-color: #edecec !important;
    }

    .ChartProjBox .box.link.up {
    }

    .ChartProjBox .box.link.down {
    }

      .ChartProjBox .box.link.down .link {
        position: absolute;
        bottom: -5px;
        right: 66px;
        width: 0px;
        height: 0px;
        border-left: 15px solid transparent !important;
        border-right: 15px solid transparent !important;
        border-top: 5px solid rgb(115,115,115);
      }

    .ChartProjBox .box.link.up .link {
      position: absolute;
      top: -5px;
      right: 66px;
      width: 0px;
      height: 0px;
      border-left: 15px solid transparent !important;
      border-right: 15px solid transparent !important;
      border-bottom: 5px solid rgb(115,115,115);
      border-top: none;
    }

    .ChartProjBox .box.dotted {
      border-style: dashed !important;
    }

    .ChartProjBox .box .person-title {
    }

    .ChartProjBox .box.proj .person-all {
      width: 100%;
      font-weight: bold;
      position: absolute;
      top: 35px;
      left: 0;
      overflow: hidden;
      text-align: left;
      padding-left: 3px;
    }

      .ChartProjBox .box.proj .person-all p {
        width: 100%;
        overflow: hidden;
        padding: 0;
        margin: 0;
        cursor: pointer;
      }

        .ChartProjBox .box.proj .person-all p:hover {
        }

    .ChartProjBox .box.projper {
      width: 314px;
      height: 80px;
    }

    .ChartProjBox .box.per {
      width: 172px;
      height: 77px;
    }

      .ChartProjBox .box.per.link {
        height: 80px;
      }

    .ChartProjBox .box .img-left {
      border-right: solid 1px #000;
      float: left;
      overflow: hidden;
      max-width: 60px;
      max-height: 75px;
    }

      .ChartProjBox .box .img-left img {
        max-width: 60px;
        max-height: 80px;
      }

    .ChartProjBox .box .img-right {
      border-left: solid 1px #000;
      float: right;
      overflow: hidden;
    }

      .ChartProjBox .box .img-right img {
        max-height: 75px;
      }

    .ChartProjBox .box.per .person-name {
      font-weight: bold;
    }

    .ChartProjBox .count div p:hover {

    }

  .ChartProj .oval {
    border: solid 1px #000;
    border-radius: 100%;
  }

  .ChartProj .oval-root {
    opacity: .1;
    border-radius: 100%;
  }

  .ChartProj p {
    text-align: center;
    margin: 0;
  }

  .ChartProj .init {
    display: table;
    margin-top: 2px;
  }

    .ChartProj .init div {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      width: 100%;
      height: 100%;
    }

    .ChartProj .init a {
      font-size: 11px;
      line-height: 11px;
      margin: 0;
      display: block;
    }

  .ChartProj .title {
    overflow: hidden;
  }

    .ChartProj .title div {
      display: table;
      width: 100%;
      height: 100%;
    }

      .ChartProj .title div div {
        display: table-cell;
        vertical-align: bottom;
        text-align: center;
      }

  .ChartProj .sub .title p {
    font-weight: bold;
    line-height: 13px;
  }

  .ChartProj .root .title p {
    font-weight: bold;
    font-size: 20px;
  }

  .ChartProj .row-title {
    display: table;
    border-bottom: solid 1px #000;
  }

    .ChartProj .row-title div {
      display: table-cell;
      vertical-align: bottom;
      font-weight: bold;
      text-align: center;
      width: 100%;
      height: 100%;
      font-size: 13px;
    }

  .ChartProj .sub:hover {
    cursor: pointer;
  }

    .ChartProj .sub:hover .oval {
      border-color: #c00;
      -webkit-box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.25);
      box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.25);
    }

  .ChartGoal {
  }

    .ChartGoal .goal {
      z-index: 1;
      position: absolute;
    }

    .ChartGoal .title {
      position: absolute;
      border: solid 1px #000;
      background-color: #f4f4f4;
      overflow: hidden;
      height: 100%;
      top: 0;
    }

    .ChartGoal.rtl .title {
      left: 0;
    }

    .ChartGoal.ltr .title {
      right: 0;
    }

    .ChartGoal .title p {
      margin: 0;
      padding: 0;
      line-height: 13px;
    }

    .ChartGoal .title div {
      display: table;
      width: 100%;
      height: 100%;
    }

      .ChartGoal .title div div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

    .ChartGoal .title .owner {
      color: #555;
      font-size: 11px;
    }

    .ChartGoal .count {
      border: solid 1px #000;
      border-radius: 100%;
      background-color: #c00;
      width: 20px;
      height: 20px;
      position: absolute;
      bottom: -12px;
    }

    .ChartGoal.rtl .count {
      left: -10px;
    }

    .ChartGoal.ltr .count {
      right: -10px;
    }

    .ChartGoal .count p {
      color: #ffffff;
      text-align: center;
      font-weight: bold;
      padding-top: 1px;
    }

    .ChartGoal .status {
      border: solid 1px #000;
      height: 100%;
      position: absolute;
      top: 0;
    }

    .ChartGoal.rtl .status {
      border-top-right-radius: 100%;
      border-bottom-right-radius: 100%;
      right: 0;
    }

    .ChartGoal.ltr .status {
      border-top-left-radius: 100%;
      border-bottom-left-radius: 100%;
      left: 0;
    }


    .ChartGoal .line {
      background-color: #000;
      z-index: -1;
      position: absolute;
    }

    .ChartGoal .link {
      cursor: pointer;
    }

      .ChartGoal .link:hover .title,
      .ChartGoal .link:hover .status {
        border-color: #c00;
      }

    .ChartGoal .own .title,
    .ChartGoal .own .status {
      border-width: 2px;
    }



  .ChartProcess {
    position: relative;
  }

    .ChartProcess .process {
      position: absolute;
    }

    .ChartProcess .title {
      position: absolute;
      top: 0;
      left: 5%;
      width: 90%;
      height: 30px;
      overflow: hidden;
      cursor: pointer;
    }

    .ChartProcess .down .title {
      top: 10px;
    }

    .ChartProcess .title div {
      display: table;
      width: 100%;
      height: 100%;
    }

      .ChartProcess .title div div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

    .ChartProcess .title p {
      line-height: 14px;
      font-weight: bold;
    }

    .ChartProcess .owner {
      position: absolute;
      top: 30px;
      left: 5%;
      width: 90%;
      height: 30px;
      overflow: hidden;
    }

    .ChartProcess .down .owner {
      top: 40px;
    }

    .ChartProcess .owner div {
      display: table;
      width: 100%;
      height: 100%;
    }

      .ChartProcess .owner div div {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
      }

    .ChartProcess .owner p {
      line-height: 14px;
    }

    .ChartProcess .count {
      position: absolute;
      bottom: 0;
      width: 25px;
      height: 20px;
      overflow: hidden;
    }

      .ChartProcess .count div div {
        padding-left: 17px;
        padding-top: 0;
        color: #555;
      }

      .ChartProcess .count.process {
        left: 8px;
      }

      .ChartProcess .count.project {
        left: 35px;
      }

      .ChartProcess .count.project {
        left: 35px;
      }

      .ChartProcess .count.task {
        left: 62px;
      }

      .ChartProcess .count.person {
        left: 89px;
      }

      .ChartProcess .count.tool {
        left: 116px;
      }



  .PerformancePotentialChart {
  }

    .PerformancePotentialChart .potential {
      width: 30px;
      height: 300px;
      overflow: hidden;
    }

      .PerformancePotentialChart .potential > div {
        white-space: nowrap;
        transform: rotate(-90deg);
        transform-origin: left top 0;
        position: relative;
        top: 180px;
        font-weight: 400;
        font-size: 20px;
      }

    .PerformancePotentialChart .performance > div {
      font-weight: 400;
      font-size: 20px;
    }

    .PerformancePotentialChart .potential-value {
      min-height: 200px;
      width: 50px;
    }

    .PerformancePotentialChart .value {
      width: 290px;
      position: relative;
    }

    .PerformancePotentialChart .potential-value > div {
      XXXXtransform: rotate(-90deg);
      text-align: center;
      width:90px;
      padding:10px;
    }

    .PerformancePotentialChart .title {
      width: 100%;
      height: 30px;
      text-align: center;
      color: #696666;
      position: relative;
      font-size: 16px;
      padding: 5px;
    }




    .PerformancePotentialChart .title:before {
      content: '';
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 30px;
      height: 30px;
      border: none;
      border-bottom-right-radius: 10px;
      background-color: rgb(49, 143, 173);
      background-image: url('../images/svg-white/check-01.svg');
      background-size: 20px 20px;
      background-position: 4px 4px;
      background-repeat: no-repeat;
    }

    .PerformancePotentialChart .title:hover {
      background-color: rgb(49, 143, 173);
      color: #fff;
    }

    .PerformancePotentialChart .title:hover {
      cursor: help;
    }


    .PerformancePotentialChart .description {
      width: 100%;
      display: none;

    }

    .PerformancePotentialChart .title:hover .description {
      display: block;
      position: absolute;
      top: 0;
      margin-top: 30px;
      padding: 10px;
      left: 0;
      background-color: rgb(246, 246, 246);
      z-index: 10;
      color: #000;
      font-size: 13px;
      border-bottom: solid 5px #fff;
      text-align: left;
      width: 100%;
    }

    .PerformancePotentialChart .title .proc {
      position: absolute;
      right: 0;
      top: 0;
      width: 50px;
      text-align: right;
      padding: 5px;
    }


    .PerformancePotentialChart .potential-high .performance-high, .PerformancePotentialChart .potential-moderal .performance-high, .PerformancePotentialChart .potential-high .performance-moderal {
      background-color: rgba(224, 224, 224, 1);
    }

      .PerformancePotentialChart .potential-high .performance-high .title:before, .PerformancePotentialChart .potential-moderal .performance-high .title:before, .PerformancePotentialChart .potential-high .performance-moderal .title:before {
        background-color: #339933;
        background-image: url('../images/svg-white/star_filled-01.svg');
      }

      .PerformancePotentialChart .potential-high .performance-high .title:hover, .PerformancePotentialChart .potential-moderal .performance-high .title:hover, .PerformancePotentialChart .potential-high .performance-moderal .title:hover {
        background-color: #339933;
        color: #fff;
      }

    .PerformancePotentialChart .potential-moderal .performance-low, .PerformancePotentialChart .potential-low .performance-moderal {
      background-color: rgb(220, 220, 220);
    }

      .PerformancePotentialChart .potential-moderal .performance-low .title:before, .PerformancePotentialChart .potential-low .performance-moderal .title:before {
        background-color: #ffcc00;
        background-image: url('../images/svg-white/exclamation-01.svg');
      }

      .PerformancePotentialChart .potential-moderal .performance-low .title:hover, .PerformancePotentialChart .potential-low .performance-moderal .title:hover {
        background-color: #ffcc00;
        color: #fff;
      }

    .PerformancePotentialChart .potential-low .performance-low {
      background-color: rgb(204, 204, 204);
    }

      .PerformancePotentialChart .potential-low .performance-low .title:before {
        background-color: #ff9400;
        background-image: url('../images/svg-white/question-01.svg');
      }

      .PerformancePotentialChart .potential-low .performance-low .title:hover {
        background-color: #ff9400;
        color: #fff;
      }

    .PerformancePotentialChart .value {
      background-color: rgba(245, 245, 245, 1);
      border: solid 5px #fff;
      vertical-align: top;
    }

    .PerformancePotentialChart .persons {
    }

      .PerformancePotentialChart .persons > div {
        margin: 10px;
        float: left;
        position: relative;
      }

    .PerformancePotentialChart .none-up::after,
    .PerformancePotentialChart .none-down::after,
    .PerformancePotentialChart .left-up::after,
    .PerformancePotentialChart .left-none::after,
    .PerformancePotentialChart .left-down::after,
    .PerformancePotentialChart .right-up::after,
    .PerformancePotentialChart .right-none::after,
    .PerformancePotentialChart .right-down::after {
      content: " ";
      display: block;
      position: absolute;
      width: 15px;
      height: 15px;
      background-size: 15px 15px;
      background-image: url('../images/icon-svg/arrow_up_green.svg');
      transform-origin: center center 0;
    }

    .PerformancePotentialChart .none-up::after {
      bottom: -13px;
      right: 13px;
      transform: rotate(0deg);
    }

    .PerformancePotentialChart .none-down::after {
      top: -13px;
      right: 13px;
      transform: rotate(180deg);
    }

    .PerformancePotentialChart .left-up::after {
      bottom: -3px;
      right: -3px;
      transform: rotate(-45deg);
    }

    .PerformancePotentialChart .left-none::after {
      bottom: 13px;
      right: -13px;
      transform: rotate(-90deg);
    }

    .PerformancePotentialChart .left-down::after {
      top: -3px;
      right: -3px;
      transform: rotate(-135deg);
    }

    .PerformancePotentialChart .right-up::after {
      bottom: -3px;
      left: -3px;
      transform: rotate(45deg);
    }

    .PerformancePotentialChart .right-none::after {
      bottom: 13px;
      left: -13px;
      transform: rotate(90deg);
    }

    .PerformancePotentialChart .right-down::after {
      top: -3px;
      left: -3px;
      transform: rotate(135deg);
    }

    .PerformancePotentialChart .value .persons {
      min-height: 70px;
      padding: 7px;
    }
}

 
.ProjIcon.small {
  border: solid 1px #666;
  border-radius: 100%;
  width: 18px;
  height: 18px !important;
  position: relative;
  margin: 1px;
}

  .ProjIcon.small div {
    border: solid 1px #666;
    border-radius: 100%;
    width: 8px;
    height: 8px !important;
    position: absolute;
    top: 1px;
    left: 4px;
    background-color: #fff;
  }

@media all /*Goal'*/ {

  /*Goal Status Icon*/
  .GoalStatus {
    white-space: nowrap;
    width: 40px;
  }

    .GoalStatus > div {
      height: 16px;
      width: 16px;
      float: left;
    }

    .GoalStatus > span {
      padding-left: 5px;
      padding-right: 5px;
    }

    .GoalStatus.status100 div {
      background-color: #009030;
      border-radius: 100%;
    }

    .GoalStatus.status0 div {
      background-color: #ffcc00;
      border-radius: 100%;
    }

    .GoalStatus.warning div {
      background-color: #cc0000;
      border-radius: 100%;
    }

    .GoalStatus.status-1 div {
      background-color: #0052A4;
      border-radius: 100%;
    }

    .GoalStatus.approved div {
      background-image: url('../images/icon-svg/goal_approved_01.svg');
      background-size: 16px auto;
    }

    .GoalStatus.approved-1 div {
      background-image: url('../images/icon-svg/goal_approved-1_01.svg');
      background-size: 16px auto;
    }

  .GoalWeight {
    height: 18px;
    width: 30px;
    float: left;
    background-image: url('../images/icon-svg/');
    background-repeat: no-repeat;
    background-size: 30px auto;
  }

    .GoalWeight.large {
      height: 25px;
      width: 50px;
      float: left;
      background-size: 45px auto;
    }

    .GoalWeight.weight0 {
      background-image: url('../images/icon-svg/risk_000.svg');
    }

    .GoalWeight.weight25 {
      background-image: url('../images/icon-svg/risk_025.svg');
    }

    .GoalWeight.weight50 {
      background-image: url('../images/icon-svg/risk_050.svg');
    }

    .GoalWeight.weight75 {
      background-image: url('../images/icon-svg/risk_075-02.svg');
    }

    .GoalWeight.weight100 {
      background-image: url('../images/icon-svg/risk_100.svg');
    }

    .GoalWeight.large.weight-1 {
      background-image: url('../images/icon-svg/risk_0-1.svg');
    }
}

@media all /*MenuDiv'*/ {

  .MenuDiv {
    height: 25px;
    width: 100%;
  }

    .MenuDiv > div.head {
      display: none;
    }

    .MenuDiv.collapsed > div.head {
      display: block;
      cursor: pointer;
    }

      .MenuDiv.collapsed > div.head .brand a {
        display: block;
        float: right;
        height: 25px;
        line-height: 25px;
        padding-right: 5px;
        text-decoration: none;
        font-size: 13px;
      }

    .MenuDiv > div.head .toggle {
      position: inherit;
      display: block;
      float: right;
      padding: 5px;
      margin-right: 3px;
      border: none;
      border-radius: 2px;
      width: 25px;
      height: 25px;
      background-image: url(../images/svg-black/more-02.svg);
      background-position: center center;
      background-repeat: no-repeat;
      background-color: transparent;
    }


      .MenuDiv > div.head .toggle span {
        display: block;
        width: 20px;
        height: 3px;
        margin: 0;
        border-radius: 1px;
        background-color: #333;
        background-color: rgba(0, 0,0, 0.90);
        display: none;
      }

        .MenuDiv > div.head .toggle span + span {
          margin-top: 4px;
        }

    .MenuDiv > div.menu {
      display: block;
      width: auto;
      float: right;
      height: 25px;
    }

    .MenuDiv.collapsed > div.menu {
      display: none;
    }

    .MenuDiv.expand > div.menu {
      display: block;
      width: auto;
      position: absolute;
      right: 0;
      top: 100%;
      height: auto;
      background-color: var(--menu-sel-back-color);
    }

    .MenuDiv > div > ul > li .text {
      display: none;
    }

    .MenuDiv > div > ul > li .icon {
      background-position: left top;
      background-repeat: no-repeat;
      width: 20px;
      height: 20px;
      display: block !important;
    }

    .MenuDiv > div > ul {
      margin: 0;
      padding: 0;
      width: auto;
    }

      .MenuDiv > div > ul > li {
        color: #000;
        float: left;
        width: auto;
      }

    .MenuDiv.expand > div > ul > li {
      float: none;
    }

    .MenuDiv > div > ul > li > a {
      font-size: 14px;
      color: #FFF;
      position: relative;
      z-index: 2;
      padding: 5px 2px 2px 2px;
      height: 100%;
      display: block;
    }

    .MenuDiv.expand > div > ul > li > a {
      background-color: transparent !important;
      border: none !important;
    }

    .MenuDiv > div > ul > li > a:hover {
      color: #316ac5;
    }

    .MenuDiv > div > ul > li > a:active,
    .MenuDiv > div > ul > li > a:focus {
      color: #cc0000;
    }

    .MenuDiv > div > ul > li > a > div.text {
    }

    .MenuDiv > div > ul > li.Sel > a {
      color: #316ac5;
    }


    .MenuDiv .brand {
      display: none;
    }

    .MenuDiv.expand > div.head .toggle,
    .MenuDiv > div.head .toggle:hover {
      background-image: url(../images/svg-black/more-02.svg);
    }

    .MenuDiv.expand .menu {
      padding-right: 16px;
    }

    .MenuDiv.collapsed:hover .menu {
      display: block;
    }

    .MenuDiv .IconEditNoteRed {
      padding-left: 20px;
      padding-right: 5px;
    }
}

.PersonStatus {
}

  .PersonStatus div {
    float: left;
  }

  .PersonStatus img {
    float: left;
  }

.ProjectSmall {
  border-radius: 100%;
  border: solid 1px #666;
}

  .ProjectSmall div {
    border-radius: 100%;
    border: solid 1px #333;
    width: 30%;
    height: 30%;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
    margin-top: 5%;
  }


th:has(.rotate-20) {
  height: 100px;
  max-width: 50px;
}

.rotate-20 {
  position: relative;
  left: 15px;
  bottom: 0;
  transform: rotate(-20deg);
  transform-origin: left top 0;
}

.rotate-30 {
  white-space: nowrap;
  position: relative;
  top: 100px;
  left: 10px;
  transform: rotate(-30deg);
  transform-origin: left top 0;
  width: 1px;
  min-width: 40px;
  min-height: 120px;
}

.rotateTh {
  white-space: nowrap;
  position: relative;
  top: 95px;
  left: 0px;
  width: 1px;
  min-width: 40px;
  min-height: 120px;
  z-index: -1;
}

.rotate-90 {
  position: relative;
  top: 10px;
  transform: rotate(-90deg);
  transform-origin: left top 0;
  max-width: 20px;
}

.vertial-90 {
  white-space: nowrap;
  position: relative;
  transform: rotate(-90deg);
  transform-origin: right bottom;
  max-width: 30px;
  bottom: 30px;
}

.vertial-45 {
  white-space: nowrap;
  position: relative;
  transform: rotate(-45deg);
  transform-origin: right bottom;
  max-width: 30px;
  bottom: 20px;
  -moz-transform: rotate(-45.0deg); /* FF3.5+ */
  -webkit-transform: rotate(-45.0deg); /* Saf3.1+, Chrome */
  -o-transform: rotate(-90.0deg); /* Opera 10.5 */
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */
  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}

.rotate {
  white-space: nowrap;
  position: absolute;
  bottom: 50px;
  right: 100px; /* offset from right */
  z-index: 1;
  transform-origin: right bottom;
  transform: rotate(90deg);
}


@media all /*DepImg PerImg'*/ {

  .DepImg {
    position: relative;
  }

    .DepImg.small {
      height: 30px;
      width: 30px;
    }

    .DepImg.medium {
      height: 45px;
      width: 45px;
    }

    .DepImg.large {
      height: 90px;
      width: 90px;
    }

    .DepImg.small div {
      border: solid 2px #fff;
    }

    .DepImg.medium div {
      border: solid 2px #fff;
    }

    .DepImg.large div {
      border: solid 3px #fff;
    }

    .DepImg img {
      object-fit: cover;
      width: auto;
      height: 100%;
    }

    .DepImg div {
      border-radius: 100%;
      overflow: hidden;
      height: 100%;
      width: 100%;
      display: block !important;
    }



  .PerImg {
    position: relative;
  }

    .PerImg.tiny {
      height: 20px;
      width: 20px;
    }

    .PerImg.small {
      height: 30px;
      width: 30px;
    }

    .PerImg.medium {
      height: 45px;
      width: 45px;
    }

    .PerImg.large {
      height: 90px;
      width: 90px;
    }

    .PerImg.tiny div {
      border: solid 1px #fff;
    }

    .PerImg.small div {
      border: solid 2px #fff;
    }

    .PerImg.medium div {
      border: solid 2px #fff;
    }

    .PerImg.large div {
      border: solid 3px #fff;
    }

    .PerImg img {
      height: auto;
      width: 100%;
    }

    .PerImg div {
      border-radius: 100%;
      overflow: hidden;
      height: 100%;
      width: 100%;
      display: block;
    }

    .PerImg span {
      width: 35%;
      height: 35%;
      border-radius: 50%;
      position: absolute;
      right: 0px;
      bottom: 0px;
      display: inline-block;
      z-index: 2;
    }

    .PerImg.large span {
      width: 25%;
      height: 25%;
    }

      .PerImg.large span[style] {
        border: solid 2px #fff;
      }

    .PerImg.medium span[style] {
      border: solid 1px #fff;
    }

    .PerImg.small span[style] {
      border: solid 1px #fff;
    }


  img.per.medium.tooltip {
    position: absolute;
    width: 100px;
    height: 20px;
    line-height: 20px;
    padding: 10px;
    font-size: 14px;
    text-align: center;
    color: rgb(113, 157, 171);
    background: rgb(255, 255, 255);
    border: 4px solid rgb(255, 255, 255);
    border-radius: 5px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
    box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  }

    img.per.medium.tooltip:after {
      content: "";
      position: absolute;
      width: 0;
      height: 0;
      border-width: 10px;
      border-style: solid;
      border-color: #FFFFFF transparent transparent transparent;
      top: 44px;
      left: 50px;
    }
}

@media all /*tooltip'*/ {
  .tooltip {
    position: absolute;
    z-index: 20000;
    display: block;
    visibility: visible;
    padding: 5px;
    font-size: 11px;
    opacity: 0;
    -o-transition: opacity 1s 1s ease;
    -webkit-transition: opacity 1s 1s ease;
    -moz-transition: opacity 1s 1s ease;
    transition: opacity 1s 1s ease;
    filter: alpha(opacity=0);
  }

    .tooltip:hover {
      display: none !important;
    }

    .tooltip.in {
      opacity: .8;
      -webkit-filter: alpha(opacity=80);
      -moz-filter: alpha(opacity=80);
      -o-filter: alpha(opacity=80);
      filter: alpha(opacity=80);
    }

    .tooltip.top {
      margin-top: -2px;
    }

    .tooltip.right {
      margin-left: 2px;
    }

    .tooltip.bottom {
      margin-top: 2px;
    }

    .tooltip.left {
      margin-left: -2px;
    }

    .tooltip .tooltip-arrow {
      z-index: 1021;
      position: absolute;
      width: 0;
      height: 0;
    }

    .tooltip.top .tooltip-arrow {
      bottom: 0;
      left: 50%;
      margin-left: -5px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-top: 5px solid rgba(39,33,35,0.9);
    }

    .tooltip.left .tooltip-arrow {
      top: 50%;
      right: 0;
      margin-top: -5px;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-left: 5px solid rgba(39,33,35,0.9);
    }

    .tooltip.bottom .tooltip-arrow {
      top: 0;
      left: 50%;
      margin-left: -5px;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 5px solid rgba(39,33,35,0.9);
    }

    .tooltip.right .tooltip-arrow {
      top: 50%;
      left: 0;
      margin-top: -5px;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      border-right: 5px solid rgba(39,33,35,0.9);
    }

  .tooltip-inner {
    max-width: 200px;
    padding: 3px 8px;
    color: #fff;
    text-align: center;
    text-decoration: none;
    background-color: rgba(39,33,35,0.9);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }
}


.HelpLabelIcon {
  display: none;
}

.MainDivBody label[data-help-label] .HelpLabelIcon {
  background-image: url('../images/icon16/Help.png');
  background-position: center center;
  background-repeat: no-repeat;
  width: 20px;
  height: 16px;
  cursor: pointer !important;
  display: inline-block;
}


@media all /*Help'*/ {
  .Help {
    position: fixed;
    top: 5%;
    left: 30%;
    width: 300px;
    height: 500px;
    display: block;
    z-index: 99999;
    border: solid 1px rgb(198,198,198);
    border-radius: 2px;
    -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.2);
    -moz-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.2);
    box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.2);
    background-color: #fafafa;
    background-color: rgba(252, 252, 252,0.9);
  }

    .Help .header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 45px;
      border-bottom: rgb(198,198,198) 1px solid;
      cursor: move;
    }

      .Help .header .close {
        background-image: url('../images/icon16/IconMenuClose.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 45px;
        height: 20px;
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        cursor: pointer;
        background-color: #cc0000;
      }

        .Help .header .close:hover {
          background-color: #FF0000;
        }

      .Help .header .max {
        background-image: url('../images/icon16/IconMenuMax.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 20px;
        height: 20px;
        position: absolute;
        top: 0;
        right: 46px;
        display: block;
        cursor: pointer;
      }

        .Help .header .max:hover {
          background-image: url('../images/icon16/IconMenuMaxOver.png');
          background-color: #3665B3;
        }

      .Help .header .home,
      .Help .header .next,
      .Help .header .prev,
      .Help .header .tree {
        position: absolute;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position: center center;
        width: 20px;
        height: 20px;
        cursor: pointer;
      }

      .Help .header .disabled {
        opacity: 0.3;
      }

      .Help .header .home {
        background-image: url('../images/icon16/Home.gif');
      }

      .Help .header .prev {
        left: 20px;
        background-image: url('../images/icon16/NavBack.gif');
      }

      .Help .header .next {
        left: 40px;
        background-image: url('../images/icon16/NavForward.gif');
      }

      .Help .header .tree {
        left: 60px;
        background-image: url('../images/icon16/Tree2.gif');
      }

    .Help .searchbody {
      position: absolute;
      top: 22px;
      left: 3px;
      width: 97%;
      max-width: 300px;
      height: 18px;
      background-color: #fff;
      border: rgb(198,198,198) 1px solid;
    }

    .Help .header .search {
      width: 90%;
      height: 100%;
      margin: 0;
      border: none;
      padding: 0 15px 0 2px;
      background-color: transparent;
      background-image: url('cubes_images/cubes-ban-search-loop.png');
      background-position: center right;
      background-repeat: no-repeat;
      color: #999;
    }

      .Help .header .search:focus {
        width: 90%;
        height: 100%;
        margin: 0;
        border: none;
        padding: 0 15px 0 2px;
        background-color: transparent;
        background-image: url('cubes_images/cubes-ban-search-loop-over.png');
        background-position: center right;
        background-repeat: no-repeat;
        color: #000;
      }

    .Help .body {
      height: 455px;
      overflow: auto;
      margin-top: 45px;
      background-color: #fff;
    }

      .Help .body > * {
        margin: 0 10px;
        display: none;
      }

      .Help .body h1 {
        margin: 0;
        padding: 0;
        padding-bottom: 10px;
      }

      .Help .body .start {
      }

      .Help .body .tree {
      }

        .Help .body .tree ul {
        }

        .Help .body .tree li {
          margin-top: 2px;
          padding-left: 1px;
          background-position: left 2px;
          background-repeat: no-repeat;
          cursor: pointer;
        }

          .Help .body .tree li a:hover {
          }

          .Help .body .tree li.more {
            padding-left: 14px;
            background-image: url('../images/icon/icon_tree_open.gif');
          }

            .Help .body .tree li.more.expand {
              background-image: url('../images/icon/icon_tree_close.gif');
            }

            .Help .body .tree li.more > a {
              font-weight: bold;
            }

      .Help .body .content {
      }

        .Help .body .content .navpath {
          padding-top: 5px;
          min-height: 20px;
        }

        .Help .body .content .item {
          width: 100%;
        }

          .Help .body .content .item table {
            width: 100%;
          }

          .Help .body .content .item td {
            vertical-align: top;
          }

          .Help .body .content .item .right img {
            float: right;
          }

          .Help .body .content .item .top .center, .Help .body .content .item .bottom .center {
            text-align: center;
          }

          .Help .body .content .item .middel .center {
            text-align: justify;
          }

          .Help .body .content .item .title {
            font-size: 18px;
            padding-top: 5px;
            padding-bottom: 10px;
          }

          .Help .body .content .item .summary {
            font-style: italic;
          }

          .Help .body .content .item img {
            max-width: 265px;
          }

          .Help .body .content .item.warning {
            background-color: #cc0000;
            padding: 0 5px 5px 5px;
            margin-top: 5px;
          }

          .Help .body .content .item.note {
            width: 95%;
            background-color: #c4e7f6;
            border-left: solid 5px #74b6d1;
            padding: 0 5px 5px 5px;
            margin-top: 5px;
          }

            .Help .body .content .item.note img, .Help .body .content .item.warning img {
              max-width: 250px;
            }

        .Help .body .content .childs {
          border-top: solid 1px #999;
          padding-top: 5px;
        }

      .Help .body .search .title {
        font-weight: lighter;
        padding: 0;
        padding-top: 5px;
        margin: 0;
        font-size: 16px;
      }

      .Help .body .search .description {
        padding: 0;
        padding-bottom: 5px;
        margin: 0;
        font-size: 11px;
        color: #999;
      }

      .Help .body .search .next {
        padding: 0;
        padding-top: 20px;
        color: #000;
      }

      .Help .body .loading {
        padding-bottom: 50px;
        background-image: url(../images/Loading50x16.gif);
        background-position: center bottom;
        background-repeat: no-repeat;
      }

      .Help .body .search {
      }
}

@media all /*PageTile'*/ {
  .PageTileCollapsed .PageTile {
    position: relative;
    top: 0;
    right: 0;
    left: 0;
    height: 22px;
    width: 100%;
    display: table;
    overflow: hidden;
    background-color: #f6f6f6;
    background-color: rgba(246, 246, 246, 1);
    border-bottom: solid 1px #d9d9d9;
    border-bottom: solid 1px rgba(217, 217, 217, 1);
  }

    .PageTileCollapsed .PageTile .TileBody {
      position: relative;
      top: 0;
      right: 0;
      left: 0;
      width: auto;
      float: right;
      margin-right: 20px;
      max-height: 20px;
      padding: 0;
      display: block;
      overflow: hidden;
    }

    .PageTileCollapsed .PageTile .Tile {
      height: 20px;
      width: 40px;
      overflow: hidden;
      border: solid 1px #d9d9d9;
      border: solid 1px rgba(217, 217, 217, 1);
    }

      .PageTileCollapsed .PageTile .Tile .icon {
        height: 16px;
        width: 16px;
        background-size: 16px 16px;
        top: 2px;
        left: 2px;
      }

      .PageTileCollapsed .PageTile .Tile .text {
        display: none;
      }

      .PageTileCollapsed .PageTile .Tile .count {
        height: 16px;
        width: 16px;
        top: 1px;
        left: 20px;
        line-height: 16px;
        font-size: 12px;
      }





  .PageTile {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 30000;
    min-height: 5px;
    display: table;
    background-color: transparent;
    display: none;
  }

    .PageTile .head {
      position: relative;
      top: 0;
      left: 40%;
      width: 100px;
      height: 14px;
      background-color: rgb(229,229,229);
      border-radius: 0 0 14px 14px;
      z-index: 1;
    }

    .PageTile.expand .head {
      top: 0;
      left: 40%;
      transition: position .5s 0 ease;
    }

    .PageTile .head button {
      border: none;
      display: none;
      background-color: transparent;
      color: rgb(102,102,102);
      font-size: 11px;
    }

      .PageTile .head button.toggle {
        display: block;
        width: 100%;
        height: 16px;
        float: left;
        border: none;
        padding: 1px;
      }


    .PageTile.loading .head {
      background-color: rgba(114, 185, 254, 1);
      transition: background-color 0.5s 0.5s ease;
    }

    .PageTile.changed .head {
      background-color: rgb(255,128,0);
      transition: background-color 0.5s 0.5s ease;
    }

      .PageTile.changed .head button {
        color: rgb(255,255,255);
      }

    .PageTile.changedNow .head {
      background-color: rgb(204,0,0);
      transition: background-color 0.5s 0.5s ease;
    }

      .PageTile.changedNow .head button {
        color: rgb(255,255,255);
      }

    .PageTile .head button.collapsed {
      display: none;
    }



    .PageTile.expand {
      z-index: 5000000;
      position: absolute;
      -webkit-box-shadow: 5px 5px 2000px 2000px rgba(0,0,0,0.5);
      box-shadow: 5px 5px 2000px 2000px rgba(0,0,0,0.5);
      background-color: rgba(0,0,0,0.5);
      width: auto;
      transition: all 1s 0 ease;
    }

    .PageTile .footer {
      z-index: 2;
      position: relative;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
    }

    .PageTile.expand .footer {
      position: relative;
      top: 0;
      left: 0;
      width: 0;
      height: 0;
      transition: height 0 .5s ease;
    }

    .PageTile .TileBody {
      background-color: #ffffff;
      position: relative;
      display: block;
      height: 0;
      width: auto;
      overflow: hidden;
      top: 0;
      left: 0;
      opacity: 0;
      z-index: 0;
    }

    .PageTile.expand .TileBody {
      overflow: hidden;
      position: relative;
      top: 0;
      padding: 10px 15px 20px 20px;
      left: 0;
      width: auto;
      display: block;
      height: auto;
      opacity: 1;
    }
}

@media all /*SiteMap DELETE ME'*/ {
  .SiteMap {
    clear: both;
    float: none;
    overflow: hidden;
  }

    .SiteMap div {
      display: block;
      max-width: 200px;
      white-space: nowrap;
      overflow: hidden;
    }

  .SiteMap1 > li > a > div {
    font-weight: bold;
  }

  .SiteMap li.sel > a {
    color: #0984FF;
  }

  .SiteMap ul {
    padding: 0;
    margin: 0;
    display: block;
    position: relative;
  }

  .SiteMap li {
    display: block;
    padding: 0;
    position: relative;
  }

  .SiteMap > ul > li {
    float: left;
    display: block;
    padding-right: 15px;
  }

  .SiteMap ul ul ul {
    display: none;
    position: absolute;
    left: -5px;
    top: 95%;
  }

  .SiteMap ul ul > li:hover ul {
    display: block;
    padding: 5px;
    border-radius: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    background-color: #e5e5e5 !important;
    border: solid 1px #ccc;
    z-index: 10000;
  }
}

@media all /*Content  DELETE ME'*/ {
  .Content {
  }

    .Content form > a.IconView {
      position: absolute;
      top: 150px;
      left: 700px;
      opacity: 0.6;
    }

    .Content > a.IconEdit {
      position: absolute;
      top: 150px;
      left: 700px;
      opacity: 0.2;
    }

      .Content > a.IconEdit:hover, .Content form > a.IconView:hover {
        opacity: 1;
      }

    .Content .IconTextNew, .Content .IconTextItemNew {
      opacity: 0.4;
    }

      .Content .IconTextNew:hover, .Content .IconTextItemNew:hover {
        opacity: 1;
      }



  .ContentDescription {
    font-style: italic;
    margin-bottom: 20px;
    width: 500px;
    color: #666;
    font-size: 14px;
  }

  .ContentItem {
    position: relative;
    width: 500px;
  }

    .ContentItem .IconEdit {
      display: block;
      position: absolute;
      right: 0;
      top: 0;
      opacity: 0.2;
      width: 16px;
      height: 16px;
    }


    .ContentItem table {
      width: 100%;
    }

    .ContentItem .right img {
      float: right;
    }

    .ContentItem .top .center, .ContentItem .bottom .center {
      text-align: center;
    }

    .ContentItem:hover .IconEdit {
      opacity: 1;
    }

    .ContentItem .float-left {
      float: left;
    }

    .ContentItem .title {
      font-size: 20px;
      padding-bottom: 10px;
    }

    .ContentItem .description {
      width: 100%;
    }

    .ContentItem .description-1 {
      width: 45%;
      float: left;
    }

    .ContentItem .description-2 {
      width: 45%;
      float: right;
    }

    .ContentItem.ContentItemWarning {
      background-color: #ffe1ac;
      border-left: solid 5px #ffcc00;
      padding: 0 5px 5px 5px;
      width: 485px;
      margin-top: 5px;
    }

    .ContentItem.ContentItemNote {
      background-color: #c4e7f6;
      border-left: solid 5px #74b6d1;
      padding: 0 5px 5px 5px;
      width: 485px;
      margin-top: 5px;
    }

    .ContentItem.edit {
      margin-top: 20px;
    }

      .ContentItem.edit .header {
        display: table;
        width: 100%;
        background-color: #eee;
        padding: 0 3px;
      }

      .ContentItem.edit .button {
        display: table;
        width: 100%;
        background-color: #eee;
        padding: 3px 3px;
      }

      .ContentItem.edit .body {
        background-color: #eee;
        width: 100%;
        padding: 0 3px;
      }

      .ContentItem.edit .header .left {
        float: left;
      }

      .ContentItem.edit .header .right {
        float: right;
        display: table-cell;
        line-height: 30px;
      }

      .ContentItem.edit .description-1 {
        width: 100%;
        float: none;
      }

      .ContentItem.edit .description-2 {
        width: 100%;
        float: none;
      }

  .ContentChild {
    width: 1035px;
    clear: both;
    overflow: hidden;
    margin: 50px 0;
  }

    .ContentChild > a {
      margin-top: 20px;
      margin-bottom: 15px;
      margin-right: 35px;
      width: 310px;
      height: 300px;
      float: left;
      border: none;
      overflow: hidden;
      padding: 0;
      color: #000;
    }

      .ContentChild > a[href]:hover {
        background-color: #dedede;
        border: none;
      }



    .ContentChild .title {
      width: 310px;
      padding: 0 5px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
    }

    .ContentChild .body .description {
      left: 0;
      top: 215px;
      width: 300px;
      height: 75px;
      margin: 5px;
      font-size: 14px;
      font-style: italic;
      overflow: hidden;
    }

    .ContentChild .body .image {
      top: 30px;
      left: 0;
      width: 310px;
      height: 190px;
      background-color: #d7d7d7;
    }

      .ContentChild .body .image img {
        max-width: 310px;
        max-height: 190px;
      }

    .ContentChild .body .readmore {
      bottom: 4px;
      right: 4px;
      height: 16px;
      width: 20px;
      line-height: 500px;
      overflow: hidden;
      background-image: url(www/RightDoubleArrowBlack.png);
      background-position: center center;
      background-repeat: no-repeat;
      display: block;
      opacity: 0.2;
    }

    .ContentChild > div:hover .body .readmore {
      opacity: 0.7;
    }

  .ContentInfoNews .ContentInfoNewsQuarterOff, .ContentInfoNews .ContentInfoNewsQuarterOver, .ContentInfoNews .ContentInfoNewsQuarterSel, .ContentInfoNews .ContentInfoNewsQuarterDown {
    cursor: pointer;
    padding-left: 10px;
    color: #777777;
  }

  .ContentInfoNews .ContentInfoNewsQuarterSel {
    color: #000000;
  }

  .ContentInfoNews .ContentInfoNewsQuarterOver {
    color: #cc0000;
  }

  .ContentInfoNews .ContentInfoNewsYearOff, .ContentInfoNews .ContentInfoNewsYearOver, .ContentInfoNews .ContentInfoNewsYearSel, .ContentInfoNews .ContentInfoNewsYearDown {
    cursor: pointer;
    padding-top: 5px;
    padding-left: 5px;
    font-weight: bold;
    color: #666666;
  }

  .ContentInfoNews .ContentInfoNewsYearSel {
    color: #000000;
  }

  .ContentInfoNews .ContentInfoNewsYearOver {
    color: #cc0000;
  }

  .ContentInfoNews .ContentInfoNewsLinkOver, .ContentInfoNews .ContentInfoNewsLinkOff, .ContentInfoNews .ContentInfoNewsLinkSel, .ContentInfoNews .ContentInfoNewsLinkDown {
    cursor: pointer;
    padding-left: 20px;
    color: #5985a5;
  }

  .ContentInfoNews .ContentInfoNewsLinkFirstOver, .ContentInfoNews .ContentInfoNewsLinkFirstOff, .ContentInfoNews .ContentInfoNewsLinkFirstSel, .ContentInfoNews .ContentInfoNewsLinkFirstDown {
    cursor: pointer;
    padding-left: 5px;
    color: #5985a5;
  }

  .ContentInfoNews .ContentInfoNewsLinkSel, .ContentInfoNews .ContentInfoNewsLinkFirstSel {
    color: #000000;
  }

  .ContentInfoNews .ContentInfoNewsLinkOver, .ContentInfoNews .ContentInfoNewsLinkFirstOver {
    color: #cc0000;
  }

  .ContentInfoNews .ContentInfoNewsLinkOff SPAN, .ContentInfoNews .ContentInfoNewsLinkfirstOff SPAN {
    color: #808080;
  }

  .ContentInfoNews .ContentInfoNewsLinkImage {
    width: 100px;
    height: 100px;
    float: left;
    padding-right: 10px;
    cursor: pointer;
  }

    .ContentInfoNews .ContentInfoNewsLinkImage TD {
      height: 100px;
      width: 100px;
    }

  .ContentEdit {
    width: 500px;
  }
}


a, .a {
  color: var(--a-color);
  text-decoration: none;
  outline: none;
  cursor:pointer;
}

  a:focus, .a:focus {
    outline: none;
  }

  a:visited, .a:visited {
    color: var(--a-color);
  }

  a:active, .a:active {
    color: var(--a-active-color);
  }

  a:hover, .a:hover {
    color: var(--a-hover-color);
  }



.AOff, .AOver, .ADown, .ASel {
  color: var(--a-color);
  text-decoration: none;
  cursor: pointer;
}

.AOver, .ADown, .ASel {
  color: var(--a-hover-color);
}

.ADown, .ASel {
  color: #cc0000;
}

#TDLG A:Link, #TDLG A:active, #TDLG A:visited, #TDRG A:Link, #TDRG A:active, #TDRG A:visited {
  color: #666666;
}

#TDLG A:hover, #TDRG A:hover {
  color: #cc0000;
}

.w100 {
  width: 100%;
}


@media all /*Banner BanUser BanDate'*/ {


  .BanUser {
    font-weight: normal;
    z-index: 20001;
    right: 380px;
    width: auto;
    position: absolute;
    top: 17px;
    height: 30px;
    transition: right 0.4s 0 ease;
    background-color: #fff;
  }

    .BanUser .body .label {
      display: none;
    }

    .BanUser .PerImg.medium {
      width: 40px;
      height: 40px;
    }

    .BanUser .body > div {
      display: table-cell;
      vertical-align: middle;
      padding-right: 10px;
    }

    .BanUser .body nav > div {
      display: table-cell;
      vertical-align: middle;
      padding-right: 10px;
    }

    .BanUser .name {
      white-space: nowrap;
    }

      .BanUser .name a {
        width: 85px;
        overflow: hidden;
      }


    .BanUser .image.login {
      background-image: url('../images/svg-white/locked-01.svg');
      background-position: center center;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      min-width: 16px;
      min-height: 16px;
    }

    .BanUser:hover .image.login {
      background-image: url('../images/svg-white/locked-01.svg');
    }


  .BanUserMenu1 .menu {
    display: none;
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 100%;
    height: auto;
    background-color: rgba(88, 88, 88, 1) !important;
  }

  .BanUserMenu1.expand .menu,
  .BanUser:hover .menu {
    display: block;
  }


  .BanUserMenu1 .menu li a {
    font-size: 12px;
    color: #fff;
    position: relative;
    z-index: 2;
    height: 100%;
    width: 100%;
    display: block;
    border: none !important;
    padding: 0;
  }

  .BanUserMenu1 .menu li .icon {
    background-position: center center;
    background-repeat: no-repeat;
    width: 23px;
    height: 23px;
    float: left;
    background-size: 16px 16px;
  }

  .BanUserMenu1 .menu li .text {
    white-space: nowrap;
    height: 23px;
    line-height: 23px;
  }

  .BanUserMenu1 .menu .brake {
    display: block;
    border-bottom: solid 1px #ccc;
    margin: 10px 10px 5px 20px;
  }

  .BanUserMenu1 .menu li.sel a,
  .BanUserMenu1 .menu li:hover a {
    background-color: rgba(49, 142, 172, 1);
  }

  .BanUserMenu1 .head .brand {
    display: none;
  }

  .BanUserMenu1 .head .toggle {
    position: inherit;
    float: right;
    padding: 5px;
    background-color: transparent;
    border: none;
    height: 50px;
  }

  .BanUserMenu1.expand .head .toggle {
    transform: rotate(180deg);
  }

  .BanUserMenu1 .head .toggle span {
    display: none;
    width: 20px;
    height: 3px;
    margin: 0;
    border-radius: 1px;
    background-color: #333;
    background-color: rgba(0, 0,0, 0.90);
  }

    .BanUserMenu1 .head .toggle span + span {
      margin-top: 4px;
    }


  .BanUserMenu1 .head .toggle::after {
    content: " ";
    display: block;
    float: right;
    margin: 0 0 0 0;
  }

  .BanUserMenu1 .head .toggle::after {
    background: url('metro/menu-toggle.png') no-repeat scroll 0 0;
    width: 13px;
    height: 9px;
    overflow: hidden;
  }

  .BanUserMenu1.expand .head .toggle::after,
  .BanUser:hover .head .toggle::after {
    background: url('metro/menu-toggle.png') no-repeat scroll -14px 0;
    width: 13px;
    height: 9px;
    overflow: hidden;
  }



  .BanDatePTA table {
    float: right;
  }

  .BanDatePTA {
    font-weight: normal;
    z-index: 100;
    right: 0;
    width: 190px;
    color: #000000;
    position: absolute;
    text-align: right;
    height: 26px;
    vertical-align: middle;
    right: 350px;
    padding-right: 0;
    top: 9px;
    color: #fff;
  }

    .BanDatePTA input {
      width: 120px;
      border: none;
      text-align: center;
      background-color: Transparent !important;
      margin-right: 3px;
      margin-left: 3px;
      padding-left: 2px;
      color: #fff;
      width: 120px;
      text-align: right;
      border: none;
    }

      .BanDatePTA input:hover {
        border: solid 1px #808080;
      }

      .BanDatePTA input:focus {
        border: solid 1px #66afe9;
      }



    .BanDatePTA .text {
      display: none;
    }




  .BanDatePTAMessage {
    padding: 7px;
    border: 2px dashed #FFCC00;
    position: absolute;
    width: 50%;
    min-width: 300px;
    height: 45px;
    top: 2px;
    left: 25%;
    right: auto;
    z-index: 200;
    background-color: #FFFFCC;
  }

    .BanDatePTAMessage TABLE {
      width: 100%;
      height: 100%;
    }

    .BanDatePTAMessage TD {
      color: #ff0000;
      background-image: url(../images/icon24/Warning24.png);
      background-repeat: no-repeat;
      background-position: left center;
      padding-left: 30px;
    }

  .PTA_Date {
    color: #CC3300;
    margin-top: 5px;
  }

  .PTA_Date_Now {
    display: none;
  }

  .BanTitle {
    display: none;
    visibility: hidden;
  }
}






.MainEditDivBody {
  width: 99%;
}

.MainEditDivTitle {
  color: #666666;
}

.MainEditDiv {
  width: 100%;
  max-width: 450px;
}

.MainEditDivText {
  width: 100%;
  padding-top: 0;
}

.MainEditDiv table {
  width: 100%;
}

.MainEditDivMenu {
  padding-top: 1px;
  width: 1%;
  text-align: right;
  vertical-align: top;
}

  .MainEditDivMenu IMG {
    cursor: pointer;
  }

.MainTBResult {
  margin-top: 20px;
  margin-bottom: 10px;
  font-weight: bold;
}

.MainTBNav {
  margin: 10px 0;
}

  .MainTBNav .next > * {
    background-image: url('../images/svg-black/move-next-02.svg');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 16px auto;
    padding-right: 16px;
    padding-left: 5px;
    height: 25px;
    line-height: 25px;
    display: block;
  }

  .MainTBNav .prev > * {
    background-image: url('../images/svg-black/move-back-02.svg');
    background-position: left center;
    background-repeat: no-repeat;
    background-size: 16px auto;
    padding-right: 5px;
    padding-left: 16px;
    height: 25px;
    line-height: 25px;
    display: block;
  }

  .MainTBNav .prev span, .MainTBNav .next span {
    opacity: 0.5;
  }

  .MainTBNav .page > * {
    padding-right: 5px;
    padding-left: 5px;
    display: table-cell;
    height: 25px;
    min-width: 25px;
    line-height: 25px;
    float: left;
    text-align: center;
  }

  .MainTBNav .sel {
    background-color: #f0f0f0 !important;
    border-radius: 100%;
  }

  .MainTBNav .page > a:hover {
    background-color: #ddd;
    border-radius: 100%;
  }

  .MainTBNav .next a:hover {
    background-color: #ddd;
    border-radius: 3px;
    border-top-right-radius: 12px;
    border-bottom-right-radius: 12px;
  }

  .MainTBNav .prev a:hover {
    background-color: #ddd;
    border-radius: 3px;
    border-top-left-radius: 12px;
    border-bottom-left-radius: 12px;
  }

  .MainTBNav .page .space {
    line-height: 20px;
    color: #999;
    padding: 0;
  }


@media all /*'Left LeftImage LeftList LeftListMenu'*/ {


  .LeftListMenu {
    position: relative;
  }

    .LeftListMenu ul {
      margin: 0;
      padding: 0;
    }

    .LeftListMenu .head {
      display: none;
    }

    .LeftListMenu > ul > li {
      margin: 0;
      padding: 0;
      position: relative;
      display: block;
      list-style: none;
      clear: both;
    }


      .LeftListMenu > ul > li .icon {
        float: left;
        width: 25px !important;
        margin: 0;
        text-align: center;
        background-position: center center;
      }

      .LeftListMenu > ul > li .text {
        float: left;
        display: table-cell;
        color: #666;
      }

        .LeftListMenu > ul > li .text.a {
          color: #000;
          cursor: pointer;
        }

          .LeftListMenu > ul > li .text.a.sel {
            color: #000;
          }

          .LeftListMenu > ul > li .text.a:hover {
            color: #7a96df;
          }

      .LeftListMenu > ul > li:hover {
        background-color: #f8f8f8;
      }

    .LeftListMenu > ul > li {
      min-height: 28px;
    }


      .LeftListMenu > ul > li .text.a:active {
        color: #c00;
      }

  .LeftImage {
    position: relative;
    max-height: 120px;
    height: 120px;
    width: 320px;
    background-color: rgba(203, 203, 203, 1);
  }

    .LeftImage .icon {
      position: absolute;
      top: 5px;
      background-position: left top;
      background-repeat: no-repeat;
      background-image: url(../images/svg-black/edit-in-view-01.svg);
      background-size: 16px 16px;
      height: 16px;
      cursor: pointer;
      width: 16px !important;
      overflow: hidden;
      left: 7px;
      z-index: 10;
      opacity: .5;
    }

      .LeftImage .icon:hover {
        opacity: 1;
      }

    .LeftImage .image {
      width: auto;
      text-align: center;
    }

      .LeftImage .image img {
        max-width: 170px;
        max-height: 120px;
      }

    .LeftImage .PerImg img {
    }

    .LeftImage .image .DepImg,
    .LeftImage .image .PerImg {
      width: 96px;
      height: 96px;
      position: absolute;
      top: 10px;
      left: 10px;
    }

    .LeftImage .image .PersonStatus {
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }



  .LeftListHtml .Level0 {
    padding-left: 0;
    font-weight: bold;
  }

  .LeftListHtml .Level1 {
    padding-left: 0;
  }

  .LeftListHtml .Level2 {
    padding-left: 12px;
  }

  .LeftListHtml .Level3 {
    padding-left: 24px;
  }

  .LeftListHtml .Level4 {
    padding-left: 36px;
  }

  .LeftListHtml .Level5, .LeftListHtml .Level6, .LeftListHtml .Level7, .LeftListHtml .Level8, .LeftListHtml .Level9 {
    padding-left: 48px;
  }

  .LeftListHtml .Open {
    background-position: left 2px;
    background-image: url(../images/icon/icon_tree_open.gif);
    background-repeat: no-repeat;
    padding-left: 15px;
  }

  .LeftListHtml .None {
    background-position: left 2px;
    background-repeat: no-repeat;
    background-image: url(../images/icon/icon_tree_none.gif);
    padding-left: 15px;
  }

  .LeftListHtml .Close {
    background-position: left 2px;
    background-image: url(../images/icon/icon_tree_close.gif);
    background-repeat: no-repeat;
    padding-left: 15px;
  }





  .LeftBody {
  }


  .no-fixed.LeftDiv,
  .LeftDiv {
    top: 50px;
    left: 50px;
    width: 320px;
    position: fixed;
    z-index: 10000;
    padding: 0;
    margin: 0;
    background-color: #f6f6f6;
  }

  .scrolled-top-0 .LeftDiv {
    top: 50px;
    transition: top 0.4s;
  }

  .scrolled-up .LeftDiv {
    top: 100px;
    transition: top 0.4s;
  }

  .no-fixed.LeftDiv {
    position: absolute;
  }


  .LeftListDiv {
    overflow: auto;
    overflow-x: hidden;
    position: relative;
    left: 0;
    top: 0;
    width: 320px;
    background-color: #f6f6f6;
    padding: 0;
    padding-top: 150px;
    padding-left: 10px;
  }

  .LeftSubUrl {
    width: 100%;
    height: 2px;
  }


  .LeftListHtml {
    width: auto;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-top: 2px;
  }

    .LeftListHtml SELECT {
      width: 100%;
      margin-bottom: 2px !important;
    }

    .LeftListHtml DIV {
      color: #666666;
      padding-bottom: 2px !important;
    }

  .LeftText {
    padding-left: 10px;
    padding-bottom: 10px;
    padding-top: 5px;
  }

  .LeftN1 {
    padding-left: 20px;
    padding-bottom: 0;
    overflow: hidden;
    width: 170px;
    padding-top: 1px;
    height: 18px;
  }

  .LeftTDA {
    padding-bottom: 0;
    overflow: hidden;
    width: 150px;
    line-height: 18px;
    height: 18px;
  }

    .LeftTDA A {
      text-decoration: none;
      padding: 5px;
    }

  .LeftTDIcon {
    overflow: hidden;
    width: 19px;
    height: 18px;
    text-align: center;
  }

  .LeftANoData {
    overflow: hidden;
    width: 150px;
    cursor: default;
    color: #8a9eb3;
    height: 18px;
    text-decoration: none;
  }

  .LeftA {
    overflow: hidden;
    width: 150px;
    cursor: pointer;
    height: 18px;
    text-decoration: none;
  }

  .LeftASel {
    font-weight: bold;
    overflow: hidden;
    width: 150px;
    cursor: pointer;
    height: 18px;
    text-decoration: none;
  }

  .LeftBodyDiv {
    position: fixed;
    z-index: 0;
    background-color: #f6f6f6;
    padding: 0;
    display: block;
    min-height: 100%;
    width: 320px;
    height: 100%;
  }



  .LeftListMenu {
  }

    .LeftListMenu > ul > li {
    }

      .LeftListMenu > ul > li .text {
        font-size: 14px;
        padding: 5px 5px;
        overflow: hidden;
        width: 230px;
      }

        .LeftListMenu > ul > li .text.a {
        }

      .LeftListMenu > ul > li .icon {
        width: 30px !important;
        padding-top: 10px;
        padding-left: 10px;
      }

  .LeftListDiv li[data-section] {
    padding-left: 10px;
  }

  .LeftListDiv .SearchResultLeft {
    padding-top: 80px;
    padding-left: 35px;
  }

  .LeftListDiv li {
    padding: 5px;
    font-size: 14px;
    cursor: pointer;
    color: #999;
    border-left: solid 3px transparent;
    transition: border-left 0.5s;
  }

    .LeftListDiv li:hover {
      color: #000;
    }

    .LeftListDiv li.visible {
      border-left: solid 3px #aaa;
      transition: border-left 0.5s;
    }

    .LeftListDiv li.partially {
      border-left: solid 3px #ccc;
      transition: border-left 0.5s;
    }




  .LeftImage .info {
    position: absolute;
    right: 0px;
    top: 0;
    height: 120px;
    width: 210px;
    background-color: rgba(203, 203, 203, 0.8);
    overflow: hidden;
  }

  .LeftImage .image.na + .info {
    width: 320px;
  }


  .LeftImage .text {
    margin-top: auto !important;
    margin-bottom: auto !important;
    height: auto;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

    .LeftImage .text > div {
      display: table-row;
    }

    .LeftImage .text .label {
      display: none;
      width: 35px;
      color: #aaa;
      float: left;
      overflow: hidden;
      text-align: right;
    }

    .LeftImage .text .value {
      width: auto;
      float: left;
      text-align: left;
      padding: 0 5px;
      max-height: 20px;
      line-height: 20px;
      overflow: hidden;
      max-width: 180px;
    }

    .LeftImage .text .name {
      height: 55px;
      max-height: 55px;
      line-height: 1.2;
      display: table-cell;
      vertical-align: middle;
    }

      .LeftImage .text .name .value {
        font-size: 18px;
        height: auto;
        max-height: 42px;
        max-width: 320px;
        line-height: 1.2;
      }



  .LeftImage .toolbox {
    position: absolute;
    bottom: 0;
    right: 0;
    height: 40px;
    width: 40px;
    background-image: url(../images/svg-black/toolbox-01.svg);
    background-size: 24px 24px;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: .5;
  }

    .LeftImage .toolbox:hover {
      opacity: 1;
      background-color: var(--menu-sel-back-color);
      background-image: url(../images/svg-white/toolbox-01.svg);
    }

    .LeftImage .toolbox.sel {
      opacity: 1;
      background-color: #fff;
      background-image: url(../images/svg-black/toolbox-01.svg);
    }


  .LeftImage .person .text .compay {
  }

  .LeftImage .PerImg {
  }


  .LeftImage .image img {
    max-width: 320px;
    max-height: 120px;
  }
}


.MainInputIcon {
  background-position: 5px center;
  background-repeat: no-repeat;
  padding-left: 24px;
  height: 25px;
  line-height: 25px;
  cursor: pointer;
  padding-top: 1px;
  color: #0057AE;
}

.MainAIcon {
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 25px;
  min-height: 16px;
  cursor: pointer;
  padding-top: 1px;
  color: var(--a-color);
  background-size: 16px 16px;
}

  .MainAIcon:hover {
    color: var(--a-hover-color);
  }

.MainAIconNoText {
  background-position: left top;
  background-repeat: no-repeat;
  height: 16px;
  Width: 16px;
  cursor: pointer;
}

.MainAIconSmall {
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 14px;
  height: 14px;
  margin-left: 4px;
  cursor: pointer;
  opacity: .5;
}

  .MainAIconSmall:hover {
    opacity: 1;
  }

.MainAIconBig {
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 13px;
  height: 25px;
  min-Width: 25px;
  margin-left: 4px;
  cursor: pointer;
}

.tr0 > td, .tr1 > td, .tr2 > td, .tr3 > td, .List tr > td {
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: #CCCCCC;
  border-bottom-style: solid;
  border-bottom-color: #CCCCCC;
  border-bottom-width: 1px;
}

.List tr:nth-child(even) {
  background-color: #F0F0F0;
}

.List th {
  background-color: #FFFFFF;
}

.tr0 {
  background-color: #F0F0F0;
}

.tr1 {
  background-color: #FFFFFF;
}

.tr2 {
  background-color: #E9E9E9;
}

.tr3 {
  background-color: #F5F5F5;
}

.tr4 {
  background-color: #E0E0E0;
}

.tr5 {
  background-color: #E5E5E5;
}

.tr0:hover, .tr0.hover, .tr0 .hover, .tr0.Over, .tr0.sel {
  background-color: #E9E9E9;
}

.List tr:hover:nth-child(even) {
  background-color: #E9E9E9;
}

.List tr:hover:nth-child(odd) {
  background-color: #E9E9E9;
}

.tr1:hover, .tr1.hover, .tr1 .hover, .tr1.Over, .tr1.sel {
  background-color: #F3F3F3;
}

.tr2:hover, .tr2.hover, .tr2 .hover, .tr2.Over, .tr2.sel {
  background-color: #DBDBDB;
}

.tr3:hover, .tr3.hover, .tr3 .hover, .tr3.Over, .tr3.sel {
  background-color: #E0E0E0;
}

.tr4:hover, .tr4.hover, .tr4 .hover, .tr4.Over, .tr4.sel {
  background-color: #C0C0C0;
}

.tr5:hover, .tr5.hover, .tr5 .hover, .tr5.Over, .tr5.sel {
  background-color: #C5C5C5;
}


.th-sort {
  color: #000000;
  cursor: pointer;
}

th.hover {
  color: #0984FF;
}

.th-sort.sel {
  color: #0984FF;
}

.th-sort:hover {
  color: #0984FF;
}

.th-sort:active {
  color: #c00;
}

.icon.collapse {
  background-position: center right;
  background-repeat: no-repeat;
  background-size: 17px 17px;
  background-image: url('../images/svg-black/collapse-01.svg');
  padding-right: 25px;
}

  .icon.collapse.expand {
    background-image: url('../images/svg-black/expand-01.svg')
  }

.MainTHFoot {
  border-top: #cccccc 1px solid;
  padding: 0;
  margin: 0;
  height: 0;
  text-align: left;
  font-weight: normal;
  border-top-style: solid;
  border-bottom-style: none;
}


.MainTreeImg {
  margin-left: 5px;
}


.MainInpDiv {
  padding-left: 0;
  border: #808080 1px solid;
}



.ChartNav {
  clear: both;
  margin: 10px 20px;
}

  .ChartNav::after { /* clearfix */
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }

  .ChartNav > div.start {
    background-size: 20px auto;
    background-position: center center;
    background-repeat: no-repeat;
  }


  .ChartNav .start div {
    color: transparent !important;
  }

  .ChartNav > div {
    float: left;
    height: 50px;
    background-color: #F0F0F0;
    position: relative;
    border-radius: 4px;
    padding: 3px;
    color: #333;
    margin: 10px 10px 0 0;
  }

    .ChartNav > div.sel div {
      color: #000;
    }

    .ChartNav > div:hover {
      background-color: #dcdcdc;
    }

    .ChartNav > div > div:last-of-type {
      color: #999;
    }

    .ChartNav > div > div:hover {
      color: #000;
    }

    .ChartNav > div:not(:last-of-type)::after {
      content: " ";
      position: absolute;
      top: 10px;
      right: -10px;
      border-top: solid #fff 15px;
      border-bottom: solid #fff 15px;
      border-left: solid #dcdcdc 10px;
      height: 30px;
      width: 1px;
      background-color: #F00;
    }

  .ChartNav div div {
    padding: 0px 10px;
    line-height: 20px;
  }





.MainNavBarDiv {
  padding: 10px 0;
  width: 100%;
  position: relative;
  text-align: left;
  left: 0;
  z-index: 100;
  top: 0;
}

.MainNavBarSpanStart {
  font-weight: bold;
}

.MainNavBarDepSpan {
  color: #808080;
}

.MainCatN0 {
  font-size: 11px;
  text-transform: capitalize;
}

.MainCatN1 {
  font-weight: bold;
  font-size: 11px;
  text-transform: capitalize;
}

.MainCatN2 {
  font-size: 11px;
  color: #000000;
  text-transform: capitalize;
}

.MainCatN3 {
  font-size: 11px;
  text-transform: capitalize;
}

.MainDivLeft {
  padding-right: 0;
  padding-left: 0;
  left: 20px;
  overflow: hidden;
  width: 115px;
  position: absolute;
  top: 70px;
}

.MainDivRight {
  left: 0;
  margin-left: 150px;
  width: 600px;
  position: absolute;
  top: 65px;
  text-align: right;
}

.MainImgRight {
  background-position: left top;
  width: 150px;
  background-repeat: no-repeat;
  position: static;
  height: 200px;
}



.h2 {
  border-width: 20px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 22px;
  font-weight: lighter;
  text-align: center;
}




.h3, .h3Open, .h3Closed, .h3NA {
  background-position: left 10px;
  background-repeat: no-repeat;
  margin-top: 20px;
  padding-bottom: 10px;
  font-size: 25px;
  font-weight: lighter;
}

.h3NA {
  color: #bbbbbb;
  background-image: url('metro/MainTitleNA.png');
}

.h3Closed {
  background-image: url('metro/MainTitleClosed.png');
  cursor: pointer;
  color: #999999;
}

.h3Open {
  background-image: url('metro/MainTitleOpen.png');
  cursor: pointer;
}

  .h3Open SPAN, .h3Closed SPAN, .h3NA SPAN {
    cursor: pointer;
    width: 370px;
  }

  .h3 SPAN, .h3Open SPAN, .h3Closed SPAN, .h3NA SPAN {
    padding-left: 22px;
    width: 390px;
    display: block;
    float: left;
  }

#view_pertalk_value .h3 {
  border-width: 20px;
  border-color: #FFFFFF;
  border-top-style: solid;
}

  #view_pertalk_value .h3 #Gray {
    padding-top: 6px;
    font-size: 10px;
    font-weight: normal;
  }

.h4 {
  padding-left: 0;
  font-size: 20px;
  font-weight: lighter;
}

  .h4.IconClosed {
    background-position: left 12px;
  }

  .h4.IconOpen {
    background-position: left 12px;
    color: #999999;
  }

#view_pertalk_value .h4 {
  margin-top: 20px;
}

#view_pertalk_value .h3 {
  margin-top: 20px;
}

.h5 {
  border-top-style: solid;
  border-width: 1px;
  border-color: #6e8295;
  font-size: 11px !important;
}

  .h5 A {
    font-size: 11px !important;
    font-weight: bold;
  }

.MainTB100 {
  width: 100%;
}

.MainAName {
  left: 0;
  position: relative;
  top: -100px;
}


.MainEvalValue {
  width: 100px;
  height: 20px;
  border: #959595 1px solid;
  background-image: url('../images/white.gif');
  background-repeat: no-repeat;
  background-position: center 100px;
}

.MainEvalValueText {
  width: 100px;
  height: 20px;
  text-align: center;
}

.MainComValue {
  width: 100px;
  height: 14px;
}

.MainComValueColor {
  width: 100px;
  height: 18px;
  border: #959595 1px solid;
  display: block;
  background-image: url('../images/white.gif');
  background-repeat: no-repeat;
  background-position: center 100px;
  border-radius: 4px;
}

.MainComValueText {
  width: 100%;
  height: 14px;
  text-align: center;
}

.MainComValueLabel {
  padding: 0 10px;
  width: 50px;
}

.MainTDBorderLight {
  border-top-style: none !important;
  border-right-style: none !important;
  border-left-style: none !important;
  border-bottom: #dddddd 1px solid !important;
}

.MainTDBorderDark {
  border-top-style: none !important;
  border-right-style: none !important;
  border-left-style: none !important;
  border-bottom: #6e8295 1px solid !important;
}

.MainTDBorder {
  border-top-style: none !important;
  border-right-style: none !important;
  border-left-style: none !important;
  border-bottom: #aaaaaa 1px solid !important;
}


.MainProcValueColor {
  background-image: url(cubes_images/cubes_eval_back.gif);
  background-repeat: no-repeat;
  width: 40px;
  height: 20px;
  border: #c8c8c8 1px solid;
  border-radius: 4px;
}

.MainProcValueText {
  width: 35px;
  height: 18px;
  line-height: 16px;
  text-align: right;
}

.MainScrolBox {
  padding: 5px;
  border: 1px solid #DBDBDB;
  height: auto;
  overflow: auto;
}

@media all /*'InfoDiv'*/ {


  .InfoDiv {
    z-index: 1;
    right: 0;
    width: 290px;
    padding-top: 0;
    position: absolute;
    top: 100px;
    text-align: right;
    padding-top: 17px;
    overflow: hidden;
  }

  .scrolled-top-3 .InfoDiv {
    position: fixed;
    top: 70px;
  }

  .InfoDiv.no-fixed {
    position: absolute;
    top: 100px;
  }

  .InfoDiv.overlapping {
    position: relative;
    top: 0;
    left: 0;
    width: auto;
  }

  .InfoSpan {
    width: 290px;
    text-align: left;
  }

  .InfoEnd {
    width: 290px;
    height: 10px;
  }

  .InfoTable {
    width: 290px;
  }

    .InfoTable TD {
      padding-right: 5px;
      padding-left: 5px;
    }

    .InfoTable .h3 {
    }

      .InfoTable .h3Open SPAN, .InfoTable .h3 SPAN, .InfoTable .h3Closed SPAN, .InfoTable .h3NA SPAN {
        width: 225px;
      }

    .InfoTable .h3Open, .InfoTable .h3Closed, .InfoTable .h3NA {
      cursor: pointer;
    }
}

@media all /*'Context ContDiv'*/ {
  .ContCloseDiv {
    background-image: url('../images/svg-black/window-close-01.svg');
    background-repeat: no-repeat;
    background-position: center center;
    width: 16px;
    height: 16px;
    display: block;
    position: absolute;
    top: 3px;
    right: 5px;
    cursor: pointer;
    opacity: .5;
  }

    .ContCloseDiv:hover {
      opacity: 1;
    }



  .ContDiv {
    -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
    -moz-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
    box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
    border-radius: 7px;
    overflow: hidden;
  }

  .ContBody {
    background-color: rgb(234, 234, 234);
    min-width: 150px;
    z-index: 10000000;
  }

    .ContBody p {
      margin: 0px;
      font-size: 12px;
      line-height: 15px;
    }

    .ContBody .person .title {
      color: #666;
    }

    .ContBody .person a {
      color: #000;
    }

    .ContBody .person .image {
      border-radius: 100%;
      width: 32px;
      height: 32px;
      overflow: hidden;
      border: solid 2px #fff;
      margin: 2px;
    }

    .ContBody .ContTitle {
      padding-right: 30px;
      padding-left: 10px;
      font-weight: bold;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-bottom: solid 1px #ccc;
    }

    .ContBody .ContOff,
    .ContBody .ContNa {
      padding-right: 7px;
      padding-left: 35px !important;
      background-position: 9px 5px !important;
      background-repeat: no-repeat;
      height: 25px !important;
      line-height: 25px;
      color: #000;
      text-decoration: none;
      border: none;
      overflow: hidden;
      background-size: 16px 16px;
    }



      .ContBody .ContOff:hover,
      .ContBody .ContOff:active {
        cursor: pointer;
        background-color: #ccc;
      }

      .ContBody .ContOff:disabled,
      .ContBody .ContNa {
        color: #AAAAAA;
      }

    .ContBody .ContBreak {
      height: 1px;
      margin: 1px 0 1px 30px;
      background-color: rgb(224,227,230);
    }

    .ContBody .ContBreakTD {
      height: 1px;
      padding: 0;
    }


    .ContBody div:hover {
    }

    .ContBody .ContPerRel {
      background-color: #f4f4f4;
    }

      .ContBody .ContPerRel a {
        color: #000;
      }

      .ContBody .ContPerRel table {
        width: 100%;
      }

        .ContBody .ContPerRel table:hover {
          background-color: #d9d9d9;
        }

        .ContBody .ContPerRel table tr td:first-child {
          width: 25px;
        }

  .ContBreakTD {
    height: 1px;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-top: 0;
  }

  .ContCalAOff, .ContCalAGOff {
    color: #000000;
    text-decoration: none;
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-top: 2px;
    cursor: pointer;
  }

  .ContCalAOver, .ContCalAGOver {
    border-right: #000000 1px solid;
    padding-right: 1px;
    border-top: #000000 1px solid;
    padding-left: 1px;
    padding-bottom: 1px;
    border-left: #000000 1px solid;
    padding-top: 1px;
    border-bottom: #000000 1px solid;
    cursor: pointer;
    background-color: #ffe1ac;
  }

  .ContCalADown, .ContCalAGDown {
    border-right: #000000 1px solid;
    padding-right: 1px;
    border-top: #000000 1px solid;
    padding-left: 1px;
    padding-bottom: 1px;
    border-left: #000000 1px solid;
    padding-top: 1px;
    border-bottom: #000000 1px solid;
    cursor: pointer;
    background-color: #ffe1ac;
  }

  .ContCalASel, .ContCalAGSel {
    padding-right: 2px;
    padding-left: 2px;
    padding-bottom: 2px;
    padding-top: 2px;
    cursor: pointer;
    background-color: #ffe1ac;
  }

  .ContCalAGOff {
    color: #666666;
  }

  .ContCalAGOver {
    color: #666666;
  }
}

.ReportTitle1 {
  font-size: 35px;
  padding-top: 10px !important;
}

.ReportTitle2 {
  font-size: 25px;
  padding-top: 20px !important;
  font-weight: bold;
}

.ReportTitle3 {
  font-size: 18px;
  padding-top: 5px !important;
  font-weight: bold;
}

.ReportTitle4 {
  padding-top: 5px !important;
  font-weight: bold;
}

.ReportTitleLabel {
  color: #666666;
}




.CalenderIcon {
  display: inline-block;
  background-position: left center;
  background-repeat: no-repeat;
  padding-left: 20px;
  cursor: pointer;
}

.CalenderIcon, .icon_calendar {
  background-image: url('../images/svg-black/calendar-01.svg');
  min-width: 20px;
  min-height: 20px;
}

.BanBody .CalenderIcon {
  background-image: url('../images/svg-white/calendar-01.svg');
  background-position-y: 1px;
}

.CalendarColorDiv {
  border-top-style: solid;
  border-width: 1px;
  border-color: #FFFFFF;
}

.Chart {
  height: 300px;
  width: 350px;
}

.ChartTitle P {
  line-height: 16px;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}

.ChartProcessTitle P {
  line-height: 10px;
  font-size: 10px;
  font-weight: bold;
}

.ChartProcessOwner P, .ChartProcessOwner SPAN {
  margin: 0;
  line-height: 10px;
  font-size: 10px;
  text-align: center;
}

.ChartProcessOwnerTitle, .ChartProcessOwnerTitle SPAN {
  margin: 0;
  line-height: 9px;
  font-size: 11px;
  text-align: center !important;
  cursor: pointer;
}

.ChartProcessCount P {
  line-height: 10px;
  font-size: 10px;
}

.ChartDiv {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.ChartP, .ChartP SPAN {
  margin-bottom: 0;
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
  text-decoration: none;
}


.ErrorDiv {
  border-right: #FF3300 3px dashed;
  border-top: #FF3300 3px dashed;
  z-index: 1000;
  left: 35%;
  border-left: #FF3300 3px dashed;
  width: 30%;
  border-bottom: #FF3300 3px dashed;
  position: absolute;
  top: 35%;
  background-color: #FFFFCC;
  padding-right: 5px;
  padding-left: 5px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: center;
  border-style: solid;
}





.MainTreeOpen, .MainTreeNone, .MainTreeClose {
  background-position: left center;
  padding-left: 15px;
  padding-bottom: 2px;
  padding-top: 2px;
  background-repeat: no-repeat;
  background-size: 11px 11px;
}

.MainTreeOpen {
  background-image: url(../images/icon/icon_tree_open.gif);
  text-decoration: none;
}

  .MainTreeOpen:hover {
    text-decoration: underline;
  }

.MainTreeNone {
  background-image: url(../images/icon/icon_tree_none.gif);
  text-decoration: none;
  color: #666666;
}

.MainTreeClose {
  color: #000;
  background-image: url(../images/icon/icon_tree_close.gif);
  text-decoration: none;
}





@media all /*'Tree'*/ {

  .Tree > div {
    display: table;
  }

    .Tree > div > * {
      display: table-cell;
    }



  .Tree {
    --spacing: 1.5rem;
    --radius: 7px;
    padding-left: 0;
    margin-left: 0;
  }

    .Tree li {
      display: block;
      position: relative;
      padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
      padding-bottom: 5px;
      padding-top: 0;
    }

    .Tree ul {
      margin-left: calc(var(--radius) - var(--spacing));
      padding-left: 0;
      padding-top: 7px;
    }

      .Tree ul li {
        border-left: 2px solid #ddd;
      }

        .Tree ul li:last-child {
          border-color: transparent;
        }

        .Tree ul li::before {
          content: '';
          display: block;
          position: absolute;
          top: calc(var(--spacing) / -2);
          left: -2px;
          width: calc(var(--spacing) + 2px);
          height: calc(var(--spacing) + 1px);
          border: solid #ddd;
          border-width: 0 0 2px 2px;
        }

    .Tree div {
      color: #333;
    }

    .Tree summary {
      display: block;
      color: #666;
    }

    .Tree details {
      cursor: auto;
    }

      .Tree details.more {
        cursor: pointer;
      }

        .Tree details.more > summary {
          color: #000;
        }

          .Tree details.more > summary:hover {
            color: #26748e;
          }

        .Tree details.more[open] > summary {
          font-weight: bolder;
        }

      .Tree details.sel > summary {
        color: #26748e !important;
      }

    .Tree summary::marker,
    .Tree summary::-webkit-details-marker {
      display: none;
    }

    .Tree summary:focus {
      outline: none;
    }

    .Tree summary:focus-visible {
      outline: 1px dotted #000;
    }

    .Tree li::after,
    .Tree summary::before {
      content: '';
      display: block;
      position: absolute;
      top: calc(var(--spacing) / 2 - var(--radius));
      left: calc(var(--spacing) - var(--radius) - 1px);
      width: calc(2 * var(--radius));
      height: calc(2 * var(--radius));
      border-radius: 50%;
      background: #fff;
      background-size: 10px 10px !important;
      background-position: 2px 2px !important;
      background-repeat: no-repeat !important;
    }

    .Tree li::after {
      background: transparent;
    }

    .Tree summary::before {
      z-index: 1;
      background: #fff url('../images/svg-black/circle_0-01.svg') 0 0;
      opacity: 1;
    }

    .Tree details.more > summary::before {
      z-index: 1;
      background: #fff url('../images/svg-black/arrow-right-01.svg') 0 0;
      opacity: 1;
    }


    .Tree details.more[open] > summary::before,
    .Tree details.more > summary:hover::before {
      background: #fff url('../images/svg-black/arrow-bottom-01.svg') 0 0;
    }

    .Tree details.more[open] > summary:hover::before {
      background: #fff url('../images/svg-black/arrow-top-01.svg') 0 0;
    }

    .Tree summary .IconDepData,
    .Tree summary .IconProjData,
    .Tree summary .IconPerData {
      background-image: url(../images/icon/icon_view_smal8.gif);
      background-size: auto;
      background-position: 2px 4px;
    }


    .Tree summary a {
      margin-left: 5px;
      opacity: .5;
      background-position-y: 3px;
    }

      .Tree summary a:hover {
        opacity: 1;
      }
}


.MainImgListDiv {
  display: inline-block;
}

@media all /*'CalendarTotal'*/ {
  .CalendarTotal td {
    min-width: 20px;
    white-space: nowrap;
  }

  .CalendarTotal .dates {
    vertical-align: top;
  }

    .CalendarTotal .dates td {
      overflow: hidden;
      text-align: center;
      height: 20px;
      border: solid;
      border-width: 1px;
      border-color: #ccc;
    }

  .CalendarTotal .persons {
    vertical-align: top;
  }

    .CalendarTotal .persons td {
      height: 20px;
      border: solid;
      border-width: 1px;
      border-color: #ccc;
      padding: 0 3px;
    }

    .CalendarTotal .persons .header td {
      text-align: right;
      border-color: transparent #ccc transparent transparent;
      color: #999;
    }

  .CalendarTotal .header-date td {
    border-bottom-color: #ccc !important;
  }

  .CalendarTotal .person td {
    color: #0057ae;
  }

    .CalendarTotal .person td:hover {
      color: #0984ff;
      cursor: pointer;
    }

  .CalendarTotal .person-0 {
    background-color: transparent;
  }

  .CalendarTotal .person-1 {
    background-color: #f7f7f7;
  }

  .CalendarTotal .day {
    cursor: cell;
  }

  .CalendarTotal [data-no-access] .day {
    cursor: not-allowed;
  }

  .CalendarTotal .day-now {
    font-weight: bold;
    color: red;
  }

  .CalendarTotal [data-guid] {
    cursor: pointer;
  }

  .CalendarTotal .day-off-half {
    background-color: rgba(200, 200, 200,0.5);
    background-image: url('../images/white.gif');
    background-position: 10px 0;
    background-repeat: no-repeat;
    opacity: 0.5;
  }

  .CalendarTotal .day-off-holliday {
    background-color: rgba(200, 200, 200,0.5);
  }

  .CalendarTotal .day-off {
    background-color: rgba(220, 220, 220,0.5);
  }

  .CalendarTotal .weekno {
    color: #999;
    font-style: italic;
  }

  .CalendarTotal .sel {
    background-image: url('../images/stripeRed.gif');
    background-position: top top;
    background-repeat: repeat;
  }

  .CalendarTotal .over {
    background-color: rgba(210, 210, 210,0.5);
  }

  .CalendarTotal .header .now {
    color: red;
    font-weight: bold;
  }

  #CalendarTotalDates {
    overflow-y: hidden;
    overflow-x: scroll;
    border-right: solid 1px #ccc;
  }
}

@media all /*'CalendarMonths'*/ {
  .CalendarMonths .month {
    width: 200px;
    height: 200px;
    float: left;
  }

    .CalendarMonths .month .head {
      width: 167px;
      vertical-align: middle;
      text-align: center;
      font-weight: bold;
    }

    .CalendarMonths .month > table {
    }

      .CalendarMonths .month > table th {
        width: 20px;
        height: 20px;
        overflow: hidden;
        text-align: center;
        padding: 0;
      }

      .CalendarMonths .month > table td {
        width: 20px;
        height: 20px;
        overflow: hidden;
        text-align: center;
        padding: 0;
      }

  .CalendarMonths .day {
    width: 20px;
    height: 20px;
    overflow: hidden;
    text-align: center;
    padding-top: 2px;
  }

  .CalendarMonths [data-date].day {
    cursor: cell;
  }

  .CalendarMonths .day-absence {
    cursor: pointer;
    color: #fff;
    background-image: url('../images/stripeCC.gif');
    background-position: top top;
    background-repeat: repeat;
  }

  .CalendarMonths .day-approved {
    color: #fff;
    cursor: pointer;
  }


  .CalendarMonths .day-now {
    font-weight: bold;
    color: red;
  }

  .CalendarMonths .day-othermonth {
    display: none;
  }

  .CalendarMonths .day-off-holliday {
    background-color: #ddd;
  }

  .CalendarMonths .day-off {
    background-color: #eee;
  }

  .CalendarMonths .day.birthDate, .CalendarMonths .day.expectedhDate {
    padding: 0
  }

    .CalendarMonths .day.birthDate div, .CalendarMonths .day.expectedhDate div {
      background-image: url('../images/icon-svg/love.svg');
      background-size: 28px 22px;
      background-position: -4px 0px;
      padding-top: 2px;
      width: 20px;
      height: 20px;
    }

    .CalendarMonths .day.birthDate div {
      background-image: url('../images/icon-svg/love-filled.svg');
      background-size: 25px 25px;
      background-position: -3px -1px;
      color: #fff;
    }

  .CalendarMonths .weekno {
    color: #999;
    font-style: italic;
  }

  .CalendarMonths .sel {
    background-image: url('../images/stripeRed.gif');
    background-position: top top;
    background-repeat: repeat;
  }
}

/*
* { outline: 2px dotted red }
* * { outline: 2px dotted green }
* * * { outline: 2px dotted orange }
* * * * { outline: 2px dotted blue }
* * * * * { outline: 1px solid red }
* * * * * * { outline: 1px solid green }
* * * * * * * { outline: 1px solid orange }
* * * * * * * * { outline: 1px solid blue }
*/

@media all /*'jQuery Wheel Color Picker jQWCP'*/ {
  /**
 * jQuery Wheel Color Picker
 * Base Stylesheet
 * 
 * http://www.jar2.net/projects/jquery-wheelcolorpicker
 * 
 * Copyright © 2011 Fajar Chandra. All rights reserved.
 * Released under MIT License.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Note: Width, height, left, and top properties are handled by the 
 * plugin. Please do not change these values.
 */

  .jQWCP-wWidget {
    position: absolute;
    width: 620px;
    height: 190px;
    background: #eee;
    box-shadow: 1px 1px 4px rgba(0,0,0,.5);
    border-radius: 2px;
    border: solid 1px #aaa;
    padding: 5px;
    z-index: 10001;
  }

    .jQWCP-wWidget.jQWCP-block {
      position: relative;
      border-color: #aaa;
      box-shadow: inset 1px 1px 1px #ccc;
    }

  .jQWCP-wWheel {
    background: url('images/wheel.180.jpg') no-repeat center center;
    background-size: contain;
    position: relative;
    float: left;
    width: 180px;
    height: 180px;
    -webkit-border-radius: 90px;
    -moz-border-radius: 50%;
    border-radius: 50%;
    border: solid 1px #aaa;
    margin: -1px;
    transition: border .15s;
    cursor: crosshair;
  }

    .jQWCP-wWheel:hover {
      border-color: #666;
    }

  .jQWCP-wWheelOverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    -webkit-border-radius: 90px;
    -moz-border-radius: 50%;
    border-radius: 50%;
  }

  .jQWCP-wWheelCursor {
    background: url('images/crosshair.png') no-repeat center center;
    width: 19px;
    height: 19px;
    margin: -9px 0 0 -9px;
    position: absolute;
    top: 50%;
    left: 50%;
  }

  .jQWCP-slider-wrapper,
  .jQWCP-wPreview {
    position: relative;
    width: 20px;
    height: 180px;
    float: left;
    margin-left: 5px;
  }

  .jQWCP-slider,
  .jQWCP-wPreviewBox {
    position: absolute;
    width: 20px;
    height: 180px;
    left: 0;
    top: 0;
    border: solid 1px #aaa;
    margin: -1px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    transition: border .15s;
  }

  .jQWCP-slider {
    cursor: crosshair;
  }

  .jQWCP-slider-wrapper:hover .jQWCP-slider {
    border-color: #666;
  }

  .jQWCP-scursor {
    position: absolute;
    left: 0;
    top: 0;
    background: url('images/slider.png') no-repeat center center;
    width: 26px;
    height: 19px;
    margin: -9px 0 0 -3px;
    cursor: crosshair;
  }

  .jQWCP-wAlphaSlider {
    background: url('images/alpha.png');
  }

  .jQWCP-wPreviewBox {
    background: url('images/alpha.png');
  }

  #jQWCP-overlay {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10000;
  }
}

/* ----------------------------------------------------------
    SECTION Custom and metro style (style_metro)
   ---------------------------------------------------------- */

.PageTile {
  width: 50px;
  height: 50px;
  position: fixed;
  border: none;
  padding: 0;
  overflow: hidden;
  left: 50px;
}

.expand.PageTile {
  position: fixed;
  left: 0;
  -webkit-transition: left 0;
  -moz-transition: left 0;
  -ms-transition: left 0;
  -o-transition: left 0;
  transition: left 0;
}

.PageTile .TileBody {
  width: 0;
}

.PageTile .head {
  left: 0;
  width: 50px;
  height: 50px;
  -ms-border-radius: 0;
  border-radius: 0;
  background-color: #1f97c6;
  background-color: rgba(31, 151, 198, 1);
}


.expand.PageTile .TileBody {
  left: 0;
  top: 0;
  width: auto;
}

.PageTile .head button {
  color: #fff;
}

  .PageTile .head button.toggle {
    width: 50px;
    height: 50px;
    padding: 0;
  }


.BanLogo {
  left: 50px;
  background-repeat: no-repeat;
  top: 0px;
  cursor: pointer;
  background-image: none;
  height: 50px;
  width: 320px;
  top: 0;
  color: #fff;
  position: fixed;
  background-position: 5px 10px;
  background-image: url('images/CUBES-Logo.svg');
  background-size: auto 30px;
  z-index: 20003;
}

  .BanLogo:after {
    font-size: 22px;
  }

.Edit .BanLogo {
  xbackground-color: rgba(49, 142, 172, 1);
}

/*background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 80 80'><rect fill='#0093DD' x='0' y='0' width='20' height='20'/><rect fill='#0093DD' x='0' y='30' width='20' height='20'/><rect fill='#0093DD' x='0' y='60' width='20' height='20'/><rect fill='#0093DD' x='30' y='0' width='20' height='20'/><rect fill='#0093DD' x='30' y='30' width='20' height='20'/><rect fill='#0093DD' x='30' y='60' width='20' height='20'/><rect fill='#0093DD' x='60' y='0' width='20' height='20'/><rect fill='#0093DD' x='60' y='30' width='20' height='20'/><rect fill='#0093DD' x='60' y='60' width='20' height='20'/></svg>");*/


header {
  width: 100%;
  height: 50px;
  background-color: var(--banner-back-color);
  position: fixed;
  z-index: 20000;
  top: 0;
  left: 0;
}

.BanBody {
  width: 100%;
  height: 50px;
  transition: top .4s;
  background-color: var(--banner-back-color);
}


.BanDiv {
  position: fixed;
  top: 0;
  right: 0;
  height: 50px;
  width: 100%;
  z-index: 20002;
}

.IsTestSite .LeftBodyDiv, .IsTestSite .FrontPage {
  background-image: url('../images/TestSite.svg');
  background-size: 320px auto;
  background-position: 50px top
}

.IsTestSite .BanDiv {
  background-image: url('../images/TestSite.svg');
  background-size: auto 50px;
}

.scrolled-top-0 .BanDiv {
  position: fixed;
  top: -50px;
  transition: top .3s;
}

.scrolled-up .BanDiv {
  position: fixed;
  top: 0;
  transition: top .3s;
}

.BanDiv:hover {
  top: 0;
  transition: top .3s;
}



.MenuBody {
  padding-right: 16px;
  z-index: 1;
  position: absolute;
  text-align: right;
  top: 10px;
  right: 200px;
  padding-right: 18px;
  position: fixed;
  height: 30px;
  z-index: 20020;
  width: auto;
  transition: top .3s;
}
/*
  .scrolled-top-0 .MenuBody {
    top: 50px;
    transition: top .3s;
  }

  .scrolled-up .MenuBody {
    top: 50px;
    transition: top .3s;
  }
*/




@media all /*'BanUser'*/ {

  .BanUser {
    top: 0;
    right: 0;
    height: 50px;
    background-color: transparent;
    width: 200px;
    padding-left: 20px;
  }

    .BanUser:hover {
      background-color: rgba(49, 142, 172, 1);
    }

    .BanUser .body {
      display: block;
      height: 50px;
    }

      .BanUser .body > div {
        padding: 0;
        display: table-cell;
        height: 50px;
        vertical-align: middle;
      }

    .BanUser .name {
      white-space: normal;
    }

    .BanUser a {
      display: block;
      color: #fff;
      white-space: normal;
      margin-top: auto;
      margin-bottom: auto;
    }

    .BanUser nav {
      height: 50px;
      display: table-cell;
      vertical-align: middle;
    }

    .BanUser .image {
      float: right;
      height: 45px;
      width: 45px;
      overflow: hidden;
      margin-top: 5px;
      margin-right: 10px;
    }

      .BanUser .image img {
        max-height: 50px;
        max-width: 50px;
      }

    .BanUser .menu {
      width: 200px;
    }

  .BanUserMenu1 .menu {
    right: 0;
  }

    .BanUserMenu1 .menu li a {
      font-size: 14px;
    }
}

.MainBody section[data-section] {
  padding-bottom: 20px;
  display: block;
  border-top: 30px solid #f6f6f6;
}
  /*Not First */
  .MainBody section[data-section].first,
  .MainBody section[data-section]:first-of-type {
    border-top: none;
  }



#AbsenceDetail {
  margin-left: 20px;
}

.AbsenceHeader {
  padding-top: 0px !important;
}

  .AbsenceHeader h3 {
    padding-top: 25px !important;
  }

.AbsenceFooter td {
  height: 20px;
}

.AbsenceHeaderBorder {
  height: 100px;
  border-top: 30px solid #f6f6f6;
  position: absolute;
  left: 320px;
  right: 0;
}

#AbsenceDetail tbody tr:first-of-type .AbsenceHeaderBorder {
  border-top: none;
}

.MainBody section h2 .edit, .MainBody section h2 .IconEditInView {
  position: relative;
  top: 12px;
  width: 40px;
  height: 40px;
  background-color: #f6f6f6;
  border-radius: 20px;
  background-size: 20px 20px;
  background-position: center center;
  border: solid 2px #CCCCCC;
  display: inline-block;
  font-size: 11px;
  background-image: url('../images/svg-black/edit-01.svg');
  background-repeat: no-repeat;
}

  .MainBody section h2 .edit:hover, .MainBody section h2 .IconEditInView:hover {
    background-color: #8dcde1;
    border-color: #318fad;
  }


.MainBody section.error {
  min-height: 65px;
}

  .MainBody section.error > div {
    padding: 20px 20px 20px 45px;
    min-height: 65px;
    color: #cc0000;
    font-size: 16px;
    background-color: #FFFFCC;
    position: relative;
    z-index: 1000;
    position: fixed;
    left: 370px;
    right: 0;
    transition: all .4s
  }

/*Scroled Go Back*/
.scrolled-top-0 .MainBody section.error > div {
  top: 50px;
  transition: all .4s;
}

.scrolled-up .MainBody section.error > div {
  top: 50px;
  transition: all .4s;
}



.MainBody section.error .close {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 32px;
  height: 32px;
  color: #CC0000;
  background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" fill="rgb(204,0,0)" d="M7.116 8l-4.558 4.558.884.884L8 8.884l4.558 4.558.884-.884L8.884 8l4.558-4.558-.884-.884L8 7.116 3.442 2.558l-.884.884L7.116 8z"/></svg>');
  background-size: 16px 16px;
  background-position: 8px 8px;
  background-repeat: no-repeat;
}

  .MainBody section.error .close:hover {
    background-color: #CC0000;
    background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" fill="rgb(255,255,255)" d="M7.116 8l-4.558 4.558.884.884L8 8.884l4.558 4.558.884-.884L8.884 8l4.558-4.558-.884-.884L8 7.116 3.442 2.558l-.884.884L7.116 8z"/></svg>');
  }




@keyframes sectionInfoHide {
  to {
    width: 0;
    height: 0;
    overflow: hidden;
    display: none;
  }
}

.MainBody section.info {
  min-height: 50px;
  animation: sectionInfoHide 0s linear 1000s forwards;
}

  .MainBody section.info > div {
    padding: 17px 20px 17px 45px;
    min-height: 50px;
    color: #fff;
    font-size: 16px;
    background-color: #93cee5;
    position: relative;
    z-index: 1000;
    position: fixed;
    left: 370px;
    right: 0;
    transition: all .4s;
    display: table-cell;
    animation: sectionInfoHide 0s linear 10s forwards;
  }

/*Scroled Go Back*/
.scrolled-top-0 .MainBody section.info > div {
  top: 50px;
  transition: all .4s;
}

.scrolled-up .MainBody section.info > div {
  top: 100px;
  transition: all .4s;
}

.MainBody section.info .close {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 32px;
  height: 32px;
  color: #CC0000;
  background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" fill="rgb(44, 119, 186)" d="M7.116 8l-4.558 4.558.884.884L8 8.884l4.558 4.558.884-.884L8.884 8l4.558-4.558-.884-.884L8 7.116 3.442 2.558l-.884.884L7.116 8z"/></svg>');
  background-size: 16px 16px;
  background-position: 8px 8px;
  background-repeat: no-repeat;
}

  .MainBody section.info .close:hover {
    background-color: rgb(44, 119, 186);
    background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" fill="rgb(255,255,255)" d="M7.116 8l-4.558 4.558.884.884L8 8.884l4.558 4.558.884-.884L8.884 8l4.558-4.558-.884-.884L8 7.116 3.442 2.558l-.884.884L7.116 8z"/></svg>');
  }


.MainBody section.goback {
  padding-left: 40px;
  height: 40px;
  color: #fff;
  font-size: 16px;
  background-color: #78C1DD;
  position: relative;
  background-image: url('../images/svg-white/back-01.svg');
  background-repeat: no-repeat;
  background-position: 5px 5px;
  background-size: 30px auto;
  width: 100%;
  transition: all .4s;
  z-index: 10000;
  display: flex;
  align-items: center;
}

  .MainBody section.goback:hover {
    background-color: rgb(49, 143, 173)
  }

  .MainBody section.goback #GoBackText {
    padding-left: 5px;
  }

  .MainBody section.goback .close {
    position: absolute;
    top: 0px;
    right: 0px;
    width: 40px;
    height: 40px;
    color: #CC0000;
    background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" fill="rgb(255, 255, 255)" d="M7.116 8l-4.558 4.558.884.884L8 8.884l4.558 4.558.884-.884L8.884 8l4.558-4.558-.884-.884L8 7.116 3.442 2.558l-.884.884L7.116 8z"/></svg>');
    background-size: 16px 16px;
    background-position: center center;
    background-repeat: no-repeat;
  }

    .MainBody section.goback .close:hover {
      background-image: url('data:image/svg+xml;utf8, <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" fill="rgb(255,255,255)" d="M7.116 8l-4.558 4.558.884.884L8 8.884l4.558 4.558.884-.884L8.884 8l4.558-4.558-.884-.884L8 7.116 3.442 2.558l-.884.884L7.116 8z"/></svg>');
    }

/*Scroled Go Back*/
.scrolled-top-1 .MainBody section.goback {
  width: 40px;
  overflow: hidden;
  position: fixed;
  top: 50px;
  padding: 9px 0;
  transition: all .4s
}

.scrolled-up .MainBody section.goback {
  position: fixed;
  top: 50px;
  width: 40px;
  transition: all .4s
}

  .scrolled-top-1 .MainBody section.goback #GoBackText, .scrolled-top-1 .MainBody section.goback .close, .scrolled-up .MainBody section.goback #GoBackText, .scrolled-up .MainBody section.goback .close {
    display: none;
  }


.ApiInfo {
  position: relative
}

  .ApiInfo > div {
    position: absolute;
    padding-top: 9px;
    padding-left: 40px;
    width: 100%;
    height: 40px;
    color: #fff;
    font-size: 16px;
    background-color: #78dda5;
  }

  .ApiInfo .close {
    background-image: url('../images/icon16/IconMenuClose.png');
    background-repeat: no-repeat;
    background-position: center center;
    width: 45px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    cursor: pointer;
  }

.MainBody section[data-section].hide {
  display: none;
}

.MainBody .section,
.MainBody section[data-section] > * {
  margin: 40px 20px;
}

.MainBody td .section {
  margin: 20px;
}

.MainBody section[data-section] .parent-div {
}

  .MainBody section[data-section] .parent-div > * {
  }




.MainBody section[data-section] h2 {
  font-size: 30px;
  min-height: 40px;
  line-height: 40px;
  color: #000;
}

.MainBody section h3 {
  font-size: 25px;
  min-height: 25px;
  line-height: 25px;
  color: #000;
  margin: 0;
  font-weight: 100;
  padding-top: 20px;
  padding-bottom: 10px;
}
  .MainBody section h3.icon {
    padding-left: 30px;
    background-size: auto 25px;
    background-position: 0 20px;
  }
.view_mson_data .MainBody tbody[id] {
  margin-bottom: 800px;
}



@media all /*'Filter'*/ {

  .Filter {
    background-color: rgb(224, 224, 224);
    width: 100%;
    min-height: 120px;
    vertical-align: middle;
    display: table;
    padding-left: 20px;
  }

    .Filter > * {
      height: auto;
      width: auto;
      display: table-cell;
      vertical-align: middle;
    }

    .Filter .btn:not(.G, .gray) {
      background-color: var(--filter-btn-back-color);
      color: #fff;
    }

    .Filter .btn:hover {
      background-color: #66afe9;
      color: #fff;
    }

    .Filter .TD {
      padding: 2px 4px;
    }
}

@media all /*'Actions'*/ {

  .Actions {
    width: 100%;
    min-height: 30px;
    background-color: #e4e4e4;
    margin: 0 !important;
  }

    .Actions > span {
      display: inline-block;
      line-height: 30px;
      width: auto;
      min-height: 30px;
      padding-right: 5px;
      padding-left: 5px;
      float: left;
    }

    .Actions .text {
      padding-right: 5px;
      padding-left: 5px;
      line-height: 30px;
    }

    .Actions > div {
      width: auto;
      height: 30px;
      margin-right: 5px;
      float: left;
    }

    .Actions .PageSetup {
      margin-right: 0;
    }

    .Actions .group {
      height: 30px;
      background-color: #CCC;
      display: table-row;
      float: left;
    }

      .Actions .group > div {
        display: table-cell;
        vertical-align: middle;
        min-height: 30px;
        line-height: 30px;
      }

    .Actions .btn {
      min-height: 30px;
      line-height: 30px;
      width: auto;
      padding: 0 10px 0 10px;
      background-color: #CCC;
      color: #000;
      border: none !important;
      box-shadow: none !important;
      border-radius: 0;
    }

      .Actions .btn.icon {
        padding-left: 35px;
      }

    .Actions .info {
      padding: 0 10px;
      background-position: 3px center;
    }

    .Actions .btn.sel {
      background-color: #fff;
    }

    .Actions .btn.MainAIcon {
      line-height: 30px;
      padding: 0 10px 0 35px;
      background-position: 3px center;
      background-size: 20px;
    }

    .Actions A.btn.icon {
      padding: 0px 10px 0 25px;
      line-height: 30px;
      background-position: 3px center;
    }

    .Actions .btn:hover {
      background-color: var(--action-hover-back-color);
      color: #fff;
    }

    .Actions select {
      background-color: #CCC !important;
      border: none !important;
      line-height: 25px;
      min-height: 30px;
      max-height: 30px;
      box-shadow: none !important;
      padding: 0px 16px 0px 4px;
      border-radius: 0;
    }

    .Actions .MainInp {
      border: 1px solid #e4e4e4 !important;
      line-height: 25px;
      min-height: 30px;
      max-height: 30px;
      box-shadow: none !important;
      padding: 0px 16px 0px 4px;
      border-radius: 0;
    }



    .Actions select:hover {
      background-color: var(--action-hover-back-color) !important;
      color: #fff;
    }

    .Actions select::-ms-expand {
      background-color: transparent;
      border: none;
      color: #808080;
    }

    .Actions .XMainAIcon {
      background-color: #1f97c6;
      width: auto;
      color: #fff;
      height: 26px;
      display: inline-block;
      border-radius: 3px;
      line-height: 24px;
      background-position: 5px center;
      padding-left: 25px;
      padding-right: 10px;
      padding-top: 0;
      padding-bottom: 0;
    }


  .ActionMenu div {
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 18px auto;

  }
    .ActionMenu div div {
      padding-left: 30px;
      padding-right: 10px;
      position: relative;
    }
      .ActionMenu div div u {
        display: none;
      }
      .ActionMenu div div i {
        display: none;
      }
      .ActionMenu div div b {
        font-weight:normal;
        color:#000;
      }
    .ActionMenu .sel {
      background-color: #fff;
    }
}






/*  .scrolled-top-0 .MenuDiv > div.menu {
    display: none;
  }

  .scrolled-top-0 .MenuDiv > div.head {
    display: block;
  }

  .scrolled-top-0 .MenuDiv.expand > div.menu {
    display: block;
  }

  .scrolled-top-0 .MenuBody {
    opacity: 1;
    width: auto;
    background-color: transparent;
    width: auto;
  }*/

#scrolled-top-1 {
  top: 50px;
  left: -1px;
  display: block;
}

#scrolled-top-2 {
  top: 100px;
  left: -1px;
  display: block;
}

#scrolled-top-3 {
  top: 170px;
  left: -1px;
  display: block;
}


.MainDiv {
  padding-left: 370px;
  padding-top: 50px;
  padding-right: 0;
  padding-bottom: 20px;
}


.main-only .MainDiv {
  padding-left: 16px;
}



.MainTitle {
  font-size: 25px !important;
  left: 0;
  top: 100px;
  top: -10000px;
  height: 40px;
  line-height: 40px;
  font-weight: lighter;
  position: fixed;
  width: auto;
  overflow: hidden;
  display: none;
  padding: 0;
  z-index: 0;
  background-color: #eee;
  width: 320px;
  padding-left: 10px;
}


@media all /*'Nav1'*/ {
  .Nav1 {
    position: absolute;
    top: 50px;
    height: 50px;
    font-size: 14px;
    width: 100%;
    z-index: 1005;
    transition: all 0.4s;
    background-color: var(--nav1-back-color);
  }

    .Nav1 > div.head {
      position: absolute;
      left: 0px;
      display: none;
    }


      .Nav1 > div.head .brand {
        font-size: 22px;
        padding-left: 40px;
        line-height: 50px;
        display:none;
      }

    /*.scrolled-top-0 .Nav1 > div.head,*/
    .Nav1.collapsed > div.head {
      display: block;
      cursor: pointer;
    }

    .Nav1 > div.head .brand a {
      display: block;
      cursor: pointer;
      line-height: 50px;
      color: #fff !important;
    }
    /*.scrolled-top-0 .Nav1 > div.head .brand a,*/
    .Nav1.collapsed > div.head .brand a {
      display: block;
      float: left;
      height: 50px;
      width: auto;
      overflow: hidden;
      padding-left: 5px;
      text-decoration: none;
    }

    .Nav1 > div.head .toggle {
      position: inherit;
      display: block;
      float: left;
      padding: 5px 15px;
      margin-left: 2px;
      background-color: transparent;
      border: none;
      border-radius: 0;
      height: 50px;
    }

    .Nav1 > div.head .toggle {
      display: none;
    }

    .Nav1.collapse > div.head .toggle {
      display: block;
    }

    .Nav1 > div.head .toggle span {
      display: block;
      width: 20px;
      height: 3px;
      margin: 0;
      border-radius: 1px;
      background-color: #fff;
      background-color: rgba(255, 255,255, 0.90);
    }

      .Nav1 > div.head .toggle span + span {
        margin-top: 4px;
      }

    .Nav1:hover > div.menu,
    .Nav1 > div.menu {
      width: auto;
      height: auto;
      border: none;
      top: 0;
      background-color: var(--nav1-back-color);
    }

    .Nav1.collapsed > div.menu {
      top: 100%;
      display: none;
    }

    .Nav1 > div.menu {
      display: block;
      float: left;
      width: auto;
      height: auto;
      border: none;
    }

    /*.scrolled-top-0 .Nav1 > div.menu,*/
    .Nav1.collapsed > div.menu {
      display: none;
    }

    .Nav1.collapsed:hover > div.menu,
    .Nav1.collapsed.expand > div.menu {
      display: block;
      position: absolute;
      left: 0;
      width: 320px;
    }

    .Nav1 .toggle {
      width: 50px;
      position: absolute;
    }

    .Nav1 .icon {
      width: 50px;
      height: 50px;
      float: left;
      background-position: center center;
      background-size: 25px 25px;
    }


    .Nav1 > div > ul {
      margin: 0;
      padding: 0;
      width: auto;
    }

    .Nav1 li {
      float: left;
      width: auto;
      padding: 0;
    }

    .Nav1.collapsed > div > ul > li {
      float: none;
      width: 100%;
      padding: 0;
    }

    .Nav1.collapsed .icon {
      display: block;
    }

    .Nav1.expand > div > ul > li {
    }


    .Nav1 > div > ul > li > a {
      color: #000;
      z-index: 2;
      padding: 0;
      height: 50px;
      display: block;
    }

    .Nav1 .text {
      display: none;
      color: #fff;
      line-height: 50px;
      white-space: nowrap;
    }

    .Nav1.collapsed .text {
      padding: 0 15px;
      display: block;
    }

    .Nav1.expand > div > ul > li > a {
      background-color: transparent !important;
      border: none !important;
    }

    .Nav1 > div > ul > li > a:hover {
      color: var(--nav1-hover-color);
    }

    .Nav1 > div > ul > li > a:active,
    .Nav1 > div > ul > li > a:focus {
      color: var(--nav1-sel-color);
    }

    .Nav1 > div > ul > li:hover > a {
      color: var(--nav1-hover-color);
      background-color: var(--nav1-hover-back-color);
    }

    .Nav1 > div > ul > li.sel > a {
      color: var(--nav1-sel-color);
      background-color: var(--nav1-sel-back-color);
    }



    .Nav1 li .Nav1-2 {
      position: absolute;
      background-color: var(--nav1-back-color);
      z-index: 20000;
      left: 0;
      top: 100%;
      width: auto;
      display: none;
      float: none;
    }

      .Nav1 li .Nav1-2 li:hover {
        background-color: var(--nav1-hover-back-color);
        width: 100%;
      }

      .Nav1 li .Nav1-2 > li > a > div.text {
        padding: 3px 10px;
        padding-left: 30px;
        white-space: nowrap;
        color: var(--nav1-color);
        display: block;
        line-height: 20px;
      }

    .Nav1 .Nav1-2 .icon {
      width: 26px;
      height: 26px;
      background-size: 16px 16px;
      background-position: center center
    }

    .Nav1 li:hover .Nav1-2 {
      XXXdisplay: block;
    }
  /*
  #Nav1_B8E0765F4F7047AE9B4545CF86B6FC2A,
  #Nav1_8E8EF50EA3DA4BFDB5DE280E9D24A9E7,
  #Nav1_944C2F3F96B3483E9A8B32DEF4AE81B2,
  #Nav1_4A1AD1D6FC9449A1A3A17F7B0E4015AF,
  #Nav1_4866D9A2D8914CAEA298497FDFE188A0,
  #Nav1_BA4DA3707B7D4E88BFF79A90D7525362,
  #Nav1_DD05C8EF38EA48CBAA882AB62C41AF9A,
  #Nav1_56F75662F77349828D5192F2FE937991,
  #Nav1_3551105C786047F4934AA3BA52785CE3,
  #Nav1_0209D762CBD047D18A96B06023844A2E,
  #Nav1_5244FB2E34AA4B97B20F6F9C12F65BF6,
  #Nav1_E67011B6CC704C2B9EA90664920EE8BA {
    display: none;
  }
  */
}

.scrolled-top-1 .Nav1 {
  position: fixed;
  top: 0;
  transition: all 0.3s;
}

.scrolled-up .Nav1 {
  top: 50px;
  transition: all 0.3s;
}

.scrolled-top-0 .BanLogo {
  top: -50px;
  transition: all 0.3s;
}

.scrolled-up .BanLogo {
  top: 0;
  transition: all 0.3s;
}




@media all /*'Nav2 Nav3'*/ {

  .Nav2 {
    z-index: 11000;
    position: relative;
    height: auto;
    width: 320px;
    top: 0;
    font-size: 14px;
  }


    .Nav2 > div.head {
      display: block;
      cursor: pointer;
      width: 100%;
      height: 30px;
      background-color: var(--nav2-head-back-color);
    }

      .Nav2 > div.head .brand {
        position: absolute;
        display: block;
        left: 30px;
        width: 290px;
        z-index: 1;
      }

        .Nav2 > div.head .brand a {
          display: block;
          float: left;
          height: 30px;
          width: 100%;
          overflow: hidden;
          line-height: 30px;
          padding-left: 10px;
          text-decoration: none;
          color: var(--nav2-head-color);
        }

      .Nav2 > div.head .toggle {
        position: absolute;
        display: block;
        left: 2px;
        padding: 5px;
        height: 28px;
        z-index: 2;
        width: 30px;
        border: none;
        background-color: transparent;
      }

        .Nav2 > div.head .toggle span {
          display: block;
          width: 20px;
          height: 3px;
          margin: 0;
          border-radius: 1px;
          background-color: var(--nav2-head-color);
        }

          .Nav2 > div.head .toggle span + span {
            margin-top: 4px;
          }

    .Nav2 > div.menu {
      display: block;
      position: absolute;
      left: 0;
      top: 100%;
      height: auto;
      background-color: var(--nav2-color) !important;
      overflow: hidden;
      background-color: var(--nav2-back-color) !important;
      width: 320px;
      max-width: 320px;
      -webkit-transition: max-width ease-in-out 0.3s;
      -moz-transition: max-width ease-in-out 0.3s;
      -ms-transition: max-width ease-in-out 0.3s;
      -o-transition: max-width ease-in-out 0.3s;
      transition: max-width ease-in-out 0.3s;
    }

    .XXXXNav2:hover > div.menu,
    .Nav2.expand > div.menu {
      width: 320px;
      border: none;
      border-radius: 0;
      max-width: 320px;
      -webkit-transition: max-width ease-in-out 0.3s;
      -moz-transition: max-width ease-in-out 0.3s;
      -ms-transition: max-width ease-in-out 0.3s;
      -o-transition: max-width ease-in-out 0.3s;
      transition: max-width ease-in-out 0.3s;
      border-bottom: solid 2px #ccc;
    }



    .Nav2 .icon {
      display: block;
      float: left;
      width: 40px;
      height: 25px;
      background-position: 4px 2px;
      background-size: 20px 20px;
    }

    .Nav2 .text {
      line-height: 25px;
    }

    .Nav2 > div > ul {
      margin: 0;
      padding: 0;
      width: auto;
    }

      .Nav2 > div > ul > li {
        float: left;
        width: 320px;
        background-color: transparent;
      }

        .Nav2 > div > ul > li.sel {
          background-color: var(--menu-sel-back-color);
        }

        .Nav2 > div > ul > li:hover {
          background-color: var(--nav2-hover-back-color);
        }

    .Nav2.expand > div > ul > li {
      float: left;
    }

    .Nav2 > div > ul > li > a {
      color: var(--nav2-color);
      position: relative;
      z-index: 2;
      padding: 2px 9px 2px 3px;
      height: 100%;
      display: block;
    }

    .Nav2.expand > div > ul > li > a {
      background-color: transparent !important;
      border: none !important;
      padding-right: 22px !important;
    }

    .Nav2 > div > ul > li > a:hover {
      color: var(--nav2-hover-color);
    }

    .Nav2 > div > ul > li > a:active,
    .Nav2 > div > ul > li > a:focus {
      color: var(--nav2-color);
    }



    .Nav2 > div > ul > li.sel > a {
    }
    .Nav2 > div > ul > li.sel {
      background-color: var(--nav2-sel-back-color);
    }
    .Nav2 > div > ul > li > ul {
      padding-left: 0px;
      margin: 0;
      width: auto;
    }

      .Nav2 > div > ul > li > ul > li {
        float: left;
        width: 320px;
        background-color: var(--nav3-back-color);
      }

        .Nav2 > div > ul > li > ul > li.sel {
          background-color: var(--nav3-sel-back-color);
        }

        .Nav2 > div > ul > li > ul > li:hover {
          background-color: var(--nav3-hover-back-color);
        }

    .Nav2.expand > div > ul > li > ul > li {
      float: left;
    }

    .Nav2 > div > ul > li > ul > li > a {
      color: var(--nav3-color);
      position: relative;
      z-index: 2;
      padding: 3px 9px 2px 4px;
      height: 100%;
      display: block;
    }

    .Nav2.expand > div > ul > li > ul > li > a {
      background-color: transparent !important;
      border: none !important;
      padding-right: 22px !important;
    }

    .Nav2 > div > ul > li > ul > li > a:hover {
      color: var(--nav3-hover-color);
    }

    .Nav2 > div > ul > li > ul > li > a:active,
    .Nav2 > div > ul > li > ul > li > a:focus {
      color: var(--nav3-hover-color);
    }



    .Nav2 > div > ul > li > ul > li.sel > a {
    }



    .Nav2 .brake {
      display: none;
    }


  .Nav3 {
    position: relative;
    left: 40px;
    background-color: #666666;
    width: 280px;
  }

    .Nav3 .head {
      display: none;
    }

    .Nav3 > div > ul > li {
      display: block;
      clear: both;
      border-bottom: solid 1px #ccc;
    }

      .Nav3 > div > ul > li:hover,
      .Nav3 > div > ul > li:hover .text,
      .Nav3 > div > ul > li:active,
      .Nav3 > div > ul > li:focus {
        color: #fff;
      }

      .Nav3 > div > ul > li a {
        display: block;
        height: 25px;
      }

      .Nav3 > div > ul > li .icon {
        float: left;
        width: 25px !important;
        height: 25px !important;
        margin: 0;
        background-position: center center;
      }

      .Nav3 > div > ul > li .text {
        float: left;
        height: 25px !important;
        display: table-cell;
        line-height: 25px !important;
        color: #fff;
      }






      .Nav3 > div > ul > li .icon {
        width: 35px !important;
      }

    .Nav3.expand > div > ul > li {
      float: none;
    }

    .Nav3 > div > ul > li {
      border: none;
    }


      .Nav3 > div > ul > li .text {
        font-size: 14px;
      }

      .Nav3 > div > ul > li.sel {
        background-color: rgba(49, 142, 172, 1);
      }

        .Nav3 > div > ul > li.sel .text {
          color: #fff;
        }

      .Nav3 > div > ul > li:hover,
      .Nav3 > div > ul > li:focus {
        background-color: rgba(49, 142, 172, 1);
      }
}

.h3NA {
  display: none;
}

.h3, .h3Open, .h3Closed, .h3NA {
  background-image: none;
}

  .h3 span, .h3Open span, .h3Closed span, .h3NA span {
    padding-left: 0;
  }




@media all /*'Favorites'*/ {

  .favorites-pin .MainDiv {
    padding-left: 560px;
  }

  .Favorites {
    position: relative;
    background-color: var(--favorits-back-color);
    padding: 0;
  }

    .Favorites .head {
      width: 55px;
      position: absolute;
      left: 0;
      top: -30px;
      height: 28px;
      display: table;
      padding-top: 3px;
      padding-bottom: 5px;
      padding-left: 3px;
    }




      .Favorites .head li {
        float: left;
        background-repeat: no-repeat;
        /*
    background-position: center center;
    */
        background-position-y: 2px;
        width: 20px;
        height: 20px;
        overflow: hidden;
        padding-left: 20px;
      }

        .Favorites .head li:hover {
          opacity: 1;
        }

      .Favorites .head .add {
        background-image: url('../images/svg-black/star-01.svg');
        background-size: 20px auto;
        opacity: .5;
      }

      .Favorites .head:hover .add {
        opacity: 1;
      }

      .Favorites .head .add.sel {
        background-image: url('../images/svg-black/star_filled-01.svg');
      }


    .Favorites .tab {
      width: 100%;
      height: 30px;
    }


      .Favorites .tab li {
        width: 90px;
        height: 30px;
        float: left;
        padding: 0;
        background-color: rgba(229, 229, 229, 1);
        display: block;
        line-height: 30px;
        font-size: 13px;
        padding-left: 20px;
        background-size: 18px 18px;
        background-position: 5px center;
        background-repeat: no-repeat;
        overflow: hidden;
        cursor: pointer;
        text-align: center;
      }

        .Favorites .tab li.favorites {
          width: 30px;
        }

          .Favorites .tab li.favorites label {
            display: none;
          }

        .Favorites .tab li.history {
          width: 90px;
        }

        .Favorites .tab li.colleagues {
          width: 115px;
        }

        .Favorites .tab li.related {
          width: 115px;
        }

        .Favorites .tab li.responsible {
          width: 85px;
        }


        .Favorites .tab li.sel {
          background-color: var(--nav2-sel-back-color) !important;
          color: #fff;
        }

        .Favorites .tab li:not(.disabled) label {
          cursor: pointer;
        }

      .Favorites .tab .history {
        background-image: url('../images/svg-black/clock_reset-01.svg');
      }

      .Favorites .tab .favorites {
        background-image: url('../images/svg-black/star-01.svg');
      }

      .Favorites .tab .related {
        background-image: url('../images/svg-black/department_relation-01.svg');
      }

      .Favorites .tab .colleagues {
        background-image: url('../images/svg-black/relations-01.svg');
      }

      .Favorites .tab .responsible {
        background-image: url('../images/svg-black/home-user-01.svg');
      }

      .Favorites .tab .history.sel {
        background-image: url('../images/svg-white/clock_reset-01.svg');
      }

      .Favorites .tab .favorites.sel {
        background-image: url('../images/svg-white/star-01.svg');
      }

      .Favorites .tab .related.sel {
        background-image: url('../images/svg-white/department_relation-01.svg');
      }

      .Favorites .tab .colleagues.sel {
        background-image: url('../images/svg-white/relations-01.svg');
      }

      .Favorites .tab .responsible.sel {
        background-image: url('../images/svg-white/home-user-01.svg');
      }

      .Favorites .tab li:hover:not(.disabled) {
        background-color: var(--menu-sel-back-color);
      }



    .Favorites .body {
      width: 100%;
      overflow-y: auto;
      overflow-x: hidden;
      background-color: var(--nav2-back-color);
    }

      .Favorites .body::-webkit-scrollbar {
        width: 6px;
        height: 4px;
      }

      .Favorites .body::-webkit-scrollbar-button {
        width: 0px;
        height: 0px;
      }

      .Favorites .body::-webkit-scrollbar-thumb {
        background: #888;
        border: 2px none #e1e1e1;
        border-radius: 3px;
      }

        .Favorites .body::-webkit-scrollbar-thumb:hover {
          background: #ccc;
        }

        .Favorites .body::-webkit-scrollbar-thumb:active {
          background: var(--menu-sel-back-color);
        }

      .Favorites .body::-webkit-scrollbar-track {
        background: #666666;
        border: 0px none #666666;
        border-radius: 3px;
      }

        .Favorites .body::-webkit-scrollbar-track:hover {
          background: #666666;
        }

        .Favorites .body::-webkit-scrollbar-track:active {
          background: #444;
        }

      .Favorites .body::-webkit-scrollbar-corner {
        background: transparent;
      }


    .Favorites.expand .body {
      display: block;
    }

    .Favorites:hover .body {
      display: block;
    }

    .Favorites .body > ul > li {
      display: none;
    }

    .Favorites .body li.expand {
      display: block;
    }

    .Favorites .body a {
      display: table;
      width: 100%;
      height: 30px;
      overflow: hidden;
      padding: 3px;
    }


    .Favorites .body div {
      vertical-align: middle;
      display: table-cell;
      cursor: pointer;
      text-align: left;
    }

    .Favorites .body .DepImg.small,
    .Favorites .body .PerImg.small {
      height: 22px;
      width: 22px;
      display: block;
    }

      .Favorites .body .PerImg.small div {
        display: block;
      }

    .Favorites .body div.name {
      padding-left: 5px;
    }

    .Favorites .body .sel div.name {
      padding-right: 30px;
    }

    .Favorites .body div.image {
      vertical-align: middle;
      text-align: center;
      width: 22px;
    }

    .Favorites .body .group .title {
      padding: 5px;
      color: #ccc;
      cursor: pointer;
    }

    .Favorites .body .favorites a {
      cursor: ns-resize;
    }

    .Favorites .body div.all {
      padding-left: 25px;
      width: 100%;
      color: #fff;
    }

      .Favorites .body div.all:hover {
        opacity: 1;
        color: #fff;
      }

    .Favorites .body div.all {
      background-position: 290px center;
      background-repeat: no-repeat;
      background-size: 16px 16px;
      background-image: url('../images/svg-white/expand-01.svg');
      opacity: .7;
    }

    .Favorites .body .collapse .title {
      background-position: 290px center;
      background-repeat: no-repeat;
      background-size: 16px 16px;
      background-image: url('../images/svg-white/expand-01.svg');
      display: block;
    }

    .Favorites .body .collapse.expand .title {
      background-image: url('../images/svg-white/collapse-01.svg');
    }

    .Favorites .body .collapse ul {
      display: none;
    }

    .Favorites .body .collapse.expand ul {
      display: block;
    }

    /*  .Favorites .body div.all {
    background-image: url('../images/svg-white/collapse-01.svg')
  }*/
    .Favorites .body div.delete {
      float: right;
      margin-right: 0;
      opacity: .5;
      background-image: url('../images/svg-white/delete-01.svg');
      background-position: center center;
      height: 22px;
    }

      .Favorites .body div.delete:hover {
        opacity: 1;
      }

    .Favorites .body .loading {
      display: block;
      height: 25px;
      background-image: url(../images/loading110x10.png);
      background-position: center center;
      background-repeat: no-repeat;
    }

    .Favorites .body li.relation-under a {
    }

    .Favorites .body li.relation-over a {
    }

    .Favorites .body li.relation-own a {
    }

    .Favorites .body li.sel {
      background-color: var(--nav2-sel-back-color);
      xbackground-image: url('../images/svg-white/circle_check-01.svg');
      background-repeat: no-repeat;
      background-size: 22px 22px;
      background-position: 290px 3px;
    }

      .Favorites .body li.sel:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        line-height: 0;
        border: 15px solid transparent;
        border-right: 7px solid #fff;
      }

    .Favorites .body .favorites li.sel {
      background-image: none;
    }

    .Favorites .body li .url {
      display: block;
      font-size: 12px;
      padding-left: 10px;
      height: 0;
      overflow: hidden;
      padding: 0;
      padding-left: 11px;
    }

    .Favorites .body .history li:hover .url {
      animation: delayHeight 0.8s linear;
      height: 22px;
      line-height: 22px;
    }

    .Favorites .body li a {
      color: var(--nav2-color) !important;
    }

    .Favorites .body > ul > li > ul li:hover {
      background-color: var(--nav2-hover-back-color);
    }

    .Favorites .body > ul > li > ul > li.group:hover {
      background-color: transparent;
    }

    .Favorites .body .history li:first-child .url {
      display: block;
      animation: none;
      height: 22px;
      line-height: 22px;
    }

    .Favorites .body .history .url {
      background-color: var(--nav3-back-color);
    }

      .Favorites .body .history .url:hover {
        background-color: var(--nav3-hover-back-color);
      }


    .Favorites .body .history li:first-child a:nth-child(2) {
      color: #666;
    }

    .Favorites .body .history li:first-child a:nth-child(1) {
    }

    .Favorites .body .history li .url .name {
      padding-left: 20px;
    }
}

@keyframes delayHeight {
  0% {
    height: 0;
    line-height: 0;
  }

  90% {
    height: 0;
    line-height: 0;
  }

  100% {
    height: 22px;
    line-height: 22px;
  }
}





.view_hr_data_all #LeftBodyDiv,
.view_hr_data #LeftBodyDiv,
.view_hr_data_all #LeftDiv,
.view_hr_data #LeftDiv {
  display: none;
}

.view_hr_data_all #MainDiv,
.view_hr_data #MainDiv {
  padding-left: 50px;
}


.MainInpHelp {
  float: left;
  line-height: 29px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 5px;
  padding-right: 5px;
  color: #777;
}


@media all /*'FormAction'*/ {

  .FormAction {
    height: 40px;
    width: 100%;
  }

    .FormAction .menu {
      height: 40px;
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100%;
      padding-left: 370px;
      z-index: 12000;
    }

      .FormAction .menu:hover {
        z-index: 10001;
      }

    .FormAction ul {
      background-color: #dfdfdf;
      height: 40px;
      width: 100%;
      display: table;
    }

    .FormAction.changed ul {
      background-color: #18607d;
    }
    .FormAction.invalid ul {
      background-color: #6e8295;
    }
    .FormAction li {
      height: 40px;
      display: table-cell;
      padding-left: 10px;
      vertical-align: middle;
      width: auto;
      text-align: center;
    }
      .FormAction li:last-child {
        padding-right: 26px;
        text-align: right;
      }
      .FormAction li:first-child {
        padding-left: 20px;
        text-align: left;
      }


      .FormAction li.cancel {
        text-align: center;
      }
    .FormAction input {
      -moz-min-width: 100px;
      -ms-min-width: 100px;
      -o-min-width: 100px;
      -webkit-min-width: 100px;
      min-width: 100px;
      border: none;
    }

    .FormAction .submit input:not([disabled]) {
      color: #ffffff;
    }

    .FormAction .delete input:not([disabled]):hover {
      background-color: #dd0000;
      color: #ffffff !important;
    }

    .FormAction .delete input:not([disabled]) {
      background-color: #dddddd;
      color: #666 !important;
    }

    .FormAction .submit input {
      background-color: rgb(67, 160, 109);
    }
    .FormAction .submit input:hover {
      background-color: rgb(52, 146, 94);
    }

    .FormAction .send input {
      background-color: #318fad;
      color: #ffffff;
    }

      .FormAction .send input:hover {
        background-color: #187d9d;
      }

    .FormAction .reset input:not([disabled]) {
      background-color: orange;
      color: #ffffff;
    }

    .FormAction .reset input:hover {
      background-color: #ee8c06;
    }

    .FormAction .delete input:hover {
      background-color: red;
      color: #ffffff;
    }

    .FormAction.invalid .submit input:not([disabled]) {
      background-color: rgb(185, 82, 44);
    }

    .FormAction.invalid .btn-approve {
      background-color: rgba(203, 203, 203, 1);
    }

    .FormAction .btn-approve {
      color: #ffffff !important;
    }
}


input.valid, select.valid, textarea.valid, div[contenteditable].valid, textarea[data-text].valid + .ql-body, textarea[data-text].valid + .CodeMirror-body {
  border-left-color: green !important;
  border-left-width: 3px !important;
  padding-left: 2px !important;
  /*margin-left: -2px; not included in crome*/
}

input.changed, select.changed, textarea.changed, div[contenteditable].changed, textarea[data-text].changed + .ql-body, textarea[data-text].changed + .CodeMirror-body {
  border-left-color: rgb(35, 35, 192) !important;
  border-left-width: 3px !important;
  padding-left: 3px !important;
  /*margin-left: -2px; not included in crome*/
}

input.invalid, select.invalid, textarea.invalid, div[contenteditable].invalid, textarea[data-text].invalid + .ql-body, textarea[data-text].invalid + .CodeMirror-body {
  border-left-color: #c00 !important;
  border-left-width: 3px !important;
  padding-left: 2px !important;
  animation: blinkRedBorder 1s;
  animation-iteration-count: 5;
}


.MainInpCBox.validate.invalid + .slider:before {
  border-color: #c00;
  animation: blinkRedBorder 1s;
  animation-iteration-count: 5;
}
.MainInpCBox.validate.invalid + .slider {
  xxborder-color: #c00;
  animation: blinkRedBorder 1s;
  animation-iteration-count: 5;
}
.MainInpCBox.validate.invalid:checked + .slider:before {
  border-color: #c00;
  background-color: #c00;
}

@keyframes blinkRedBorder {
  50% {
    border-color: #ff0000;
  }
}
input.invalid[type='radio'], input.invalid[type='checkbox'], input.valid[type='radio'], input.valid[type='checkbox'], input.changed[type='radio'], input.changed[type='checkbox'] {
  margin: 4px 0 0;
}


.input-undo {
  width: 20px;
  height: 25px;
  float: left;
  background-image: url('../images/icon-svg/undo.svg');
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: .3;
  cursor: pointer;
}

  .input-undo:hover {
    opacity: 1;
  }


@media all /*'CodeMirror'*/ {

  .CodeMirror-body {
    max-width: 100%;
    border: 1px solid #aaa;
    border-radius: 4px;
  }

  .CodeMirror {
    border-radius: 4px;
  }

  .CodeMirror-toolbar {
    display: block;
    border-bottom: 1px solid #aaa;
    height: 29px;
  }

    .CodeMirror-toolbar .mode {
      line-height: 27px;
      opacity: 0.5;
      padding: 0px 4px;
    }

    .CodeMirror-toolbar span {
      display: inline-block;
    }

      .CodeMirror-toolbar span:last-child {
        float: right;
      }


    .CodeMirror-toolbar button {
      cursor: pointer;
      display: inline-block;
      float: left;
      height: 28px;
      padding: 2px 4px;
      width: 28px;
      margin-left: 0px;
      border: none;
      background: none;
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: center center;
      opacity: 0.3;
    }

      .CodeMirror-toolbar button:hover {
        opacity: 1;
      }

    .CodeMirror-toolbar .close {
      background-image: url('../images/svg-black/window-close-01.svg');
    }

      .CodeMirror-toolbar .close:hover {
        background-color: red;
      }

    .CodeMirror-toolbar .maximize {
      background-image: url('../images/svg-black/window-maximize-01.svg');
    }

    .CodeMirror-toolbar .minimize {
      background-image: url('../images/svg-black/window-minimize-01.svg');
    }

    .CodeMirror-toolbar .restore {
      background-image: url('../images/svg-black/window-restore-01.svg');
    }

  .restore .CodeMirror-toolbar .restore {
    opacity: 1;
  }

  .maximize .CodeMirror-toolbar .maximize {
    opacity: 1;
  }

  .minimize .CodeMirror-toolbar .minimize {
    opacity: 1;
  }

  .minimize .CodeMirror {
    height: auto;
  }

  .restore .CodeMirror {
    height: 300px;
  }

  .maximize .CodeMirror {
    position: fixed;
    top: 29px;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
  }

  .maximize .CodeMirror-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .CodeMirror-body.maximize {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    border: none;
    background-color: #fff;
    border-radius: 0;
    min-height: 100vh;
  }
}

@media all /*'FormFilter'*/ {
  .FormFilter {
    position: relative;
    float: left;
    z-index: 1;
  }

    .FormFilter > div.icon {
      padding-right: 5px !important;
      margin: 0;
    }

    .FormFilter .body {
      position: absolute;
      left: 0;
      background-color: rgba(227, 227, 227, 1);
      padding: 0;
      top: 100%;
      z-index: 0;
      transition: top 1s 1s;
      max-height: 0px;
      overflow: hidden;
      display: block;
      transition: max-height 0.4s;
    }

    .FormFilter.expand .body, .FormFilter.sel .body {
      max-height: 230px;
      transition: max-height 1s;
    }


    .FormFilter .add {
      width: 215px;
      height: 32px;
      margin: 3px 0;
    }

      .FormFilter .add .MainInp {
        float: left;
        width: 170px;
        margin: 2px;
      }

      .FormFilter .add .btn {
        float: right;
        min-width: 32px;
        min-height: 32px;
        width: 32px;
        height: 32px;
        background-position: 6px 6px;
        padding: 0;
        margin: 0;
        background-color: transparent;
      }

    .FormFilter .menu {
      max-height: 215px;
      overflow-y: auto;
    }

    .FormFilter ul {
      display: block;
    }

    .FormFilter li {
      width: 200px;
      display: table-row;
    }

      .FormFilter li:nth-child(odd) {
        background-color: #e9e9e9;
      }

      .FormFilter li:hover {
        background-color: rgb(246, 246, 246);
      }


      .FormFilter li a {
        text-align: left;
        display: table-cell;
        width: 195px;
        cursor: pointer;
        height: 22px;
        line-height: 22px;
        padding-left: 4px;
        color: #000;
      }

      .FormFilter li span {
        display: table-cell;
        width: 20px;
        height: 22px;
        background-image: url(../images/icon16/DeleteNA.gif);
        background-repeat: no-repeat;
        background-position: center center;
        opacity: .5;
      }

        .FormFilter li span:hover {
          background-image: url(../images/icon16/Delete.gif);
          opacity: 1;
        }
}


@media all /*'btn'*/ {
  .btn.gray {
    background-color: rgba(203, 203, 203, 1);
  }

  .btn.Green:hover {
    background-color: #339933;
    border-color: #339933;
    color: #FFF !important;
  }

  .btn.Green:active {
    background-color: #339933;
    border-color: #339933;
    color: #FFF !important;
  }

  .btn.Blue:hover {
    background-color: #0052A4;
    border-color: #0052A4;
    color: #FFF !important;
  }

  .btn.Blue:active {
    background-color: #0052A4;
    border-color: #0052A4;
    color: #FFF !important;
  }

  .btn.Error:hover, .btn.Red:hover {
    background-color: #CC3333;
    border-color: #CC3333;
    color: #FFF !important;
  }

  .btn.Error:active, .btn.Red:active {
    background-color: #CC3333;
    border-color: #CC3333;
    color: #FFF !important;
  }

  .btn.input {
    background-color: white;
    color: #808080;
  }

  .btn.btn-move-back, .btn.btn-move-next {
    background-position: center center;
    background-repeat: no-repeat;
    width: 31px;
    height: 31px;
  }

  .btn.btn-move-back {
    background-image: url('../images/svg-black/move-back-02.svg');
  }

  .btn.btn-move-next {
    background-image: url('../images/svg-black/move-next-02.svg');
  }

  .btn.btn-approve, .btn.btn-disapprove, .btn.btn-cancle, .btn.btn-cancel, .btn.btn-notrelevant, .btn.btn-delete, .btn.btn-save, .btn.btn-reset {
    padding-left: 30px;
  }

  .btn.btn-approve {
    background-color: #357e34;
    color: #fff;
    background-image: url('../images/svg-black/check-01.svg');
  }
  .btn.btn-submit {
    background-color: #357e34;
    color: #fff;
    background-image: url('../images/svg-black/send-01.svg');
  }

    .btn.btn-submit:hover {
      background-color: #0da3e5;
    }

    .btn.btn-approve:hover {
      background-color: #376c37;
    }

  .btn.btn-next {
    padding-right: 30px;
    background-image: url('../images/svg-black/move-next-02.svg');
    background-position: right center;
  }
   

  .btn.btn-disapprove {
    background-color: #ffcb00;
    color: #000;
    background-image: url('../images/svg-black/exclamation-01.svg');
    padding-left: 30px;
  }

  .btn.btn-approve {
    background-color: #357e34;
    color: #fff;
    background-image: url('../images/svg-black/check-01.svg');
    background-size: 20px auto;
  }

    .btn.btn-approve:hover {
      background-color: #376c37;
    }

  .btn.btn-disapprove {
    background-color: #ffcb00;
    color: #000;
    background-image: url(../images/svg-black/exclamation-01.svg);
  }

    .btn.btn-disapprove:hover {
      background-color: #e8bd66;
    }
  .btn.btn-notrelevant {
    background-color: #ffa73b;
    background-image: url(../images/svg-black/forbidden-01.svg);
  }

    .btn.btn-notrelevant:hover {
      background-color: #d98010;
      border-color: #d98010;
    }
  .btn.btn-delete {
    color: #cc0000;
    background-image: url(../images/svg-black/delete-01.svg);
  }

    .btn.btn-delete:hover {
      color: #fff;
      background-color: #cc0000;
      border-color: #cc0000;
    }
  .btn.btn-reset {
    background-image: url('../images/svg-black/reset-01.svg');
  }

  .btn.btn-cancle, .btn.btn-cancele {
    background-color: #00b1ff;
    color: #fff;
    background-image: url('../images/svg-black/back-01.svg');
  }

    .btn.btn-cancle:hover, .btn.btn-cancel:hover {
      background-color: #0da3e5;
      border-color: #0da3e5;
    }

  .btn.btn-save {
    background-color: #5985a5;
    color: #fff;
    background-image: url('../images/svg-black/save-03.svg');
  }


}


.input-row {
  overflow: hidden;
  display: inline-block;
  border: 1px solid #808080;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
}

  .input-row:hover {
    border-color: #66afe9;
  }

  .input-row > * {
    border: none;
    float: left;
  }


/* ----------------------------------------------------------
   SECTION print
   ---------------------------------------------------------- */

@media print {
}

/*
     class "main-only" is set when printing
     PrintMode=True (URL) is used in asp code to exclude LeftBodyDiv, BanDiv, FooterBody, MenuBody
*/

BODY.main-only, .main-only.Body, .main-only.BodyBody {
  background-color: #ffffff;
}

.main-only a.IconEdit {
  visibility: hidden;
}

.main-only a.IconEditNa {
  visibility: hidden;
}

.main-only a.IconEditSmall {
  visibility: hidden;
}

.main-only a.IconEditInText {
  visibility: hidden;
}

.main-only a.IconEditInTextNA {
  visibility: hidden;
}

.main-only a.IconEditInView {
  visibility: hidden;
}

.main-only a.IconEditInViewNA {
  visibility: hidden;
}



.IconTextEdit, .IconTextEditNA,
.IconTextItemEdit, .IconTextItemEditNA,
.IconEditInView, .IconEditInViewNA,
.IconEditSmall, .IconEditSmallNA,
.IconEditInText, .IconEditInTextNA, .icon_edit {
  background-image: url('../images/svg-black/edit-in-view-01.svg');
}


@media all /*'CubesDropArea'*/ {
  .CubesDropArea {
    border: 2px dashed #ccc;
    border-radius: 20px;
    padding: 20px;
    max-width: 450px;
    margin-top: 10px;
  }

    .CubesDropArea.highlight {
      border-color: purple;
    }

    .CubesDropArea p {
      margin-top: 0;
    }

    .CubesDropArea div {
      margin: 0 auto;
      text-align: center;
    }

      .CubesDropArea div div {
        margin-bottom: 10px;
      }

    .CubesDropArea .button {
      display: inline-block;
      padding: 10px;
      background: #ccc;
      cursor: pointer;
      border-radius: 5px;
      border: 1px solid #ccc;
    }

    .CubesDropArea #progress-bar {
      width: 50%;
    }

    .CubesDropArea .button:hover {
      background: #ddd;
    }

    .CubesDropArea #fileElem {
      display: none;
    }
}



@media all /*'SectionMenu'*/ {

  .SectionMenu {
    right: 0;
    position: fixed;
    transition: top 0.4s;
    background-color: #fff;
    z-index: 100;
    padding-top: 40px;
    max-width: 250px;
  }

  .scrolled-top-0 .SectionMenu {
    transition: top 0.4s;
  }

  .scrolled-up .SectionMenu {
    transition: top 0.4s;
  }

  .SectionMenu li[data-section] {
    padding-left: 10px;
  }

  .SectionMenu li {
    padding: 5px;
    font-size: 14px;
    cursor: pointer;
    color: #999;
    border-left: solid 3px transparent;
    transition: border-left 0.5s;
  }

    .SectionMenu li:hover {
      color: #000;
    }

    .SectionMenu li.visible {
      border-left: solid 3px #aaa;
      transition: border-left 0.5s;
    }

    .SectionMenu li.partially {
      border-left: solid 3px #ccc;
      transition: border-left 0.5s;
    }
}

@media all /*'ToolBox'*/ {

  .ToolBox {
    padding: 0;
    display: block;
    padding-top: 30px;
    padding-left: 30px;
    overflow: hidden;
    margin-right: 0;
    font-size: 13px;
  }


    .ToolBox div {
      float: left;
      height: 101px;
      width: 101px;
      position: relative;
      float: left;
      padding-left: 16px;
      padding-bottom: 16px;
      background-size: 40%;
    }


      .ToolBox div div {
        padding-left: 25px;
        padding-top: 0px;
        background-color: var(--toolbox-back-color);
        height: 100%;
        width: 100%;
        background-position: center 10px;
        background-repeat: no-repeat;
        transition: all 0.4s;
        border-radius: 10px;
      }


    .ToolBox .brake {
      padding-left: 0 !important;
      vertical-align: top;
      margin-top: 15px;
      margin-bottom: 5px;
      height: 50px !important;
      width: 100%;
      background-color: transparent;
      color: var(--toolbox-color);
    }


      .ToolBox .brake div {
        background-color: transparent !important;
      }



    .ToolBox .Big div {
      background-color: rgb(191, 191, 191);
    }

    .ToolBox div div:hover {
      background-color: var(--toolbox-hover-back-color);
      transition: all 0.4s;
    }

    .ToolBox div .NA:hover i,
    .ToolBox div .NA:hover {
      background-color: transparent;
    }

    .ToolBox .brake b {
      color: #000;
      font-size: 20px;
      font-weight: lighter;
      width: 100%;
      text-align: left;
      opacity: 1 !important;
    }

    .ToolBox b {
      color: var(--toolbox-color);
      display: block;
      font-weight: normal;
      position: absolute;
      bottom: 8px;
      left: 0px;
      width: 100%;
      padding: 0px 2px;
      text-align: center;
      line-height: 1.1;
    }

    .ToolBox div i {
      font-style: normal;
      display: block;
      color: #fff;
      font-weight: normal;
      overflow: hidden;
      position: absolute;
      bottom: 8px;
      left: 0px;
      width: 100%;
      padding: 0px 2px;
      text-align: center;
      line-height: 1.1;
      opacity: 0;
      transition: all 0.4s;
      background-color: var(--toolbox-back-color);
    }

    .ToolBox div div:hover i {
      opacity: 1;
      background-color: var(--toolbox-hover-back-color);
      transition: all 0.4s;
    }

    .ToolBox div:hover b {
      opacity: 0;
      transition: all 0.4s;
    }

    .ToolBox a {
      text-decoration: none !important;
    }
}

table.loading {
  background-image: url('../images/loading32x32.gif');
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 64px;
  min-width: 64px;
}

.MainSelDiv {
  float: left;
  clear: both;
  display: inline-block;
  overflow-y: auto;
}

input[readonly] {
  background-color: #d2d2d2;
  padding: 2px;
  margin: 0 0 0 0;
  background-image: none;
}


@media all /*'FrontPage'*/ {

  .view_start .LeftDiv, .view_start #LeftBody, .view_start .LeftBody, .view_start #LeftBodyDiv {
    display: none;
  }


  .view_start .MainDiv {
    padding: 0;
  }

  .view_start {
  }






    .view_start .MainTitle {
      display: block;
      color: #FFFFFF;
      width: 760px;
      padding-right: 0;
      padding-left: 0;
      font-size: 45px;
      font-weight: normal;
      height: 70px;
      position: static;
    }



    .view_start .MainBody {
      padding-left: 50px;
      padding-top: 50px;
    }

    .view_start .MainDivBody.section {
      padding: 0;
      margin: 0;
    }

    .view_start .MainTitle {
      display: none;
      position: relative;
    }

    .view_start .Body2 {
      display: none;
    }

  .FrontPage {
    width: 100%;
    min-height: calc( 100vh - 50px);
    background-color: #e8e8e8;
  }

    .FrontPage .loading > div {
      opacity: 0.1;
    }

    .MainBody.loading,
    .FrontPage .loading {
      content: "loading";
      background-image: url('../images/loading32x32.gif');
      background-repeat: no-repeat;
      background-position: center center;
      min-height: 50px;
    }

  .btn.loading {
    background-image: url('../images/loading32x32.gif');
    background-repeat: no-repeat;
    background-color: #ffffff66 !important;
    background-position: 2px center;
  }

  .MainBody.timeout {
    content: "loading";
    background-image: url('../images/svg-black/warning-01.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 64px 64px;
    min-height: 50px;
  }



  .FrontPage .ToolBox {
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
  }

    .FrontPage .ToolBox div div {
      background-color: rgb(96, 96, 96);
      color: #fff;
    }

      .FrontPage .ToolBox div div:hover {
        background-color: var(--toolbox-hover-back-color);
      }

    .FrontPage .ToolBox div i {
      background-color: rgb(96, 96, 96);
    }

    .FrontPage .ToolBox b {
      color: #fff;
    }
    /*
  .FrontPage .ToolBox div {
    padding-left: 16px;
    padding-right: 0;
    padding-bottom: 15px;
    height: 101px;
    width: 101px;
    position: relative;
    float: left;
  }

    .FrontPage .ToolBox div div {
      height: 100%;
      width: 100%;
      padding: 0;
      background-color: rgb(96, 96, 96);
      background-position: center 10px;
      background-repeat: no-repeat;
      transition: background-color 0.4s;
    }

      .FrontPage .ToolBox div div.Big {
        background-color: #808080;
      }

      .FrontPage .ToolBox div div.Small {
        background-color: #ccc;
      }

  .FrontPage .ToolBox div div:hover {
    background-color: rgba(49, 142, 172, 1);
    transition: background-color 0.4s;
  }

  .FrontPage .ToolBox b {
    color: #fff;
    display: block;
    font-weight: normal;
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 80px;
    text-align: center;
    line-height: 1.1;
  }

  .FrontPage .ToolBox div i {
    font-style: normal;
    display: block;
    color: #fff;
    font-weight: normal;
    overflow: hidden;
    position: absolute;
    bottom: 8px;
    left: 0;
    width: 80px;
    text-align: center;
    line-height: 1.1;
    opacity: 0;
    transition: all 0.4s;
  }



  .FrontPage .ToolBox .icon_checkin {
  }

  */
  .FrontPage .Links .nav li.expand > div, .FrontPage .LeaderLinks .nav li.expand > div {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

    .FrontPage .ToolBox .ThermometerWell.active {
      background-color: #a81f1f;
    }

      .FrontPage .ToolBox .ThermometerWell.active i {
        background-color: #a81f1f !important;
      }

    .FrontPage .ToolBox .icon_checkout {
      background-color: #a81f1f;
    }

  .FrontPage .what {
    height: 40px;
    text-align: center;
    float: none;
    background-color: #fff;
  }

    .FrontPage .what > div {
      width: 100px;
      height: 40px;
      display: inline-flex;
      border-bottom: 2px solid transparent;
      color: #2083c4;
    }

      .FrontPage .what > div > div {
        width: 100px;
        height: 38px;
        padding-top: 6px;
        font-size: 18px;
        text-align: center;
        text-transform: uppercase;
      }

      .FrontPage .what > div.sel {
        border-bottom-color: #2083c4;
      }

      .FrontPage .what > div:hover {
        color: var(--banner-back-color);
        border-bottom-color: var(--banner-back-color);
        cursor: pointer;
      }

  #FrontPageBody {
    width: 100%;
  }

  .FrontPage .person {
    width: 288px;
    clear: both;
    background-color: #cccccc;
  }

    .FrontPage .person[onclick]:hover {
      background-color: #d9d9d9;
    }

    .FrontPage .person.A:hover {
      background-color: #d9d9d9;
    }

    .FrontPage .person > div {
      width: 288px;
      display: table;
    }

  .FrontPage .responsible .person .img {
    width: 30px;
    height: 30px;
    padding: 0px;
    display: table-cell;
  }

  .FrontPage .person .img .PerImg {
    width: 22px;
    height: 22px;
    margin: 2px;
  }

  .FrontPage.own .todo .person .img {
    display: none;
  }

  .FrontPage.own .todo .person .name {
    padding-left: 10px;
    width: 168px;
  }

  .FrontPage .person .name {
    width: 178px;
    padding: 2px 0;
    display: table-cell;
    min-height: 30px;
    vertical-align: middle;
    color: #000;
  }

    .FrontPage .person .name div {
      display: table-cell;
      padding-left: 5px;
    }

      .FrontPage .person .name div.color {
        width: 5px;
      }

  .FrontPage .person .text, .FrontPage .person .count {
    width: 80px;
    padding: 2px;
    padding-right: 5px;
    display: table-cell;
    min-height: 35px;
    vertical-align: middle;
    text-align: right;
    color: #000;
  }

  .FrontPage .person .count {
    padding-right: 10px;
  }

  .FrontPage .AbsenceNeedApproval .person .count {
    width: 110px;
  }

  .FrontPage .AbsenceNeedApproval .person .name {
    width: 148px;
  }


  .FrontPage .responsible {
    width: 230px;
    float: left;
    background-color: #484848;
  }

    .FrontPage .responsible .header:hover,
    .FrontPage .responsible .person:hover {
      background-color: var(--nav2-hover-back-color);
    }

    .FrontPage .responsible .person.sel:hover {
      background-color: var(--nav2-sel-back-color);
    }

    .FrontPage .responsible .person.sel {
      background-color: var(--nav2-sel-back-color);
    }

      .FrontPage .responsible .person.sel .select:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 0;
        line-height: 0;
        border: 15px solid transparent;
        border-right: 7px solid #e8e8e8;
      }

    .FrontPage .responsible .header .select {
      background-image: url('../images/svg-white/circle_delete-01.svg');
      background-repeat: no-repeat;
      background-size: 27px 27px;
      background-position: center center;
    }




    .FrontPage .responsible .header .sel .select {
      background-image: none;
    }

    .FrontPage .responsible .header,
    .FrontPage .responsible .person {
      width: 100%;
      min-width: 230px;
      clear: both;
      background-color: transparent;
    }

      .FrontPage .responsible .person.hidden {
        display: none;
      }

      .FrontPage .responsible .header > div,
      .FrontPage .responsible .person > div {
        width: 100%;
        display: table;
      }

      .FrontPage .responsible .header .text {
        width: 80%;
        padding: 0;
        padding-left: 15px;
        display: table-cell;
        height: 40px;
        vertical-align: middle;
        color: #fff;
      }

      .FrontPage .responsible .person .img {
        width: 15%;
        padding: 2px;
        padding-left: 5px;
        display: table-cell;
      }




      .FrontPage .responsible .person .name {
        width: 65%;
        padding-bottom: 2px;
        display: table-cell;
        min-height: 30px;
        vertical-align: middle;
        color: #fff;
      }

      .FrontPage .responsible .header .select,
      .FrontPage .responsible .person .select {
        width: 20%;
        padding: 0;
        display: table-cell;
        position: relative;
      }

    .FrontPage .responsible .subheader .text {
      width: 230px;
      padding: 0;
      padding-left: 15px;
      display: table-cell;
      height: 40px;
      vertical-align: middle;
      color: #fff;
    }

    .FrontPage .responsible .subheaderText {
      width: 230px;
      padding: 0;
      padding-left: 15px;
      vertical-align: middle;
      display: table-cell;
      height: 40px;
      vertical-align: middle;
      color: #fff;
    }


    .FrontPage .responsible .collapse.subheader .text {
      background-position: 199px 13px;
      background-repeat: no-repeat;
      background-size: 17px 17px;
      background-image: url('../images/svg-white/expand-01.svg')
    }


    .FrontPage .responsible .collapse.expand.subheader .text {
      background-image: url('../images/svg-white/collapse-01.svg')
    }

    .FrontPage .responsible .collapse .person {
      display: none;
    }

    .FrontPage .responsible .collapse.expand .person {
      display: block;
    }

  .FrontPage .body .col {
    width: 305px;
    float: left;
  }

    .FrontPage .body .col.col-1 {
    }

    .FrontPage .body .col.col-2 {
    }

    .FrontPage .body .col.col-3 {
    }

    .FrontPage .body .col.col-4 {
    }

  .FrontPage .menu {
    margin-top: 30px;
  }


  .FrontPage .col .header,
  .FrontPage .col .subheader {
    margin-left: 16px;
    margin-top: 10px;
    width: 288px;
    height: 20px;
    color: #666;
  }

  .FrontPage .col .subheader {
    border-bottom: none;
    margin-top: 0;
  }

  .FrontPage .col .body {
    margin-left: 16px;
    margin-bottom: 5px;
    background-color: #fff;
    width: 288px;
    border-radius: 5px;
    overflow: hidden;
  }

  .FrontPage .todo {
    padding-top: 28px;
  }

    .FrontPage .todo .header {
      margin-top: 2px;
      height: 40px;
      background-color: #808080;
      color: #fff;
      border: none;
      border-top-right-radius: 5px;
      border-top-left-radius: 5px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    .FrontPage .todo .active .header {
      background-color: rgb(96, 96, 96);
      transition: background-color 0.4s;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

    .FrontPage .todo .collapse .header {
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
    }

    .FrontPage .todo .collapse.expand .header {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }

  .FrontPage .Links .nav li div,
  .FrontPage .LeaderLinks .nav li div {
  }

  .FrontPage .todo .collapse.active .header:hover {
    background-color: #333;
    transition: background-color 0.4s;
  }

  .FrontPage .todo .header > div {
    display: table-row;
    height: 40px;
  }

  .FrontPage .todo .header .text {
    height: 40px;
    width: 228px;
    display: table-cell;
    padding-left: 50px;
    vertical-align: middle;
    background-position: 5px 5px;
    background-repeat: no-repeat;
    background-size: 30px 30px;
  }

  .FrontPage .todo .body {
    background-color: #ccc;
    margin-bottom: 5px;
    transition: background-color 0.4s;
    border-radius: 0 0 5px 5px;
    overflow: hidden;
  }

    .FrontPage .todo .body > div:hover {
      background-color: #d9d9d9;
      transition: background-color 0.4s;
    }

    .FrontPage .todo .body div {
    }

    .FrontPage .todo .body .text {
      width: 120px;
      display: table-cell;
      padding: 2px 5px;
      vertical-align: middle;
      text-align: right;
    }

    .FrontPage .todo .body .title {
      width: 169px;
      display: table-cell;
      padding: 0px 5px;
      vertical-align: middle;
    }

      .FrontPage .todo .body .title div {
        width: 189px;
        display: table-cell;
        padding: 2px 0px;
        vertical-align: middle;
      }

      .FrontPage .todo .body .title .color {
        width: 8px;
        height: 22px;
        float: left;
        margin-left: -5px;
        margin-right: 5px;
      }

  .FrontPage .todo .header .count {
    display: table-cell;
    width: 60px;
    height: 40px;
    text-align: right;
    vertical-align: middle;
    font-size: 17px;
    padding-right: 10px;
  }

    .FrontPage .todo .header .count.smaller {
      font-size: 14px;
    }

  .FrontPage .cell {
    position: relative;
  }

    .FrontPage .cell .funnel {
      position: absolute;
      top: 0;
      right: 0;
      z-index: 10;
    }

      .FrontPage .cell .funnel .current {
        text-align: right;
        padding-right: 20px;
        background-image: url('../images/svg-black/funnel-01.svg');
        background-position: right 2px;
        background-size: 16px 16px;
        background-repeat: no-repeat;
        opacity: 0.5;
        cursor: pointer;
        height: 19px;
      }

      .FrontPage .cell .funnel .filters {
        cursor: pointer;
        display: none;
        background: #bbbbbb;
        border-radius: 5px;
      }

        .FrontPage .cell .funnel .filters div {
          padding: 2px 5px;
        }

          .FrontPage .cell .funnel .filters div:hover {
            background-color: #d9d9d9;
          }

      .FrontPage .cell .funnel.sel .filters {
        display: block;
      }

      .FrontPage .cell .funnel.sel {
        z-index: 20;
      }

  #ToDo_AbsenceNeedApproval .header .text {
    background-image: url('../images/svg-white/absence_approval-01.svg');
  }

  #ToDo_TransferNeedApproval .header .text {
    background-image: url('../images/svg-white/absence_approval-01.svg');
  }

  .FrontPage [id^="ToDo_Form"] .header .text {
    background-image: url('../images/svg-white/form-01.svg');
  }

  .FrontPage [id^="ToDo_Amass"] .header .text {
    background-image: url('../images/svg-white/form-01.svg');
  }

  #ToDo_AmassNeedApproval .header .text {
    background-image: url('../images/svg-white/absence_approval-01.svg');
  }

  #ToDo_TimeCardEmpty .header .text {
    background-image: url('../images/svg-white/timecard_missing-01.svg');
  }

  #ToDo_CVOverDue .header .text {
    background-image: url('../images/svg-white/cv-02.svg');
  }

  #ToDo_TimeCardNeedApproval .header .text {
    background-image: url('../images/svg-white/timecard_approve-01.svg');
  }

  #ToDo_Maternity .header .text {
    background-image: url('../images/svg-white/baby_carriage-01.svg');
  }

  #ToDo_GoalsFocused .header .text {
    background-image: url('../images/svg-white/goal-01.svg');
  }

  #ToDo_GoalsNeedApproval .header .text {
    background-image: url('../images/svg-white/goal_history-01.svg');
  }

  #ToDo_EvaluationNeedAnswer .header .text {
    background-image: url('../images/svg-white/evaluation-01.svg');
  }


  .FrontPage .vacationexpires .todo .header .text {
    background-image: url('../images/svg-white/hourglass-01.svg');
    background-size: 22px 22px;
    background-position: 5px 8px;
  }

  #ToDo_EditNote .header .text {
    background-image: url('../images/svg-white/notes-01.svg');
  }

  #ToDo_PerDev .header .text {
    background-image: url('../images/svg-white/development-01.svg');
  }

  #ToDo_PerDevAct .header .text {
    background-image: url('../images/svg-white/development_activity-01.svg');
  }

  #ToDo_PerDevFeedback .header .text {
    background-image: url('../images/svg-white/question_option-01.svg');
  }

  #ToDo_QueParticipant .header .text {
    background-image: url('../images/svg-white/survey-01.svg');
  }

  #ToDo_DistancesNeedApproval .header .text {
    background-image: url('../images/svg-white/milage-01.svg');
  }

  #ToDo_ExpenseNeedApproval .header .text {
    background-image: url('../images/svg-white/compensation-01.svg');
  }

  #ToDo_GoalsFocused .color, #ToDo_GoalsNeedApproval .color {
  }

  .FrontPage #ToDoBody_GoalsFocused .person .name div.color, .FrontPage #ToDo_GoalsNeedApproval .person .name div.color {
    width: 14px !important;
    height: 14px !important;
    border-radius: 100%;
    min-height: 0;
    display: inline-block;
    float: left;
    margin-top: 2px;
    margin-left: -5px;
  }

  .FrontPage .todo .collapse .header {
  }

    .FrontPage .todo .collapse .header .count {
      background-position: 0px 12px;
      background-repeat: no-repeat;
      background-size: 17px 17px;
      background-image: url('../images/svg-white/expand-01.svg')
    }

  .FrontPage .todo .collapse.expand .header .count {
    background-image: url('../images/svg-white/collapse-01.svg')
  }

  .FrontPage .todo .collapse .body {
    display: none;
  }

  .FrontPage .todo .collapse.expand .body {
    display: block;
  }

  .FrontPage .responsible .collapse.text {
  }

  .FrontPage .todo .collapse .header {
  }



  .chart .body {
    background-color: #fff;
    padding: 10px 0;
    min-height: 100px;
    width: 100%;
  }

  .chart .title {
    color: #999;
  }

  .chart {
  }

    .chart.chartVacation .background {
      left: 0;
      bottom: 20%;
      font-size: 30px;
      text-align: center;
      pointer-events: none;
      /* TODO: Fix the position */
      display: none;
    }

  .FrontPage .chart .body {
    margin-left: 16px;
    height: 220px;
    width: 288px;
  }

  .FrontPage .chart .canvas {
    width: 250px;
  }



  .FrontPage .chart .title {
    margin-left: 16px;
    margin-top: 10px;
    height: 20px;
    width: 288px;
    color: #666;
  }

  .FrontPage .chart.chartVacation .background {
    position: relative;
    bottom: 35%;
    width: 288px;
    /* TODO: Remove this when position in generic chartVacation is fixed */
    display: block;
  }

  .FrontPage .onabsence .person > div {
    width: 288px;
    display: table;
  }




  .FrontPage .onabsence .person .name {
    width: 168px;
    padding: 0;
    display: table-cell;
    min-height: 35px;
    vertical-align: middle;
    color: #000;
  }

  .FrontPage .beaware .header {
    margin-left: 16px;
    margin-top: 10px;
    height: 20px;
    width: 288px;
    color: #999;
    border-bottom: 1px solid #4d9ace;
  }

    .FrontPage .beaware .header .text {
      width: 200px;
      float: left;
    }

    .FrontPage .beaware .header .count {
      width: 80px;
      float: right;
      text-align: right;
    }


  .FrontPage .calendar {
    position: relative;
  }

    .FrontPage .calendar .next {
      position: absolute;
      top: 30px;
      right: 15px;
      width: 30px;
      height: 30px;
      padding-top: 0px;
      padding-right: 3px;
      text-align: right;
      cursor: pointer;
    }

    .FrontPage .calendar .prev {
      position: absolute;
      top: 30px;
      left: 31px;
      width: 30px;
      height: 30px;
      padding-top: 0px;
      padding-left: 3px;
      cursor: pointer;
    }

    .FrontPage .calendar .body {
      margin-left: 16px;
      margin-top: 0;
      width: 288px;
      background-color: #fff;
      padding: 10px 0;
    }

      .FrontPage .calendar .body:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
      }

    .FrontPage .calendar .month {
      border: 1px solid #cccccc;
      background-color: #f8f8f8;
      width: 125px;
      float: left;
      margin-left: 12px;
    }

      .FrontPage .calendar .month .title {
        font-weight: bold;
        text-align: center;
        font-size: 11px;
      }

    .FrontPage .calendar .weeks {
      display: table-row;
    }

      .FrontPage .calendar .weeks > div > div {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
        width: 15px;
        height: 15px;
        font-size: 10px;
      }

      .FrontPage .calendar .weeks > div:first-child div {
        color: #666;
        border-bottom: 1px solid #cccccc;
      }

      .FrontPage .calendar .weeks > div div:first-child {
        color: #666;
        font-style: italic;
        width: 20px;
      }

    .FrontPage .calendar .other {
      color: #ccc;
    }

    .FrontPage .calendar .gray {
      background-color: #e8e8e8;
    }

    .FrontPage .calendar .today {
      color: #cc0000;
    }

    .FrontPage .calendar .not-approved {
      background-image: url('../images/stripeCC.gif');
      background-position: top top;
      background-repeat: repeat;
    }



  .FrontPage .status .body {
    color: #999;
  }

    .FrontPage .status .body > div {
      width: 288px;
      display: table;
    }

  .FrontPage .status .time {
    width: 108px;
    padding: 0px 5px;
    display: table-cell;
    vertical-align: middle;
  }

  .FrontPage .status .active .time {
    color: #000;
  }

  .FrontPage .status .body *[onclick]:hover,
  .FrontPage .status .body .A:hover {
    background-color: #f2f2f2;
  }

  .FrontPage .status .title {
    width: 160px;
    padding: 2px;
    display: table-cell;
    vertical-align: middle;
  }

  .FrontPage .status .past {
    color: #ccc;
  }

  .FrontPage .status .active {
    color: #000;
  }

  .FrontPage .status .private .title {
    background-image: url('cubes_images/icon_lock.gif');
    background-repeat: no-repeat;
    background-position: right center;
  }

  .FrontPage .news {
    position: relative;
  }

    .FrontPage .news .slick-dots {
      top: -2px;
      bottom: 0px;
      width: 200px;
      right: 0;
      padding: unset;
      text-align: right;
    }

    .FrontPage .news .body {
      padding: 0;
      margin: 0;
      margin-bottom: 10px;
      margin-left: 16px;
      background-color: #fff;
      width: 288px;
    }

      .FrontPage .news .body .item {
        display: block;
        list-style: none;
        padding: 0;
      }

        .FrontPage .news .body .item.alert {
          background-color: #e8bcbc;
        }

        .FrontPage .news .body .item.info {
          background-color: #85bee4;
        }

        .FrontPage .news .body .item.warning {
          background-color: #fefebc;
        }


        .FrontPage .news .body .item .text {
          padding: 10px;
        }

        .FrontPage .news .body .item .files a {
          margin: 10px;
          display: block;
          padding: 2px;
          padding-left: 25px;
        }

        .FrontPage .news .body .item .title {
          padding: 10px;
          font-weight: bold;
        }

        .FrontPage .news .body .item .files img,
        .FrontPage .news .body .item .files video {
          max-width: 288px;
          padding: 10px;
        }

    .FrontPage .news .header {
      border-bottom: none;
    }



  .FrontPage .Links .nav li li div,
  .FrontPage .LeaderLinks .nav li li div {
    color: #000;
  }

  .FrontPage .Links .nav li li li div,
  .FrontPage .LeaderLinks .nav li li li div {
    color: inherit;
    padding-left: 30px;
  }

  .FrontPage .Links li,
  .FrontPage .LeaderLinks li {
  }

  .FrontPage .Links .nav li div,
  .FrontPage .LeaderLinks .nav li div {
    background-color: #808080;
    color: #fff;
    font-weight: normal;
    padding: 0 20px;
    line-height: 40px;
  }

  .FrontPage .col .Links .body {
    background-color: transparent;
  }


  .FrontPage .Links .nav li div:hover,
  .FrontPage .LeaderLinks .nav li div:hover {
    cursor: pointer;
    background-color: rgb(96, 96, 96);
  }

  .FrontPage .Links .nav li li div:hover,
  .FrontPage .LeaderLinks .nav li li div:hover {
    background-color: #f0f0f0;
  }

  .FrontPage .Links .nav > ul > li,
  .FrontPage .LeaderLinks .nav > ul > li {
    margin-bottom: 5px;
  }

  .FrontPage .Links .nav li li div,
  .FrontPage .LeaderLinks .nav li li div {
    background-color: #fff;
    color: #000;
    line-height: 25px;
    border-bottom: none;
  }

  .FrontPage .Links li ul li,
  .FrontPage .LeaderLinks li ul li {
    display: none;
  }

  .FrontPage .Links li.sel ul li,
  .FrontPage .LeaderLinks li.sel ul li {
    display: block;
  }


  .FrontPage .Links .searching li ul li {
    display: none;
  }

  .FrontPage .Links .searching li.match ul li.match {
    display: block;
  }

  .FrontPage .Links .nav li.expand > div,
  .FrontPage .LeaderLinks .nav li.expand > div {
    background-position: 260px center;
    background-repeat: no-repeat;
    background-size: 17px 17px;
    background-image: url('../images/svg-white/expand-01.svg');
    border-radius: 5px 5px 0 0;
  }
  
  .FrontPage .Links .nav li.expand.sel > div {
    background-image: url('../images/svg-white/collapse-01.svg');
    border-radius: 5px 5px 0 0;
    backdrop-filter:none;
  }

  .FrontPage .Links .nav .searching li.match > ul,
  .FrontPage .Links .nav li.expand.sel > ul,
  .FrontPage .LeaderLinks .nav li.expand.sel > ul {
    border-radius: 0 0 5px 5px;
    overflow: hidden;
  }


  .FrontPage .Links .nav .searching li.expand.sel > div,
  .FrontPage .Links .nav .searching li > div {
    background-image: none;
  }

  .FrontPage .Links .nav .searching li > div {
    border-radius: 5px;
  }

  .FrontPage .Links .nav .searching li.match > div {
    border-radius: 5px 5px 0 0;
  }


  .FrontPage .Links .header .LinksSearch {
    background-color: white;
  }

  .FrontPage .Links .header .headerText {
    height: 20px;
  }


  .FrontPage .col .Links .header {
    height: 55px;
  }

    .FrontPage .col .Links .header .LinksSearch .btn {
      position: absolute;
      height: 30px;
      border: none;
      width: 15px;
      right: 12px;
      padding: 0;
      top: 2px;
      background-color: transparent;
    }

      .FrontPage .col .Links .header .LinksSearch .btn #LinksSearchbtn {
        background-image: url('../images/svg-black/search-01.svg') !important;
        background: transparent;
        background-size: 15px 15px;
        background-position: top center;
        background-repeat: no-repeat;
        background-position: 0 5px;
        opacity: .7;
        height: 100%;
        width: 100%;
        border: none;
      }

  .FrontPage .col .Links .LinksSearch.focus .btn #LinksSearchbtn {
    opacity: 1;
  }

  .FrontPage .col .Links .LinksSearch {
    padding: 0;
    width: 288px;
    height: 30px;
    -webkit-transition: all ease-in-out 1s .1s;
    -moz-transition: all ease-in-out 1s .1s;
    -ms-transition: all ease-in-out 1s .1s;
    -o-transition: all ease-in-out 1s .1s;
    transition: all ease-in-out 1s .1s;
    background-color: rgba(255,255,255,0.2);
    border-radius: 5px;
    position: relative;
  }

    .FrontPage .col .Links .LinksSearch.focus {
      background-color: rgba(255,255,255,1);
    }

    .FrontPage .col .Links .LinksSearch .inp {
      width: 260px;
      -webkit-transition: width ease-in-out 1s .1s;
      -moz-transition: width ease-in-out 1s .1s;
      -ms-transition: width ease-in-out 1s .1s;
      -o-transition: width ease-in-out 1s .1s;
      transition: width ease-in-out 1s .1s;
      height: 100%;
      overflow: hidden;
    }

      .FrontPage .col .Links .LinksSearch .inp input {
        width: 100%;
        background-color: transparent;
        border: 1px solid transparent;
        transition: all ease-in-out .15s;
        -webkit-box-shadow: none;
        box-shadow: none;
        padding: 4px 10px;
        overflow: hidden;
        background-image: none;
      }

        .FrontPage .col .Links .LinksSearch .inp input:focus {
          color: #000;
        }

        .FrontPage .col .Links .LinksSearch .inp input::placeholder {
          color: #666;
        }

    .FrontPage .col .Links .LinksSearch.focus {
      -webkit-transition: all ease-in-out 0.4s;
      -moz-transition: all ease-in-out 0.4s;
      -ms-transition: all ease-in-out 0.4s;
      -o-transition: all ease-in-out 0.4s;
      transition: all ease-in-out 0.4s;
    }







  /*

.FrontPage .Links .nav li div {
  padding: 2px 10px;
  font-weight: bold;
  color: black;
}

.FrontPage .Links .nav li li div {
  padding-left: 20px;
  font-weight: normal;
  color: inherit;
}

.FrontPage .Links .A:hover {
  background-color: #f2f2f2;
}*/


  .FrontPage .vacationexpires .title {
    margin-left: 16px;
    margin-top: 10px;
    width: 288px;
    color: #666;
    position: absolute;
    left: 0;
    top: 0;
  }

  .FrontPage .vacationexpire .body {
    height: 100px;
    clear: both;
    position: relative;
    cursor: pointer;
  }

    .FrontPage .vacationexpire .body:hover {
      background-color: #d9d9d9;
    }

  .FrontPage .vacationExpire .title {
    color: #222;
    width: 180px;
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 15px;
  }

  .FrontPage .vacationexpire .description {
    width: 180px;
    position: absolute;
    top: 33px;
    right: 10px;
  }

    .FrontPage .vacationexpire .description .value {
      font-size: 16px;
      padding-top: 3px;
    }

    .FrontPage .vacationexpire .description .text {
      color: #666;
    }

    .FrontPage .vacationexpire .description .transfer {
      font-size: 10px;
      padding-top: 3px;
      color: #666;
    }

  .FrontPage .vacationexpire .chart {
    width: 70px;
    float: left;
    margin-left: 10px;
    margin-top: 10px;
  }

    .FrontPage .vacationexpire .chart .canvas {
      width: 70px !important;
      height: 70px !important;
      background-image: url(../images/svg-black/Calendar-Add.svg);
      opacity: 1;
      background-size: 30px 30px;
      background-repeat: no-repeat;
      background-position: 23px 21px;
      float: left;
    }



  .FrontPage .timereg {
    position: relative;
  }

    .FrontPage .timereg .body {
      margin-left: 16px;
      margin-top: 0;
      width: 288px;
      background-color: #ccc;
      border-radius: 0 0 5px 5px;
    }

      .FrontPage .timereg .body:after {
        visibility: hidden;
        display: block;
        content: "";
        clear: both;
      }

    .FrontPage .timereg .header {
      margin-top: 2px;
      height: 40px;
      color: #fff;
      border: none;
      background-color: rgb(96, 96, 96);
      transition: background-color 0.4s;
      display: table;
      border-radius: 5px 5px 0 0;
      overflow: hidden;
    }

      .FrontPage .timereg .header:hover {
      }

      .FrontPage .timereg .header .next,
      .FrontPage .timereg .header .prev {
        padding: 2px;
        display: table-cell;
        vertical-align: middle;
        cursor: pointer;
        color: transparent;
        background-size: 25px 25px;
        background-repeat: no-repeat;
        background-position: center center;
        transition: background-color 0.4s;
      }

        .FrontPage .timereg .header .next:hover,
        .FrontPage .timereg .header .prev:hover {
          background-color: var(--menu-sel-back-color);
          transition: background-color 0.4s;
        }

      .FrontPage .timereg .header .title {
        text-align: left;
        background-image: url(../images/svg-white/timecard-01.svg);
        background-position: 5px 5px;
        background-repeat: no-repeat;
        background-size: 30px 30px;
        padding-left: 50px;
        padding-top: 2px;
        height: 100%;
        cursor: pointer;
      }

        .FrontPage .timereg .header .title:hover {
          background-color: var(--menu-sel-back-color);
        }

      .FrontPage .timereg .header .next {
        text-align: right;
        padding-right: 10px;
        background-image: url(../images/svg-white/move-next-02.svg)
      }

      .FrontPage .timereg .header .prev {
        text-align: left;
        padding-left: 10px;
        background-image: url(../images/svg-white/move-back-02.svg)
      }



    .FrontPage .timereg .body .table {
      width: 288px;
      display: table;
      overflow-y: hidden;
    }

      .FrontPage .timereg .body .table .row {
        display: table-row;
      }

        .FrontPage .timereg .body .table .row.headers {
          background-color: rgb(106, 106, 106);
          color: #fff;
        }

        .FrontPage .timereg .body .table .row.day:hover {
          background-color: #d9d9d9;
          transition: background-color 0.4s;
        }

        .FrontPage .timereg .body .table .row .today {
          color: #cc0000;
        }

        .FrontPage .timereg .body .table .row .notworkingday {
          color: #a5a5a5;
        }

        .FrontPage .timereg .body .table .row .cell {
          padding: 2px;
          display: table-cell;
          vertical-align: middle;
          text-align: center;
        }

        .FrontPage .timereg .body .table .row.headers .cell {
          font-size: 10px;
        }

        .FrontPage .timereg .body .table .row headers.cell.icon {
          border-left: 5px solid rgba(255,255,255,0);
        }

        .FrontPage .timereg .body .table .row .cell.icon {
          border-left-width: 5px;
          border-left-style: solid;
          border-color: transparent;
        }


          .FrontPage .timereg .body .table .row .cell.icon .MainIcon {
            width: 16px;
            padding-left: 16px;
            padding-top: 1px;
            color: #0057AE;
          }

        .FrontPage .timereg .body .table .row .cell.dayday {
          cursor: pointer;
          text-align: left;
        }

        .FrontPage .timereg .body .table .row .cell.day {
          cursor: pointer;
          text-align: left;
        }

        .FrontPage .timereg .body .table .row .cell.date {
          cursor: pointer;
        }

        .FrontPage .timereg .body .table .row .cell.duration {
          cursor: pointer;
        }

        .FrontPage .timereg .body .table .row .cell.profile {
          cursor: pointer;
        }

        .FrontPage .timereg .body .table .row .cell.flex {
          cursor: pointer;
        }

          .FrontPage .timereg .body .table .row .cell.flex.positive {
            color: #009900;
          }

          .FrontPage .timereg .body .table .row .cell.flex.negative {
            color: #CC0000;
          }

        .FrontPage .timereg .body .table .row .cell.notAccountedFor.positive {
          color: #009900;
        }

        .FrontPage .timereg .body .table .row .cell.notAccountedFor.negative {
          color: #CC0000;
        }

  .FrontPage.news .body .col {
    width: 100%;
  }

    .FrontPage.news .body .col .cell.news {
      float: left;
    }


  .YearCalendar {
    width: calc( 100vW - 150px );
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
  }

    .YearCalendar .month {
      width: 8%;
      display: inline-grid;
    }

      .YearCalendar .month .day {
        border-bottom: solid 1px #999;
        border-right: solid 1px #999;
        height: 20px;
        background-color: #fff;
        position: relative;
        font-size: 12px;
      }

        .YearCalendar .month .day.saturday,
        .YearCalendar .month .day.sunday {
          background-color: #e9e9e9;
        }

        .YearCalendar .month .day.holiday {
          background-color: #d8d8d8;
        }

        .YearCalendar .month .day.half {
          background-image: url('../images/white.gif');
          background-position: 50px 0;
          background-repeat: no-repeat;
        }

      .YearCalendar .month .day {
        border-bottom: solid 1px #999;
        border-right: solid 1px #999;
        height: 20px;
        background-color: #fff;
        position: relative;
      }

      .YearCalendar .month .day--1 {
        border-top: none;
        border-left: none;
        border-bottom: none;
        background-color: transparent;
      }

      .YearCalendar .month .day .weekday {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 2;
        color: #666;
        height: 19px;
        width: 20px;
        line-height: 19px;
        text-align: center;
      }


      .YearCalendar .month .day .text {
        position: absolute;
        top: 0;
        left: 0;
        padding-left: 25px;
        padding-right: 5px;
        display: block;
        color: #000;
        height: 19px;
        width: 98%;
        line-height: 19px;
        text-align: left;
        overflow: hidden;
        white-space: nowrap;
      }

      .YearCalendar .month .day .weekday.color {
        color: #FFF;
        cursor: pointer;
      }

      .YearCalendar .month .day.not-approved .weekday {
        background-image: url('../images/stripeCC.gif');
        background-position: top top;
        background-repeat: repeat;
      }

      .YearCalendar .month .day .week {
        position: absolute;
        right: 0;
        top: 0;
        color: #666;
        font-weight: bold;
        height: 20px;
        width: 20px;
        line-height: 20px;
        text-align: center;
        font-size: 11px;
      }

      .YearCalendar .month .title {
        height: 30px;
        text-align: center;
        border-bottom: solid 1px #999;
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        padding: 0 5px;
      }

    .YearCalendar .month--1 .title {
      border: none;
      font-weight: bold;
      overflow: visible;
    }

      .YearCalendar .fromto .prev,
      .YearCalendar .fromto .next,
      .YearCalendar .month--1 .title .prev,
      .YearCalendar .month--1 .title .next {
        width: 30px;
        height: 30px;
        position: absolute;
        z-index: 2;
        top: -6px;
        background-image: url(../images/svg-black/arrow-right-01.svg);
        background-size: 20px 20px;
        background-repeat: no-repeat;
        background-position: center center;
        cursor: pointer;
        opacity: .5;
      }

        .YearCalendar .fromto .prev:hover,
        .YearCalendar .fromto .next:hover,
        .YearCalendar .month--1 .title .prev:hover,
        .YearCalendar .month--1 .title .next:hover {
          opacity: 1;
        }

      .YearCalendar .month--1 .title .next {
        right: -15px;
        background-image: url(../images/svg-black/arrow-right-01.svg);
      }

      .YearCalendar .month--1 .title .prev {
        left: -15px;
        background-image: url(../images/svg-black/arrow-left-01.svg);
      }

    .YearCalendar .month:hover .title {
      font-weight: bold;
    }

    .YearCalendar .fromto {
      position: relative;
    }

      .YearCalendar .fromto .title {
        font-weight: bold;
        text-align: center;
        font-size: 20px;
        padding-bottom: 10px;
        line-height: 30px;
      }

      .YearCalendar .fromto .next {
        top: 0;
        width: 40%;
        right: -1%;
        background-size: 30px 30px;
        background-image: url(../images/svg-black/arrow-right-01.svg);
        background-position: right center;
      }

      .YearCalendar .fromto .prev {
        top: 0;
        width: 40%;
        left: 2%;
        background-size: 30px 30px;
        background-image: url(../images/svg-black/arrow-left-01.svg);
        background-position: left center;
      }


    .YearCalendar .month:hover:not(.month--1) .title::after {
      content: " ";
      position: absolute;
      bottom: 0px;
      right: calc(50% - 20px);
      border-right: solid transparent 20px;
      border-left: solid transparent 20px;
      border-bottom: solid #999 5px;
      height: 10px;
      width: 40px;
    }

    .YearCalendar .month--1 {
      width: 4%;
    }

      .YearCalendar .month--1 .day {
        border-top-color: transparent;
        border-left-color: transparent;
        border-bottom-color: transparent;
        height: 20px;
        background-color: transparent;
        text-align: right;
        padding-right: 20px;
      }

        .YearCalendar .month--1 .day.over {
          font-weight: bold;
          position: relative;
        }

          .YearCalendar .month--1 .day.over::after {
            content: " ";
            position: absolute;
            top: 0px;
            right: 0px;
            border-top: solid transparent 10px;
            border-bottom: solid transparent 10px;
            border-right: solid #999 5px;
            height: 20px;
            width: 20px;
          }

    .YearCalendar .detailed {
      padding: 20px 0;
      page-break-before: always;
      float: left;
      padding-bottom: 300px;
    }

      .YearCalendar .detailed .title {
        font-size: 16px;
        padding: 10px 0;
      }

      .YearCalendar .detailed .year {
        display: table;
        border-radius: 5px;
      }

        .YearCalendar .detailed .year .data {
          display: table-row;
        }

          .YearCalendar .detailed .year .data.has-events {
            cursor: help;
          }


          .YearCalendar .detailed .year .data .date {
            width: 165px;
            display: table-cell;
            padding: 3px;
            text-align: right;
            border-bottom: solid 1px #e8e8e8;
            border-right: solid 1px #e8e8e8;
            background-color: #fcfcfc;
          }

          .YearCalendar .detailed .year .data:first-of-type .date {
            border-top-left-radius: 5px;
            overflow: hidden;
          }

          .YearCalendar .detailed .year .data:last-of-type .date {
            border-bottom-left-radius: 5px;
            overflow: hidden;
          }

          .YearCalendar .detailed .year .data .text {
            width: 250px;
            padding: 3px;
            display: table-cell;
            border-bottom: solid 1px #e8e8e8;
            background-color: #fcfcfc;
          }

          .YearCalendar .detailed .year .data:first-of-type .text {
            border-top-right-radius: 5px;
            overflow: hidden;
          }

          .YearCalendar .detailed .year .data:last-of-type .text {
            border-bottom-right-radius: 5px;
            overflow: hidden;
          }

          .YearCalendar .detailed .year .data.holiday .date,
          .YearCalendar .detailed .year .data.holiday .text {
            background-color: #f3f3f3;
          }

          .YearCalendar .detailed .year .data:hover .date,
          .YearCalendar .detailed .year .data:hover .text {
            background-color: #fff;
          }

          .YearCalendar .detailed .year .data .events {
            position: relative;
            z-index: 10;
          }

            .YearCalendar .detailed .year .data .events .count {
              position: absolute;
              left: -20px;
              top: -14px;
              border-radius: 8px;
              width: 16px;
              height: 16px;
              border: 0.5px solid #999;
              font-size: 10px;
              line-height: 14px;
              text-align: center;
            }

            .YearCalendar .detailed .year .data .events .events-body {
              position: absolute;
              left: 10px;
              top: -25px;
              display: none;
              background-color: #fff;
              border-radius: 5px;
              width: calc( 100vw - 600px );
              max-width: 600px;
              margin-bottom: 5px;
            }

              .YearCalendar .detailed .year .data .events .events-body:before {
                border: solid transparent;
                border-color: transparent;
                border-width: 1px;
                border-right-color: #fff;
                top: 20px;
                margin-top: -11px;
                border-width: 11px;
                background-color: transparent;
                content: " ";
                display: block;
                height: 0;
                position: absolute;
                pointer-events: none;
                width: 0;
                right: 100%;
              }

          .YearCalendar .detailed .year .data.last .events .events-body {
            top: auto;
            bottom: -20px;
          }
            .YearCalendar .detailed .year .data.last .events .events-body:before {
              top: auto;
              bottom: 10px;
            }

          .YearCalendar .detailed .year .data .events .event .title {
            font-size: 20px;
            padding: 5px 10px;
          }

          .YearCalendar .detailed .year .data .events .event .date {
            background-color: transparent;
            border: none;
            text-align: left;
            padding: 0 10px;
            width: 100%;
          }

          .YearCalendar .detailed .year .data .events .event .description {
            padding: 5px 10px;
          }

          .YearCalendar .detailed .year .data .events .event .calendar {
            text-align: right;
            padding: 5px 10px;
            font-style: italic;
          }

          .YearCalendar .detailed .year .data:hover .events .events-body {
            display: block;
          }

    .YearCalendar .select {
      padding: 20px 20px;
      page-break-before: always;
      float: right;
    }

    .YearCalendar .calendars {
      display: table;
      border-radius: 5px;
    }

      .YearCalendar .calendars:hover {
        background-color: #f9f9f9;
      }

    .YearCalendar .select .calendar:not(.user):not(.sel) {
      --display: none;
    }

    .YearCalendar .select:hover .calendar {
      display: table-row !important;
    }

    .YearCalendar .select .calendar .check {
      padding: 0 3px;
      display: table-cell;
      text-align: right;
      border-bottom: solid 1px #e8e8e8;
    }

    .YearCalendar .select .calendar .title {
      padding: 5px;
      display: table-cell;
      border-bottom: solid 1px #e8e8e8;
      vertical-align: middle;
    }

    .YearCalendar .select .calendar.user .title {
      font-weight: bold;
    }

    .YearCalendar .select .setup {
      height: 30px;
      width: 100%;
      background: url('../images/svg-black/Calendar-Check.svg') no-repeat;
      background-size: 30px auto;
      background-position: right center;
      margin: 10px 0;
      display: inline-block;
    }
}

@media all and (max-width: 650px) {
  .FrontPage .responsible .header #FrontPageResponsibleHeader.sel .select {
    background-image: url('../images/svg-white/expand-01.svg');
    background-repeat: no-repeat;
    background-size: 17px 17px;
    background-position: center center;
  }

  .FrontPage .responsible .header #FrontPageResponsibleHeader .select {
    background-image: url('../images/svg-white/collapse-01.svg');
    background-repeat: no-repeat;
    background-size: 17px 17px;
    background-position: center center;
  }
}

@media all and (max-width: 650px) {
  .view_start .MainBody {
    padding-top: 50px;
    padding-left: 0;
  }
}


input.loading {
  background-size: 50%;
  background-image: url('../images/loading32x32.gif');
  background-repeat: no-repeat;
  background-position: center center;
}

td.loading {
  background-size: 50%;
  background-image: url('../images/loading32x32.gif');
  background-repeat: no-repeat;
  background-position: center center;
}


@media all /*'Login socialButton'*/ {

  .socialButton {
    -webkit-border-radius: 1px;
    border-radius: 1px;
    -webkit-box-shadow: 0 2px 4px 0px rgba(0,0,0,.25);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.25);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: background-color .218s,border-color .218s,box-shadow .218s;
    transition: background-color .218s,border-color .218s,box-shadow .218s;
    -webkit-user-select: none;
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    color: #262626;
    outline: none;
    overflow: hidden;
    position: relative;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    width: auto;
  }

  .socialButtonIcon {
    float: left;
  }

  .socialButtonBlue {
    background-color: #4285f4;
    border: none;
    color: #fff;
  }

    .socialButtonBlue .socialButtonIcon {
      background-color: #fff;
      -webkit-border-radius: 1px;
      border-radius: 1px;
    }

  .socialButtonContents {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .21px;
    margin-left: 6px;
    margin-right: 6px;
    vertical-align: top;
  }

  .socialButtonContentWrapper {
    width: 275px;
  }

  .socialButtonBlue .socialButtonContentWrapper {
    border: 1px solid transparent;
  }

  .socialButtonSvg {
    display: block;
  }

  .socialButtonContents {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .21px;
    margin-left: 6px;
    margin-right: 6px;
    vertical-align: top;
  }
}

@media all /*'Form FormValue'*/ {
  .FormValue {
  }


    .FormValue .cell-value .cell-element .valid {
      border-left-style: solid;
      border-left-color: green !important;
      margin-left: 0;
    }

    .FormValue .cell-value .cell-element .invalid {
      border-left-style: solid;
      border-left-color: red !important;
      margin-left: 0;
      border-left-width: 2px;
    }


  #view_form_person_new .FormAction
  #view_form_person .FormAction {
  }



  .FormValue section[data-section] > * {
    margin-top: 20px;
  }

  .FormValue.formvalue-edit {
  }

  .FormValue.formvalue-view {
  }

  .FormValue .row {
    min-height: 28px;
    margin-top: 5px; /**/
    margin-bottom: 10px; /**/
    margin-left: 20px;
    margin-right: 20px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
  }


  .FormValue .cell {
    display: inline-block;
    /* fixed width, wrap text */
    white-space: normal;
    word-break: normal;
    word-wrap: break-word;
  }

  .FormValue .cell-change .cell-element {
    margin-top: 5px;
  }

  .FormValue .cell-table {
  }

  .FormValue .cell-all {
    margin-left: 0.5em;
    margin-top: 8px;
  }

  .FormValue .cell-title {
    font-size: 30px;
    font-weight: lighter;
    color: #000000;
    padding-top:10px;
  }

  .FormValue .cell-value-description {
    color: #808080;
    line-height: 36px;
    float: left;
    padding-left: 5px;
  }

  .FormValue .cell-label {
    width: 175px;
    text-align: right;
    vertical-align: top;
    margin-top: 9px;
  }

  .FormValue th:not(.C):not(.R) {
    text-align: left;
  }

  .FormValue .cell-value {
    min-width: 450px;
    margin-left: 0.5em;
    overflow: hidden;
    vertical-align: top;
    padding-right: 0.5em;
    min-height: 26px;
  }

  .FormValue .cell-change {
    width: 300px;
    min-height: 28px;
    padding-left: 0.5em;
    padding-right: 0.5em;
  }

  .FormValue .cell-description {
    line-height: 40px;
    padding-left: 0;
    padding-right: 0.5em;
    color: #000;
    font-size: 15px;
  }



  .FormValue .cell-element {
    padding: 3px;
    float: left;
  }

    .FormValue .cell-element input.changed,
    .FormValue .cell-element select.changed,
    .FormValue .cell-element div.changed {
      border-left-color: #6060ff !important;
    }

    .FormValue .cell-element.static {
      margin-top: 6px;
    }

  .FormValue .change-on :not(.type-table) + .cell-change {
    border-left-color: #6060ff;
    border-left-width: 3px;
    border-left-style: solid;
  }

  .FormValue .change-off .cell-change {
    display: none;
  }

  .FormValue .cell-value select {
  }


  .FormValue .cell-all select {
    min-width: 80px;
  }

  .FormValue .row td select {
    width: inherit;
  }

  .FormValue .cell table,
  .FormValue .cell tbody,
  .FormValue .cell tr,
  .FormValue .cell td {
    font-size: inherit;
  }


  .FormValue .MainSel,
  .FormValue select {
    padding-right: 16px;
  }

  .FormValue .cell-value .MainInp,
  .FormValue .cell-value .MainInp100,
  .FormValue .cell-value .MainInpR,
  .FormValue .cell-value .MainEditDivBody {
  }
    /*Date*/
    .FormValue .cell-value .MainInp[ondblclick*="_postback_longdate"] {
      width: auto;
    }

  .FormValue .cell-all .MainInp,
  .FormValue .cell-all .MainInp100,
  .FormValue .cell-all .MainInpR,
  .FormValue .cell-all .MainEditDivBody {
    width: 100px;
  }

  .FormValue .cell-all .MainInp[size="5"] {
    width: 50px;
  }
  .FormValue .cell-all th {
    max-width: 100px;
  }

  .FormValue .cell-all .MainInp[onkeyup*="DisplaySearch"],
  .FormValue .cell-all .MainInpR[onkeyup*="DisplaySearch"],
  .FormValue .cell-all .MainEditDivBody[onkeyup*="DisplaySearch"] {
    width: 300px;
  }

  /* special date-time width */
  .FormValue .row[data-config*="FirstDayAtWork"] .cell-value .MainInp {
    width: 129px;
  }

  /* indicate invalid company/department combination */
  .FormValue div[data-config="Employment_Department_GUID"].valid-false input,
  .FormValue div[data-config="Form_NewDepartment_GUID"].valid-false input {
    width: 350px;
    border-left: 3px solid red !important;
    margin-left: 0;
  }




  .FormValue .cell-value .cell-element .valid {
    border-left-style: solid;
    border-left-color: green !important;
    margin-left: 0;
  }

  /* colors */
  .FormValue .cell-label,
  .FormValue .cell-label.Green,
  .FormValue .cell-label.E {
    color: #808080 !important;
  }

  .FormValue .cell-change {
    color: #808080;
  }

  .FormValue .required .cell-value::after {
    position: relative;
    font-size: 1.2em;
    color: #808080;
    bottom: 0.6em;
    content: "  ";
  }

  .FormValue section {
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #ffffff;
  }

    .FormValue section[data-section="ALL"] {
      display: none;
    }

  .FormValue .tr0 {
    background-color: inherit;
  }



  .FormValue .CalendarLongDate {
    color: #808080;
  }


  /* fix undo button breaking layout in tables: top align elements except delete icon */
  /*
.FormValue .cell tr {
  vertical-align: top;
}
.FormValue .cell .TD {
  padding-top: 4px;
}
*/


  .FormValue a.MainAIcon.IconDelete {
    display: block;
    opacity: 0.8;
  }

  /* change-on mark on tables */
  .row.change-on div.type-table {
    padding-right: 10px;
    border-right-style: solid;
    border-right-width: 3px;
    border-right-color: #6060ff;
  }


  /* Timelønnet skjuler Arbejdstid */
  #view_form_person_new section.hidden,
  #view_form_person section.hidden {
    top: -5000px;
    position: absolute;
  }



  /* Mutable table */
  .table-item {
    margin-top: 3px;
    padding-bottom: 6px;
  }

  .horisontal.table-item {
    overflow: hidden;
    white-space: nowrap;
  }

  .horisontal .field {
    display: inline-block;
    white-space: normal;
    word-break: normal;
    word-wrap: break-word;
    vertical-align: top;
    padding-right:4px;
  }

  .horisontal + .horisontal .label {
    display: none;
  }

  /* "hide-horisontal" specified by the form template on the form values*/
  .horisontal .field.hide-horisontal {
    display: none;
  }

  .vertical.table-item {
    clear: both;
  }

    .vertical.table-item.edit {
      min-width: 600px;
    }

    .vertical.table-item::after { /* clearfix */
      visibility: hidden;
      display: block;
      font-size: 0;
      content: " ";
      clear: both;
      height: 0;
    }

  .vertical .field {
    float: left;
    clear: both;
    margin-top: 3px;
  }

  .vertical .label {
    float: left;
    width: 190px;
    text-align: right;
    padding-right: 6px;
    margin-top:8px;
  }
  .table-item.vertical {
    padding-bottom:30px;
  }
  .vertical .control {
    float: left;
  }
  .table-item .control:not(:has(input)):not(:has(div[class="MainEditDiv"])) {
    padding-top: 8px;
  }

  .table-editfile .table.noData {
    display: none;
  }

  .table-item {
    position: relative;
  }

  .mutate,
  .item-delete {
    width: 30px;
  }

  .table-item input[disabled],
  .table-item input[readonly],
  .table-item select[disabled],
  .table-item select[readonly] {
    background-color: rgb(235, 235, 228);
    color: rgb(84, 84, 84);
  }



  .hideExpired .table-item.expired {
    display: none;
  }

  .hideExpired .table-item.horisontal:not(.expired) .label {
    display: block;
  }

  .hideExpired .table-item.horisontal:not(.expired) ~ .table-item.horisontal:not(.expired) .label {
    display: none;
  }


  .item-delete {
    margin-left: 10px;
    margin-top: 8px;
  }

  .horisontal.table-item:not(.edit) .control {
    width: 150px;
  }

  .horisontal .mutate {
    margin-top: 3px;
  }
  .vertical .mutate {
    margin-top: 3px;
  }
  .vertical .field.mutate .label {
    display: none;
  }

  /* -- horisontal state: hide button when not hovering 
.horisontal .mutate {
  opacity: 0;
  transition: opacity 0.5s;
}
.horisontal.table-item:hover .mutate {
  opacity: 1;
  transition: opacity 0.5s;
}
*/

  .btn-mutate {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-width: 1px;
    border-style: solid;
    border-color: #808080;
    border-radius: 4px;
    background-image: url("../images/svg-black/mutate-01.svg");
  }

    .btn-mutate:hover {
      background-color: #e0e0e0;
      transition: background-color 0.5s;
    }


  /* suppress validation long data format in tables */
  .mutable-table .horisontal .CalenderLongDate {
    display: none;
  }


  .FormValue .addrow {
    margin-top: 3px;
  }

  .FormValue .label {
    color: #808080;
  }

  .FormValue .horisontal .label {
    padding-bottom: 3px;
    padding-left: 6px;
  }




  /* Body header */

  .body-header {
    padding: 0px 20px;
    overflow: auto;
    min-height: 120px;
    background-color: rgb(224, 224, 224);
  }

    .body-header h1 {
    }

    .body-header .col {
      float: left;
      width: 300px;
      margin-top: 3px;
      margin-bottom: 3px;
    }

    .body-header .col-left {
      clear: left;
    }

    .body-header .label {
      color: #c0c0c0;
    }

    .body-header .static-text {
      font-weight: bold;
    }

    .body-header .employee-photo {
      float: right;
    }

      .body-header .employee-photo img {
        width: 90px;
      }

  .body-header-row {
    clear: both;
    padding-left: 20px;
    padding-right: 20px;
  }

  .body-header-info {
    line-height: 30px;
    background-color: #e4e4e4;
    height: 30px;
  }

  .body-header h1 {
    float: left;
  }

  .body-header .processbar {
    float: right;
    margin-top: 5px;
  }

    .body-header .processbar .Processbar {
      margin-right: -17px;
    }

  .body-header-info .align-right a {
    float: left;
  }

  .body-header-info .align-right span {
    float: left;
  }

  .body-header-info .align-left {
    float: left;
  }

  .body-header-info .align-right {
    float: right;
  }


  .form-info-header {
    display: none;
  }

  #view_form_person_new #approve_btn,
  #view_form_person #approve_btn {
    margin-right: 1em;
  }


  .FormValue div.MainEditDivBody {
    border-color: #c8c8c8;
  }

  .FormValue th {
    color: #808080;
  }

  .FormValue .CalenderIcon {
    opacity: 0.8;
  }

  .FormValue div.CalenderIcon {
    margin-top: 5px;
  }


  /* mark "mandatory" fields for HR partners -- suppress normal mandatory mark (asterisk) */
  body#view_form_person_new .FormValue .required .cell-value::after {
    content: "";
  }

  .cell.cell-element table {
    display: inline-table;
  }
}

/* General additions */
.Clearfix:after, .clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}





.ChangeSetIcon {
  background-image: url(../images/svg-black/information-01.svg);
  min-width: 20px;
  min-height: 20px;
  margin-top: 5px;
  background-repeat: no-repeat;
}
.ChangeSetMore {
  background-image: url(../images/svg-black/Calendar-Add.svg);
  background-size: 30px 30px;
  min-height: 30px;
  background-repeat: no-repeat;
  background-position: 2px 0;
  font-size: 18px;
  padding-left: 40px;
  line-height: 30px;
}
.ChangeSetMore:hover {
  color: var(--a-hover-color);
}


@media all /*'Absence AbsenceInfo EntitlementExpier'*/ {

  .AbsenceInfo .icon {
    float: right;
    background-image: url(../images/svg-black/information-01.svg);
    background-size: 40px 40px;
    width: 40px;
    height: 40px;
    opacity: 0.3;
    cursor: pointer;
    margin-top: -30px;
    margin-right: -20px;
  }

  .AbsenceInfo.sel .icon {
    opacity: 1;
  }

  .AbsenceInfo .body {
    display: none;
  }

  .AbsenceInfo.sel .body {
    display: block;
    padding-top: 10px;
  }

  .AbsenceInfo .title {
    font-size: 16px;
  }

  .AbsenceInfo .TypeChart .title .period {
    color: transparent;
  }
  /*Absence Transfere*/
  .EntitlementExpier {
    width: 100%;
    height: 100px;
  }

    .EntitlementExpier > div {
      float: left;
    }

    .EntitlementExpier .chart {
      position: relative;
      width: 80px;
      height: 80px;
      font-size: 0px;
      text-align: center;
      line-height: 75px;
      background-size: 30px 30px;
      background-repeat: no-repeat;
      background-position: 27px 27px;
      opacity: 1;
    }

    .EntitlementExpier.add .chart {
      background-image: url(../images/svg-black/Calendar-Add.svg);
      opacity: 1;
    }

    .EntitlementExpier.check .chart {
      background-image: url(../images/svg-black/Calendar-Check.svg);
      opacity: 1;
    }

    .EntitlementExpier.expired .chart {
      background-image: url(../images/svg-black/Calendar-Time.svg);
      opacity: 1;
    }

    .EntitlementExpier .chart canvas {
      position: absolute;
      width: 100px;
      top: 0;
      left: 0;
    }

    .EntitlementExpier .expier, .EntitlementExpier .expierNext, .EntitlementExpier .transfere {
      padding-left: 20px
    }

    .EntitlementExpier .descriptin {
      font-size: 14px;
    }

    .EntitlementExpier .value {
      font-size: 16px;
      line-height: 30px;
    }

    .EntitlementExpier .action {
      line-height: 30px;
    }

    .EntitlementExpier .color {
      height: 5px;
      width: 40px;
      display: none;
    }
}

@media all /*'Maternity Leave LeaveAbsence '*/ {

  .LeaveAbsenceOverview > div {
    float: left;
  }


  .LeaveAbsence {
    width: 100%;
    height: 80px;
  }

    .LeaveAbsence > div {
      float: left;
    }

    .LeaveAbsence .chart, .LeaveAbsenceOverview .chart {
      position: relative;
      width: 80px;
      height: 80px;
      font-size: 0px;
      text-align: center;
      line-height: 80px;
      background-size: 40px 40px;
      background-repeat: no-repeat;
      background-position: 20px 20px;
      opacity: 1;
    }

      .LeaveAbsence .chart canvas, .LeaveAbsenceOverview .chart canvas {
        position: absolute;
        width: 100px;
        top: 0;
        left: 0;
      }

  .PREGNANCY_LEAVE .chart {
    background-image: url(../images/icon-svg/pregnancy.svg);
    opacity: 1;
  }

  .EXTENDED_LEAVE .chart {
    background-image: url(../images/svg-black/clock_forward-01.svg);
    opacity: 1;
  }

  .NEWBORN_LEAVE .chart {
    background-image: url(../images/icon-svg/baby.svg);
    background-size: 46px 46px;
    background-position: 16px 18px;
    opacity: 1;
  }

  .MATERNITY_LEAVE .chart {
    background-image: url(../images/svg-black/baby_carriage-01.svg);
    background-size: 38px 38px;
    background-position: 23px 23px;
    opacity: 1;
  }

  .MULTI_LEAVE .chart {
    background-image: url(../images/svg-black/twins-01.svg);
    background-size: 38px 38px;
    background-position: 23px 23px;
    opacity: 1;
  }

  .PARENTS_LEAVE .chart {
    background-image: url(../images/icon-svg/parent_child.svg);
    opacity: 1;
  }

  .PREADOPTION_LEAVE .chart {
    background-image: url(../images/icon-svg/travel-hart.svg);
    background-size: 34px 34px;
    background-position: 23px 23px;
    opacity: 1;
  }

  .ADOPTION_LEAVE .chart {
    background-image: url(../images/icon-svg/child-care.svg);
    opacity: 1;
  }

  .BEREAVEMENT_LEAVE .chart {
    background-image: url(../images/svg-black/absence_add-01.svg);
    opacity: 1;
  }

  .NOPAY_LEAVE .chart {
    background-image: url(../images/svg-black/currency-01.svg);
    opacity: 1;
  }


  .LeaveAbsence.check .chart {
    background-image: url(../images/svg-black/Calendar-Check.svg);
    opacity: 1;
  }

  .LeaveAbsence.expired .chart {
    background-image: url(../images/svg-black/Calendar-Time.svg);
    opacity: 1;
  }



  .LeaveAbsence .expier, .LeaveAbsence .expierNext, .LeaveAbsence .transfere {
    padding-left: 20px;
    position: relative;
    min-width: 160px;
  }

    .LeaveAbsence .expier .descriptin {
      position: absolute;
      top: 0;
      left: 0;
      border: solid 1px #ccc;
      padding: 20px;
      margin: 15px;
      border-radius: 10px;
      background-color: #fcfcfc;
    }

      .LeaveAbsence .expier .descriptin:after, .LeaveAbsence .expier .descriptin:before {
        border: solid transparent;
        content: " ";
        display: block;
        height: 0;
        position: absolute;
        pointer-events: none;
        width: 0;
        right: 100%;
      }

      .LeaveAbsence .expier .descriptin:before {
        border-color: transparent;
        border-width: 1px;
        border-right-color: #ccc;
        top: 40px;
        margin-top: -11px;
        border-width: 11px;
      }

      .LeaveAbsence .expier .descriptin:after {
        border-color: transparent;
        border-right-color: #FFF;
        top: 40px;
        margin-top: -10px;
        border-width: 10px;
      }


  .LeaveAbsence .descriptin {
  }

  .LeaveAbsence .value {
    font-size: 16px;
    line-height: 30px;
  }

  .LeaveAbsence .action {
    line-height: 30px;
  }

  .LeaveAbsence .color {
    height: 5px;
    width: 40px;
    display: none;
  }


  .Summery .LeaveOverview .title {
    top: -50px;
    left: -20px;
  }

  .Summery .LeaveOverview .group {
    margin-top: 80px;
  }

  .Summery .LeaveOverview .date {
    display: none;
  }

  .LeaveOverview .extend {
    margin-top: 40px;
  }

    .LeaveOverview .extend .title {
      font-size: 20px;
    }

  .LeaveOverview .warning {
    color: #C00;
  }

  .WarningBox {
    width: auto;
    padding: 10px;
    padding-top: 0;
    margin: 20px 0;
    background-color: #fff1bc;
    border: solid 2px #ffcc00;
    border-radius: 10px;
    max-width: 800px;
  }

    .WarningBox > div {
      margin-top: 10px;
      background-image: url('../images/svg-black/warning-01.svg');
      background-position: left top;
      background-repeat: no-repeat;
      background-size: 20px 20px;
      padding-left: 25px;
      min-height: 16px;
      min-width: 16px;
      display: block;
      line-height: 20px;
    }

  .LeaveOverview .participants {
    position: relative;
    width: 340px;
    height: 120px;
  }

    .LeaveOverview .participants .person {
      width: 120px;
      height: 120px;
    }

    .LeaveOverview .participants .coparent {
      width: 150px;
      height: 120px;
      margin-top: 80px;
      left: 210px;
    }

      .LeaveOverview .participants .coparent .image {
        display: none;
      }

    .LeaveOverview .participants .type {
      text-align: center;
      font-size: 16px;
      margin-left: -10px;
    }

    .LeaveOverview .participants .subtype {
      text-align: center;
      font-size: 14px;
      margin-left: -10px;
    }

  .LeaveOverview .group {
    position: relative;
    width: 300px;
    background-color: #f6f6f6;
    border: 1px solid #c8c8c8;
    margin: 30px 20px;
    padding-bottom: 18px;
    border-radius: 5px;
  }

  .LeaveOverview .image {
    width: 120px;
    height: 80px;
    padding-left: 15px;
  }

    .LeaveOverview .image .PerImg {
      width: 80px;
      height: 80px;
    }

      .LeaveOverview .image .PerImg > div {
        border: 5px solid #ccc;
      }


  .LeaveOverview .group .title {
    position: absolute;
    left: 330px;
    top: 29px;
    height: 20px;
    line-height: 20px;
    font-size: 18px;
    font-weight: normal;
    text-align: left;
    width: 290px;
  }

  .LeaveOverview .reserved, .LeaveOverview .transfer {
    position: relative;
    height: 60px;
    top: 15px;
  }

  .LeaveOverview .person {
    position: absolute;
    left: 15px;
    top: 0;
    z-index: 1;
  }

  .LeaveOverview .amount:after {
    content: "";
    position: absolute;
    top: 50px;
    left: 29px;
    height: 60px;
    border-left: 2px solid #c8c8c8;
    z-index: 1;
  }

  .LeaveOverview .before .amount:after, .LeaveOverview .extra .amount:after, .LeaveOverview .total .amount:after {
    display: none;
  }

  .LeaveOverview .coparent {
    position: absolute;
    left: 225px;
    top: 0;
    z-index: 1;
  }



  .LeaveOverview .slider {
    position: absolute;
    left: 100px;
    top: 20px;
    width: 100px;
    height: 10px;
    border-radius: 5px;
  }

    .LeaveOverview .slider .ui-slider-handle {
      width: 36px;
      height: 36px;
      border-radius: 100%;
      top: -13px;
      margin-left: -18px;
      text-align: center;
      line-height: 32px;
      font-size: 17px;
      background-image: none;
      background-color: #FFF;
      font-weight: normal;
    }

      .LeaveOverview .slider .ui-slider-handle.value-zero {
        color: #000000;
      }

      .LeaveOverview .slider .ui-slider-handle.value-positive {
        color: #009900;
      }

      .LeaveOverview .slider .ui-slider-handle.value-negative {
        color: #AA0000;
      }

  .LeaveOverview .amount {
    margin-left: 5px;
    margin-right: 5px;
    width: 50px;
    height: 50px;
    border-radius: 100%;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    background-color: #fcfcfc;
    border: 5px solid #bbb;
  }

  .LeaveOverview .transfer .amount {
    border-color: #eee;
  }

  .LeaveOverview .person .amount {
    border-color: #aaa;
  }

  .LeaveOverview .disabled .person .amount {
    border-color: #eee;
  }

  .LeaveOverview .icon {
    position: absolute;
    left: -20px;
    top: -20px;
    height: 40px;
    width: 40px;
    border-radius: 100%;
    background-color: #f6f6f6;
    border: 1px solid #c8c8c8;
    background-size: 30px 30px;
    background-position: center center;
    background-repeat: no-repeat;
    z-index: 10;
  }

  .LeaveOverview .PREGNANCY_LEAVE .icon {
    background-image: url(../images/icon-svg/pregnancy.svg);
  }

  .LeaveOverview .EXTENDED_LEAVE .icon {
    background-image: url(../images/svg-black/clock_forward-01.svg);
  }

  .LeaveOverview .NEWBORN_LEAVE .icon {
    background-image: url(../images/icon-svg/baby.svg);
  }

  .LeaveOverview .MATERNITY_LEAVE .icon {
    background-image: url(../images/svg-black/baby_carriage-01.svg);
    background-size: 25px 25px;
    background-position: 7px 7px;
  }

  .LeaveOverview .PARENTS_LEAVE .icon {
    background-image: url(../images/icon-svg/parent_child.svg);
  }

  .LeaveOverview .MULTI_LEAVE .icon {
    background-image: url('../images/svg-black/twins-01.svg');
    background-size: 25px auto;
  }

  .LeaveOverview .PREADOPTION_LEAVE .icon {
    background-image: url(../images/icon-svg/travel-hart.svg);
    background-size: 24px 24px;
    background-position: 7px 6px;
  }

  .LeaveOverview .ADOPTION_LEAVE .icon {
    background-image: url(../images/icon-svg/child-care.svg);
  }

  .LeaveOverview .BEREAVEMENT_LEAVE .icon {
    background-image: url(../images/svg-black/absence_add-01.svg);
  }

  .LeaveOverview .NOPAY_LEAVE .icon {
    background-image: url(../images/svg-black/currency-01.svg);
  }


  .LeaveOverview .split.total, .LeaveOverview .split.birth {
    height: 20px;
  }

  .LeaveOverview .split {
    position: relative;
  }

    .LeaveOverview .split.birth {
      border-top: 1px dashed #ccc;
      width: 340px;
      height: 1px;
    }

      .LeaveOverview .split.birth .icon {
        background-image: url('../images/svg-black/stork-delivery-01.svg');
        background-position: 0px 2px;
        left: 140px;
        top: -20px;
      }


  .LeaveOverview .date {
    position: absolute;
    left: 330px;
    bottom: -25px;
    color: #999;
    width: 290px;
  }

  .LeaveOverview .split.birth .date {
    top: -10px;
    left: 350px;
  }

  .LeaveOverview .before .date {
    opacity: 0;
  }

  .LeaveOverview .split.total {
    position: relative;
    top: -13px;
    border-top: 1px dashed #ccc;
    width: 340px;
    height: 1px;
  }

  .LeaveOverview .notpaied .icon,
  .LeaveOverview .total .icon {
    display: none;
  }

  .LeaveOverview .group.total {
    top: -45px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    background-color: transparent;
    border-color: transparent;
  }

  .LeaveOverview .group.notpaied {
    top: -45px;
    padding-bottom: 0px;
    margin-bottom: 0px;
    margin-top: 0;
    background-color: transparent;
    border-color: transparent;
  }

    .LeaveOverview .group.notpaied.zero {
      opacity: 0.3;
    }

  .LeaveOverview .notpaied .amount:after {
    top: -12px;
    height: 12px;
    z-index: -1;
  }

  .LeaveOverview .doughnut {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    left: 5px;
  }

  .LeaveOverview .group {
    position: relative;
    cursor: help;
  }

    .LeaveOverview .group .help .header {
      font-size: 18px;
      text-wrap: nowrap;
      padding-top: 6px;
      padding-bottom: 10px;
    }

    .LeaveOverview .group .help {
      position: absolute;
      top: -15px;
      left: 294px;
      border: solid 1px #ccc;
      padding: 20px;
      margin: 15px;
      border-radius: 10px;
      background-color: #fff;
      z-index: 2;
      min-width: 400px;
      max-width: 500px;
      display: none;
      background-color: #FCFCFC;
    }

    .LeaveOverview .group:hover .help {
      display: block;
    }

    .LeaveOverview .group .help:after, .LeaveOverview .group .help:before {
      border: solid transparent;
      content: " ";
      display: block;
      height: 0;
      position: absolute;
      pointer-events: none;
      width: 0;
      right: 100%;
    }

    .LeaveOverview .group .help:before {
      border-color: transparent;
      border-width: 1px;
      border-right-color: #ccc;
      top: 40px;
      margin-top: -11px;
      border-width: 11px;
    }

    .LeaveOverview .group .help:after {
      border-color: transparent;
      border-right-color: #FFF;
      top: 40px;
      margin-top: -10px;
      border-width: 10px;
    }




  .SaveTrans .title {
    font-size: 16px;
  }

  .SaveTrans .description {
    color: #999;
  }

  .SaveTrans .btn {
    width: 298px;
    margin-left: 20px;
    margin-top: 20px;
  }
}

@media all /*'SectionInfo'*/ {

  .SectionInfo {
    position: relative;
  }

    .SectionInfo .icon {
      position: absolute;
      background-image: url(../images/svg-black/information-01.svg);
      background-size: 40px 40px;
      top: -77px;
      left: 500px;
      width: 40px;
      height: 40px;
      opacity: 0.3;
      cursor: pointer;
    }

    .SectionInfo.sel .icon {
      opacity: 1;
    }

    .SectionInfo .body {
      display: none;
      font-size: 14px;
      max-width: 800px;
    }

    .SectionInfo.sel .body {
      display: block;
    }

    .SectionInfo.sel + h5 {
      display: none;
    }

    .SectionInfo .title {
      font-size: 18px;
      padding-bottom: 10px;
    }
}
@media all /*'HeaderInfo'*/ {

  .HeaderInfo {
    position: relative;
    min-width: 500px;
  }

    .HeaderInfo .icon {
      position: absolute;
      background-image: url(../images/svg-black/information-01.svg);
      background-size: 30px 30px;
      top: -40px;
      right: 0;
      width: 30px;
      height: 30px;
      opacity: 0.3;
      cursor: pointer;
    }

    .HeaderInfo.sel .icon {
      opacity: 1;
    }

    .HeaderInfo .body {
      display: none;
      font-size: 14px;
      padding-bottom: 10px;
    }

    .HeaderInfo.sel .body {
      display: block;
    }

    .HeaderInfo .text {
      float: left;
      padding-bottom: 10px;
      max-width:500px;
    }
}
@media all /*'PageSetup'*/ {

  .PageSetup {
    float: right !important;
    position: relative !important;
  }

    .PageSetup .btn.icon {
      background-image: url(../images/svg-black/setup-01.svg);
      background-position: right center !important;
      width: 20px;
      background-color: transparent;
      opacity: 0.5;
    }

    .PageSetup .menu {
      position: absolute;
      z-index: 10000;
      right: 0px;
      top: 100%;
      display: none;
      opacity: 0;
      transition: height 1s 0s ease;
    }

    .PageSetup:hover .menu, .PageSetup.sel .menu {
      display: block;
      overflow: hidden;
      opacity: 1;
      transition: opacity 1s 0s ease;
      background-color: #eeeeee;
    }

    .PageSetup:hover .btn.icon, .PageSetup.sel .btn.icon {
      opacity: 1 !important;
    }

    .PageSetup .menu ul {
      margin: 0;
      padding: 0;
    }

    .PageSetup .menu > ul > li {
      margin: 0;
      padding: 3px 10px;
      position: relative;
      list-style: none;
      clear: both;
      overflow: scroll;
      display: table;
      min-height: 28px;
      width: 200px;
    }

      .PageSetup .menu > ul > li a {
        display: table;
      }

      .PageSetup .menu > ul > li:hover {
        background-color: #f8f8f8;
      }

      .PageSetup .menu > ul > li .text {
        font-size: 14px;
        padding: 3px 5px;
        width: auto;
        color: #333;
        white-space: nowrap;
        display: table-cell;
        text-align: left;
        width: 150px;
      }

      .PageSetup .menu > ul > li .icon {
        width: 30px;
        padding-top: 5px;
        padding-left: 10px;
        margin: 0;
        text-align: center;
      }



      .PageSetup .menu > ul > li .text.a {
        color: #000;
        cursor: pointer;
      }
}

.Loading {
  content: "loading";
  background-image: url('../images/loading32x32.gif');
  background-repeat: no-repeat;
  background-position: center center;
  min-height: 50px;
  min-width: 50px;
}

.select2-search__field {
  background-image: url('cubes_images/cubes-ban-search-loop.png');
  background-position: center right 4px;
  background-repeat: no-repeat;
}



@media all /*'PerDev MyDevs'*/ {

  .MyDevs .body {
    float: left;
    width: 330px;
    min-height: 150px;
    margin-top: 50px;
    margin-right: 30px;
    background-color: #f6f6f6;
    border-top: 1px solid #4d9ace;
    position: relative;
  }

    .MyDevs .body:hover {
      background-color: #e6e6e6;
    }

  .MyDevs .type {
    position: absolute;
    top: -20px;
    left: 5px;
  }

  .MyDevs .date {
    position: absolute;
    top: -20px;
    right: 5px;
  }

  .MyDevs .title {
    position: absolute;
    top: 10px;
    left: 20px;
    width: 290px;
    font-size: 15px;
  }

  .MyDevs .followUp {
    position: absolute;
    bottom: 10px;
    right: 10px;
    height: 20px;
    line-height: 20px;
    padding-right: 25px;
    background-image: url('../images/svg-black/timecard_approve-01.svg');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 100% 0px;
  }

    .MyDevs .followUp.missing {
      background-image: url('../images/svg-black/timecard_missing-01.svg');
      color: #CC0000;
    }

  .MyDevs .lastPerDevLogBy {
    position: absolute;
    bottom: 10px;
    left: 10px;
    height: 20px;
    line-height: 20px;
    padding-left: 50px;
    background-image: url('../images/svg-black/feedback-01.svg');
    background-repeat: no-repeat;
    background-size: 20px 20px;
    background-position: 0 0;
  }

  .MyDevs .color {
    position: absolute;
    top: -1px;
    width: 330px;
    height: 5px;
    left: 0px;
  }



  .lastPerDevLogBy .image {
    position: absolute;
    top: 0px;
    left: 20px;
    height: 23px;
  }
}

@media all /*'DialogLog'*/ {

  .DialogLog .root {
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
    text-decoration: none;
    border-radius: 5px;
    padding: 10px;
    background-color: #f6f6f6;
    margin-top: 30px;
    margin-left: 5px;
    width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }

  .DialogLog .root-img {
    margin-top: 28px;
    width:50px;
  }
  #NewDialogRoot .root-img {
    margin-top: 0px;
  }

  .DialogLog .root:after, .DialogLog .root:before {
    border: solid transparent;
    content: " ";
    display: block;
    height: 0;
    position: absolute;
    pointer-events: none;
    width: 0;
    right: 100%;
  }

  .DialogLog .root:before {
    border-color: transparent;
    border-width: 1px;
    border-right-color: #ccc;
    top: 20px;
    margin-top: -11px;
    border-width: 11px;
  }

  .DialogLog .root:after {
    border-color: transparent;
    border-right-color: #f6f6f6;
    top: 20px;
    margin-top: -10px;
    border-width: 10px;
  }

  .DialogLog .root .date {
    position: absolute;
    top: -20px;
    right: 0;
    color: #bbb;
  }

  .DialogLog .root .title {
    float: left;
    font-weight: bold;
    min-height: 20px;
  }
  .DialogLog .root .title-status {
    float: right;
    min-height: 20px;
  }
  .DialogLog .root-delete {
    margin-top: 38px;
    margin-left: 5px;
  }

  .DialogLog .root-description {
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
    text-decoration: none;
    border-radius: 5px;
    padding: 10px;
    background-color: transparent;
    margin-left: 5px;
    width: 100%;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: -5px;
    border-top: none;
  }

  .DialogLog .comment {
    display: inline-block;
    position: relative;
    border: 1px solid #ccc;
    text-decoration: none;
    border-radius: 5px;
    padding: 10px;
    background-color: transparent;
    margin-left: 5px;
    width: 100%;
    margin-top: 0px;
  }

    .DialogLog .comment:after, .DialogLog .comment:before {
      border: solid transparent;
      content: " ";
      display: block;
      height: 0;
      position: absolute;
      pointer-events: none;
      width: 0;
      right: 100%;
    }

    .DialogLog .comment:before {
      border-color: transparent;
      border-width: 1px;
      border-right-color: #ccc;
      top: 20px;
      margin-top: -11px;
      border-width: 11px;
    }

    .DialogLog .comment:after {
      border-color: transparent;
      border-right-color: #FFF;
      top: 20px;
      margin-top: -10px;
      border-width: 10px;
    }

  .DialogLog .comment-connector {
    width: 20px;
    height: 10px;
    border-right: 1px solid #ccc;
  }

  .DialogLog .comment-img {
    margin-top: 15px;
    padding-left: 10px;
  }

  .DialogLog .comment-add {
    margin-left: 12px;
  }

  .DialogLog .comment-textarea {
    margin-left: 5px;
    margin-right: -5px;
  }

  .DialogLog .comment-delete {
    margin-top: 19px;
    margin-left: 5px;
  }

  .DialogLog .col-img {
    width: 40px
  }

  .DialogLog .col-text {
    width: 450px
  }

  .DialogLog .col-delete {
    width: 25px
  }
}

@media all /*'Note'*/ {

  .Note {
    max-width: 800px;
  }

    .Note .ql-body {
      max-width: 800px;
      min-width: auto;
      width: auto;
    }

    .Note .NoteAddTable > div {
      display: inline-block;
      width: 100%;
    }

    .Note .NoteAddTable .btn, .Note .NoteItem .btn {
      width: auto;
      float: right;
      margin-top: 5px;
    }

    .Note .NoteAddTable:after {
      visibility: hidden;
      display: block;
      content: "";
      clear: both;
    }

    .Note .NoteAddTable .MainInp100,
    .NoteList .MainInp100 {
      max-width: 100%;
    }

    .Note .NoteItem {
      position: relative;
    }

      .Note .NoteItem:hover {
        cursor: pointer;
      }

        .Note .NoteItem:hover > div {
          border-color: #999;
        }

    .Note .NoteLeftTitle {
      display: block;
      position: relative;
      border: 1px solid #ccc;
      text-decoration: none;
      border-radius: 5px;
      padding: 4px;
      padding-left: 10px;
      background-color: #f6f6f6;
      margin-top: 30px;
      line-height: normal;
      width: 100%;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      font-weight: bold;
      min-height: 39px;
      line-height: 30px;
      vertical-align: middle;
    }
    .Note .NoteLeftTitle input {
      position:relative;
      left:-4px;
    }
      .Note .NoteLeftDescription {
      position: relative;
      display: inline-block;
      border: 1px solid #ccc;
      border-radius: 5px;
      padding: 10px;
      word-break: break-all;
      background-color: #fff;
      width: 100%;
      border-top: none;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

    .Note .NoteDelete {
      position: absolute;
      right: -30px;
      top: 10px;
    }

    .Note .NoteEdit {
      position: absolute;
      left: 0px;
      top: 10px;
    }

    .Note .NoteEditTime {
      position: absolute;
      right: 0px;
      top: -30px;
      padding: 10px;
      color: #bbb;
    }

  .Note_PersonSelect, .Note_PersonSelect2 {
    margin-top: -3px;
    font-size: 20px;
    border: none;
    box-shadow: none;
  }

    .Note_PersonSelect:focus, .Note_PersonSelect2:focus {
      box-shadow: none;
    }

  #Note_Person_Selector {
    vertical-align: top;
  }
}

/*Amass*/
.List .Status_Icon span {
  margin: auto;
  width: 16px;
}

@media all /*'Timecard'*/ {
  .TimecardInp {
    margin: 0px;
    background-color: transparent !important;
    border-width: 0;
    padding: 0px 0px;
    border: solid 1px #aaa;
    border-radius: 0;
    min-height: 25px;
    z-index: 999;
    text-align: right;
    padding: 4px;
    width: 45px;
    clear: both;
    display: block;
  }

  .TimeRegTR div.TD {
    clear: both;
    display: block;
  }

  .FlexEditTR:not(:focus-within)::after {
    content: "";
    background-image: url(../images/svg-black/arrow-left-02.svg);
    background-size: 30px auto;
    background-repeat: no-repeat;
    width: 30px;
    height: 25px;
    display: block;
    opacity: .3;
    position: relative;
    top: 0;
    left: 5px;
    animation: opacityAnimation 1.5s infinite;
  }

  @keyframes opacityAnimation {
    50% {
      opacity: .1;
    }
  }

  .TimecardInp[placeholder="?"]::placeholder {
    text-align: center;
    color: #000;
  }

  .TimecardInp[placeholder="?"] {
    border: solid 1px #666;
  }

  .TimecardInp:focus::placeholder {
    color: transparent;
  }


  .TimecardInp.loading {
    background-image: url(../images/loading32x32.gif);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: auto 80%;
  }
}

@media all /*'Quill .ql-'*/ {
  /* 
----------------------------------------------------------
Quill.js
---------------------------------------------------------- 
*/
  .ql-undo, .ql-redo {
    opacity: .3;
  }

    .ql-undo.active, .ql-redo.active {
      opacity: 1;
    }

  .ql-editor {
    padding: 6px 4px 1px 4px;
  }
  .ql-editor p:first-of-type {
    margin-top: 0;
  } 
  .ql-body {
    background-color: #fbfbfb;
    border: 1px solid #c8c8c8;
    border-radius: 4px;
    position: relative;
    min-width: 450px;
    width: 450px;
    min-height: 31px;
  }

    .ql-body:focus-within {
      border-color: #66afe9;
      background-color: #fff;
      outline: 0;
      -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
      box-shadow: inset 0px 1px 1px rgba(0,0,0,0.075), 0px 0px 8px rgba(102,175,233,0.6);
    }

    .ql-body .ql-toolbar {
      background-color: #fbfbfb;
      border-top-left-radius: 4px;
      border-top-right-radius: 4px;
    }

    .ql-body:not(:focus-within) .ql-toolbar {
      opacity: 0.3;
      /*
    transition-timing-function: ease-in-out;
    transition-duration: 1s;
    */
    }



    /*toggle show formating*/
    .ql-body .toggle {
      position: absolute;
      top: 0;
      right: 0;
      height: 100%;
      width: 29px;
      background-color: transparent;
      border-left: solid 1px #aaa;
      background-image: url('../images/svg-black/font-01.svg');
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: 6px 6px;
      opacity: 0.3;
      cursor: pointer;
    }

      .ql-body .toggle:hover {
        opacity: 1;
      }

    .ql-body.active .toggle {
      display: none;
    }
    /*Making space for toggle show formating*/
    .ql-body.list:not(.active) .ql-editor, .ql-body.listFull:not(.active) .ql-editor {
      padding-right: 35px;
    }

    .ql-body.list .ql-container.ql-snow, .ql-body.listFull .ql-container.ql-snow {
      min-height: 29px;
    }
    /*Hide unless active*/
    .ql-body.list:not(.active) .ql-toolbar, .ql-body.listFull:not(.active) .ql-toolbar {
      display: none;
    }


  .ql-snow .ql-tooltip[data-mode=link]::before {
    content: "";
    background-image: url('../images/svg-black/link-01.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 10px;
  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
    content: "";
  }

  .ql-snow .ql-tooltip.ql-editing a.ql-action {
    background-image: url('../images/svg-black/save-04.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 10px;
  }

  .ql-snow .ql-tooltip::before {
    content: "";
    background-image: url('../images/svg-black/link-01.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 10px;
    opacity: 0.5;
  }

  .ql-snow .ql-tooltip a.ql-action::after {
    content: "";
    border: none;
  }

  .ql-snow .ql-tooltip a.ql-action {
    background-image: url('../images/svg-black/edit-01.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 10px
  }

  .ql-snow .ql-tooltip a.ql-remove {
    background-image: url('../images/svg-black/delete-01.svg');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    background-position: center center;
    padding: 10px
  }

    .ql-snow .ql-tooltip a.ql-remove::before {
      content: "";
    }

  .ql-snow.ql-toolbar button, .ql-snow .ql-toolbar button {
    padding: 2px 2px;
    width: 24px;
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item::before {
    content: 'Normal';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
    content: 'Heading';
  }

  .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
  .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
    content: 'Large';
  }
}

@media all /*'CodeMirror'*/ {
  /* 
----------------------------------------------------------
CodeMirror-bod
---------------------------------------------------------- 
*/

  .CodeMirror-body {
    max-width: 100%;
    min-width: 450px;
    border: 1px solid #aaa;
    border-radius: 4px;
  }



  .CodeMirror-toolbar {
    display: block;
    border-bottom: 1px solid #aaa;
    height: 29px;
  }

    .CodeMirror-toolbar span {
      display: inline-block;
    }

      .CodeMirror-toolbar span:last-child {
        float: right;
      }


    .CodeMirror-toolbar button {
      cursor: pointer;
      display: inline-block;
      float: left;
      height: 28px;
      padding: 2px 4px;
      width: 28px;
      margin-left: 0px;
      border: none;
      background: none;
      background-size: 16px 16px;
      background-repeat: no-repeat;
      background-position: center center;
      opacity: 0.3;
    }

      .CodeMirror-toolbar button:hover {
        opacity: 1;
      }

    .CodeMirror-toolbar .close {
      background-image: url('../images/svg-black/window-close-01.svg');
    }

      .CodeMirror-toolbar .close:hover {
        background-color: red;
      }

    .CodeMirror-toolbar .maximize {
      background-image: url('../images/svg-black/window-maximize-01.svg');
    }

    .CodeMirror-toolbar .minimize {
      background-image: url('../images/svg-black/window-minimize-01.svg');
    }

    .CodeMirror-toolbar .restore {
      background-image: url('../images/svg-black/window-restore-01.svg');
    }

  .restore .CodeMirror-toolbar .restore {
    opacity: 1;
  }

  .maximize .CodeMirror-toolbar .maximize {
    opacity: 1;
  }

  .minimize .CodeMirror-toolbar .minimize {
    opacity: 1;
  }

  .minimize .CodeMirror {
    height: auto;
  }

  .restore .CodeMirror {
    height: 300px;
  }

  .maximize .CodeMirror {
    position: fixed;
    top: 29px;
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
  }

  .maximize .CodeMirror-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }

  .CodeMirror-body.maximize {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;
    border: none;
    background-color: #fff;
    border-radius: 0;
    min-height: 100vh;
  }
}

@media all /*'Processbar'*/ {
  /* ----------------------------------------------------------
Processbar
---------------------------------------------------------- */

  .Processbar li {
    list-style-type: none;
    width: 80px;
    float: left;
    font-size: 12px;
    position: relative;
    text-align: center;
    color: rgba(35, 79, 99, 1);
  }
    /*Number Circle*/
    .Processbar li:before {
      width: 30px;
      height: 30px;
      content: "";
      line-height: 26px;
      border: 2px solid #ccc;
      display: block;
      text-align: center;
      margin: 0 auto 3px auto;
      border-radius: 50%;
      position: relative;
      z-index: 2;
      background-color: #fff;
      font-weight: bold;
      color: #999;
    }
    /*Line from last to own*/
    .Processbar li:after {
      width: 100%;
      height: 2px;
      content: '';
      position: absolute;
      background-color: #ccc;
      top: 14px;
      left: -50%;
      z-index: 0;
    }
    /*Dont add line on first*/
    .Processbar li:first-child:after {
      content: none;
    }
    /*Done Text*/
    .Processbar li.done {
      color: #999;
    }
      /*Done number circle*/
      .Processbar li.done:before {
        border-color: rgba(35, 79, 99, 1);
        background: rgb(49, 143, 173);
        color: transparent;
        background-image: url('../images/svg-white/check-01.svg');
        background-size: 22px auto;
        background-position: center center;
        background-repeat: no-repeat;
      }
      /*Done lines*/
      .Processbar li.done + li:after {
        background-color: rgba(35, 79, 99, 1);
      }
    /*Active number circle*/
    .Processbar li.active:before {
      border-color: rgb(49, 143, 173);
      color: rgba(35, 79, 99, 1);
    }

  /*Number*/
  .Processbar {
    counter-reset: step;
  }

    .Processbar li:before {
      content: counter(step);
      counter-increment: step;
      padding-right:1px;
    }
}

@media all /*'MaternityTaskStatus'*/ {
  .MaternityTaskStatus {
    background-image: url(../images/svg-black/plus-01.svg);
    background-size: 16px 16px;
    background-position: left center;
    white-space: nowrap;
  }

    .MaternityTaskStatus.REQUESTED {
      background-image: url(../images/svg-black/question-01.svg)
    }

    .MaternityTaskStatus.AWAITING {
      background-image: url(../images/svg-black/hourglass-01.svg)
    }

    .MaternityTaskStatus.NOT_APPLICABLE {
      background-image: url(../images/svg-black/window-minimize-01.svg)
    }

    .MaternityTaskStatus.RECEIVED {
      background-image: url(../images/svg-black/compensation-01.svg)
    }

    .MaternityTaskStatus.RECORDED {
      background-image: url(../images/svg-black/economy-01.svg)
    }
}

@media all /*'SurveyResult'*/ {
  .SurveyResult .TD {
    border-top: 3px solid #FFF;
    background-color: #f6f6f6;
  }

  .SurveyResult .total .TD {
    border-top: 3px solid #FFF;
    background-color: #fff;
  }

  .SurveyResult .question {
    padding-top: 20px;
  }

  .SurveyResult table {
    margin-top: 10px;
  }

    .SurveyResult table td:nth-of-type(2) {
    }

  .SurveyResult .indicator {
    width: 100px;
  }

    .SurveyResult .indicator > div {
      width: 100px;
    }

      .SurveyResult .indicator > div > div {
        background-color: rgb(49, 143, 173);
        height: 10px;
        border-radius: 2px;
      }

  .SurveyResult .comments {
  }

    .SurveyResult .comments .comment {
      background-color: #f6f6f6;
      border-radius: 10px;
      max-width: 800px;
      width: auto;
      padding: 10px;
      margin-top: 5px;
      font-style: italic;
    }

  .SurveyResult .catalog h2 {
    padding-top: 40px;
  }
}

@media all /*'BanSearch'*/ {
  .BanSearch {
    z-index: 110;
    position: absolute;
    top: 5px;
    right: 205px;
    padding: 0;
    width: 40px;
    -webkit-transition: all ease-in-out 0.4s 0.4s;
    -moz-transition: all ease-in-out 0.4s 0.4s;
    -ms-transition: all ease-in-out 0.4s 0.4s;
    -o-transition: all ease-in-out 0.4s 0.4s;
    transition: all ease-in-out 0.4s 0.4s;
    background-color: #3f6577;
    border-radius: 20px;
    height: 40px;
  }

    .BanSearch .input .btn {
      position: absolute;
      height: 100%;
      border: none;
      width: 40px;
      right: 0;
      padding: 0;
      top: 0;
      background-color: transparent;
    }

      .BanSearch .input .btn button {
        background-image: url('../images/svg-white/search-01.svg') !important;
        background: transparent;
        background-size: 20px 20px;
        background-position: center center;
        background-repeat: no-repeat;
        opacity: .7;
        height: 100%;
        width: 100%;
        border: none;
      }



    .BanSearch.expand,
    .BanSearch.focus {
      background-color: #ffffff;
      width: 290px;
      -webkit-transition: all ease-in-out 0.4s;
      -moz-transition: all ease-in-out 0.4s;
      -ms-transition: all ease-in-out 0.4s;
      -o-transition: all ease-in-out 0.4s;
      transition: all ease-in-out 0.4s;
    }

    .BanSearch .input {
      height: 100%;
      width: 100%;
      border: none;
    }

      .BanSearch .input .inp {
        width: 20px;
        -webkit-transition: width ease-in-out 0.4s .1s;
        -moz-transition: width ease-in-out 0.4s .1s;
        -ms-transition: width ease-in-out 0.4s .1s;
        -o-transition: width ease-in-out 0.4s .1s;
        transition: width ease-in-out 0.4ss .1s;
        position: absolute;
        left: 17px;
        top: 4px;
        height: 100%;
        overflow: hidden;
      }

    .BanSearch.expand .input .inp,
    .BanSearch.focus .input .inp {
      width: 240px;
    }

    .BanSearch .input .inp input {
      width: 100%;
      background-color: transparent;
      border: 1px solid transparent;
      background: transparent;
      transition: all ease-in-out .15s;
      -webkit-box-shadow: none;
      box-shadow: none;
      color: transparent;
      padding: 4px 6px;
      overflow: hidden;
      background-image: none;
    }

      .BanSearch .input .inp input:focus {
        color: #000;
      }

      .BanSearch .input .inp input::placeholder {
        color: #ffffffff;
      }

    .BanSearch.expand .input .inp input::placeholder,
    .BanSearch.focus .input .inp input::placeholder {
      color: #999;
    }

    .BanSearch.expand .input .inp input,
    .BanSearch.focus .input .inp input {
      transition: all ease-in-out .15s;
      color: #000;
    }



    .BanSearch.focus .input .btn button,
    .BanSearch.active .input .btn button {
      background-image: url('../images/svg-black/search-01.svg') !important;
    }

    .BanSearch.active .input .btn button {
      background-image: url(../images/Loading9.gif) !important;
    }

    .BanSearch .result .result-div {
      background-color: #FAFAFA;
      border: 1px solid #ccc;
      width: 250px;
      border-bottom-right-radius: 5px;
      border-bottom-left-radius: 5px;
      overflow: hidden;
      -webkit-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
      -moz-box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
      box-shadow: 2px 2px 9px 0 rgba(0,0,0,0.25);
    }

    .BanSearch .result {
      z-index: 111;
      position: absolute;
      top: 100%;
      right: 20px;
      width: 250px;
      overflow: hidden;
      height: 0;
      opacity: 0;
      transition: opacity 1s ease-in, height 1s;
    }


    .BanSearch.expand .result {
      opacity: 1;
      height: calc(100vh - 50px);
      overflow-y: auto;
      -o-transition: opacity .05s ease-out, height 0.05s;
      transition: opacity .05s ease-out, height 0.05s;
    }

    .BanSearch .result .header {
      border-style: none;
      font-weight: bold;
      cursor: pointer;
      padding: 5px
    }

    .BanSearch .result .value {
      overflow: hidden;
      text-align: left;
      padding: 0;
      margin: 0;
      height: 36px;
      width: 215px;
      vertical-align: top;
      cursor: pointer;
    }

    .BanSearch .result .image {
      padding: 0;
      height: 30px;
      width: 35px;
      cursor: pointer;
      padding-left: 2px;
    }

    .BanSearch .result .project .image > div {
      margin-right: auto;
      margin-left: auto;
    }

    .BanSearch .result .image img {
      padding: 0;
      margin: 0;
      border: none;
      display: block;
    }


    .BanSearch .result .value-1 {
      width: 210px;
      height: 19px;
      line-height: 15px;
      overflow: hidden;
      padding-right: 2px;
      padding-left: 2px;
      padding-top: 4px;
      display: block;
    }

    .BanSearch .result .value-2 {
      width: 210px;
      font-size: 11px;
      height: 16px;
      line-height: 14px;
      overflow: hidden;
      padding-right: 2px;
      padding-left: 2px;
      padding-bottom: 2px;
      color: #666;
      display: block;
    }

    .BanSearch .result .tr1,
    .BanSearch .result .tr0 {
      background-color: transparent;
    }

      .BanSearch .result .tr1:hover,
      .BanSearch .result .tr0:hover {
        background-color: #DDD;
      }

      .BanSearch .result .tr1 > td,
      .BanSearch .result .tr0 > td {
        border: none;
      }
}

/******************************************************************
  Browser size diff
******************************************************************/




.ChangeSetList .header td {
  font-size: 25px;
  font-weight: lighter;
  padding-top: 30px;
  padding-bottom: 10px;
}
.ChangeSetList .List {
}
.ChangeSetList .header.na td {
 color:#ccc;
}






@media all and (min-width: 1200px) {
  .BanSearch.expand,
  .BanSearch.focus,
  .BanSearch {
    width: 350px;
    right: calc(50vw - 130px);
  }

  .BanSearch {
    -webkit-transition: all ease-in-out 1s;
    -moz-transition: all ease-in-out 1s;
    -ms-transition: all ease-in-out 1s;
    -o-transition: all ease-in-out 1s;
    transition: all ease-in-out 1s;
  }

    .BanSearch.expand,
    .BanSearch.focus {
      -webkit-transition: all ease-in-out 0.4s;
      -moz-transition: all ease-in-out 0.4s;
      -ms-transition: all ease-in-out 0.4s;
      -o-transition: all ease-in-out 0.4s;
      transition: all ease-in-out 0.4s;
    }


      .BanSearch.expand .input .inp,
      .BanSearch.focus .input .inp,
      .BanSearch .input .inp {
        width: 320px;
      }

        .BanSearch .input .inp input {
          width: 320px;
        }

    .BanSearch .result {
      right: auto;
      left: 18px;
      width: 330px;
      top: 40px;
    }

      .BanSearch .result .result-div {
        width: 315px;
      }

      .BanSearch .result .value {
        width: 280px;
      }
}


@media all and (max-width: 1400px) {
  .SectionMenu {
    display: none;
  }
}
  /**/
  @media all and (max-width: 1200px) {
    header {
      height: 50px;
    }

    .PageTile {
      display: none;
    }

    .MenuBody {
      display: none;
    }

    .LeftListDiv {
      display: none;
    }

    .BanBody {
      width: 200px;
      height: 50px;
      position: fixed !important;
      left: auto;
      right: 0;
      top: 0;
    }

    .MainDiv {
      padding-left: 50px;
      padding-top: 50px;
      padding-right: 0;
      padding-bottom: 20px;
    }


    .BanDiv {
      height: 50px;
      position: relative !important;
      z-index: 15002 !important;
    }

    .BanLogo {
      position: fixed !important;
      right: 100px;
      top: 0 !important;
      left: auto;
      width: 100px;
      height: 50px;
      overflow: hidden;
      background-size: contain;
      background-position: center center;
    }

    .BanUser {
      position: fixed;
      width: 90px;
    }

      .BanUser .menu {
        width: 60px;
        zoom: 1.5;
      }

    .BanUserMenu1 .menu li a {
      font-size: 9px;
    }

    .BanUser .head,
    .BanUser .name {
      display: none !important;
    }




    .Search .Filter .input .string {
      width: calc(100vw - 70px);
    }


    .BanDatePTA {
      display: none;
    }


    .BanUser .image img {
      max-width: auto;
      max-height: auto;
    }

    .BanUser nav {
      float: right;
    }

    .LeftListDiv {
      padding-top: 0;
    }

    .LeftDiv {
      width: 100%;
      left: 0;
    }

    .LeftImage {
      width: 100%;
      height: 80px;
    }

      .LeftImage .info {
        width: 100%;
        height: 80px;
        padding-left: 150px;
        right: 0;
        left: 0;
        background-color: transparent;
      }

      .LeftImage .image .DepImg,
      .LeftImage .image .PerImg {
        width: 70px;
        height: 70px;
        top: 6px;
        left: 68px;
      }

      .LeftImage .image > img {
        display: none;
      }


      .LeftImage .text .department,
      .LeftImage .text .no {
      }

      .LeftImage .text .init {
      }


    body[class*="list"] .LeftImage,
    body[class*="search"] .LeftImage {
      display: none;
    }
    /*
  .Nav1 {
    position: relative !important;
    left: 0 !important;
    top: 0 !important;
  }

    .Nav1 .brand {
      display: none;
    }
*/
    .Nav1 {
      top: 0 !important;
      left: 0 !important;
      position: fixed !important;
      z-index: 15000;
      width: 100%;
    }

      .Nav1 > div > ul > li.sel > a {
      }

    .scrolled-top-0 .BanLogo {
    }

    .scrolled-up .BanLogo {
    }



    .Nav2 div.menu {
      width: 0;
    }

    .Nav2 {
      width: 100% !important;
      left: 0px;
      right: 0px;
    }

      .Nav2.expand div.menu {
        width: 100% !important;
        max-width: 100%;
        right: 0px;
        margin: 0;
        transition: top 0s !important;
      }

      .Nav2 > div > ul > li {
        width: 100%;
      }

    .scrolled-top-3 .Nav2 {
      position: fixed;
      width: 100% !important;
      top: 50px;
      left: 0px;
      right: 0px;
    }

    .Nav3 {
      left: 0px;
      width: 320px;
    }




    .scrolled-up .MainBody section.goback,
    .scrolled-top-1:not(.scrolled-up) .MainBody section.goback {
      top: 50px !important;
    }

    .scrolled-top-1.scrolled-up .MainBody section.goback {
      top: 50px;
    }

    h3, .MainBody section h3 {
      font-size: 20px;
    }

    h4 {
      font-size: 15px;
    }

    .MainBody section[data-section] h2 {
      font-size: 20px;
    }

    .CalendarLongDate, .CalenderLongDate {
      display: none;
    }






    .ql-body, .MainText100 {
      width: 310px !important;
      max-width: 310px !important;
      min-width: 310px !important;
    }


    .view_timecard .MainDivBody {
    }



    .view_expense #EXPENSE_DETAILS_SECTION {
    }

    .flexChart {
      zoom: .6;
    }

    .edit_expense_list .MainDivBody,
    .edit_expense_distance_list .MainDivBody,
    .view_expense_list .MainDivBody,
    .view_expense_distance_list .MainDivBody {
      zoom: .6;
    }



    .view_employment_list .MainDivBody, .edit_employment_list .MainDivBody {
    }

    .view_absence_total .MainDivBody {
      zoom: .9;
    }

    .FooterMenu .brand {
    }

    .input-undo {
      display: none !important;
    }


    .AbsenceInfo .icon {
      display: none;
    }


    .Body2 {
      display: none;
    }

    .FormAction .menu {
      padding-left: 50px;
    }

    .LeftDiv {
      position: relative !important;
      top: 50px !important;
    }

    .LeftBodyDiv {
      min-height: auto;
      height: auto;
      position: relative !important;
      width: 100% !important;
    }

    .LeftImage {
      width: 100%;
    }

      .LeftImage .icon {
        left: 57px;
      }

    .SearchResultLeft {
      display: none;
    }



    table.Mobile {
    }

      table.Mobile > tbody > tr > td:first-child {
        text-align: left;
        display: block;
        padding: 8px 0 0 1px;
      }

      table.Mobile > tbody > tr > td {
        display: block;
      }

    .Favorites {
      display: none;
    }



    .MainBody section.error > div, .MainBody section.info > div {
      left: 0;
    }


    .CubesDropArea {
      width: calc(100vw - 20px);
    }

    .BanSearch .input .inp input::placeholder {
      color: transparent;
    }

    .BanSearch.focus .input .inp input::placeholder {
      color: transparent;
    }
  }


@media all and (min-width: 650px) {

  header {
    height: 50px;
  }



  .view_start .MainBody {
  }

  .Nav1 {
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 50px;
    display: inline-flex;
    vertical-align: middle;
    align-items: flex-start;
    z-index: 20005;
  }



  footer {
    height: 0;
  }

  .FooterBody {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: 21000;
    background-color: transparent;
    height: 40px;
    width: 50px;
    opacity: .5;
    transition: opacity .5s 1s ease;
  }

  .FooterMail {
    display: none;
  }

  .FooterBody .FooterAddress {
    position: absolute;
    top: 40px;
    left: 50px;
    width: 0;
    height: 50px;
    background-color: var(--nav1-back-color);
    color: #fff;
    text-align: left;
    line-height: 50px;
    transform: rotate(-90deg);
    transform-origin: -50px 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #c0bf99;
    transition: all .5s 1s ease;
  }

  .FooterBody:hover .FooterAddress {
    opacity: 1;
    transition: all .5s 1s ease;
    width: 120px;
    transform: rotate(-90deg);
  }

  .FooterBody:hover {
    opacity: 1;
    transition: all .5s 1s ease;
  }

  .FooterBody:after {
    content: "";
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 0px;
    left: 0px;
    z-index: 21001;
    background-image: url('../images/CUBES-white.svg');
    background-size: 20px auto;
    background-position: center center;
    background-repeat: no-repeat;
    transition: all .5s 1s ease,background-image .5s 0s ease;
  }

  .FooterBody:hover:after {
    background-image: url('../images/CUBES-color.svg');
    transform: rotate(-90deg);
    transition: all .5s 1s ease,background-image .5s 0s ease;
  }


  .FooterHtml {
    display: none;
  }

  .Nav1 div.menu {
  }

  .view_start .MainDiv {
    padding-left: 0 !important;
    border: none;
  }

  .MainDiv {
    /* padding-left: 370px;
    border-top: 120px solid rgba(203, 203, 203, 1);*/
  }

  .LeftBodyDiv {
    width: 370px;
  }



  .scrolled-up .LeftDiv {
    top: 50px;
  }

  .BanBody {
    height: 50px;
  }

  .scrolled-top-0 .BanDiv {
    top: 0px;
  }

  .scrolled-top-0 .BanLogo {
    top: 0px;
  }
  /*Counter perhaps remove both*/
  .scrolled-top-1 .Nav1 {
    position: fixed;
    top: 0;
    transition: all 0.3s;
  }

  .scrolled-up .Nav1 {
    top: 0;
    transition: all 0.3s;
  }
}


@media all and (max-width: 650px) {
  @-ms-viewport {
    width: 320px;
  }

  @-o-viewport {
    width: 320px;
  }

  @-moz-viewport {
    width: 320px;
  }

  @-webkit-viewport {
    width: 320px;
  }

  @viewport {
    width: 320px;
  }
}


@media all and (max-width: 650px) {
  .MainDiv {
    padding-left: 0;
    padding-top: 50px;
    padding-right: 0;
    padding-bottom: 20px;
  }
  .view_hr_data_all #MainDiv,
  .view_hr_data #MainDiv {
    padding-left:0;
  }
  .Hide500 {
    display: none !important;
  }
  .BanLogo {
    left: 50px;
    background-position: 5px 20px;
  }

  .LeftImage .info {
    width: 100%;
    height: 80px;
    padding-left: 100px;
    right: 0;
    left: 0;
    background-color: transparent;
  }

  .LeftImage .image .DepImg,
  .LeftImage .image .PerImg {
    width: 70px;
    height: 70px;
    top: 6px;
    left: 18px;
  }
  .LeftImage .icon {
    left: 7px;
  }

  .FooterBody {
    display: none;
  }


  .MainBody .section,
  .MainBody section[data-section] > * {
    margin: 20px 10px;
  }

    .MainBody .section.ToolBox {
      margin: 0;
    }

  .FrontPage .body .col {
  }

  .FormAction .menu {
    padding-left: 0;
  }

  .FrontPage .todo .header .text


  html, input, select, textarea {
    font-size: 12px;
  }

  .LeftImage .text .name .value {
    font-size: 16px;
  }

  .FrontPage .responsible {
    width: 100%;
  }

  .FrontPage .timereg .header {
    font-size: 12px;
  }

  .ToolBox {
    padding-left: 0px;
    padding-right: 0px;
  }


  .BanDatePTA {
    display: none;
  }

  .Filter {
    padding: 0;
    text-align: center;
    min-height: auto;
  }

    .Filter > * {
      display: inline-block;
    }

  #AbsenceDetail {
    margin-left: 0;
    width: 100%;
  }

  .AbsenceHeader {
    padding-left: 10px;
  }

  .AbsenceHeaderBorder {
    left: 0;
  }

  .CalendarMonths .month {
    width: 175px;
    height: 175px;
  }

  .CalendarMonths {
    zoom: 0.85;
  }

  #HalfDayStartBtn, #HalfDayEndBtn {
    width: 31px;
    height: 31px;
    padding: 0;
  }

  .Mobile100 {
    width: 100vw;
    margin: 0 0 !important;
    border-left: none;
    border-right: none;
  }

  .section .Mobile100, section .Mobile100 {
    margin: 0 -10px !important;
  }

  .Mobile100 td {
    border-left: none !important;
    border-right: none !important;
  }

  .FormAction .menu {
    height: 50px;
  }

  .FormAction ul {
    height: 50px;
  }

  .FormAction li {
    padding-bottom: 5px;
  }

  nav .IconPer {
    background-image: url(../images/svg-white/search-01.svg) !important;
  }


  .edit_expense_list .MainDivBody:after,
  .edit_expense_distance_list .MainDivBody:after,
  .view_expense_list .MainDivBody:after,
  .view_expense_distance_list .MainDivBody:after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF99;
    background-image: url(../images/svg-black/device-rotate-01.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 300px auto;
  }

  .FooterMail {
    display: none;
  }

  .BanSearch {
    display: none;
  }

  .SectionMenu {
    display: none;
  }


  .BtnIcon.IconDelete:active,
  .BtnIcon.IconSave:active,
  .btn.IconSave:active,
  .btn.IconBack:active,
  .btn.IconDelete:active,
  .btn.IconReset:active,
  .BtnIcon.IconDelete,
  .BtnIcon.IconSave,
  .btn.IconSave,
  .btn.IconBack,
  .btn.IconDelete,
  .btn.IconReset {
    width: 32px !important;
    min-width: 45px;
    overflow: hidden;
    padding-left: 0;
    color: transparent !important;
    background-position-x: center;
  }

  .FormAction .delete input:not([disabled]) {
    color: transparent !important;
  }
}

@media all and (max-width: 650px) {


  .BanDatePTA {
    display: none;
  }


  .FooterAddress {
    display: none;
  }
}


@media all and (max-width: 650px) {

  .view_start .MainDiv {
    padding-top: 0px;
  }

  .FrontPage .what > div {
    width: unset;
    padding: 0px 10px;
  }

    .FrontPage .what > div > div {
      width: unset;
    }
}

@media print {



  html, body {
    height: auto;
  }

  body {
    zoom: 75%;
  }


  BODY, .Body, .BodyBody {
    background-color: transparent;
  }

  HR {
    border: 1px solid #C0C0C0;
  }

  .InfoDiv {
    padding-top: 48px;
    text-align: right;
    width: 100%;
  }

  .InfoSpan {
    padding-right: 26px;
    padding-left: 10px;
    overflow: visible;
    border-left: #c3c1c1 1px;
    width: 290px;
    padding-top: 5px;
    background-color: #ffffff;
    text-align: left;
    background-image: none;
  }

  .InfoEnd {
    background-image: none;
    width: 290px;
    height: 20px;
  }

  .InfoTable {
  }

  .MainDiv {
    padding: 0px;
    margin: 0px;
    width: 100%;
    background-color: transparent;
    overflow: visible !important;
  }

  header, .FormAction, .Body1, .Body2, .Body3, .Actions {
    display: none;
  }

  .MainImagePrint {
    position: absolute;
    top: 30px;
    right: 0px;
  }

    .MainImagePrint IMG {
    }

  .MainBody, .MainDivBody, .MainDiv {
    border-style: none;
    background-image: none;
  }

  .MainBodyNoScroll {
    padding-right: 0px;
    padding-left: 0px;
    background-image: none;
    padding-bottom: 0px;
    margin: 0px;
    overflow: visible;
    color: #000000;
    padding-top: 0px;
  }

  .MainScroll {
    padding-left: 20px;
    background-image: none;
    overflow: auto;
  }

  #view_person .MainDiv, #view_person_data .MainDiv, #view_department .MainDiv, #view_department_task .MainDiv, #view_company .MainDiv, #view_project .MainDiv, #view_bulletin .MainDiv, #view_bulletin_department .MainDiv, #view_bulletin_company .MainDiv, #view_bulletin_project .MainDiv {
    padding-right: 0px;
  }

  #TDLG {
    color: #333333;
  }

  #TDRG {
    color: #333333;
  }

  #TDCG {
    color: #333333;
  }

  #TDLGH {
    color: #333333;
  }

  #TDRGH {
    color: #333333;
  }

  #TDCGH {
    color: #333333;
  }

  .MainTHOff {
    color: #000000;
  }

  .MainTHSel {
    color: #000000;
  }

  .MainTHNot {
    color: #000000;
  }

  A {
    color: #000000;
    text-decoration: none;
  }

    A:link {
      color: #000000;
    }

    A:visited {
      color: #000000;
    }

    A:active {
      color: #000000;
    }

  .BodyBody {
    background-color: transparent;
  }

  .MainDivBody {
    background-color: transparent;
  }

  .info.person {
    left: 95px;
    width: 525px;
  }

  .text {
    margin-top: auto !important;
    margin-bottom: auto !important;
    height: auto;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
  }

    .text > div {
      height: 20px;
      display: table-row;
    }

    .text .label {
      width: 90px;
      color: #aaa;
      float: left;
      overflow: hidden;
      text-align: right;
    }

    .text .value {
      width: auto;
      float: left;
      text-align: left;
      padding-left: 15px;
    }

    .text .name .value {
      font-size: 18px;
    }

  .LeftDiv, .LeftBodyDiv {
    display: none;
  }


  #IconEdit {
    visibility: hidden;
  }

  #IconEditNa {
    visibility: hidden;
  }

  #IconEditSmall {
    visibility: hidden;
  }

  #IconEditInText {
    visibility: hidden;
  }

  #IconEditInTextNA {
    visibility: hidden;
  }

  #IconEditInView {
    visibility: hidden;
  }

  #IconEditInViewNA {
    visibility: hidden;
  }


  #FrontPageSelectMenu {
    display: none;
  }

  .FrontPage {
    background-color: transparent;
  }

  .YearCalendar {
    width: 90%;
  }
}