/* --- Import core definitions -----------------------------------------------*/
@import 'variables.css';


/* --- Baseline styling ------------------------------------------------------*/

body, table {
	font-size: 12px;
}

body {
	background: #3C3C3B;
	margin: 0;

	background-image: url(../images/organization-logo-s.png);
	background-position: bottom right;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

a {
	text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	margin-bottom: .6em;
	color: var(--primary-color);
}

h1 { font-size: 1.5em; } /* 2em */
h2 { font-size: 1.17em; } /* 1.5em */
h3 { font-size: 1em; } /* 1.17em */
h4 { font-size: .83em; } /* 1em */
h5 { font-size: .67em; } /* .83em */
h6 { font-size: .5em; } /* .67em */

* {
	box-sizing: border-box;
}

fieldset {
	border: 1px var(--primary-color-light) solid;
	border-radius: 4px;
	background-color: #222;
	padding: 4px;
	margin: 5px;
}

fieldset legend {
	color: var(--primary-color-light);
	font-weight: bold;
}

input:disabled {
	background-color: #ccc;
}

.page-content {
	overflow: auto;
	margin: .2em 2em;
	padding: .2em .8em;
	margin-bottom: 32px;
}

#menu-wrapper {
	background-color: #231f20;
}

.headerbar {
	overflow: auto;
	background-color: #000;
	padding: 4px;
	border-bottom: 1px var(--primary-color) solid;
}

.headerbar h1 {
	float: right;
	margin-bottom: 0;
}

.headerbar h2 {
	float: left;
	margin-bottom: 0;
	font-size: 1.5em;
}

.page-action-bar {
	margin-bottom: 4px;
}

.tpl-footer-pane {
	z-index: 4;
	position: fixed;
	height: 60px;
	left: 0;
	bottom: 0;
	right: 0;
	background-color: var(--primary-color-light);
	border-top: 1px var(--primary-color-dark) solid;
	padding: .2em;
	opacity: .8;
}


@media only screen and (min-width: 800px)
{
	/* Footer */
	.tpl-footer-pane {
		display: none;
	}
}


@media only screen and (max-width: 800px)
{
	/* Content */
	.page-content {
		margin-bottom: 64px;
	}

	/* Session time position */
	#core-session-timeout-display {
		z-index: 6;
		left: auto;
		right: 0;

		border-top-left-radius: 8px;
		border-top-right-radius: initial;
		border-left: 1px #000 solid;
		border-right: initial;
	}
}

/* --- jQuery UI overrides ---------------------------------------------------*/

.ui-widget-overlay {
	opacity: .85;
	filter: Alpha(Opacity=85);
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
}

.ui-dialog .ui-dialog-buttonpane {
	text-align: right;
}

.ui-tabs-panel {
	overflow: auto;
}

.ui-timepicker-table td a {
	width: initial;
}

span.ui-state-error-text.state-info {
	filter: hue-rotate(70deg) saturate(10) brightness(3);
}
span.ui-state-error-text.state-warn {
	filter: hue-rotate(60deg) saturate(2) brightness(2);
}

.ui-tabs .ui-tabs-panel {
	padding: 1em 1em; /* default: 1em 1.4em */
}

/* --- jCLib overrides -------------------------------------------------------*/

.jc-grid-control tr.jcgrid-inactive td {
	color: #666;
	background-color: #fee;
}

.jc-grid-control a {
	color: #000;
}

.jc-button.ui-state-default,
.ui-dialog-buttonset .ui-button {
	border: 1px #555 solid;
}

/* --- Core overrides --------------------------------------------------------*/

.core-login-form {
	display: table;
	position: relative;
	border: 1px var(--primary-color) solid;
	background-color: #ddd;
	border-radius: 10px;
	padding: 10px;
	margin: auto;
}

.core-login-form input[type="text"],
.core-login-form input[type="password"] {
	width: 300px;
	height: 30px;
	font-size: 1.5em;
	margin-bottom: 5px;

	border: 1px var(--primary-color) solid;
}

.core-login-form input[type="submit"],
.core-login-form input[type="button"] {
	width: 100px;
	height: 30px;
	font-size: 1.5em;

	color: var(--primary-color);
	background-color: #000;
	border: 1px #000 solid;
	border-radius: 4px;
}

.dev-tool-container a {
	color: var(--primary-color);
}
.dev-tool-container a:hover {
	color: #fff;
}

.login-password-rules-container {
	color: #000;
}

.core-login-form .error {
	font-weight: bold;
	color: #f00;
}

/* --- Custom styling --------------------------------------------------------*/
a,
.listing a,
.jc-listing a,
.jc-fieldlist a {
	color: var(--primary-color-dark);
}
.jc-fieldlist a:hover {
	color: var(--primary-color);
}

.grid-list a {
	color: #333;
}

a.sublink,
.grid-list a.sublink {
	color: var(--primary-color-dark);
}


/*--- Widget override -----------------------------------------------------*/

#overlay-widget-group-right {
	bottom: 86px;
}

@media only screen and (max-width: 800px)
{
	#overlay-widget-group-right {
		bottom: 86px;
	}
}

/*--- Legacy report override -------------------------------------------------*/

.filtersDisplay {
	background-color: black;
	border: 1px solid var(--primary-color-light);
	color: var(--primary-color-light);
}