/****************************************************************************************************************/
/*                                                  Haupt-CSS                                                   */
/****************************************************************************************************************/

/* Grundstyles */
html {
	color: black;
	font-family: 'Lucida Sans';
	font-size: 12px;
}

body {
	margin: 0;
	padding: 0;
	overflow: auto;
}

div {
	vertical-align: top;
}

a {
	color: black;
	text-decoration: none;
}

label {
	display: inline-block;
	text-align: left;
	color: black;
	margin-bottom: 5px;
	width: 20%;
	min-width: 200px;
	font-size: 12px;
}

label::after {
	content: ':';
}

td {
	vertical-align: top;
}

input, 
textarea, 
select {
	-webkit-box-sizing: border-box;
	/* box-sizing sorgt dafür, dass die Elemente die Gleiche Breite aufweisen */
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background: #dddddd none repeat scroll 0 0;
	border: 1px solid darkgray;
	color: black;
	text-decoration: none;
	text-align: left;
	font-family: 'Lucida Sans';
	font-size: 13px;
	margin: 0;
	padding: 2px 0.25%;
}

input[type="submit"], 
input[type="button"], 
input[type="reset"], 
.button,
.ui-widget-content a.button {
	background: #ecebeb linear-gradient(180deg, #ededed 10%, #cdcdcd 100%)
		repeat scroll 0 0;
	text-decoration: none;
	padding: 5px 15px;
	border-radius: 15px;
	text-align: center;
	color: black;
	font-size: 13px;
	border: 0 solid;
	display: inline-block;
	line-height: 16px !important;
}

input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover,
	.button:hover, a:hover {
	cursor: pointer;
}

/* Allgemeine Positionierungsklassen */
.w5 {
	width: 5%;
	min-width: 50px;
}

.w10 {
	width: 10%;
	min-width: 100px;
}

.w15 {
	width: 15%;
	min-width: 150px;
}

.w20 {
	width: 20%;
	min-width: 200px;
}

.w25 {
	width: 25%;
	min-width: 250px;
}

.w30 {
	width: 30%;
	min-width: 300px;
}

.w40 {
	width: 40%;
	min-width: 400px;
}

.w50 {
	width: 50%;
	min-width: 500px;
}

.w60 {
	width: 60%;
	min-width: 600px;
}

.w75 {
	width: 75%;
	min-width: 750px;
}

.w80 {
	width: 80%;
	min-width: 800px;
}

.w100 {
	width: 100%;
	min-width: 1000px;
}

.wf20 {
	max-width: 20px;
}

.h200 {
	height: 200px;
}

.hidden {
	display: none;
}

.center {
	text-align: center;
}

.inline {
	display: inline-block;
}

.block {
	display: block;
}



/* Styles für FontAwesome
 * Einbindung von Icons mittels der Schriftart FontAwesome
 * @web https://fortawesome.github.io/Font-Awesome/
***********************************************************************************************/
.fa {
	color: black;
	font-size: 16px;
}

/* Bearbeiten-Link */
.edit-link {
	text-decoration: none;
}

.edit-link .inner {
	font-size: 0;
}

/* Löschen-Link */
/* Inaktiv/Aktiv-Link */
.delete-link, .inactive-link, .active-link {
	text-decoration: none;
}

.delete-link .inner, .inactive-link .inner, .active-link .inner {
	font-size: 0;
}

/* Erledigt link */
.erledigt-link {
	text-decoration: none;
}

.erledigt-link .inner {
	font-size: 0;
}

.loading-wrapper {
	display: inline-block;
	margin-left: 10px;
	margin-top: 6px;
	display: none;
}

.loading-animation:before {
	content: '\f110';
	font-size: 22px;
}

/* Styles für Messages 
***********************************************************************************************/
div.errorMessage {
	border: 1px solid red;
	border-radius: 5px;
	padding: 5px 1%;
	margin: 20px 0;
	color: black;
	background-color: lightsalmon;
	width: 98%;
}

div.errorMessage div, div.successMessage div, div.message div, div.warningMessage div {
	display: inline-block;
}

div.errorMessage .icon, div.successMessage .icon, div.message .icon, div.warningMessage .icon {
	width: 5%;
}

div.errorMessage .icon:before {
	content: '\f071';
	font-size: 40px;
	margin-right: 10px;
	color: red;
}

div.errorMessage .inner, div.successMessage .inner, div.message .inner, div.warningMessage .inner {
	margin-top: 5px;
	width: 90%;
}

div.errorMessage .validation-error {
	display: block;
}

div.errorMessage .validation-error .icon:before {
	color: black;
	margin: 0 10px 0 5px;
	font-size: 14px;
	content: '\f056';
}

div.successMessage {
	border: 1px solid green;
	border-radius: 5px;
	padding: 5px 1%;
	margin: 20px 0;
	color: black;
	background-color: lightgreen;
	width: 98%;
}

div.successMessage .icon:before {
	content: '\f00c';
	font-size: 40px;
	margin-right: 10px;
	color: green;
}

div.message {
	border: 1px solid darkgray;
	border-radius: 5px;
	padding: 5px 10px;
	margin: 20px 0;
	color: black;
	background-color: #eeeeee;
	width: 98%;
}

div.message .icon:before {
	content: '\f0f6';
	font-size: 40px;
	margin-right: 10px;
	color: darkgray;
}

.message-container {
	position: fixed;
	top: 91px;
	z-index: 100000;
}

div.message-box .close_icon:before {
	content: '\f00d';
	font-size: 22px;
}

div.message-box .close_icon {
	float: right;
}

div.message-box .close_icon:hover {
	cursor: pointer;
}

div.warningMessage {
    border: 1px solid orange;
    border-radius: 5px;
    padding: 5px 1%;
    margin: 20px 0;
    color: black;
    background-color: yellow;
    width: 98%;
}

div.warningMessage .icon:before {
    content: '\f071';
    font-size: 40px;
    margin-right: 10px;
    color: orange;
}

div.warningMessage .validation-warning {
    display: block;
}

div.warningMessage .validation-warning .icon:before {
    color: black;
    margin: 0 10px 0 5px;
    font-size: 14px;
    content: '\f056';
}

div.warningMessage #IgnoreValidationWarningsButton {
    margin-left: 75px;
    margin-top: 10px;
}


    /* Styles für Header
    *************************************************************************************************/
header {
	background-color: #777777;
	height: 60px;
	overflow: hidden;
}

header .header-logo {
	background: url('../image/itrium-logo-header.jpg') no-repeat center center;
	background-color: #ffffff;
	width: 130px;
	padding-left: 20px;
	height: 60px;
	display: inline-block;
}

header .user-info {
	display: inline-block;
	margin-top: 18px;
	color: white;
	float: right;
	margin-right: 10px;
}

header .user-info span {
	display: inline-block;
	vertical-align: bottom;
	padding-bottom: 2px;
}

header .user-info .username {
	font-weight: bold;
	margin-right: 15px;
}

header .user-info .passwort_aendern, header .user-info .abmelden {
	font-size: 0;
}

header .user-info .passwort_aendern:before {
	content: '\f084';
	font-size: 20px;
	color: white;
	padding: 3px;
	width: 20px;
	height: 20px;
}

header .user-info .abmelden:before {
	content: '\f08b';
	font-size: 20px;
	color: white;
	padding: 3px;
	width: 20px;
	height: 20px;
}



/* Styles für Navigation
*******************************************************************************************************************/
div.main {
	font-size: 0;		/* muss hier gesetzt werden, damit es kein Leerzeichen zwischen zwei Elementen gibt */
}

/* Hauptnavigation */
nav.main-navi {
	display: inline-block;
	width: 150px;
	font-size: 12px;		/* muss hier gesetzt werden, damit es kein Leerzeichen zwischen zwei Elementen gibt */
}

nav.main-navi ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

nav.main-navi li {
	padding: 2px 10px;
	height: 26px;
	line-height: 26px;
}

nav.main-navi a {
	text-decoration: none;
}

nav.main-navi ul.level1 li {
	background-color: #777777;
}

nav.main-navi ul.level2 li {
	border-bottom: 1px dotted #777777;
	background-color: #ffffff;
}

/* Aktiver Navigationspunkt */
nav.main-navi ul.level2 li.active {
	background-color: #cccccc; 
}

/* Navigationspunkt mit aktivem Unterpunkt Level 1 */
nav.main-navi ul.level1 li.trail {
	background-image: none;
}

/* Navigationspunkt mit aktivem Unterpunkt Level 2 */
nav.main-navi ul.level2 li.trail {
	background: #cccccc
}



/* Styles für Anwendung
/**********************************************************************************************/
div.application {
	display: inline-block;
	width: calc(100% - 170px);
	min-height: 600px;
	padding: 0 10px 10px 10px;
	font-size: 12px;	/* muss hier gesetzt werden, damit es kein Leerzeichen zwischen zwei Elementen gibt */
}

div.application .header {
	border-bottom: 1px dotted #777777;
	min-height: 30px;
	color: black;
	font-size: 20px;
	font-weight: 600;
	line-height: 30px;
	padding: 10px 10px 10px 10px;
}

div.application .header .header-text {
	display: inline-block;
}

div.application .sub-menu {
	padding: 0;
	text-align: right;
	display: inline-block;
	float: right;
}

div.application .content {
	margin-top: 5px;
	width: 100%;
}



/* Styles für Formulare 
***********************************************************************************************************************/
form {
	font-size: 0; 		/* Verhindern von Leerzeichen zwischen 2 Elementen */
}

form div.form-field {
	min-height: 25px;
	margin-bottom: 3px;
}

form div.form-field label {
	vertical-align: top;
}

form div.form-field .checkbox {
	vertical-align: top;
}

form div.form-field.submit, 
form div.form-field.reset, 
form div.form-field.delete {
	display: inline;
	margin-right: 10px;
}

form div.form-field.separator {
	display: block;
	width: 100%;
	max-width: none;
	border-bottom: 1px dotted black;
	color: black;
	min-height: auto;
	margin: 20px 0 10px 0;
	padding-bottom: 3px;
	font-weight: bold;
	font-size: 12px;
}

form div.linked_model .linkedFieldRow label {
	display: inline-block;
	border: 0 solid;
	font-weight: normal;
	max-width: none;
}

form div.linked_model .linkedFieldRow {
	display: inline-block;
	margin-bottom: 3px;
	width: 100%;
	min-width: 700px;
}

form div.linked_model .linkedFieldRow select, 
form div.linked_model .linkedFieldRow input,
form div.linked_model .linkedFieldRow textarea {
	margin-bottom: 3px;
}

form div.linked_model div.linkedFieldElement.delete-link {
	width: 20px;
	float: right;
	text-align: right;
}

form div.linked_model div.linkedFieldElement a.delete-link {
	width: 100%;
	padding-top: 3px;
}

form div.linked_model a.linked_model-more-button, form div.file a.file-more-button {
	margin: 0;
	padding: 0;
	border: 0 solid;
	background: none;
}

form div.linked_model .linked_model-more-button_icon, form div.file .file-more-button_icon {
	margin: 0 0 5px 0;
}

form div.linked_model .linked_model-more-button_icon:before, form div.file .file-more-button_icon:before
	{
	content: '\f067';
	font-size: 14px;
	margin-right: 10px;
}

/* ID-Felder sind versteckt */
form div.form-field.id {
	display: none;
}

/* Icons für Separator */
form div.separator .person_icon:before {
	content: '\f007';
	font-size: 14px;
	margin-right: 10px;
}

form div.separator .benutzergruppe_icon:before {
	content: '\f0c0';
	font-size: 14px;
	margin-right: 10px;
}

form div.separator .administativ_icon:before {
	content: '\f21b';
	font-size: 14px;
	margin-right: 10px;
}

form .bitte-speichern-message {
	font-size: 14px;
	color: red;
	/*width: 20%;*/
	padding: 0 5px;
}

/* Spezielle Styles für Upload-Felder */
form .span_file_upload {
	display: inline-block;
	width: 80%;
}

form .span_file_upload .upload-row {
	margin-bottom: 2px;
}

form .span_file_upload .upload-row .upload_button {
	display: inline-block;
	width: 200px;
	margin-left: 2%;
	padding: 5px 0;
}

form .span_file_upload .upload-row .file-delete-button-new {
    display: none;
    margin-left: 2%;
}

form div.rowCounter {
	font-size: 18px;
	font-weight: bold;
	display: inline-block;
}

form .upload-row .thumbnail-wrapper {
	display: inline-block;
}

/* Styles für Tabellen 
****************************************************************************************************************/
table.listen-tabelle {
	width: 100%;
}

table.listen-tabelle th {
	background: #777777 none repeat scroll 0 0;
	color: #fff;
	padding: 5px;
	vertical-align: middle;
	text-align: left;
}

table.listen-tabelle th.it-list-order:hover {
	cursor: pointer;
}

table.listen-tabelle th .sort-icon {
	float: right;
	color: white;
}

table.listen-tabelle th.asc .sort-icon:after {
	content: '\f151';
	font-size: 14px;
}

table.listen-tabelle th.desc .sort-icon:after {
	content: '\f150';
	font-size: 14px;
}

table.listen-tabelle tr {
	background-color: #ecebeb;
}

table.listen-tabelle tr:hover {
	background-color: #c4c1bc;
}

table.listen-tabelle td {
	padding: 5px;
	color: black;
}

table.listen-tabelle td .list-entry {
	display: block;
}

table a.table-link {
	width: 100%;
	height: 100%;
	display: inline-block;
}

table.listen-tabelle .usergroup {	/* Benutzergruppen werden standardmäßig untereinander angezeigt in der Listenansicht */
	display: block;
}

table tr.no-results-it-filter {
	background-color: transparent;
}
table td.no-results-it-filter {
	background-color: transparent;
	padding: 10px 5%;
	text-align: center;
}


/* Styles für Listen-Filter 
*****************************************************************************************************/
.filter {
	margin-top: 20px;
}

.filter .filterContainer {
	margin-bottom: 3px;
	display: inline-block;
	margin-right: 10px;
}

.filter .filterContainer select, 
.filter .filterContainer input {
	margin-right: 3px;
}

.filter-actions {
	border-bottom: 1px dotted black;
	padding-bottom: 5px;
	margin-bottom: 20px;
	margin-top: 10px;
}

.filter-actions input[type="button"] {
	margin-right: 3px;
}

.filter-actions .animation-image {
	background: url('../image/sanduhr.gif') no-repeat center center;
	display: inline-block;
	width: 25px;
	height: 25px;
	margin: 0 5px;
}

.filter-actions .loading-indicator {
	margin-left: 10px;
	font-weight: 800;
	visibility: hidden;
	margin-right: 130px;
}

.filter-actions select.exportSelect {
	width: 150px;
	margin-right: 3px;
}

#listenfilter-load-popup table {
    width: 100%;
}

#listenfilter-load-popup .load-selected-filter:before {
    content: "\f0ee";
}

#listenfilter-load-popup .delete-selected-filter:before {
    content: "\f1f8";
}

#listenfilter-load-popup .privat:before {
    content: "\f007";
}

.save-filter-box {
    display: inline-block;
    width: calc(96% - 2px);
    margin-top: 10px;
    padding: 5px 2%;
    border: 1px solid darkgray;
}

.save-filter-box input {
    margin-right: 10px;
}

.save-filter-box label {
    display: inline-block;
    width: auto;
    min-width: 0;
    margin-right: 20px;
}

.save-filter-box label:after {
    content: "";
}

.save-filter-box .save-filter-box-toggle {
    cursor: pointer;
}

.save-filter-box #get-saved-filter-button {
    margin-left: 50px;
}

.multiColumnAction {
    text-align: right;
    padding: 5px 2%;
}

.multiColumnAction .multiColumnButton {
    margin-left: 5px;
}

.list_multiselect,
table.listen-tabelle th.list_multiselect {
    width: 20px;
    text-align: center;
}


/* Styles für Popup 
********************************************************************************************************************/
.popup {
	position: fixed;
	border: 1px solid black;
	background-color: white;
	z-index: 999999;
	left: 50%;
	top: 50%;
	width: 300px;
	height: 150px;
	margin-left: -150px;
	margin-top: -75px;
}

.popup .popup-header {
	background-color: black;
	color: white;
	font-weight: bold;
	padding: 2px;
	height: 15px;
	margin-bottom: 10px;
}

.popup .popup-header .close {
	float: right;
	cursor: pointer;
	font-size: 0;
}

.popup .popup-header .close:after {
	content: '\f056';
	font-size: 16px;
	width: 10px;
	color: white;
	margin-right: 2px;
}

.popup .popup-content {
	padding: 5px;
}

.popup .popup-content.result-message {
	padding-left: 10%;
	width: 80%;
}

.popup .popup-content .close-button {
	margin-top: 15px;
}



/* Button Zwischenablage (zum Teil nur in Formularen) */
.clipboard-button {
	cursor: pointer;
}

form .clipboard-button {
	display: inline-block;
	margin-left: 10px;
	margin-top: 5px;
}

form .clipboard-button .clipboard-button_label {
	font-size: 0;
}

form .clipboard-button .clipboard-button_icon:before {
	content: '\f0c5';
	font-size: 16px;
	margin-right: 10px;
}

/* Request Buttons (in Formularen) */
form .request-buttons-container {
	display: inline-block;
	margin-left: 10px;
	margin-top: 5px;
}

form .request-buttons-container .request-button-wrapper {
	display: inline-block;
}

form .request-buttons-container .request-button-wrapper:not(:first-child) {
	margin-left: 10px;
}


/* Info-Bereich 
******************************************************************************************************************/
.info-block {
	margin: 5px 0;
}

.info-block .info_icon:before {
	content: '\f05a';
	font-size: 14px;
	margin-right: 10px;
	color: darkblue;
}

.info-block .info-label {
	
}



/* Passwort ändern-seite 
***********************************************************************************/
.passwort-aendern form {
	width: 50%;
	margin-left: 25%;
	margin-right: 25%;
	margin-top: 30px;
}

/* Da Formular nur über die Hälfte der Seite angezeigt wird, wird die Breite der w25 Elemente auf 50% gesetzt  */
.passwort-aendern form.w25 {
	width: 48.95%;
}

.passwort-aendern form.formbutton {
	text-align: right;
}



/* Patch-Verwaltung 
***********************************************************************************/
#patchverwaltung .icon-ausfuehren:before {
	content: '\f152';
}

/* Überschreiben von select2 Styles
 ****************************************************************************/

.select2-container--default .select2-selection--single {
	border: unset;
	height: 22px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
	background-color: #dddddd;
	border: 1px solid darkgray;
	color: black;
	line-height: 20px;
	font-size: 13px;
	padding-left: 4px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 20px;
	border-left: 1px solid #cec9c9;
}

.select2-results__option[aria-selected] {
	background-color: #dddddd;
	cursor: pointer;
	color: black;
	font-size: 13px;
	padding-left: 4px;
}

/* Leeres Select */
.select2-container--default .select2-selection--single {
	background-color: #dddddd;
}

.select2-results__option {
	color: black;
}

/* Log (Liste) */

#log-liste span.log-entry {
	font-size: 14px;
}

#log-liste span.trace {
	font-size: 14px;
	color: grey;
}

#log-liste .full-text-link {
	cursor: pointer;
}

#log-liste .full-text-link .full-text {
	display: none;
}

#log-liste .log-success {
	color: green;
}

#log-liste .log-warning {
	color: orange;
}

#log-liste .log-error {
	color: red;
}

#log-liste .col-datum {
	width: 15%;
}

#log-liste .col-kategorie {
	width: 10%;
}

#log-liste .col-datensatz {
	width: 30%;
}

#full-text-popup .full-text {
    font-size: 12px;
}