* {
  box-sizing: border-box;
}
body {
  font-family: 'Khand', sans-serif;
  font-size: 16pt;
  font-weight: 300;
  overscroll-behavior: none;
  /*&:after{
		width: 100%;
	    max-width: 1024px;
	    transform: translateX(-50%);
	    margin: 0 auto;
	    min-height: 100vh;
	    top:0;
	    left:50%;
	    content:'';
	    position:absolute;
	    z-index:-10px;
	    box-shadow:0 0 30px rgba(0,0,0,0.15);
	}*/
}
body .desktop-wrap {
  width: 100%;
  max-width: 1024px;
  min-height: 100vh;
  transform: translate(0);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  overscroll-behavior: none;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.15);
}
body .wrapper {
  padding: 0 10px;
  width: 100%;
}
body .wrapper.strong-wrap {
  padding: 30px;
}
body .main-distance {
  padding: 215px 10px 70px 10px;
}
body .small-distance {
  padding: 120px 30px 70px 30px;
}
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-weight: 300;
  text-align: center;
}
body h1.distance,
body h2.distance,
body h3.distance,
body h4.distance,
body h5.distance,
body h6.distance {
  margin: 20px 0 30px 0;
}
body a {
  color: #74aef5;
  text-decoration: none;
  padding: 0;
}
body .bold {
  font-weight: 600;
}
body .success-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto;
}
body .w4i-icon {
  background-size: contain;
  width: 100%;
  height: 100%;
  display: flex;
  background-repeat: no-repeat;
  background-position: center;
}
body .w4i-icon.w4i-icon-update {
  background-image: url('update.svg');
}
body .w4i-icon.w4i-icon-plus {
  background-image: url('plus.svg');
}
body .w4i-icon.w4i-icon-backspace {
  background-image: url('backspace.svg');
}
body .w4i-icon.w4i-icon-options {
  background-image: url('options.svg');
}
body .w4i-icon.w4i-icon-close {
  background-image: url('close.svg');
}
body .w4i-icon.w4i-icon-redarrow {
  background-image: url('red-arrow.svg');
  animation: hover 2s infinite;
}
body .w4i-icon.w4i-icon-trash-white {
  background-image: url('trash-white.svg');
}
body .w4i-icon.w4i-icon-trash {
  background-image: url('trash.svg');
}
body .w4i-icon.w4i-icon-clock {
  background-image: url('clock.svg');
}
body .w4i-icon.w4i-icon-reservation {
  background-image: url('reservation.svg');
}
body .w4i-icon.w4i-icon-check {
  background-image: url('check.svg');
}
body .w4i-icon.w4i-icon-back {
  background-image: url('back-arrow.svg');
}
body .w4i-icon.w4i-icon-erase {
  background-image: url('erase.svg');
}
body .w4i-icon.w4i-icon-payment {
  background-image: url('payment.svg');
}
body .w4i-icon.w4i-icon-menu {
  background-image: url('menu.svg');
}
body .w4i-icon.w4i-icon-settings {
  background-image: url('settings.svg');
}
body .w4i-icon.w4i-icon-statistic {
  background-image: url('statistic.svg');
}
body .w4i-icon.w4i-icon-logout {
  background-image: url('logout.svg');
}
body .w4i-icon.w4i-icon-bubble {
  background-image: url('bubble.svg');
}
body .w4i-icon.w4i-icon-pdf {
  background-image: url('mime.pdf.svg');
}
body label {
  font-size: 0.8em;
}
body .close {
  position: absolute;
  right: 35px;
  top: 25px;
  height: 28px;
  width: 15px;
}
body .login label {
  color: #999999;
}
body .login .confirmContract img {
  text-align: center;
  margin: 18px 0;
  width: 30vw;
  min-width: 80px;
  max-width: 180px;
  margin: 0 auto;
  display: block;
}
body .login .confirmContract h2 {
  font-size: 1.4em;
  color:#74aef5;
  margin: 18px 0;
}
body .login .confirmContract p {
  font-size: 1em;
  margin: 12px;
  line-height: 1.4em;
}
body .login .confirmContract p.center {
  text-align: center;
}
body .login .confirmContract p.lowerline {
  line-height: 1em;
}
body .login .confirmContract p small {
  font-size: 0.7em;
}
body .w4i-input {
  background-color: white;
  border: none;
  border: 1px solid #eee;
  width: 100%;
  padding: 5px 10px;
  margin: 10px 0;
  font-weight: 300;
  margin: 5px 0 20px 0;
  font-size: 1em;
  font-family: 'Khand', sans-serif;
  letter-spacing: 1px;
  border-radius: 0;
  background-color: #fafafa;
}
body .w4i-input:focus {
  border-color: #74aef5;
}
body .w4i-input.big {
  font-size: 2em;
  margin: 20px 0;
}
body .w4i-input.no-line {
  border: none;
  padding: 0;
}
body .w4i-description {
  font-size: 0.7em;
  margin-top: -15px;
  margin-bottom: 15px;
  display: block;
  line-height: 1.2;
  color: #999999;
}
body button[type="submit"],
body input[type="submit"],
body .w4i-btn {
  background-color: #74aef5;
  width: 100%;
  color: white;
  font-weight: 300;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 3px;
}
body .w4i-btn {
  display: block;
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}
body .scroll {
  height: 100vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
body header#login-header {
  height: 205px;
}
body header#login-header .logo {
  width: 85px;
  margin: 0 auto;
  display: block;
  position: relative;
  top: 50px;
}
body .reset-pw,
body .register,
body .change-pw {
  font-size: 0.8em;
  text-decoration: none;
  text-align: center;
  color: #999999;
  display: block;
  width: auto;
  margin: 20px auto;
}
body .login {
  /*.register{
			height:52px;
			margin-top:15px;
			background-color:white;
			border:1px solid @grey;
			color:@ci-color;
		}*/
}
body .login input[type="submit"] {
  margin-top: 20px;
}
body .login .register-toggle {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
body .login .register-toggle:checked + .register-overlay {
  display: block;
}
body .login .register-overlay {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  display: none;
  min-height: 100vh;
  background-color: white;
}
body .login .register-overlay .wrapper {
  padding: 20px 30px;
}
body .mailout {
  text-align: center;
  line-height: 1.3;
}
body .mailout h2.ci {
  font-size: 1.35em;
  margin-bottom: 5px;
  color: #74aef5;
}
body .mailout a {
  margin-top: 3px;
}
body .mailout img {
  width: 80%;
  margin: 0 auto;
  display: block;
  margin-top: 35px;
  max-width: 320px;
}
body .mailout img.padlock {
  width: 100px;
  margin: 0 auto;
  display: block;
  margin-bottom: 15px;
}
body .payment {
  padding-top: 70px;
}
body .payment h2 {
  margin: 30px 0 10px 0;
}
body .payment .credit {
  width: 100%;
  text-align: center;
  font-size: 5em;
  margin-top: 20px;
  color: #999999;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 20px;
}
body .payment .credit span {
  font-size: 0.3em;
  display: block;
}
body .payment .packages {
  padding: 10px 0;
}
body .payment .packages .package {
  background-color: #fafafa;
  padding: 20px;
  margin-bottom: 10px;
  position: relative;
  border-radius: 3px;
}
body .payment .packages .package .credits {
  text-align: center;
  width: 100%;
  font-size: 3em;
}
body .payment .packages .package .credits span {
  font-size: 0.3em;
  display: block;
  margin-bottom: 10px;
}
body .payment .packages .package .price {
  position: absolute;
  top: 20px;
  right: 20px;
}
body #company_toggle:checked ~ #company,
body #sms_toggle:checked ~ #sms {
  height: auto;
}
body .checkbox-toggle {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
body .checkbox-toggle + label:before {
  content: "";
  display: block;
  background-image: url("arrow.svg");
  background-repeat: no-repeat;
  height: 20px;
  width: 20px;
  margin: 17px 10px 0px 0px;
  transform: rotate(180deg);
}
body .checkbox-toggle:checked + label:before {
  transform: rotate(0deg);
  margin: 11px 10px 0px 0px;
}
body #company,
body #sms {
  height: 0;
  overflow: hidden;
}
body .checkbox-toggle-label {
  width: 100%;
  position: relative;
  display: flex;
  height: 52px;
  background-color: #fafafa;
  line-height: 52px;
  margin: 10px 0px;
  padding: 0px 20px;
  font-size: 1em;
}
body input[type=checkbox].hide {
  width: 0;
  height: 0;
  display: block;
  padding: 0;
  -webkit-appearance: none;
  border: none;
}
body input#SMS_aktiv + label span.inactive {
  display: block;
}
body input#SMS_aktiv + label span.active {
  display: none;
}
body input#SMS_aktiv:checked + label span.inactive {
  display: none;
}
body input#SMS_aktiv:checked + label span.active {
  display: block;
}
body header#main-header,
body header#small-header {
  background-color: white;
  width: 100%;
  position: fixed;
  top: 0;
  height: 90px;
  border-bottom: 1px solid #dddddd;
  transition: height 0.5s;
  z-index: 30;
}
body header#main-header.on-top,
body header#small-header.on-top {
  height: 205px;
}
body header#main-header.on-top:before,
body header#small-header.on-top:before {
  opacity: 0;
  top: 0;
  z-index: -10;
}
body header#main-header.on-top .logo,
body header#small-header.on-top .logo {
  top: 35px;
}
body header#main-header.on-top .panel.top-panel,
body header#small-header.on-top .panel.top-panel {
  bottom: 40px;
}
body header#main-header.on-top h1.warning,
body header#small-header.on-top h1.warning {
  padding: 3px 0;
  bottom: 5px;
}
body header#main-header h1,
body header#small-header h1 {
  position: absolute;
  bottom: 12px;
  font-size: 0.7em;
  width: 100%;
  text-align: center;
}
body header#main-header h1.warning,
body header#small-header h1.warning {
  background-color: #fc5c65;
  color: white;
  width: calc(100% - 20px);
  padding: 2px 0;
  font-size: 0.7em;
  margin: 0 10px;
  bottom: 2px;
  transition: all 0.5s;
}
body header#main-header:before,
body header#small-header:before {
  display: block;
  height: 130px;
  width: 85px;
  background-color: white;
  position: absolute;
  top: -105px;
  top: -115px;
  left: calc(50% - 47.5px);
  content: '';
  z-index: 10;
  opacity: 1;
  transition: all 0.5s;
}
body header#main-header .logo,
body header#small-header .logo {
  width: 85px;
  width: 105px;
  margin: 0 auto;
  display: block;
  position: relative;
  top: -62px;
  transition: top 0.5s;
}
body header#main-header .panel.top-panel,
body header#small-header .panel.top-panel {
  position: absolute;
  bottom: 20px;
  justify-content: space-between;
  transition: bottom 0.5s;
}
body header#small-header .logo {
  top: -70px;
}
body .panel {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 40px;
  width: 100%;
  padding: 5px 30px;
}
body .panel .panel-item {
  height: 100%;
  width: 50px;
}
body .reservations {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}
body .reservations .reservation {
  width: 100%;
  height: 90px;
  background-color: #fafafa;
  margin-bottom: 5px;
  padding: 5px 20px;
  transition: transform 0.25s;
  position: relative;
  border-radius: 3px;
}
body .reservations .reservation.delete {
  transform: translateX(-90px);
}
body .reservations .reservation.delete .deleteReservation {
  right: -90px;
}
body .reservations .reservation.noData {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(100% - 35px);
}
body .reservations .reservation.noData::before,
body .reservations .reservation.noData::after {
  display: none;
}
body .reservations .reservation .deleteReservation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  width: 90px;
  background-color: #e74c3c;
  position: absolute;
  right: -110px;
  top: 0;
  padding: 30px;
}
body .reservations .reservation .status {
  width: 50px;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  float: left;
}
body .reservations .reservation .status i {
  width: 45px;
}
body .reservations .reservation .info {
  float: left;
  height: 100%;
  width: calc(100% - 50px);
  width: calc(100% - 80px);
  margin-left: 30px;
}
body .reservations .reservation .info .number {
  float: left;
  height: 100%;
  width: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5em;
}
body .reservations .reservation .info .keyword {
  display: block;
  margin: 20px 0 5px 0;
  float: left;
  width: calc(100% - 70px);
}
body .reservations .reservation .info .phone {
  font-size: 0.8em;
  min-width: 50%;
  display: block;
  float: left;
}
body .reservations .reservation .info .table {
  display: block;
  font-size: 0.75em;
  float: left;
}
body .reservations .reservation .info button {
  position: absolute;
  right: 10px;
  top: 10px;
  border-radius: 2px;
  width: 70px;
  height: 70px;
  box-sizing: border-box;
  padding: 10px;
  background-color: rgba(150, 150, 150, 0.1);
}
body .reservations .reservation .info button[disabled] i {
  opacity: 0.2;
}
body .reservations .reservation .info button.reserved {
  right: 102px;
}
body .reservations .reservation .options {
  display: flex;
  width: 10px;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: absolute;
  top: 0;
  right: 30px;
  z-index: 10;
}
body .reservations .reservation.legend {
  height: 20px;
}
body .reservations .reservation.legend .status,
body .reservations .reservation.legend .info .number,
body .reservations .reservation.legend .info .keyword,
body .reservations .reservation.legend .info .table {
  font-size: 12px;
}
body .reservations .reservation.legend .keyword {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
body .reservations .reservation:after,
body .reservations .reservation:before {
  content: '';
  display: block;
  width: 2px;
  height: 90px;
  position: absolute;
  right: 90px;
  top: 0;
  background-color: white;
}
body .reservations .reservation:before {
  right: 182px;
}
body .message {
  position: fixed;
  top: 30vh;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  width: 100%;
  max-width: 320px;
  padding: 18px 10px 15px 10px;
  border-top: 3px solid #dddddd;
  background-color: white;
  text-align: center;
  font-size: 0.8em;
  display: none;
  transition: all 0.25s;
  left: 50%;
  transform: translateY(0%) translateX(-50%);
  opacity: 0;
}
body .message.animate {
  transform: translateY(0%) translateX(-50%);
  opacity: 1;
}
body .message.neutral {
  border-color: #3498db;
}
body .message.warning {
  border-color: #e74c3c;
}
body .message.success {
  border: none;
}
body .message.success:before {
  content: '';
  display: block;
  margin: 0px auto 25px auto;
  height: 60px;
  width: 60px;
  background-image: url('success.svg');
  background-size: cover;
  background-position: center;
}
body .message .options {
  padding: 5px 0 0 0;
}
body .message .options button {
  font-size: 1.2em;
  padding: 0 10px;
}
body .message .options button.accept {
  color: #3498db;
}
body .message .options button.abort {
  color: #e74c3c;
}
body footer {
  height: 70px;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 40;
  background-color: white;
}
body footer .bottom-panel,
body footer .sub-panel {
  height: 70px;
  padding: 10px;
  position: relative;
  top: 0;
  z-index: 10;
  background-color: white;
  border-top: 1px solid #dddddd;
}
body footer .bottom-panel .panel-item,
body footer .sub-panel .panel-item {
  padding: 10px;
}
body footer .sub-panel {
  position: absolute;
  display: none;
  height: 90px;
  z-index: 5;
  top: 0;
  left: 0;
  transition: top 0.25s;
}
body footer .sub-panel .flex-wrap {
  display: flex;
  width: 100%;
  height: 50px;
  justify-content: space-around;
}
body footer .sub-panel .legal {
  font-size: 0.7em;
  justify-content: center;
  height: 15px;
  margin-top: 5px;
}
body footer .sub-panel .legal a {
  color: #74aef5;
  text-decoration: none;
  padding: 0 10px;
}
body footer .sub-panel.animate {
  top: -90px;
}
body .overlay {
  display: none;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 50;
  background-color: white;
  transition: all 0.25s;
  transform: scale(0.8) translateY(40px);
  align-items: center;
  justify-content: center;
}
body .overlay.show {
  display: flex;
}
body .overlay.animate {
  transform: scale(1) translateY(0);
  opacity: 1;
}
body .overlay .dial {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}
body .overlay .dial .digit {
  width: 30%;
  margin: 0 1.66% 10px 1.66%;
  display: block;
  height: 90px;
  font-size: 2em;
  font-weight: 300;
  border-radius: 5px;
  color: #999999;
  border: 1px solid #dddddd;
  box-sizing: border-box;
}
body .overlay .dial .digit.delete {
  padding: 25px;
}
body .overlay.error span.error_text {
  opacity: 1;
}
body .overlay span.error_text {
  text-align: center;
  width: 100%;
  display: block;
  font-size: .8em;
  color: #f41616;
  height: 1em;
  opacity: 0;
}
body .overlay.error input.w4i-input {
  border-color: #f31616;
}
body .impressum h1,
body .impressum h2,
body .impressum h3,
body .impressum h4,
body .impressum h5,
body .impressum h6,
body .impressum p, body .impressum ol, body .impressum ul {
  text-align: left;
  margin: 15px 0 10px 0;
}
body .impressum h2 {
  font-size: 1.2em;
}
body .impressum h3 {
  font-size: 1;
}
body .impressum p {
  font-size: 0.8em;
  line-height: 1.25em;
}
body .impressum ul {
	list-style-type: disc;
}
body .impressum ol, body .impressum ul {
  font-size: 0.8em;
  margin-left:20px;
  line-height: 1.25em;
}
body .impressum li ol, body .impressum li ul {
  font-size: 1em;
}
body .impressum label {
  font-weight: 400;
}
.billing .wrap {
  background-color: white;
  position: relative;
}
.billing .wrap.first .sticky {
  border-top: 1px solid #dddddd;
}
.billing .sticky {
  height: 90px;
  width: 100%;
  margin-bottom: 20px;
}
.billing .sticky .stick-wrap {
  height: 90px;
  position: relative;
  width: calc(100% + 20px);
  margin-left: -10px;
  background-color: white;
  border-bottom: 1px solid transparent;
  border-top: 1px solid transparent;
  text-align: center;
  font-size: 0.7em;
  padding-top: 6px;
}
.billing .sticky .stick-wrap .pdf-download {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 30px;
  left: 20px;
}
.billing .sticky .stick-wrap h2 {
  margin: 5px 0 10px 0;
}
.billing .sticky .stick-wrap .total-month {
  text-align: center;
  display: block;
}
.billing .sticky .stick-wrap .total-month .count {
  font-size: 1.8em;
}
.billing .sticky .stick-wrap .price {
  position: absolute;
  top: 5px;
  right: 20px;
}
.billing .sticky .stick-wrap.stick {
  position: fixed;
  top: 90px;
  left: 0;
  height: 100px;
  padding: 10px;
  border-bottom: 1px solid #dddddd;
}
.billing .sticky .stick-wrap.stick .price {
  top: 10px;
  right: 30px;
}
.billing .sticky .stick-wrap.border {
  border-top: 1px solid #dddddd;
}
.billing .sticky.head {
  height: 115px;
}
.billing .sticky.head .stick-wrap {
  border-top: none;
  border-bottom: none;
  height: 115px;
}
.billing .sticky.head .total-count {
  text-align: center;
  font-size: 1.2em;
  margin: 30px 0;
  display: block;
}
.billing .sticky.head .total-count .count {
  font-size: 2em;
}
.billing .bill-reservation {
  background-color: #fafafa;
  margin-bottom: 5px;
  padding: 10px 5px;
}
.billing .bill-reservation .bill-sms {
  padding: 5px 10px;
}
.billing .bill-reservation .bill-sms .sms-icon {
  height: 20px;
  width: 20px;
  padding: 2px;
  margin: 0 5px;
  float: left;
}
#refCode .dial .digit {
  display: none;
}
@media only screen and (max-width: 768px) {
  body:after {
    content: '';
    display: none;
  }
  body .desktop-wrap {
    position: static;
    width: 100%;
    transform: none;
  }
}
@media only screen and (max-width: 1024px) {
  body .reservations .reservation:after,
  body .reservations .reservation:before {
    display: none;
  }
}
@keyframes hover {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}