/* Global Colors */
:root {
  --ag-blue: #0b2540;
  --ag-med-blue: #1c4269;
  --ag-light-blue: #b5c9de;
  --red: #D82E42;
  --alert-red: #ff0000;
  --dark-red: #9D3832;
  --blush: #edd6d3;
  --blue: #104DD5;
  --bright-yellow: #ffff00;
  --green: #4F9B27;
  --mint-green: #d3edd3;
  --med-green: #3b7d18;
  --dark-green: #26570d;
  --med-violet: #7e1f7e;
  --brown: #6c4a1a;
  --dark-slate: #565B67;
  --slate: #7a8296;
  --grey-med: #555;
  --grey-light: #888;
  --white: #fff;
  --sky-blue: #1ca1c1;
  --sea-blue: #0e819d;
  --mono-color: #000000;
  --mono-grey: #ddffcc;
  --mono-white: #ffffff;
  
  --mono-width: 8.7;
}


.webixappstart {
  opacity: 0;
}
.webixapp {
  transition: opacity 500ms;
  opacity: 1;
}
.logo {
  background: url("../media/ag_logo_40.webp") 2px 0px  no-repeat;
}

.logo .webix_template {
  padding: 7px 0 0 55px;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--ag-blue);
  font-weight: 600;
}

.webix_header.webix_dark .webix_template {
  text-align: center;
  line-height: 56px;
}
.avatar .mainphoto {
  border-radius: 25px;
  widows: 40px;
  height: 40px;
  position: relative;
  top: -4px;
}
.status {
  position: relative;
  top: -25px;
  left: 25px;
  font-size: 10px !important;
  text-shadow: -1px 0 #ffffff, 0 1px #ffffff, 1px 0 #ffffff, 0 -1px #ffffff;
}

.highlight {
  background-color: #eee;
}
.highlight-blue {
  background-color: #6cd7f0;
}

.custom_dark {
  background: var(--ag-blue);
  font-size: 18px;
  color: #ffffff;
  font-weight: normal;
  letter-spacing: 1px;
  text-align: center;
}
.custom_dark .webix_template {
  line-height: 55px;
}

.webix_win_head .webix_view {
  background: var(--dark-slate);
  color: #fff;
}

.webix_header.modal-header {
  background: var(--slate);
  color: #fff;
}

.webix_header.red-header {
  background: var(--dark-red);
  color: #fff;
}

.dark-toolbar {
  background: var(--ag-blue);
}
.dark-toolbar .webix_template {
  background: var(--ag-blue);
  color: var(--white);
}

.med-toolbar {
  background: var(--ag-med-blue);
}
.med-toolbar .webix_template {
  background: var(--ag-med-blue);
  color: var(--white);
}
.med-toolbar .webix_template a {
  color: var(--white);
  text-decoration: none;
}
.med-toolbar .webix_template a:hover {
  text-decoration: underline;
}

.light-toolbar {
  background: var(--ag-light-blue);
}
.light-toolbar .webix_template {
  background: var(--ag-light-blue);
  color: var(--ag-blue);
}

.webix_property .webix_property_label {
  background-color: #ddd;
}
.webix_property .disabled .webix_property_label {
  background-color: #d4d0d0;
}
.webix_property .disabled .webix_property_value {
  background-color: #f4eeee;
}
.webix_property .disabled .webix_property_value input[type="checkbox"] {
  pointer-events: none;
  opacity: 0.6;
}
.webix_property .highlight-empty .webix_property_value:empty {
  background-color: #ffeeee;
  border: solid 1px var(--alert-red);
}
.webix_property .webix_property_line.hidden {
  display: none;
}

.date-sum {
  background-color: #F6F6F6;
  border-top: solid 1px #DDD;
}

.empl-sum {
  background-color: #EEE;
  border-top: solid 1px #999;
}

.ess-view pre {
	color: var(--mono-color);
	background: linear-gradient(to right,
		var(--mono-grey) 0px, var(--mono-grey) 86.25px,
		var(--mono-white) 86.25px, var(--mono-white) 155.25px,
		var(--mono-grey) 155.25px, var(--mono-grey) 198.375px,
		var(--mono-white) 198.375px, var(--mono-white) 215.625px,
		var(--mono-grey) 215.625px, var(--mono-grey) 250.125px,
		var(--mono-white) 250.125px, var(--mono-white) 284.625px,
		var(--mono-grey) 284.625px, var(--mono-grey) 319.125px,
		var(--mono-white) 319.125px, var(--mono-white) 336.375px,
		var(--mono-grey) 336.375px, var(--mono-grey) 414px,
		var(--mono-white) 414px, var(--mono-white) 448.5px,
		var(--mono-grey) 448.5px, var(--mono-grey) 534.75px,
		var(--mono-white) 534.75px, var(--mono-white) 586.5px,
		var(--mono-grey) 586.5px, var(--mono-grey) 672.75px,
		var(--mono-white) 672.75px
	);
}


/* Style read-only property elements */
.webix_property .webix_property_line.prop-read-only .webix_property_value {
  background-color: #eee;
}

.textarea_label label {
  padding-left: 15px;
  font-weight: 400;
}