input[placeholder]::placeholder {
	color: #999;
 }
 
 /* --------------- Dashboard --------------- */
 
 .card-dashboard .graph-div {
	 width: 100%;
	 height: 448px;
	 background-color: #fff;
	 padding: 10px;
	 box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 }
 
 .card-dashboard .graph-stats-div {
	 width: 100%;
	 height: 448px;
 }
 
 .card-dashboard .graph-row-div {
	 width: 100%;
	 height: 100px;
	 background-color: #fff;
	 box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
	 margin-left: 0;
	 padding: 10px;
 }
 
 .card-dashboard .graph-row-div p{
	 margin: 0 auto;
	 text-align: center;
	 width: 100%;
	 font-size: 16px;
 }
 
 .card-dashboard .graph-row-div .stats-num{
	 font-size: 34px;
 }
 
 .card-dashboard .graph-row-div:nth-child(1) {
	 margin-bottom: 16px;
 } 
 .card-dashboard .graph-row-div:nth-child(2) {
	 margin: 16px 0;
 } 
 .card-dashboard .graph-row-div:nth-child(3) {
	 margin: 16px 0;
 } 
 .card-dashboard .graph-row-div:nth-child(4) {
	 margin-top: 16px;
 } 
 
 .card-dashboard .col-padding{
	 padding: 0 8px;
	 margin-bottom: 16px;
 }
 
 .date-range-picker{
	 cursor: pointer;
	 padding: 5px 10px;
	 border: 1px solid #ccc;
	 width: 220px;
	 display:inline-block;
 }
 
 .date-range-picker i {
	 color: #4c8bf5;
 }
 
 /**/

 .icon-delete {
	color: #dc3545;
}

.icon-edit {
	margin-right: 10px;
	color: #17a2b8;
}

.icon-delete:hover,
.icon-edit:hover {
	cursor: pointer;
}
 
 .width100{
	 width: 100%;
 }
 
 .button-block{
	 margin: 0 auto;
	 display: block;
 }
 
 .button-inline-block{
	 margin: 0 auto;
	 display: inline-block;
 }
 
 .create-customer-modal .row-kategorien{
	 max-height: 400px;
	 overflow: auto;
	 min-width: -webkit-fill-available;
	 margin: 2px;
 }
 
 .validationFailed {
	 color: #aa2323;
	 border: 1px solid #eeabab;
	 background-color: #f6d6d6;
	 padding: 3px 10px;
 }
 
 .inputValidateIcon {
	 position: absolute;
	 top: 43px;
	 right: 22px;
	 color: dodgerblue;
 }
 
 .hidden {
	 display: none;
 }
 
 body {
	 overflow-x: hidden !important;
	 padding: 0 !important;
 }
 
 .modal-open {
	 padding: 0 !important;
	 overflow-y: hidden;
 }
 
 .back-to-top {
	 background-color: #3EBBCC;
 }
 
 #btn_zurueck {
	 margin-top: 10px;
	 position: relative;
	 left: 50%;
	 -ms-transform: translate(-50%, -50%);
	 transform: translate(-50%, -50%);
 }
 
 .button-orange {
	 color: #fff;
	 background-color: #3EBBCC;
	 border: #3EBBCC;
 }
 
 .button-orange:hover {
	 color: #fff;
	 background-color: #3EBBCC;
	 border: #3EBBCC;
 }
 
 .button-orange:focus {
	 color: #fff;
	 background-color: #3EBBCC;
	 border: #3EBBCC;
	 box-shadow: 0 0 0 0.2rem rgb(236 103 38 / 25%);
 }
 
 .dataTables_paginate .pagination {
	 justify-content: center !important;
 }
 
 .pagination a {
	 color: #3EBBCC;
	 border-color: #dee2e6 !important;
 }
 
 .pagination a:hover {
	 color: #3EBBCC;
 }
 
 .pagination a:focus {
	 box-shadow: 0 0 0 0.2rem rgb(236 103 38 / 25%);
 }
 
 .pagination .active a {
	 color: #fff;
	 background-color: #3EBBCC !important;
 }
 
 /**/
 
 .login-form, .register-form {
	 max-width: 500px;
	 padding: 15px;
	 margin: 0 auto;
 }
 
 .login-form .input-group-prepend span, .register-form .input-group-prepend span {
	 width: 180px;
 }
 
 @media (max-width: 768px) {
	 h2 {
		 font-size: 26px;
	 }
 }
 
 @media (min-width: 992px) {
	 .dropdown-menu .dropdown-submenu .dropdown-menu {
		 visibility: hidden;
	 }
 
	 .dropdown:hover .dropdown-menu {
		 display: block;
	 }
 
	 .dropdown-menu .dropdown-submenu:hover .dropdown-menu {
		 visibility: visible;
	 }
 }
 
 .back-to-top {
	 cursor: pointer;
	 position: fixed;
	 bottom: 20px;
	 right: 20px;
	 display: none;
	 z-index: 9999;
 }
 
 .preview-container {
	 flex-direction: column;
	 align-items: center;
	 justify-content: center;
	 display: flex;
	 width: 100%;
	 overflow: hidden;
 }
 
 .bg-light {
	 background-color: #fff !important;
	 border-bottom: 1px solid #3EBBCC;
 }
 
 .navbar {
	 font-weight: 500;
 }
 
 .navbar-light .navbar-nav .active > .nav-link {
	 color: #3EBBCC;
 }
 
 .dropdown-item.active, .dropdown-item:active {
	 background-color: #3EBBCC;
 }
 
 @media (min-width: 992px) {
	 .nav-item {
		 margin: 15px;
	 }
 }
 
 .container-fluid > .card {
	 border: 0;
 }
 
 .container-fluid > .card > .card-header {
	 background-color: #fff;
	 border: 0;
	 border-bottom: 1px solid rgba(0,0,0,.125);
 }
 
 .btn-warning {
	 background-color: #3EBBCC;
	 border-color: #3EBBCC;
 }
 
 .btn-outline-warning {
	 border-color: #3EBBCC;
	 color: #000;
 }
 
 .btn-outline-warning:hover {
	 background-color: #3EBBCC;
 }
 
 [id^="btn_automatdetail_"] {
	 border: 1px solid #3EBBCC;
	 display: inline-block;
	 text-align: center;
	 width: 250px;
	 padding: 15px;
	 cursor: pointer;
	 margin-left: 2px;
	 margin-right: 2px;
	 margin-bottom: 4px;
	 border-radius: 10px;
 }
	 
 [id^="btn_automatdetail_"]:hover {
	 background-color: rgba(62, 187, 204, 0.5);
 }
 
 [id^="btn_automatdetail_"] i {
	 font-size: 100px;
 }
 
 #qr-canvas {
	 max-width: 95%;
	 max-height: 75%;
 }
 
 /* --------------- Farben solo --------------- */
 #Ampelfarbe {
	 width: 15px;
	 height: 15px;
	 border-radius: 50%;
	 display: inline-block;
	 margin-right: 5px;
 }
 
 #Ampelfarbe.rot {
	 background-color: #f00;
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #f00;
 }
 
 #Ampelfarbe.gruen {
	 background-color: #0f0;
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #0f0;
 }
 
 
 /* --------------- Ampel --------------- */
 #ampel {
	 background-color: #333;
	 width: 55px;
	 border-radius: 10px;
	 padding-top: 5px;
	 padding-bottom: 5px;
 }
 
 #ampel div {
	 position: relative;
	 left: 50%;
	 width: 40px;
	 height: 40px;
	 margin-top: 5px;
	 margin-left: -20px;
	 background-color: grey;
	 vertical-align: middle;
	 border-radius: 50%;
 }
 
 #ampel div:nth-child(1) {
	 background-color: #f00;
	 filter: brightness(25%);
 }
 
 #ampel div:nth-child(1).active {
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #f00;
 }
 
 #ampel div:nth-child(2) {
	 background-color: #ff0;
	 filter: brightness(25%);
 }
 
 #ampel div:nth-child(2).active {
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #ff0;
 }
 
 #ampel div:nth-child(3) {
	 background-color: #0f0;
	 filter: brightness(25%);
 }
 
 #ampel div:nth-child(3).active {
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #0f0;
 }
 
 /* --------------- Ampel klein --------------- */
 #ampel_klein {
	 background-color: #333;
	 width: 40px;
	 border-radius: 10px;
	 padding-top: 3px;
	 padding-bottom: 3px;
	 float: right;
	 margin-right: 20px;
 }
 
 #ampel_klein div {
	 position: relative;
	 left: 50%;
	 width: 30px;
	 height: 30px;
	 margin-top: 3px;
	 margin-left: -15px;
	 background-color: grey;
	 vertical-align: middle;
	 border-radius: 50%;
 }
 
 #ampel_klein div:nth-child(1) {
	 background-color: #f00;
	 filter: brightness(25%);
 }
 
 #ampel_klein div:nth-child(1).active {
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #f00;
 }
 
 #ampel_klein div:nth-child(2) {
	 background-color: #ff0;
	 filter: brightness(25%);
 }
 
 #ampel_klein div:nth-child(2).active {
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #ff0;
 }
 
 #ampel_klein div:nth-child(3) {
	 background-color: #0f0;
	 filter: brightness(25%);
 }
 
 #ampel_klein div:nth-child(3).active {
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #0f0;
 }
 
 /* --------------- Ampel liegend --------------- */
 #ampel_liegend {
	 background-color: #333;
	 width: 110px;
	 height: 40px;
	 border-radius: 10px;
	 padding-top: 3px;
	 padding-bottom: 3px;
 }
 
 #ampel_liegend div {
	 position: relative;
	 width: 30px;
	 height: 30px;
	 margin-top: 2px;
	 margin-left: 5px;
	 background-color: grey;
	 border-radius: 50%;
	 float: left;
 }
 
 #ampel_liegend div:nth-child(1) {
	 background-color: #f00;
	 filter: brightness(25%);
 }
 
 #ampel_liegend div:nth-child(1).active {
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #f00;
 }
 
 #ampel_liegend div:nth-child(2) {
	 background-color: #ff0;
	 filter: brightness(25%);
 }
 
 #ampel_liegend div:nth-child(2).active {
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #ff0;
 }
 
 #ampel_liegend div:nth-child(3) {
	 background-color: #0f0;
	 filter: brightness(25%);
 }
 
 #ampel_liegend div:nth-child(3).active {
	 filter: brightness(100%);
	 box-shadow: 0 0 2em #0f0;
 }
 
 /* --------------- Session Timer --------------- */
 #sessionTimeout {
	 position: relative;
	 text-align: center;
 }
 
 #sessionTimeout svg {
	 position: relative;
	 top: 0;
	 right: 0;
	 width: 200px;
	 height: 200px;
	 transform: rotateY(-180deg) rotateZ(-90deg);
 }
 
 #sessionTimeout circle {
	 stroke-dasharray: 565px;
	 stroke-dashoffset: 0px;
	 stroke-linecap: round;
	 stroke-width: 15px;
	 stroke: #3EBBCC;
	 fill: none;
 }
 
 #sessionTimeout div {
	 position: absolute;
	 font-size: 70px;
	 font-weight: bold;
	 top: 45px;
	 width: 100%;
 }
 
 /* --------------- Loader --------------- */
 
 .loader_c {
	 position: fixed;
	 top: 0;
	 left: 0;
	 z-index: 1100;
	 width: 100%;
	 height: 100%;
	 background: rgba( 255, 255, 255, .8 );
	 text-align:	center;
	 display: flex;
	 align-items: center;
 }
 
 .loader,
 .loader:before,
 .loader:after {
	 border-radius: 50%;
	 width: 2.5em;
	 height: 2.5em;
	 animation-fill-mode: both;
	 animation: load 1.8s infinite ease-in-out;
 }
 
 .loader {
	 color: #3EBBCC;
	 font-size: 10px;
	 margin: 80px auto;
	 text-indent: -9999em;
	 transform: translateZ(0);
	 animation-delay: -0.16s;
	 z-index: 999;
 }
 
 .loader:before,
 .loader:after {
	 content: '';
	 position: absolute;
	 top: 0;
 }
 
 .loader:before {
	 left: -3.5em;
	 animation-delay: -0.32s;
 }
 
 .loader:after {
	 left: 3.5em;
 }
 
 @keyframes load {
	 0%, 80%, 100% {
		 box-shadow: 0 2.5em 0 -1.3em;
	 }
	 40% {
		 box-shadow: 0 2.5em 0 0;
	 }
 }