/*
Theme Name: Bauschildportal
Theme URI: http://www.signunddesign.com/
Author: SIGN+DESIGN Werbeagentur
Author URI: https://www.signunddesign.com/
Description: Wozu lange um den „heißen Brei“ reden: Unser Ziel ist Ihr Erfolg! Denn nur erfolgreiche Kunden sind auf Dauer glückliche Kunden. Und um Sie glücklich zu machen, richten wir unsere Energie auf Ihren stimmigen Auftritt und die Entwicklung zielführender Kommunikationsmaßnahmen. Werbung darf bei uns Spaß machen und ist trotzdem niemals Selbstzweck. Was zählt ist Ihr Erfolg! Die Früchte unserer Bemühungen: treue, langjährige Kunden und zahlreiche Weiterempfehlungen – mit ein Grund dafür, dass viele unserer Kunden aus dem Bereich Immobilien stammen. Und hier liegt auch seit über 20 Jahren ein Schwerpunkt unserer Arbeit.
Version: 2.1
*/@charset "UTF-8";

/*Global Reset*/
body,html,h1,h2,h3,h4,h5,h6,p,ul,ol,li{padding:0;margin:0;}
body,html{overflow-x:hidden;width:100%;-webkit-font-smoothing:antialiased;-webkit-overflow-scrolling:touch;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav{position: relative;}
a{outline:none !important;text-decoration:none;}
ol,ul,li{list-style:none;}
p {cursor:text;}
img{-ms-interpolation-mode:bicubic; vertical-align: bottom;}

/* ########### Fonts ########### */

/* inter-200 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200;
  src: url('/assets/fonts/inter-v7-latin-200.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('/assets/fonts/inter-v7-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/assets/fonts/inter-v7-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
  url('/assets/fonts/inter-v7-latin-200.woff') format('woff'), /* Modern Browsers */
  url('/assets/fonts/inter-v7-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
  url('/assets/fonts/inter-v7-latin-200.svg#Inter') format('svg'); /* Legacy iOS */
}

/* inter-regular - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/inter-v7-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('/assets/fonts/inter-v7-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/assets/fonts/inter-v7-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
  url('/assets/fonts/inter-v7-latin-regular.woff') format('woff'), /* Modern Browsers */
  url('/assets/fonts/inter-v7-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
  url('/assets/fonts/inter-v7-latin-regular.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-600 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/inter-v7-latin-600.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('/assets/fonts/inter-v7-latin-600.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/assets/fonts/inter-v7-latin-600.woff2') format('woff2'), /* Super Modern Browsers */
  url('/assets/fonts/inter-v7-latin-600.woff') format('woff'), /* Modern Browsers */
  url('/assets/fonts/inter-v7-latin-600.ttf') format('truetype'), /* Safari, Android, iOS */
  url('/assets/fonts/inter-v7-latin-600.svg#Inter') format('svg'); /* Legacy iOS */
}
/* inter-800 - latin */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  src: url('/assets/fonts/inter-v7-latin-800.eot'); /* IE9 Compat Modes */
  src: local(''),
  url('/assets/fonts/inter-v7-latin-800.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('/assets/fonts/inter-v7-latin-800.woff2') format('woff2'), /* Super Modern Browsers */
  url('/assets/fonts/inter-v7-latin-800.woff') format('woff'), /* Modern Browsers */
  url('/assets/fonts/inter-v7-latin-800.ttf') format('truetype'), /* Safari, Android, iOS */
  url('/assets/fonts/inter-v7-latin-800.svg#Inter') format('svg'); /* Legacy iOS */
}

/* ########### Grids ########### */

/* Setup */

/* Variables */

* {
  --font-family: "Inter", sans-serif;
  --transition: .25s ease-in-out;
  --box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.1);
  --border-radius: 5px;
  --orange: #3fa535;
  --darkblue: #002a52;
  --lightblue: #4F5D74;
  --gray: #BFC0C0;
  --light-gray: #FCFCFC;
  --light-gray2: #efefef;
  --marker: #ffffff;
  --akzent-color-blue: #004f9f;
  --darkcolor: #323232;

  /* Alerts */

  --alert-green: #28a745;
  --alert-yellow: #ffc107;
  --alert-red: #dc3545;

  --status-auftragbestellt: #b8daff; --status-auftragbestellt-typo: #004085;
  --status-auftragaufbau: #c3e6cb; --status-auftragaufbau-typo: #155724;
  --status-auftragabholen: #fff3cd; --status-auftragabholen-typo: #856404;
  --status-auftragabbau: #f5c6cb; --status-auftragabbau-typo: #721c24;
}


.main-setup-grid {display: grid; grid-template-columns: 300px 1fr; align-items: stretch; transition: var(--transition); position: relative;}
.main-setup-grid.collapse {grid-template-columns: 50px calc(100% - 50px); transition: var(--transition);}
.main-setup-grid-item {min-height: 100vh;}
.main-setup-grid-item.mode {background: var(--darkcolor);}
.main-setup-grid.login {grid-template-columns: 400px calc(100% - 400px);}

@media (max-width: 1600px) {
  .main-setup-grid {grid-template-columns: 260px calc(100% - 260px);}
}

/* Diverse Dashboard Grids */

.boxboxbox-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 3%;}
.autoauto-grid {display: grid; grid-template-columns: auto auto; grid-template-rows: auto; justify-content: space-between; grid-column-gap: 50px;}
.dash-grid {display: grid; grid-template-columns: 1fr 1fr 1fr 0.6fr; grid-template-rows: auto; justify-content: space-between; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-areas: "course course order order" "history history history history";}

.bauschild-detail-grid {display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto; justify-content: space-between; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-areas: "status status map map map" "detail-data detail-data map map map" "detail-data detail-data offset foto foto" "detail-data detail-data offset ";}

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

@media (max-width: 1600px) {
  .boxboxbox-grid {display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 3%;}
}

/* Meine Bauschilder (5-Spaltig) */

.history-detail-page-grid2 {display: grid; grid-template-columns: 60% auto; align-items: flex-start; grid-template-rows: auto; grid-column-gap: 50px; grid-row-gap: 50px; grid-template-areas: "history-detail order" "history-detail course";}
.history-detail-grid{grid-template-columns: 10% 12% 25% 20% 15% 11% 5%; grid-template-rows: auto; justify-items: start;}
.history-grid.detail-column {display: grid; grid-template-columns: 10% 12% 25% 20% 15% 11% 5%; grid-template-rows: auto; justify-items: start;}


/* Globals */

.cf {zoom:1;}
.cf:before,
.cf:after {content:""; display:table;}
.cf:after {clear:both;}

hr {padding: 0; margin: 0; border: 1px solid var(--lightblue);}
.fl {float: left;}
body {font-family: var(--font-family); color: var(--darkblue); font-weight: 400; width: 100%; font-size: 14px;}

.light-gray {background: var(--light-gray);}

/* Typo */

h2 {font-size: 16px; font-weight: 600; color: var(--darkblue);}
h2.hl-box {color: var(--darkblue); font-size: 20px;}
a {color: var(--darkblue);}
p {font-size: 14px; line-height: 22px; font-weight: 400;}

.alert-green {color: var(--alert-green); font-weight: 700;}
.alert-yellow {color: var(--alert-yellow); font-weight: 700;}
.alert-red {color: var(--alert-red); font-weight: 700;}

.bold {font-weight: 700;}
.align-center {text-align: center;}
::placeholder {font-size: 14px; color: var(--light-gray);}
.alert-orange {color: var(--orange);}

/* ########### Inputs, Labels, Selects ########### */

.input-grid {display: grid; grid-template-columns: repeat(2, 50%); justify-content: space-between; margin-bottom: 10px;position: relative;}
.input-grid_3 {display: grid; grid-template-columns: repeat(3, 33%); justify-content: space-between; margin-bottom: 25px;position: relative;}
/*.input-grid_1_2 {display: grid; grid-template-columns: 2fr 8fr; grid-column-gap: 50px; justify-content: space-between; margin-bottom: 25px;position: relative;}*/
.input-grid_1_2 {display: grid; grid-template-columns: 3fr 7fr; grid-column-gap: 50px; justify-content: space-between; margin-bottom: 25px;position: relative;}
.input-grid.two-choices {display: block;}

form {max-width: 650px; width: 100%;}
.modal-content form {max-width: 100%;}
label {height: 50px; line-height: 50px; width: 100%; font-weight: 600;}
.dataTables_length label {height: 50px; line-height: 25px; width: 100%; font-weight: 600;}
input, select, textarea {border: none; border-radius: var(--border-radius); background: transparent; padding: 10px; /*height: 50px;*/ box-sizing: border-box; width: 100%;font-family: var(--font-family); }
input:focus {outline: none;}

.modal-content label {text-align: right;}
.modal-content .input-grid {column-gap: 20px;}


input[type="checkbox"] {border-radius: 5px; padding: 10px;height: auto;width: auto; }

.input-wrp {display: flex; justify-content: space-between;}
.input-wrp.nospace {justify-content: space-between;}
.input-flexfull {flex-basis: 100%;}
.input-flex {flex-basis: 48%;}
.input-flex-3-1 {flex-basis: 46%;}
.input-flex-3-2 {flex-basis: 23%;}
.input-flex.white, .input-flexfull.white {background: #fff;}
.input-group textarea {color: #000; height: 100px;}

input[type=checkbox].image-checkbox {display: none;}
input[type=checkbox].image-checkbox+label {display: block;height: 350px; transition: var(--transition); background-repeat: no-repeat; background-position: center; background-size: cover; flex-basis: 48%;}
input[type=checkbox].image-checkbox+label:hover {cursor: pointer;}
input[type=checkbox].image-checkbox:checked+label {border: 5px solid var(--orange); box-sizing: border-box; transition: var(--transition);}
.bild_sd1123 {background-image: url("../assets/images/SD1123.jpg");}
.bild_sd1731 {background-image: url("../assets/images/SD1731.jpg");}
.bild_sd1024 {background-image: url("../assets/images/SD1024.jpg");}
.bild_sd1028 {background-image: url("../assets/images/SD1028.jpg");}
div.design {display: block;height: 400px; transition: var(--transition); background-repeat: no-repeat; background-position: center; background-size: cover; flex-basis: 48%;cursor: pointer;}
.ml-25 {margin-left: 25px;}
.ml-30 {margin-left: 30px;}
.ml-30 {margin-left: 30px;}

.aktivborder {border: 5px solid var(--alert-green); position: relative;}
.aktivborder:after {content:''; position: absolute; background: url("/assets/icons/item-select.svg") no-repeat; background-size: contain; width: 30px; height: 30px; top: -15px; right: 15px;}
.aktivbordertr {background-color:var(--alert-green);box-shadow:0px 0px 0px 5px var(--alert-green) inset;}

@media (max-width: 900px) {
  .input-grid {grid-template-columns: 100%;}
}

@media (max-width: 700px) {
  .input-wrp {display: block;}
  .input-wrp input {margin-bottom: 20px;}
}

/* Designs */
ul.designs {display: flex;}
ul.designs li {width: 230px; height: 350px;margin-right: 20px;}
ul.designs li img {width: 100%;}
.schilddesign {width: auto; height: 60px; background-size: contain;background-repeat: no-repeat;}
.schilddesignliste {width: 50px;}
.schilddesignliste img {width: 100%;}
.text-left {text-align: left;}
table#designliste tbody tr {cursor: pointer;}

#designliste .history-grid.aktivbordertr .choose {background: var(--marker); border-radius: 5px 0 0 5px;}



.bezeichnung {font-weight: 600; padding: 10px 0 10px 10px; font-size: 16px;}

#tab3 > .input-grid_1_2 {margin-bottom: 40px;}


#tab4 .gridbox {grid-template-columns: 100%;}
#tab4 .gridbox #karteimg {width: 450px;}
#tab4 .gridbox .imgage {/*width: 100%;*/}
#tab4 .gridbox .inbox .input-grid {margin: 0; padding: 15px 5px;}
#tab4 .gridbox .inbox .input-grid:nth-child(even) {background: #f5f5f5;}
#tab4 .gridbox .typ-hl {font-weight: 600; margin: 15px 0; display: block;}
#tab4 .gridbox #kartstatisch {width: 100%;}
#tab4 .gridbox > .inbox > .mb20  {margin-bottom: 35px;}
#tab4 .gridbox .inbox.image {width: 350px;}
#tab4 .gridbox .inbox.image img {width: 100%;}
/* Buttons */

.btn-action a {font-size: 14px; color: #fff; background: var(--orange); padding: 10px 30px 10px 10px; position: relative; cursor: pointer; float: left;}
.btn-action a.nofloat {float: none;}
a.btn-action {cursor: pointer;}
.btn-action a:after {content: ''; background: url("/assets/icons/arrow-right-white.svg") no-repeat; background-size: contain; width: 12px; height: 12px; position: absolute; right: 7px; top: 14px;}
.btn-orange a {font-size: 14px; color: #fff; background: var(--orange); border-radius: 50px; padding: 16px 40px 14px 20px;}
.btn-light-gray a {font-size: 14px; color: var(--darkblue); background: var(--light-gray); border-radius: 5px; padding: 13px; display: flex; align-items: center;}

.btn-action.sticky {position: absolute; top: 0px; right: 0px;}

.btn-action.sticky.backbutton {position: absolute; top: 0px; right: 160px;}
.btn-action.sticky.backbutton a.btn-action {font-size: 14px; color: #fff; background: var(--orange); padding: 10px 10px 10px 30px; position: relative; cursor: pointer; float: left;}
.btn-action.sticky.backbutton a.btn-action:after {content: ''; background: url("/assets/icons/arrow-left-white.svg") no-repeat; background-size: contain; width: 12px; height: 12px; position: absolute; right: 66px; top: 15px;}


span.btn-action {font-size: 14px; color: #fff; background: var(--orange); border-radius: 50px; padding: 8px 30px 8px 10px; position: relative;}
span.btn-action:after {content: ''; background: url("/assets/icons/arrow-right-white.svg") no-repeat; background-size: contain; width: 12px; height: 12px; position: absolute; right: 12px; top: 15px;}
.btnlink, .btnlinkVerlaengern {cursor: pointer; border: 0; background: none;}
.btnlink i, .btnlinkVerlaengern i {color: var(--orange);}

.btnlinkedit {cursor: pointer; border: 0; background: none;}
.btnlinkedit i {color: var(--orange);}

.importfehler {background: var(--alert-red); padding: 10px; color: #ffffff;}
.importfehler.zahlungok {background: var(--alert-green); padding: 10px; color: #ffffff;}


/* Margins & Widths */

.mb10 {margin-bottom: 10px;}
.mb20 {margin-bottom: 20px;}
.mb30 {margin-bottom: 30px;}
.mb40 {margin-bottom: 40px;}
.mb50 {margin-bottom: 50px;}
.pad {padding: 50px; box-sizing: border-box;}
.pad.wrp {max-width: 1500px;}
.pad.wrp.scrollX {overflow: scroll;}
.pad_dashboard {padding: 0px 50px; box-sizing: border-box;}
.pad2 {padding: 0 50px; box-sizing: border-box;}
.pad-topbottom {padding: 30px 0; box-sizing: border-box;}
.clear {clear: both;}
.pl50 {margin-left: 50px;}
.m-top {margin-top: -100px;}
.mt10 {margin-top: 10px;}
.mt150 {margin-top: 150px;}
.banner {max-width: 1200px;background: var(--alert-yellow);padding: 20px;}
.banner img {width: 100%;}

#serviceanfragen.pad {padding: 0 50px;}
/* Classic Box */

a.white {color: #fff;}

.boxboxbox-grid a, .box span, .boxboxbox-grid a p {cursor: pointer;}

.box {border-radius: var(--border-radius); box-shadow: var(--box-shadow); padding: 35px 25px; display: block;transition: var(--transition);}
.box.hinweis {background: #d8f3e2; width: 530px;}

#dashboard .boxboxbox-grid a:hover {transition: var(--transition);}
#dashboard .boxboxbox-grid a:hover h2.hl-box {transition: var(--transition);}
#dashboard .boxboxbox-grid a:hover {background: var(--lightblue); transition: var(--transition);}
#dashboard .boxboxbox-grid a:hover h2.hl-box {color: var(--light-gray); transition: var(--transition);}


/* ########### Sidebar ########### */

aside#login-sidebar {width: 100%; max-width: 400px; background: var(--darkblue); height: 100vh; box-shadow: var(--box-shadow); position: fixed; z-index: 5;}
aside#login-sidebar .logo-wrp {box-sizing: border-box;}
aside#login-sidebar .logo-wrp svg {width: 260px; box-sizing: border-box;}
.logo-wrp {background: #ffffff;}
.logo-wrp .logo {padding: 20px;}


aside#login-sidebar .login-form {height: calc(100vh - 222px); display: flex; align-items: center;}

aside#sidebar {background: var(--darkblue); height: 100%;}
aside#sidebar.collapse {width: 50px;}
aside#sidebar .sidebar-collapse {width: 50px; height: 50px; border-radius: 50px; background: #fff; position: absolute; top: 50px; right: -25px; border: none; transition: var(--transition);}
aside#sidebar .sidebar-collapse:hover {cursor: pointer;}
aside#sidebar .sidebar-collapse:focus {outline: none;}
aside#sidebar .sidebar-collapse .icon-wrp {height: 15px; width: 15px; display: block; margin: 0 auto; overflow: hidden;}
aside#sidebar .sidebar-collapse .icon-wrp svg {width: 100%; height: 100%;}
aside#sidebar .sidebar-collapse .icon-wrp svg path {stroke: var(--orange)!important;}
aside#sidebar .logo-wrp svg {width: 100%;}

aside {overflow: auto;}
aside#sidebar #mainnav ul li a {height: 50px; font-size: 14px; display: flex; align-items: center; box-sizing: border-box; color: var(--light-gray); padding-left: 50px; width: 100%; transition: var(--transition); font-weight: 400; position: relative;}
aside#sidebar #mainnav ul li a:hover {background: var(--lightblue); transition: var(--transition);}
aside#sidebar #mainnav ul li a .svg {width: 20px; height: 20px; margin-right: 15px; display: block;}
aside#sidebar #mainnav ul li a .svg svg {width: 100%; height: 100%;}
aside#sidebar #mainnav ul li a .svg svg path {stroke: var(--light-gray)!important;}

aside#sidebar .logo-sd {width: 60%; height: 50px; display: block; position: absolute; left: 50%; transform: translateX(-50%); bottom: -10px;}
aside#sidebar .logo-sd svg {width: 100%; height: 100%;}

aside#sidebar.collapse .sidebar-collapse svg {transform: rotate(180deg); transition: var(--transition);}
aside#sidebar.collapse #mainnav ul li a {padding-left: 15px;}
aside#sidebar.collapse #mainnav ul li a span {display: none;}

aside#sidebar.collapse .logo-wrp {padding: 50px 0 0 0;}
aside#sidebar.collapse .logo-wrp svg {width: 100%; height: 50px;}
aside#sidebar.collapse .logo-wrp svg g[data-name="text"] {display: none;}

.ctasidebar {align-items: end;}

/* ########### Header ########### */
header {height: 102px;background: var(--akzent-color-blue);}
header#header h2.profile {color: var(--gray); font-size: 25px; margin: 20px;}
header#header h2.profile span {font-size: 10px; display: block; font-weight: 400; margin-bottom: 10px;}

header#header .autoauto-grid {position: relative;}
header#header .autoauto-grid-item:last-child {display: flex; align-items: flex-end;}
header#header .autoauto-grid-item .btn-light-gray:first-child {margin-right: 15px;}
header#header .autoauto-grid-item .btn-light-gray:first-child a .icon-wrp {margin-right: 15px;}
header#header .autoauto-grid-item .btn-light-gray a .icon-wrp {width: 20px; height: 20px; display: block;}
header#header .autoauto-grid-item .btn-light-gray a .icon-wrp svg {width: 100%; height: 100%;}
header#header .autoauto-grid-item .btn-light-gray a .icon-wrp svg g path {stroke: var(--orange);}

header#header .autoauto-grid-item .btn-light-gray a .icon-wrp.disable svg g path {stroke: var(--status-offen) !important;}
header#header .autoauto-grid-item .btn-light-gray a .icon-wrp.bearbeitet svg g path {stroke: var(--alert-green) !important;}


/* Notification Center */

.notification {position: relative; background: transparent!important;}
.notification svg path {stroke-width: 2px;}
.notification-center {position: absolute; right: 50px; top: 110px; width: 400px; max-width: 100%; box-sizing: border-box; transform: scale(0); transition: var(--transition); border-radius: 5px; background: #fff; box-shadow: var(--box-shadow);}
.notification-center ul li {padding: 15px 20px; font-weight: 600; line-height: 26px;}
.notification-center ul li:hover {background: var(--light-gray); border-radius: 5px;}
.notification-center h2 {padding: 20px;}
.notification-center.active {transform: scale(1); transition: var(--transition);}

/* ########### Dashboard ########### */

#dashboard .boxboxbox-grid .box svg {height: 25px; width: 25px;}
#dashboard .boxboxbox-grid .box svg path {stroke: var(--orange)!important;}

#dashboard .dash-grid .history { grid-area: history;}
#dashboard .dash-grid .history .autoauto-grid {align-items: end;}

.order { grid-area: order;}
.order .circle-graph-container {position: relative; width: 100%; height: 100%; display: grid; grid-template-columns: repeat(1,1fr);}
.order .circle-graph {position: relative; height: 100%;}
.order .circle-graph p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-weight: 700; color: var(--light-text-color); font-size: 20px;}
.order .circle-graph p span {font-weight: 400;}
.order .graph-one {height: 400px; /* set height for postioning */}
.order canvas {position: absolute;top: 50%; left: 50%; transform: translate(-50%,-50%);}

#dashboard .dash-grid .course { grid-area: course;}

.topteaser .seventythirty-grid {grid-template-columns: 65% auto;}
.topteaser .box:hover {transform: translateY(-5px); transition: var(--transition);}

.box.tut {background: var(--darkblue);}
.box.tut .boxflex {justify-content: center;}
.box.tut .boxflex .hl-box {color: #fff;}
.box.tut .boxflex .hl-box.hide, .box.tut.activity.hide,.box.tut.statistics.hide {display: none;}
.letzteaktivitaeten {display: grid;grid-row-gap: 20px;}
.letzteaktivitaeten.hide, .dash-grid.hide {display: none;}


.line-chart {-webkit-animation: fadeIn 600ms cubic-bezier(0.57, 0.25, 0.65, 1) 1 forwards;animation: fadeIn 600ms cubic-bezier(0.57, 0.25, 0.65, 1) 1 forwards;opacity: 0; width: 100%;}
.aspect-ratio {height: 0;padding-bottom: 50%;}

.chartjs-render-monitor {animation: chartjs-render-animation 0.1s!important;}

@-webkit-keyframes fadeIn {
  to {opacity: 1;}
}

@keyframes fadeIn {
  to {opacity: 1;}
}


@media (max-width: 1240px) {
  #dashboard .boxboxbox-grid.topteaser .box {margin-bottom: 50px;}
  #dashboard .boxboxbox-grid.topteaser .box:last-child {margin-bottom: 0;}
}

/* ########### History ########### */

.history .table,
#history-detail .table {display: grid; grid-row-gap: 20px;}

.history-grid {grid-template-columns: 30% 60% 5% 5%; grid-row-gap: 20px; transition: var(--transition); box-shadow: var(--box-shadow); display: grid; background: var(--light-gray); border-radius: var(--border-radius); padding: 15px;}
#kundeninfos .history-grid {grid-template-columns: 15px 10% 20% 70%; grid-row-gap: 20px; transition: var(--transition); box-shadow: var(--box-shadow); display: grid; background: var(--light-gray); border-radius: var(--border-radius);}
.history-grid:hover {transform: translateY(-5px); transition: var(--transition);}
.history-grid > span:last-child,.history-grid > .btnlinkedit {display: grid; place-items: center;}
.history-grid > span:last-child svg,.history-grid > .btnlinkedit svg {display: block; width: 25px; height: 25px;}

.history-grid .btnlink svg {display: block; width: 25px; height: 25px;}

.history-grid .state {border-radius: 5px 0 0 5px;}
#kundeninfos .history-grid-item {font-size: 14px; font-weight: normal; padding: 20px; box-sizing: border-box;}
.history-grid-item span {display: block; font-size: 14px; font-weight: 300; margin-bottom: 10px;}
.history-grid-list-wrp li {transition: var(--transition); border-radius: 5px; padding-left: 20px;}
.history-grid-list-wrp li:hover {background: var(--light-gray); transition: var(--transition);}

#history-detail .history-grid {grid-template-columns: 15px 1fr 1fr 1fr 1fr 0.8fr 0.5fr 0.5fr 50px 50px;padding: 0;height: 70px;}
#history-detail .history-grid-item {padding: 10px;}
.btnlink {color: var(--orange); font-weight: 500;}

#designliste .history-grid-item {padding: 5px 0 0 10px;}





/* ########### History-Detail ########### */

.history-detail-page-grid {display: grid; grid-template-columns: 100%; align-items: flex-start; grid-template-rows: auto; grid-column-gap: 50px; grid-row-gap: 50px;}

#history-detail .history-detail-grid .history-detail {grid-area: history-detail;}
#history-detail .history-detail-grid .order {grid-area: order;}
#history-detail .history-detail-grid .course {grid-area: course;}

#history-detail .history-grid-list-wrp li {padding: 0;}
#history-detail .history-grid.detail-column span {padding-left: 20px;}

/* ########### Schild Detail ########### */

#schild-detail .boxboxbox-grid {grid-template-columns: 0.6fr 1fr 1fr 1fr;}

#schild-detail .boxboxbox-grid a.box {display: flex; align-items: center; justify-content: space-between;}
#schild-detail .boxboxbox-grid a.box .icon-wrp {width: 25px; height: 25px;}
#schild-detail .boxboxbox-grid a.box .icon-wrp svg {width: 100%; height: 100%;}
#schild-detail .boxboxbox-grid a.box .icon-wrp svg path {stroke-width: 2px;}

#schild-detail .boxboxbox-grid #myBtn .icon-wrp svg path {stroke: var(--alert-red);}
#schild-detail .boxboxbox-grid #verlaengernBtn .icon-wrp svg path {stroke: var(--orange);}
#schild-detail .boxboxbox-grid #serviceBtn .icon-wrp svg path {stroke: var(--alert-yellow);}

#schild-detail .schild-detail-grid {display: grid; grid-template-columns: 0.6fr 1fr; align-items: start; grid-template-rows: auto; grid-column-gap: 50px; grid-row-gap: 50px;}
#schild-detail .schild-detail-grid .schild-detail-status {grid-area: status;}
#schild-detail .schild-detail-grid .schild-detail-status h2 span {display: block; margin-top: 20px;}


#schild-detail .schild-detail-grid .schild-detail-details table, .preistabelle table {width: 100% !important;}
#schild-detail .schild-detail-grid .schild-detail-details table tr {background: #EDEDED; padding: 10px 15px; display: grid; grid-template-columns: 50% 50%; font-size: 14px; }
#schild-detail .schild-detail-grid .schild-detail-details.zahlung table tr {background: #EDEDED; padding: 10px 15px; display: grid; grid-template-columns: repeat(4,1fr); font-size: 14px; }

.preistabelle table tr {background: #EDEDED;}
#schild-detail .schild-detail-grid .schild-detail-details table tr:nth-child(odd), .preistabelle table tr:nth-child(odd) {background: #F5F5F5;}
#schild-detail .schild-detail-grid .schild-detail-details table tr th, .preistabelle table tr th {text-align: left; /*font-weight: 400;*/}
.rechnungstabelle table tr th {text-align: left; font-weight: 600 !important;}
.preistabelle table th, .preistabelle table td {padding: 10px 15px;text-align: center;}

#schild-detail .schild-detail-grid .schild-detail-details ul li {height: 40px; line-height: 40px; padding: 0 15px; border-radius: 5px;}
#schild-detail .schild-detail-grid .schild-detail-maps {grid-area: maps; height: 300px;}
#schild-detail .schild-detail-grid .schild-detail-maps #map {height: 100%;}
#schild-detail .schild-detail-grid .schild-detail-contact {grid-area: contact; position: relative; height: 100%; box-sizing: border-box;}

#schild-detail .schild-detail-grid .schild-detail-contact .anfragen li {padding: 8px; background: #EDEDED; border-radius: var(--border-radius); margin-bottom: 5px;}
#schild-detail .schild-detail-grid .schild-detail-contact .anfragen li .date {display: block; font-size: 10px; font-weight: bold; margin-bottom: 4px;}
#schild-detail .schild-detail-grid .schild-detail-contact .anfragen li:nth-child(odd) {background: #F5F5F5;}
#schild-detail .schild-detail-grid .schild-detail-contact .anfragen li a {display: block; width: 15px; height: 15px;}
#schild-detail .schild-detail-grid .schild-detail-contact .anfragen li a svg {width: 100%; height: 100%;}

#schild-detail .schild-detail-grid .schild-detail-contact a {display: block;}
#schild-detail .schild-detail-grid .schild-detail-contact .detail-foto-wrp {background-repeat: no-repeat; background-size: cover; border-radius: var(--border-radius); background-position: center; position: absolute; bottom:0; left: 0; right: 0; top: 190px;}
#schild-detail .schild-detail-grid .schild-detail-foto {grid-area: foto; position: relative; height: 100%; box-sizing: border-box; width: 100%;}
#schild-detail .schild-detail-grid .schild-detail-foto .schildbild {height: 100%; max-height: 425px;}
#schild-detail .schild-detail-grid .schild-detail-foto .schildbild img {width: 100%; height: 100%; object-fit: cover; object-position: center;}
#schild-detail .schild-detail-grid .schild-detail-foto h2 {margin-bottom: 20px;}
#schild-detail .schild-detail-grid .schild-detail-foto .detail-foto-wrp {background-repeat: no-repeat; border-bottom-left-radius: var(--border-radius);border-bottom-right-radius: var(--border-radius); background-position: center; position: absolute; bottom:0; left: 0; right: 0; top: 130px;margin-bottom: 40px;}

#schild-detail .detail-state {display: flex; justify-content: center; align-items: center;}
#schild-detail .detail-state h2 {text-align: center;}
#schild-detail .detail-state h2 span {font-size: 16px;}
#schild-detail .detail-state h2 span span {display: block; font-size: 22px;}

#schild-detail .detail-state {position: relative;}
#schild-detail .detail-state .state {position: absolute; top: 0; left: 0; bottom: 0; border-radius: 5px 0 0 5px; width: 15px;}

#schild-detail #serviceBtn {position: relative;}
#schild-detail #serviceBtn .state {position: absolute; top: 0; left: 0; bottom: 0; border-radius: 5px 0 0 5px; width: 15px;}



#tabelle-detail .schild-detail-grid .schild-detail-details table tr {background: #EDEDED; padding: 10px 15px; display: grid; grid-template-columns: repeat(2,1fr) 100px; font-size: 14px; }
#tabelle-detail .schild-detail-grid .schild-detail-details table.downloads tr {grid-template-columns: 300px 1fr 50px;}
#tabelle-detail .schild-detail-grid .schild-detail-details table tr:nth-child(odd) {background: #F5F5F5;}
#tabelle-detail .schild-detail-grid .schild-detail-details table tr th {text-align: left !important; font-weight: 400;}




.servicehistorie .history-grid {grid-template-columns: 15px 1fr 1fr 1fr 1fr 1fr 50px;}
.servicehistorie .history-grid .state {border-radius: 5px 0 0 5px!important;}
.servicehistorie .history-grid .history-grid-item {padding: 20px 20px 5px 20px;}

.postfach .history-grid {grid-template-columns: 15px 1fr 1fr 1fr 100px;}
.postfach .history-grid .state {border-radius: 5px 0 0 5px!important;}
.postfach .history-grid .history-grid-item {padding: 20px 20px 10px 20px;}

.postfach .state.red, #kundeninfos .state.red {background:var(--alert-red);color:#fff;padding:5px;border-radius:5px;}
.postfach .state.green, #kundeninfos .state.green {background:var(--alert-green);color:#fff;padding:5px;border-radius:5px;}
.postfach .state.gray, #kundeninfos .state.gray {background:var(--gray);color:#fff;padding:5px;border-radius:5px;}
.postfach .state.gelb, #kundeninfos .state.gelb {background:var(--alert-yellow);color:#fff;padding:5px;border-radius:5px;}
.postfach .state.blau, #kundeninfos .state.blau {background:#b8daff;color:#fff;padding:5px;border-radius:5px;}

#postfachdiv {display: grid; grid-template-columns: 70% 30%;}
#postfachdiv .history-grid {grid-template-columns: 15px 150px 200px 1fr 150px;}
.table.table-striped {width: 100% !important;}

.postfach th.history-grid-item {font-weight: bold;}

.postfach .fadeout { animation: fade-out 1s forwards; }
@keyframes fade-out {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

#postfach_filter {display: grid; grid-template-columns: 1fr 1fr 1fr;}
#postfach_filter label {display: flex;height: 30px;line-height: 30px;}
#postfach_filter input, #postfach_length select, #nachrichtart {height: 30px;}
#nachrichtart {padding: 0 5px; margin-right: 20px;border: 1px solid #aaa;}
#dropdown-filter {height: 30px; padding: 0 10px;border: 1px solid #aaa; margin-left: 5px;}

.anfrage-contact {display: grid; grid-template-columns: repeat(2,1fr); grid-column-gap: 50px;}
.anfrage-contact .btn-action h2 {font-size: 25px;}

.btn.actionbutton a {width: 100%; text-align: center; color: #fff; background: var(--orange); font-size: 16px; display: block; border-radius: var(--border-radius); padding: 8px 0; cursor: pointer;}
.btn.actionbutton a.default {background: var(--lightblue);}
.btn.abholen a {width: 100%; text-align: center; color: #fff; background: var(--alert-red); font-size: 16px; display: block; border-radius: var(--border-radius); padding: 12px 0;}
.btn.service a {width: 100%; text-align: center; color: #fff; background: var(--alert-yellow); font-size: 16px; display: block; border-radius: var(--border-radius); padding: 12px 0;}
.btn.verlaengern a {width: 100%; text-align: center; color: #fff; background: var(--orange); font-size: 16px; display: block; border-radius: var(--border-radius); padding: 12px 0;}
.btn.cancel a {width: 100%; text-align: center; color: #000; background: #EDEDED; font-size: 16px; display: block; border-radius: var(--border-radius); padding: 12px 0;}

@media (max-width: 1550px) {
  #schild-detail .schild-detail-grid {grid-template-areas: "details foto" "maps maps" "maps maps" "contact contact"; grid-template-columns: auto 350px;}
}

@media (max-width: 1170px) {
  #schild-detail .schild-detail-grid {grid-template-areas: "details" "foto" "maps" "contact"; grid-template-columns: 100%;}
}

/* ########### Bestellen ########### */

#bestellen .step-grid {display: grid; grid-template-columns: repeat(6, 15%); justify-content: space-between;}
#bestellen .step-grid .box {padding: 20px 10px; display: flex; align-items: center;}
#bestellen .step-grid .box h2 {font-size: 14px;}

.next-prev-step {width: 100%; display: flex; justify-content: space-between;}

#bestellen .step-grid .box.active {background: var(--darkblue);}
#bestellen .step-grid .box.active h2 {color: #fff;}

#bestellen .input-grid_1_2.searchbar {align-items: center; width: calc(100% - 215px); margin-bottom: 50px; grid-template-columns: 40% 60%;}
#bestellen .input-grid_1_2.searchbar h2 {margin: 0;}
#bestellen .input-grid_1_2.searchbar .gray-box {background: transparent; box-shadow: none; padding: 0;}

.TabDisabled {cursor: not-allowed;text-decoration: none;pointer-events: none;}
.TabDisabled h2 {color: #999999;}
.tabgroup form {max-width: 100%;}
.tabgroup form .input-grid {grid-template-columns: 25% 50% 25%;}
.errorlog {margin: 5px 0 0 20px; color: var(--alert-red);}
.checkbox {margin: 5px 0 0 20px;}
.checkbox label {font-weight: normal;}
#geoportal.hide {display: none;}
.tabaktiv {display: block; position: relative;}
.tabinaktiv {display: none;}
.tabaktiv #karte{width: 100%;height: 600px;}
.input-float {float: right; width: 360px;}
.input-float input {font-size: 20px;}
.tabgroup > .box > h2 {border-bottom: 1px solid #f5f5f5; padding-bottom: 20px;}
.content .gridbox h4 {padding-bottom: 15px; border-bottom: 1px solid #f5f5f5; margin-bottom: 15px;}
#tab2 .history-grid {grid-template-columns: 15px 1fr 1fr 1fr; margin-bottom: 25px;cursor: pointer;}

#bestellen input,
#bestellen select,
#bestellen textarea {background: var(--light-gray); box-shadow: var(--box-shadow); color: #000000;}

#bestellen input::placeholder {color: var(--lightblue);}

/* Upload */
#drop_file_zone {background-color: #EEE;border: #999 1px dashed;width: 100%; height: auto;padding: 30px 0;font-size: 18px;}
#drag_upload_file {width:70%;margin:0 auto;}
#drag_upload_file p {text-align: center;}
#drag_upload_file #selectfile {display: none;}
.dragover {border: 1px solid var(--orange) !important;}
ul.dokumente li {background: var(--light-gray); padding: 10px; box-sizing: border-box; display: flex; justify-content: space-between; text-align: left;}
ul.dokumente li a {font-size: 12px; cursor: pointer;}
ul.dokumente li:nth-child(odd) {background: var(--light-gray);}

ul.liste li {background: var(--light-gray); padding: 10px; text-align: left;}
ul.liste li:nth-child(odd) {background: #F5F5F5;}


#message {color: var(--alert-green); font-weight: 500;}

@media (max-width: 1600px) {
  #bestellen .step-grid .box {padding: 20px 12px;}
  #bestellen .step-grid .box h2 {font-size: 12px;}
}

/*  Kontoverwaltung  */

#kontoverwaltung {}
#kontoverwaltung .kundendaten .input-grid {margin-bottom: 0; padding: 15px; background: #F5F5F5;}
#kontoverwaltung .kundendaten .input-grid:nth-child(odd) {background: #EDEDED;}
#kontoverwaltung .boxboxbox-grid {grid-template-columns: 1fr 1fr;}
#kontoverwaltung .autoauto-grid {grid-template-columns: repeat(2, calc(50% - 25px)); grid-row-gap: 50px;}
#kontoverwaltung .history-grid {grid-template-columns: 20% 20% 30% 20%; grid-template-rows: 45px; justify-content: space-between;}
#kontoverwaltung .history-grid td {display: flex; align-items: center;}
#kontoverwaltung .btn-action a {margin-right: 5px;}
#kontoverwaltung input {background: var(--light-gray); box-shadow: var(--box-shadow);}

.fr {float: right;}
.table.small td {font-size: 12px;}
.table.small tr.history-grid {grid-template-rows: 30px;}
.table.small tr.history-grid.table-head {grid-template-rows: 20px;}
.table.small td,.table.small th {padding: 5px 0 5px 20px !important;}
.isDisabled {color: currentColor;cursor: not-allowed;opacity: 0.5;text-decoration: none;pointer-events: none;}

#usertabelle {width: 100%;}
#usertabelle thead th {text-align: left; display: flex; align-items: center;}
#usertabelle td {cursor: pointer;}
#usertabelle tr.aktiv {background: var(--orange);}
#usertabelle tr.aktiv td {color: #fff;}

a.aktiv {color: var(--orange); font-weight: 600;}

/*  Hilfe  */

#hilfe {}
#hilfe .hilfe-grid {display: grid; grid-template-columns: repeat(2, calc(50% - 25px)); grid-row-gap: 50px; grid-column-gap: 50px;}
#hilfe .hilfe-grid .autoauto-grid {display: grid; grid-template-columns: repeat(2, calc(50% - 25px)); grid-row: auto; grid-row-gap: 50px; grid-column-gap: 50px;}


/* Bestellzusammenfassung */

#tab5 .gridbox {grid-template-columns: 2fr 1fr 1fr; display: grid; grid-column-gap: 3%;}
#tab5 .input-grid {background: #EDEDED; padding: 15px; margin: 0;}
#tab5 .input-grid:nth-child(odd) {background: #F5F5F5;}
#tab5 .gridbox .imgage {height: calc(100% - 40px);}
#tab5 .gridbox .imgage img {width: 100%; height: 100%; object-fit: contain; object-position: top;}
#tab5 .gridbox #karteimg {width: 100%; height: calc(100% - 40px);}
#tab5 .gridbox #karteimg img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

/*  Suche / Paginierung  */

.search-filter {margin-bottom: 50px;}
.search-filter .suche-paginierung-grid {display: grid; grid-template-columns: 75% 20%; grid-template-rows: auto; justify-content: space-between; margin-bottom: 20px; grid-row-gap: 25px;}
.search-filter .suche-paginierung-grid-2 {display: grid; grid-template-columns: 50% 25% 25%; grid-template-rows: auto; justify-content: space-between;}
.search-filter .suche-paginierung-grid-2 .gray-box {margin-right: 50px;}

.gray-box {background: var(--light-gray); box-shadow: var(--box-shadow); display: flex; flex-basis: 40%; justify-content: space-between; align-items: center; border-radius: var(--border-radius); padding: 0 12px; box-sizing: border-box;}
.gray-box.suche {flex-basis: 80%;}
.gray-box.status {flex-basis: 15%;}
.gray-box input[type=search] {width: 100%; background: transparent; outline: none; border: none; box-shadow: none;}
.gray-box .icon-wrp {width: 20px; height: 20px; display: block; margin-right: 15px;}
.gray-box .icon-wrp svg {width: 100%; height: 100%;}
.gray-box .icon-wrp svg g path {stroke: var(--orange);}

.search-filter .filter-options {display: flex; justify-content: space-between; flex-wrap: wrap;}
.search-filter .filter-options .gray-box {flex-basis: 48%;}
.search-filter .filter-options input[type=month] {border: none; background: transparent; margin-left: 15px; color: var(--text-color); width: 55%;}

.search-filter input::placeholder,
.search-filter select::placeholder {color: var(--lightblue)!important;}

select#search {box-shadow: none;}
.search-filter .btn-action a {width: 100%; box-sizing: border-box; text-align: center; padding: 14px 0;}
.search-filter .btn-action a:after {display: none;}
.paginierung-flex {display: flex; justify-content: space-between;}

/* Accordion */

.accordion .item-accordion-head {cursor: pointer; background: #f2f2f2; margin-bottom:10px; padding:10px; border:1px solid #f2f2f2;}
.accordion .active .item-accordion-head {background-color:#f8f8f8}
.accordion .item-accordion-btn {width: 26px; height: 26px;float: right; margin: 0; cursor: pointer; position: relative;}
.accordion .item-accordion-btn:before {content: '-'; color: #555; position: absolute; width: 26px; height: 26px; text-align: center; line-height: 22px; font-size: 24px; top: -24px;}
.accordion .item-accordion {margin-bottom: 5px; }
.accordion .item-accordion.hidden .item-accordion-btn:before {content: '+'; line-height: 26px;}
.accordion .item-accordion.active .item-accordion-btn:before {content: '-'; line-height: 22px; }
.accordion .item-accordion.hidden.active .item-accordion-btn:before {content: '-'; line-height: 22px;}
.accordion .item-accordion.hidden .item-accordion-content {display: none;padding:20px 20px;background:#f8f8f8;margin-bottom:10px;}
.accordion .item-accordion.hidden .item-accordion-content:after {display:block;width: 0;height: 0;border-right: 100px solid #037CA9;border-top: 50px solid transparent;border-bottom: 50px solid transparent;}

/* ########### Login / Signup ########### */

main.login-form {padding: 50px; box-sizing: border-box; display: flex; align-items: center; position: relative;  background-position: top right; background-size: 70%;}
main.login-form.dark {background: #2d3142;}
main.login-form .dash-box {width: 100%; max-width: 615px; position: relative; overflow: hidden;}
main.login-form .dash-box form .login-input {position: relative; margin-bottom: 50px;}
main.login-form .dash-box form .login-input.width-70 {width: 70%; float: left;}
main.login-form .dash-box form .login-input.width-25 {width: 25%; float: left;}
main.login-form .dash-box form .login-input.left-50 {width: 47.5%; float: left;}
main.login-form .dash-box form .login-input.right-50 {width: 47.5%; float: right;}
main.login-form .dash-box form .login-input.width-50:nth-child(2n+2) {margin-left: 5%;}

.main-setup-grid.login .login-fade.slick-initialized.slick-slider .slick-track {height: 100vh;}
.main-setup-grid.login .login-fade.slick-initialized.slick-slider .slick-track .slide-login {background-repeat: no-repeat; background-size: cover; background-position: center;}

.hello{position:absolute; left: 15px; top: -5px; font-size: 14px; font-weight: 200; color: var(--light-gray); transition: all 0.5s ease; pointer-events: none;}

input:focus~.hello {display:block;color: var(--marker);top: -35px;font-size: 12px; left: 0;}
input:focus~.enter {background-color: var(--marker);position: absolute;content: ' ';height: 1px;right: 45%;top: 40px; transform: scaleX(10)}
input:valid~.hello {display:block;color: var(--marker);top: -35px;font-size: 12px; left: 0;}
input:valid~.enter {background-color: var(--marker);position: absolute;content: ' ';height: 1px;right: 45%;top: 40px; transform: scaleX(10)}

#loginform h2, #loginform p {color: var(--light-gray);}

.enter{transition: all ease 0.5s;width: 10.1%;transform: scaleX(1);}

textarea, input.login-signup {outline: none;border: 0; height: 40px;width: 100%; background: var(--lightblue); border-radius: 5px 5px 0 0; color: var(--light-gray);}
.buttons textarea {height: 100px; background: var(--light-gray); box-shadow: var(--box-shadow);}
textarea.long {height: 100px;}
input:focus{content:'';}
textarea.blacktxt {color: var(--lightblue);}
button[type=submit] {width: 100%; border-radius: 10px; text-align: center; background-color: var(--light-gray); color: var(--main-bg); padding: 14px 0; font-size: 20px; font-family: var(--font-family); font-weight: 700;}
button[type=submit]:hover {cursor: pointer;}
input[type=button] {cursor: pointer;}

.sign-up-link {font-size: 14px; color: var(--text-color-black); font-weight: 400; margin: 10px 0;}
.sign-up-link a {font-weight: 700; transition: var(--transition); color: var(--text-color-black);}
.sign-up-link a:hover {color: var(--marker);}

.i-forgot {position: absolute; top: -20px; right: 0; font-size: 12px; color: #ffffff; transition: var(--transition);}
.i-forgot:hover {color: var(--marker);}

select[name=branche] {-moz-appearance: none;position: relative; -webkit-appearance: none;appearance: none; width: 100%; font-family: var(--font-family); font-weight: 300; border: none; border-radius: 0; border-bottom: 1px solid var(--text-color-gray); font-size: 16px; background: none;color: var(--text-color-gray); padding: 12px 0;}
.input-branche {position: relative;}
.input-branche:after {content: ''; position: absolute; right: 0; top: 20px; width: 10px; height: 10px; background: url("assets/icons/arrow-down.svg") no-repeat; background-size: contain;}

#signup-done {position: absolute; width: 100%; height: 100%; top: 0; left: 100%; transition: .6s ease-in-out;}
#signup-done.done-active {left: 0;}

#signup-done.dash-box {margin-left: 0; padding: 10px 70px;}
#signup-done.dash-box .done-teaser {width: 100%; text-align: center;}
#signup-done.dash-box .done-teaser h2 {font-size: 35px; margin-bottom: 50px;}

@media (max-width: 1300px) {
  .hello {font-size: 14px;}
}

@media (max-width: 630px) {
  main#login {background-image: none;}
}

.has-error {border: 1px solid var(--alert-red);}
.has-success {border: 1px solid var(--alert-green);}

.labelhas-error {color: var(--alert-red);}
.labelhas-success {color: var(--alert-green);}


.error {font-size: 12px;/*position: absolute;top: 50px;*/}
.unsicher {color: var(--alert-red);font-size: 11px;}
.sicher {color: var(--alert-green);font-size: 11px;}

.auftragsart_bestellt {background: var(--status-auftragbestellt)!important;}
.history-grid-item.auftragsart_bestellt {color: var(--status-auftragbestellt-typo)!important; background: transparent!important;}

.auftragsart_aufbau {background: var(--status-auftragaufbau)!important;}
.history-grid-item.auftragsart_aufbau {color: var(--status-auftragaufbau-typo)!important; background: transparent!important;}

.auftragsart_abholung {background: var(--status-auftragabholen)!important;}
.history-grid-item.auftragsart_abholung {color: var(--status-auftragabholen-typo)!important; background: transparent!important;}

.auftragsart_abbau {background: var(--status-auftragabbau)!important;}
.history-grid-item.auftragsart_abbau {color: var(--status-auftragabbau-typo)!important; background: transparent!important;}

.fallstatus_offen {background: var(--alert-red)!important;}
.fallstatus_inbearbeitung {background: #fd7e14!important;}
.fallstatus_geschlossen {background: var(--alert-green)!important;}

.status_fallstatus_offen {background: var(--alert-red);border-radius: 4px; padding: 5px; color: #fff;margin-top: 15px;}
.status_fallstatus_inbearbeitung {background: #fd7e14;border-radius: 4px; padding: 5px; color: #fff;margin-top: 15px;}
.status_fallstatus_geschlossen {background:var(--alert-green);border-radius: 4px; padding: 5px; color: #fff;margin-top: 15px;}

/* Informationen */

#informationen tbody th, table.dataTable tbody td {line-height: 20px;}
#informationen tbody tr {background: #EDEDED!important;}
#informationen tbody td {padding: 20px 10px;}
#informationen tbody tr:nth-child(odd) {background: #F5F5F5!important;}

/* Pagination */

.pagination {display: flex;padding-left: 0;list-style: none;border-radius: .25rem; float: left;}
.pagination li:first-child a,
.pagination li:last-child a {color: var(--marker);}
.pagination li.active a {background: var(--marker); color: #fff; font-weight: 500;}
a.page-link {position: relative;display: block; padding: .5rem .75rem;margin-left: -1px; line-height: 1.25; color: var(--lightblue);background-color: var(--light-gray);}
a.page-link:hover {background-color: var(--light-gray);}
.filterreset {float: right; margin-bottom: 10px;}
.filterexport svg {width: 20px; height: 20px; margin-right: 15px;}
.filterexport svg path {stroke: var(--lightblue);}
.filterreset a {text-decoration: underline;transition: var(--transition);}
.filterexport a {transition: var(--transition); font-weight: 700; color: var(--orange); justify-content: center; padding: 14px 0; display: flex; align-items: center; background: #f5f5f5; border-radius: var(--border-radius);}
.filterreset a:hover, .filterexport a:hover {text-decoration: none;}

table.dataTable tbody th, table.dataTable tbody td {font-size: 14px;}
.text-center {text-align: center;}
.text-right {text-align: right;}

/* Modal */
.modal {display: none;position: fixed;z-index: 10;left: 0;top: 0;width: 100%;height: 100%;background-color: rgb(0,0,0);background-color: rgba(0,0,0,0.4);}
.modal-content {background-color: #fefefe;margin: 1% auto;padding: 20px;border: 1px solid #888;width: 60%;border-radius: var(--border-radius);}
.modal-content.weit {width: 70%;}
.modal-content.hoch {margin: 5% auto;}
.modal-content #content {text-align: center;}
.modal-content #content span {font-weight: 700; color: var(--marker); display: block;}
.modal-content .buttons {width: 50%; margin: auto;margin-top: 10px;}
.modal-content .buttons.grid {display: grid; grid-template-columns: 150px 100px;width: 20%; margin-top: 30px;}
.modal-content .buttons.hide, .modal-content .close {display: none;}
.modal-content .input {width: 80%; margin: auto;margin-top: 30px;}
.modal-content .input_short {width: 50%; margin: auto;margin-top: 30px;}
.modal-content .input .liste {text-align: left;}
.modal-content .input textarea {height: 100px; color: var(--lightblue); background: var(--light-gray); box-shadow: var(--box-shadow);}
.modal-content .buttons .btn-action a, .modal-content .buttons .btn-light-gray a {width: 100%;}
.modal-content #content h3 {margin-bottom: 10px; font-size: 20px; font-weight: 600;}
.close {color: #aaa;float: right;font-size: 28px;font-weight: bold;}
.close:hover,
.close:focus {color: black;text-decoration: none;cursor: pointer;}
#btnweiter {margin-left: 20px;}
.modal-content input {background: var(--light-gray); box-shadow: var(--box-shadow); border-radius: var(--border-radius); color: var(--lightblue);}

.modal-body {height: 500px;}
.modal-body iframe {height: -webkit-fill-available;}
.w200 {width: 200px;}
.mtop {margin-top: 50px;}

.boxhide {display: none !important;}

/*.ansichtwechseln {margin-right: 110px;}*/
.nowidth {width: 50% !important;}
.anfragen li a{float: right;}

/* Cal To Action */
.cta {position: fixed; right: 80px; margin-top: -70px;padding: 20px;height: 400px;}
.cta a.btn-action {margin-right: 0px !important;}
.contentblock {/*display: grid; grid-template-columns: 85% 180px; justify-content: space-between;*/}

.swal2-styled.swal2-confirm, .swal2-styled.swal2-cancel {border-radius: 50px !important; width: 300px;}
.swal2-styled.swal2-cancel {background: #efefef !important; color: #333333 !important;}
.swal2-icon.swal2-warning {color: var(--orange) !important;}
.swal2-icon.swal2-warning {border-color: var(--orange) !important;}
.swal2-actions {display: block !important; text-align: center;}

table.dataTable thead th, table.dataTable thead td {padding: 10px 18px 10px 10px !important;}

/* Kartenansicht */
#map_canvas {height: 700px;}
.gm-style-iw-d {font-size: 16px;line-height: 24px;}
.gm-style-iw-d span {font-size: 16px; font-weight: 500;}
.gm-style-iw-d img {width: 100%;}
.gm-style-iw-d .btn-action a {padding: 10px 20px;}
.gm-style-iw-d .btn-action a:after {content: ''; background: none;}

.form-control {margin-top: 10px;}

.sacounter {width: 22px;height: 22px;background: var(--alert-red);color: #fff;border-radius: 50px;text-align: center;margin-left: 5px;margin-top: -10px; padding-top: 2px;right: 35px;top: 15px;position: absolute;line-height: 20px;}
.infocounter {width: 22px;height: 22px;background: var(--alert-red);color: #fff;border-radius: 50px;text-align: center;margin-left: 5px;margin-top: -10px; padding-top: 2px;right: 60px;top: 15px;position: absolute;line-height: 20px;}
.postfachinfocounter {width: 22px;height: 22px;background: var(--alert-red);color: #fff;border-radius: 50px;text-align: center;margin-left: 5px;margin-top: -10px; padding-top: 2px;right: 60px;top: 15px;position: absolute;line-height: 20px;}

.paginationleiste {display: grid;grid-template-columns: 90% 10%;}
.what3wordslink {text-decoration: underline;}

/* Konfigurator */
.imgvorschau {width: 350px;margin: 0 50px 15px 0;}
.imgvorschau img {width: 100%;}

.konfiguratorgrid {display: grid; grid-template-columns: 40% 60%; align-items: flex-start;}
.konfiguratorgrid .history-grid-item {padding: 0;}
.konfiguratorgrid .history-grid-item .dateiname {padding: 10px 5px;}
.konfiguratorgrid .history-grid .choose {border-radius: 5px 0 0 5px;}

.konfiguratorgrid h2 {margin-bottom: 25px;}
.schildvorschau {background: #efefef;padding: 20px 0 50px 50px;}
.imagegrid {display: flex; justify-content: space-between; align-items: center;}
.imagegrid button {height: 30px; cursor: pointer; margin-right: 25px; display: flex; width: 65px; border: none; align-items: center;}
.imagegrid button svg {margin-right: 10px;}
.imagegrid button svg path,
.imagegrid button svg line {stroke: var(--marker);}
.konfiguration {margin: 10px 0 0 50px;}
.schildboxen {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 2%; margin-top: 60px;}
.konfigschilddesignliste  img{width: 100%;}
.titel {font-size: 16px; font-weight: 600; color: var(--darkblue); float: left;}
#suche {float: right;}
#tab2 .history-grid.konfig {grid-template-columns: 15px 1fr;}
.schildvorschau.sticky {position: sticky; top: 50px;}
.history-grid.konfig.hide, .history-grid.designs.hide{display: none;}
.schildname {text-transform: uppercase; font-size: 16px;font-weight: 600;}
.label.gutschein {font-weight: bold;padding: 20px 0;}
.login-input .messages {color: var(--gray); font-size: 12px;}

.designansicht {width: 300px;}
.designansicht img {width: 100%;}

.infobanner {position: absolute;z-index: 1000;background: var(--alert-yellow);left: 260px;width: 100%;height: 20px;padding: 10px 0 10px 50px;}

.loginerror {margin-top: 150px; color: #efefef;}

.printservergrid {display: grid; grid-template-columns: repeat(5,1fr); column-gap: 10px;}
.konfigprintserver {width: 250px;}
.konfigprintserver img {width: 100%;}

.designthumbnail {width: 50px;}
.designthumbnail img {width: 100%;}

.excel-contact table th {font-weight: 400 !important; font-size: 12px !important;}
.excel-contact table td {font-size: 12px !important;}
.excel-contact.box {width: 1350px;}
.dataTables_wrapper .dataTables_filter input {height: 30px !important;}
.dataTables_wrapper {max-width: 1600px !important;}
#exceltabelle tbody tr, #uploadliste tbody tr, #kundenliste tbody tr, #userliste tbody tr, #rechnungsliste tbody tr {cursor: pointer;}
#exceltabelle tbody tr.aktiv, #uploadliste tbody tr.aktiv, #kundenliste tbody tr.aktiv {background: var(--alert-yellow);}
#exceltabelle tbody tr.aktiv td, #uploadliste tbody tr.aktiv td, #userliste tbody tr.aktiv td {background: var(--alert-yellow);}


.status-bar-wrp {--progressbar-gradient: linear-gradient(to right, var(--alert-green), var(--alert-green) 41%, var(--alert-yellow), var(--alert-red)); margin-top: 100px;}
.status-bar-wrp .progressbar {background: var(--progressbar-gradient);border-radius: 10px;height: 8px;/*overflow: hidden;*/position: relative;width: 90%; max-width: 1000px;}

.status-bar-wrp {--progressbar-gradient: linear-gradient(to right, var(--alert-green), var(--alert-green) 41%, var(--alert-yellow), var(--alert-red));}
.progressbar {background: var(--progressbar-gradient);border-radius: 10px;height: 8px;/*overflow: hidden;*/position: relative;width: 90%; max-width: 1000px;}
.details .progressbar {width: 100%; max-width: 100%;}
.progressbar:last-child {margin-bottom: 0;}
.progressbar span {background: #dce1e6;bottom: 0;height: 100%;position: absolute;right: 0;top: 0;}
.progressbar:hover {/*cursor: help;*/}


.kt-badge.kt-badge--inline.kt-badge--lg {padding: 0.2rem 0.7rem; color: #fff;}
.kt-badge.kt-badge--rounded {border-radius: 4px;}

.modalgrid {display: grid;grid-template-columns: 60% 40%;}
.gridbox {display: grid; grid-template-columns: 1fr 1fr;}
.gridbox_4 {display: grid; grid-template-columns: repeat(4,1fr); column-gap: 10px;}
.gridbox svg {float: left;margin-right: 10px;}
.kundendatenmodal {display: grid; grid-template-columns: 20% 80%; text-align: left;}
.kundendatenmodal span {color: var(--darkblue) !important;}

.kundendatendetails {display: grid; grid-template-columns: 120px 1fr; text-align: left;}
.kundendatendetails span {color: var(--darkblue) !important; font-weight: bold;}


.rechnungsdatenmodal {display: grid; grid-template-columns: 30% 70%; text-align: left;}
.rechnungsdatenmodal span {color: var(--darkblue) !important;}

#kundendetails input,
#kundendetails select,
#kundendetails textarea {background: var(--light-gray); box-shadow: var(--box-shadow); color: #000000;}

#kundendetails input::placeholder {color: var(--lightblue);}
#kundendetails .autoauto-grid {display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto; grid-column-gap: 50px;}

.preistabelle input {height: 35px;width: 70px;}
.preistabelle select {height: 35px; width: 100px;}

.preistabelle input.datum {width: 112px;}

#kundendetails .autoauto-grid .input-grid {grid-template-columns: 30% 70%;}
.fehlerausgabe {color: var(--alert-red);}
.zeilengrid {display: grid; grid-template-columns: 1fr 1fr;}
.zeilengrid .spaltenname {padding: 15px 0;}

.detailkunde .uploadliste_filter, .detailkunde .dataTables_filter, .detailkunde #uploadliste_paginate {display: none !important;}
.table.details {width: 700px;}
.table.details.downloads {width: 100%;}
a.btnadd {cursor: pointer;}
div.hinweis {font-size: 12px; color: var(--lightblue); margin-top: 5px;}
.summe td {font-weight: 600; font-size: 18px;}
.zahlungsgrid {display: grid; grid-template-columns: 1fr 100px 50px;max-width: 500px;padding: 10px 15px; background: var(--light-gray);}
.zahlungsgrid.aktiv {background: var(--alert-yellow);}
.zahlungsgrid div.mb5 {margin-top: 5px;}
.zahlungsgrid div.mb3 {margin-top: 3px;}
.btn.actionbutton.small {width: 300px;}
.lang-switch {margin-top: 35px;color: #fff;}
.lang-switch a {color: #fff;}

.dashboard {background: url("/assets/images/header_start_940x263px.png"); height: 240px; background-repeat: no-repeat; background-size: cover;}
.pad3 {margin-top: 50px;}
.modalblock {padding: 10px 100px;}

#reihenfolge li {background: #dadada; padding: 10px; margin-bottom: 10px; cursor: pointer;}

.status-result {max-height: 500px; overflow-y: auto; /*display: grid;*/ grid-template-columns: 110px 1fr; grid-template-rows: auto; grid-column-gap: 50px;}

.btn-action button[type=submit] {font-size: 14px; color: #fff; background: var(--orange); padding: 10px 30px 10px 10px; position: relative; cursor: pointer; float: left; border-radius: 0; font-weight: 400; width: auto; border: 0;}
.btn-action button[type=submit]:after {content: ''; background: url("/assets/icons/arrow-right-white.svg") no-repeat; background-size: contain; width: 12px; height: 12px; position: absolute; right: 7px; top: 14px;}

.boxgrid {display: flex;gap: 20px;}

.form {background: var(--light-gray2); padding: 20px; border-radius: var(--border-radius);}
.form_nop {background: var(--light-gray2); padding: 2px 20px; border-radius: var(--border-radius);}
.formgrid {display: grid; grid-template-columns: 1fr 1fr; column-gap: 50px;}

.loadingbox {text-align: center;}
.loadicon {width: 200px; margin: auto;}
.loadicon img {width: 100%;}
.loading {background: transparent url('/assets/images/loading.gif') center no-repeat;height: 200px;width: 200px;}

.fas.fa-eye, .fas.fa-eye-slash {color: #fff;}
.login-input .button {background: none;border: none;}

.hinweistext {margin-top: 120px; width: 500px;}
#sessiontime {position: absolute;right: 10px;top: 120px;}