body {
	font-family: 'Open Sans', sans-serif;
	font-size: 1rem;
	font-weight: 300;
	color: #333;
	background: #eeecbf;
}
h1 {
	text-align: center;
	color: #afb035;
}
h2 {
	text-align: center;
	color: #afb035;
}
select {
	float: left;	
}
.loader {
	border: 8px solid #733236;
	border-top: 8px solid #e7c552;
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 1s linear infinite;
	margin: 50px auto;
}
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
.error {
	color: red;
	text-align: center;
	margin-top: 20px;
}
.auftrag-container > table:nth-child(2n) {
    background-color:white;
}
table {
	width: 100%;
	margin-bottom: 10px;
	border-collapse: collapse;
	background-color: #f1f7d5;
    font-size: 12px;
}
tbody {
	border: 1px solid #a6af4a;
}
th, td {
	padding: 5px 10px;
	border: 1px solid #a6af4a;
	text-align: left;
}
th {
	background-color: #733236;
	color: white;
}

table.wait td.name {
	background-color: #e28f27;
}

td.customerNo {
    width: 40px;	
}

td.weeks {
    width: 40px;		
}

td.name {
	background-color: #a6af4a;
    color: black;
    width: 80px;
}
td.hoerphase {
    width: 80px;
}
td.bestellung {
    width: 100px;
}
td.bemerkungen {
	font-size: 11px;
}

td.bemerkungen.active {
	height: 90px;
	font-size: 12px;
}

.collapsible {
  background-color: transparent;
  font-size: 10px;
  cursor: pointer;
  width: 96%;
  border: none;
  text-align: left;
  outline: none;
}

button.collapsible:after {
	content: '\002B';
	color: #a6af4a;
	font-weight: bold;
	float: right;
	margin-left: 5px;
}

div.scrollable {
    width: 98%;
    margin: 0;
    padding: 0;
	display: none;
  	overflow: auto;
}

.collapsible.active {
	display: none;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.collapsible:hover {
  background-color: #ccc;
}

.center {
	width: 80%;
	margin-right: auto;
	margin-left: auto;
	display: flex;
	justify-content: center;
}

.rightAlign {
	margin-left: auto;
	float: right;
}

.logout-button {
	background-color: #e7c552;
	color: white;
	padding: 14px 20px;
	margin: -70px 0 0 0;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	color: #733236;
}

.logout-button:hover {
	background-color: #733236;
	color: white;
}

.auftrag-container {
	width: 90%;
	margin: 0 auto;
}

.status {
	padding: 10px;
	margin-top: 10px;
}

.status-balken {
	display: flex;
	justify-content: space-between;
}

.status-step {
}

.messungen {
	padding-top: 10px;
	display: flex;
	gap: 10px;
}

.messung-button {
	background-color: rgb(113, 113, 113);
	color: white;
	border: none;
	padding: 5px 10px;
	cursor: pointer;
	margin: 0px 3px;
    border-radius: 5px;
}

.badge {
  background-color: #e7c552;
  color: black;
  padding: 5px 5px;
  margin: 4px;
  text-align: center;
  border-radius: 5px;
}

.messung-loading {
  position: relative;
  width: 20px;
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

.messung-loading:before {
  content: "\f110";
  font-family: FontAwesome;
  font-size:20px;
}

.messung-button:hover {
	opacity: 0.8;
}

.progress-container {
	display: flex;
}

.progress-bar {
display: flex;
justify-content: space-between;
margin: 20px 0;
list-style-type: none;
padding: 0;
}

/* Einzelner Schritt */
.progress-step {
width: 100%;
position: relative;
text-align: center;
z-index: 1;
}

/* Kreis für Schritte */
.progress-step::before {
font-family: "Font Awesome 5 Free";
content: '';
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 900;
margin: 0 auto 10px;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #bdbdbd;
color: #333;
z-index: 2;
}

.statenew::before {
    content: "\f218";  /* cart-arrow-down */
}

.statemailClient::before {
    content: "\f1fa";  /* at */
}

.stateproduced::before {
    content: "\f83e";  /* wave-square */
}

.stateproduction::before {
    content: "\f83e";  /* wave-square */
}

.statedelivery::before {
    content: "\f0e0";  /* envelope */
}

.statepayment::before {
    content: "\f251";  /* hourglass-start */
}

.statepaymentdone::before {
    content: "\f53a";  /* money-bill-1-wave */
}

.staterelease::before {
    content: "\f14a";  /* check-square */
}

.stateready::before {
    content: "\f11e";  /* flag-checkered */
}


/* Linie zwischen den Kreisen */
.progress-step::after {
content: '';
position: absolute;
top: 10px;
left: 50%;
width: 100%;
height: 2px;
background-color: #bdbdbd;
z-index: -1;
}

.progress-step.completed::after {
content: '';
position: absolute;
top: 10px;
left: 50%;
width: 100%;
height: 2px;
background-color: #462323;
z-index: -1;
}

.progress-step:last-child::after {
display: none;
}

/* Abgeschlossene Schritte */
.progress-step.completed::before {
	background-color: #4caf50;
}

/*Aktueller Schritt */
.progress-step.current span {
	display: inline;
	color:#462323;
}

/* Beschriftung */
.progress-step.completed span {
	display: inline;
	color:#222;
}

.progress-step span {
	display: inline;
	font-size: 10px;
	color:red;
}


.checkbox-wrapper-18 .round {
	position: relative;
}

.checkbox-wrapper-18 .round label {
	background-color: #fff;
	border: 1px solid #ccc;
	border-radius: 50%;
	cursor: pointer;
	height: 28px;
	width: 28px;
	display: block;
}

.checkbox-wrapper-18 .round label:after {
	border: 2px solid #fff;
	border-top: none;
	border-right: none;
	content: "";
	height: 6px;
	left: 8px;
	opacity: 0;
	position: absolute;
	top: 9px;
	transform: rotate(-45deg);
	width: 12px;
}

.checkbox-wrapper-18 .round input[type="checkbox"] {
	visibility: hidden;
	display: none;
	opacity: 0;
}

.checkbox-wrapper-18 .round input[type="checkbox"]:checked + label {
	background-color: #66bb6a;
	border-color: #66bb6a;
}

.checkbox-wrapper-18 .round input[type="checkbox"]:checked + label:after {
	opacity: 1;
}

.overlay {
	display: none; /* Hidden by default */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6); /* Semi-transparent background */
	justify-content: center;
	align-items: center;
	z-index: 1000; /* Ensures it appears above other content */
}

.overlay.active {
	display: flex; /* Show overlay when active */
}

.order-form {
	background-color: #f9f9f9;
	padding: 20px;
	border-radius: 8px;
	width: 400px;
	position: relative;
}

.order-form label {
	font-weight: bold;
	display: block;
	margin-top: 10px;
}

.order-form input, .order-form textarea {
	width: 96%;
	padding: 8px;
	margin-top: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.order-form button {
	margin-top: 15px;
	padding: 10px 15px;
	background-color: #4CAF50;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
}

.order-form button:hover {
	background-color: #45a049;
}

.status {
	margin-top: 15px;
	font-weight: bold;
}

/* Close button */
.close-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	background: transparent;
	border: none;
	font-size: 14px;
	cursor: pointer;
}

.close-btn:hover {
	color: red;
}

.btn {
    display: inline-block;
    * display:inline;
    * zoom:1;
    padding: 4px 12px;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333333;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
    background-color: #f5f5f5;
    background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
    background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    * background-color:#e6e6e6;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled = false);
    border: 1px solid #bbbbbb;
    * border:0;
    border-bottom-color: #a2a2a2;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    * margin-left:.3em;
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #333333;
    background-color: #e6e6e6;
    * background-color:#d9d9d9;
}

.btn:active, .btn.active {
    background-color: #cccccc \9;
}

.btn:hover, .btn:focus, .btn:active, .btn.active, .btn.disabled, .btn[disabled] {
    color: #333333;
    background-color: #e6e6e6;
    * background-color:#d9d9d9;
}

.btn:active, .btn.active {
    background-color: #cccccc \9;
}

.btn:first-child {
    * margin-left:0;
}

.btn:first-child {
    * margin-left:0;
}

.btn:hover, .btn:focus {
    color: #333333;
    text-decoration: none;
    background-position: 0 -15px;
    -webkit-transition: background-position 0.1s linear;
    -moz-transition: background-position 0.1s linear;
    -o-transition: background-position 0.1s linear;
    transition: background-position 0.1s linear;
}

.btn:focus {
    outline: thin dotted #333;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
}

.btn.active, .btn:active {
    background-image: none;
    outline: 0;
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
}

.btn.disabled, .btn[disabled] {
    cursor: default;
    background-image: none;
    opacity: 0.65;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.btn-large {
    padding: 11px 19px;
    font-size: 17.5px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}

.btn-large [class^="icon-"], .btn-large [class * =" icon-"] {
    margin-top: 4px;
}

.btn-small {
    padding: 2px 10px;
    font-size: 11.9px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.btn-small [class^="icon-"], .btn-small [class * =" icon-"] {
    margin-top: 0;
}

.btn-mini [class^="icon-"], .btn-mini [class * =" icon-"] {
    margin-top: -1px;
}

.btn-mini {
    padding: 0 6px;
    font-size: 10.5px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}

.btn-block {
    display: block;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.btn-block + .btn-block {
    margin-top: 5px;
}

input[type="submit"].btn-block, input[type="reset"].btn-block, input[type="button"].btn-block {
    width: 100%;
}

.btn-primary.active, .btn-warning.active, .btn-danger.active, .btn-success.active, .btn-info.active, .btn-inverse.active {
    color: rgba(255, 255, 255, 0.75);
}

.btn-primary {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #e7d785;
    background-image: -moz-linear-gradient(top, #fffeb8, #c49c38);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fffeb8), to(#c49c38));
    background-image: -webkit-linear-gradient(top, #fffeb8, #c49c38);
    background-image: -o-linear-gradient(top, #fffeb8, #c49c38);
    background-image: linear-gradient(to bottom, #fffeb8, #c49c38);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fffffeb8', endColorstr='#ffc49c38', GradientType=0);
    border-color: #c49c38 #c49c38 #896d27;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    * background-color:#c49c38;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled = false);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
    color: #ffffff;
    background-color: #c49c38;
    * background-color:#b08c32;
}

.btn-primary:active, .btn-primary.active {
    background-color: #9c7c2d \9;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled] {
    color: #ffffff;
    background-color: #c49c38;
    * background-color:#b08c32;
}

.btn-primary:active, .btn-primary.active {
    background-color: #9c7c2d \9;
}

.btn-warning {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #e7c44b;
    background-image: -moz-linear-gradient(top, #f9e27d, #cc9600);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f9e27d), to(#cc9600));
    background-image: -webkit-linear-gradient(top, #f9e27d, #cc9600);
    background-image: -o-linear-gradient(top, #f9e27d, #cc9600);
    background-image: linear-gradient(to bottom, #f9e27d, #cc9600);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#fff9e27d', endColorstr='#ffcc9600', GradientType=0);
    border-color: #cc9600 #cc9600 #805e00;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    * background-color:#cc9600;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled = false);
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
    color: #ffffff;
    background-color: #cc9600;
    * background-color:#b38300;
}

.btn-warning:active, .btn-warning.active {
    background-color: #997100 \9;
}

.btn-warning:hover, .btn-warning:focus, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] {
    color: #ffffff;
    background-color: #cc9600;
    * background-color:#b38300;
}

.btn-warning:active, .btn-warning.active {
    background-color: #997100 \9;
}

.btn-danger {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #cc4036;
    background-image: -moz-linear-gradient(top, #dc4e44, #b32b21);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#dc4e44), to(#b32b21));
    background-image: -webkit-linear-gradient(top, #dc4e44, #b32b21);
    background-image: -o-linear-gradient(top, #dc4e44, #b32b21);
    background-image: linear-gradient(to bottom, #dc4e44, #b32b21);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffdc4e44', endColorstr='#ffb32b21', GradientType=0);
    border-color: #b32b21 #b32b21 #721c15;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    * background-color:#b32b21;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled = false);
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
    color: #ffffff;
    background-color: #b32b21;
    * background-color:#9d261d;
}

.btn-danger:active, .btn-danger.active {
    background-color: #872119 \9;
}

.btn-danger:hover, .btn-danger:focus, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled] {
    color: #ffffff;
    background-color: #b32b21;
    * background-color:#9d261d;
}

.btn-danger:active, .btn-danger.active {
    background-color: #872119 \9;
}

.btn-success {
    color: #ffffff;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
    background-color: #83a94c;
    background-image: -moz-linear-gradient(top, #95bf52, #678943);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#95bf52), to(#678943));
    background-image: -webkit-linear-gradient(top, #95bf52, #678943);
    background-image: -o-linear-gradient(top, #95bf52, #678943);
    background-image: linear-gradient(to bottom, #95bf52, #678943);
    background-repeat: repeat-x;
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff95bf52', endColorstr='#ff678943', GradientType=0);
    border-color: #678943 #678943 #40562a;
    border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
    * background-color:#678943;
    filter: progid: DXImageTransform.Microsoft.gradient(enabled = false);
}

.btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled] {
    color: #ffffff;
    background-color: #678943;
    * background-color:#5a783b;
}

.btn-success:active, .btn-success.active {
    background-color: #4d6732 \9;
}


.header-login-signup{
	padding: 20px 40px;
	height: 80px;
	color: #afb035;
	box-sizing: border-box;
}

.header-login-signup .header-limiter {
	max-width: 1200px;
	text-align: center;
	margin: 0 auto;
}

/* Logo */

.header-login-signup .header-limiter h1{
	float: center;
	font: normal 28px Cookie, Arial, Helvetica, sans-serif;
	line-height: 20px;
	margin: 0 0px 10px 0;
}

.header-login-signup .header-limiter h1 span {
	color: #5383d3;
}

/* The navigation links */

.header-login-signup .header-limiter a {
	color: #ffffff;
	text-decoration: none;
}

.header-login-signup .header-limiter nav {
	font:16px Arial, Helvetica, sans-serif;
	line-height: 40px;
	float: left;
	margin: 0 0 0 60px;
	padding: 0;
}

.header-login-signup .header-limiter nav a{
	font-size: 14px;
	display: inline-block;
	padding: 0 5px;
	opacity: 0.9;
	text-decoration:none;
	line-height: 1;
}

.header-login-signup .header-limiter nav a:hover {
	opacity: 1;
}

.header-login-signup .header-limiter nav a.selected {
	color: #608bd2;
}

/* Login/Sign up buttons */

.header-login-signup .header-limiter ul {
	font: 14px Arial, Helvetica, sans-serif;
	list-style: none;
	line-height: 1;
	float: right;
}

.header-login-signup .header-limiter ul li {
	display: inline-block;
	margin-left: 15px;
	opacity:0.9;
}

.header-login-signup .header-limiter ul li:hover{
	opacity: 1;
}

/* The sign up button */

.header-login-signup .header-limiter ul li:last-child a {
	font-weight: bold;
	background-color: #3a3c3e;
	padding: 10px 15px;
	border-radius: 3px;
}

/* Making the header responsive */

@media all and (max-width: 600px) {

	.header-login-signup {
		padding: 25px;
		height: 85px;
	}

	.header-login-signup .header-limiter h1 {
		float: none;
		margin: -8px 0 2px;
		text-align: center;
		font-size: 24px;
		line-height: 1;
	}

	.header-login-signup .header-limiter nav {
		margin: 0;
		float: none;
	}

	.header-login-signup .header-limiter nav li a {
		font-size: 13px;
	}

	.header-login-signup .header-limiter ul {
		display: none;
	}

}


.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #192229; /* dunkles Blau/Schwarz */
  padding: 0.5rem 1rem;
  color: #ccc;
}

.header-left, .header-right {
  display: flex;
  align-items: center;
}

.search-container {
  display: flex;
  align-items: center;
  background: #2e3a42;
  padding: 0.3rem 0.5rem;
  border-radius: 4px;
  margin-right: 1rem;
}

.search-container input {
  background: transparent;
  border: none;
  color: #ccc;
  font-size: 0.9rem;
  margin-left: 0.5rem;
  outline: none;
}

.search-container .search-icon {
  color: #ccc;
}

.logout-button {
  background: none;
  border: 1px solid #3a464d;
  color: #ccc;
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  font-size: 0.9rem;
  cursor: pointer;
}

.logout-button:hover {
  background: #3a464d;
}

/* Dunkles Banner über die gesamte Breite */
.dark-banner {
}

/* Inhalt rechtsbündig anordnen */
.banner-content {
  display: flex;
  justify-content: flex-end; /* Elemente nach rechts ausrichten */
  align-items: center;
  margin-bottom: 1rem;
}

/* Beispiel-Styling für Eingabefelder und Buttons */
.banner-content input {
  border: none;
  color: #733236;
  padding: 10px 20px;
  margin-right: 0.1rem;
  border-radius: 10px;
}

.banner-content button {
	background-color: #e7c552;
	color: white;
	padding: 10px 20px;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	color: #733236;
	margin-right: 1rem;
}

.banner-content button:hover {
  background: #e7a552;
}

.search-block {
	color: white;
	border: none;
	border-radius: 10px;
	cursor: pointer;
	color: #733236;
}