/*
 * Main stylesheet for the LMMS application.
 * Dependencies: flaticon.css, global.css
 */

html {  
	background: #CCC;
}

body {
	box-shadow: 1px 6px 12px 3px rgba(0,0,0,0.2);
	background: #FFF;
	margin: 5px auto 5px auto;
	padding: 21px 25px 8px;
	width: 975px;
	overflow: auto;
}
body, 
button,
input,
textarea, 
select, 
th, 
td {
	font-family: "Segoe UI", Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #555;
}

.busy,
.busy * {
	cursor: wait !important;
}

input[type="text"], 
input[type="password"], 
textarea, 
select {
	border: 1px solid var(--border-color);
	color: #000;
	margin: 0;
}
input[type="text"], 
input[type="password"], 
textarea {
	padding: 2px 2px 2px 4px;
}

input[type="text"]:focus,
input[type="text"][readonly].filename:focus,
input[type="password"]:focus,
/*input[type="checkbox"]:focus,*/
textarea:focus,
select:focus {
	box-shadow: 0 0 3px 0 #777;
	border-color: #000;
	outline: none;
}
input.t-error:focus,
textarea.t-error:focus,
select.t-error:focus {
	box-shadow: 0 0 3px 0 #FF7272;
}
input[type="text"][readonly]:focus, 
textarea[readonly]:focus {
	box-shadow: none;
}

input[type="text"]:disabled,
input[type="password"]:disabled,
textarea:disabled,
select:disabled {
	background: transparent;
}

:disabled.fade-disabled,
:disabled.fade-disabled + label,
:disabled.fade-clear-disabled,
:disabled.fade-clear-disabled + label {
	opacity: 0.45;
}
:disabled.fade-clear-disabled {
	color: transparent !important;
}

input::-moz-placeholder {
	color: #777 !important;
}

/*
::-moz-selection {
	background-color: #F92 !important;
	color: #FFF !important;
}
*/

input[type="radio"] + label {
	color: #555/*var(--label-color)*/;
}
input[type="radio"]:checked + label,
input[type="radio"]:enabled + label:hover,
input[type="radio"]:disabled:checked + label.dark-checked {
	color: #000;
}
input[type="radio"]:disabled + label {
	color: #AAA/*var(--greyed-text)*/;
}

button,
input[type="submit"], 
input[type="button"] {
	font-weight: normal;
	color: #000;
}
button[disabled],
input[type="submit"][disabled], 
input[type="button"][disabled] {
	font-weight: normal;
	color: #888;
}

select {
	background: transparent;
	padding: 2px 4px;
}

select:-moz-focusring,
select.t-error:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}
select:invalid { /*empty when required*/
	color: #AAA; /*blank option label*/
}

select option {
	color: #000;
}
select option[value=""] {
	color: #AAA;
}

textarea {
	resize: none;
}

input.fw, /* full width: fill parent */
select.fw,
textarea.fw,
.data-box.fw {
	box-sizing: border-box;
	width: 100%;
}

iframe {
	display: block;
	border: none;
	margin: 0;
}

form {
	background-color: transparent;
	margin: 0;
	padding: 0;
}

.data-box { /* for static data; simulates a read-only input box */
	display: inline-block;
	border: 1px solid var(--border-color);
	padding: 2px 4px;
	color: #000;
}
.data-box:after {
	content: "\A0"; /* prevents collapsing when empty */
}

.bg-form {
	background-color: #F5F5F5;
}
.bg-inset {
	background-color: #F1F3FF; /* light blue */
}
.bg-help,
.bg-warn {
	background-color: #FFFBE8; /* light yellow */
}

.cb > input[type="checkbox"] {
	margin: 0 2px 0 0;
}
.cb > label {
	font-weight: normal;
	color: #000;
}
.cb > input[type="checkbox"],
.cb > label {
	display: inline-block;
	vertical-align: middle;
}

.rb > input[type='radio'] {
	margin: 0 1px 0 0;
	padding: 0;
}
.rb > input[type="radio"],
.rb > label {
	display: inline-block;
	vertical-align: middle;
}

.rg > label:first-child {
	font-weight: normal;
	margin-right: 10px;
}
.rg.inline > input[type="radio"] {
	margin-left: 8px;
	position: relative;
	top: 1px;
}
.rg.inline > input[type="radio"]:first-of-type {
	margin-left: 0;
}

input[type="checkbox"] + label {
	color: #555/*var(--label-color)*/;
}
input[type="checkbox"] + label.title {
	font-weight: bold;
	color: #333;
}
input[type="checkbox"]:checked + label,
input[type="checkbox"]:enabled + label:hover,
input[type="checkbox"]:disabled:checked + label.dark-checked,
input[type="checkbox"] + label.dark {
	color: #000;
}
input[type="checkbox"]:disabled + label {
	color: #AAA/*var(--greyed-text)*/;
}

label > input[type="checkbox"] {
	margin: 0;
	position: relative;
	top: 2px;
}

label {
	color: var(--label-color);
}
label.main {
	display: block;
	float: left;
	font-weight: normal;
	margin-top: 3px;
}
label.stack {
	display: block;
	float: none;
	font-weight: normal;
	margin-bottom: 2px;
}
label.sub {
	display: block;
	clear: both;
	font-size: 10px;
	font-weight: normal;
	color: #999;
}
label.with-colon:after,
.with-colon label:after {
	content: ": ";
}
label.with-colon:lang(fr):after,
.with-colon label:lang(fr):after {
	content: " : ";
}

div.spacer {
	clear: both;
	height: 4px;
}

abbr { 
	border-bottom: none;
	color: #369;
	cursor: help;
}
abbr:hover {
	background: #F2F2FD;
	color: #258;
}

/*----------------------------- Anchor Tag Styles -------------------------------------------*/

a {
	text-decoration: none;
	color: var(--link-color);
}
a:hover {
	color: var(--link-hover-color);
}

a.disabled,
a[disabled='true'] {
	pointer-events: none;
	color: #AAA;
}

a.action {
	font-size: 10px !important;
}
a.action,
a.island,
a.inline,
a.normal, /* deprecated */
.link a {
	text-decoration: none !important;
	font-weight: normal !important;
	/*color: #27C !important;*/
}
a.action:hover,
a.island:hover,
.link a:hover {
	text-shadow: var(--link-hover-shadow);
	/*box-shadow: 0 0 2px 2px #48D;
	background: #48D;
	color: #FFF !important;*/
}
a.inline:hover,
a.normal:hover { /* deprecated */
	text-shadow: var(--link-hover-shadow);
	/*color: #58C !important;*/
}
a.inline,
a.inline:hover {
	display: inline;
}

a.void,
a.void:hover {
	text-decoration: none !important;
	cursor: default;
	color: inherit;
}

a.plain,
a.plain:hover {
	text-decoration: none !important;
}

a.small-btn {
	background: -moz-linear-gradient(top, rgba(0,0,0,0.02), rgba(0,0,0,0.07));
	border: 1px solid;
	border-color: #CCC #BBB #BBB #CCC;
	border-radius: 3px;
	padding: 0px 10px 1px 10px;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	font-size: 10px;
	color: #555;
}
a.small-btn:hover {
	background: -moz-linear-gradient(top, rgba(255,255,255,0.7), rgba(255,255,255,0.0));
	border-color: #AAA #999 #999 #AAA;
	color: #000;
}
a.small-btn.disabled {
	color: #999;
}

/* Links that serve as labels */

a.label,
label > a {
	display: inline-block;
	/*text-decoration: none;
	color: #07C;*/
}
a.label:hover,
label > a:hover {
	text-shadow: var(--link-hover-shadow);
}
a.label.stack {
	padding: 0 10px 2px 0;
}
a.label.disabled,
label > a.disabled {
	color: var(--label-color);
}

/*------------------------------------------------------------------------*/

span.x { /* small 'x' button on popups */
	display: block;
	float: right;
	border: 1px solid #EEE;
	border-radius: 3px;
	background: #FAFAFA;
	color: #888;
	font-size: 17px;
	font-weight: bold;
	text-decoration: none;
	text-align: center;
	line-height: 0.8em;
	width: 16px;
	height: 16px;
}
span.x:before {
	content: "×"; /* not the letter 'x' but the multiplication symbol */
}
span.x:hover {
	border-color: #DDD;
	background: #F5F5F5;
	color: #333;
	cursor: default;
}

span.limit { /* element should specify max-width */
	display: inline-block;
	vertical-align: text-bottom;
	overflow: hidden;
	text-overflow: ellipsis;
}

.link {
	color: #AAA !important;
	font-weight: normal !important;
	white-space: nowrap;
}

.vbar { 
	color: #AAA; 
	padding: 0 0.5em;
}

h1, h2, h3, p {
	margin: 1em 0 0 0;
}
h1:first-child, h2:first-child, h3:first-child, p:first-child {
	margin-top: 0;
}

h1 {
	border-bottom: 1px solid var(--accent-lite);
	font-size: 18px;
	color: var(--accent-lite);
}
h2 {
	font-size: 13px;
	color: #444;
}
h2.subsection {
	border-bottom: 1px solid #DDD;
	background: #F0F0F0;
	padding-bottom: 1px;
	margin: 0 0 7px 0;
	font-size: 13px;
	color: var(--accent-dark);
}
h3 {
	font-size: 12px;
	color: #555;
}
h3.subhead {
	border-bottom: 1px solid #DDD;
	margin-bottom: 4px;
	padding: 2px 0;
	font-size: 14px;
	font-weight: normal;
	color: rgba(0,0,0,0.4);
}

img.lookup, 
img.t-calendar-trigger {
	float: left; 
	margin: 2px 0 0 -19px;
	padding: 0;
	cursor: default;
}

fieldset {
	border: none;
	margin: 0;
	padding: 0;
}

/* New date field container/wrapper with dropdown arrow */
div.calendar {
	display: inline-block;
	position: relative;
}
div.calendar:after {
	font-family: FlatIcon;
	content: "\e007"; /* flaticon-arrow486 */
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 1px;
	margin: 0;
	pointer-events: none;
	padding: 5px;
	height: calc(100% - 2px);
	box-sizing: border-box;
	line-height: 11px;
	font-size: 9px;
	color: #888;
}
div.calendar:hover:after {
	background: #DDD;
	color: #555;
}

div.calendar img.lookup,
div.calendar img.t-calendar-trigger {
	display: block;
	position: absolute;
	top: 50%;
	transform: translateY(-51%);
	right: 2px;
	margin: 0;
	opacity: 0;
}

.two-col {
	-moz-column-count: 2;
	 column-count: 2;
	-moz-column-gap: 10px;
	 column-gap: 10px;
}

.flex { display: flex; }
.flex.row { flex-direction: row; }
.flex.col { flex-direction: column; }
.flex.center { justify-content: center; }
.flex.evenly { justify-content: space-evenly; }
.flex.align-center { align-items: center; }
.flex.end { justify-content: flex-end; }

.flex-0-0 { flex: 0 0 0; }
.flex-0-a { flex: 0 0 auto; }
.flex-1-0 { flex: 1 1 0; }
.flex-1-a { flex: 1 1 auto; }

.tabs-head {
	position: absolute;
	height: 21px;
	overflow: hidden;
}
.tabs-head label {
	background: -moz-linear-gradient(top, #F0F0F0, #D8D8D8);
	border: 1px solid #D5D5D5;
	border-top-color: #DDDDDD;
	border-bottom: none;
	border-radius: 5px 5px 0 0;
	display: inline-block;
	padding: 2px 15px 3px;
	font-weight: bold;
	color: #777;
}
.tabs-head label:hover {
/*	background: -moz-linear-gradient(top, #FCF0D0, #F2E0A0); */
	background: -moz-linear-gradient(top, #F7F7F7, #E3E3E3);
	color: #000;
}
.tabs-head label.selected {
	background: #F9F9F9;
	color: #333;
}
.tabs-body {
	background: -moz-linear-gradient(top, #F9F9F9, #F0F0F0);
	border: 1px solid;
	border-color: #DDDDDD #D4D4D4 #CCCCCC #D4D4D4;
	border-radius: 0 6px 6px 6px;
	margin-top: 20px;
	padding: 15px;
	overflow: hidden;
}
.tab-pane {
	overflow-x: hidden;
	overflow-y: auto;
}

/*---------------------------------- HashTabs styles ------------------------------------------------*/

header.tab-header {
	border-bottom: 1px solid #606060;
	margin-bottom: 10px;
	font-weight: bold;
}

header.tab-header a {
	display: inline-block;
	background: -moz-linear-gradient(top, #DDD, #EEE);
	border-radius: 4px 4px 0 0;
	padding: 7px 20px 6px;
	margin: 0;
	font-size: 12px;
	text-decoration: none;
	color: #555;
	cursor: pointer;
}
header.tab-header a:hover {
	background: -moz-linear-gradient(top, #DDD, #CCC);
	color: #333;
}
header.tab-header a.selected {
	background: -moz-linear-gradient(top, #808080, #606060);
	color: #FFF;
	cursor: default;
}

section.tab-body { display: none; }
section.tab-body:target { display: inherit; }

/*---------------------------------------------------------------------------------------------------*/

.card {
	background: -moz-linear-gradient(top, rgba(0,0,0,0.02), rgba(0,0,0,0.06));
	border: 1px solid;
	border-color: #DDD #CCC #BBB #CCC;
	border-radius: 5px;
	padding: 8px;
}
.card.inactive {
	background: -moz-linear-gradient(top, rgba(0,0,0,0.01), rgba(0,0,0,0.03));
	opacity: 0.8;
}

#page-header {
	position: relative;
	height: 55px;
	text-decoration: none;
	cursor: pointer;
}
#page-header header {
    position: relative;
	background: url(../images/world-55.png) center center no-repeat;
	float: left;
	width: 155px;
	height: 55px;
	line-height: 55px;
	text-align: center;
	margin: 0 0 0 10px;
	padding: 0 5px;
}
#page-header h1 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
	margin: 0;
	padding: 0;
	border: none;
	font-size: 14px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-shadow: 0 0 5px #000;
	color: #FFF;
    min-width: 155px;
    text-align: center;
    white-space: nowrap;
}
#page-header img {
	display: block;
	float: left;
}
#page-header img.tile {
	margin-left: 2px;
}
#page-header img#host-logo {
	background: -moz-linear-gradient(left, rgba(255,255,255,0.0), rgba(255,255,255,1.0) 100px);
	padding-left: 105px;
	position: absolute;
	right: 0;
	top: 0;
}

#page-body {
	background: #FFF;
	min-height: 370px;
/*	overflow: hidden; */
}

#page-footer {
	border-top: 8px solid #DDD;
	margin-top: 8px;
	padding: 4px 1px 0 1px;
	height: 22px;
	font-size: 11px;
	color: #888;
}

.top-rule {
	border-top: 1px solid #CCC;
}

.entity-id {
	float: right;
	font-size: 11px;
	color: #999;
}
.entity-id.lite {
	font-weight: normal;
	color: #AAA;
	margin-top: 8px;
}
/* The new cleaner-looking style without the gray gradient bar */
h1 > .entity-id {
	float: right;
	margin-top: 7px;
	font-weight: normal;
	color: #BBB;
}

.section-head {
	background: -moz-linear-gradient(top, #F5F5F5, #E2E2E2);
	border-bottom: none !important;
	padding: 0 10px 0 10px !important;
	margin: 0;
	height: 30px;
}
.section-subhead,
.section-subhead th {
	background: #ECECEC !important;
}
.section-head h1 {
	border: none;
	float: left;
	font-size: 15px;
	color: var(--accent-dark);
	line-height: 30px;
	margin: 0 !important;
}
.section-head h2 {
	float: left;
	font-size: 14px;
	color: var(--accent-dark);
	line-height: 28px;
	margin: 0;
}
.section-head > div { 
	float: right; 
	padding-top: 8px; 
	line-height: 1.3em; 
}

.section-body {
	background: #F5F5F5;
	padding: 15px 20px;
}

.sidebar-layout {
	display: flex;
	flex-direction: row;
	min-height: 370px;
	height: auto;
}
.sidebar-layout .sidebar {
	padding: 16px 12px 21px 12px;
	background: #F5F3EC;
	box-sizing: border-box;
	width: 252px;
	min-width: 252px;
	height: auto;
	flex: 0;
}
.sidebar-layout .sidebar h2 {
	margin-top: 8px;
}
.sidebar-layout .sidebar h2:first-child {
	margin-top: 0;
}
.sidebar-layout .sidebar b {
	font-weight: normal;
	color: #000;
}
.sidebar-layout .sidebar p {
	margin: 8px 0 0 0;
	color: #777;
}
.sidebar-layout .sidebar p.action-item {
	padding-left: 12px;
	position: relative;
}
.sidebar-layout .sidebar p.action-item:before {
	display: block;
	position: absolute;
	top: 2px; left: 0;
	font-family: FlatIcon;
	content: var(--flaticon-play14);
	color: var(--accent-dark);
	font-size: 9px;
}
.sidebar-layout .content {
	padding: 0 0 0 10px;
	height: auto;
	flex: 1;
}
.sidebar-layout .content h1 {
	margin: 0 0 15px 0;
}
.sidebar-layout .content form {
	background: transparent;
}

.shadow-box {
	box-shadow: 1px 4px 14px 4px rgba(0,0,0,0.4);
	background: #FFF;
}

.modal-dialog {
	box-shadow: 1px 4px 14px 4px rgba(0,0,0,0.4);
	background: #F5F5F5;
	position: absolute;
	left: 0; top: 0;
	z-index: 1000;
}
.modal-dialog header {
	background:-moz-linear-gradient(top, #F5F5F5, #EAEAEA);
	border-bottom: 1px solid #E2E2E2/*var(--accent-lite)*/;
	position: relative;
	line-height: 21px;
	-moz-user-select: none;
}
.modal-dialog header h1 {
	pointer-events: none;
	border: none;
	margin: 0 !important;
	padding: 5px 12px;
	font-size: 13px;
	color: var(--accent-lite);
}
.modal-dialog header span.x {
	background: transparent;
	border-color: transparent;
	position: absolute;
	right: 6px;
	top: 7px;
}
.modal-dialog header span.x:hover {
	background: rgba(255,255,255,0.4);
	border-color: #BBB;
}
.modal-dialog .body {
	background: #FFF;
	padding: 18px 20px;
}
.modal-dialog footer {
	margin-top: 15px;
	text-align: right;
	clear: both;
}
.modal-dialog footer [type="button"],
.modal-dialog footer [type="submit"] {
	margin-left: 5px;
	padding-bottom: 1px;
	width: 100px;
}
.modal-dialog iframe {
	pointer-events: auto;
}
.modal-dialog.moving iframe {
	pointer-events: none;
}

.fg-box {
	border-radius: 6px;
	background: -moz-linear-gradient(top, #FAFAFA, #F0F0F0);
	border: 1px solid;
	border-color: #DDDDDD #D4D4D4 #CCCCCC #D4D4D4;
	padding: 20px;
}
.fg-box h2,
.fg-box-tight h2 {
	background: -moz-linear-gradient(top, rgba(0,0,0,0.03), rgba(0,0,0,0.09));
	padding: 2px 10px 3px;
	margin: -10px -10px 7px -10px;
	font-size: 13px; 
	color: var(--accent-dark); 
}

.section-body .fg-box,
.fg-box-tight {
	border-radius: 5px;
	background: -moz-linear-gradient(top, #FAFAFA 22px, #F0F0F0);
	border: 1px solid;
	border-color: #E5E5E5 #E0E0E0 #DBDBDB #E0E0E0;
	padding: 10px;
}

.left {
	display: block;
	float: left;
}

.clear {
	clear: both;
	height: 0;
}

.top-side-borders {
	border: 1px solid #BBB;
	border-bottom: none;
}

/* Standalone caption above a list table with fixed header. Usually used with list-container and list. */
.list-caption {
	position: relative;
	margin-top: 10px;
	padding: 0 /*10px*/;
	/*border: 1px solid #BBB;*/
	/*border-bottom: none;*/
	/*background:-moz-linear-gradient(top, #F5F5F5, #E5E5E5);*/
	border-bottom: 1px solid var(--accent-lite);
	height: 27px;
	line-height: 26px;
}
.list-caption h2 {
	color: var(--accent-dark);
	font-size: 13px;
}
.list-caption .count {
	font-weight: normal;
	padding-left:4px;
}
.list-caption + .list-container {
	border: 1px solid var(--border-color);
	border-top: none;
}

.list-container { /* height should be row height * rows - 1px (no header border) */
	border: 1px solid var(--border-color);
	overflow-x: hidden;
	overflow-y: auto;
	position: relative;
}
.list-container table.list {
	border: none;
	border-bottom: 1px solid var(--row-border-color);
}
.list-container.overflow table.list {
	border-bottom: none;
}
.list-container table.list th,
.list-container table.list td { /* row height is 24px + 1px (top border) = 25px */
	border: none;
	padding: 0 10px;
	height: 24px;
}
.list-container table.list th {
	background: -moz-linear-gradient(top, #F5F5F5, #EEE);
	/*border-bottom: 1px solid var(--border-color);*/
	color: #555 /*var(--label-color)*/;
	white-space: nowrap;
}
.list-container table.list td {
	border-top: 1px solid var(--row-border-color);
	color: #000;
}
.list-container table.list td.empty {  /* message displayed when list is empty */
	padding: 30px;
	color: #BBB;
}
.list-container > .empty-message {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #BBB;
}

.list {
/*	border-left: 1px solid #F5F5F5;
	border-right: 1px solid #F5F5F5; */
	border-bottom: 10px solid #F5F5F5;
}
.list th, .list td {
	border-bottom: 1px solid #BBB;
	padding: 6px 10px;
}
.list th {
	background: #F5F5F5;
	text-align: left;
	font-weight: normal;
	color: var(--label-color);
}
.list .multi-line th,
.list .multi-line td {
	padding: 5px 10px !important;
	height: auto !important;
	white-space: normal !important;
	line-height: 14px;
}
.list th.action,
.list td.action {
	text-align: right;
	padding-top: 0;
	padding-bottom: 0;
	padding-right: 7px;
}
.list th.action .acticon,
.list td.action .acticon {
	vertical-align: middle;
}
.list .empty {
	text-align: center;
	color: #999;
}

.list-box {
	border-bottom: none;
	width: 100%;
}
.list-box th,
.list-box td {
	border-bottom: 1px solid #CCC;
}
.list-box th {
	background: -moz-linear-gradient(top, #F5F5F5, #E5E5E5);
	padding: 3px 5px;
	text-align: left;
	font-weight: normal;
	color: var(--label-color);
}
.list-box td {
	padding: 2px 5px;
	color: #000;
}
.list-box td.empty {
	text-align: center;
	border: none;
	color: #999;
	height: 5em;
}

.list-box-container {
	border: 1px solid #CCC;
/*	overflow: hidden; */
}

.list-box-pager {
	background: #F5F5F5;
	padding: 4px 5px 4px 9px;
	border: 1px solid #CCC;
	border-top: none;
}
.list-box-pager .listpager {
	float: right;
}

.list-zone {
	border-bottom: 10px solid #F5F5F5;
}

.vscroll {
	overflow-x: hidden !important;
	overflow-y: auto !important;
}

tr.excluded td {
	color: #AAA;
}

tr.fixed-header th {
	position: sticky;
	top: 0;
}

th.sortable {
	cursor: default;
}
th.sortable:hover {
	background: #E5E5E5 !important;
	color: #000 !important;
}
th.sortable.active[data-sort-dir='asc']:after {
	content: ' ⯅';
	font-size: 10px;
}
th.sortable.active[data-sort-dir='desc']:after {
	content: ' ⯆';
	font-size: 10px;
}

.grid-layout {
	display: grid;
	justify-items: start;
	column-gap: 10px;
	row-gap: 6px;
}
.grid-layout > label:not(.align-center),
.grid-layout > a.label:not(align-center) {
	padding-top: 3px;
}
.grid-layout > .align-center {
	align-self: center;
}
.grid-layout > .justify-end {
	justify-self: end;
}
.grid-layout > .justify-stretch {
	justify-self: stretch;
}
.grid-layout .data-box {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

table.form-2col {
	border-collapse: collapse;
	width: 100%;
	--v-padding: 3px;
}
table.form-2col th { /* label cell */
	padding: calc(var(--v-padding) + 3px) 10px var(--v-padding) 0;
	text-align: left;
	vertical-align: top;
	width: 1px; /* expand as required */
	white-space: nowrap;
	color: var(--label-color);
	font-weight: normal;
}
table.form-2col th.middle {
	vertical-align: middle;
	padding-top: var(--v-padding);
}
table.form-2col th.wrap {
	white-space: normal;
}
table.form-2col th > label {
	display: inline-block;
	white-space: inherit;
}
table.form-2col td {
	padding: var(--v-padding) 0;
	color: #000;
}
table.form-2col td > .cb {
	padding-top: 1px;
}
table.form-2col tr.top-gap th:before,
table.form-2col tr.top-gap td:before {
	content: "";
	display: block;
	height: 8px;
}

.info-section { 
	border-collapse: collapse;
	width: 100%; 
}
.info-section th, 
.info-section td { 
	border-bottom: 1px dotted var(--border-color);
	padding: 3px 3px 3px 10px; 
}
.info-section th { 
	/*background: #F5F5F5;*/
	text-align: left;
	font-weight: normal;
	color: var(--label-color);
}
.info-section td { 
	/*border-right: 1px solid #F5F5F5;*/
	background: #FFF; 
	color: #000; 
}

.help-panel {
	color: #6C6C6C;
}
.help-panel em {
	font-style: normal;
	color: #000;
}
.help-panel {
	border: 1px solid #BBB;
	background: #FFFBE8;
	padding: 8px 10px;
}

.clickable {
	cursor: pointer;
}
.rollover {
	cursor: default;
}
.clickable:hover,
.rollover:hover,
.highlight {
	background: var(--select-lite) !important;
}

/* Usage: <i class="flaticon-angle1 expand-collapse"/> */
.expand-collapse {
	display: inline-block;
	border-radius: 2px;
	padding: 0 3px;
	font-size: 8px;
	color: #777;
	transition: transform 0.2s;
}
.expand-collapse:hover {
	background: #DDD;
	color: #000;
}
.expanded .expand-collapse {
	transform: rotate(180deg);
}

.active, 
.active td {
	color: #000;
}
.inactive,
.inactive td {
	color: #999 !important;
}

.help,
.help-normal {
	color: #999;
}

.parenthesized:before { content: "("; }
.parenthesized:after  { content: ")"; }
.parenthesized:empty:before { content: ""; }
.parenthesized:empty:after  { content: ""; }

.n-a:empty { color: #AAA; }
:lang(en) .n-a:empty:after { content: "N/A"; }
:lang(fr) .n-a:empty:after { content: "S/O"; }
:lang(es) .n-a:empty:after { content: "N/D"; }

.full { width: 100%; }

.mt6  { margin-top: 6px; }
.mt8  { margin-top: 8px; }
.mt10 { margin-top: 10px; }
.mt12 { margin-top: 12px; }

.mb6  { margin-bottom: 6px; }
.mb8  { margin-bottom: 8px; }
.mb10 { margin-bottom: 10px; }
.mb12 { margin-bottom: 12px; }

.fade  { opacity: 0.45; }
.data  { color: #000; }
.lite  { color: #999; }
.error { color: #E00 !important; }
.alert { color: #D30; }
.bold  { font-weight: bold; }
.thin  { font-weight: normal; }

.small { font-size: 11px; }
.tiny  { font-size: 10px; }

.caps  { text-transform: uppercase; }
.lower { text-transform: lowercase; }

.center { text-align: center !important; }
.align-right { text-align: right !important; }

.tight { width: 1px; }
.nowrap { white-space: nowrap; }
.inline { display: inline-block; }
.hidden { display: none !important; }
.invisible { visibility: hidden; }

/*---------------------------------- Menus ---------------------------------------*/

#menu-bar {
	background: -moz-linear-gradient(top, #939393, #393939);
	margin: 8px 0 9px 0;
	padding: 0 5px;
	height: 30px;
}
#menu-bar a {
	text-decoration: none;
}

#app-menu > li {
	border-right: 1px dotted #999;
}
#app-menu a.submenu {
	padding: 0;
}

.dropdown-menu, .dropdown-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dropdown-menu a {
	color: #FFF;
}
.dropdown-menu > li {
	list-style-type: none;
	display: block;
	float: left;
	margin-top: 5px;
	padding: 0 12px 0 15px;
	height: 20px;
	font-weight: normal;
	line-height: 1.6em;
}
.dropdown-menu > li:hover {
	background: #000;
}
.dropdown-menu > li > a:after {
	display: inline-block;
	content: url(../images/dd-arrow.svg);
	margin-left: 5px;
	position: relative;
	top: -1px;
}

.menu-bar-icon {
	content: url(../images/google_icons_menu_FILL0_wght400_GRAD0_opsz20.svg);
	filter: invert(1);
}

.dropdown-menu > li > a:hover {
	cursor: default;
}
.dropdown-menu ul {
	box-shadow: 2px 4px 10px rgba(0,0,0,0.8);
	visibility: hidden; 
	background: #555; 
	position: absolute;
	margin-top: 6px;
	z-index: 900;
}
.dropdown-menu ul li {
	list-style-type: none; 
}
.dropdown-menu ul a {
	border-top: 1px solid #777;
	padding: 6px 15px;
	display: block;
}
.dropdown-menu ul li:first-child a {
	border-top: none;
}
.dropdown-menu ul a:hover {
	background: #000; 
	color: #FD8;
}
.dropdown-menu ul a.void {
	color: #BBB;
	pointer-events: none;
}
.dropdown-menu ul a.void:hover {
	background: inherit;
	color: #BBB;
}
.dropdown-menu ul a.new-group {
	border-top: 1px solid #DDD;
}

#user-menu {
	float: right;
	max-width: 175px;
	overflow: hidden;
}
#user-menu a {
	font-weight: normal;
	white-space: nowrap;
}
#user-menu ul a { padding-left: 23px; }
#user-menu ul a.opt { position: relative; }
#user-menu ul a.opt.on { pointer-events: none; }
#user-menu ul a.opt.on:after,
#user-menu ul a.opt.off:hover:after {
	position: absolute;
	top: 6px; left: 6px;
	font-family: FlatIcon;
	content: var(--flaticon-check52);
}
#user-menu ul a.opt.off:hover:after { color: #876; }

/*---------- ContextMenu styles ----------*/

.context-menu {
	position: absolute;
	box-shadow: 2px 2px 7px rgba(0,0,0,0.5);
	border: 1px solid #AAA;
	background: #FBFBFB;
	padding: 6px 0;
}
.context-menu a {
	display: block;
	padding: 6px 15px;
	text-decoration: none;
	color: #333;
}
.context-menu a:hover {
	background: #DDD;
	color: #000;
}

/*---------------------------------- Errors --------------------------------------*/

.error-messages {
	border: 1px solid #EFDFDC;
	border-radius: 4px;
	background: #FDEDE7;
	color: #B00;
	margin: 10px 0 0 0;
	padding: 7px 15px;
}
.error-messages ul {
	margin: 0;
	padding: 0;
}
.error-messages li {
	list-style: none;
	padding: 0;
	margin: 0;
}
.error-messages li a {
	text-decoration: underline !important;
	color: inherit;
}

img.t-error-icon {
	display: none;
}

label.t-error {
	color: inherit;
}

input.t-error, textarea.t-error, select.t-error {
	border: 1px solid #D30;
	color: #000;
	font-style: normal;
}
input.t-error:focus, textarea.t-error:focus, select.t-error:focus {
	border-color: #D30;
}
input.t-error::-moz-placeholder {
	color: #777 !important;
}

/*------------------------------- Autocomplete -----------------------------------*/

div.t-autocomplete-menu {
	box-shadow: 2px 3px 6px 1px rgba(0,0,0,0.5);
	border: 1px solid #999;
	margin: 0;
	padding: 0;
	overflow: auto;
	z-index: 9999;
}

div.t-autocomplete-menu ul {
	border: none;
	background: #FFF;
	margin: 0;
	padding: 0;
}

div.t-autocomplete-menu li {
	border: none;
	color: black;
	list-style-type: none;
	margin: 0px;
	padding: 0px 2px 1px 3px;
	cursor: default;
	white-space: nowrap;
	overflow: hidden;
}

div.t-autocomplete-menu li.selected {
	background: Highlight;
	color: HighlightText;
	font-weight: normal;
}

div.t-autocomplete-menu li span.informal {
	display: none !important;
}

img.t-autoloader-icon {
	display: none !important;
}

/*-------------------------------- Exceptions ------------------------------------*/

.t-exception-report, .t-env-data {
	font-family: "Segoe UI", Arial, sans-serif !important;
	color: black;
}

.t-exception-message {
	font-style: normal !important;
	font-size: 12px !important;
	font-weight: normal;
	color: #D00 !important;
	border: thin dotted silver;
	margin: 5px 0px;
	padding: 3px;
}

span.t-exception-class-name {
	display: block;
	margin-top: 15px;
	font-size: 12px;
	background-color: #EEE;
	color: #D00;
	padding: 2px 3px;
	font-weight: bold;
}

span.t-exception-stack-controls {
	display: block;
	float: right;
}

ul.t-stack-trace li {
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 12px;
	margin-left: -25px;
	list-style: square;
	color: #777;
}

li.t-usercode-frame {
	font-weight: normal;
	color: #000 !important;
}

li.t-omitted-frame {
	display: none;
	color: gray;
	list-style: square;
}

h1.t-exception-report {
	background: url(../images/exception.gif) no-repeat;
	font-family: "Segoe UI", Arial, sans-serif;
	font-size: 20px;
	color: red;
	padding-left: 50px;
	margin: 0;
	line-height: 38px;
	height: 38px;
}

.t-location-outer td {
	font-size: 11px !important;
}

.t-location-line {
	background-color: #EEE !important;
	color: #777 !important;
}

.t-location-content {
	font-family: Consolas, Courier New;
	color: #000;
}

.t-location-current {
	background-color: #FFF2E6 !important;
}

.t-exception-report dt, .t-env-data dt {
	background-color: #FFE !important;
	color: #900 !important;
}

.t-env-data h2 {
	background: #EEE;
	padding: 1px 2px !important;
	font-size: 13px;
	color: #000;
}

.t-env-data-section {
	background-color: #FFD !important;
	font-size: 12px !important;
	color: #800 !important;
	padding: 1px 2px !important;
}

.t-data-grid td.selectionList {
	max-width: 500px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

body.branded .unbranded {
	display: none !important;
}
body.unbranded .branded {
	display: none !important;
}
body.unbranded #page-header h1 {
	color: #FDA;
	text-shadow: 0 0 5px #910;
	position: absolute;
	transform: translate(-50%,-40%);
	top: 50%;
	left: 126px;
}
div.error-messages-header {
	margin-bottom: 4px;
}