@keyframes shake {
  0% {
    transform: translate(-10px, 0);
  }
  100% {
    transform: translate(10px, 0);
  }
}
.quickShake {
  animation: shake 0.1s linear;
  animation-iteration-count: 3;
}

.page-footer {
  padding-top: 3rem;
}

.preselectedTyre {
  border-radius: 8px;
  position: relative;
  background: var(--font-darkgray);
  padding: 1rem 5rem 1rem 1rem;
}
.preselectedTyre .clearRequestedTyres {
  position: absolute;
  right: 1rem;
  top: 1rem;
  border-radius: 0.25rem;
  background: var(--color-accent);
  font-weight: bold;
  padding: 0.5rem;
}
.preselectedTyre .colored {
  color: var(--color-accent);
  font-size: 12px;
  display: block;
  margin: 0 0 0.25rem 0;
}
.preselectedTyre .selectedItemTitle {
  font-size: 16px;
  margin: 0.25rem 0;
  display: block;
}
.preselectedTyre .sepectedItemSpec {
  font-size: 14px;
  display: block;
}
.preselectedTyre .priceWrap {
  font-size: inherit;
}

.orderData {
  font-size: 0.75rem;
}

.loginWrapper {
  width: 100%;
}
.loginWrapper .loginform {
  width: 100%;
}
.loginWrapper .loginform .fieldWrap label {
  font-size: 12px;
  padding-bottom: 0;
  display: block;
}
.loginWrapper .loginform input {
  margin: 0;
}
.loginWrapper .loginform .submit {
  margin: 0;
}
.loginWrapper .subOverlayLogin .loginFailed {
  margin-top: 2rem;
}

body main#main {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body main#main > *,
body .page-footer {
  position: relative;
}
body ul.chooseFzg, body ul.chooseFzg li {
  list-style: none;
  position: relative;
}
body ul.chooseFzg span.deleteVehicle, body ul.chooseFzg li span.deleteVehicle {
  position: absolute;
  right: 15px;
  top: 15px;
  cursor: pointer;
}
body ul.chooseFzg span.deleteVehicle svg, body ul.chooseFzg span.deleteVehicle svg path, body ul.chooseFzg li span.deleteVehicle svg, body ul.chooseFzg li span.deleteVehicle svg path {
  fill: #fff;
}

.tyreSizeSimple .chooseService {
  display: block;
  width: 100%;
}
.tyreSizeSimple .chooseService .tyreSizeRadialSimpleWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.tyreSizeSimple .chooseService .tyreSizeRadialSimpleWrap label {
  background: var(--color-accent);
  color: #fff;
  text-transform: uppercase;
  flex: 0 1 24%;
  cursor: pointer;
  justify-content: flex-start;
  border-radius: 8px;
  overflow: hidden;
  padding: 0;
  font-size: 1rem;
  font-weight: 900;
  align-content: center;
  margin: 0.75rem 0;
  text-align: center;
}
.tyreSizeSimple .chooseService .tyreSizeRadialSimpleWrap label .checkIndicator {
  background: var(--color-accent);
  display: none;
  width: 5px;
  border-radius: 1rem 0 0 1rem;
  position: relative;
}
.tyreSizeSimple .chooseService .tyreSizeRadialSimpleWrap label .checkIndicator:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: #fff;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  left: -12px;
  position: absolute;
  top: 50%;
  margin-top: -12px;
}
.tyreSizeSimple .chooseService .tyreSizeRadialSimpleWrap label .checkIndicator:after {
  display: none;
  content: "\e905";
  width: 16px;
  height: 16px;
  background: var(--color-accent);
  border-radius: 50%;
  top: 50%;
  margin-top: -7px;
  position: absolute;
  left: -7px;
  font-family: "ReifenLorenz";
}
.tyreSizeSimple .chooseService .tyreSizeRadialSimpleWrap label .tyreSizeRadio {
  display: none;
}
.tyreSizeSimple .chooseService .tyreSizeRadialSimpleWrap label .tyreSizeRadio:checked + span.checkIndicator:after {
  display: block;
}
.tyreSizeSimple .chooseService .tyreSizeRadialSimpleWrap label .tyreSizeDescription {
  padding: 18px 16px;
  display: block;
  font-size: 18px;
  line-height: 22px;
}

form input[type=text],
form input[type=password], main input[type=text],
main input[type=password] {
  margin: 8px 0 20px;
  display: block;
  width: 100%;
  border: none;
  box-sizing: border-box;
  font-size: 21px;
  border-radius: 8px;
  padding: 18px 16px 18px;
}
form .inputDescription, main .inputDescription {
  font-size: 16px;
  margin-bottom: 20px;
  display: block;
}
form select, main select {
  width: 100%;
  border: none;
  border-radius: 8px;
  padding: 15px 16px 13px;
  font-size: 21px;
  text-align: left;
  line-height: 21px;
  appearance: none;
  background-image: url(/typo3conf/ext/topmr6/Resources/Public/Icons/expand_more_black_24dp.svg);
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: 90% center;
}
form .checkWrap, main .checkWrap {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
form .checkWrap input[type=checkbox], main .checkWrap input[type=checkbox] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  /* Remove most all native input styles */
  appearance: none;
  /* For iOS < 15 */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
}
form .checkWrap input[type=checkbox]::before, main .checkWrap input[type=checkbox]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
  transform: scale(0);
  transform-origin: bottom left;
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em var(--color-accent);
  /* Windows High Contrast Mode */
  background-color: var(--color-accent);
}
form .checkWrap input[type=checkbox]:checked::before, main .checkWrap input[type=checkbox]:checked::before {
  transform: scale(1);
}
form .checkWrap label, main .checkWrap label {
  line-height: 1.2em;
  font-size: 16px;
}

body.noScroll {
  overflow: hidden;
}
body #progressbar {
  display: none;
  position: relative;
  z-index: 15;
  width: 100%;
  margin-bottom: 20px;
  top: 60px;
}
body #progressbar .progressSegmentWrap {
  display: flex;
  width: min(80vw, 660px);
  margin: 0 auto;
  padding-top: 15px;
  gap: 5px;
}
body #progressbar .progressSegmentWrap .progressStep {
  flex: 1 1 100%;
  height: 7px;
  border-radius: 4px;
  background: #666666;
}
body #progressbar .progressSegmentWrap .progressStep.stepActive {
  background: var(--color-accent);
}
body .closeButton {
  display: block;
  position: absolute;
  z-index: 666;
  top: 16px;
  left: 16px;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/back.svg) #666666;
  border-radius: 50%;
  width: 32px;
  background-size: 8px;
  height: 32px;
  cursor: pointer;
  background-position: center center;
  background-repeat: no-repeat;
}
body .EmailMessage {
  position: absolute;
  right: 10px;
  left: 10px;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/warning_white.svg) 6px center no-repeat #27282B;
  border-radius: 4px;
  padding: 12px 12px 12px 45px;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  top: 60px;
}
body .fieldWrap label a,
body .checkWrap a {
  color: var(--color-accent) !important;
}
body > .StoredTyreInfo {
  display: none;
}
body .hidden {
  display: none;
}
body .temporaryHidden {
  display: none !important;
}
body .buttonStyleWhite {
  display: block;
  background: #fff !important;
  color: #666666 !important;
  font-size: 18px !important;
  text-decoration: none;
}
body .buttonStyleWhite .light {
  display: block;
  font-size: 16px;
  padding-bottom: 10px;
  text-transform: none;
  font-weight: 400;
}
body .buttonStyleWhite .colored {
  color: var(--color-accent);
}
body .buttonWrap.buttonChooseContainer {
  flex-wrap: wrap;
  justify-content: center;
}
body .buttonWrap.buttonChooseContainer .orDivider {
  font-weight: bold;
  margin: 4px 0;
  font-size: 16px;
  line-height: 21px;
}
body .buttonWrap.buttonChooseContainer .buttonStyle {
  padding: 8px;
  margin: 12px 0 12px 10px;
}
body .buttonWrap a {
  text-decoration: none !important;
}
body .registerCode {
  position: relative;
}
body .tyreSize .moreInfo {
  position: absolute;
  right: 0px;
  top: 0;
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 4px;
  cursor: pointer;
}
body .tyreSize .moreInfo:before {
  content: "i";
  display: flex;
  width: 20px;
  height: 20px;
  background: #fff;
  color: #27282B;
  border-radius: 50%;
  left: 6px;
  top: 6px;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  text-transform: none;
}
body .tyreSize .moreInfoText {
  display: none;
  position: absolute;
  background: #fff;
  border-radius: 8px;
  text-transform: none;
  font-weight: 400;
  font-size: 15px;
  width: 60%;
  top: 40px;
  padding: 20px;
  box-sizing: border-box;
  right: 0;
  color: #27282B;
  line-height: 1.33em;
  border: 2px solid var(--color-accent);
}
body .buttonStyle .moreInfo {
  position: absolute;
  right: 11px;
  top: 11px;
  background: #27282B;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
}
body .buttonStyle .moreInfo:before {
  content: "i";
  display: flex;
  width: 20px;
  height: 20px;
  background: #fff;
  color: #27282B;
  border-radius: 50%;
  left: 6px;
  top: 6px;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
  text-transform: none;
}
body .buttonStyle .moreInfoText {
  display: none;
  position: absolute;
  background: #fff;
  border-radius: 8px;
  text-transform: none;
  font-weight: 400;
  font-size: 15px;
  width: 60%;
  top: 65px;
  padding: 20px;
  box-sizing: border-box;
  right: 0;
  border: 2px solid var(--color-accent);
}
body .LandingWrapper .orDivider {
  font-weight: bold;
  margin: 15px 0px;
  font-size: 16px;
  line-height: 21px;
  text-align: center;
  display: block;
  text-transform: uppercase;
}
body .LoginModuleFrame {
  display: none;
  position: absolute;
  z-index: 15;
  top: 0;
  right: 0;
  min-height: 100vh;
  width: 90%;
  background: #43454A;
  border-radius: 16px 0 0 16px;
  max-width: 350px;
  font-family: "Lato", sans-serif;
}
body .LoginModuleFrame .loginHeader {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  width: 100%;
  color: #fff;
  box-shadow: 0 1px 0 #27282B;
}
body .LoginModuleFrame .loginHeader .loginText {
  font-size: 28px;
  font-weight: bold;
  padding: 15px 16px;
}
body .LoginModuleFrame .loginHeader .closeIcon {
  border-left: 1px solid #27282B;
  display: flex;
  flex-wrap: wrap;
  width: 70px;
  justify-content: center;
  padding: 7px;
  box-sizing: border-box;
}
body .LoginModuleFrame .loginHeader .closeIcon .iconWrap {
  background: #fff;
  border-radius: 50%;
  position: relative;
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-content: center;
}
body .LoginModuleFrame .loginHeader .closeIcon .iconWrap:before, body .LoginModuleFrame .loginHeader .closeIcon .iconWrap:after {
  position: absolute;
  border-bottom: 2px solid #43454A;
  border-left: 2px solid #43454A;
  width: 6px;
  height: 6px;
  content: "";
  transform: rotate(-135deg);
  top: 6px;
  left: 2px;
}
body .LoginModuleFrame .loginHeader .closeIcon .iconWrap:after {
  transform: rotate(45deg);
  left: 10px;
}
body .LoginModuleFrame .loginHeader .closeIcon .text {
  font-size: 9px;
}
body .LoginModuleFrame .noAccountBanner {
  color: #fff;
  background: #27282B;
  margin: 16px;
  border-radius: 8px;
}
body .LoginModuleFrame .noAccountBanner .noAccountBannerText {
  font-size: 21px;
  line-height: 1.25em;
}
body .LoginModuleFrame .noAccountBanner .noAccountBannerText h4 {
  margin-bottom: 22px;
  font-weight: bold;
}
body .LoginModuleFrame .noAccountBanner .noAccountBannerText h4 colored {
  color: var(--color-accent);
  display: block;
}
body .LoginModuleFrame .noAccountBanner .noAccountBannerContent {
  padding: 32px 16px;
}
body .LoginModuleFrame .noAccountBanner .buttonStyle {
  border-radius: 0 0 8px 8px;
}
body .LoginModuleFrame .loginProfile {
  padding: 16px;
}
body .LoginModuleFrame .loginProfile h2 {
  font-size: 21px;
  font-weight: bold;
  color: #fff;
  margin-bottom: 26px;
}
body .LoginModuleFrame .loginProfile .actionList {
  display: block;
}
body .LoginModuleFrame .loginProfile .actionList .actionItem .actionTitle {
  display: block;
  text-decoration: none;
  color: #fff;
  font-size: 21px;
  padding: 18px 0 21px 0;
  box-shadow: 0px 1px 0px #27282B;
}
body .LoginModuleFrame .loginProfile .actionList .actionItem .actionTitle:hover {
  color: var(--color-accent);
  font-weight: bold;
}
body .LoginModuleFrame .loginProfile .logoutButton {
  display: inline-block;
  background: #fff;
  color: #666666;
  text-decoration: none;
}
body .LoginModuleFrame .FailResponse h2 {
  padding-top: 16px;
  font-size: 16px;
  color: #FF3463;
  line-height: 1.5em;
}
body .loginFormWrapper {
  padding: 16px;
}
body .loginFormWrapper .loginform input {
  padding: 18px 16px 21px;
  width: 100%;
  border: none;
  background: #fff;
  font-size: 21px;
  color: #666666;
  margin-bottom: 1px;
  box-sizing: border-box;
  border-radius: 0;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}
body .loginFormWrapper .loginform input#email {
  border-radius: 8px 8px 0 0;
}
body .loginFormWrapper .loginform input.password {
  margin: 0;
}
body .loginFormWrapper .loginform input.submit {
  background: var(--color-accent);
  font-size: 21px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 0 0 8px 8px;
  color: #fff;
  margin: 0;
}
body .fieldWrap {
  margin-top: 20px;
}
body .fieldWrap label {
  font-size: 16px;
  padding-bottom: 6px;
  display: block;
}
body .fieldWrap input, body .fieldWrap select {
  height: auto;
  width: 100%;
  border-radius: 8px;
  padding: 18px 16px;
  color: #666666;
  box-sizing: border-box;
  border: 2px solid #fff;
  display: block;
  font-size: 18px;
}
body .fieldWrap input.submit, body .fieldWrap select.submit {
  background: var(--color-accent);
  font-size: 21px;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 8px;
  color: #fff;
  border: none;
  margin-top: 32px;
}
body .fieldWrap input#plate, body .fieldWrap select#plate {
  text-transform: uppercase;
}
body p.description {
  font-size: 21px;
  line-height: 28px;
  margin-bottom: 30px;
  display: block;
}
body p.description-small {
  font-size: 16px;
  line-height: 28px;
  font-weight: 400;
  display: block;
  margin-bottom: 22px;
}
body .entryByPlate .fieldWrap input.submit {
  margin-top: inherit;
}
body .addUserFzg {
  width: 100%;
}
body .addUserFzg .descriptionHeader {
  font-size: 21px;
  font-weight: bold;
}
body .addUserFzg .buttonWrap {
  display: flex;
}
body .addUserFzg .buttonWrap .backButton {
  margin: 0 10px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .addUserFzg .buttonWrap .submitButton {
  margin: 0 0 0 10px;
  border: none;
  color: #fff;
}
body .UpdateResponse .success {
  color: #65D87F;
  padding: 0 0 30px;
  display: block;
  font-weight: bold;
  font-size: 24px;
}
body .contactOverviewWrap .contactDetailItem {
  display: block;
  margin: 16px 0;
}
body .contactOverviewWrap .contactDetailItem b {
  display: block;
  font-size: 21px;
  line-height: 1.15em;
  font-weight: bold;
  padding: 2px 0;
}
body .contactOverviewWrap .contactDetailItem span {
  font-size: 16px;
  font-weight: 400;
  padding: 2px 0;
  display: block;
}
body .innerContactInformation {
  margin-bottom: 25px;
}
body .AppointmentWrap .appointmentItem {
  display: block;
  padding: 32px 16px;
  background: #43454A;
  border-radius: 8px;
  margin: 16px 0;
  position: relative;
}
body .AppointmentWrap .appointmentItem .editAppointment {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/pen.svg) center center no-repeat #27282B;
  background-size: 18px 18px;
}
body .AppointmentWrap .appointmentItem .appointmentDate {
  font-size: 16px;
  margin-bottom: 16px;
}
body .AppointmentWrap .appointmentItem .appointmentDate .PoSName {
  line-height: 20px;
}
body .AppointmentWrap .appointmentItem .AppointmentVehicle {
  font-size: 21px;
  font-weight: bold;
}
body .detailedAppointment {
  display: none;
  line-height: 1.25em;
}
body .detailedAppointment .containerWrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
body .detailedAppointment .containerWrap > div {
  background: #43454A;
  border-radius: 8px;
  padding: 32px 16px;
  margin-bottom: 16px;
  box-sizing: border-box;
  flex: 1 1 100%;
}
body .detailedAppointment .containerWrap > div h3 {
  font-size: 21px;
  font-weight: bold;
  margin-bottom: 24px;
}
body .detailedAppointment .containerWrap > div .appointmentDate {
  font-weight: bold;
}
body .detailedAppointment .containerWrap > div .PoSWrap {
  margin-top: 16px;
}
body .detailedAppointment .containerWrap > div .PoSWrap .PoSName {
  font-weight: bold;
}
body .topmr6_reilo_entry > .detailedAppointment {
  display: block;
}
body .hashRegistration .loginform .FailResponse h2 {
  color: var(--color-accent);
  font-size: 17px !important;
  padding: 20px 0;
}
body .StoredTyreInfo {
  background: #fff;
  color: #43454A;
  position: relative;
  border-radius: 8px 8px 0 0;
  padding: 16px;
  box-sizing: border-box;
}
body .StoredTyreInfo .plateLabel {
  position: absolute;
  top: -13px;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/warning_white.svg) 5px center no-repeat #FF3463;
  border-radius: 4px;
  color: #fff;
  padding: 8px 8px 8px 32px;
  font-size: 16px;
  background-size: 22px;
}
body .StoredTyreInfo .vehicleInfo {
  font-size: 16px;
  line-height: 21px;
  font-weight: 400;
}
body .StoredTyreInfo .vehicleInfo.descriptionBadTyre {
  color: #FF3463;
  margin-top: 26px;
  padding-left: 32px;
  position: relative;
}
body .StoredTyreInfo .vehicleInfo.descriptionBadTyre:before {
  content: "";
  display: inline-block;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/warning_orange.svg) 0px center no-repeat;
  border-radius: 4px;
  color: #fff;
  padding: 8px 8px 8px 20px;
  font-size: 16px;
  font-weight: bold;
  background-size: 24px;
  position: absolute;
  left: -2px;
  top: 5px;
}
body .StoredTyreInfo .vehicleInfo b {
  font-weight: 900;
}
body .StoredTyreInfo .Visual .vehicleRepresentation {
  display: block;
  position: relative;
  width: 300px;
  height: 230px;
  margin: 0 auto;
}
body .StoredTyreInfo .Visual .vehicleRepresentation .tireObject {
  position: absolute;
}
body .StoredTyreInfo .Visual .vehicleRepresentation .tireObject.leftFront {
  top: 0;
  right: 60px;
}
body .StoredTyreInfo .Visual .vehicleRepresentation .tireObject.leftRear {
  top: 70px;
  left: 0;
}
body .StoredTyreInfo .Visual .vehicleRepresentation .tireObject.rightFront {
  top: 100px;
  right: 25px;
}
body .StoredTyreInfo .Visual .vehicleRepresentation .tireObject.rightRear {
  top: 170px;
  left: 35px;
}
body .StoredTyreInfo .Visual .tireObject .description {
  font-size: 16px;
  font-weight: 400;
  color: #65D87F;
}
body .StoredTyreInfo .Visual .tireObject .tyreIcon {
  display: inline-block;
  position: relative;
  width: 60px;
  height: 50px;
}
body .StoredTyreInfo .Visual .tireObject .tyreIcon .tyreIconInner {
  display: inline-block;
  background: #4ABC57;
  transform: skew(343deg, 17deg);
  width: 48px;
  height: 50px;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 6px;
}
body .StoredTyreInfo .Visual .tireObject .tyreIcon:before, body .StoredTyreInfo .Visual .tireObject .tyreIcon:after {
  content: "";
  display: block;
  background: #65D87F;
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  top: 10px;
  left: 10px;
  transform: skew(355deg, 0deg);
  z-index: 1;
}
body .StoredTyreInfo .Visual .tireObject .tyreIcon:after {
  width: 35px;
  height: 35px;
  top: 18px;
  left: 18px;
  background: #fff;
}
body .StoredTyreInfo .Visual .tireObject.lowProfile .description, body .StoredTyreInfo .Visual .tireObject.highAge .description, body .StoredTyreInfo .Visual .tireObject.expertError .description {
  color: #FF3463;
}
body .StoredTyreInfo .Visual .tireObject.lowProfile .tyreIcon .tyreIconInner, body .StoredTyreInfo .Visual .tireObject.highAge .tyreIcon .tyreIconInner, body .StoredTyreInfo .Visual .tireObject.expertError .tyreIcon .tyreIconInner {
  background-color: #DB1B56;
}
body .StoredTyreInfo .Visual .tireObject.lowProfile .tyreIcon:before, body .StoredTyreInfo .Visual .tireObject.highAge .tyreIcon:before, body .StoredTyreInfo .Visual .tireObject.expertError .tyreIcon:before {
  background-color: #FF3463;
}
body .StoredTyreInfo .Visual .tireObject.disabled .description {
  color: lightGray;
}
body .StoredTyreInfo .Visual .tireObject.disabled .tyreIcon .tyreIconInner {
  background-color: lightGray;
}
body .StoredTyreInfo .Visual .tireObject.disabled .tyreIcon:before {
  background-color: #e5e5e5;
}
body .StoredTyreInfo .Visual .tireObject .tireInfoIcon {
  cursor: pointer;
  width: 20px;
  height: 20px;
  display: inline-block;
  top: 50%;
  position: absolute;
  right: -25px;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/info.svg) no-repeat;
  background-size: contain;
}
body .StoredTyreInfo .Visual .tireObject .tyreInfoWrap {
  background: gray;
  padding: 8px;
  color: #fff;
  position: absolute;
  bottom: 0;
  z-index: 20;
  font-size: 14px;
  line-height: 16px;
  border-radius: 8px;
  right: 0;
  display: none;
}
body .StoredTyreInfo .Visual .tireObject .tyreInfoWrap span {
  white-space: nowrap;
}
body .StoredTyreInfo .Visual .tireObject .tyreInfoWrap .tyreName,
body .StoredTyreInfo .Visual .tireObject .tyreInfoWrap .tyreInfo {
  display: block;
}
body .StoredTyreInfo .phoneContact {
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/phone.svg) 5px center no-repeat #FF3463;
  color: #fff;
  text-decoration: none;
  padding: 8px 8px 8px 32px;
  border-radius: 4px;
  background-size: 21px;
  margin-left: 48px;
  margin-top: 8px;
  display: inline-block;
  margin-bottom: 25px;
}
body .SuccessResponse .StoredTyreInfo {
  margin: 35px 0;
}
body .storedIssue {
  position: absolute;
  top: 15px;
  right: 0;
  border-radius: 4px;
  background: #fff;
  border: 1px solid #FF3463;
  display: none;
  cursor: pointer;
}
body .storedIssue .issueIcon {
  display: inline-block;
  width: 35px;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/warning_white.svg) center no-repeat #FF3463;
  background-size: contain;
  margin-right: 10px;
}
body .storedIssue .issueText {
  padding: 8px;
  color: #FF3463;
}
body .storedIssue .StoredTyreInfo {
  position: absolute;
  right: 0;
  top: 0;
}
body .storedIssue .StoredTyreInfo .closeInfo {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #27282B;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}
body .storedIssue .StoredTyreInfo .closeInfo:before, body .storedIssue .StoredTyreInfo .closeInfo:after {
  content: "";
  display: block;
  border-bottom: 2px solid #27282B;
  border-right: 2px solid #27282B;
  width: 10px;
  height: 10px;
  position: absolute;
  transform: rotate(-45deg);
  margin-left: -13px;
}
body .storedIssue .StoredTyreInfo .closeInfo:after {
  transform: rotate(135deg);
  margin-left: 15px;
}
body .contactWrap {
  margin-top: 1.5rem;
}
body .contactDetailItem {
  line-height: 1.33rem;
}
body .editUserData.icon-Edit_icon:before {
  content: "\e90a";
  font-family: "ReifenLorenz";
  color: var(--color-accent);
  font-size: 2rem;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
body .MainTyreStatus .buttonWrap,
body .MainTyreStatus .chooseService .buttonWrap,
body .storedTyreCheckWrap .buttonWrap,
body .storedTyreCheckWrap .chooseService .buttonWrap {
  flex-direction: column;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  text-align: center;
  margin: 0;
}
body .MainTyreStatus .buttonWrap .buttonStyle,
body .MainTyreStatus .chooseService .buttonWrap .buttonStyle,
body .storedTyreCheckWrap .buttonWrap .buttonStyle,
body .storedTyreCheckWrap .chooseService .buttonWrap .buttonStyle {
  display: block;
  width: 100%;
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  text-align: center;
  padding: 16px;
}
body .MainTyreStatus .buttonWrap .orDivider,
body .MainTyreStatus .chooseService .buttonWrap .orDivider,
body .storedTyreCheckWrap .buttonWrap .orDivider,
body .storedTyreCheckWrap .chooseService .buttonWrap .orDivider {
  font-weight: bold;
  margin: 15px 0;
  font-size: 16px;
  line-height: 21px;
}
body .MainTyreStatus .buttonWrap .selectTyreButton,
body .MainTyreStatus .chooseService .buttonWrap .selectTyreButton,
body .storedTyreCheckWrap .buttonWrap .selectTyreButton,
body .storedTyreCheckWrap .chooseService .buttonWrap .selectTyreButton {
  background: #FFFFFF;
  color: #666666;
}
body .MainTyreStatus .buttonWrap .getTerminButton,
body .MainTyreStatus .chooseService .buttonWrap .getTerminButton,
body .storedTyreCheckWrap .buttonWrap .getTerminButton,
body .storedTyreCheckWrap .chooseService .buttonWrap .getTerminButton {
  border-radius: 0 0 8px 8px;
}
body .MainTyreStatus .buttonWrap .selectTyreButton.storedTyreIssue,
body .MainTyreStatus .chooseService .buttonWrap .selectTyreButton.storedTyreIssue,
body .storedTyreCheckWrap .buttonWrap .selectTyreButton.storedTyreIssue,
body .storedTyreCheckWrap .chooseService .buttonWrap .selectTyreButton.storedTyreIssue {
  background: var(--color-accent) !important;
  color: #fff !important;
  margin-top: 12px !important;
}
body .MainTyreStatus .StoredTyreInfo.tyre-info-issue-1 ~ .chooseService .buttonWrap,
body .storedTyreCheckWrap .StoredTyreInfo.tyre-info-issue-1 ~ .chooseService .buttonWrap {
  flex-direction: column-reverse;
  margin-top: 0;
}
body .MainTyreStatus .StoredTyreInfo.tyre-info-issue-1 ~ .chooseService .buttonWrap .selectTyreButton,
body .storedTyreCheckWrap .StoredTyreInfo.tyre-info-issue-1 ~ .chooseService .buttonWrap .selectTyreButton {
  border-radius: 0 0 8px 8px;
  background: var(--color-accent);
  color: #fff;
}
body .MainTyreStatus .StoredTyreInfo.tyre-info-issue-1 ~ .chooseService .buttonWrap .getTerminButton,
body .storedTyreCheckWrap .StoredTyreInfo.tyre-info-issue-1 ~ .chooseService .buttonWrap .getTerminButton {
  border-radius: 8px;
  background: #FFFFFF;
  color: #666666;
}
body .storedTyreCheckWrap .storedTyreCheck {
  padding: 16px;
  background: #43454A;
  border-radius: 8px 8px 0 0;
}
body .storedTyreCheckWrap .storedTyreCheck .subOverlayHeader {
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 32px;
}
body .storedTyreCheckWrap .storedTyreCheck .storedTyreDescription {
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
body .storedTyreCheckWrap .storedTyreCheck .storedTyreDescription .tyreStatusDate {
  color: #999999;
}
body .storedTyreCheckWrap .buttonWrap .buttonInnerWrap .buttonStyle {
  padding: 6px;
  margin: 0;
  border-radius: 0 0 6px 6px;
}
body .storedTyreCheckWrap .buttonWrap .buttonInnerWrap .buttonStyle.Book {
  border-radius: 0;
}
body .storedTyreCheckWrap .buttonWrap .buttonInnerWrap .buttonStyle .statement {
  display: block;
  font-size: 21px;
  font-weight: 900;
  line-height: 30px;
}
body .storedTyreCheckWrap .buttonWrap .buttonInnerWrap .buttonStyle .buttondescription {
  font-size: 16px;
  line-height: 28px;
  text-transform: none;
  font-weight: 400;
}
body .buttonDescription {
  font-size: 16px;
  color: #999999;
  margin-top: 16px;
  display: block;
  line-height: 21px;
}
body .currentUsernameWrap {
  display: flex;
  justify-content: space-between;
}
body .currentUsernameWrap .editUsername {
  background: #fff;
  border-radius: 8px;
  padding: 18px 16px;
  color: #000;
  font-size: 14px;
  cursor: pointer;
}
body .currentUsernameWrap .currentEmail {
  font-weight: bold;
}
body .errorWrapper {
  padding: 0 0 22px 0;
}
body .errorWrapper .ErrorHeader {
  font-size: 22px;
  font-weight: bold;
}
body .errorWrapper .errorMessage {
  color: var(--color-accent);
  font-size: 20px;
  line-height: 1em;
  padding: 10px 0;
}
body .updateUserdataUSername .hinweiss {
  font-weight: bold;
  padding: 20px 0 10px;
}
body .updateUserdataUSername .hinweiss colored {
  color: var(--color-accent);
}
body main {
  background: linear-gradient(0deg, #fff 0%, #fff 45%, #d3d3d3 100%) fixed;
  min-height: 100vh;
  font-family: "Lato", sans-serif;
  position: relative;
}
body main h1 {
  font-size: 28px;
  line-height: 36px;
  font-family: "Lato", sans-serif;
  font-weight: 900;
  padding-bottom: 30px;
  display: block;
  width: 100%;
}
body main colored {
  color: var(--color-accent);
}
body main greenColored {
  color: #65D87F;
}
body main .skipChecks {
  width: 100%;
  display: block;
}
body main .overlayContentChooseTyreSize .buttonWrap span.buttonStyle {
  width: 48%;
}
body main .topmr6_reilo_entry,
body main .subOverlaySelectPointOfSale {
  padding: 64px 16px 30px 16px;
}
body main .topmr6_reilo_entry h1,
body main .subOverlaySelectPointOfSale h1 {
  text-transform: uppercase;
}
body main .topmr6_reilo_entry .simpleStepWrap,
body main .subOverlaySelectPointOfSale .simpleStepWrap {
  display: flex;
  padding: 15px 0 25px;
}
body main .topmr6_reilo_entry .simpleStepWrap ul.simpleSteps li,
body main .subOverlaySelectPointOfSale .simpleStepWrap ul.simpleSteps li {
  align-items: center;
  display: flex;
  font-size: 21px;
  font-weight: 600;
  padding: 4px 0;
}
body main .topmr6_reilo_entry .simpleStepWrap ul.simpleSteps li colored,
body main .subOverlaySelectPointOfSale .simpleStepWrap ul.simpleSteps li colored {
  padding-right: 8px;
  font-size: 37px;
  font-weight: 900;
}
body main .topmr6_reilo_entry .selectYourStore,
body main .subOverlaySelectPointOfSale .selectYourStore {
  padding-top: 25px;
  width: 100%;
}
body main .topmr6_reilo_entry .selectYourStore h3,
body main .subOverlaySelectPointOfSale .selectYourStore h3 {
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  padding-bottom: 12px;
}
body main .topmr6_reilo_entry .selectYourStore select,
body main .subOverlaySelectPointOfSale .selectYourStore select {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 8px;
  font-size: 21px;
  padding: 18px 40px 21px 16px;
  height: auto;
}
body main .topmr6_reilo_entry .selectYourStore .selectedPoS,
body main .subOverlaySelectPointOfSale .selectYourStore .selectedPoS {
  padding: 16px 0;
  display: block;
  font-size: 16px;
  color: var(--color-defaultGray);
}
body main .topmr6_reilo_entry .selectYourStore button,
body main .subOverlaySelectPointOfSale .selectYourStore button {
  background: var(--color-accent);
  border: none;
  border-radius: 8px;
  width: 100%;
  padding: 18px 16px;
  box-sizing: border-box;
  margin-top: 12px;
  text-align: center;
  text-transform: uppercase;
  font-size: 21px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
}
body main .topmr6_reilo_entry .descriptiveText,
body main .subOverlaySelectPointOfSale .descriptiveText {
  display: block;
  font-size: 21px;
  padding: 10px 0;
  font-weight: bold;
  line-height: 28px;
}
body main .topmr6_reilo_entry h2,
body main .subOverlaySelectPointOfSale h2 {
  font-size: 28px;
  font-weight: bold;
}
body main .topmr6_reilo_entry input.hashCode,
body main .subOverlaySelectPointOfSale input.hashCode {
  margin: 20px 0;
  display: block;
  width: 100%;
  border: none;
  box-sizing: border-box;
  font-size: 21px;
  border-radius: 8px;
  padding: 18px 16px 18px;
  text-transform: uppercase;
}
body main .topmr6_reilo_entry input.hashCode:disabled,
body main .subOverlaySelectPointOfSale input.hashCode:disabled {
  color: #65D87F;
  background: #fff;
}
body main .overLayedContent {
  font-family: "Lato", sans-serif;
  position: relative;
  overflow: hidden;
  /*
  &:before {
    content: "";
    display: block;
    background: url(/typo3conf/ext/topmr6/Resources/Public/Media/background_mobile.png) no-repeat center center;
    background-size: cover;
    position: absolute;
    left: -10px;
    top: -10px;
    filter: blur(8px);
    bottom: -10px;
    right: -10px;
  }
  */
}
body main .overLayedContent > .tx-topmr6, body main .overLayedContent .UpdateResponse {
  position: relative;
}
body main .overLayedContent .overlayContent {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding: 40px 16px 16px;
  box-sizing: border-box;
}
body main .overLayedContent .overlayContent .overlayHeadline {
  display: block;
  width: 100%;
  font-weight: 900;
  font-size: 28px;
  padding: 16px 0;
  text-transform: uppercase;
  margin-bottom: 20px;
}
body main .overLayedContent .overlayContent .overlayDescription {
  font-size: 16px;
  line-height: 28px;
  display: block;
  margin-bottom: 30px;
  width: 100%;
  position: relative;
}
body main .overLayedContent .overlayContent .overlayDescription b {
  font-weight: bold;
}
body main .overLayedContent .overlayContent .calendarContainer {
  display: block;
  width: 100%;
  margin-bottom: 25px;
}
body main .overLayedContent .overlayContent .calendarContainer .monthSelector {
  width: 100%;
  font-size: 21px;
  font-weight: 600;
  color: #999999;
  display: flex;
  overflow-x: scroll;
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */
  scrollbar-width: none;
  /* Firefox */
}
body main .overLayedContent .overlayContent .calendarContainer .monthSelector::-webkit-scrollbar {
  display: none;
  /* Safari and Chrome */
}
body main .overLayedContent .overlayContent .calendarContainer .monthSelector .month {
  display: block;
  padding-left: 16px;
  cursor: pointer;
  line-height: 24px;
}
body main .overLayedContent .overlayContent .calendarContainer .monthSelector .month:first-child {
  padding-left: 0;
}
body main .overLayedContent .overlayContent .calendarContainer .monthSelector .month.activeMonth {
  color: var(--color-accent);
}
body main .overLayedContent .overlayContent .calendarContainer .currentMonthSelector {
  padding-top: 30px;
}
body main .overLayedContent .overlayContent .calendarContainer .currentMonthSelector table {
  width: 100%;
  border-collapse: collapse;
}
body main .overLayedContent .overlayContent .calendarContainer .currentMonthSelector table tr th {
  font-weight: bold;
  font-size: 16px;
  text-align: center;
  padding: 20px 0;
}
body main .overLayedContent .overlayContent .calendarContainer .currentMonthSelector table tr td {
  border-top: 1px solid #999999;
  text-align: center;
  color: #999999;
  font-weight: bold;
  font-size: 16px;
  padding: 20px 0;
}
body main .overLayedContent .overlayContent .calendarContainer .currentMonthSelector table tr td .day-number {
  display: block;
  padding: 6px;
  border-radius: 8px;
}
body main .overLayedContent .overlayContent .calendarContainer .currentMonthSelector table tr td.today .day-number {
  background: #fff;
  color: var(--color-accent);
}
body main .overLayedContent .overlayContent .buttonWrap {
  display: flex;
  align-items: flex-end;
  align-content: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
body main .overLayedContent .overlayContent .buttonWrap button {
  line-height: 25px;
  font-size: 21px;
  font-weight: 900;
  border-radius: 8px;
  border: none;
  text-transform: uppercase;
  text-align: center;
  padding: 18px 16px;
  cursor: pointer;
  flex: 0 0 49%;
}
body main .overLayedContent .overlayContent .buttonWrap button.backButton, body main .overLayedContent .overlayContent .buttonWrap button.stepBackButton, body main .overLayedContent .overlayContent .buttonWrap button.whiteButton {
  color: #666666;
  background: #fff;
}
body main .overLayedContent .overlayContent .buttonWrap button.nextButton {
  color: #fff;
  background: var(--color-accent);
}
body main .overLayedContent .showAvailable-appointment .calendarContainer .currentMonthSelector table tr td .day-number.appointmentRegularAv {
  color: var(--font-page-default);
  cursor: pointer;
}
body main .overLayedContent .showAvailable-appointmentPremium .calendarContainer .currentMonthSelector table tr td .day-number.appointmentPremiumAv {
  color: var(--font-page-default);
  cursor: pointer;
}
body main .overLayedContent .showAvailable-appointmentFlex .calendarContainer .currentMonthSelector table tr td .day-number.appointmentFlexAv {
  color: var(--font-page-default);
  cursor: pointer;
}
body main .overLayedContent .subOverlay {
  position: fixed;
  z-index: 15;
  top: 0;
  background: rgba(0, 0, 0, 0.66);
  left: 0;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}
body main .overLayedContent .subOverlay.hidden {
  display: none;
}
body main .overLayedContent .subOverlay.subOverlayWhite .subOverlayInner {
  background: #FFFFFF;
  color: #27282B;
  position: relative;
}
body main .overLayedContent .subOverlay.subOverlayWhite .subOverlayInner .warningTopLabel {
  position: absolute;
  top: -15px;
  background: #FF3463;
  border-radius: 4px;
  color: #fff;
  padding: 5px 8px 5px 25px;
  font-size: 16px;
  line-height: 21px;
  font-weight: bold;
  display: inline-flex;
}
body main .overLayedContent .subOverlay.subOverlayWhite .subOverlayInner .warningTopLabel:before {
  position: absolute;
  top: -15px;
  background: #FF3463;
  border-radius: 4px;
  color: #fff;
  padding: 5px 8px 5px 35px;
  font-size: 16px;
  line-height: 21px;
  font-weight: bold;
  display: inline-flex;
}
body main .overLayedContent .subOverlay.subOverlayWhite .subOverlayInner .warningText {
  font-size: 16px;
  color: #FF3463;
  line-height: 21px;
  font-weight: 400;
  padding-left: 45px;
  position: relative;
}
body main .overLayedContent .subOverlay.subOverlayWhite .subOverlayInner .warningText:before {
  position: absolute;
  left: 5px;
  top: 50%;
  margin-top: -17px;
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/warning_orange.svg) no-repeat;
  background-size: contain;
}
body main .overLayedContent .subOverlay.subOverlayWhite .subOverlayInner .warningText b {
  font-weight: bold;
}
body main .overLayedContent .subOverlay.subOverlayWhite .subOverlayInner .otherOptionSpacer {
  display: block;
  font-weight: bold;
  width: 100%;
  text-align: center;
  margin: 16px 0 4px;
  font-size: 16px;
}
body main .overLayedContent .subOverlay.subOverlayWhite .subOverlayInner .chooseService {
  display: block;
  width: 100%;
}
body main .overLayedContent .subOverlay.subOverlayWhite .subOverlayInner .footerLine {
  display: block;
  width: 100%;
  height: 70px;
}
body main .overLayedContent .subOverlay.subOverlayWhite .subOverlayInner .footerLine .closeFooter {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: #CCCCCC;
  left: 0;
  border-radius: 0 0 8px 8px;
  padding: 18px 16px;
  box-sizing: border-box;
  text-align: center;
  cursor: pointer;
  font-size: 21px;
  font-weight: 900;
  color: #666666;
  line-height: 21px;
  text-transform: uppercase;
}
body main .overLayedContent .subOverlay .subOverlayInner {
  background: var(--color-footerColor);
  border-radius: 8px;
  color: var(--font-page-default);
  margin: 16px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  padding: 32px 16px;
  max-width: 500px;
  flex: 1 1 500px;
}
body main .overLayedContent .subOverlay .subOverlayInner h4 {
  font-size: 21px;
  font-weight: 900;
  text-transform: uppercase;
  padding: 16px 0;
  width: 100%;
}
body main .overLayedContent .subOverlay .subOverlayInner .descText {
  font-size: 16px;
  line-height: 28px;
  padding: 16px 0;
  width: 100%;
}
body main .overLayedContent .subOverlay .subOverlayInner .terminWrap {
  display: block;
  width: 100%;
  padding: 16px 0;
}
body main .overLayedContent .subOverlay .subOverlayInner .terminWrap select {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 8px;
  font-size: 21px;
  padding: 18px 40px 21px 16px;
  height: auto;
}
body main .overLayedContent .subOverlay .subOverlayInner .buttonWrap {
  padding: 16px 0;
}
body main .overLayedContent .BookingOverlay {
  color: #fff;
  min-height: 100%;
  width: 100%;
  padding: 40px 15px 15px;
  box-sizing: border-box;
}
body main .overLayedContent .BookingOverlay:before {
  content: "";
  display: block;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Media/background_mobile.png) no-repeat center center;
  background-size: cover;
  position: absolute;
  left: -10px;
  top: -10px;
  filter: blur(8px);
  bottom: -10px;
  right: -10px;
}
body main .overLayedContent .BookingOverlay h4 {
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  font-weight: 900;
  padding-bottom: 20px;
  padding-top: 15px;
}
body main .overLayedContent .BookingOverlay form {
  position: relative;
}
body main .overLayedContent .BookingOverlay .fieldWrap label {
  display: block;
  font-size: 16px;
  font-weight: 400;
  padding-bottom: 8px;
}
body main .overLayedContent .BookingOverlay .fieldWrap label a {
  color: inherit;
}
body main .overLayedContent .BookingOverlay .fieldWrap input {
  width: 100%;
  border-radius: 8px;
  padding: 18px 16px;
  margin: 0px 0 16px;
  color: #666666;
  box-sizing: border-box;
  border: 2px solid #fff;
}
body main .overLayedContent .BookingOverlay .fieldWrap input#plate {
  text-transform: uppercase;
}
body main .overLayedContent .BookingOverlay .fieldWrap.flexWrap {
  flex-wrap: wrap;
  padding: 16px 0;
}
body main .overLayedContent .BookingOverlay .fieldWrap.flexWrap .checkWrap {
  display: flex;
  align-items: center;
}
body main .overLayedContent .BookingOverlay .fieldWrap.flexWrap input {
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  margin-right: 10px;
}
body main .overLayedContent .BookingOverlay .fieldWrap.flexWrap input#plate {
  text-transform: uppercase;
}
body main .overLayedContent .BookingOverlay .fieldWrap.flexWrap label {
  padding: 0;
}
body main .overLayedContent .BookingOverlay .fieldWrap .errorText {
  display: none;
  font-size: 14px;
  color: var(--color-accent);
  padding: 5px 0 0 0;
  width: 100%;
}
body main .overLayedContent .BookingOverlay .fieldWrap.error input {
  border: 2px solid var(--color-accent);
}
body main .overLayedContent .BookingOverlay .fieldWrap.error .errorText {
  display: block;
}
body main .overLayedContent .BookingOverlay .fieldWrap.error.flexWrap label {
  color: var(--color-accent);
}
body main .overLayedContent .BookingOverlay .fieldWrap .plateResponse {
  position: relative;
}
body main .overLayedContent .BookingOverlay .fieldWrap .plateResponse .responseType {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 15px;
  top: 50%;
  margin-top: -11px;
  cursor: pointer;
}
body main .overLayedContent .BookingOverlay .fieldWrap .plateResponse .responseType.responseType-0 {
  background: var(--color-accent);
  display: block;
}
body main .overLayedContent .BookingOverlay .fieldWrap .plateResponse .responseType.responseType-1 {
  background: green;
  display: block;
}
body main .overLayedContent .BookingOverlay .fieldWrap .plateResponse .errorContainer {
  display: flex;
  position: absolute;
  right: 12px;
  top: 20px;
  width: 350px;
  flex-wrap: wrap;
  justify-content: end;
}
body main .overLayedContent .BookingOverlay .fieldWrap .plateResponse .errorContainer .responseMessage {
  background: var(--color-accent);
  padding: 15px;
  border-radius: 8px;
  display: inline-block;
  margin: 5px 0;
}
body main .overLayedContent .BookingOverlay .fieldWrap .plateResponse .errorContainer .responseMessage .warning {
  background: green;
}
body main .overLayedContent .BookingOverlay .fieldWrap .plateResponse .errorContainer.hidden {
  display: none;
}
body main .overLayedContent .BookingOverlay .fieldWrapCustomerLogin .generateAccount {
  padding-bottom: 0;
}
body main .overLayedContent .BookingOverlay .fieldWrapCustomerLogin .generateAccount #generateAccount {
  margin: 0 12px 0 0;
}
body main .overLayedContent .BookingOverlay .fieldWrapCustomerLogin .generateAccount label {
  font-weight: bold;
  font-size: 21px;
  line-height: 21px;
  display: block;
}
body main .overLayedContent .BookingOverlay .buttonWrap {
  display: flex;
  align-items: flex-end;
  width: 100%;
}
body main .overLayedContent .BookingOverlay .buttonWrap button {
  font-size: 21px;
  font-weight: 900;
  border-radius: 8px;
  border: none;
  text-transform: uppercase;
  text-align: center;
  padding: 18px 16px 21px 16px;
  cursor: pointer;
  flex: 0 0 50%;
}
body main .overLayedContent .BookingOverlay .buttonWrap button.backButton {
  color: #666666;
  background: #fff;
  margin-right: 4px;
}
body main .overLayedContent .BookingOverlay .buttonWrap button.nextButton {
  color: #fff;
  background: var(--color-accent);
  margin-left: 4px;
}
body main .overLayedContent .BookingOverlay .buttonWrap button.nextButton.disabled {
  opacity: 0.33;
  cursor: not-allowed;
}
body main .overLayedContent .overviewOverlay {
  color: var(--font-page-default);
  min-height: 100%;
  width: 100%;
  padding: 40px 15px;
  box-sizing: border-box;
}
body main .overLayedContent .overviewOverlay h4 {
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  font-weight: 900;
  padding-bottom: 20px;
  padding-top: 15px;
  font-family: "Lato", sans-serif;
}
body main .overLayedContent .overviewOverlay .description {
  line-height: 1.33em;
  padding: 0 18px;
}
body main .overLayedContent .overviewOverlay .terminWrap,
body main .overLayedContent .overviewOverlay .ContactWrap,
body main .overLayedContent .overviewOverlay .vehicleOverview,
body main .overLayedContent .overviewOverlay .serviceOverview {
  margin: 8px 0;
  background: var(--font-darkgray);
  padding: 32px 16px;
  border-radius: 8px;
  position: relative;
}
body main .overLayedContent .overviewOverlay .terminWrap h5,
body main .overLayedContent .overviewOverlay .ContactWrap h5,
body main .overLayedContent .overviewOverlay .vehicleOverview h5,
body main .overLayedContent .overviewOverlay .serviceOverview h5 {
  text-transform: uppercase;
  font-size: 21px;
  font-weight: 900;
  margin-bottom: 20px;
}
body main .overLayedContent .overviewOverlay .terminWrap .editRequestContactData,
body main .overLayedContent .overviewOverlay .terminWrap .editRequestServicesData,
body main .overLayedContent .overviewOverlay .ContactWrap .editRequestContactData,
body main .overLayedContent .overviewOverlay .ContactWrap .editRequestServicesData,
body main .overLayedContent .overviewOverlay .vehicleOverview .editRequestContactData,
body main .overLayedContent .overviewOverlay .vehicleOverview .editRequestServicesData,
body main .overLayedContent .overviewOverlay .serviceOverview .editRequestContactData,
body main .overLayedContent .overviewOverlay .serviceOverview .editRequestServicesData {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 4px;
  cursor: pointer;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/pen.svg) center no-repeat var(--color-page-background-dot5);
  background-size: 24px 24px;
}
body main .overLayedContent .overviewOverlay .terminWrap .terminDate,
body main .overLayedContent .overviewOverlay .terminWrap .terminTime,
body main .overLayedContent .overviewOverlay .ContactWrap .terminDate,
body main .overLayedContent .overviewOverlay .ContactWrap .terminTime,
body main .overLayedContent .overviewOverlay .vehicleOverview .terminDate,
body main .overLayedContent .overviewOverlay .vehicleOverview .terminTime,
body main .overLayedContent .overviewOverlay .serviceOverview .terminDate,
body main .overLayedContent .overviewOverlay .serviceOverview .terminTime {
  display: block;
  line-height: 25px;
}
body main .overLayedContent .overviewOverlay .terminWrap .filalInfo > *,
body main .overLayedContent .overviewOverlay .ContactWrap .filalInfo > *,
body main .overLayedContent .overviewOverlay .vehicleOverview .filalInfo > *,
body main .overLayedContent .overviewOverlay .serviceOverview .filalInfo > * {
  display: block;
  line-height: 25px;
}
body main .overLayedContent .overviewOverlay .terminWrap .filalInfo > *.filialeName,
body main .overLayedContent .overviewOverlay .ContactWrap .filalInfo > *.filialeName,
body main .overLayedContent .overviewOverlay .vehicleOverview .filalInfo > *.filialeName,
body main .overLayedContent .overviewOverlay .serviceOverview .filalInfo > *.filialeName {
  font-weight: bold;
  margin-top: 20px;
}
body main .overLayedContent .overviewOverlay .terminWrap .contactInnerContainer,
body main .overLayedContent .overviewOverlay .ContactWrap .contactInnerContainer,
body main .overLayedContent .overviewOverlay .vehicleOverview .contactInnerContainer,
body main .overLayedContent .overviewOverlay .serviceOverview .contactInnerContainer {
  line-height: 25px;
}
body main .overLayedContent .overviewOverlay .serviceOverview {
  width: 100%;
  box-sizing: border-box;
}
body main .overLayedContent .overviewOverlay .serviceOverview .leistungsItem, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
body main .overLayedContent .overviewOverlay .serviceOverview .leistungsItem .leistungsTitle, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsItem .leistungsSubItemTitle,
body main .overLayedContent .overviewOverlay .serviceOverview .leistungsItem .leistungsPrice, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsItem .leistungsSubItemPrice, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem .leistungsTitle, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem .leistungsSubItemTitle,
body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem .leistungsPrice, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem .leistungsSubItemPrice {
  font-size: 12px;
  line-height: 21px;
  box-sizing: border-box;
  display: inline-block;
  padding: 1px 0;
}
body main .overLayedContent .overviewOverlay .serviceOverview .leistungsItem .leistungsPrice, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsItem .leistungsSubItemPrice, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem .leistungsPrice, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem .leistungsSubItemPrice {
  text-align: right;
  display: block;
}
body main .overLayedContent .overviewOverlay .serviceOverview .leistungsItem .leistungsSubItemTitle, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem .leistungsSubItemTitle {
  padding-left: 12px;
}
body main .overLayedContent .overviewOverlay .serviceOverview .leistungsItem .leistungsPrice, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem .leistungsPrice {
  font-weight: bold;
}
body main .overLayedContent .overviewOverlay .serviceOverview .leistungsItem .leistungsSubItemPrice, body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem .leistungsSubItemPrice {
  padding-right: 12px;
}
body main .overLayedContent .overviewOverlay .serviceOverview .leistungsSubItem {
  font-style: italic;
}
body main .overLayedContent .overviewOverlay .serviceOverview .sumPriceWrap {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #666666;
  padding: 16px 0 6px;
  margin: 16px 0 0;
}
body main .overLayedContent .overviewOverlay .serviceOverview .sumPriceWrap .sumPriceTitle,
body main .overLayedContent .overviewOverlay .serviceOverview .sumPriceWrap .sumPriceValue {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  line-height: 28px;
}
body main .overLayedContent .overviewOverlay .serviceOverview .sumPriceWrap .sumPriceValue {
  text-align: right;
}
body main .overLayedContent .overviewOverlay .serviceOverview .sumPriceWrap .sumPriceValue .mwst {
  display: block;
  font-size: 12px;
  line-height: 16px;
  text-align: right;
}
body main .overLayedContent .overviewOverlay .legalAck {
  display: flex;
  font-weight: bold;
  background: var(--font-darkgray);
  padding: 32px 16px;
  border-radius: 8px;
  margin-bottom: 30px;
  line-height: 1.25em;
}
body main .overLayedContent .overviewOverlay .errorMessageNicetext {
  display: flex;
  flex-wrap: wrap;
  font-weight: 400;
  background: #fff;
  padding: 32px 16px;
  border-radius: 8px;
  margin-bottom: 30px;
  line-height: 1.25em;
  text-align: justify;
  color: #43454A;
  position: relative;
  border: 2px solid #FF3463;
}
body main .overLayedContent .overviewOverlay .errorMessageNicetext b {
  font-weight: bold;
  padding-bottom: 12px;
}
body main .overLayedContent .overviewOverlay .errorMessageNicetext:before {
  content: "FEHLER";
  display: inline-block;
  border-radius: 4px;
  color: #fff;
  padding: 4px 8px 4px 50px;
  font-size: 16px;
  font-weight: bold;
  background-size: 24px;
  position: absolute;
  left: 16px;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/warning_white.svg) 5px center no-repeat #FF3463;
  top: -14px;
  font-size: 14px;
}
body main .overLayedContent .overviewOverlay .buttonWrap .BookNowButton {
  display: block;
  width: 100%;
  background: #65D87F;
  color: #fff;
  font-size: 21px;
  font-weight: 900;
  border-radius: 8px;
  border: none;
  text-transform: uppercase;
  text-align: center;
  padding: 18px 16px 21px 16px;
  cursor: pointer;
  margin-bottom: 8px;
}
body main .overLayedContent .overviewOverlay .buttonWrap .BookNowButton.requestInProgress {
  cursor: progress;
  border: 2px solid;
  opacity: 0.6;
}
body main .overLayedContent .overviewOverlay .buttonWrap .backButton {
  display: block;
  width: 100%;
  background: #fff;
  color: #666666;
  font-size: 21px;
  font-weight: 900;
  border-radius: 8px;
  border: none;
  text-transform: uppercase;
  text-align: center;
  padding: 18px 16px 21px 16px;
  cursor: pointer;
  margin-bottom: 8px;
}
body main .overLayedContent .successOverlay {
  color: #fff;
  min-height: 88vh;
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
}
body main .overLayedContent .successOverlay h2 {
  color: #65D87F;
  font-size: 29px;
  text-transform: uppercase;
  font-weight: 900;
  padding: 32px 0;
}
body main .overLayedContent .successOverlay .successText {
  font-size: 21px;
  line-height: 28px;
  font-weight: 400;
}
body main .overLayedContent .successOverlay .buttonWrap {
  margin-top: 20vh;
}
body main .overLayedContent .successOverlay .buttonWrap .backButton {
  display: block;
  width: 100%;
  background: #fff;
  color: #666666;
  font-size: 21px;
  font-weight: 900;
  border-radius: 8px;
  border: none;
  text-transform: uppercase;
  text-align: center;
  padding: 18px 16px 21px 16px;
  cursor: pointer;
  margin-bottom: 8px;
}
body main .subOverlayInner .descriptionHeader,
body main .overlayFlexTermin .descriptionHeader {
  font-size: 21px;
  font-weight: 400;
  line-height: 28px;
  padding: 12px 0;
}
body main .subOverlayInner .descriptionText,
body main .overlayFlexTermin .descriptionText {
  font-size: 16px;
  line-height: 21px;
  padding: 10px 0;
}
body main .subOverlayInner ul.descriptionText,
body main .overlayFlexTermin ul.descriptionText {
  margin-top: 32px;
  padding: 0;
}
body main .subOverlayInner ul.descriptionText li,
body main .overlayFlexTermin ul.descriptionText li {
  padding: 10px 0;
}
body main .subOverlayInner ul.descriptionText li.greenChecked,
body main .overlayFlexTermin ul.descriptionText li.greenChecked {
  padding-left: 30px;
  position: relative;
  display: flex;
}
body main .subOverlayInner ul.descriptionText li.greenChecked .statusWrapIcon .burst-8,
body main .subOverlayInner ul.descriptionText li.greenChecked .statusWrapIcon .burst-8:before,
body main .overlayFlexTermin ul.descriptionText li.greenChecked .statusWrapIcon .burst-8,
body main .overlayFlexTermin ul.descriptionText li.greenChecked .statusWrapIcon .burst-8:before {
  background: #65D87F;
}
body main .subOverlayInner ul.descriptionText li.greenChecked .statusWrapIcon:before,
body main .overlayFlexTermin ul.descriptionText li.greenChecked .statusWrapIcon:before {
  border-bottom: 2px solid #43454A;
  border-left: 2px solid #43454A;
  border-radius: 2px;
  width: 9px;
  height: 4px;
  display: block;
  position: absolute;
  left: 5px;
  z-index: 2;
  content: "";
  transform: rotate(-45deg);
  top: 6px;
}
body main .subOverlayInner ul.descriptionText li .statusWrapIcon,
body main .overlayFlexTermin ul.descriptionText li .statusWrapIcon {
  position: absolute;
  left: 0;
}
body main .subOverlayInner ul.descriptionText li .statusWrapIcon .burst-8,
body main .overlayFlexTermin ul.descriptionText li .statusWrapIcon .burst-8 {
  width: 20px;
  height: 20px;
  position: relative;
  text-align: center;
  transform: rotate(20deg);
  display: block;
}
body main .subOverlayInner ul.descriptionText li .statusWrapIcon .burst-8:before,
body main .overlayFlexTermin ul.descriptionText li .statusWrapIcon .burst-8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  transform: rotate(135deg);
}
body main .subOverlayInner .descriptionContainer b,
body main .overlayFlexTermin .descriptionContainer b {
  font-weight: 600;
}
body main .overlayFlexTermin .descriptionContainer {
  background: #43454A;
  padding: 32px 16px;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 21px;
  border-radius: 1rem 1rem 0 0;
}
body main .overlayFlexTermin .buttonChooseContainer {
  margin-top: 0;
}
body main .overlayFlexTermin .buttonChooseContainer .getTermin {
  margin: 0 0 12px 0px;
  border-radius: 0 0 1rem 1rem;
}
body main .overlayFlexTermin .buttonChooseContainer .orDivider {
  display: block;
  width: 100%;
  text-align: center;
}
body main .overlayFlexTermin .buttonChooseContainer .getRegularTermin {
  margin: 12px 0;
}
body main .subOverlayGetTyreOffer .description {
  font-size: 17px;
}
body main .subOverlayGetTyreOffer .description b {
  font-weight: bold;
}
body main .hashRegistration {
  margin-top: 20px;
}
body main .hashRegistration h2 {
  margin: 22px 0 24px;
}
body main .hashRegistration input[type=text], body main .hashRegistration input[type=password] {
  margin: 8px 0 20px;
  display: block;
  width: 100%;
  border: none;
  box-sizing: border-box;
  font-size: 21px;
  border-radius: 8px;
  padding: 18px 16px 18px;
}
body main .hashRegistration .inputDescription {
  font-size: 16px;
  margin-bottom: 20px;
  display: block;
}
body main .hashRegistration .checkWrap {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}
body main .hashRegistration .checkWrap input[type=checkbox] {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  display: block;
  margin: 0 12px 0 0;
  flex: 0 0 24px;
}
body main .hashRegistration .checkWrap label {
  line-height: 1.2em;
  font-size: 16px;
}
body main .preDefinedTimeSlot {
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
body main .predefinedAppointment {
  background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.25) 3%, transparent 3%, transparent 6%, rgb(255, 255, 255) 6%);
}
body main .subOverlayTyreStatus .subOverlayInner > * {
  width: 100%;
}
body main .tyreSize {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
}
body main .tyreSize .tyreSizeWrap {
  display: flex;
  width: 100%;
  justify-content: space-between;
  flex-wrap: wrap;
}
body main .tyreSize .tyreSizeWrap label {
  font-size: 16px;
  line-height: 21px;
  padding: 8px 0;
  display: block;
  width: 100%;
}
body main .tyreSize .tyreSizeWrap select.tyreWidth,
body main .tyreSize .tyreSizeWrap select.tyreHeight,
body main .tyreSize .tyreSizeWrap select.tyreRadial {
  width: 32%;
}
body main .tyreSize .tyreSizeWrap .tyreAddionalDataInner {
  width: 49%;
}
body main .tyreSize .tyreSizeWrap select.prevValueNotAv {
  border: 2px solid red;
  color: red;
}
body main .tyreSize .tyreSizeWrap select.prevValueNotAv option {
  color: #000;
}
body main .tyreSize .tyreSizeWrap select.prevValueNotAv option.prevValueNotAv {
  color: red;
  cursor: not-allowed;
}
body main .tyreSize .TyreInformationWrap {
  margin-top: 20px;
}
body main .tyreSize .TyreInformationWrap label {
  display: flex;
  justify-content: center;
  align-items: center;
}
body main .tyreSize .TyreInformationWrap label input {
  width: 22px;
  height: 22px;
  box-sizing: border-box;
  accent-color: var(--color-accent);
}
body main .tyreSize .TyreInformationWrap label .textLabel {
  padding-left: 12px;
}
body main .tyreSize .chooseService {
  display: block;
  width: 100%;
}
body main .tyreSize .chooseService .buttonWrap {
  margin-top: 25px;
}
body main .SeasonSwitch {
  position: absolute;
  right: 0;
  font-size: 12px;
  display: flex;
  border-radius: 1rem;
  border: 1px solid;
  overflow: hidden;
}
body main .SeasonSwitch .seasonChange {
  font-size: 12px;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
body main .SeasonSwitch .seasonChange:first-child {
  border-right: 1px solid;
}
body main .SeasonSwitch .seasonChange.active {
  background: var(--color-accent);
}
body main .serviceWrap,
body main .tyreOption {
  background: var(--font-darkgray);
  padding: 32px 16px 16px 24px;
  display: block;
  border-radius: 8px;
  margin: 10px 0 10px 12px;
  position: relative;
  cursor: pointer;
  border-left: 8px solid #666666;
}
body main .serviceWrap .checkIndicator,
body main .tyreOption .checkIndicator {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 32px;
  left: -20px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #999999;
  box-sizing: border-box;
}
body main .serviceWrap.activeService, body main .serviceWrap.active,
body main .tyreOption.activeService,
body main .tyreOption.active {
  border-color: var(--color-accent);
}
body main .serviceWrap.activeService .checkIndicator, body main .serviceWrap.active .checkIndicator,
body main .tyreOption.activeService .checkIndicator,
body main .tyreOption.active .checkIndicator {
  border-color: var(--color-accent);
}
body main .serviceWrap.activeService .checkIndicator:before, body main .serviceWrap.active .checkIndicator:before,
body main .tyreOption.activeService .checkIndicator:before,
body main .tyreOption.active .checkIndicator:before {
  content: "";
  background: var(--color-accent);
  display: block;
  width: 16.5px;
  height: 16.5px;
  border-radius: 50%;
  box-sizing: border-box;
  top: 5.5px;
  position: absolute;
  left: 5.5px;
}
body main .serviceWrap.activeService .checkIndicator:after, body main .serviceWrap.active .checkIndicator:after,
body main .tyreOption.activeService .checkIndicator:after,
body main .tyreOption.active .checkIndicator:after {
  content: "";
  display: block;
  width: 8px;
  height: 3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: absolute;
  left: 8.5px;
  z-index: 1;
  top: 10.5px;
  transform: rotate(-45deg);
  border-radius: 2px;
}
body main .serviceWrap.activeService .price, body main .serviceWrap.active .price,
body main .tyreOption.activeService .price,
body main .tyreOption.active .price {
  color: var(--font-page-default);
}
body main .serviceWrap h5,
body main .tyreOption h5 {
  font-size: 16px;
  font-weight: 600;
  line-height: 18px;
  padding-bottom: 10px;
}
body main .serviceWrap .serviceTitle,
body main .serviceWrap .moreInfoText,
body main .tyreOption .serviceTitle,
body main .tyreOption .moreInfoText {
  font-size: 14px;
  line-height: 18px;
  color: inherit;
}
body main .serviceWrap .serviceTitle light,
body main .serviceWrap .moreInfoText light,
body main .tyreOption .serviceTitle light,
body main .tyreOption .moreInfoText light {
  font-weight: 400;
  display: block;
  line-height: 22px;
  font-size: 15px;
}
body main .serviceWrap .inclusive,
body main .tyreOption .inclusive {
  margin: 40px 0 20px 0;
  width: 100%;
}
body main .serviceWrap .inclusive .requiredService,
body main .tyreOption .inclusive .requiredService {
  padding: 5px 0;
}
body main .serviceWrap .price,
body main .tyreOption .price {
  background: var(--color-footerColor);
  padding: 6px 8px;
  border-radius: 4px;
  color: #666666;
  font-size: 15px;
  font-weight: 800;
  display: inline-block;
  margin-top: 15px;
}
body main .serviceWrap .price .priceText,
body main .tyreOption .price .priceText {
  color: inherit;
}
body main .serviceWrap .price .light,
body main .tyreOption .price .light {
  font-weight: 100;
  font-size: 12px;
  padding-left: 5px;
  color: var(--font-page-default);
}
body main .serviceWrap .priceAddition,
body main .tyreOption .priceAddition {
  font-size: 12px;
  color: var(--font-page-default);
  padding-left: 2px;
}
body main .serviceWrap .priceAddition .tireCount,
body main .tyreOption .priceAddition .tireCount {
  display: inline-block;
  width: 39px;
  font-size: inherit;
  margin: 0;
  background-size: 16px;
  text-align: left;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  padding: 4px 17px 5px 8px;
  line-height: 14px;
  font-weight: 700;
  background: none;
}
body main .serviceWrap .moreInfo,
body main .tyreOption .moreInfo {
  position: absolute;
  right: 8px;
  top: 8px;
  background: #27282B;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  cursor: pointer;
}
body main .serviceWrap .moreInfo:before,
body main .tyreOption .moreInfo:before {
  content: "i";
  display: flex;
  width: 20px;
  height: 20px;
  background: #fff;
  color: #27282B;
  border-radius: 50%;
  left: 6px;
  top: 6px;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  font-size: 13px;
}
body main .serviceWrap .moreInfoText,
body main .tyreOption .moreInfoText {
  display: none;
}
body main .chooseServicePrimary.hideButtons .buttonWrap {
  display: none;
}
body main .chooseServiceAdditional h3.overlayHeadline {
  margin-top: 24px;
  font-weight: bold;
}
body main .chooseServiceAdditional.MainServiceDetermined .overlayHeadline {
  margin-top: 20px;
  margin-bottom: 0;
  padding-bottom: 12px;
}
body main .chooseServiceAdditional.MainServiceDetermined .description {
  display: none;
}
body main .tyreOptionWrap .tyreOption {
  background: #FFFFFF;
  color: #43454A;
  border-color: #999999;
  padding: 32px 16px 16px 24px;
}
body main .tyreOptionWrap .tyreOption h3.tyreName {
  font-size: 21px;
  font-weight: 900;
  line-height: 21px;
  padding: 4px 0;
}
body main .tyreOptionWrap .tyreOption .tyreinnerInfoWrap {
  display: flex;
  width: 100%;
}
body main .tyreOptionWrap .tyreOption .tyreinnerInfoWrap .tyreInformation {
  width: 100%;
  flex: 1 2 100%;
}
body main .tyreOptionWrap .tyreOption .tyreinnerInfoWrap .tyreInformation p {
  margin: 8px 0;
}
body main .tyreOptionWrap .tyreOption .tyreinnerInfoWrap .tyreInformation .price {
  background: #CCCCCC;
  color: #999999;
  margin-top: 0;
  font-size: 12px;
  font-weight: 900;
}
body main .tyreOptionWrap .tyreOption .tyreinnerInfoWrap .tyreInformation .price .light {
  font-weight: 100;
  font-size: 10px;
  padding-left: 5px;
}
body main .tyreOptionWrap .tyreOption .tyreinnerInfoWrap .tyreImageWrap {
  flex: 2 0 80px;
  height: 80px;
  align-self: flex-end;
}
body main .tyreOptionWrap .tyreOption .tyreinnerInfoWrap .tyreImageWrap img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}
body main .tyreOptionWrap .tyreOption .tyreSpec {
  font-size: 12px;
  line-height: 17px;
  padding: 4px 0;
}
body main .tyreOptionWrap .tyreOption .priceAddition {
  font-size: 12px;
  color: #666666;
  padding-left: 2px;
}
body main .tyreOptionWrap .tyreOption .priceAddition .tireCount {
  display: inline-block;
  width: 39px;
  font-size: inherit;
  margin: 0;
  background-size: 16px;
  text-align: left;
  border: 1px solid #CCCCCC;
  border-radius: 4px;
  padding: 4px 17px 5px 8px;
  line-height: 14px;
  font-weight: 700;
}
body main .tyreOptionWrap .tyreOption .tyreLabelWrap {
  padding: 15px 0 5px 0;
  font-size: 12px;
  color: #999999;
  font-weight: bold;
  display: inline-block;
}
body main .tyreOptionWrap .tyreOption .tyreLabelWrap > span {
  padding: 0 5px 0 0;
}
body main .tyreOptionWrap .tyreOption .tyreLabelWrap .rollingResistance:before {
  content: "";
  display: inline-block;
  background: url("/typo3conf/ext/topmr6/Resources/Public/Icons/tyre-rollingResistance.svg") no-repeat;
  padding-right: 3px;
  width: 12px;
  height: 10px;
  background-size: contain;
}
body main .tyreOptionWrap .tyreOption .tyreLabelWrap .WetGrip:before {
  content: "";
  display: inline-block;
  background: url("/typo3conf/ext/topmr6/Resources/Public/Icons/tyre-wetGrip.svg") no-repeat;
  padding-right: 3px;
  width: 12px;
  height: 10px;
  background-size: contain;
}
body main .tyreOptionWrap .tyreOption .tyreLabelWrap .Noice:before {
  content: "";
  display: inline-block;
  background: url("/typo3conf/ext/topmr6/Resources/Public/Icons/tyre-noice.svg") no-repeat;
  padding-right: 3px;
  width: 12px;
  height: 10px;
  background-size: contain;
}
body main .tyreOptionWrap .tyreOption .tyreLabelWrap:hover .fullTyreLabel {
  display: block;
  position: absolute;
  z-index: 55;
  top: -50%;
  left: 16px;
}
body main .tyreOptionWrap .tyreOption.active {
  border-color: var(--color-accent);
}
body main .tyreOptionWrap .tyreOption.active .tyreinnerInfoWrap .tyreInformation .price {
  color: #43454A;
}
body main .absoluteSubOverlay {
  left: 0;
  width: 100%;
  bottom: 60px;
  background: #27282B;
  position: fixed;
  z-index: 55;
  display: flex;
  justify-content: space-between;
  padding: 16px;
  box-sizing: border-box;
}
body main .absoluteSubOverlay .priceContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-items: flex-end;
}
body main .absoluteSubOverlay .priceContainer .completePrice {
  font-size: 21px;
  line-height: 28px;
  font-weight: 900;
}
body main .absoluteSubOverlay .priceContainer .light {
  font-size: 12px;
  font-weight: 400;
  line-height: 21px;
  padding-left: 6px;
}
body main .absoluteSubOverlay .priceContainer .priceAddition {
  display: block;
  font-size: 16px;
  font-weight: 400;
  width: 100%;
}
body main .absoluteSubOverlay .buttonStyle {
  max-width: 45%;
  margin: 0;
}
body main .overLayedContent .subOverlay.tyreSubOverlay .overlayContent {
  padding: 20px 16px 16px;
  background: #27282B;
  border-radius: 16px 16px 0 0;
  height: calc(100vh - 120px) !important;
  overflow: hidden;
  min-height: auto;
  align-self: flex-end;
  margin-bottom: 80px;
}
body main .overLayedContent .subOverlay.tyreSubOverlay .overlayContent h1 {
  text-align: center;
  font-size: 21px;
  display: block;
  width: 100%;
  padding-bottom: 5px;
}
body main .overLayedContent .subOverlay.tyreSubOverlay .overlayContent .tyreSortingWrap {
  display: block;
  width: 100%;
  padding-bottom: 16px;
}
body main .overLayedContent .subOverlay.tyreSubOverlay .overlayContent .tyreSortingWrap label {
  font-size: 12px;
  color: #FFFFFF;
  line-height: 16px;
}
body main .overLayedContent .subOverlay.tyreSubOverlay .overlayContent .tyreSortingWrap select {
  width: 100%;
}
body main .overLayedContent .subOverlay.tyreSubOverlay .overlayContent .tyreOptionWrap {
  position: relative;
  height: 100%;
  overflow: scroll;
  height: calc(100% - 140px);
  overflow: scroll;
  max-height: calc(100vh - 350px);
}
body main .overLayedContent .subOverlay.tyreSubOverlay .buttonWrap {
  margin-top: 0;
}
body .LeasingWrapper {
  position: relative;
  min-height: calc(100vh - 100px);
}
body .LeasingWrapper .buttonWrap {
  display: flex;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 30px;
}
body .openAppointmentWrap {
  line-height: 28px;
}
body .openAppointmentWrap b {
  font-weight: bold;
}
body .openAppointmentWrap .buttonWrap {
  display: flex;
  width: 100%;
  margin-top: 40px;
  margin-bottom: 30px;
}
body .buttonStyle {
  background: var(--color-accent);
  border: none;
  border-radius: 8px;
  width: 100%;
  padding: 18px 16px;
  box-sizing: border-box;
  text-align: center;
  text-transform: uppercase;
  font-size: 21px;
  font-weight: 900;
  color: #fff;
  cursor: pointer;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  height: auto;
  flex: 1 1 49%;
  line-height: 25px;
  box-sizing: border-box;
  margin: 0.5%;
  min-width: 300px;
}
body .buttonStyle.buttonStyleMagenta {
  background: #FF3463;
  color: #fff;
}
body .buttonStyle.phoneLink {
  display: flex;
  justify-content: center;
  margin-top: 25px;
}
body .buttonStyle.phoneLink:before {
  content: "";
  display: block;
  width: 22px;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/phone.svg) no-repeat center center;
  background-size: contain;
  padding-right: 15px;
}
body .buttonStyle b {
  font-weight: 900;
  display: block;
  text-align: center;
  text-transform: uppercase;
  font-size: 21px;
  line-height: 28px;
}
body .buttonStyle light {
  font-size: 16px;
  text-transform: none;
  font-weight: 400;
  line-height: 28px;
  display: block;
  text-align: center;
}
body a.buttonStyle.async {
  text-decoration: none;
  display: block;
  font-size: 20px;
  padding: 18px 16px 21px;
}
body .chooseFzg .errorOverlay {
  padding: 18px 16px;
  border: 4px solid var(--color-accent);
  border-radius: 8px;
  line-height: 28px;
  font-weight: bold;
  box-sizing: border-box;
  margin-top: 8px;
}
body .chooseTerminType .terminTypeWrap {
  flex-wrap: wrap;
  display: flex;
  gap: 25px;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem {
  border-left: 8px solid #666666;
  flex: 1 1 calc(50% - 13px);
  border-radius: 8px;
  background: var(--font-darkgray);
  padding: 32px 16px 16px 24px;
  cursor: pointer;
  position: relative;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem .checkIndicator {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  position: absolute;
  top: 32px;
  left: -20px;
  background: #fff;
  border-radius: 50%;
  border: 2px solid #999999;
  box-sizing: border-box;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem .checkIndicator:before {
  display: none;
  content: "";
  background: var(--color-accent);
  width: 16.5px;
  height: 16.5px;
  border-radius: 50%;
  box-sizing: border-box;
  top: 5.5px;
  position: absolute;
  left: 5.5px;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem .checkIndicator:after {
  content: "";
  display: none;
  width: 8px;
  height: 3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  position: absolute;
  left: 8.5px;
  z-index: 1;
  top: 10.5px;
  transform: rotate(-45deg);
  border-radius: 2px;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem .terminHeadline {
  text-align: left;
  margin-top: 0;
  padding-top: 0;
  font-size: 22px;
  padding-bottom: 24px;
  display: block;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem ul.descriptionText {
  margin-top: 32px;
  padding: 0;
  line-height: 1.4em;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem ul.descriptionText li {
  padding: 12px 0;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem ul.descriptionText li.greenChecked {
  padding-left: 30px;
  position: relative;
  display: flex;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem ul.descriptionText li.greenChecked .statusWrapIcon .burst-8,
body .chooseTerminType .terminTypeWrap .terminTypeItem ul.descriptionText li.greenChecked .statusWrapIcon .burst-8:before {
  background: #65D87F;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem ul.descriptionText li.greenChecked .statusWrapIcon:before {
  border-bottom: 2px solid #43454A;
  border-left: 2px solid #43454A;
  border-radius: 2px;
  width: 9px;
  height: 4px;
  display: block;
  position: absolute;
  left: 5px;
  z-index: 2;
  content: "";
  transform: rotate(-45deg);
  top: 6px;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem ul.descriptionText li .statusWrapIcon {
  position: absolute;
  left: 0;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem ul.descriptionText li .statusWrapIcon .burst-8 {
  width: 20px;
  height: 20px;
  position: relative;
  text-align: center;
  transform: rotate(20deg);
  display: block;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem ul.descriptionText li .statusWrapIcon .burst-8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  transform: rotate(135deg);
}
body .chooseTerminType .terminTypeWrap .terminTypeItem .price {
  background: var(--color-footerColor);
  padding: 6px 8px;
  border-radius: 4px;
  color: #666666;
  font-size: 15px;
  font-weight: 800;
  display: inline-block;
  margin-top: 15px;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem .price .priceText {
  color: inherit;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem .price .light {
  font-weight: 100;
  font-size: 12px;
  padding-left: 5px;
  color: var(--font-page-default);
}
body .chooseTerminType .terminTypeWrap .terminTypeItem.active {
  border-color: var(--color-accent);
}
body .chooseTerminType .terminTypeWrap .terminTypeItem.active .checkIndicator {
  border-color: var(--color-accent);
}
body .chooseTerminType .terminTypeWrap .terminTypeItem.active .checkIndicator:before, body .chooseTerminType .terminTypeWrap .terminTypeItem.active .checkIndicator:after {
  display: block;
}
body .chooseTerminType .terminTypeWrap .terminTypeItem.active .price .priceText {
  color: #fff;
}
body .chooseTerminType_option2 .chooseTerminOption {
  width: 100%;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  width: 100%;
  padding: 12px 0;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .terminOptionHeader {
  flex: 0 0 33%;
  position: relative;
  display: flex;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .terminOptionHeader b {
  line-height: 1.3em;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .terminOptionHeader .moreInfo {
  position: absolute;
  top: -8px;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  cursor: pointer;
  margin-left: 6px;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .terminOptionHeader .moreInfo:before {
  content: "i";
  display: flex;
  width: 25px;
  height: 25px;
  background: #fff;
  color: #27282B;
  border-radius: 50%;
  left: 6px;
  top: 2px;
  position: absolute;
  text-align: center;
  vertical-align: middle;
  justify-content: center;
  align-items: center;
  text-transform: none;
  font-size: 14px;
  font-weight: 900;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption span.firstAvTerminOpiton {
  flex: 0 0 33%;
  display: flex;
  align-items: center;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption span.firstAvTerminOpiton .editTerminOption {
  width: 32px;
  height: 32px;
  display: block;
  border-radius: 4px;
  cursor: pointer;
  background: url(/typo3conf/ext/topmr6/Resources/Public/Icons/pen.svg) center no-repeat var(--color-page-background-dot5);
  background-size: 24px 24px;
  border: 2px solid var(--color-accent);
  margin-right: 10px;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .priceWrap {
  padding: 2.5px 0;
  margin: 0;
  font-size: inherit;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .priceWrap .price {
  font-weight: 900;
  font-size: 1.1em;
  line-height: 1em;
  padding-left: 4px;
  color: var(--color-accent);
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .buttonWrap {
  margin: 0;
  align-items: stretch;
  flex: 0 0 20%;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .buttonWrap .nextButton {
  font-size: 16px;
  padding: 12px;
  line-height: 1.25em;
  flex: 0 0 100%;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .moreInfoContainer {
  padding: 25px;
  border: 2px solid var(--color-accent);
  border-radius: 8px;
  width: 86%;
  margin-top: 10px;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .moreInfoContainer ul.descriptionText {
  margin-top: 32px;
  padding: 0;
  line-height: 1.4em;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .moreInfoContainer ul.descriptionText li {
  padding: 12px 0;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .moreInfoContainer ul.descriptionText li.greenChecked {
  padding-left: 30px;
  position: relative;
  display: flex;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .moreInfoContainer ul.descriptionText li.greenChecked .statusWrapIcon .burst-8,
body .chooseTerminType_option2 .chooseTerminOption .terminOption .moreInfoContainer ul.descriptionText li.greenChecked .statusWrapIcon .burst-8:before {
  background: #65D87F;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .moreInfoContainer ul.descriptionText li.greenChecked .statusWrapIcon:before {
  border-bottom: 2px solid #43454A;
  border-left: 2px solid #43454A;
  border-radius: 2px;
  width: 9px;
  height: 4px;
  display: block;
  position: absolute;
  left: 5px;
  z-index: 2;
  content: "";
  transform: rotate(-45deg);
  top: 6px;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .moreInfoContainer ul.descriptionText li .statusWrapIcon {
  position: absolute;
  left: 0;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .moreInfoContainer ul.descriptionText li .statusWrapIcon .burst-8 {
  width: 20px;
  height: 20px;
  position: relative;
  text-align: center;
  transform: rotate(20deg);
  display: block;
}
body .chooseTerminType_option2 .chooseTerminOption .terminOption .moreInfoContainer ul.descriptionText li .statusWrapIcon .burst-8:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  transform: rotate(135deg);
}

@media only screen and (max-width: 350px) {
  body .StoredTyreInfo .Visual .vehicleRepresentation {
    width: 240px;
  }

  body .StoredTyreInfo .Visual .tireObject .tireInfoIcon {
    display: none;
  }
}
@media only screen and (max-width: 520px) {
  body #progressbar {
    top: 5px;
  }
  body .leftRear .tyreInfoWrap,
body .rightRear .tyreInfoWrap {
    left: 0 !important;
    right: auto !important;
    bottom: 40px !important;
  }
  body .tyreSize .moreInfo {
    top: -70px;
  }
  body .tyreSize .moreInfoText {
    top: -20px;
  }
  body .buttonStyle .moreInfoText,
body .tyreSize .moreInfoText {
    width: 100%;
  }
  body main {
    position: relative;
  }
  body main > * {
    position: relative;
  }
  body main:before {
    bottom: 0;
    top: 0;
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
  }
  body main .chooseService .chooseServiceAdditional .absoluteSubOverlay {
    position: fixed;
    bottom: 60px;
    background: #27282B;
    width: 100%;
    left: 0;
    padding: 16px;
    border-top: 1px solid #000000;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    align-content: stretch;
  }
  body main .chooseService .chooseServiceAdditional .absoluteSubOverlay .priceContainer .completePrice {
    font-size: 21px;
    font-weight: 900;
    line-height: 28px;
  }
  body main .chooseService .chooseServiceAdditional .absoluteSubOverlay .priceContainer .light {
    font-size: 12px;
    font-weight: 200;
    padding-left: 3px;
  }
  body main .chooseService .chooseServiceAdditional .absoluteSubOverlay .priceContainer .description {
    font-size: 16px;
    line-height: 28px;
    margin: 0;
  }
  body main .chooseService .chooseServiceAdditional .absoluteSubOverlay .buttonStyle {
    margin: 0;
    width: 50%;
  }
  body main .chooseService .buttonWrap {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column-reverse;
  }
}
@media only screen and (min-width: 425px) {
  body .StoredTyreInfo,
body .storedIssue .StoredTyreInfo {
    min-width: 350px;
  }
  body .Visual .vehicleRepresentation {
    width: 350px;
  }
}
@media only screen and (max-width: 767px) {
  main .overLayedContent .overlayContent {
    position: relative;
    min-height: calc(100vh - 80px);
  }
  main .overLayedContent .overlayContent.tyreStatus .buttonWrap {
    flex-wrap: wrap;
  }
  main .overLayedContent .overlayContent.tyreStatus .buttonWrap .getTermin, main .overLayedContent .overlayContent.tyreStatus .buttonWrap .getTyreOffer {
    margin: 12px 0;
  }
  main .overLayedContent .overlayContent .mainButtonWrap .backButton, main .overLayedContent .overlayContent .mainButtonWrap .next {
    width: 100%;
    flex: 0 0 100%;
  }

  body main .chooseTerminType_option2 .chooseTerminOption .terminOption {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 12px 12px;
    border-radius: 8px;
    background: var(--color-page-background-dot5);
    margin: 10px 0;
  }
  body main .chooseTerminType_option2 .chooseTerminOption .terminOption .terminOptionHeader {
    flex: 0 0 100%;
    padding-bottom: 10px;
  }
  body main .chooseTerminType_option2 .chooseTerminOption .terminOption .terminOptionHeader b {
    font-size: 1.2em;
  }
  body main .chooseTerminType_option2 .chooseTerminOption .terminOption .firstAvTerminOpiton {
    flex: 0 0 50%;
    line-height: 1.25em;
    display: flex;
    justify-content: flex-start;
  }
  body main .chooseTerminType_option2 .chooseTerminOption .terminOption .firstAvTerminOpiton span.dateAndTime {
    display: flex;
    flex-direction: column;
    width: 50%;
    min-width: 80px;
  }
  body main .chooseTerminType_option2 .chooseTerminOption .terminOption .firstAvTerminOpiton span.dateAndTime .dateTimeSpacer {
    display: none;
  }
  body main .chooseTerminType_option2 .chooseTerminOption .terminOption .firstAvTerminOpiton .editTerminOption {
    position: relative;
    right: auto;
    top: auto;
    display: inline-block;
    align-self: center;
    justify-self: flex-end;
    margin-left: 15px;
  }
  body main .chooseTerminType_option2 .chooseTerminOption .terminOption .buttonWrap {
    flex: 0 0 50%;
  }

  body main .chooseTerminType_option2 .backButton {
    flex: 0 0 100% !important;
  }
}
@media only screen and (max-width: 1200px) {
  body main .chooseTerminType_option2 .moreInfoContainer {
    width: 100% !important;
  }
}
@media only screen and (min-width: 768px) {
  body .EmailMessage {
    position: fixed;
    right: 20px;
    left: auto;
    top: 90px;
  }
  body .storedIssue .StoredTyreInfo {
    width: 500px;
  }
  body .detailedAppointment {
    display: none;
    line-height: 1.25em;
  }
  body .detailedAppointment .containerWrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  body .detailedAppointment .containerWrap > div.ContactWrap {
    flex: 1 1 calc(50% - 8px);
  }
  body .detailedAppointment .containerWrap > div.terminData {
    flex: 1 1 calc(50% - 8px);
    margin-right: 16px;
  }
  body main .r6ShopEmbed {
    margin-top: 4rem;
  }
  body main .r6ShopEmbed > .frame {
    background: var(--color-page-background);
    border-radius: 32px;
    padding: 85px 35px;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0px 50px 99px rgba(0, 0, 0, 0.4);
    box-sizing: border-box;
    color: var(--font-page-default);
  }
  body main .frame-type-list .topmr6_reilo_entry {
    padding: 0;
  }
  body main .frame-type-list .topmr6_reilo_entry h1 {
    text-align: center;
  }
  body main .frame-type-list .topmr6_reilo_entry .simpleStepWrap {
    justify-content: center;
  }
  body main .topmr6_reilo_entry .selectedPoS {
    text-align: center;
  }
  body main .overLayedContent:before {
    display: none;
  }
  body main .overLayedContent .overlayHeadline {
    text-align: center;
  }
  body main .overLayedContent .monthSelector {
    justify-content: center;
  }
  body main .overLayedContent .overlayContent .calendarContainer .currentMonthSelector table tr td {
    padding: 12px 0;
  }
  body main .overLayedContent .overlayContent .calendarContainer .currentMonthSelector table tr td .day-number {
    padding: 10px;
  }
  body main .overLayedContent .subOverlay .subOverlayInner {
    padding: 64px 32px;
    max-width: 750px;
    min-width: 500px;
  }
  body main .overLayedContent .BookingOverlay:before {
    display: none;
  }
  body main .overLayedContent .BookingOverlay h4 {
    text-align: center;
  }
  body main .overLayedContent .overviewOverlay .overviewInner h4 {
    text-align: center;
  }
  body main .overLayedContent .overviewOverlay .overviewInner .legalAck {
    font-size: 16px;
  }
  body main .overLayedContent .overviewOverlay .overviewInner .boxWrap {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 30px;
  }
  body main .overLayedContent .overviewOverlay .overviewInner .boxWrap .terminWrap,
body main .overLayedContent .overviewOverlay .overviewInner .boxWrap .ContactWrap {
    width: 48%;
    box-sizing: border-box;
  }
  body main .chooseService .serviceTitle {
    padding-right: 20px;
  }
  body main .chooseService .chooseServicePrimary,
body main .chooseService .chooseServiceAdditional {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }
  body main .chooseService .chooseServicePrimary.hidden,
body main .chooseService .chooseServiceAdditional.hidden {
    display: none;
  }
  body main .chooseService .chooseServicePrimary .overlayHeadline,
body main .chooseService .chooseServicePrimary .description,
body main .chooseService .chooseServiceAdditional .overlayHeadline,
body main .chooseService .chooseServiceAdditional .description {
    display: block;
    width: 100%;
  }
  body main .chooseService .chooseServicePrimary {
    gap: 25px;
  }
  body main .chooseService .chooseServicePrimary .mainServiceWrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    gap: 25px;
  }
  body main .chooseService .chooseServicePrimary .mainServiceWrap .serviceWrap:first-child:nth-last-child(4),
body main .chooseService .chooseServicePrimary .mainServiceWrap .serviceWrap:first-child:nth-last-child(4) ~ .serviceWrap {
    flex: 1 1 45%;
  }
  body main .chooseService .chooseServicePrimary .serviceWrap {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    flex: 1 1 31%;
    max-width: 412px;
    padding: 32px 25px;
  }
  body main .chooseService .chooseServicePrimary .serviceWrap .priceWrap {
    align-self: flex-end;
    display: flex;
    width: 100%;
    align-content: flex-end;
    align-items: center;
    justify-content: flex-start;
    min-height: 50px;
  }
  body main .chooseService .chooseServicePrimary .serviceWrap .priceWrap .price {
    margin-top: 0;
    margin-right: 10px;
  }
  body main .chooseService .chooseServicePrimary .serviceWrap .priceWrap .priceText {
    padding-right: 8px;
    white-space: nowrap;
  }
  body main .chooseService .chooseServicePrimary .serviceWrap .priceWrap .light {
    padding-left: 0;
    line-height: 22px;
    white-space: nowrap;
  }
  body main .chooseService .chooseServicePrimary .serviceWrap .priceWrap .priceAddition {
    padding-left: 0;
    display: block;
    white-space: nowrap;
  }
  body main .chooseService .chooseServicePrimary .serviceWrap .serviceTitle {
    min-height: 80px;
  }
  body main .chooseService .chooseServiceAdditional .serviceWrap {
    width: 48%;
    box-sizing: border-box;
  }
  body main .chooseService .buttonWrap {
    display: flex;
    width: 100%;
    justify-content: space-between;
  }
  body main .chooseService .buttonWrap .buttonStartNew,
body main .chooseService .buttonWrap .backButton {
    margin-right: 12px;
  }
  body main .main .absoluteSubOverlay {
    display: none;
  }
  body main .absoluteSubOverlay {
    display: none !important;
  }
  body.noScroll main .overlayContent .absoluteSubOverlay {
    display: flex;
    bottom: 85px;
    width: 650px;
    left: 50%;
    margin-left: -325px;
  }
  body main .overLayedContent .subOverlay.tyreSubOverlay .overlayContent {
    height: calc(100vh - 200px) !important;
    width: 80vw;
    padding-bottom: 100px;
    max-width: 1200px;
    box-sizing: border-box;
    position: relative;
  }
  body main .overLayedContent .subOverlay.tyreSubOverlay .overlayContent .tyreOptionWrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  body main .overLayedContent .subOverlay.tyreSubOverlay .overlayContent .tyreOptionWrap .tyreOption {
    flex: 0 0 48%;
    box-sizing: border-box;
  }
  body main .chooseTerminType_option2 .chooseTerminOption .terminOption .firstAvTerminOpiton {
    flex-direction: row-reverse;
    justify-content: left;
  }
}
@media only screen and (min-width: 768px) and (max-width: 1200px) {
  body main .r6ShopEmbed > .frame {
    padding: 85px 35px;
  }

  body .chooseTerminType_option2 .chooseTerminOption .terminOption span.firstAvTerminOpiton {
    flex: 0 0 45%;
  }
}
@media only screen and (min-width: 1550px) {
  body #progressbar {
    top: 88px;
  }
}
.registrationByHash {
  margin-top: 22px;
}
.registrationByHash .password {
  margin-bottom: 5px !important;
}
.registrationByHash .passHinweiss {
  display: block;
  font-size: 12px;
  margin-bottom: 20px;
}

.grayBoxWrap {
  margin: 8px 0;
  background: var(--font-darkgray);
  color: var(--color-darkGray);
  padding: 32px 16px;
  border-radius: 8px;
  position: relative;
}

/* errir Overlay*/
.errorOverlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: center;
  align-items: center;
}
.errorOverlay .overlayInner {
  display: inline-block;
  border-radius: 32px;
  background: #27282B;
  padding: 50px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 100%;
  max-width: 50vw;
  line-height: 1.3em;
}

/* Do not ask Questions... !*/
body.page-id-138 {
  width: 100%;
}
body.page-id-138 .topmr6_reilo_entry {
  padding: 0;
}

.PreLandingWrapper h1 {
  color: #fff;
}
.PreLandingWrapper .preLandingWrapOptions {
  border-radius: 1rem;
  overflow: hidden;
}
.PreLandingWrapper .preLandingWrapOptions .preLandingOption {
  background: var(--font-defaultGray);
  padding: 2rem;
  display: flex;
  cursor: pointer;
}
.PreLandingWrapper .preLandingWrapOptions .preLandingOption .description {
  display: flex;
  font-size: 1rem;
  line-height: 1.35rem;
  flex: 1 1 100%;
}
.PreLandingWrapper .preLandingWrapOptions .preLandingOption .description .iconWrap {
  flex: 0 0 30px;
}
.PreLandingWrapper .preLandingWrapOptions .preLandingOption .description .iconWrap path {
  fill: var(--color-accent);
}
.PreLandingWrapper .preLandingWrapOptions .preLandingOption .description .recommendation {
  display: inline-block;
  padding: 0.25rem 0.5rem;
  background: var(--color-page-background);
  border-radius: 0.25rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.PreLandingWrapper .preLandingWrapOptions .preLandingOption .button {
  flex: 0 0 40px;
  background: var(--color-accent);
  border-radius: 0.25rem;
  margin-left: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.PreLandingWrapper .preLandingWrapOptions .preLandingOption .button:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
  margin-left: -6px;
}
.PreLandingWrapper .preLandingWrapOptions .preLandingOptionSpacer {
  background: var(--font-defaultGray);
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 0.75rem;
  position: relative;
  color: var(--color-gray);
  height: 20px;
  flex-wrap: wrap;
  align-content: center;
}
.PreLandingWrapper .preLandingWrapOptions .preLandingOptionSpacer:before {
  content: "";
  border-bottom: 1px solid var(--font-darkgray);
  width: 80%;
  height: 1px;
  display: block;
}
.PreLandingWrapper .preLandingWrapOptions .preLandingOptionSpacer .spacerText {
  background: var(--font-defaultGray);
  padding: 5px 10px;
  position: absolute;
}
.PreLandingWrapper .loginButton {
  font-size: 0.85rem;
  padding-top: 2rem;
  display: block;
}
.PreLandingWrapper .loginButton .colored {
  color: var(--color-accent);
  padding-left: 0.25rem;
}

@media only screen and (min-width: 1200px) {
  .PreLandingWrapper .preLandingWrapOptions .preLandingOption .description .recommendation {
    display: block;
  }
}
/* Feedback Form */
.star-rating {
  display: flex;
  justify-self: flex-start;
  padding: 10px 0;
  direction: rtl;
  /* Trick, um Sterne von rechts nach links anzuordnen */
  font-size: 2rem;
  unicode-bidi: bidi-override;
}

.star-rating input {
  display: none;
}

.star-rating label {
  color: #ccc;
  cursor: pointer;
  transition: color 0.2s;
  font-size: 2.5rem;
}

.star-rating input:checked ~ label {
  color: var(--color-accent);
}

.star-rating label:hover,
.star-rating label:hover ~ label {
  color: var(--color-accent);
}

/* new Appointment termin Selection */
.CalenderNavigation {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}
.CalenderNavigation a.changeTimeFrameLink {
  padding: 10px 20px;
  font-weight: bold;
  color: #fff;
  background: var(--color-accent);
  text-transform: uppercase;
  border-radius: 8px;
  margin: 0 10px;
}

.appointment-grid-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.appointment-grid {
  border-collapse: separate;
  border-spacing: 0;
  min-width: max(875px, 100%);
  width: max-content;
  table-layout: fixed;
  background: #efefef;
}

.appointment-grid th,
.appointment-grid td {
  border: 2px solid var(--color-page-background);
  padding: 0;
  vertical-align: top;
}

.appointment-grid thead th {
  background: var(--color-accent);
  color: #fff;
  text-align: center;
  padding: 8px 6px;
  font-weight: 400;
}

.appointment-grid .day-head.is-today {
  background: #2f477f;
}

.appointment-grid .day-head.is-predefined {
  box-shadow: inset 0 0 0 2px #ffb36b;
}

.appointment-grid .day-name {
  font-size: 16px;
  line-height: 1.2;
}

.appointment-grid .day-date {
  font-size: 14px;
  line-height: 1.2;
  margin-top: 2px;
}

.appointment-grid .day-meta {
  font-size: 13px;
  line-height: 1.2;
  margin-top: 4px;
  opacity: 0.95;
}

.appointment-grid .time-col {
  width: 78px;
  min-width: 78px;
  background: var(--font-darkgray);
  color: #000;
  padding: 4px 6px;
  font-size: 16px;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
  text-align: center;
  vertical-align: middle;
}

.appointment-grid .slot-cell {
  min-width: 100px;
  height: 34px;
  background: #dcdcdc;
  text-align: center;
}

.appointment-grid .slot-cell.is-empty {
  background: #dcdcdc;
}

.appointment-grid .slot-cell.is-available {
  background: #bfe3a4;
}

.appointment-grid .slot-btn {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  color: var(--color-accent);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  text-align: center;
  font-weight: bold;
}

.appointment-grid .slot-cell.is-preselected .slot-btn {
  font-weight: 700;
  color: #264b96;
  background: rgba(255, 255, 255, 0.35);
}

@media (max-width: 900px) {
  .appointment-grid {
    min-width: 860px;
  }

  .appointment-grid .day-name {
    font-size: 14px;
  }

  .appointment-grid .day-date,
.appointment-grid .day-meta,
.appointment-grid .slot-btn,
.appointment-grid .time-col {
    font-size: 14px;
  }
}
.priceWrap, .leistungsPrice, .sumPriceWrap {
  display: none !important;
}

.site-footer {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding: 5rem 1rem 1rem 0;
  margin-top: auto;
}

.footer-legal-nav {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}
.footer-legal-nav ul {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-legal-nav__link {
  color: #1f1f1f;
  text-decoration: none;
  font-size: 1rem;
  line-height: 1.4;
}
.footer-legal-nav__link:hover, .footer-legal-nav__link:focus, .footer-legal-nav__link.is-active {
  text-decoration: underline;
}

/*# sourceMappingURL=styles.css.map */