@import url(https://fonts.googleapis.com/css2?family=Raleway:wght@300;400&display=swap); 
/*@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@100&display=swap'); */

/* Farben ################################# */

:root {
  --farbe_background: #212a35; 
  --farbe_header: #243443; 
  --farbe_foreground: #232d37; 
  --farbe_schrift: #fff; 
  --farbe_highlight: #0098de;  
}

/* Schrift ################################# */

/* Header ################################# */

.logo_mt {
	float: left;
	background-color: var(--farbe_header);
	margin-right: 1px;
	line-height: 10px;
	height: 54px;
	padding: 10px 10px 0px 10px;
}

.logo_mt img {
	height: 34px;
}

/* About-Dialog ################################# */
#aboutDialog {
	width: 400px;
	position: fixed;
	top: 200px;
	left: calc(50% - 200px);
	border: 2px solid var(--farbe_highlight);
	border-radius: 10px;
	padding: 20px;
	background-color: var(--farbe_header);
}


/* Navigation ################################# */
.navigation {
	
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: var(--farbe_header);
    display: flex;
    min-height: 54px;
	
    font-weight: 700;
	font-size:1.0em;
}

.burgerbutton {
	display: none;
}

#mainmenu {
	
}

.nav {
	padding-left: 20px;
}

.nav li {
	padding: 0vw 1vw;
}

.user-nav {
	position: absolute;
    right: 1.5vw;
    float: right;
    flex-direction: unset;
}

.user-nav li {
	padding: 0vw 1vw
}

.user-nav .singleEntry {
	padding: 0vw 1vw
}


.dropdown-menu {
	padding: 0;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175); 
    border: none;
    font-size: 0.9em;
    background-color: var(--farbe_header);
}

.inactiveTab {
	background-color: var(--farbe2);
}

@media (max-width: 600px) {
	.navigation {
		font-size: 3.2vh !important;
		padding-left: 0vw;
	}
	.burgerbutton {
		display: unset;
	}
	#mainmenu {
		display: none;
		position: absolute;
		-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    	box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    	transform: translate3d(0px, 4.5vh, 0px);
    	background-color: var(--farbe2);
	}
	
	.user-nav {
	    right: 0vw;
	}
}

/* Content ################################# */

body {
	background-color: var(--farbe_background);
	font-family: 'Raleway', sans-serif; 
	font-weight: 400;
	font-size: 0.9em;
	line-height: 1.6em;
	color: var(--farbe_schrift);
}

h1 {
	font-size: 1.5rem;
}

h2 {
	font-size: 1.35rem;
}

h3 {
	font-size: 1.2rem;
}

.h3-fa {
	font-size: 0.9rem;
	margin-right: 10px;
    margin-top: 3px;
}

h1 {
  padding: 5px 0px 5px 20px;
  border-radius: 10px 10px 0px 0px;
  background-color: var(--farbe_header);
  width: 100%;
}

h2, h3, h4, h5, h6 {
  padding: 5px 0px 5px 10px;
  border-radius: 10px 10px 0px 0px;
  background-color: var(--farbe_header);
  width: 100%;
}

b, strong {
	font-weight: bold;
}

a {
	color: var(--farbe_schrift);
}

a:hover {
	color: #707070;
	text-decoration: none;
}

.content {
    background-color: var(--farbe_foreground);	
	margin: 20px;
	min-height: 77vh;
    overflow-x: auto; /*Wenn ihnalte zu Breit zur darstellung werden, dann scrollen */
    border-radius: 10px;
}

.content_headerWithTabs {    /* Wenn in der �berschrift-Zeile auch Tabs angezeigt werden sollen */
	background-color: var(--farbe_header);
	width: 100%;
    height: 40px;
    display: inline-block;
}

.content_headerWithTabs h1, .content_headerWithTabs h2, .content_headerWithTabs h3 {
	float: left;
	width: auto;
}

/* Tabs */ 
.tabs
{
	display: flex;
	list-style: none;
	float: left;
	padding-top: 7px;
	padding-bottom: 0px;
}

.tabs li
{
	padding: 0vw 1vw;
	border-left: 1px solid var(--farbe_schrift);
}

.activeTab a {
	color: var(--farbe_highlight);
}

.panel10 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 10%;
}

.panel13 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 13%;
}

.panel17 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 17%;
}

.panel20 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 20%;
}

.panel25 {
	padding: 0px 20px 10px 20px;		
	float: left;
	width: 25%;
}

.panel30 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 30%;
}

.panel33 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 33%;
}

.panel40 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 40%;
}

.panel50 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 50%;
}

.panel60 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 60%;
}

.panel70 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 70%;
}

.panel80 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 80%;
}

.panel100 {
	padding: 0px 20px 10px 20px;	
	float: left;
	width: 100%;
}

.colorInTable {
	width: 20px;
    height: 20px;
    display: block;
}

@media (max-width: 600px) {
	.panel10 {
		float: left;
		width: 100%;
	}
	
	.panel13 {
		float: left;
		width: 100%;
	}
	
	.panel17 {
		float: left;
		width: 100%;
	}
	
	.panel20 {
		float: left;
		width: 100%;
	}
	
	.panel25 {
		float: left;
		width: 100%;
	}
	
	.panel30 {
		float: left;
		width: 100%;
	}
	
	.panel33 {
		float: left;
		width: 100%;
	}
	
	.panel40 {
		float: left;
		width: 100%;
	}
	
	.panel50 {
		float: left;
		width: 100%;
	}
	
	.panel60 {
		float: left;
		width: 100%;
	}
	
	.panel70 {
		float: left;
		width: 100%;
	}
	
	.panel80 {
		float: left;
		width: 100%;
	}
}

/* Widgets ################################## */

.widget-light {
	border: 1px solid var(--farbe5);	
	padding: 15px;
	margin-top: 3px;
}

.widget-container {
	padding-left: 6vw;
}

@media (max-width: 600px) {
	.widget-container {
		padding-left: 0vw;
	}
}

.widget {
	width: 25vw;
	float: left;
	margin: 1vw;
	border: 2px solid var(--farbe_header);
	border-radius: 0.5vw;
	background-color: var(--farbe_header);
	box-shadow: 2px 2px 2.5px 0px rgba(0,0,0,0.25);
}

@media (max-width: 600px) {
	.widget {
		width: 45vw; 
		margin-right: 1vw;
		margin-left: 1vw;
		border-radius: 0.5vh;
		font-size: .8rem;
	}
}

.widget_title {
	font-weight: bold;
	margin-left: 5px;
}

.widget_content {
	background-color: var(--farbe_background);
	padding: 1vw;
	margin-bottom: 0.5vw;
	text-align: center;
}

.widget_content_img {
	width: 75%;
}

/* Nur landscape auf dem Handy muss das Bild kleiner sein */
@media (min-resolution: 100dpi) and (orientation: landscape) {
	
	.widget {
		font-size: .8rem;
	}
	
	.widget_content_img {
		width: 55%;
	}
}

/* Table ################################# */

.table {
	width: 100%;
	margin-bottom: 0px;
}

.table h1 {
	font-size: 1.5rem;
}

.table h2 {
	font-size: 1.4rem;
}

.table h3 {
	font-size: 1.3rem;
}

.table h4 {
	font-size: 1.2rem;
}

.table h5 {
	font-size: 1.1rem;
}

.table h6 {
	font-size: 1.0rem;
}

.tableCompact td, .tableCompact th {
	font-size: 0.8em;
	line-height: 1.4em;
	padding: .3em;
}

.tableCompact .form-control {
	font-size: 1em;
	padding-left: .25rem;
	padding-right: .25rem;
}

.table_details {
	width: 50%;
	max-width: 100%;
}
.table_details td, .table_details th {
	padding: .25rem
}

.table-noborder {
	width: 100%;
	max-width: 100%;
	margin-bottom: 22px;
	background-color: inherit!important;
}

.table-noborder>tbody>tr>td, .table-noborder>tbody>tr>th, .table-noborder>tfoot>tr>td, .table-noborder>tfoot>tr>th,
	.table-noborder>thead>tr>td, .table-noborder>thead>tr>th {
	padding: 8px;
	line-height: 1.6;
	vertical-align: top;
	border-top: 0px;
}

.table_separator {
	background-color: white;
}

.table_sum {
	background-color: antiquewhite;
}

.table_td_nopadding
{
	padding: 0.25rem!important;
}

.table_detailrow {
	font-size: smaller;
	text-align: right;
	padding: .25rem!important;
}

/* Datefield mit Relation ################################# */

.datefield_with_relations {
	display: flex;
}

.datefield_with_relations_rel{
	width: 70px;
    padding-left: 5px;
    padding-right: 0px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    border-right: 0px;
}

.datefield_with_relations_date {
	border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

/* Button ################################# */

.btn {
	background-color: var(--farbe_foreground);
	color: var(--farbe_schrift); 
	border: 2px solid var(--farbe_highlight);
	border-radius: 100px;
}

/* Paginator ################################# */

.pagination .page-link {
	border-color: var(--farbe_highlight);
	background-color: var(--farbe_header);
}

.pagination .disabled .page-link {
	border-color: var(--farbe_highlight);
	background-color: var(--farbe_background);
}


/* Formulare ################################# */

.form-control {
	border-radius: 0;
	background-color: var(--farbe_header)!important;
	border-color: var(--farbe_highlight);
	color: var(--farbe_schrift);
}

.form-control:disabled {
	border-color: grey;
}

/*Beim Autofill wird normalerweise die Schrift- und Hintergrundfarbe beim Input-Field auf den Typ des Autofills ge�ndert. 
So wird das verhindert*/
input:autofill,
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 30px var(--farbe_header) inset !important;
    -webkit-text-fill-color: var(--farbe_schrift) !important;
}


.form-control:focus {
	border-radius: 0;
	background-color: var(--farbe_header);
	border-color: var(--farbe_highlight);
	color: var(--farbe_schrift);
}

label {
	font-weight: 700;
}

.has-error .form-control {
    border-color: #a94442;  /* Felder rot umrandet bei Fehler*/
}

.select2-selection--single {
	border-radius: 0px!important;
	border-color: var(--farbe_highlight)!important;
	background-color: var(--farbe_header)!important;
	color: var(--farbe_schrift)!important;
}

.select2-selection__rendered {
	color: var(--farbe_schrift)!important;
}

.select2-search--dropdown {
    background-color: var(--farbe_foreground)!important;
}

.select2-search__field {
	background-color: var(--farbe_header)!important;
	border-color: var(--farbe_highlight)!important;
	color: var(--farbe_schrift)!important;
}

.select2-results__option {
	
	background-color: var(--farbe_foreground)!important;
}

/* Drucken ################################# */

@media print {
	.content {
		width: 90%
	}
	.container {
		width: 90%
	}
}

@media print { 
	.pagebreak {
		page-break-before:always;
	} 
}

/* Spezielle Objekte ################################# */

.todo_panel {
	border-radius: 10px;
    background-color: #243443;
    padding: 10px;
}

.hidden {
	display: none!important;
}

.hinweis {
	color: red;
}

.grey {
	filter: grayscale(1);
}