/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
:root {
  	--main-bg-color: brown;
	--cyian: #08c9d8;
	--orange: #f9ae12;
	--dark: #263133;
	--light: #999;
}

/* aclonica-regular - latin */
@font-face {
  font-family: 'AvenirNext';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/AvenirNextLTPro-Regular.woff') format('woff2'), /* Super Modern Browsers */
       url('../fonts/AvenirNextLTPro-Regular.woff2') format('woff')
}
@font-face {
  font-family: 'AvenirNext';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/AvenirNextLTPro-Bold.woff') format('woff2'), /* Super Modern Browsers */
       url('../fonts/AvenirNextLTPro-Bold.woff2') format('woff')
}



html,
body {
	background: rgb(251,251,251);
	background: -webkit-linear-gradient(55deg, rgba(251,251,251,1) 0%, rgba(217,217,217,1) 100%);
	background: -o-linear-gradient(55deg, rgba(251,251,251,1) 0%, rgba(217,217,217,1) 100%);
	background: linear-gradient(145deg, rgba(251,251,251,1) 0%, rgba(217,217,217,1) 100%);
	min-height: 100vh;
	font-family: 'AvenirNext';
	font-weight: 400;
	color: var(--dark);
	width: 100%;
	background-attachment:fixed;
}
.container {
	width: 100%;
	max-width: 1300px;
	float: left;
	margin: 0 calc(50% - 650px);
}
@media all and (max-width: 1340px) {
	.container {
		width: calc(100% - 40px);
		margin: 0 20px;
	}
	.col-3.nav_block {
		width: 25%!important;
		min-width: 250px!important;
	}
	
}
@media all and (max-width: 1040px) {
	.container {
		width: 1000px!important;
		margin: 0 20px!important;
	}
}
.oscarh1 {
	text-align: right;
}
img.kunde {
  margin-top: 5px;
  object-fit: contain;
  max-width: 300px;
  max-height: 100px;
  right: 0;
  position: absolute;
}
.fixedheight {
	height: 100px;
	float: left;
	width: 100%;
}
.nav_block {
	position: fixed;
	margin-top: 49px;
}
.content_block {
	  position: relative;
	  margin-left: 25%;
}
#header {
  	width: 100%;
  	float: left;
  	min-height: 40px;
  	background: var(--cyian);
	position: fixed;
	z-index: 9999;
}
#header .container {
	position: relative;
}
#header .logo {
  	position: absolute;
  	left: 0;
  	top: -50px;
}
#header .logo img {
 	width: 200px;
	z-index: 9999;
}
#login {
  width: 500px;
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}
#login h2 {
  font-size: 20px;
  margin-bottom: 20px;
}
#login form {
  width: 100%;
  float: left;
}
#login input {
  width: 100%;
  float: left;
  margin-bottom: 20px;
  border-radius: 0;
  border: 1px solid #ccc;
  padding: 10px 15px;
}
#login button {
  width: 100%;
  float: left;
  border: 0;
  background: var(--cyian);
  padding: 10px 0;
  cursor: pointer;
}
#login a {
  width: 100%;
  float: left;
  text-align: right;
  margin-top: 10px;
  font-size: 14px;
  color: var(--orange);
}
#content {
	width: 100%;
	float: left;
	margin-top: 80px;
	margin-bottom: 100px;
}
#footer {
  	position: fixed;
  	bottom: 0;
  	width: 100%;
  	background: var(--dark);
  	color: #fff;
	padding: 20px 0;
	z-index: 9999;
}
#footer .legal,
#footer .copyright {
	width: 50%;
	float: left;
}
#footer .copyright {
	text-align: right;
}
#footer a {
	color: #fff;
	text-decoration: none;
}
.alert {
  width: 100%;
  float: left;
  background: var(--cyian);
  color: #fff;
  padding: 15px;
  margin-bottom: 20px;
  font-size: 14px;
}
.alert.error {
	background: #dd4b39;
}
.alert.success {
	background: #44C97D;
}



.col-4 {
	width: 33.3333%;
	float: left;
}
.col-3 {
	width: 25%;
	float: left;
}
.col-6 {
	width: 50%;
	float: left;
}
.col-8 {
	width: 66.66666%;
	float: left;
}
.col-5 {
	width: 41.66666%;
	float: left;
}
.col-9 {
	width: 75%;
	float: left;
}
.col-12 {
	width: 100%;
	float: left;
}
.top_nav {
	width: 100%;
	float: left;
}
.top_nav li {
	width: 33.3333%;
	float: left;
	list-style: none;
	text-align: center;
}
.top_nav li img {
  max-width: 40px;
  object-fit: contain;
  width: 100%;
  height: 50px;
}
.top_nav span {
	width: 100%;
	float: left;
}
.top_nav a {
	color: var(--dark);
}
.kundenkonto_nav {
	width: 100%;
	float: left;
}
.kundenkonto_nav li {
  list-style: none;
  margin-bottom: 7px;
}
.kundenkonto_nav li a {
  color: var(--dark);
  text-decoration: none;
}
.kundenkonto_nav a.logout {
	color: var(--cyian);
}
.kundenkonto_nav li.active a {
	font-weight: 900;
}
.mt-70 {
	margin-top: 70px;
	position: relative;
}
.kundenkonto h1 {
  	font-size: 20px;
   	margin-bottom: 5px;
}
.kundenkonto .button {
  width: 100%;
  float: left;
  border: 0;
  background: var(--dark);
  padding: 10px 0;
  cursor: pointer;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
.kundenkonto .button.cyan {
	background: var(--cyian);
	color: var(--dark);
}

.kundenkonto .whitebox {
	width: 100%;
	float: left;
	background: #fff;
	border: 1px solid #ccc;
	padding: 20px 30px;
	margin-bottom: 20px;
	position: relative;
}
.kundenkonto .whitebox .icon {
  background: #F9B000;
  width: 20px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 0;
}
.kundenkonto .kundenkonto .mb-20 {
	margin-bottom: 20px;
}
.kundenkonto .whitebox .col-12 {
	padding-top: 10px;
	padding-bottom: 10px;
}
.whitebox h2 {
	font-size: 20px;
	margin-bottom: 15px;
}
.whitebox .col-12:last-child {
	margin-bottom: 0;
}
.kundenkonto .kunden_logo {
	width: 100%;
	max-width: 200px;
}
.kundenkonto input,
.kundenkonto select {
  width: 100%;
  float: left;
  margin-bottom: 20px;
  border-radius: 0;
  border: 1px solid #ccc;
  padding: 10px 15px;
}
.btn-inline {
	width: auto!important;
	display: inline-block;
	font-size: 14px!important;
	padding-left: 30px!important;
	padding-right: 30px!important;
}
.button.light {
	background: var(--light);
}
.mr-20 {
	margin-right: 20px;
}
.right {
	float: right!important;
}
.with-inputnote input {
	margin-bottom: 0;
}
.inputnote {
  font-size: 12px;
  margin-bottom: 20px;
  width: 100%;
  float: left;
  margin-top: 3px;
}
.admin-center label {
	width: 100%;
	float: left;
}
.admin-center .col-4 {
	width: 33.333%!important;
	float: left!important;
}
.admin-center .col-2 {
	width: 16.666%!important;
	float: left!important;
}
.home-page img {
	width: 100%;
	float: left;
}
.home-page .whitebox * {
	box-sizing: content-box;
}
.home-page .col-6.m-r-30 {
	width: calc(50% - 30px)!important;
}
.home-page .col-4.m-r-30 {
	width: calc(33.333% - 30px)!important;
}
.home-page ul {
	margin-left: 20px;
}
.home-page .whitebox p,
.home-page ul li {
	line-height: 30px;
}
.home-page .whitebox p {
	margin-bottom: 20px;
}
.home-page .whitebox p:last-child {
	margin-bottom: 0;
}
.m-r-30 {
	margin-right: 30px;
}
.home-page .whitebox h3 {
  font-weight: 600;
  font-size: 16px;
}
.home-page .whitebox span {
	font-size: 13px;
}
.home-page .line {
	width: 100%;
	float: left;
	margin-bottom: 20px;
}
.home-page .line:last-child {
	margin-bottom: 0;
}
.home-page .line .number {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	background: #f9b000;
	font-weight: 700;
	line-height: 30px;
	float: left;
}
.home-page .line .text {
	width: calc(100% - 50px);
	float: left;
	margin-left: 20px;
}
.bestellungenbox .status img {
	height: 24px;
	margin-right: 8px;
}
.bestellungenbox .col-8 {
	position: relative;
	width: 66.666%;
	float: left;
}
.bestellungenbox .status {
	position: absolute;
	bottom: 0;
	right: 0;
}
.bestellungenbox .status span {
  margin-top: 4px;
  float: right;
}
.flex {
	display:flex; 
	justify-content: flex-end;
	flex-basis: 100%;
}
.flex .col-4 {
	flex-basis: 33.333%;
}
.flex .col-8 {
	display:flex; 
	flex-direction: column;
	align-items:center;
	flex-basis: 66.666%;
}
a.link-dark {
	color: var(--dark);
	text-decoration: none;
}
a.link-cyan {
	color: var(--cyian);
	font-weight: 700;
	text-decoration: none;
}
.backend table,
 table.frontend {
  	width: 100%;
  	float: left;
  	margin-top: 20px;
	table-layout: auto !important;
}
.backend table *,
 table.frontend * {
	text-align: left;
}
.backend table thead,
.backend table tbody,
.backend table tr,
 table.frontend thead,
 table.frontend tbody,
 table.frontend tr{
  	width: 100%;
  	float: left;
}
.backend table thead,
 table.frontend thead{
	background: #F6F6F6;
}
.backend table thead,
.backend table tr,
 table.frontend thead,
 table.frontend tr{
	border-bottom: 1px solid var(--light);
}
.backend table tr,
table.frontend tr,
.frontend tr{
	padding: 5px 0;
}
.backend table tr:last-child,
 table.frontend tr:last-child{
	border-bottom: 0;
}
.backend table tr {}
.backend table td,
.backend table th,
table.frontend tr,
table.frontend th,
table.frontend td {
	padding: 0 5px;
}
table.frontend tr {
  padding: 5px 0;
}
.col-1 {
	float: left;
	width: 8.3333%;
}
.col-2 {
	float: left;
	width: 16.6666%;
}
.col-3 {
	float: left;
	width: 25%;
}
.col-4 {
	float: left;
	width: 33.3333%;
}
.col-5 {
	float: left;
	width: 41.6666%;
}
.col-6 {
	float: left;
	width: 50%;
}
.col-7 {
	float: left;
	width: 58.3333%;
}
.col-8 {
	float: left;
	width: 66.6666%;
}
.col-9 {
	float: left;
	width: 75%;
}
.col-10 {
	float: left;
	width: 83.3333%;
}
.col-11 {
	float: left;
	width: 91.6666%;
}
.col-12 {
	float: left;
	width: 100%;
}
.backend .whitebox a {
	color: var(--cyian);
}
a.smallbtn {
  background: var(--light);
  color: #fff!important;
  text-decoration: none;
  padding: 4px 8px;
  float: left;
	margin-bottom: 5px;
}
a.smallbtn:last-child {
	margin-bottom: 0px;
}

input:disabled,
input.disabled {
	cursor: not-allowed!important;
}
.subnav {
  margin-left: 20px;
  margin-top: 10px;
	margin-bottom: 5px;
}
li.active .subnav li a {
	font-weight: 400;
}
span.fill {
  position: absolute;
  background: var(--cyian);
  width: 20px;
  height: 20px;
  border-radius: 10px;
  color: #fff;
  font-size: 12px;
  line-height: 20px;
  margin-left: -10px;
  margin-top: -3px;
}
.steps {
	width: 100%;
	float: left;
	margin-top: 20px;
	margin-bottom: 30px;
}
.steps .step {
	width: 20%;
	float: left;
	text-align: center;
	position: relative;
	color: var(--dark)!important;
	text-decoration: none!important;
}
.steps .step span {
  width: 50px;
  height: 50px;
  background: var(--dark);
  border-radius: 50%;
  margin: 0 calc(50% - 25px);
  float: left;
  text-align: center;
  color: #fff;
  font-size: 20px;
  line-height: 50px;
	margin-bottom: 10px;
	z-index: 20;
	position: relative;
}
.steps .step.active span {
	background: var(--cyian);
}
.steps .step1::after,
.steps .step2::after,
.steps .step3::after,
.steps .step4::after{
  content: "";
  width: 50%;
  height: 1.5px;
  position: absolute;
  top: 25px;
  background: var(--dark);
  right: 0;
  z-index: 10;
}
.steps .step2::before,
.steps .step3::before,
.steps .step4::before,
.steps .step5::before{
  content: "";
  width: 50%;
  height: 1.5px;
  position: absolute;
  top: 25px;
  background: var(--dark);
  left: 0;
  z-index: 10;
}
.steps .step.active::before{
	background: var(--cyian);
}
.steps .step.active::after{
	background: var(--cyian);
}

.breadcrumb ul {
	list-style: none;
	margin-top: 10px;
}
.breadcrumb ul li:first-child::before {
  margin: 0;
  background: none;
}
.breadcrumb ul li::before {
  content: "";
  width: 1.5px;
  height: 15px;
  background: var(--light);
  display: inline-block;
  margin: 0 10px -2px;
  transform: rotate(20deg);
}
.breadcrumb ul li {
	display: inline-block;
}
.breadcrumb ul li a {
	color: var(--dark);
	text-decoration: underline;
}
.breadcrumb ul li.active a {
	color: var(--cyian);
	text-decoration: none;
}
.content_block .col-12:first-child p {
	margin-bottom: 20px;
}
.warning_box {
  float: right;
  width: 100%;
  max-width: 180px;
  background: #dedede;
  padding: 5px 15px;
}

 /* Customize the label (the container) */
.ccontainer {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.ccontainer.with-border .checkmark {
	border: 2px solid var(--dark);
}
.ccontainer.with-border .checkmark::after {
	left: 5px;
  	top: 1px;
}
/* Hide the browser's default checkbox */
.ccontainer input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  z-index: 999;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
}

/* On mouse-over, add a grey background color */
.ccontainer:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.ccontainer input:checked ~ .checkmark {
  background-color: var(--cyian);
}

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

/* Show the checkmark when checked */
.ccontainer input:checked ~ .checkmark:after {
  display: block;
}
.ccontainer label {
	font-size: 16px;
	float: left;
}

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

input:focus,
select:focus {
  border: 1px solid var(--cyian);
	outline: none;
}