/* --------- STANDARD TAG STYLES ----------------------*/
/* =================================================== */

html, body, input, textarea {
	margin: 0;
	font: 1em "Prompt", sans-serif;
	color: #1c1d1f;
	background-color: #f0f3f4	;
}

h1, h2, h3 {
	color: #033161; /* headline color */
}

input, p, textarea, blockquote, code, h4, h5, h6 {
	color: #1c1d1f; /* text color */
}

a {
	color: #033161; /*background may change */
}

a:hover {
	text-decoration: none;
}

a:visited, a:hover {
	color: #0063a0; /*background may change */
}

a.table-header {
	color: #eee;
}

a.table-header:hover, a.table-header:visited {
	color: #eee;
}

/* --------- TABLE STYLES -----------------------------*/

table {
	border-collapse: collapse;
	border-spacing: 0px;
	-webkit-border-horizontal-spacing: 0px;
	-webkit-border-vertical-spacing: 0px;
	width: 100%;
}

th {
	padding-top: 10px;
	padding-bottom: 10px;
	text-align: left;
	color: #eee;
	background-color: #033161 !important;
}

th, td {
	border: 1px solid  #c6e2f7;
	padding: 6px;
}

tr:nth-child(even) {
	background-color: #f6f8f8;
}

tr:hover {
	background-color: #fff;
}

.listitem:hover {
	cursor: pointer;
	background-color: #f6f8f8;
}

.group-heading {
	cursor: pointer;
	text-align:center;
	color: #eee;
	background-color: #033161 !important;
}




/* --------- PAGE AND MENU STYLES ---------------------*/
/* =================================================== */

.body {
	max-width: 1280px;
	margin: auto;
}

.menubar {
	background-color: #fff !important
}

.menuitem {
	color: #033161 !important;
	background-color: #fff !important;
	text-decoration: none !important;
	cursor: pointer;
}

.menuitem:hover, .menuitem:focus {
	color: #fff !important;
	background-color: #3a3b3f !important
}

/* for Google graphs of statistics */
.show_hover:hover {
	cursor: pointer;
}

/* --------- EFACLOUD LOG DISPLAY STYLES ---------- */
/* For logfile display selection */
.hiddendiv {
	display: none;
}

.apiActivity:focus ~ #apiActivity {
	display: block;
}

.serverWarnings:focus ~ #serverWarnings {
	display: block;
}

.serverErrors:focus ~ #serverErrors {
	display: block;
}

/* --------- FORM ELEMENT STYLES --------------------- */
/* =================================================== */

/* --------- FORM BUTTON STYLES -----------------------*/

.formbutton {
	color: #f6efe7 !important;
	background-color: #033161 !important;
	text-decoration: none !important;
	cursor: pointer;
	border: 1px solid transparent;
	border-radius: 0px;
	text-transform: uppercase;
	font-size: 0.9em;
	padding: 8px 6px 8px 6px;
	line-height: 120%;
	box-shadow: 0 3px 2px 0 rgba(0, 0, 0, 0.2);
}


.formbutton:hover, .formbutton:focus {
	color: #f6efe7	 !important;
	background-color: #3a3b3f !important
}

.forminput, .formselector {
	border: 2px solid transparent;
	border-bottom: 2px solid #2d7ebe;
	border-radius: 2px;
	color: #1c1d1f;
	background-color: #ffff !important;
	font-size: 1.0em;
	line-height: 1.5em;
	padding: 2px 6px 2px 6px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.forminput:hover, .forminput:focus, .formselector:hover, .formselector:focus {
	border: 2px solid #2d7ebe;
	color: #1c1d1f;
	background-color: #cce0f1 !important;
}

.formlink {
	cursor: pointer;
	border: 2px solid transparent;
	border-radius: 2px;
	color: #033161;
	font-size: 1.0em;
	padding: 2px 6px 2px 6px;
}

.formlink:hover {
	color: #0063a0;
}

.helptext {
	font-size: 90%
}

.display-only {
	border:1px solid transparent;
	background-color:transparent;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.display-bold {
	font-weight:bold;
	border:1px solid transparent;
	background-color:transparent;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.formtab {
	border: 2px solid transparent;
	border-bottom: 2px solid #a3b8cc;
	border-radius: 2px;
	color: #1c1d1f;
	font-size: 1.0em;
	line-height: 1.5em;
	padding: 2px 6px 2px 6px;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;
}

.formtab:hover, .formbutton:focus {
	color: #f6efe7	 !important;
	background-color: #3a3b3f !important;
	cursor: pointer
}

.formtab-active {
	border-bottom: 2px solid #033161;
}

/* --------- CHECKBOX AND RADIO BUTTON STYLES ---------*/

/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_custom_checkbox */
/* The container */
.cb-container {
	display: block;
	position: relative;
	padding-left: 25px;
	padding-right: 3px;
	margin-bottom: 6px;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* Hide the browser's default checkbox */
.cb-container input {
	position: absolute;
	opacity: 0;
	cursor: pointer;
	height: 0;
	width: 0;
}

/* Create a custom checkbox */
.cb-checkmark {
	position: absolute;
	top: 0;
	left: 0;
	height: 20px;
	width: 20px;
	background-color: #ffff;
	border: 1px solid #2d7ebe;
}

/* Create a custom radio */
.cb-radio {
	position: absolute;
	top: 4px;
	left: 2px;
	height: 16px;
	width: 16px;
	border-radius: 50%;
	background-color: #ffff;
	border: 1px solid #2d7ebe;
}

/* On mouse-over, add a grey background color */
.cb-container:hover input ~ .cb-checkmark, .cb-container:hover input 
	 ~ .cb-radio {
	background-color: #cce0f1;
	border: 2px solid #2d7ebe;
}

/* When the checkbox|radio) is checked, add a accent color background */
.cb-container input:checked ~ .cb-checkmark, .cb-container input:checked 
	~ .cb-radio {
	background-color: #033161;
}

/* Create the checkmark|radio/indicator (hidden when not checked) */
.cb-checkmark:after, .cb-radio:after {
	content: "";
	position: absolute;
	display: none;
}

/* Show the checkmark when checked */
.cb-container input:checked ~ .cb-checkmark:after,
	.cb-container input:checked ~ .cb-radio:after {
	display: block;
}

/* Style the checkmark/indicator */
.cb-container .cb-checkmark:after {
	left: 7px;
	top: 5px;
	width: 4px;
	height: 6px;
	border: solid white;
	border-width: 0 2px 2px 0;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* Style the radio/indicator */
.cb-container .cb-radio:after {
	top: 5px;
	left: 5px;
	width: 4px;
	height: 4px;
	border-radius: 50%;
}

/* --------- SELECT DROPDOWN STYLES -------------------*/

/* https://blog.kulturbanause.de/2015/03/formular-styling-mit-css-select-listen-radio-buttons-und-checkboxen-individuell-gestalten/ */
/* remove standard-styles */
select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url(select-arrow.png);
	/* URL relative to this style sheet location */
	background-position: right;
	background-repeat: no-repeat;
}

option {
	background-color: #ffff
}

/* --------- JAVASCRIPT APPLICATION STYLES ------------*/
/* =================================================== */


/* --------- MODAL DIALOG STYLES ----------------------*/

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	background-color: rgb(0, 0, 0); /* Fallback color */
	background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
	max-width: 960px; /* limit for large window sizes */
	margin-left: auto; /* 5% from the top and centered */
	margin-right: auto;
	border: 1px solid transparent;
	background-color: #f0eded;
	box-sizing: border-box;
	padding: 3%;
}

/* responsive layout definition. */
@media ( min-width : 1000px) {
	.modal-content {
		margin-top: 5%;
		width: 75%;
		margin-bottom: 5%;
	}
}

/* reduced size, but with side menu */
@media ( max-width : 999px) and (min-width: 700px) {
	.modal-content {
		margin-top: 3%;
		width: 90%;
		margin-bottom: 3%;
	}
}

/* reduced size, but with side menu */
@media ( max-width : 699px) {
	.modal-content {
		margin-top: 2%;
		width: 96%;
		margin-bottom: 0%;
	}
}

/* The Close Button */
.closeModal, .previousModal {
	float: right;
	padding: 0px;
	padding-left: 5px;
	padding-right: 5px;
	font-size: 28px;
	font-weight: bold;
}

.closeModal:hover, .closeModal:focus, .previousModal:hover, .previousModal:focus {
	background-color: #a3b8cc;
	color: #1c1d1f;
	text-decoration: none;
	cursor: pointer;
}

/* --------- MENU BAR STYLES --------------------------*/

/* bars for the statistics bar chart */
.bar-container {
	width: 100%;
}

.bar {
	background-color: #2d7ebe;
}

/* Loader to show spinning circle instead of logo for a busy application */
.loader {
	border-radius: 50%;
	border-top: 10px solid #033161;
	border-bottom: 10px solid #033161;
	border-left: 10px solid #fff;
	border-right: 10px solid #fff;
	width: 40px;
	height: 40px;
	-webkit-animation: spin 2s linear infinite; /* Safari */
	animation: spin 2s linear infinite;
}

/* Safari */
@
-webkit-keyframes spin { 0% {
	-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
     }
}
@
keyframes spin { 0% {
	transform: rotate(0deg);
     }
100% {
	transform: rotate(360deg);
     }
}

/* --------- AUTOCOMPLETE ITEM STYLES -----------------*/

.autocomplete-items {
	border: 1px solid #2d7ebe;
	border-bottom: none;
	border-top: none;
	z-index: 99;
	/*position the autocomplete items to be the same width as the container:*/
	top: 100%;
	left: 0;
	right: 0;
}

.autocomplete-items div {
	padding: 10px;
	cursor: pointer;
	background-color: #ffff;
	border-bottom: 1px solid #2d7ebe;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
	background-color: #cce0f1;
	color: #1c1d1f;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
	background-color: #cce0f1 !important;
	color: #1c1d1f;
}

/* --------- FORM FIELD VALIDITY MARKER STYLES --------*/
/* --------- kept for efaCloud only -------------------*/
.guid-valid {
	border-right: 15px solid #090;       /* RAG - green, for all apps the same */
}

.guid-off-period {
	border-right: 15px solid #fc0;       /* RAG - amber, for all apps the same */
}

.guid-not-found {
	border-right: 15px solid #c00;       /* RAG - red, for all apps the same */
}

.guid-not-checked {
	border-right: 15px solid #acacac;    /* RAG - gray, for all apps the same */
}