body {
	font-family: 'Noto Sans', sans-serif;
	background-color: #444;
	margin: 0;
	padding: 0;
	text-align: center;
}

h2 {
	font-size: 3em;
}

html, body {
  height: 100%;
}

.loadingscreen {
	width: 100%;
	height: 100%;
    background-color: #e0e0e0;
}

.lds-ring {
  display: inline-block;
  position: relative;
  width: 80px;
  height: 80px;
}

.lds-ring div {
  box-sizing: border-box;
  display: block;
  position: absolute;
  width: 64px;
  height: 64px;
  margin: 8px;
  border: 8px solid #fff;
  border-radius: 50%;
  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
  border-color: #fff transparent transparent transparent;
}

.lds-ring div:nth-child(1) {
  animation-delay: -0.45s;
}

.lds-ring div:nth-child(2) {
  animation-delay: -0.3s;
}

.lds-ring div:nth-child(3) {
  animation-delay: -0.15s;
}

@keyframes lds-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
#header a {
	color: white;
}

#header {
	color: white;
	padding-top: 0.5em;
	height: 5em;
	background-color: #444;
}


#subheader {
	border-bottom: 1px solid #CCC;
}

#subheader, #tickets, #ticket_detail {
	color: black;
	padding-top: 1.5em;
	background-color: #e0e0e0;
	min-height: 5em;
}

.ticket_infos {
	display: block;
	width: 100%;
}

#ticket_wrapper {
	background-color: #e0e0e0;
}

#ticket_detail {
	padding-bottom: 0.5em;
	max-width: 1920px;
	margin: 0px auto;
}

.ticket_infos_left {
	display: block;
	float: left;
	text-align: left;
	width: 50%;
}

.ticket_infos_right {
	display: block;
	float: right;
	text-align: left;
	width: 50%;
}

.ticket_infos_title {
	display: inline-block;
	font-size: 1.6em;
	font-weight: 700;
	margin-top: 25px;
	text-align: left;
	width: 100%;
}

.ticket_thread_post {
	display: block;
	width: 100%;
}

.ticket_thread_head {
	padding: 1em;
	text-align: left;
	display: block;
	width: calc(100% - 2em);
	background-color: #fedf98;
    display: inline-block;
}

.ticket_thread_head_title {
	font-weight: 700;
	float: left;
}

.ticket_thread_head_time {
	float: left;
}

.ticket_thread_head_author {
	float: right;
}

.ticket_thread_desc {
	padding: 1em;
	background-color: white;
	text-align: left;
    display: inline-block;
	width: calc(100% - 2em);
}



.ticket_thread_desc p:nth-child(1) {
	margin-top: 0;
}

#pxlogo {
	display: inline-block;
	margin-left: 1em;
	height: 4em;
}

#title {
	display: inline-block;
	position: relative;
	top: calc(100% - 2em);
}

#customer {
	float: right;
	display: inline-block;
	font-size: 1em;
	position: relative;
	top: 25%;
	padding-right: 0.5em;
}

@media (max-width: 640px) {
	#customer {
		display: none;
	}
	#title {
		font-size: 1.5em;
		padding-right: 0.5em;
		float: right;
		top: calc(100% - 2.5em);
	}
	input, select, label, button {
		width: calc(100% - 3em);
		margin: 1em;
		line-height: 1.8;
	}
	.fourth_block .first_row, .fourth_block .second_row  {
		text-align: right;
	}

	.first_block, .second_block {
		float: left;
	}

	.third_block, .fourth_block {
		float: right;
	}

	.first_row, .second_row {
		display: inline;
		width: 100%;
	}

	.first_block, .fourth_block {
		width: 25%;
	}

	.third_block {
		display: none;
	}

	.second_block {
		width: 50%;
	}

	.second_row {
		margin-top: 25px;
		font-size: 0.75em;
	}

	.ticket_title, .ticket_nr {
		font-size: 1.25em;
		font-weight: 700;
	}
	
	.ticket {
		display: inline-block;
		padding-top: 1em;
		padding-bottom: 1em;
		padding-left: 0.5em;
		min-height: 75px;
		border-bottom: 1px solid #CCC;
		padding-right: 0.5em;
		width: calc(100% - 1em);
	}
}

@media (max-width: 1920px) {
	.ticket_infos {
		margin-left: 1em;
		width: calc(100% - 1em);
	}
}

@media (min-width: 641px) {
	#title {
		font-size: 3em;
		padding-left: 0.5em;
	}
	input {
		width: 250px;
	}
	.fourth_block .first_row, .fourth_block .second_row  {
		text-align: right;
	}

	.first_block, .second_block {
		float: left;
	}

	.third_block, .fourth_block {
		float: right;
	}

	.first_row, .second_row {
		display: inline-block;
		width: 100%;
	}

	.first_block, .third_block {
		width: 20%;
	}

	.fourth_block {
		width: 10%;
	}

	.second_block {
		width: 50%;
	}

	.second_row {
		margin-top: 25px;
		font-size: 0.75em;
	}

	.ticket_title, .ticket_nr {
		font-size: 1.25em;
		font-weight: 700;
	}
	.ticket {
		display: block;
		padding-top: 1em;
		padding-bottom: 1em;
		padding-left: 2em;
		min-height: 75px;
		border-bottom: 1px solid #CCC;
		padding-right: 2em;
	}
}

#login_container {
	margin: 0 auto;
	position: absolute;
	top: 10%;
	height: 100%;
	width: 100%;
	color: white;
}

input[type="password"], input[type="text"], select {
	font-size: 1em;
    margin-bottom: 32px;
	margin-top: 16px;
    line-height: 1.5;
    color: #495057;
	width: 100%;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .1s ease-in-out;
    height: 32px;
	padding: 5px 10px;
	display: block;
}

input[type="submit"], button {
	font-size: 1.1em;
    margin-bottom: 32px;
	margin-top: 16px;
	max-width: 150px;
    line-height: 1.5;
	color: white;
    background-color: #A11;
    border: 1px solid transparent;
    border-radius: .25rem;
    transition: all .1s ease-in-out;
	padding: 5px 10px;
}

#username, #password {
	max-width: 400px;
	width: 75%;
	display: initial;
}

.close {
	float: right;
	margin-right: 25px;
	margin-top: 10px;
}

.filter {
	display: none;
	max-width: 50%;
	margin-left: auto;
	margin-right: auto;
}

select {
	height: 44px;
	width: calc(100% + 24px);
}

#login_logo {
	margin-bottom: 64px;
}

#subheader h2 {
	margin-top: 8px;
}

.filter_dropdown {
	height: 0.5em;
	width: 0.5em;
}

.enter_ticket {
	height: 0.8em;
	width: 0.8em;
	margin-left: 0.8em;
}

.ticket>div>div {
	text-align:left;
}

.ticket_title a, .ticket_nr a {
	color: black;
	text-decoration: inherit;
}

.fab {
   width: 70px;
   height: 70px;
   background-color: #444;
   border-radius: 50%;
   box-shadow: 0 6px 10px 0 #666;
   transition: all 0.1s ease-in-out;
 
   font-size: 2.5em;
   color: white;
   text-align: center;
   line-height: 70px;
 
   position: fixed;
   right: 50px;
   bottom: 50px;
}

.fab img {
	height: 32px;
	filter: invert(100%);
}
 
.fab:hover {
   box-shadow: 0 6px 14px 0 #666;
}