@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  /*font-family: "SF Pro Text","Myriad Set Pro","SF Pro Icons","Apple Legacy Chevron","Helvetica Neue","Helvetica","Arial",sans-serif;*/
  font-family: "Roboto", sans-serif;
  scroll-behavior: smooth;
}

a{
  text-decoration: none;
}

body{
  background: #fff;
}

header{
  width: 100%;
  height: auto;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5);
  border-bottom: 1.5px solid #151515;
  z-index: 2000;
  position: fixed;
}

header nav{
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 2000;
  position: relative;
}

header .container{
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

header nav .container .logo{
  width: auto;
  max-width: 150px;
  max-height: 30px;
  margin-top: 10px;
}

header .navbar{
  width: 100%;
  height: 50px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 6000;
  position: relative;
}

header .eventmasterXIcon img{
  width: 30px;
}

header .navbar .navbarImg{
  display: none;
}

header .navbar .container .toggleFloatLeft{
  display: none;
}

header .navbar ul.navList{
  list-style: none;
}

header .navbar ul.navList li:nth-child(1){
  margin-left: 0;
}

header .navbar ul.navList li{
  list-style: none;
  display: inline-block;
  margin: 0 15px;
}

header .navbar ul.navList li a{
  color: #151515;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-size: 11px;
  text-transform: uppercase;
  transition: 0.3s;
  position: relative;
  letter-spacing: 1px;
}

header .navbar ul.navList li a span{
  width: 100%;
  height: 2px;
  background: #d4af7a;
  position: absolute;
  bottom: -17px;
  left: 0;
}

header .navbar ul.navList li a:hover{
  color: #d4af7a;
}

header .navbar ul.navList .searchBox{
  transition: 0.2s;
  width: 30px;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

header .navbar ul.navList .searchBox form{
  width: 100%;
  height: 30px;
}

header nav .container a{
  color: #fff;
  font-size: 20px;
}

header .float-right{
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 100%;
}

header .bagIcon{
  position: relative;
  top: 5px;
  color: #151515;
  text-decoration: none;
  font-size: 18px;
  transition: 0.2s;
}

header .bagIcon.bump{
  animation: ticketBump 0.45s ease;
}

header .bagIcon g{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #fff;
  font-weight: 600;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  transition: 0.2s;
}

header .bagIcon:hover{
  color: #d4af7a;
}

header .bagIcon:hover g{
  color: #151515;
}

@keyframes ticketBump {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.25) rotate(-6deg); }
  50%  { transform: scale(0.95) rotate(6deg); }
  75%  { transform: scale(1.15) rotate(-3deg); }
  100% { transform: scale(1); }
}

.pc-none{
  display: none;
  visibility: hidden;
  opacity: 0;
}

.heading{
  color: #fff;
  font-size: 33px;
  letter-spacing: 3px;
  text-transform: uppercase;
  text-align: center;
  font-family: "Archivo Black", "Roboto", sans-serif;
  padding-top: 60px;
}

.hinweis{
  color: #FF0000;
  margin-top: 20px;
  font-size: 13.5px;
}

.container{
  width: 60%;
  padding: 0;
}

.container img{
  width: 450px;
}

.middle{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.headline{
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-size: 30px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 2px;
}

section#start{
  width: 100%;
  height: auto;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #151515;
}

section#start .icons{
  width: 100%;
  height: 190px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

section#start .icons .icon{
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
}

section#start .icons .icon .iconBox{
  width: 100%;
  height: 70px;
  position: relative;
  transition: 0.3s;
}

section#start .icons .icon:hover .iconBox{
  opacity: 0;
}

section#start .icons .icon .textBox{
  width: 100%;
  height: 70px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  margin-top: 5px;
}

section#start .icons .icon .iconBox i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 50px;
  color: #fff;
  position: relative;
  top: 60px;
}

section#start .icons .icon .textBox .titel{
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #fff;
  position: relative;
  top: 20px;
  transition: 0.3s;
}

section#start .icons .icon:hover .textBox .titel{
  position: relative;
  top: -50px;
}

section#start .icons .icon .textBox .text{
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  width: 100%;
  text-align: center;
  position: relative;
  top: 100px;
  transition: 0.3s;
}

section#start .icons .icon:hover .textBox .text{
  position: relative;
  top: -45px;
}

h3.comming{
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-size: 22px;
  color: #fff;
  text-transform: uppercase;
  width: 100%;
  text-align: center;
  letter-spacing: 4px;
}

section#wallpaper{
  width: 100%;
  height: 90vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background: url(https://eventmasterx.com/img/eventmasterX_background.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 110px;
}

section#wallpaper .blackscreen{
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section#wallpaper .blackscreen img{
  width: 50px;
  margin-top: 80px;
}

section#wallpaper .blackscreen h1{
  font-size: 55px;
  color: #fff;
  font-family: "Archivo Black", "Roboto", sans-serif;
  padding-bottom: 0px;
  letter-spacing: 3px;
}

section#wallpaper .blackscreen h3{
  font-size: 22px;
  color: #EEEEEE;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

section#wallpaper .blackscreen a{
  margin-top: 20px;
  color: #fff;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  text-decoration: underline;
}

section#wallpaper svg{
  width: 40%;
  height: auto;
  margin-top: 10px;
  padding-bottom: 5px;
}

section#main{
  width: 100%;
  height: auto;
  padding: 100px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jobList{
  width: 100%;
  height: 50px;
  margin-top: 50px;
  overflow: hidden;
  background: #151515;
  border: 0.5px solid #d4af7a;
  box-shadow: 0 0 2px #d4af7a,
              0 0 5px #d4af7a,
              0 0 10px #d4af7a;
  border-radius: 2px;
  padding: 10px;
  transition: 0.2s;
}

.jobList.active{
  height: auto;
}

.jobList .jobHeader{
  height: 40px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 10px;
  padding-bottom: 20px;
  cursor: pointer;
}

.jobList .jobHeader h2{
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
}

.jobList .jobHeader .close{
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  position: relative;
}

.jobList .jobHeader .close #line-top{
  position: absolute;
  width: 50%;
  height: 1px;
  background: #fff;
}

.jobList .jobHeader .close #line-bottom{
  position: absolute;
  width: 50%;
  height: 1px;
  background: #fff;
  transform: rotateZ(90deg);
  transition: 0.3s;
}

.jobList.active .jobHeader .close #line-bottom{
  transform: rotateZ(0);
  opacity: 0;
}

.jobList .jobItem{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.jobList .jobItem .jobText{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.jobList .jobItem .jobText p{
  font-size: 16px;
  color: #fff;
  font-weight: 300;
}

.jobList .jobItem .jobText ul{
  width: 100%;
  padding-left: 20px;
  margin-top: 15px;
}

.jobList .jobItem .jobText ul h3.listHeadline{
  font-size: 16px;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  padding-bottom: 3px;
  margin-left: -20px;
}

.jobList .jobItem .jobText ul li{
  font-size: 16px;
  color: #fff;
  font-weight: 500;
  margin-top: 5px;
}

.m-ticket{
  width:350px;
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 0 25px #bbb;
  display:flex;
  flex-direction:column;
  align-items:center;
  position:relative;
  cursor:default;
}


.m-ticket:before{
  content:"";
  position:absolute;
  left:-10px;
  top:41%;
  background:#eee;
  box-shadow:inset 0 0 25px #bbb;
  width:17px;
  height:17px;
  border-radius:50%;
}


.m-ticket:after{
  content:"";
  position:absolute;
  right:-10px;
  top:41%;
  background:#eee;
  box-shadow:inset 0 0 25px #bbb;
  width:17px;
  height:17px;
  border-radius:50%;
}


.m-ticket .m{
  position:absolute;
  right:-5px;
  top:15%;
  transform:rotate(270.5deg);
  font-size:.80em;
  color:#888;
}


.m-ticket > .movie-details{
  display:flex;
  gap:20px;
  padding:20px 20px;
}


.m-ticket > .movie-details > .poster{
  max-width:90px;
  height:120px;
  border-radius:8px;
  box-shadow:0 0 10px #888;
  overflow: hidden;
}

.m-ticket > .movie-details > .poster img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.m-ticket > .movie-details > .movie > h4{
  text-transfrom:capitalize;
  font-size:1.0em;
  margin-bottom:20px;
  width:200px;
}


.m-ticket > .movie-details > .movie > p{
  font-size:.80em;
  line-height:19px;
  color:#777;
}


.m-ticket > .info{
  width:93%;
  border-radius:20px;
  background:#eee;
  padding:10px 0px;
  text-align:center;
  font-size:.72em;
}



.m-ticket > .ticket-details{
  display:flex;
  gap:20px;
  padding:20px 20px;
}


.m-ticket > .ticket-details > .scan{
  width:100px;
  height:100px;
}

.m-ticket > .ticket-details > .ticket{
  text-align:center;
  width:200px;
}


.m-ticket > .ticket-details > .ticket > p{
  font-size:.80em;
  line-height:19px;
  color:#777;
}

.m-ticket > .ticket-details > .ticket > b{
  margin-top:10px;
  display:inline-block;
  font-size:1.2em;
  font-weight:400;
}


.m-ticket > .ticket-details > .ticket > h6{
  text-transform:uppercase;
  font-weight:100;
  font-size:.95em;
  margin-top:10px;
}


.m-ticket > .info-cancel{
  width:100%;
  background:#eee;
  color:#888;
  padding:10px 0px;
  text-align:center;
  font-size:.80em;
}


.m-ticket > .total-amount{
  display:flex;
  justify-content:space-between;
  padding:12px 20px;
  font-weight:700;
  font-size:.90em;
  width:100%;
}

.m-ticket .poweredBy{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  font-weight: 300;
  font-size:.70em;
  width: 100%;
  text-align: center;
}

section#ticket{
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background: url(https://eventmasterx.com/img/eventmasterX_background.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

section#ticket .blackscreen{
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section#eventBuyBox{
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  background-image: url(https://eventmasterx.com/img/eventmasterX_background.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

section#eventBuyBox.repeat-background{
  background-size: 100% auto;
  background-position: top;
  background-repeat: repeat-y;
}

section#eventBuyBox .eventBlackscreen{
  width: 100%;
  min-height: 100vh;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding: 150px 0 100px 0;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader{
  width: 70%;
  height: auto;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-bottom: 20px;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-left{
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-left a{
  font-size: 14px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 1px;
  cursor: pointer;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-left a i{
  font-size: 12px;
  padding-right: 0px;
  transition: 0.2s;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-left a:hover i{
  padding-right: 5px;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-left span.headerEventInformation{
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 1px;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-right{
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-right ul{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-right ul li{
  font-size: 12px;
  color: #fff;
  list-style: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-right ul li i{
  font-size: 20px;
  color: #fff;
  list-style: none;
  cursor: pointer;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter{
  width: 100%;
  max-height: 0px;
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 5px;
  margin-top: 15px;
  padding: 0px 3px;
  transition: 0.2s;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter.show{
  max-height: 45px;
  padding: 3px 3px;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter form{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter form select{
  width: 50%;
  height: 40px;
  border: 1px solid #d4af7a;
  color: #151515;
  background: none;
  outline: none;
  padding: 0 10px;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
  color: #151515;
  font-weight: 700;
  letter-spacing: 2px;
  margin: 0 5px 0 0;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter form input{
  width: calc(50% / 3);
  height: 40px;
  margin: 0px 5px;
  border: 1px solid #d4af7a;
  color: #151515;
  background: none;
  outline: none;
  padding: 0 10px;
  color: #151515;
  font-weight: 700;
  letter-spacing: 2px;
}

section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter form input:nth-child(4){
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-right: 0px;
}

section#eventBuyBox .eventBlackscreen .eventBox{
  width: 70%;
  height: auto;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d4af7a;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4);
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

section#eventBuyBox .eventBlackscreen .eventBox .imgBox{
  width: 45%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding-right: 20px;
  border-right: 1px solid rgba(0, 0, 0, 0.3);
}

section#eventBuyBox .eventBlackscreen .eventBox .imgBox img{
  width: 100%;
}

section#eventBuyBox .eventBlackscreen .eventBox .imgBox .invitationLinks{
  margin-top: 30px;
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
}

section#eventBuyBox .eventBlackscreen .eventBox .imgBox .invitationLinks .btn{
  width: 100%;
  height: auto;
  padding: 7px 0;
  background: none;
  border-radius: 2px;
  color: #151515;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-size: 15px;
  letter-spacing: 4px;
  text-transform: uppercase;
  outline: none;
  border: 2px solid #151515;
  cursor: pointer;
  line-height: auto;
  text-align: center;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox{
  width: 55%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding-left: 20px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox h1{
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: 20px;
  color: #151515;
  letter-spacing: 5px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox h3{
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 18px;
  letter-spacing: 3px;
  color: #151515;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox span{
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #151515;
  margin-top: 10px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox span b{
  font-weight: 500;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox span .dot{
  margin-left: 5px;
  margin-right: 5px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 25px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem{
  background: #D9D9D9;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  height: 35px;
  border-radius: 3px;
  padding: 0px 10px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem.col-high{
  height: 40px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem.col-full{
  width: 100%;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem.col-half{
  width: 50%;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem i{
  font-size: 17px;
  color: #151515;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem .itemTextBox{
  margin-left: 5px;
  font-size: 14px;
  color: #151515;
  text-align: center;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem .itemTextBox g.startEvent{
  font-size: 13px;
  text-align: center;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .ticket-buy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 40px;
  width: 80%;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .ticket-quantity-box,
section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .ticket-price-box {
  padding: 0;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .ticket-grid-label {
  display: block;
  margin-bottom: 10px;
  font-size: 12px;
  color: #777;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .ticket-stepper {
  display: flex;
  align-items: center;
  gap: 8px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .ticket-stepper-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 10px;
  background: #111;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .ticket-stepper-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm #addTicketToCartQuantity {
  width: 48px;
  height: 36px;
  text-align: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-weight: 600;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .ticket-price-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm #ticketTotalPrice {
  font-size: 20px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm #categoryAddOnWrapper{
  display: flex;
  margin-top: 25px;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
  height: auto;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm #categoryAddOnWrapper #categoryAddOnSelect{
  width: 100%;
  height: 40px;
  outline: none;
  border-radius: 0;
  padding: 0 5px;
  border: 1px solid #151515;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 20px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .headline,
section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm #categoryAddOnWrapper #categoryAddOnTitle{
  font-weight: 700;
  text-transform: uppercase;
  color: #151515;
  letter-spacing: 2px;
  padding-bottom: 10px;
  font-size: 11px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem{
  width: auto;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
  margin-top: 10px;
  transition: 0.2s;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem:hover{
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.4);
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem.soldOut{
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
  position: relative;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem.soldOut::before,
section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem.soldOut::after{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateZ(17deg);
  width: 100%;
  height: 1px;
  background: rgba(0, 0, 0, 0.5);
}
section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem.soldOut::after{
  transform: translate(-50%, -50%) rotateZ(-17deg);
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem.soldOut:hover{
  box-shadow: none;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem input{
  width: 100px;
  height: 40px;
  position: absolute;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  border-radius: 0;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem label{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #151515;
  width: 100%;
  line-height: 40px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  text-align: center;
  padding: 0px 10px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem input:checked + .categorieLabel{
  border-color: #d4af7a;
  box-shadow: 0px 0px 5px rgba(212, 175, 122, 0.4);
  color: #d4af7a;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons{
  margin-top: 35px;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons button{
  width: 80%;
  line-height: 40px;
  outline: none;
  background: none;
  border: 1px solid #151515;
  color: #151515;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 2px;
  transition: 0.2s;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons button i{
  padding-right: 10px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons button:hover{
  color: #d4af7a;
  border-color: #d4af7a;
  background: #fff;
  box-shadow: 0px 0px 20px rgba(212, 175, 122, 0.4);
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons button.notActive{
  pointer-events: none;
  opacity: 0.5;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons button.added{
  color: #15803d;
  border-color: #15803d;
  background: #fff;
  box-shadow: 0px 0px 20px rgba(18, 138, 62, 0.4);
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons a{
  width: 15%;
  line-height: 40px;
  outline: none;
  background: none;
  border: 1px solid #151515;
  color: #151515;
  font-size: 20px;
  text-align: center;
  transition: 0.2s;
  cursor: pointer;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons a:hover{
  color: #d4af7a;
  border-color: #d4af7a;
  background: #fff;
  box-shadow: 0px 0px 20px rgba(212, 175, 122, 0.4);
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox h3.buyInformation{
  width: 100%;
  color: #151515;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  margin-top: 30px;
}
section#eventBuyBox .eventBlackscreen .eventBox .textBox p.buyInformation{
  width: 100%;
  color: #151515;
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  margin-top: 10px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox p.descriptionHeadline{
  width: 100%;
  color: #151515;
  font-size: 13px;
  font-weight: 900;
  text-align: left;
  margin-top: 50px;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText{
  font-family: "Roboto", sans-serif;
  width: 100%;
  margin-top: 5px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText p{
  font-size: 13px;
  font-weight: 400;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText a{
  font-size: 13px;
  color: #151515;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText a:hover{
  letter-spacing: 1px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText .ql-size-small{
  font-size: 11px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText .ql-size-large{
  font-size: 17px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText .ql-size-huge{
  font-size: 23px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText ol,
section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText ul{
  margin-left: 30px;
  margin-top: 10px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText ol li,
section#eventBuyBox .eventBlackscreen .eventBox .textBox .eventDescriptionText ul li{
  margin-top: 5px;
  font-size: 13px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .moreInformation{
  margin-top: 15px;
  width: 100%;
  height: auto;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .moreInformation .personalisieren{
  width: 100%;
  height: auto;
  color: #151515;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .moreInformation .preisContent{
  width: 100%;
  height: auto;
  color: #151515;
  font-size: 11px;
  font-weight: 300;
  margin-top: 15px;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox{
  width: 70%;
  height: auto;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d4af7a;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4);
  padding: 30px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .headline:nth-child(1){
  margin-top: 0px;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .headline{
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin-top: 40px;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .headline span{
  width: 100%;
  height: 2px;
  background: #D9D9D9;
  position: absolute;
  top: 20%;
  left: 0;
  transform: translateY(-50%);
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .headline h3{
  font-size: 18px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  color: #d4af7a;
  padding: 0px 20px 0px 0px;
  background: #fff;
  position: absolute;
  top: 20%;
  left: 0;
  transform: translateY(-50%);
}

section#eventBuyBox .eventBlackscreen .customerAboutBox p{
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #151515;
  margin-top: 10px;
  width: 100%;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox a{
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  text-decoration: underline;
  color: #151515;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .disclaimer{
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #151515;
  margin-top: 70px;
  width: 100%;
  text-align: left;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .disclaimer a{
  color: #151515;
  font-weight: 900;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .socials{
  width: 100%;
  height: auto;
  margin-top: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .socials li{
  margin-left: 30px;
  color: #151515;
  font-size: 30px;
  text-decoration: none;
  list-style: none;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .socials li:nth-child(1){
  margin-left: 0;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .socials li a{
  color: #151515;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .supportContacts{
  width: 100%;
  height: auto;
  margin-top: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .supportContacts li{
  margin: 0px 40px;
  color: #151515;
  font-size: 16px;
  text-decoration: none;
  list-style: none;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

section#eventBuyBox .eventBlackscreen .customerAboutBox .supportContacts li a{
  color: #151515;
  text-decoration: none;
  list-style: none;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
}

section#eventBuyBox .eventBlackscreen .customerCalenderBox{
  width: 80%;
}

.calenderView{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 20px;
}

.calenderView .calenderInformationHeadline{
  color: #151515;
  font-family: "Archivo Black", sans-serif;
  position: relative;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.calenderView .calenderInformationHeadline .headlineUnderline{
  width: 70px;
  position: absolute;
  bottom: -3px;
  left: 0;
  background: #d4af7a;
  height: 2px;
}

.calenderView .noCalenderEntryFound{
  color: #151515;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  position: relative;
  font-size: 14px;
  letter-spacing: 1px;
  margin-top: 20px;
}

.calenderView .calenderBox{
  width: 80%;
  height: 100%;
}

.calenderView .calenderBox .calenderButtons{
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  height: auto;
  position: relative;
}

.calenderView .calenderBox .calenderButtons button{
  width: 150px;
  padding: 7px 0;
  line-height: 100%;
  outline: none;
  background: #fff;
  border: 2px solid #d4af7a;
  border-radius: 5px;
  color: #d4af7a;
  cursor: pointer;
  transition: 0.2s;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 1px;
}

.calenderView .calenderBox .calenderButtons button:hover{
  background: #d4af7a;
  color: #fff;
}

.calenderView .calenderBox .calenderButtons button:nth-child(2){
  margin-left: 10px;
}

.calenderView .calenderBox #kalender{
  margin-top: 20px;
}

.calenderView .calenderContentBox{
  width: 20%;
  height: 100%;
}

.calenderView .calenderContentBox .innerContent{
  width: 100%;
  height: auto;
  margin-top: 20px;
  padding: 0px 10px 20px 10px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.calenderView .calenderContentBox .innerContent ul{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.calenderView .calenderContentBox .innerContent ul li{
  list-style: none;
  font-size: 13px;
  color: #151515;
  line-height: 18px;
  font-weight: 700;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.calenderView .calenderContentBox .innerContent ul li.calenderTime{
  font-weight: 400;
}

.calenderView .calenderContentBox .innerContent ul li.calenderLocation{
  margin-top: 10px;
}

.calenderView .calenderContentBox .innerContent ul li i{
  width: 30px;
  position: relative;
  font-size: 15px;
}

.calenderView .calenderContentBox .innerContent ul li span{
  width: calc(100% - 30px);
}

.calenderView .calenderContentBox .innerContent .calenderTitle{
  font-size: 16px !important;
  color: #151515 !important;
  font-weight: 500 !important;
  margin-top: 30px !important;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.calenderView .calenderContentBox .innerContent .calenderTitle i{
  font-size: 20px;
  width: 30px;
}

.calenderView .calenderContentBox .innerContent .calenderTitle span{
  width: calc(100% - 30px);
}

.calenderView .calenderContentBox .innerContent .calenderDescription{
  font-size: 14px !important;
  color: #151515 !important;
  font-weight: 400 !important;
  margin-top: 20px !important;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.calenderView .calenderContentBox .innerContent .calenderDescription i{
  font-size: 17px;
  width: 30px;
}

.calenderView .calenderContentBox .innerContent .calenderDescription span{
  width: calc(100% - 30px);
}

.calenderView .calenderContentBox .innerContent .calenderForm{
  width: 100%;
  height: auto;
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList{
  width: 100%;
  max-height: 0;
  overflow-y: scroll;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  transition: 0.2s;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList.active{
  max-height: 500px;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormItem{
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  margin-top: 20px;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormRow{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-top: 30px;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormRow .calenderFormItem{
  width: 48%;
  margin-top: 0 !important;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormItem input,
.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormItem select{
  width: 100%;
  height: 32px;
  border: none;
  border-bottom: 2px solid #d4af7a;
  outline: none;
  background: none;
  font-size: 12px;
  color: #151515;
  box-sizing: border-box;
  padding: 0;
  margin-top: 3px;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormItem.calenderFormLabelStatic input,
.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormItem.calenderFormLabelStatic select{
  width: 100%;
  height: 32px;
  margin-top: 3px;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormItem.calenderFormLabelStatic label.inputLabel{
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormItem:focus-within label.inputLabel,
.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormItem input:not(:placeholder-shown):valid ~ label.inputLabel{
  position: absolute;
  left: 0;
  top: 0;
  font-size: 9px;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormItem label.inputLabel{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  font-size: 11px;
  text-transform: uppercase;
  color: #d4af7a;
  font-weight: 700;
  letter-spacing: 2px;
  transition: 0.2s;
  pointer-events: none;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderFormList .calenderFormItem label.inputLabel .requiredLabel{
  font-size: 10px;
  color: #151515;
  margin-left: 5px;
}

.calenderView .calenderContentBox .innerContent .calenderForm .calenderBtn{
  width: 100%;
  line-height: 25px;
  background: #d4af7a;
  outline: none;
  border: 2px solid #d4af7a;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 2px;
  margin-top: 20px;
  cursor: pointer;
}

section#eventBuyBox .eventBlackscreen .eventList{
  width: 70%;
  height: auto;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d4af7a;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4);
  padding: 30px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

section#eventBuyBox .eventBlackscreen .eventList .headline:nth-child(1){
  margin-top: 0px;
}

section#eventBuyBox .eventBlackscreen .eventList .headline{
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin-top: 40px;
}

section#eventBuyBox .eventBlackscreen .eventList .headline span{
  width: 100%;
  height: 2px;
  background: #D9D9D9;
  position: absolute;
  top: 20%;
  left: 0;
  transform: translateY(-50%);
}

section#eventBuyBox .eventBlackscreen .eventList .headline h3{
  font-size: 14px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  color: #d4af7a;
  padding: 0px 20px 0px 0px;
  background: #fff;
  position: absolute;
  top: 20%;
  left: 0;
  transform: translateY(-50%);
}

section#eventBuyBox .eventBlackscreen .eventList .noEventsInList{
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: #151515;
  padding: 20px 0
}

section#eventBuyBox .eventBlackscreen .eventList .prevEvents{
  width: 100%;
  max-height: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 10px;
  transition: 0.2s;
  overflow-y: hidden;
  overflow-x: visible;
  transition-timing-function: ease;
}
section#eventBuyBox .eventBlackscreen .eventList .prevEvents.visible{
  width: 100%;
  max-height: 500px;
}

section#eventBuyBox .eventBlackscreen .eventList .headline .prevArrow{
  background: #fff;
  padding: 0px 0px 0px 20px;
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%);
  text-decoration: none;
}

section#eventBuyBox .eventBlackscreen .eventList .headline .prevArrow i{
  font-size: 18px;
  color: #151515;
  transition: 0.2s;
}

section#eventBuyBox .eventBlackscreen .eventList .headline .prevArrow i.visible{
  transform: rotateZ(180deg);
}

.eventItemBox{
  width: 100%;
  height: 120px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 15px 0;
}

.eventItemBox .eventItem{
  width: 100%;
  height: 100%;
  border-radius: 10px;
  background: #F9F9F9;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  text-decoration: none;
  position: relative;
}

.eventItemBox .eventItem .nextEventLabel{
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #d4af7a;
  color: #151515;
  padding: 3px 5px;
  border-radius: 2px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 800;
}

.eventItemBox .eventItem .imgBox{
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0px 10px;
}

.eventItemBox .eventItem .imgBox img{
  max-width: 95%;
  max-height: 95%;
}

.eventItemBox .eventItem .textBox{
  width: 70%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 20px;
  position: relative;
}

.eventItemBox .eventItem .textBox .leftElement{
  width: 75%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.eventItemBox .eventItem .textBox .leftElement h1{
  font-size: 18px;
  font-weight: 900;
  color: #151515;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.eventItemBox .eventItem .textBox .leftElement h3{
  font-size: 15px;
  font-weight: 500;
  color: #151515;
  letter-spacing: 0px;
  text-transform: none;
  margin-top: 5px;
}

.eventItemBox .eventItem .textBox .leftElement p{
  font-size: 13px;
  font-weight: 400;
  color: #151515;
  letter-spacing: 0px;
  text-transform: uppercase;
  margin-top: 10px;
}

.eventItemBox .eventItem .textBox .leftElement .informationList{
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 10px;
}

.eventItemBox .eventItem .textBox .leftElement .informationList ul{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.eventItemBox .eventItem .textBox .leftElement .informationList ul li{
  margin-left: 10px;
  list-style: none;
  font-size: 12px;
  color: #151515;
}

.eventItemBox .eventItem .textBox .leftElement .informationList ul li:nth-child(1){
  margin-left: 0px;
}

.eventItemBox .eventItem .textBox .rightElement{
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.eventItemBox .eventItem .textBox .rightElement .price{
  width: 100%;
  text-align: center;
  font-size: 12px;
  color: #151515;
  font-weight: 900;
  font-family: "Roboto", sans-serif;
  letter-spacing: 1px;
}

.eventItemBox .eventItem .textBox .rightElement .btn{
  width: 100%;
  line-height: 30px;
  background: #d4af7a;
  text-align: center;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  color: #fff;
  font-weight: 800;
  font-family: "Roboto", sans-serif;
  border: none;
  margin-top: 8px;
}

.eventItemBox .eventItem .dateBox{
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-left: 1px solid rgba(0, 0, 0, 0.3);
}

.eventItemBox .eventItem .dateBox .numberDay{
  font-size: 35px;
  text-transform: uppercase;
  color: #d4af7a;
  font-weight: 900;
}

.eventItemBox .eventItem .dateBox .numberDate,
.eventItemBox .eventItem .dateBox .numberTime{
  font-size: 13px;
  font-family: "Roboto", sans-serif;
  color: #151515;
  font-weight: 500;
  margin-top: 5px;
}

section#eventBuyBox .eventBlackscreen .downloadList{
  width: 70%;
  height: auto;
  background: #fff;
  border-radius: 3px;
  border: 1px solid #d4af7a;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4);
  padding: 30px 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

section#eventBuyBox .eventBlackscreen .downloadList .headline:nth-child(1){
  margin-top: 0px;
}

section#eventBuyBox .eventBlackscreen .downloadList .headline{
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  margin-top: 40px;
}

section#eventBuyBox .eventBlackscreen .downloadList .headline span{
  width: 100%;
  height: 2px;
  background: #D9D9D9;
  position: absolute;
  top: 20%;
  left: 0;
  transform: translateY(-50%);
}

section#eventBuyBox .eventBlackscreen .downloadList .headline h3{
  font-size: 14px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  color: #d4af7a;
  padding: 0px 20px 0px 0px;
  background: #fff;
  position: absolute;
  top: 20%;
  left: 0;
  transform: translateY(-50%);
}

section#eventBuyBox .eventBlackscreen .downloadList .noFilesInList{
  font-size: 16px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  color: #151515;
  padding: 20px 0
}

section#eventBuyBox .eventBlackscreen .downloadList .fileItemBox{
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 15px 0;
  background: #F9F9F9;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
}

section#eventBuyBox .eventBlackscreen .downloadList .fileItemBox .fileItemText{
  width: 90%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  text-decoration: none;
  flex-direction: column;
  position: relative;
}

section#eventBuyBox .eventBlackscreen .downloadList .fileItemBox .fileItemText h1{
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 16px;
  color: #151515;
  letter-spacing: 1px;
}

section#eventBuyBox .eventBlackscreen .downloadList .fileItemBox .fileItemText h3{
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 11px;
  color: #151515;
  margin-top: 5px;
}

section#eventBuyBox .eventBlackscreen .downloadList .fileItemBox .fileItemText h3 b{
  font-weight: 600;
  color: #151515;
  letter-spacing: 1px;
  padding-left: 5px;
}

section#eventBuyBox .eventBlackscreen .downloadList .fileItemBox .fileItemIcon{
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

section#eventBuyBox .eventBlackscreen .downloadList .fileItemBox .fileItemIcon i{
  font-size: 30px;
  color: #d4af7a;
}

section#eventBuyBox .eventBlackscreen .downloadList #viewDownloadContent{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section#eventBuyBox .eventBlackscreen .downloadList #viewDownloadContent iframe,
section#eventBuyBox .eventBlackscreen .downloadList #viewDownloadContent img,
section#eventBuyBox .eventBlackscreen .downloadList #viewDownloadContent video,
section#eventBuyBox .eventBlackscreen .downloadList #viewDownloadContent pre{
  max-width: 100%;
}

section#eventBuyBox .eventBlackscreen .downloadList #viewDownloadContent iframe{
  min-height: 80vh;
}

section#eventBuyBox .eventBlackscreen .downloadList #viewDownloadContent h1.downloadErrorHeadline{
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: 25px;
  text-align: center;
  color: #151515;
  letter-spacing: 2px;
}

section#eventBuyBox .eventBlackscreen .downloadList #viewDownloadContent h3.downloadErrorSubline{
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 17px;
  text-align: center;
  color: #151515;
  letter-spacing: 1px;
  margin-top: 10px;
}

section#eventInformation{
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background: url(https://eventmasterx.com/img/CLUBSESSION_WALLPAPER_BACKGROUND.jpeg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

section#eventInformation .blackscreen{
  background: rgba(0, 0, 0, 0.6);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding-top: 100px;
}

section#eventInformation .blackscreen h3{
  font-size: 27px;
  color: #FFF;
  letter-spacing: 3px;
  font-family: "Archivo Black", "Roboto", sans-serif;
}

section#eventInformation .blackscreen h4{
  font-size: 24px;
  color: #FFF;
  letter-spacing: 1px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

section#eventInformation .blackscreen .preis{
  margin-top: 15px;
  font-size: 20px;
  color: #EEEEEE;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
}

section#eventInformation .blackscreen .infos{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section#eventInformation .blackscreen .infos .location{
  font-size: 17px;
  color: #FFF;
  letter-spacing: 3px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  margin-top: 30px;
}

section#eventInformation .blackscreen .infos .date{
  font-size: 17px;
  color: #FFF;
  letter-spacing: 1px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-top: 5px;
}

section#eventInformation .blackscreen .informationList{
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 15px;
}

section#eventInformation .blackscreen .informationList .row{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

section#eventInformation .blackscreen .informationList .row .informationItem{
  background: #2B2B2B;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 5px;
  height: 35px;
  border-radius: 3px;
  padding: 0px 10px;
}

section#eventInformation .blackscreen .informationList .row .informationItem.col-high{
  height: 40px;
}

section#eventInformation .blackscreen .informationList .row .informationItem.col-full{
  width: 100%;
}

section#eventInformation .blackscreen .informationList .row .informationItem.col-half{
  width: 50%;
}

section#eventInformation .blackscreen .informationList .row .informationItem i{
  font-size: 17px;
  color: #fff;
}

section#eventInformation .blackscreen .informationList .row .informationItem span{
  font-size: 17px;
}

section#eventInformation .blackscreen .informationList .row .informationItem .textBox{
  margin-left: 5px;
  font-size: 14px;
  color: #fff;
}

section#eventInformation .blackscreen .informationList .row .informationItem .textBox g.startEvent{
  font-size: 13px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .oldInformationList{
  width: 100%;
  height: auto;
  position: relative;
  margin-top: 20px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .oldInformationList ul{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .oldInformationList ul li{
  margin-left: 10px;
  list-style: none;
  color: #151515;
  text-decoration: none;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .oldInformationList ul li a{
  list-style: none;
  font-size: 15px;
  color: #151515;
  text-decoration: none;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .oldInformationList ul li:nth-child(1){
  margin-left: 0px;
}

section#eventSection{
  width: 100%;
  height: auto;
  background: #151515;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
}

section#eventSection #unsereEvents{
  position: absolute;
  top: -100px;
  height: 2px;
  width: 100%;
  display: flex;
}

section#eventSection .eventList{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 20px;
}

section#eventSection .eventList p.eventInformationHeadline{
  font-size: 18px;
  color: #FFF;
  letter-spacing: 1px;
  font-weight: 400;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
}

section#eventSection .eventList .eventItem{
  width: 200px;
  height: 355px;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
  background: #151515;
  transition: 0.2s;
  margin: 20px;
}

section#eventSection .eventList .eventItem:hover{
  transform: scale(1.05);
}

section#eventSection .eventList .eventItem img{
  width: 100%;
  opacity: 0.8;
}

section#feedback{
  width: 100%;
  height: auto;
  padding: 30px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #151515;
}

section#feedback .swiper {
  width: 90%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  background: none;
  margin-top: 30px;
}

section#feedback .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  background: none;
  padding-bottom: 40px;
}

section#feedback .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

section#feedback .swiper-pagination-bullet-active{
  background: #fff;
}

section#feedback .swiper-pagination-bullet{
  border: 2px solid #fff;
}

section#feedback .feedbackItem{
  width: 600px;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

section#feedback .feedbackItem p{
  font-size: 16px;
  color: #fff;
}

section#feedback .feedbackItem ul{
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 10px;
}

section#feedback .feedbackItem ul li{
  color: #fff;
  list-style: none;
  margin: 2px;
  font-size: 16px;
}

section#feedback .feedbackItem ul li i.checked{
  color: #ffd700;
}

section#feedback .feedbackItem ul li.verify{
  font-size: 14px;
  color: #d4af7a;
  position: relative;
  margin-left: 15px;
}

section#feedback .feedbackItem ul li.verify i{
  position: absolute;
  top: 50%;
  right: 50%;
  transform: translate(50%, -50%);
}

section#feedback .feedbackItem ul li.verify i:nth-child(2){
  color: #fff;
  font-size: 11px;
}

section#feedback .feedbackItem .name{
  font-size: 15px;
  color: #fff;
  margin-top: 10px;
  letter-spacing: 1px;
}

section#feedback .feedbackItem .datum{
  font-size: 13px;
  color: #fff;
  opacity: 0.6;
}

section#whitelistForm{
  width: 100%;
  height: auto;
  background: #151515;
  padding: 40px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#ticket .logo{
  z-index: 9000;
  position: absolute;
  top: 20px;
}

#ticket .logo.printVersion{
  display: none;
}

#ticket .logo img{
  width: 100px;
}

#ticket .formular{
  width: 500px;
  height: auto;
  background: #151515;
  border-radius: 10px;
  padding: 50px 30px;
  box-shadow: 0 0 5px #d4af7a,
              0 0 25px #d4af7a,
              0 0 50px #d4af7a;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#ticket .formular form{
  width: 90%;
}

#ticket .formular form button{
  margin-top: 75px;
}

#ticket #changeKameraInput{
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(150px);
  cursor: pointer;
  z-index: 8000;
  font-size: 20px;
  color: #fff;
}

.ticketBox{
  width: 400px;
  height: 100vh;
  background: #151515;
  box-shadow: 0 0 2px #d4af7a,
              0 0 10px #d4af7a,
              0 0 15px #d4af7a;
  padding-top: 100px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding-left: 15px;
  padding-right: 15px;
  position: relative;
}

.ticketBox.appAccess{
  padding-top: 150px;
}

.ticketBox #video-container{
  width: 90%;
  height: 250px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

.ticketBox h3.ticketId{
  font-size: 18px;
  color: #FFF;
  letter-spacing: 3px;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: 800;
  margin-top: 10px;
}

.ticketBox .hinweis{
  position: absolute;
  bottom: 10px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  width: 350px;
}

.ticketBox .hinweis a{
  color: #fff;
  font-weight: 800;
}

.ticketBox .anmeldung{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 40px;
  z-index: 100;
}

.ticketBox .anmeldung h3.available{
  font-size: 15px;
  color: #FFF;
  letter-spacing: 3px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  text-align: center;
  padding-bottom: 10px
}

.ticketBox .anmeldung p{
  font-size: 15px;
  color: #FFF;
  letter-spacing: 3px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  text-align: center;
}

.ticketBox .anmeldung .fail{
  font-size: 15px;
  color: #FFF;
  letter-spacing: 3px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  text-align: center;
  width: 100%;
}

.ticketBox .anmeldung .qrCode{
  width: 130px;
  margin-top: 20px;
}

.ticketBox .anmeldung .qrCodeText{
  font-size: 12px;
  color: #FFF;
  letter-spacing: 3px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  text-align: center;
  margin-top: 15px;
}

.ticketBox .anmeldung img{
  width: 150px;
  margin-top: -20px;
}

.ticketBox .anmeldung .buttons{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: absolute;
  bottom: 40px;
}

.ticketBox .anmeldung .buttons .actionBtn{
  width: 60%;
  line-height: 30px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  background: #151515;
  border-radius: 2px;
  border: 1px solid #d4af7a;
  box-shadow: 0 0 2px #d4af7a,
              0 0 10px #d4af7a,
              0 0 15px #d4af7a;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}

.ticketBox .anmeldung .buttons .actionBtn:hover{
  color: #151515;
  background: #d4af7a;
}

.ticketBox .eventInformation{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
}

.ticketBox .eventInformation .location{
  font-size: 15px;
  color: #FFF;
  letter-spacing: 3px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  margin-top: 20px;
  text-align: center;
  padding-bottom: 10px;
}

.ticketBox .eventInformation .location .adresse{
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  text-align: center;
}

.ticketBox .eventInformation .date{
  font-size: 15px;
  color: #FFF;
  letter-spacing: 1px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-top: 5px;
}

.formular form{
  width: 40%;
  margin-top: 20px;
}

.formular form .info{
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 20px;
}

.formular .user-box {
  position: relative;
}

.formular .user-box input#text {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  border-radius: 0;
}

.formular .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.formular .user-box input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #d4af7a;
	border-radius: 2px;
	background: none;
	cursor: pointer;
	line-height: 0;
	margin: 0 .6em 0 0;
	outline: 0;
	padding: 0 !important;
	vertical-align: text-top;
	height: 15px;
	width: 15px;
	-webkit-appearance: none;
}

.formular .user-box input[type=checkbox]:checked {
  background-color: none;
}

.formular .user-box input[type=checkbox]:checked:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 3px;
  height: 8px;
  border: solid #d4af7a;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}

.formular .user-box .labelCheckbox {
  position: absolute;
  top: -10px;
  left: 30px;
  padding: 10px 0;
  color: #d4af7a;
  font-size: 14px;
  transition: .5s;
}

.formular .user-box .labelCheckbox a{
  color: #d4af7a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.formular .user-box input:focus ~ label,
.formular .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #d4af7a;
  font-size: 12px;
}

.formular form button{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #d4af7a;
  background: none;
  outline: none;
  border: none;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .2s;
  margin-top: 40px;
  letter-spacing: 4px;
  pointer-events: none;
  opacity: 0.3;
}

.formular form button.active {
  pointer-events: all;
  opacity: 1;
  cursor: pointer;
}

.formular button:hover {
  background: #d4af7a;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #d4af7a,
              0 0 25px #d4af7a,
              0 0 50px #d4af7a,
              0 0 100px #d4af7a;
}

.formular button span {
  position: absolute;
  display: block;
}

.formular button span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af7a);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.formular button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #d4af7a);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.formular button span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #d4af7a);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.formular button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #d4af7a);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

.formular span.zahlung {
  position: relative;
  top: 15px;
  color: #EEEEEE;
  font-size: 13px;
  font-weight: 300;
}

.formular span.zahlung g {
  font-weight: 900;
}

.kontrolleFormular{
  width: 80%;
  margin-top: 0px;
}

.kontrolleFormular .info{
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 20px;
}

.kontrolleFormular .user-box {
  position: relative;
}

.kontrolleFormular .user-box input#text {
  width: 100%;
  padding: 10px 0;
  padding-right: 20px;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  border-radius: 0;
}

.kontrolleFormular .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.kontrolleFormular .user-box input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #d4af7a;
	border-radius: 2px;
	background: none;
	cursor: pointer;
	line-height: 0;
	margin: 0 .6em 0 0;
	outline: 0;
	padding: 0 !important;
	vertical-align: text-top;
	height: 15px;
	width: 15px;
	-webkit-appearance: none;
}

.kontrolleFormular .user-box input[type=checkbox]:checked {
  background-color: none;
}

.kontrolleFormular .user-box input[type=checkbox]:checked:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 3px;
  height: 8px;
  border: solid #d4af7a;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}

.kontrolleFormular .user-box .iconBtn{
  position: absolute;
  top: 30%;
  right: 0px;
  transform: translateY(-50%);
  color: #fff;
  font-size: 15px;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
}

.kontrolleFormular .user-box .labelCheckbox {
  position: absolute;
  top: -10px;
  left: 30px;
  padding: 10px 0;
  color: #d4af7a;
  font-size: 14px;
  transition: .5s;
}

.kontrolleFormular .user-box .labelCheckbox a{
  color: #d4af7a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.kontrolleFormular .user-box input:focus ~ label,
.kontrolleFormular .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #d4af7a;
  font-size: 12px;
}

.kontrolleFormular button.normalBtn{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #d4af7a;
  background: none;
  outline: none;
  border: none;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .2s;
  margin-top: 40px;
  letter-spacing: 4px;
  pointer-events: none;
  opacity: 0.3;
}

.kontrolleFormular button.normalBtn.active {
  pointer-events: all;
  opacity: 1;
  cursor: pointer;
}

.kontrolleFormular button.normalBtn:hover {
  background: #d4af7a;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #d4af7a,
              0 0 25px #d4af7a,
              0 0 50px #d4af7a,
              0 0 100px #d4af7a;
}

.kontrolleFormular button.normalBtn span {
  position: absolute;
  display: block;
}

.kontrolleFormular button.normalBtn span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af7a);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.kontrolleFormular button.normalBtn span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #d4af7a);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.kontrolleFormular button.normalBtn span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #d4af7a);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.kontrolleFormular button.normalBtn span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #d4af7a);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

.kontrolleFormular span.zahlung {
  position: relative;
  top: 15px;
  color: #EEEEEE;
  font-size: 13px;
  font-weight: 300;
}

.kontrolleFormular span.zahlung g {
  font-weight: 900;
}

.eintrittList{
  width: 80%;
  height: 30vh;
  overflow-y: scroll;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  z-index: 100;
}

.eintrittList .eintrittItem{
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  margin: 5px 0;
  cursor: pointer;
}

.eintrittList .eintrittItem p{
  font-size: 17px;
  color: #fff;
  font-weight: 800;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

.eintrittList .eintrittItem a{
  font-size: 17px;
  color: #fff;
  font-weight: 800;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

.eintrittList .eintrittItem span{
  font-size: 15px;
  color: #fff;
  opacity: 0.6;
  font-weight: 300;
}

#whitelistForm form{
  width: 40%;
  margin-top: 20px;
}

#whitelistForm form .info{
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 20px;
}

#whitelistForm .user-box {
  position: relative;
}

#whitelistForm .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  border-radius: 0;
}

#whitelistForm .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .3s;
}

#whitelistForm .user-box input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #d4af7a;
	border-radius: 2px;
	background: none;
	cursor: pointer;
	line-height: 0;
	margin: 0 .6em 0 0;
	outline: 0;
	padding: 0 !important;
	vertical-align: text-top;
	height: 15px;
	width: 15px;
	-webkit-appearance: none;
}

#whitelistForm .user-box input[type=checkbox]:checked {
  background-color: none;
}

#whitelistForm .user-box input[type=checkbox]:checked:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 3px;
  height: 8px;
  border: solid #d4af7a;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}

#whitelistForm .user-box .labelCheckbox {
  position: absolute;
  top: -10px;
  left: 30px;
  padding: 10px 0;
  color: #d4af7a;
  font-size: 14px;
  transition: .5s;
}

#whitelistForm .user-box .labelCheckbox a{
  color: #d4af7a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

#whitelistForm .user-box input:focus ~ label,
#whitelistForm .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #d4af7a;
  font-size: 12px;
}

#whitelistForm .user-box input.inputActive ~ label,
#whitelistForm .user-box input.inputActive ~ label {
  top: -20px;
  left: 0;
  color: #d4af7a;
  font-size: 12px;
}

#whitelistForm .user-box input.inputActive{
  opacity: 0.6;
}

#whitelistForm .user-box input:not(:placeholder-shown)input:not(:focus)+ label{
  top: -20px;
  left: 0;
  font-size: 13px;
  font-weight: 500;
  z-index: 10;
}

#whitelistForm form button{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #d4af7a;
  background: none;
  outline: none;
  border: none;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .2s;
  margin-top: 40px;
  letter-spacing: 4px;
  pointer-events: none;
  opacity: 0.3;
}

#whitelistForm form button.active {
  pointer-events: all;
  opacity: 1;
  cursor: pointer;
}

#whitelistForm button:hover {
  background: #d4af7a;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #d4af7a,
              0 0 25px #d4af7a,
              0 0 50px #d4af7a,
              0 0 100px #d4af7a;
}

#whitelistForm button span {
  position: absolute;
  display: block;
}

#whitelistForm button span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af7a);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

#whitelistForm button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #d4af7a);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

#whitelistForm button span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #d4af7a);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

#whitelistForm button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #d4af7a);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

#whitelistForm span.zahlung {
  position: relative;
  top: 15px;
  color: #EEEEEE;
  font-size: 13px;
  font-weight: 300;
}

#whitelistForm span.zahlung g {
  font-weight: 900;
}

#normalFormular{
  width: 100%;
  margin-top: 20px;
}

#normalFormular .info{
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  padding-bottom: 20px;
}

#normalFormular .user-box {
  position: relative;
}

#normalFormular .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
  border-radius: 0;
}

#normalFormular .star-rating {
  margin: 45px 0 0px;
  font-size: 0;
  white-space: nowrap;
  display: inline-block;
  width: 175px;
  height: 35px;
  overflow: hidden;
  position: relative;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  color: #fff;
  background-size: contain;
}
#normalFormular .star-rating i {
  opacity: 0;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 20%;
  z-index: 1;
  background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjRkZERjg4IiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
  background-size: contain;
}
#normalFormular .star-rating input {
  -moz-appearance: none;
  -webkit-appearance: none;
  opacity: 0;
  display: inline-block;
  width: 20%;
  height: 100%;
  margin: 0;
  padding: 0;
  z-index: 2;
  position: relative;
}
#normalFormular .star-rating input:hover + i,
#normalFormular .star-rating input:checked + i {
  opacity: 1;
}
#normalFormular .star-rating i ~ i {
  width: 40%;
}
#normalFormular .star-rating i ~ i ~ i {
  width: 60%;
}
#normalFormular .star-rating i ~ i ~ i ~ i {
  width: 80%;
}
#normalFormular .star-rating i ~ i ~ i ~ i ~ i {
  width: 100%;
}
#normalFormular .choice {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 20px;
  display: block;
}

#normalFormular .user-box textarea {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}

#normalFormular .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .3s;
}

#normalFormular .user-box.ratingBox label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .3s;
  margin-top: 10px;
}

#normalFormular .user-box input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #d4af7a;
	border-radius: 2px;
	background: none;
	cursor: pointer;
	line-height: 0;
	margin: 0 .6em 0 0;
	outline: 0;
	padding: 0 !important;
	vertical-align: text-top;
	height: 15px;
	width: 15px;
	-webkit-appearance: none;
}

#normalFormular .user-box input[type=checkbox]:checked {
  background-color: none;
}

#normalFormular .user-box input[type=checkbox]:checked:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 3px;
  height: 8px;
  border: solid #d4af7a;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}

#normalFormular .user-box .labelCheckbox {
  position: absolute;
  top: -10px;
  left: 30px;
  padding: 10px 0;
  color: #d4af7a;
  font-size: 14px;
  transition: .5s;
}

#normalFormular .user-box .labelCheckbox a{
  color: #d4af7a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

#normalFormular .user-box input:focus ~ label,
#normalFormular .user-box input:valid ~ label,
#normalFormular .user-box textarea:focus ~ label,
#normalFormular .user-box textarea:valid ~ label {
  top: -20px;
  left: 0;
  color: #d4af7a;
  font-size: 12px;
}

#normalFormular .user-box input.inputActive ~ label,
#normalFormular .user-box input.inputActive ~ label,
#normalFormular .user-box textarea.inputActive ~ label,
#normalFormular .user-box textarea.inputActive ~ label {
  top: -20px;
  left: 0;
  color: #d4af7a;
  font-size: 12px;
}

#normalFormular .user-box input.inputActive,
#normalFormular .user-box textarea.inputActive{
  opacity: 0.6;
}

#normalFormular .user-box input:not(:placeholder-shown)input:not(:focus)+ label,
#normalFormular .user-box textarea:not(:placeholder-shown)textarea:not(:focus)+ label{
  top: -20px;
  left: 0;
  font-size: 13px;
  font-weight: 500;
  z-index: 10;
}

#normalFormular button{
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #d4af7a;
  background: none;
  outline: none;
  border: none;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .2s;
  margin-top: 20px;
  letter-spacing: 4px;
  pointer-events: none;
  opacity: 0.3;
}

#normalFormular button.active {
  pointer-events: all;
  opacity: 1;
  cursor: pointer;
}

#normalFormular button:hover {
  background: #d4af7a;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #d4af7a,
              0 0 25px #d4af7a,
              0 0 50px #d4af7a,
              0 0 100px #d4af7a;
}

#normalFormular button span {
  position: absolute;
  display: block;
}

#normalFormular button span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #d4af7a);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

#normalFormular button span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #d4af7a);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

#normalFormular button span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #d4af7a);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

#normalFormular button span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #d4af7a);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

#normalFormular span.zahlung {
  position: relative;
  top: 15px;
  color: #EEEEEE;
  font-size: 13px;
  font-weight: 300;
}

#normalFormular span.zahlung g {
  font-weight: 900;
}

.ausschlussTextBox{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 20px;
}

.ausschlussTextBox .row1{
  width: 70%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.ausschlussTextBox .row2{
  width: 30%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.ausschlussTextBox .row1 p{
  width: auto;
  color: #fff;
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  margin-top: 6px;
}

.ausschlussTextBox .row1 p g{
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  padding-left: 10px;
  letter-spacing: 2px;
}

.ausschlussTextBox .row1 span.subGrund{
  width: auto;
  color: #fff;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: 200;
  margin-top: 20px;
}

.ausschlussTextBox .row2 .ausschlussBtn{
  width: 100%;
  line-height: 30px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  background: #151515;
  border-radius: 2px;
  border: 1px solid #d4af7a;
  box-shadow: 0 0 2px #d4af7a,
              0 0 10px #d4af7a,
              0 0 15px #d4af7a;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}

.ausschlussTextBox .row2 .ausschlussBtn:hover{
  color: #151515;
  background: #d4af7a;
}

#succsesPay{
  width: 100%;
  height: 100vh;
  z-index: 9999;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items:  center;
  animation: fadeInPay 0.5s ease;
}

@keyframes fadeInPay {
  0%{
    top: -100vh;
  }
  100%{
    top: 0;
  }
}

#succsesPay .innerBox{
  width: 500px;
  height: auto;
  background: #151515;
  border-radius: 10px;
  padding: 50px 30px;
  box-shadow: 0 0 5px #d4af7a,
              0 0 25px #d4af7a,
              0 0 50px #d4af7a;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#succsesPay .innerBox a{
  position: absolute;
  top: 20px;
  right: 30px;
  color: #EEEEEE;
  font-size: 22px;
  text-decoration: none;
}

#succsesPay .innerBox #check{
  font-size: 70px;
  color: #EEEEEE;
}

#succsesPay .innerBox h3{
  font-size: 20px;
  color: #EEEEEE;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  margin-top: 15px;
}

#succsesPay .innerBox h5{
  font-size: 16px;
  text-align: center;
  color: #EEEEEE;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  margin-top: 10px;
}

#succsesPay .innerBox p{
  font-size: 16px;
  text-align: center;
  color: #EEEEEE;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-top: 10px;
}

#preisBox{
  width: 100%;
  height: 100vh;
  z-index: 9999;
  position: fixed;
  top: -150%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items:  center;
}

#preisBox.active{
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#preisBox .innerBox{
  width: 500px;
  height: auto;
  background: #151515;
  border-radius: 10px;
  padding: 50px 30px;
  box-shadow: 0 0 5px #d4af7a,
              0 0 25px #d4af7a,
              0 0 50px #d4af7a;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#preisBox .innerBox a{
  position: absolute;
  top: 20px;
  right: 30px;
  color: #EEEEEE;
  font-size: 22px;
  text-decoration: none;
}

#preisBox .innerBox #check{
  font-size: 70px;
  color: #EEEEEE;
}

#preisBox .innerBox h3{
  font-size: 20px;
  color: #EEEEEE;
  text-align: center;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  margin-top: 15px;
}

#preisBox .innerBox h5{
  font-size: 16px;
  text-align: center;
  color: #EEEEEE;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  margin-top: 10px;
}

#preisBox .innerBox p{
  font-size: 16px;
  text-align: center;
  color: #EEEEEE;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  margin-top: 10px;
}

#preisBox .innerBox .pinField{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}

#preisBox .innerBox .pinField .pinInput{
  width: auto;
  height: 40px;
  outline: none;
  border: none;
  background: none;
  color: #fff;
  text-align: center;
  font-size: 20px;
  letter-spacing: 3px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  opacity: 1;
}

#preisBox .innerBox .pinField .pinList{
  width: 80%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 10px;
}

#preisBox .innerBox .pinField .pinList .pinItem{
  width: calc(100% / 3);
  line-height: 70px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  font-size: 25px;
  cursor: pointer;
}
#preisBox .innerBox .pinField .pinList .pinItem.noneItem{
  border: none;
}
#preisBox .innerBox .pinField .pinList .pinItem.longItem{
  width: calc(2 * (100% / 3));
}

#abendkassePopup,
.scanPopup{
  position: absolute;
  bottom: -5px;
  width: 396px;
  height: 90vh;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  z-index: 8999;
}

#abendkassePopup .innerBox,
.scanPopup .innerBox{
  position: absolute;
  bottom: -150%;
  width: 100%;
  height: 90%;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.5);
  border-top: 2px solid #fff;
  background: #151515;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  transition: 0.3s;
  z-index: 9998;
}

#abendkassePopup.active .innerBox,
.scanPopup.active .innerBox{
  bottom: -5px;
}

#abendkassePopup.hide,
.scanPopup.hide{
  bottom: -100%;
}

#abendkassePopup .ticketId,
.scanPopup .ticketId{
  text-align: center;
  margin-top: 30px;
  font-size: 25px;
  font-weight: 800;
}

#abendkassePopup p,
.scanPopup p{
  font-size: 19px;
}

#abendkassePopup b,
.scanPopup b{
  font-weight: 800;
}

.scanPopup .muttizettelScan{
  position: absolute;
  top: 30px;
  right: 20px;
  color: #fff;
  font-size: 20px;
}

.scanPopup .buyStatus{
  font-size: 14px;
}

.regelwerk h3{
  font-size: 21px;
  color: #fff;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: 800;
  padding-bottom: 10px;
  margin-top: 35px;
}

.regelwerk .regelItem{
  width: 100%;
  height: auto;
  padding-bottom: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.regelwerk p{
  font-size: 19px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  padding-bottom: 7px;
  width: 90%;
}

.regelwerk p g{
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}

.regelwerk span.absZeichen{
  font-family: "Roboto", sans-serif;
  font-weight: 600;
  width: 10%;
  color: #fff;
  font-size: 19px;
  padding-left: 20px;
}

.regelwerk p.informationsHinweis{
  font-size: 16px;
  color: #fff;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  width: 100%;
  margin-top: 20px;
}

form.payments{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10px;
}

.btn{
  width: 60%;
  line-height: 33px;
  border: 2px solid #d4af7a;
  border-radius: 2px;
  background: none;
  color: #d4af7a;
  font-weight: 800;
  text-transform: uppercase;
  outline: none;
  cursor: pointer;
}

.btn-paypal{
  width: 60%;
}

.infoBox{
  position: relative;
  z-index: 1000;
}

.infoBox i{
  color: #fff;
  font-size: 15px;
  cursor: pointer;
}

.infoBox .innerBox{
  background: #151515;
  border: 1px solid #d4af7a;
  box-shadow: 0 0 2px #d4af7a,
              0 0 10px #d4af7a;
  position: absolute;
  left: -50%;
  transform: translateX(-40%);
  padding: 10px 20px;
  border-radius: 2px;
  margin-top: 5px;
  opacity: 0;
  transition: 0.2s;
}

.infoBox .innerBox.active{
  opacity: 1;
}

.infoBox .innerBox ul{
  list-style: none;
  text-align: center;
}

.infoBox .innerBox ul li b{
  font-size: 15px;
}

.infoBox .innerBox ul li{
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.helpList{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-top: 20px;
}

.helpList .helpItem{
  width: 280px;
  height: 250px;
  background: #151515;
  border: 0.5px solid #d4af7a;
  box-shadow: 0 0 2px #d4af7a,
              0 0 5px #d4af7a,
              0 0 10px #d4af7a;
  border-radius: 2px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding: 10px;
  position: relative;
  margin: 10px;
}

.helpList .helpItem i{
  width: 30px;
  height: 30px;
  font-size: 20px;
  color: #fff;
  margin-top: 10px;
}

.helpList .helpItem h3{
  width: 100%;
  height: auto;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  margin-top: 10px;
}

.helpList .helpItem span{
  width: 100%;
  color: #fff;
  height: auto;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  padding: 15px 0;
}

.helpList .helpItem a{
  width: 90%;
  line-height: 30px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  background: #151515;
  border-radius: 2px;
  border: 1px solid #d4af7a;
  box-shadow: 0 0 2px #d4af7a,
              0 0 10px #d4af7a;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
  position: absolute;
  bottom: 15px;
}

.helpList .helpItem a:hover{
  color: #151515;
  background: #d4af7a;
}

.helpList .helpItem form{
  width: 90%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  position: absolute;
  bottom: 15px;
}

.helpList .helpItem form input{
  width: 100%;
  height: 35px;
  padding: 0 10px;
  color: #fff;
  border: 1px solid #d4af7a;
  outline: none;
  border-radius: 1px;
  background: #151515;
}

.helpList .helpItem form label{
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  text-align: left;
  padding-bottom: 5px;
}

.helpList .helpItem form label span{
  color: #FF0000;
  font-size: 20px;
}

.helpList .helpItem form button{
  width: 100%;
  line-height: 30px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  background: #151515;
  border-radius: 2px;
  border: 1px solid #d4af7a;
  box-shadow: 0 0 2px #d4af7a,
              0 0 10px #d4af7a;
  text-align: center;
  cursor: pointer;
  transition: 0.2s;
}

.helpList .helpItem form button:hover{
  color: #151515;
  background: #d4af7a;
}

section#regelwerkPopup{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9000;
  opacity: 0;
  visibility: hidden;
  transition: 0.2s;
}

section#regelwerkPopup.active{
  opacity: 1;
  visibility: visible;
}

section#regelwerkPopup .innerBox{
  width: 50%;
  background: #151515;
  border-radius: 5px;
  padding: 20px;
  padding-top: 0px;
}

section#regelwerkPopup .innerBox .header{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

section#regelwerkPopup .innerBox .header h3{
  color: #fff;
  font-size: 25px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
}

section#regelwerkPopup .innerBox .header span{
  color: #fff;
  font-size: 25px;
  cursor: pointer;
}

section#regelwerkPopup .innerBox .mainBox{
  width: 100%;
  max-height: 500px;
  overflow-y: scroll;
}

section#userContainer{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 100%;
  padding: 100px 0;
}

section#userContainer .row{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
  width: 60%;
  margin-top: 20px;
}

section#userContainer .row .row1{
  width: 25%;
  height: auto;
}

section#userContainer .row .row1 h3{
  font-size: 17px;
  color: #fff;
  font-weight: 800;
  letter-spacing: 0.5px;
}

section#userContainer .row .row1 ul{
  width: 100%;
  height: auto;
  margin-top: 5px;
}

section#userContainer .row .row1 ul li:nth-child(1){
  border-top: none;
}

section#userContainer .row .row1 ul li{
  width: 100%;
  height: auto;
  list-style: none;
  padding: 10px 0;
  border-top: 1px solid #EEEEEE;
  position: relative;
}

section#userContainer .row .row1 ul li a{
  font-size: 15px;
  color: #fff;
  text-decoration: none;
  width: 100%;
}

section#userContainer .row .row1 ul li a i{
  width: 25px;
}

section#userContainer .row .row2{
  width: 70%;
  height: auto;
}

section#userContainer .row .row2 h3.helpTitle{
  color: #fff;
}

section#userContainer .row .row2 h3.center{
  text-align: center;
}

section#userContainer .row .row2 .information{
  margin-top: 20px;
}

section#userContainer .row .row2 .information p{
  width: 400px;
  font-weight: 500;
  font-size: 15px;
  color: #fff;
  letter-spacing: 0.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 6px 0;
}

section#userContainer .row .row2 .information p span{
  font-weight: 700;
}

section#userContainer .row .row2 .information g{
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 10px;
  cursor: pointer;
}

section#warenkorbContainer{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 150px 0 80px 0;
  width: 100%;
  height: auto;
}

section#warenkorbContainer .box1{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  width: 60%;
  height: auto;
}

section#warenkorbContainer .box1 h1{
  color: #151515;
  font-size: 33px;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
}

section#warenkorbContainer .box1 ul{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  margin-top: 20px;
}

section#warenkorbContainer .box1 ul li{
  list-style: none;
  font-size: 14px;
  color: #151515;
  margin: 0px 30px;
}

section#warenkorbContainer .box1 .cartRow{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 40px;
}

section#warenkorbContainer .box1 .cartRow .float-left{
  width: 63%;
  height: auto;
  padding: 0px;
}

section#warenkorbContainer .box1 .cartRow .float-left .checkoutHeadline{
  width: 100%;
  height: auto;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.7);
  letter-spacing: 3px;
  position: relative;
  padding-bottom: 20px;
}

section#warenkorbContainer .box1 .cartRow .float-left .checkoutHeadline::before{
  content: '';
  position: absolute;
  bottom: 15px;
  left: 0px;
  width: 30px;
  height: 2px;
  background: #d4af7a;
}

section#warenkorbContainer .box1 .cartRow .float-left #tableReservationTime{
  width: 100%;
  height: auto;
  font-size: 12px;
  font-weight: 500;
  color: #d4af7a;
  letter-spacing: 1px;
  position: relative;
  padding-bottom: 20px;
}

section#warenkorbContainer .box1 .cartRow .float-left #tableReservationTime g{
  font-weight: 900;
}

#loginMainBox{
  width: 100%;
  height: auto;
  position: relative;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

#loginMainBox .loginField{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

#loginMainBox .loginField h3{
  color: #151515;
  font-size: 20px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  letter-spacing: 5px;
}

#loginMainBox .loginField span{
  color: #151515;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
  padding-bottom: 10px;
}

#loginMainBox .loginField .infoForm{
  color: #151515;
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 20px;
  text-align: left;
  width: 100%;
}

#loginMainBox .loginField .formItem{
  width: 100%;
  height: 70px;
  margin: 10px 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
}

#loginMainBox .loginField .formItem label{
  color: #d4af7a;
  font-size: 12px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
}

#loginMainBox .loginField .formItem input{
  width: 100%;
  height: 45px;
  border: 1px solid #d4af7a;
  border-radius: 1px;
  background: #fff;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
  outline: none;
  margin-top: 10px;
  color: #151515;
  padding: 0px 10px;
  font-size: 15px;
  letter-spacing: 1px;
  border-radius: 0;
}

#loginMainBox .loginField .formItem input.isEmpty{
  border-color: #FF0000;
  animation: shake 0.3s ease-in-out;
}

@keyframes shakeInput {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}

#loginMainBox .loginField .formItem button{
  width: auto;
  min-height: 45px;
  background: #fff;
  border: 1px solid #d4af7a;
  border-radius: 1px;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
  color: #d4af7a;
  padding: 0px 20px;
  font-size: 16px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  letter-spacing: 3px;
}

#loginMainBox .loginField .register{
  color: #151515;
  font-size: 13px;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  margin-top: 10px;
  text-align: left;
  width: 100%;
  cursor: pointer;
}

section#warenkorbContainer .box1 ul.accountList{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 10px;
}

section#warenkorbContainer .box1 ul.accountList li{
  list-style: none;
  margin: 5px 0px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: #151515;
}

section#warenkorbContainer .box1 ul.accountList li.linkBox{
  margin-top: 20px;
}

section#warenkorbContainer .box1 ul.accountList li a{
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: 14px;
  color: #151515;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 2px;
  cursor: pointer;
}

section#warenkorbContainer .box1 ul.accountList li a i{
  width: 30px;
  font-size: 16px;
  color: #151515;
  padding-right: 15px;
}

section#warenkorbContainer .box1 ul.bulledList{
  margin-top: 20px;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

section#warenkorbContainer .box1 ul.bulledList h3{
  color: #151515;
  font-size: 14px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: 800;
  letter-spacing: 2px;
  padding-bottom: 3px;
}

section#warenkorbContainer .box1 ul.bulledList li{
  list-style: none;
  width: 100%;
  height: auto;
  color: #151515;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
  margin: 6px 0;
}

section#warenkorbContainer .box1 ul.bulledList li .addInfo{
  color: #d4af7a;
  font-weight: 800;
}

section#warenkorbContainer .box1 ul.bulledList li i{
  width: 25px;
  font-size: 17px;
  --fa-primary-color: #fff;
  --fa-secondary-color: #d4af7a;
  --fa-secondary-opacity: 0.8;
}

.addressList{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 20px;
}

.addressList .addressItem{
  width: 250px;
  height: auto;
  overflow: hidden;
  background: #fff;
  border: 1px solid #151515;
  padding: 5px;
}

.addressList .addressItem p{
  width: 100%;
  text-align: left;
  color: #151515;
  font-size: 15px;
}

.addressList .addressItem .buttons{
  width: 100%;
  height: 15px;
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.addressList .addressItem .buttons a{
  color: #151515;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 800;
}

.addressForm{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.addressForm h2{
  font-size: 18px;
  font-weight: 700;
  color: #151515;
}

.addressForm input{
  width: 100%;
  height: 35px;
  padding: 0 10px;
  color: #151515;
  border: 1px solid #151515;
  outline: none;
  border-radius: 1px;
  background: #fff;
}

.addressForm label{
  font-size: 15px;
  color: #151515;
  font-weight: 500;
  text-align: left;
  margin-top: 5px;
  padding-bottom: 5px;
}

.addressForm label span{
  color: #FF0000;
  font-size: 20px;
}

.addressForm button{
  width: 100%;
  height: 45px;
  padding: 0 10px;
  color: #fff;
  background: #151515;
  border: 1px solid #151515;
  outline: none;
  border-radius: 1px;
  margin-top: 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: 0.1s;
}

.addressForm button:hover{
  background: #2C2C2C;
  border: 1px solid #2C2C2C;
}

#ticketContentBox{
  width: 40%;
  border-radius: 5px;
  border: 2px solid #d4af7a;
  background: #fff;
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.2);
  padding: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

#ticketContentBox .ticketInfoBox{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#ticketContentBox .ticketInfoBox .ticketInfoHeader{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#ticketContentBox .ticketInfoBox .ticketInfoHeader h3{
  font-family: "Archivo Black", sans-serif;
  font-size: 18px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #151515;
}

#ticketContentBox .ticketInfoBox .ticketInfoHeader p{
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  font-size: 14px;
  color: #151515;
  margin-top: 5px;
}

#ticketContentBox .ticketInfoBox .ticketInformations{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 30px;
}

#ticketContentBox .ticketInfoBox .ticketInformations .textMain1,
#ticketContentBox .ticketInfoBox .ticketInformations .textMain2{
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

#ticketContentBox .ticketInfoBox .ticketInformations .textMain2{
  margin-left: 20px;
}

#ticketContentBox .ticketInfoBox .ticketInformations .row{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 5px;
}

#ticketContentBox .ticketInfoBox .ticketInformations .row p{
  font-size: 10px;
  color: #151515;
  font-weight: 400;
  letter-spacing: 1px;
}

#ticketContentBox .ticketList{
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  max-height: 260px;
  overflow-y: scroll;
}

#ticketContentBox .actionBox{
  width: 100%;
  height: auto;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#ticketContentBox .actionBox .left-align,
#ticketContentBox .actionBox .right-align{
  width: 45%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

#ticketContentBox .actionBox .right-align{
  align-items: flex-end;
}

#ticketContentBox .actionBox img{
  max-width: 60%;
  max-height: 70px;
}

#ticketContentBox .actionBox p{
  margin-top: 15px;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 13px;
  color: #151515;
  padding-bottom: 20px;
}

#ticketContentBox .actionBox .actionBtn{
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1px;
  color: #d4af7a;
  text-transform: uppercase;
  border-radius: 3px;
  border: 1px solid #d4af7a;
  background: #fff;
  transition: 0.2s;
  padding: 7px 20px;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}

#ticketContentBox .actionBox .actionBtn:hover{
  background: #d4af7a;
  color: #fff;
}

#controlTicketView{
  width: 100%;
  height: 100vh;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

#controlTicketView.active{
  display: flex;
  visibility: visible;
}

#controlTicketView .contentBox{
  width: 300px;
  height: auto;
  border-radius: 5px;
  border: 2px solid #d4af7a;
  background: #fff;
  box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.2);
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  text-align: center;
}

#controlTicketView .contentBox .controlTicketLoading{
  font-size: 20px;
  color: rgba(0, 0, 0, 0.5);
  animation: loading 1s infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes loading {
  0%{
    transform: rotateZ(0deg);
  }
  100%{
    transform: rotateZ(360deg);
  }
}

#controlTicketView .contentBox .viewHeader{
  width: 100%;
  height: auto;
  padding: 0 0 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#controlTicketView .contentBox .viewHeader h2{
  font-family: "Archivo Black";
  font-size: 16px;
  color: #151515;
  letter-spacing: 1px;
}

#controlTicketView .contentBox .viewHeader i{
  font-size: 20px;
  color: #151515;
  cursor: pointer;
}

#controlTicketView .contentBox img{
  width: 150px;
  height: auto;
  margin-top: 20px;
}

#controlTicketView .contentBox .eventTitle{
  font-family: "Archivo Black";
  font-size: 18px;
  color: #151515;
  letter-spacing: 1px;
  margin-top: 20px;
}

#controlTicketView .contentBox .eventSubtitle{
  font-family: "Roboto";
  font-weight: 600;
  font-size: 14px;
  color: #151515;
  letter-spacing: 1px;
  margin-top: 5px;
}

#controlTicketView .contentBox .name{
  font-family: "Roboto";
  font-weight: 800;
  font-size: 15px;
  color: #151515;
  letter-spacing: 1px;
  margin-top: 20px;
}

#controlTicketView .contentBox .gebDatum{
  font-family: "Roboto";
  font-weight: 400;
  font-size: 15px;
  color: #151515;
  margin-top: 2px;
}

.seatingPlanAllocation {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  width: 100%;
  margin-top: 15px;
}

.seatingPlanAllocation.scannerSeating {
  gap: 50px;
  width: 100%;
  margin-top: 0;
}

.spCol {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  flex-direction: column !important;
}

.spCol p {
  margin: 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #151515 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: unset !important;
}

.scannerSeating .spCol p {
  margin: 0 !important;
  font-size: 3.5vw !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: unset !important;
}

.spCol span {
  text-wrap: wrap !important;
  margin-top: 2px !important;
  font-size: 13px !important;
  color: #151515 !important;
}

.scannerSeating .spCol span {
  font-size: 3vw !important;
  color: #fff !important;
}

.spCol-left {
  text-align: left !important;
}

.spCol-center {
  text-align: center !important;
  justify-content: flex-start !important;
  align-items: center !important;
  flex-direction: column !important;
}

.spCol-right {
  text-align: right !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  flex-direction: column !important;
}

#controlTicketView .contentBox .categorie{
  font-family: "Roboto";
  font-weight: 800;
  font-size: 15px;
  color: #151515;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 20px;
}

.cartItems .cartItem.eventSelected{
  height: 95px;
  display: grid;
  grid-template-columns: calc(100%/4) calc(100%/4) calc(100%/4) calc(100%/4);
  grid-template-rows: 100%;
  gap: 0.5px;
  grid-template-areas:
        "cross control print share";
  background: #151515;
}

.cartItems .cartItem.eventSelected .eventSelectedGrid.eventSelectedCross{
  grid-area: cross;
  background: #DF0000;
}
.cartItems .cartItem.eventSelected .eventSelectedGrid.eventSelectedControl{
  grid-area: control;
}
.cartItems .cartItem.eventSelected .eventSelectedGrid.eventSelectedPrint{
  grid-area: print;
}
.cartItems .cartItem.eventSelected .eventSelectedGrid.eventSelectedShare{
  grid-area: share;
}

.cartItems .cartItem.eventSelected .eventSelectedGrid{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #F9F9F9;
}

.cartItems .cartItem.eventSelected .eventSelectedGrid i{
  font-size: 20px;
  color: #d4af7a;
  height: 20px;
  text-decoration: none;
}
.cartItems .cartItem.eventSelected .eventSelectedGrid.eventSelectedCross i{
  color: #fff;
}

.cartItems .cartItem.eventSelected .eventSelectedGrid span{
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 9px;
  color: #151515;
  margin-top: 10px;
  text-transform: uppercase;
  text-decoration: none;
}
.cartItems .cartItem.eventSelected .eventSelectedGrid.eventSelectedCross span{
  color: #fff;
}

.cartItems{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

.cartItems .cartItem:nth-child(1){
  margin-top: 0px;
}

.float-left .personalisierenInfo{
  width: 100%;
  height: auto;
  color: #151515;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-top: 50px;
}

.cartItems .cartItem{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 30px;
}

.cartItems .cartItem .imgBox{
  width: 15%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 2px;
}

.cartItems .cartItem .imgBox a{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.cartItems .cartItem .imgBox img{
  width: 100%;
  object-fit: cover;
}

.cartItems .cartItem .imgBox i{
  color: #151515;
  font-size: 40px;
}

.cartItems .cartItem .textBox{
  width: 85%;
  height: 100%;
  padding: 0px 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.cartItems .cartItem .textBox .textHeader{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cartItems .cartItem .textBox .textHeader .titelBox{
  width: 90%;
}

.cartItems .cartItem .textBox .textHeader .titelBox h5{
  color: #151515;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 600;
  padding-bottom: 0px;
}

.cartItems .cartItem .textBox .textHeader .titelBox .preis{
  color: #151515;
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 500;
}

.cartItems .cartItem .textBox .textHeader .titelBox .preis .sale{
  color: #FF0000;
  font-weight: 700;
}

.cartItems .cartItem .textBox .textHeader .titelBox .preis .saleActive{
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 5px;
}

.cartItems .cartItem .textBox .textHeader .deleteItem{
  color: #151515;
  font-size: 15px;
}

.cartItems .cartItem .textBox .textMain{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
}

.cartItems .cartItem .textBox .textMain .textMain1,
.cartItems .cartItem .textBox .textMain .textMain2{
  width: 50%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.cartItems .cartItem .textBox .textMain .textMain2{
  margin-left: 20px;
}

.cartItems .cartItem .textBox .textMain .row{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.cartItems .cartItem .textBox .textMain .row p{
  font-size: 10px;
  color: #151515;
  font-weight: 400;
  letter-spacing: 1px;
  text-align: right;
}

.cartItems .cartItem .textBox .textAction{
  width: 100%;
  height: 33%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 10px;
}

.cartItems .cartItem .textBox .textAction .personalisierenOverflow{
  width: 100%;
  height: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  overflow: hidden;
  transition: 0.2s;
}

.cartItems .cartItem .textBox .textAction.active .personalisierenOverflow{
  width: 100%;
  height: 20px;
  margin-top: 5px;
}

.cartItems .cartItem .textBox .textAction .personalisierenForm{
  width: 100%;
  height: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.cartItems .cartItem .textBox .textAction .personalisierenForm input{
  width: calc(60% / 2);
  height: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: #151515;
  outline: none;
  margin-left: 2px;
  transition: 0.2s;
  border-radius: 0;
}

.cartItems .cartItem .textBox .textAction .personalisierenForm input:focus{
  border-color: #151515;
}

.cartItems .cartItem .textBox .textAction .personalisierenForm input:nth-child(1){
  margin-left: 0px;
}

.cartItems .cartItem .textBox .textAction .personalisierenForm select{
  width: calc(50% / 4);
  height: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  color: #151515;
  outline: none;
  margin-left: 2px;
  transition: 0.2s;
}

.cartItems .cartItem .textBox .textAction .personalisierenForm select:focus{
  border-color: #151515;
}

.cartItems .cartItem .textBox .textAction .personalisierenForm button{
  width: 10%;
  height: 100%;
  background: none;
  border: none;
  color: #d4af7a;
  outline: none;
  cursor: pointer;
}

.cartItems .cartItem .textBox .textAction .personalisieren.onlyText{
  padding: 0 !important;
}

.cartItems .cartItem .textBox .textAction .personalisieren {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cartItems .cartItem .textBox .textAction .personalisieren .left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.cartItems .cartItem .textBox .textAction .personalisieren .rightIcon {
  transition: transform 0.2s ease;
  margin-left: 10px;
}

.cartItems .cartItem .textBox .textAction .personalisieren.notActive {
  background: #fff7ed;
  border: 1px solid #f59e0b;
  color: #d97706;
}

.cartItems .cartItem .textBox .textAction .personalisieren.notActive:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.25);
}

.cartItems .cartItem .textBox .textAction .personalisieren.notActive .fa-circle-exclamation {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.25); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.cartItems .cartItem .textBox .textAction .personalisieren.active {
  background: #f0fdf4;
  border: 1px solid #16a34a;
  color: #15803d;
}

.cartItems .cartItem .textBox .textAction .personalisieren.active:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(22, 163, 74, 0.2);
}

.cartItems .cartItem .textBox .textAction .personalisieren.active:hover .rightIcon {
  transform: rotate(15deg);
}

.cartItems .cartItem .textBox .textAction .favButton{
  font-size: 25px;
  padding: 7px 12px;
  border: 1px solid #151515;
  border-radius: 1px;
  background: none;
  color: #151515;
  transition: 0.1s;
}

.cartItems .cartItem .textBox .textAction .favButton:hover{
  color: #FF0000;
  font-weight: 600;
}

.cartItems .cartItem .textBox .textAction .quantityBox{
  margin-left: 10px;
  height: 45px;
  width: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cartItems .cartItem .textBox .textAction .quantityBox a{
  width: 30%;
  line-height: 45px;
  color: #151515;
  font-size: 20px;
  text-align: center;
}

.cartItems .cartItem .textBox .textAction .quantityBox span{
  width: 40%;
  line-height: 45px;
  color: #151515;
  font-size: 20px;
  text-align: center;
}

section#warenkorbContainer .box1 .cartRow .float-left h3.headTitel{
  color: #151515;
  font-size: 20px;
  letter-spacing: 2px;
  font-weight: 800;
  text-transform: uppercase;
  font-family: "Archivo Black", "Roboto", sans-serif;
  padding-bottom: 15px;
}

section#warenkorbContainer .box1 .cartRow .float-left p.headLoginTitel{
  font-size: 13px;
  color: #151515;
  font-weight: 400;
  letter-spacing: 1px;
}

section#warenkorbContainer .box1 .cartRow .float-left .login{
  font-size: 13px;
  color: #151515;
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 15px;
  cursor: pointer;
}

section#warenkorbContainer .box1 .cartRow .float-left .addressInput{
  width: 100%;
  height: auto;
}

section#warenkorbContainer .box1 .cartRow .float-left .addressInput p:nth-child(1){
  margin-top: 0px;
}

section#warenkorbContainer .box1 .cartRow .float-left .addressInput p{
  margin-top: 20px;
}

section#warenkorbContainer .box1 .cartRow .float-left .addressInput a.changeBtn{
  font-size: 15px;
  color: #151515;
  font-weight: 500;
  letter-spacing: 1px;
  margin-top: 25px;
  cursor: pointer;
}

section#warenkorbContainer .box1 .cartRow .float-left .anmeldeBox{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

section#warenkorbContainer .box1 .cartRow .float-left .anmeldeBox .anmeldeBtn{
  width: 100%;
  line-height: 40px;
  text-align: center;
  color: #151515;
  border: 1px solid #151515;
  cursor: pointer;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 1px;
  font-weight: 700;
  margin: 10px 0;
}

section#warenkorbContainer .box1 .cartRow .float-right{
  width: 35%;
  height: auto;
  padding: 20px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  border: 1px solid #d4af7a;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}

section#warenkorbContainer .box1 .cartRow .float-right .rabatt{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabatt p{
  font-size: 14px;
  color: #151515;
  font-weight: 500;
  letter-spacing: 1px;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabatt .einlösen{
  cursor: pointer;
  color: #151515;
  font-size: 12px;
  font-weight: 300;
  letter-spacing: 1px;
  text-transform: uppercase;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattInput{
  width: 100%;
  height: 0px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  position: relative;
  margin-top: 5px;
  overflow: hidden;
  transition: 0.2s;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattInput.active{
  width: 100%;
  height: 35px;
}

#rabattArrow{
  transition: 0.2s;
}
#rabattArrow.active{
  transform: rotateZ(180deg);
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattInput .content{
  width: 100%;
  height: 35px;
  position: relative;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattInput .content input{
  width: 100%;
  height: 100%;
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  background: #fff;
  outline: none;
  color: #151515;
  font-size: 14px;
  font-weight: 400;
  padding: 0px 25px 0px 0px;
  border-radius: 0;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattInput .content input::placeholder{
  font-size: 11px;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattInput .content button{
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  background: none;
  outline: none;
  border: none;
  font-size: 14px;
  color: #151515;
  cursor: pointer;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattCode{
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 15px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding-top: 15px;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattCode .textBox{
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattCode .textBox p{
  font-size: 16px;
  color: #151515;
  font-weight: 600;
  letter-spacing: 2px;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattCode .textBox span{
  font-size: 12.5px;
  color: #151515;
  font-weight: 500;
  margin-top: 4px;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattCode .closeBox{
  width: 20%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

section#warenkorbContainer .box1 .cartRow .float-right .rabattCode .closeBox a{
  font-size: 18px;
  color: #151515;
  font-weight: 500;
}

section#warenkorbContainer .box1 .cartRow .float-right .loginCart{
  width: 100%;
  height: auto;
  margin-top: 20px;
  position: relative;
}

section#warenkorbContainer .box1 .cartRow .float-right .loginCart p{
  font-size: 13px;
  color: #151515;
  font-weight: 400;
  letter-spacing: 1px;
  width: 100%;
}

section#warenkorbContainer .box1 .cartRow .float-right .loginCart a{
  width: 100%;
  color: #151515;
  background: #fff;
  border: 1px solid #151515;
  border-radius: 1px;
  margin-top: 15px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  line-height: 45px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox{
  width: 100%;
  height: auto;
  margin-top: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  padding-top: 15px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .summe.gesamt{
  border-top: 1px solid #151515;
  padding-top: 20px;
  margin-top: 15px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .summe{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .summe p{
  font-size: 15px;
  color: #151515;
  font-weight: 700;
  letter-spacing: 1px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .summe.versand p{
  font-size: 13px;
  font-weight: 500;
  padding-bottom: 10px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .btn{
  width: 100%;
  color: #151515;
  background: none;
  border: 2px solid #d4af7a;
  border-radius: 1px;
  margin-top: 40px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  line-height: 40px;
  text-align: center;
  transition: 0.2s;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .btn:hover{
  color: #d4af7a;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .btn.notActive{
  color: #151515;
  border: 1px solid #151515;
  opacity: 0.3;
  pointer-events: none;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box{
  position: relative;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #d4af7a;
	border-radius: 2px;
	background: none;
	cursor: pointer;
	line-height: 0;
	margin: 0 .6em 0 0;
	outline: 0;
	padding: 0 !important;
	vertical-align: text-top;
	height: 15px;
	width: 15px;
	-webkit-appearance: none;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box input[type=checkbox]:checked {
  background-color: none;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box input[type=checkbox]:checked:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 3px;
  height: 8px;
  border: solid #d4af7a;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box .labelCheckbox {
  position: absolute;
  top: -10px;
  left: 30px;
  padding: 10px 0;
  color: #d4af7a;
  font-size: 14px;
  transition: .5s;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box .labelCheckbox a{
  color: #d4af7a;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 30px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem{
  width: 100%;
  height: 38px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 20px 0;
  cursor: pointer;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem.notActive{
  pointer-events: none;
  opacity: 0.4;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem input{
  width: auto;
  height: 38px;
  position: absolute;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  z-index: 100;
  opacity: 0;
  border-radius: 0;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem label{
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  color: #151515;
  width: 100%;
  line-height: 38px;
  border: 1px solid rgba(0, 0, 0, 0.5);
  text-align: left;
  padding: 0 20px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem label i{
  width: 20px;
  padding-right: 20px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem input:checked + .paymentLabel{
  border-color: #d4af7a;
  box-shadow: 0px 0px 5px rgba(212, 175, 122, 0.4);
  color: #d4af7a;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentButtons{
  width: 100%;
  height: 70px;
  position: relative;
  margin-top: 20px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .btn-paypal{
  visibility: hidden;
  opacity: 0;
  transition: 0s;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .btn-paypal.show{
  visibility: visible;
  opacity: 1;
}
section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox #paypal-button-container{
  pointer-events: all;
  opacity: 1;
  transition: 0s;
  z-index: 99;
  position: absolute;
  top: 0;
  left: 0;
}
section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox #paypal-button-container.notActive{
  pointer-events: none;
  opacity: 0.4;
}
section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox #payButton{
  visibility: visible;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: 0px;
  background: #151515;
  color: #fff;
  z-index: 100;
  border: none;
}
section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox #payButton.notActive{
  opacity: 0.4;
}
section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox #payButton.hidden{
  visibility: hidden;
  opacity: 0;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .personalisierenHinweis{
  color: #151515;
  font-weight: 500;
  font-size: 10px;
  width: 100%;
  text-align: left;
  margin-top: 7px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .personalisierenHinweis i{
  color: #d4af7a;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout{
  margin-top: 20px;
  width: 100%;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout p,
section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .checkoutInfoText{
  font-size: 10px;
  color: #151515;
  font-weight: 500;
  letter-spacing: 1px;
  text-align: center;
  width: 100%;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout a{
  text-transform: uppercase;
  font-weight: 800;
  color: #d4af7a;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout ul{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  margin-top: 15px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout ul li{
  list-style: none;
  font-size: 13px;
  color: #151515;
  font-weight: 600;
  margin: 0px 10px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout ul li i{
  font-size: 24px;
  margin-top: -5px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form{
  width: 100%;
  height: auto;
  margin-top: 20px;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .formPaymentItem{
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .formPaymentItem input{
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: none;
  border: 1px solid #151515;
  color: #151515;
  appearance: none;
  -webkit-apperance: none;
  outline: none;
  border-radius: 0;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .formPaymentItem input:checked{
  color: #151515;
  background: #004724;
}

section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .formPaymentItem label{
  font-size: 13px;
  color: #151515;
  font-weight: 500;
  letter-spacing: 1px;
  margin-left: 15px;
}

body#loginBody{
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

body#loginBody img.eventmasterXBackgroundImg{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.eventmasterXLogo{
  text-decoration: none;
  position: absolute;
  top: 20px;
  left: 30px;
  z-index: 9999;
}

.eventmasterXLogo img{
  max-width: 200px;
  max-height: 80px;
}

#overflowLogin{
  width: 45%;
  min-width: 650px;
  height: 100vh;
  position: absolute;
  top: 0;
  right: 0;
  box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.8);
  background: #fff;
  padding: 20px 50px;
}

#overflowLogin .innerBox{
  position: relative;
  height: 100%;
  overflow-y: scroll;
  padding: 0 10px;
  padding-top: 50px;
}

#overflowLogin .innerBox .backBtn{
  position: absolute;
  top: 10px;
  left: 0;
  font-size: 18px;
  color: #151515;
  text-decoration: none;
  cursor: pointer;
  animation: backBtnOpacityAnimation 1.5s forwards;
}

#overflowLogin .innerBox .backBtn g{
  margin-left: 15px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  font-size: 14px;
  letter-spacing: 1px;
}

#overflowLogin .innerBox h1.loginHeadline{
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-size: 30px;
  color: #151515;
  letter-spacing: 2px;
  line-height: 38px;
  animation: fadeInAnimation 0.5s forwards;
}

#overflowLogin .innerBox p.loginText{
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 15px;
  letter-spacing: 1px;
  animation: fadeInAnimation 0.5s forwards;
  opacity: 0;
  animation-delay: 0.1s;
}

#overflowLogin .innerBox .toggleButtons{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 25px;
  animation: fadeInAnimation 0.5s forwards;
  opacity: 0;
  animation-delay: 0.2s;
}

#overflowLogin .innerBox .toggleButtons .toggleItem{
  width: 50%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer
}

#overflowLogin .innerBox .toggleButtons .toggleItem h3{
  width: 100%;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 15px;
  text-transform: uppercase;
  color: #151515;
  text-align: center;
  padding-bottom: 3px;
  text-decoration: none;
}

#overflowLogin .innerBox .toggleButtons .toggleItem span{
  width: 0%;
  height: 2px;
  position: absolute;
  bottom: -2px;
  background: #d4af7a;
  transition: 0.2s;
}

#overflowLogin .innerBox .toggleButtons .toggleItem.active span{
  width: 100%;
}

#overflowLogin .innerBox .toggleButtons .toggleItem#equipmentBtn span{
  right: 0px;
}

#overflowLogin .innerBox .toggleButtons .toggleItem#personalBtn span{
  left: 0px;
}

#overflowLogin .innerBox .formSwitch{
  width: 100%;
  max-height: 500px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  overflow-y: visible;
  padding-bottom: 80px;
}

#overflowLogin .innerBox .formSwitch .switch{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

#overflowLogin .innerBox .formSwitch .switchToggle{
  width: 200%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement{
  width: 50%;
  max-height: 200px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  transition: 0.2s;
  overflow-y: scroll;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement#equipment.switchActive{
  margin-left: -50%;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem:nth-child(1){
  border-top: none;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem{
  width: 100%;
  min-height: 50px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox{
  width: 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox .checkboxInput {
  display: none;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox .checkboxInput + label.checkboxLabel {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #d4af7a;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox .checkboxInput + label.checkboxLabel::after {
  content: '';
  position: absolute;
  top: 40%;
  left: 50%;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
  opacity: 0;
  /* transition: opacity 0.2s ease-in-out; */
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox .checkboxInput:checked + label.checkboxLabel {
  background-color: #d4af7a;
  border-color: #d4af7a;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox .checkboxInput:checked + label.checkboxLabel::after {
  opacity: 1;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem p{
  width: 75%;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #151515;
  font-size: 17px;
  letter-spacing: 1px;
  margin-top: 0px;
  padding-top: 0px;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .numberInput{
  width: 10%;
  border: none;
  border-bottom: 1px solid #151515;
  font-family: "Roboto", sans-serif;
  background: none;
  outline: none;
  color: #151515;
  font-size: 12px;
  padding: 5px 0;
  visibility: hidden;
  opacity: 0;
  border-radius: 0;
}

#overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .numberInput.active{
  visibility: visible;
  opacity: 1;
}

#overflowLogin .innerBox .formSwitch .btnItem{
  z-index: 7000;
  transition: 0.2s;
}

#overflowLogin .innerBox ul.helpList{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 50px;
  animation: fadeInAnimation 0.5s forwards;
  opacity: 0;
  animation-delay: 0.2s;
}

#overflowLogin .innerBox ul.helpList li:nth-child(1){
  margin-top: 0px;
}

#overflowLogin .innerBox ul.helpList li{
  font-family: "Roboto", sans-serif;
  font-size: 16px;
  color: #151515;
  margin-top: 10px;
  letter-spacing: 1px;
  list-style: none;
}

#overflowLogin .innerBox ul.helpList li a{
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 15px;
  color: #151515;
  letter-spacing: 2px;
  margin-left: 15px;
  text-decoration: none;
}

#overflowLogin .innerBox .eventItemBox{
  opacity: 0;
  animation: fadeInAnimation 0.5s forwards;
}

#overflowLogin .innerBox form{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 40px;
  opacity: 0;
  animation: fadeInAnimation 0.5s forwards;
  animation-delay: 0.2s;
}

#overflowLogin .innerBox .loginInfoText{
  font-size: 11px;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  margin-top: 10px;
  letter-spacing: 1px;
}

#overflowLogin .innerBox .loginInfoText i{
  color: #d4af7a;
  padding-right: 5px;
}

#overflowLogin .innerBox form .inputItem:nth-child(1){
  margin-top: 0px;
}

#overflowLogin .innerBox form .inputHeadline{
  width: 100%;
  text-align: left;
  color: #151515;
  font-family: "Roboto Bold", sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  margin-top: 35px;
  letter-spacing: 2px;
}

#overflowLogin .innerBox form .inputRow{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: row;
  position: relative;
  margin-top: 30px;
}

#overflowLogin .innerBox form .inputRow .inputItem{
  width: 45%;
  margin-top: 0px;
}

#overflowLogin .innerBox form .inputItem{
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 30px;
  position: relative;
}

#overflowLogin .innerBox form .inputItem.emailCheck i{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: #d4af7a;
  font-size: 18px;
}

#overflowLogin .innerBox form .inputItem.emailCheck input{
  border-bottom-color: #d4af7a;
  padding-right: 30px;
}

#overflowLogin .innerBox form .inputItem input{
  width: 100%;
  height: 100%;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  padding: 0px;
  color: #151515;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  outline: none;
  background: none;
  letter-spacing: 1px;
  border-radius: 0;
}

#overflowLogin .innerBox form .inputItem input:focus,
#overflowLogin .innerBox form .inputItem input:valid{
  border-color: #d4af7a;
}

#overflowLogin .innerBox form .inputItem input.onlyReadInput{
  opacity: 0.5;
  border-color: #d4af7a;
}

.formCheckboxItem{
  width: 100%;
  height: auto;
  position: relative;
  margin-top: 15px;
}

.formCheckboxItem.paymentCheckbox{
  text-transform: uppercase;
  font-weight: 700;
  font-size: 11px;
}

.formCheckboxItem:nth-child(1){
  margin-top: 0;
}

.formCheckboxItem input[type=checkbox],
.formCheckboxItem input[type=radio] {
  position: absolute;
  top: 0;
  left: 0;
  border: 1px solid #d4af7a;
	border-radius: 2px;
	background: none;
	cursor: pointer;
	line-height: 0;
	margin: 0 .6em 0 0;
	outline: 0;
	padding: 0 !important;
	vertical-align: text-top;
	height: 15px;
	width: 15px;
	-webkit-appearance: none;
}

.formCheckboxItem input[type=checkbox]:checked,
.formCheckboxItem input[type=radio]:checked {
  background-color: none;
}

.formCheckboxItem input[type=checkbox]:checked:before,
.formCheckboxItem input[type=radio]:checked:before {
  content: '';
  position: absolute;
  right: 50%;
  top: 50%;
  width: 3px;
  height: 8px;
  border: solid #d4af7a;
  border-width: 0 2px 2px 0;
  margin: -1px -1px 0 -1px;
  transform: rotate(45deg) translate(-50%, -50%);
  z-index: 2;
}

.formCheckboxItem .labelCheckbox {
  position: relative;
  margin-left: 25px;
  color: #151515;
  font-size: 14px;
  transition: .5s;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  letter-spacing: 1px;
}

.formCheckboxItem .labelCheckbox a{
  color: #ffd100;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

#overflowLogin .innerBox form .textareaItem{
  width: 100%;
  height: 90px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 30px;
  position: relative;
}

#overflowLogin .innerBox form .textareaItem label{
  color: rgba(0, 0, 0, 0.3);
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
}

#overflowLogin .innerBox form .textareaItem textarea{
  max-width: 100%;
  min-width: 100%;
  min-height: 100%;
  max-height: 100%;
  color: #151515;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  outline: none;
  background: none;
  letter-spacing: 1px;
  border: none;
  border-bottom: 2px solid rgba(0, 0, 0, 0.3);
  padding-top: 22px;
}

#overflowLogin .innerBox form .tempAccessForm{
  width: 100%;
  height: 60px;
  display: grid;
  grid-template-columns: repeat(8, 50px);
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
}

#overflowLogin .innerBox form .tempAccessForm .tempAccessFormInput{
  width: 100%;
  height: 100%;
  border: 2px solid #d4af7a;
  outline: none;
  background: none;
  border-radius: 5px;
  text-align: center;
  font-size: 30px;
  font-family: "Archivo Black", "Roboto", sans-serif;
  text-transform: uppercase;
}

#overflowLogin .innerBox form .tempAccessForm.failed .tempAccessFormInput{
  border-color: #FF0000;
}
#overflowLogin .innerBox form .tempAccessForm.success .tempAccessFormInput{
  border-color: #00CC00;
}

#overflowLogin .innerBox form .btnItem{
  width: 100%;
  height: 35px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 40px;
}

#overflowLogin .innerBox form .btnItem button:nth-child(1),
#overflowLogin .btn:nth-child(1){
  margin-left: 0;
}

#overflowLogin .innerBox form .btnItem button,
#overflowLogin .btn{
  width: auto;
  height: 100%;
  padding: 0px 30px;
  background: #d4af7a;
  border-radius: 5px;
  color: #fff;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-size: 14px;
  letter-spacing: 4px;
  text-transform: uppercase;
  outline: none;
  border: none;
  cursor: pointer;
  margin-left: 10px;
}

#overflowLogin .innerBox .footerLinks{
  width: 100%;
  height: 90px;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0;
  animation: fadeInAnimation 0.5s forwards;
  animation-delay: 0.3s;
}

#overflowLogin .innerBox .footerLinks ul{
  width: 100%;
  height: auto;
}

#overflowLogin .innerBox .footerLinks ul li{
  width: 100%;
  height: auto;
  margin-top: 10px;
  list-style: none;
}

#overflowLogin .innerBox .footerLinks ul li:nth-child(1){
  margin-top: 0;
}

#overflowLogin .innerBox .footerLinks ul li a{
  color: #151515;
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  text-decoration: none;
}

@keyframes fadeInAnimation {
  0%{
    margin-left: 50px;
    opacity: 0;
  }
  100%{
    margin-left: 0px;
    opacity: 1;
  }
}

@keyframes backBtnOpacityAnimation {
  0%{
    left: 50px;
    opacity: 0;
  }
  50%{
    left: 50px;
    opacity: 0;
  }
  100%{
    left: 10px;
    opacity: 1;
  }
}

#overflowLogin .innerBox .accessCodeInfoText{
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  margin-top: 40px;
  letter-spacing: 1px;
  animation: fadeInAnimation 0.5s forwards;
  animation-delay: 0.4s;
  opacity: 0;
}

#overflowLogin .innerBox .contactLocation{
  width: 100%;
  height: auto;
  margin-top: 30px;
  display: flex;
  justify-items: flex-start;
  align-items: flex-start;
  flex-direction: column;
  opacity: 0;
  animation: fadeInAnimation 0.5s forwards;
  animation-delay: 0.2s;
}

#overflowLogin .innerBox .contactLocation a{
  font-family: "Archivo Black", "Roboto", Helvetica, sans-serif;
  font-weight: bold;
  font-size: 17px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #151515;
}

#overflowLogin .innerBox .contactLocation p{
  font-family: "Roboto", Helvetica, sans-serif;
  font-size: 17px;
  letter-spacing: 1px;
  color: #151515;
  margin-top: 30px;
}
#overflowLogin .innerBox .contactLocation p b{
  font-family: "Archivo Black", "Roboto", Helvetica, sans-serif;
  font-weight: bold;
}

#overflowLogin .innerBox .paymentBox{
  margin-top: 0px;
}

#overflowLogin .innerBox .paymentBox h3{
  font-family: "Roboto";
  font-weight: bold;
  font-size: 16px;
  letter-spacing: 1px;
}

#overflowLogin .innerBox .paymentBox h3 g{
  font-size: 12px;
}

#overflowLogin .innerBox .paymentBox p{
  color: #000;
}

#overflowLogin .innerBox .paymentBox ul{
  margin-left: 20px;
}

#overflowLogin .innerBox .paymentBox ul li{
  margin: 5px 0;
}

#overflowLogin .innerBox .paymentBox ul li i{
  padding-right: 15px;
}

#overflowLogin .poweredBy{
  position: fixed;
  bottom: 20px;
  right: 20px;
  color: #151515;
  font-size: 12px;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

#overflowLogin .poweredBy img{
  height: 11px;
  width: auto;
  margin-left: 5px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .tableReservationHeadline{
  width: 100%;
  height: 35px;
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .tableReservationHeadline h3{
  width: 90%;
  text-align: left;
  height: auto;
  font-size: 15px;
  color: #d4af7a;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .tableReservationHeadline .arrowItem{
  width: 10%;
  text-align: right;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .tableReservationHeadline .arrowItem i{
  font-size: 15px;
  color: #151515;
  transform: rotateZ(180deg);
  transition: 0.2s;
}

section#eventBuyBox .eventBlackscreen .eventBox .textBox .tableReservationHeadline.open .arrowItem i{
  transform: rotateZ(0);
}

.eventTableBooking{
  width: 100%;
  max-height: 2px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 10px;
  overflow: hidden;
  transition: 0.2s;
  border-bottom: 2px solid #d4af7a;
}

.eventTableBooking.viewReservationContent{
  max-height: 100vh;
  padding-bottom: 20px;
}

.eventTableBooking .floorSelection{
  width: 20%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.eventTableBooking .floorSelection ul{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}

.eventTableBooking .floorSelection ul li:nth-child(1){
  margin-top: 0;
}

.eventTableBooking .floorSelection ul li{
  width: 100%;
  list-style: none;
  color: #151515;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  cursor: pointer;
  margin-top: 10px;
}

.eventTableBooking .floorSelection ul li.active{
  font-weight: 900;
  color: #d4af7a;
}

.eventTableBooking .floorSelection ul li i{
  padding-right: 10px;
  font-weight: 900;
  display: none;
}

.eventTableBooking .floorSelection ul li.active i{
  display: block;
}

.eventTableBooking .tableArrangement{
  width: 80%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

.eventTableBooking .tableArrangement svg{
  max-width: 60%;
  max-height: 200px;
}

.eventTableBooking .tableArrangement svg .tableItem{
  cursor: pointer;
}

.eventTableBooking .tableArrangement svg path{
  pointer-events: none;
}

.eventTableBooking .tableArrangement svg .selectedTable{
  fill: #d4af7a !important;
}

.eventTableBooking .tableArrangement svg .alreadyBookedTable{
  fill: rgba(0, 0, 0, 0.6)
}

.eventTableBooking .tableArrangement .tableInformation{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 50px;
}

.eventTableBooking .tableArrangement .tableInformation .tableInformationHeadline{
  color: #151515;
  font-family: "Archivo Black", sans-serif;
  position: relative;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.eventTableBooking .tableArrangement .tableInformation .tableInformationHeadline .headlineUnderline{
  width: 70px;
  position: absolute;
  bottom: -3px;
  left: 0;
  background: #d4af7a;
  height: 2px;
}

.eventTableBooking .tableArrangement .tableInformation .tableTitle{
  color: #151515;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  margin-top: 15px;
}

.eventTableBooking .tableArrangement .tableInformation .tableTitleInformation{
  color: #151515;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 12px;
  margin-top: 5px;
  letter-spacing: 1px;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  margin-top: 15px;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tableFormItem{
  width: 100%;
  height: 25px;
  display: flex;
  justify-items: flex-start;
  align-items: center;
  margin-top: 10px;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tableFormItem label{
  width: 180px;
  height: auto;
  color: #151515;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tableFormItem select{
  width: calc(100% - 180px);
  height: 100%;
  border: none;
  border-bottom: 2px solid #d4af7a;
  outline: none;
  background: none;
  text-transform: uppercase;
  font-size: 12px;
  color: #151515;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tableAddOnHeadline{
  color: #151515;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  font-size: 15px;
  text-transform: uppercase;
  margin-top: 25px;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tableAddOnIncluded{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tableAddOnIncluded li{
  font-family: "Roboto", sans-serif;
  width: 100%;
  list-style: none;
  color: #151515;
  font-size: 14px;
  letter-spacing: 1px;
  margin-top: 7px;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tableAddOnIncluded li i{
  width: 20px;
  color: #d4af7a;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tablePriceSection{
  width: 100%;
  margin-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  padding-top: 20px;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tablePriceSection p{
  color: #151515;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 1px;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tablePriceSection p g.priceInfo{
  font-size: 11px;
  text-transform: uppercase;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm button{
  width: 100%;
  line-height: 35px;
  outline: none;
  background: none;
  border: 1px solid #d4af7a;
  color: #d4af7a;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  cursor: pointer;
  letter-spacing: 2px;
  transition: 0.2s;
  margin-top: 20px;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm button i{
  padding-right: 10px;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm button:hover{
  color: #151515;
  border-color: #d4af7a;
  background: #d4af7a;
  box-shadow: 0px 0px 20px rgba(212, 175, 122, 0.4);
}

.eventTableBooking .tableArrangement .tableInformation .tableForm button.notActive{
  pointer-events: none;
  opacity: 0.5;
}

.eventTableBooking .tableArrangement .tableInformation .tableForm .tableNotify{
  color: #151515;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 10px;
  width: 100%;
  text-align: center;
  margin-top: 20px;
}

#acmLogin{
  width: 100%;
  height: 100vh;
  height: 100dvh;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  background: url(https://eventmasterx.com/img/eventmasterX_background.jpg);
  background-position: center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
}

#acmLogin .logoBackdrop{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background: linear-gradient(350deg, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0.6) 100%);
}

#acmLogin #appBackground{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  background: rgba(0, 0, 0, 0.4);
  padding: 0 20px;
}

#acmLogin #appBackground .appLogo{
  width: 150px;
  margin-top: 60px;
}

#acmLogin #appBackground #acmContentBox{
  background: none;
  border: none;
  box-shadow: none;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 20px;
}

#acmLogin #appBackground #acmContentBox h1{
  color: #fff;
  font-size: 20px;
  letter-spacing: 1px;
}

#acmLogin #appBackground #acmContentBox form{
  width: 100%;
  margin-top: 50px;
}

#acmLogin #appBackground #acmContentBox form .acmShortedNameForm{
  width: 100%;
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#acmLogin #appBackground #acmContentBox form .acmShortedNameForm .acmShortedNameInput{
  width: 100%;
  height: 100%;
  border: none;
  border-bottom: 2px solid #d4af7a;
  outline: none;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 0px;
  text-align: left;
  font-size: 18px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  padding: 0px 10px;
  letter-spacing: 1px;
}

#acmLogin #appBackground #acmContentBox form .acmShortedNameForm .acmShortedNameInput::placeholder{
  color: rgba(255, 255, 255, 0.7);
}

#acmLogin #appBackground #acmContentBox form .acmCodeForm{
  width: 100%;
  height: 60px;
  display: grid;
  grid-template-columns: repeat(8, calc((100% - 5px * 7) / 8));
  gap: 5px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 30px;
  opacity: 0.5;
  pointer-events: none;
}

#acmLogin #appBackground #acmContentBox form .acmCodeForm.active{
  opacity: 1;
  pointer-events: all;
}

#acmLogin #appBackground #acmContentBox form .acmCodeForm .acmCodeFormInput{
  width: 100%;
  height: 100%;
  border: 2px solid #d4af7a;
  outline: none;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  text-align: center;
  font-size: 30px;
  font-family: "Archivo Black", "Roboto", sans-serif;
  text-transform: uppercase;
}

#acmLogin #appBackground #acmContentBox .acmCodeInfoText{
  font-size: 13px;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  margin-top: 30px;
  letter-spacing: 1px;
  color: #fff;
}

#acmLogin #appBackground #scanIcon{
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
}

#acmLogin #acmContentBox{
  width: 550px;
  height: auto;
  padding: 50px 20px;
  background: #fff;
  border: 2px solid #d4af7a;
  box-shadow: 0px 0px 35px rgba(0, 0, 0, 0.6);
  z-index: 2000;
  border-radius: 5px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

#acmLogin #acmContentBox h1{
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-size: 23px;
  color: #151515;
  letter-spacing: 1px;
  text-align: center;
}

#acmLogin #acmContentBox p{
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: rgba(0, 0, 0, 0.6);
  margin-top: 5px;
  letter-spacing: 1px;
}

#acmLogin #acmContentBox form .acmDateForm{
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}

#acmLogin #acmContentBox form .acmDateForm .acmBirthdayInput{
  width: 100%;
  height: 100%;
  border: none;
  border-bottom: 2px solid #d4af7a;
  outline: none;
  background: none;
  border-radius: 0px;
  text-align: center;
  font-size: 23px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
}

#acmLogin #acmContentBox form .acmCodeForm{
  width: 100%;
  height: 60px;
  display: grid;
  grid-template-columns: repeat(8, 50px);
  gap: 10px;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 40px;
  opacity: 0.5;
  pointer-events: none;
}

#acmLogin #acmContentBox form .acmCodeForm.active{
  opacity: 1;
  pointer-events: all;
}

#acmLogin #acmContentBox form .acmCodeForm .acmCodeFormInput{
  width: 100%;
  height: 100%;
  border: 2px solid #d4af7a;
  outline: none;
  background: none;
  border-radius: 5px;
  text-align: center;
  font-size: 30px;
  font-family: "Archivo Black", "Roboto", sans-serif;
  text-transform: uppercase;
}

#acmLogin #acmContentBox form .acmCodeForm.failed .acmCodeFormInput{
  border-color: #FF0000 !important;
}
#acmLogin #acmContentBox form .acmCodeForm.success .acmCodeFormInput{
  border-color: #00CC00 !important;
}

#acmLogin #acmContentBox .acmCodeInfoText{
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  margin-top: 20px;
  letter-spacing: 1px;
}

#acmLogin.appVersion #appLoginPopup{
  position: absolute;
  bottom: -5px;
  width: 510px;
  height: 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  overflow: hidden;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.2);
  border-top: 2px solid #d4af7a;
  background: #151515;
  transition: bottom 0.2s ease-in-out, opacity 0.2s ease-in-out, height 0.2s ease-in-out;
  z-index: 9000;
  pointer-events: none;
}

#acmLogin.appVersion #appLoginPopup.active{
  bottom: 0;
  height: 50vh;
  pointer-events: all;
}

#acmLogin.appVersion #acmContentBox form .acmCodeForm .acmCodeFormInput{
  color: #fff;
}

#acmLogin.appVersion #appLoginPopup .innerBox{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding: 0px 20px;
}

#acmLogin.appVersion #appLoginPopup .innerBox h3.popupHeadline{
  color: #fff;
  font-size: 22px;
  text-transform: uppercase;
  margin-top: 20px;
  letter-spacing: 2px;
}
#acmLogin.appVersion #appLoginPopup .innerBox p.popupUnderline{
  color: #fff;
  font-size: 12px;
  margin-top: 5px;
  letter-spacing: 1px;
}

#acmLogin.appVersion #appLoginPopup .innerBox .anmeldung{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

#acmLogin.appVersion #appLoginPopup .innerBox .anmeldung .qr-code-scan{
  width: 15vw;
  height: 15vw;
  max-width: 200px;
  max-height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  margin-top: 30px;
  overflow: hidden;
}

#acmLogin.appVersion #appLoginPopup .innerBox .anmeldung .qr-code-scan .corner {
  position: absolute;
  width: 20px;
  height: 20px;
}

#acmLogin.appVersion #appLoginPopup .innerBox .anmeldung .qr-code-scan .top-left {
  top: 0;
  left: 0;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
}

#acmLogin.appVersion #appLoginPopup .innerBox .anmeldung .qr-code-scan .top-right {
  top: 0;
  right: 0;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}

#acmLogin.appVersion #appLoginPopup .innerBox .anmeldung .qr-code-scan .bottom-left {
  bottom: 0;
  left: 0;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
}

#acmLogin.appVersion #appLoginPopup .innerBox .anmeldung .qr-code-scan .bottom-right {
  bottom: 0;
  right: 0;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
}

#acmLogin.appVersion #appLoginPopup .innerBox .anmeldung .buttons{
  width: 250px;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

#acmLogin.appVersion #appLoginPopup .innerBox .anmeldung .buttons .actionBtn{
  width: 100%;
  line-height: 35px;
  text-align: center;
  border: none;
  outline: none;
  background: #d4af7a;
  border-radius: 5px;
  color: #fff;
  text-transform: uppercase;
  font-size: 18px;
  margin-top: 30px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
}

#acmPanel{
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  overscroll-behavior: none;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
  background: #fff;
  touch-action: none;
}

#acmPanel .scrollable{
  touch-action: pan-y; 
}

#acmPanel #acmLockScreen{
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: #151511;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999;
}

#acmPanel #acmLockScreen.lock{
  display: flex;
}

#acmPanel #acmLockScreen img{
  width: 250px;
}

#acmPanel #acmLockScreen h1{
  margin-top: 50px;
  text-align: center;
  font-size: 30px;
  color: #fff;
  font-family: "Archivo Black", sans-serif;
}

#acmPanel #acmAdminOverlay{
  width: 100%;
  height: 100vh;
  position: fixed;
  top: -100vh;
  left: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  z-index: 9999;
  transition: 0.3s ease-out;
}

#acmPanel #acmAdminOverlay.active{
  top: 0;
}

#acmPanel #acmAdminOverlay .overlayContentBox{
  width: 60%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  padding: 10vh 0;
  background: #fff;
  position: relative;
  z-index: 9990;
}

#acmPanel #acmAdminOverlay .overlayBtn{
  position: absolute;
  bottom: -20px;
  background: #fff;
  width: 70px;
  line-height: 20px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  color: rgba(0, 0, 0, 0.6);
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
  z-index: 9980;
  text-align: center;
}

#acmPanel #acmAdminOverlay .overlayBtn i{
  transition: 0.3s;
}

#acmPanel #acmAdminOverlay.active .overlayBtn i{
  transform: rotateZ(180deg);
}

#acmPanel header{
  width: 100%;
  height: 50px;
  border-bottom: 1px solid #d4af7a;
  z-index: 8000;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 0px 100px;
  position: fixed;
  background: #fff;
}

#acmPanel header .innerBox{
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

#acmPanel header .innerBox .headline{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 100%;
}

#acmPanel header .innerBox .headline img{
  height: 70%;
}

#acmPanel header .innerBox .headline h1{
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 22px;
  letter-spacing: 4px;
  color: #d4af7a;
  text-transform: uppercase;
  margin-left: 20px;
}

#acmPanel header .innerBox .acmMenuDropdown{
  position: relative;
  width: 30px;
  height: 30px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#acmPanel header .innerBox .acmMenuDropdown i{
  font-size: 25px;
  color: #151515;
}

#acmPanel header .innerBox .acmMenuDropdown .dropdownInnerBox{
  position: absolute;
  top: 35px;
  right: -5px;
  width: 200px;
  height: auto;
  background: #fff;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  padding: 10px;
  border-radius: 5px;
  display: none;
}

#acmPanel header .innerBox .acmMenuDropdown.active .dropdownInnerBox{
  display: flex;
}

#acmPanel header .innerBox .acmMenuDropdown .dropdownInnerBox::before{
  content: '';
  position: absolute;
  top: -7.5px;
  right: 10px;
  background: #d4af7a;
  width: 15px;
  height: 15px;
  transform: rotateZ(45deg);
  z-index: -1;
}

#acmPanel header .innerBox .acmMenuDropdown .dropdownInnerBox ul{
  width: 100%;
  height: auto;
}

#acmPanel header .innerBox .acmMenuDropdown .dropdownInnerBox ul li:nth-child(1){
  border-top: none;
}

#acmPanel header .innerBox .acmMenuDropdown .dropdownInnerBox ul li{
  list-style: none;
  padding: 13px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.3);
  height: auto;
  width: 100%;
}

#acmPanel header .innerBox .acmMenuDropdown .dropdownInnerBox ul li a{
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 14px;
  color: #151515;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

#acmPanel header .innerBox .acmMenuDropdown .dropdownInnerBox ul li a i{
  font-size: 14px;
  padding-right: 10px;
  width: 22px;
}

#acmPanel #acmInnerGrid{
  width: 100%;
  height: calc(100vh - 50px);
  margin-top: 50px;
  display: grid;
  grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
  grid-template-rows: calc(100%/3) calc(100%/3) calc(100%/3);
  gap: 2px;
  grid-template-areas:
  "box1 box3 box4"
  "box1 box2 box5"
  "box1 box2 box5";
  background: #d4af7a;
}

#acmPanel #acmInnerGrid.abendkasseDeactivated{
  grid-template-areas:
  "box1 box2 box4"
  "box1 box2 box3"
  "box1 box2 box3";
}

#acmPanel #acmInnerGrid #ticketListBox{
  grid-area: box1;
}
#acmPanel #acmInnerGrid #guestListBox{
  grid-area: box2;
}
#acmPanel #acmInnerGrid #statisticBox{
  grid-area: box3;
}
#acmPanel #acmInnerGrid #inhaltBox{
  grid-area: box4;
}
#acmPanel #acmInnerGrid #checkoutBox{
  grid-area: box5;
}
#acmPanel #acmInnerGrid.abendkasseDeactivated #checkoutBox{
  display: none;
}

#acmPanel #acmInnerGrid .gridBox{
  background: #fff;
  position: relative;
  width: 100%;
  height: 100%;
}

#acmPanel #acmInnerGrid .gridBox .headline{
  font-size: 17px;
  color: #d4af7a;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 10px;
  position: relative;
  height: 30px;
}

#acmPanel #acmInnerGrid .gridBox .emptyListText{
  font-size: 15px;
  color: #151515;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-align: center;
  width: 100%;
}

#acmPanel #acmInnerGrid .gridBox .inputField{
  width: 100%;
  height: auto;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}

#acmPanel #acmInnerGrid .gridBox .inputField input{
  width: 100%;
  height: 25px;
  border: none;
  border-bottom: 1px solid #d4af7a;
  outline: none;
  background: none;
  color: #151515;
  font-size: 14px;
  border-radius: 0;
  padding-right: 1.5rem;
}

#acmPanel #acmInnerGrid .gridBox .inputField .clear-input{
  position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; font-size: 1.25rem; line-height: 1;
  cursor: pointer; padding: .25rem; opacity: .6; display: none; color: #151515;
}
#acmPanel #acmInnerGrid .gridBox .inputField .clear-input.is-visible { display: inline-block; }
#acmPanel #acmInnerGrid .gridBox .inputField .clear-input:hover, .clear-input:focus { opacity: 1; }

#acmPanel #acmInnerGrid .gridBox .ticketList{
  width: 100%;
  height: calc(100% - 100px);
  padding: 20px;
  overflow-y: scroll;
}

#acmPanel #acmInnerGrid .gridBox .ticketList .ticketListItem:nth-child(1){
  border-top: none;
  padding-top: 0px;
}

#acmPanel #acmInnerGrid .gridBox .ticketList .ticketListItem{
  width: 100%;
  height: auto;
  padding: 7px 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

#acmPanel #acmInnerGrid .gridBox .ticketList .ticketListItem h3{
  font-size: 15px;
  color: #151515;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
}

#acmPanel #acmInnerGrid .gridBox .ticketList .ticketListItem p{
  font-size: 13px;
  color: #151515;
  font-family: "Roboto", sans-serif;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox{
  width: 100%;
  height: calc(100% - 40px);
  display: grid;
  grid-template-columns: calc(100%/4) calc(100%/4) calc(100%/4) calc(100%/4);
  grid-template-rows: calc(100%/5) calc(100%/5) calc(100%/5) calc(100%/5) calc(100%/5);
  gap: 1px;
  grid-template-areas:
  "total total total total"
  "block7 block8 block9 blockBack"
  "block4 block5 block6 blockEC"
  "block1 block2 block3 blockBar"
  "blockC block0 block00 blockBar";
  background: #d4af7a;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockTotal{
  grid-area: total;
  border-radius: 0px;
  flex-direction: column;
  cursor: default;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block9{
  grid-area: block9;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block8{
  grid-area: block8;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block7{
  grid-area: block7;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block6{
  grid-area: block6;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block5{
  grid-area: block5;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block4{
  grid-area: block4;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block3{
  grid-area: block3;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block2{
  grid-area: block2;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block1{
  grid-area: block1;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block0{
  grid-area: block0;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #block00{
  grid-area: block00;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockC{
  grid-area: blockC;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockBack{
  grid-area: blockBack;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockEC{
  grid-area: blockEC;
}
#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockBar{
  grid-area: blockBar;
  background: #d4af7a;
  color: #fff;
  writing-mode: vertical-rl;
  text-orientation: upright;
  line-height: 20px;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox .ziffer{
  width: 100%;
  height: 100%;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  cursor: pointer;
  color: #151515;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox .ziffer span{
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 30px;
}

#acmPanel #acmInnerGrid .gridBox.changeActive .checkoutZiffernBox .ziffer,
#acmPanel #acmInnerGrid .gridBox.changeActive .checkoutZiffernBox #blockTotal .blockCategories .blockCategorieItem{
  background: #D8D8D8;
  pointer-events: none;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockEC.notActive{
  background: #D8D8D8;
  pointer-events: none;
}

#acmPanel #acmInnerGrid .gridBox.changeActive .checkoutZiffernBox .ziffer:nth-child(1),
#acmPanel #acmInnerGrid .gridBox.changeActive .checkoutZiffernBox .ziffer:nth-child(13){
  background: #fff;
  pointer-events: all;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockTotal .blockCategories{
  width: 100%;
  height: 35%;
  overflow-x: scroll;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockTotal .blockCategories .blockCategorieItem{
  width: calc(100%/3 - 10px);
  height: 100%;
  overflow: hidden;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  border: 2px solid #d4af7a;
  margin: 0px 3px;
  cursor: pointer;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockTotal .blockCategories .blockCategorieItem span{
  font-size: 13px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  color: #151515;
  letter-spacing: 1px;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockTotal .blockTotalInput{
  width: 100%;
  height: 65%;
  position: relative;
}

#acmPanel #acmInnerGrid .gridBox.changeActive .checkoutZiffernBox #blockTotal .blockTotalInput input{
  display: none;
}

#acmPanel #acmInnerGrid .gridBox.changeActive .checkoutZiffernBox #blockTotal .blockTotalInput span.euroZeichen{
  visibility: hidden;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockTotal .blockTotalInput input{
  width: 100%;
  height: 100%;
  outline: none;
  background: #F9F9F9;
  border: none;
  border-radius: 5px;
  text-align: right;
  padding: 0px 50px 0px 20px;
  color: #151515;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 23px;
  display: flex;
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockTotal .blockTotalInput span.euroZeichen{
  color: #151515;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 23px;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockTotal .blockTotalInput span.change{
  color: #151515;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 23px;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

#acmPanel #acmInnerGrid .gridBox .checkoutZiffernBox #blockTotal .blockTotalInput span.change g{
  font-size: 15px;
  padding-left: 10px;
}

#acmPanel #acmInnerGrid #statisticBox .statisticHeader{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: auto;
  padding: 0px 20px;
}

#acmPanel #acmInnerGrid #statisticBox .statisticHeader .updatedAt{
  width: 20%;
  height: auto;
  font-size: 11px;
  color: #151515;
  text-align: left;
}

#acmPanel #acmInnerGrid #statisticBox .statisticHeader .headline{
  width: 60%;
  text-align: center;
}

#acmPanel #acmInnerGrid #statisticBox .statisticHeader .reloadUpdateNow{
  width: 20%;
  height: auto;
  font-size: 18px;
  color: #151515;
  text-align: right;
  cursor: pointer;
}

#acmPanel #acmInnerGrid #statisticBox .statisticHeader .reloadUpdateNow.rotate i{
  animation: rotateUpdate 0.3s ease;
}

@keyframes rotateUpdate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#acmPanel #acmInnerGrid #statisticBox .statisticList{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding: 10px 20px;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticDoubleItem{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticDoubleItem .statisticItem{
  width: 45%;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticItem{
  width: 100%;
  height: auto;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticDoubleItem .statisticItem .statisticHeadline{
  justify-content: center;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticItem .statisticHeadline{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticItem .statisticHeadline h3{
  font-size: 13px;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticItem .statisticHeadline span{
  font-size: 13px;
  font-family: "Roboto", sans-serif;
  letter-spacing: 2px;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticItem .statisticBar{
  width: 100%;
  height: 3px;
  border-radius: 10px;
  background: #f0f0f0;
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticItem .statisticBar .statisticBarContent{
  height: 100%;
  width: 0%;
  background: #d4af7a;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticItem .statisticContent{
  width: 100%;
  height: auto;
  margin-top: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#acmPanel #acmInnerGrid #statisticBox .statisticList .statisticItem .statisticContent p{
  font-size: 20px;
  font-family: "Archivo Black", sans-serif;
  letter-spacing: 3px;
  color: #d4af7a;
}

#acmPanel #acmInnerGrid .gridBox #output{
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}

#acmPanel #acmInnerGrid .gridBox #output.withContent{
  background: #fff;
}

#acmPanel #acmInnerGrid .gridBox #output i.alreadyInIcon{
  font-size: clamp(35px, 8vw, 60px);
  padding-bottom: 5px;
}

#acmPanel #acmInnerGrid .gridBox #output p{
  width: 100%;
  text-align: center;
  font-size: clamp(18px, 3vw, 20px);
  text-transform: uppercase;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
}

#acmPanel #acmInnerGrid .gridBox #output span.gebDatum{
  width: 100%;
  text-align: center;
  font-size: clamp(14px, 1vw, 18px);
  font-family: "Roboto", sans-serif;
}

#acmPanel #acmInnerGrid .gridBox #output span.categorie{
  width: 100%;
  text-align: center;
  font-size: clamp(14px, 1vw, 18px);
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  margin-top: 15px;
  letter-spacing: 1px;
}

#acmPanel #acmInnerGrid .gridBox #output span.anmerkung{
  width: 100%;
  text-align: center;
  font-size: clamp(13px, 0.9vw, 17px);
  font-family: "Roboto", sans-serif;
  letter-spacing: 1px;
}

#acmPanel #acmInnerGrid .gridBox #output .paymentFooter{
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 35px;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 20px;
}

#acmPanel #acmInnerGrid .gridBox #output .paymentFooter span{
  color: #151515;
  font-size: 13px;
  text-transform: uppercase;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  letter-spacing: 1px;
}

#acmPanel #acmInnerGrid .gridBox #output .actionFooter{
  width: 100%;
  height: 30px;
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#acmPanel #acmInnerGrid .gridBox #output .actionFooter span{
  width: 50%;
  height: 100%;
  background: #d4af7a;
  color: #fff;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  line-height: 30px;
}

#acmPanel #acmInnerGrid .gridBox #output .actionFooter span:nth-child(1){
  border-right: 1px solid #151515;
}
#acmPanel #acmInnerGrid .gridBox #output .actionFooter span:nth-child(2){
  border-left: 1px solid #151515;
}

.settingsPopupOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
}

.settingsPopupOverlay.active {
  display: flex;
}

.settingsPopupBox {
  width: 900px;
  max-width: calc(100% - 40px);
  height: 560px;
  max-height: calc(100% - 40px);
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  display: flex;
  flex-direction: column;
}

.settingsPopupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid #ececec;
}

.settingsPopupHeader h3 {
  margin: 0;
  font-size: 22px;
}

.settingsCloseBtn {
  border: none;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  color: #d4af7a;
}

.settingsPopupContent {
  display: flex;
  flex: 1;
  min-height: 0;
}

.settingsSidebar {
  width: 240px;
  border-right: 1px solid #ececec;
  background: #fafafa;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settingsNavItem {
  border: none;
  background: #fff;
  border-radius: 10px;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
  font-size: 15px;
  transition: 0.2s;
  color: #151515;
}

.settingsNavItem:hover {
  background: #f1f1f1;
}

.settingsNavItem.active {
  background: #151515;
  color: #fff;
}

.settingsMainContent {
  flex: 1;
  padding: 24px;
  overflow: auto;
}

.settingsTabContent {
  display: none;
}

.settingsTabContent.active {
  display: block;
}

.settingsTabContent h4 {
  margin-top: 0;
  margin-bottom: 8px;
  font-size: 22px;
}

.settingsTabContent p {
  font-size: 16px;
}

.settingsTabContent p span {
  font-size: 13px;
}

.settingsFormGroup {
  margin-top: 20px;
  max-width: 420px;
}

.settingsFormGroup label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.settingsFormGroup select {
  width: 100%;
  height: 46px;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 15px;
  color: #151515;
}

.settingsSwitchRow {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.settingsSwitchRow input[type="checkbox"] {
  transform: scale(1.2);
}

.settingsActions {
  margin-top: 20px;
}

.settingsSaveBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: #151515;
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  padding: 12px 18px;
  cursor: pointer;
  font-size: 15px;
}

.settingsSaveBtn:hover {
  opacity: 0.92;
}

.settingsMessageSuccess,
.settingsMessageError {
  margin-top: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14px;
}

.settingsMessageSuccess {
  background: #e8f8ee;
  color: #166534;
}

.settingsMessageError {
  background: #fdecec;
  color: #991b1b;
}

.settingsInfoBox {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 10px;
  background: #f6f7fb;
}

.settingsInfoBoxError {
  background: #fdecec;
  color: #991b1b;
}

.monitoringBox {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-top: 24px;
  flex-wrap: wrap;
}

.monitoringQrCode {
  width: 220px;
  min-height: 220px;
  padding: 14px;
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 12px;
  box-sizing: border-box;
}

.monitoringMeta {
  flex: 1;
  min-width: 280px;
}

.settingsLinkBtn {
  text-decoration: none;
}

.settingsFormGroup select,
#settingsMonitoringLink {
    width: 100%;
    height: 44px;
    font-size: 14px;
    padding: 0 12px;
    box-sizing: border-box;
}

  .settingsSwitchRow {
    align-items: flex-start;
    gap: 12px;
  }

  .settingsSwitchRow span {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
  }

  .settingsSwitchRow input[type="checkbox"] {
    margin-top: 2px;
    transform: scale(1.15);
    flex-shrink: 0;
  }

  .settingsActions {
    margin-top: 18px;
  }

  .settingsSaveBtn,
  .settingsLinkBtn {
    width: 100%;
    min-height: 46px;
    font-size: 14px;
    padding: 12px 16px;
    box-sizing: border-box;
  }

  .settingsMessageSuccess,
  .settingsMessageError,
  .settingsInfoBox {
    font-size: 13px;
    padding: 12px;
  }

  .monitoringBox {
    margin-top: 20px;
    gap: 16px;
  }

  .monitoringQrCode {
    width: 100%;
    max-width: 220px;
    min-height: 220px;
    margin: 0 auto;
  }

  .monitoringMeta {
    min-width: 0;
    width: 100%;
  }

.cardPaymentPopupOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999999;
}

.cardPaymentPopupOverlay.active {
  display: flex;
}

.cardPaymentPopupBox {
  width: 430px;
  max-width: calc(100% - 30px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  overflow: hidden;
}

.cardPaymentPopupHeader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #ececec;
}

.cardPaymentPopupHeader h3 {
  margin: 0;
  font-size: 22px;
}

.cardPaymentPopupClose {
  border: none;
  background: transparent;
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
  color: #d4af7a;
}

.cardPaymentPopupBody {
  padding: 30px 24px;
  text-align: center;
}

.cardPaymentPopupIcon {
  font-size: 46px;
  margin-bottom: 18px;
}

.cardPaymentPopupStatus {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 8px;
}

.cardPaymentPopupSubtext {
  font-size: 15px;
  color: #666;
  margin-bottom: 20px;
}

.cardPaymentPopupLoader {
  width: 42px;
  height: 42px;
  border: 4px solid #e5e5e5;
  border-top: 4px solid #151515;
  border-radius: 50%;
  margin: 0 auto;
  animation: cardPaymentSpin 0.9s linear infinite;
}

.cardPaymentPopupActions {
  margin-top: 22px;
}

.cardPaymentPopupBtn {
  border: none;
  background: #151515;
  color: #fff;
  border-radius: 10px;
  padding: 11px 18px;
  cursor: pointer;
}

.cardPaymentPopupSuccess .cardPaymentPopupIcon {
  color: #15803d;
}

.cardPaymentPopupError .cardPaymentPopupIcon {
  color: #b91c1c;
}

.cardPaymentPopupSuccess #cardPaymentPopupLoader,
.cardPaymentPopupError #cardPaymentPopupLoader {
  display: none;
}

@keyframes cardPaymentSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

#acmMonitoring{
  width: 100%;
  height: 100vh;
  background: #d4af7a;
}

#acmMonitoring header{
  width: 100%;
  height: 80px;
  position: relative;
  border-bottom: 3px solid #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 200px;
  background: #fff;
}

#acmMonitoring header img{
  height: 70%;
}

#acmMonitoring header .clock{
  font-size: 30px;
  color: #d4af7a;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  letter-spacing: 2px;
}

#acmMonitoring.activeProcess #monitoringInnerBox{
  display: flex;
}

#acmMonitoring #monitoringInnerBox{
  width: 100%;
  height: calc(100% - 80px);
  padding: 70px 200px;
  display: none;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  position: relative;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList{
  width: 100%;
  height: 80%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 0;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem:nth-child(1){
  border-top: none;
  padding-top: 0px;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem .monitoringItemIcon{
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem .monitoringItemIcon i{
  font-size: 40px;
  color: #fff;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem .monitoringItemText{
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem .monitoringItemText h3{
  font-size: 22px;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 2px;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem .monitoringItemText h3 g{
  text-transform: none;
  padding-right: 10px;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem .monitoringItemText span{
  font-size: 17px;
  font-family: "Roboto", sans-serif;
  color: #fff;
  letter-spacing: 1px;
  margin-top: 2px;
}
#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem .monitoringItemText span g{
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem .monitoringItemPreis{
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .monitoringItemList .monitoringItem .monitoringItemPreis h3{
  font-size: 18px;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  color: #fff;
  letter-spacing: 1px;
}

#output .monitoringItemList{
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

#output .monitoringItemList .monitoringItem{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 0;
}

#output .monitoringItemList .monitoringItem:nth-child(1){
  border-top: none;
  padding-top: 0px;
}

#output .monitoringItemList .monitoringItem .monitoringItemIcon{
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

#output .monitoringItemList .monitoringItem .monitoringItemIcon i{
  font-size: 20px;
  color: #151515;
}

#output .monitoringItemList .monitoringItem .monitoringItemText{
  width: 80%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}

#output .monitoringItemList .monitoringItem .monitoringItemText h3{
  font-size: 16px;
  font-family: "Archivo Black", "Roboto", sans-serif;
  text-transform: uppercase;
  color: #151515;
  letter-spacing: 1px;
}

#output .monitoringItemList .monitoringItem .monitoringItemText h3 g{
  text-transform: none;
  padding-right: 10px;
}

#output .monitoringItemList .monitoringItem .monitoringItemText span{
  font-size: 12px;
  font-family: "Roboto", sans-serif;
  color: #151515;
  letter-spacing: 1px;
  margin-top: 2px;
}
#output .monitoringItemList .monitoringItem .monitoringItemText span g{
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  text-transform: uppercase;
}

#output .monitoringItemList .monitoringItem .monitoringItemPreis{
  width: 10%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

#output .monitoringItemList .monitoringItem .monitoringItemPreis h3{
  font-size: 13px;
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  color: #151515;
  letter-spacing: 1px;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .preisList{
  width: 100%;
  max-height: 15%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 25px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .preisList .title{
  font-family: "Roboto", sans-serif;
  font-size: 20px;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .preisList .preis{
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #fff;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .preisList .preisAnzeige{
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  flex-direction: column;
  text-align: right;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .preisList .preisAnzeige span{
  font-size: 14px;
  font-family: "Roboto", sans-serif;
  font-weight: normal;
  color: #fff;
  text-align: right;
  margin-top: 5px;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .poweredBy{
  width: 100%;
  max-height: 5%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-top: 50px;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .poweredBy p{
  font-family: "Roboto", sans-serif;
  font-size: 14px;
  color: #fff;
  letter-spacing: 1px;
  line-height: 15px;
}

#acmMonitoring #monitoringInnerBox .monitoringContainer .poweredBy p img{
  height: 17px;
}

#acmMonitoring #monitoringAdBox{
  width: 100%;
  height: calc(100% - 80px);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 50px;
}

#acmMonitoring.activeProcess #monitoringAdBox{
  display: none;
}

#acmMonitoring #monitoringAdBox .ad1,
#acmMonitoring #monitoringAdBox .ad3{
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  width: 100%;
  height: 100%;
  background: #d4af7a;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
}

#acmMonitoring #monitoringAdBox .ad2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: #d4af7a;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  opacity: 0;
}

#acmMonitoring #monitoringAdBox .ad1{
  animation: fadeInOut 45s infinite;
}
#acmMonitoring #monitoringAdBox .ad2{
  animation: fadeInOutWithOutTransform 45s infinite;
  animation-delay: 15s;
}
#acmMonitoring #monitoringAdBox .ad3{
  animation: fadeInOut 45s infinite;
  animation-delay: 30s;
}

@keyframes fadeInOut {
  1%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  3% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  31% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  33% { 
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }
}

@keyframes fadeInOutWithOutTransform {
  1%{
    opacity: 0;
  }
  2% {
    opacity: 1;
  }
  31% {
    opacity: 1;
  }
  33% { 
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

#acmMonitoring #monitoringAdBox .ad1 h1{
  font-family: "Archivo Black", "Roboto", Helvetica, sans-serif;
  font-size: 100px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 10px;
  text-align: center;
}

#acmMonitoring #monitoringAdBox .ad1 h3{
  font-family: "Roboto", Helvetica, sans-serif;
  font-size: 25px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 4px;
  margin-top: 20px;
  text-align: center;
}

#acmMonitoring #monitoringAdBox .ad2 .imgBox{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#acmMonitoring #monitoringAdBox .ad2 .imgBox img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#acmMonitoring #monitoringAdBox .ad3 h1{
  font-family: "Archivo Black", "Roboto", Helvetica, sans-serif;
  font-size: 80px;
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 10px;
  text-align: center;
}

#acmMonitoring #monitoringAdBox .ad3 h3{
  font-family: "Roboto", Helvetica, sans-serif;
  font-size: 30px;
  font-weight: bold;
  text-transform: uppercase;
  color: #fff;
  letter-spacing: 4px;
  margin-top: 20px;
  text-align: center;
}

#eventmasterXLinkFooter{
  position: absolute;
  bottom: 20px;
  left: 30px;
  z-index: 9000;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto;
  height: auto;
}

#eventmasterXLinkFooter ul{
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

#eventmasterXLinkFooter ul li:nth-child(1){
  margin-left: 0px;
}

#eventmasterXLinkFooter ul li{
  margin-left: 20px;
  list-style: none;
}

#eventmasterXLinkFooter ul li a{
  text-decoration: none;
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 12px;
  color: #fff;
}
#cookiePopup{
  width: 100%;
  height: auto;
  position: fixed;
  bottom: -100%;
  left: 0;
  background-color: #fff;
  padding: 50px 0;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);
  z-index: 9999;
  transition: 0.2s;
}

#cookiePopup.active{
  position: fixed;
  bottom: 0;
}

#cookiePopup .container{
  width: 100%;
  padding: 0px 150px;
}

#cookiePopup .cookieHeader{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

#cookiePopup .cookieHeader h3{
  font-family: "Archivo Black", "Roboto", Helvetica, sans-serif;
  font-size: 22px;
  color: #151515;
  text-transform: uppercase;
  letter-spacing: 2px;
}

#cookiePopup .cookieHeader .cookieCloseBtn{
  font-size: 22px;
  cursor: pointer;
  color: #151515;
}

#cookiePopup .textBox{
  width: 100%;
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

#cookiePopup .textBox p{
  font-family: "Roboto", Helvetica, sans-serif;
  font-size: 15px;
  color: #151515;
  letter-spacing: 1px;
}

#cookiePopup .textBox .cookieButtons{
  width: 100%;
  display: flex;
  justify-items: flex-start;
  align-items: flex-start;
  margin-top: 20px;
}

#cookiePopup .textBox .cookieButtons a:nth-child(1){
  margin-left: 0;
}

#cookiePopup .textBox .cookieButtons a{
  font-family: "Archivo Black", "Roboto", Helvetica, sans-serif;
  padding: 7px 30px;
  background: none;
  border: 1px solid #151515;
  outline: none;
  cursor: pointer;
  font-size: 13px;
  text-transform: uppercase;
  color: #151515;
  text-decoration: none;
  letter-spacing: 1px;
  margin: 0px 15px;
  border-radius: 5px;
}

#cookiePopup .textBox .cookieButtons a.acceptBtn{
  background: #D4AF7A;
  border-color: #D4AF7A;
  color: #fff;
}


footer{
  width: 100%;
  height: auto;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  border-top: 2px solid #151515;
  box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5);
}

footer .container{
  padding: 30px 0;
}

footer .row{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

footer .row .left{
  width: 58%;
}

footer .row .left .poweredBy{
  color: #151515;
  text-align: left;
  font-size: 12px;
}

footer .row .left .poweredBy img{
  height: 11px;
  width: auto;
  margin-left: 5px;
}

footer .row .right{
  width: 38%;
}

footer .row .right .socials{
  width: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

footer .row .right .socials ul{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

footer .row .right .socials ul li{
  font-size: 20px;
  margin-right: 20px;
  list-style: none;
}

footer .row .right .socials ul li:nth-child(2){
  margin-right: 0px;
}

footer .row .right .socials ul li a{
  color: #151515;
  text-decoration: none;
}

footer .row .right .line{
  width: 100%;
  height: 30px;
  overflow: hidden;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  transition: 0.3s;
}

footer .row .right .line:nth-child(1){
  border-top: none;
}

footer .row .right .line.active{
  width: 100%;
  height: 80px;
}

footer .row .right .line .lineHeader{
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  cursor: pointer;
}

footer .row .right .line .lineHeader .close{
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10px;
  position: relative;
}

footer .row .right .line .lineHeader .close #line-top{
  position: absolute;
  width: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.4);
}

footer .row .right .line .lineHeader .close #line-bottom{
  position: absolute;
  width: 50%;
  height: 1px;
  background: rgba(0, 0, 0, 0.4);
  transform: rotateZ(90deg);
  transition: 0.3s;
}

footer .row .right .line.active .lineHeader .close #line-bottom{
  transform: rotateZ(0);
  opacity: 0;
}

footer .row .right .line .lineText{
  width: 100%;
  height: auto;
}

footer .row .right .line .lineText a{
  font-size: 14px;
  color: #151515;
  font-weight: 700;
}

footer p{
  font-size: 14px;
  color: #151515;
}

footer g.age{
  font-size: 12px;
  color: #151515;
  opacity: 0.6;
  padding-left: 10px;
}

footer .secList{
  margin: 20px 0;
  padding: 15px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

footer .secList .secItem{
  width: 20%;
}

footer .secList .secItem h3{
  font-family: "Archivo Black", "Roboto", sans-serif;
  font-size: 12px;
  color: #151515;
  font-weight: 900;
  letter-spacing: 1px;
  padding-bottom: 5px;
}

footer .secList .secItem ul{
  list-style: none;
}

footer .secList .secItem ul li{
  list-style: none;
  margin: 5px 0;
}

footer .secList .secItem ul li a{
  font-size: 12px;
  color: #151515;
  font-weight: 400;
  letter-spacing: 1px;
  position: relative;
  transition: 0.2s;
}

footer .secList .secItem ul li a span{
  position: absolute;
  bottom: -1px;
  left: 0;
  height: 1px;
  width: 100%;
}

footer .secList .secItem ul li a:hover{
  color: #d4af7a;
}

footer .secList .secItem ul li a:hover span{
  width: 100%;
  background: #d4af7a;
  animation: span 0.2s ease-in;
}

@keyframes span {
  0%{
    width: 0%;
  }
  100%{
    width: 100%;
  }
}

footer .copyright{
  font-size: 12px;
}

.alert{
  background: #f3f3f3;
  position: fixed;
  right: 0;
  top: 125px;
  z-index: 3000;
  padding: 20px 40px;
  min-width: 300px;
  border-radius: 4px;
  border-top-right-radius: 0px;
  border-bottom-right-radius: 0px;
  overflow: hidden;
}

.alert.falsch{
  border-bottom: 2px solid #FF5F5F;
}

.alert.richtig{
  border-bottom: 2px solid #00CC00;
}

.alert.show{
  animation: show_slide 1s ease forwards;
}

@keyframes show_slide {
  0%{
    transform: translateX(100%);
  }
  40%{
    transform: translateX(-10%);
  }
  100%{
    transform: translateX(0%);
  }
}

.alert.hide{
  animation: hide_slide 1s ease forwards;
}

@keyframes hide_slide {
  0%{
    transform: translateX(0%);
  }
  40%{
    transform: translateX(-10%);
  }
  100%{
    transform: translateX(100%);
  }
}

.alert .icon{
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #4A4A4A;
  font-size: 25px;
}

.alert .msg{
  padding: 0 25px;
  font-size: 17px;
  color: #151515;
  font-family: "Roboto", "Century Gothic", sans-serif;
}

.alert .msg a{
  font-size: 13px;
  color: #151515;
  padding-left: 5px;
  font-family: "Roboto", sans-serif;
  font-weight: 600;
}

.alert .close-btn{
  position: absolute;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.1);
  padding: 20px 18px;
  cursor: pointer;
  transition: 0.3s;
}

.alert .close-btn:hover{
  background: rgba(0, 0, 0, 0.15);
}

.alert .close-btn span{
  color: #4A4A4A;
  font-size: 20px;
  line-height: 40px;
}

.no-spinner::-webkit-inner-spin-button,
.no-spinner::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.no-spinner {
  -moz-appearance: textfield;
}

@media (max-width: 991px) {
  header .container{
    width: 95%;
    height: 100%;
  }
  header nav .container .logo{
    max-height: 30px;
    margin-top: 5px;
  }
  header .navbar ul.navList li:nth-child(1){
    margin-top: 0;
  }
  header .navbar ul.navList li{
    visibility: visible;
    margin-left: 0px;
    margin-top: 15px;
  }
  header .navbar ul.navList li a span{
    bottom: -4px;
    position: absolute;
    left: 0;
  }
  header .navbar ul.navList {
    width: 100%;
    height: calc(100vh - 90px);
    position: absolute;
    top: 50px;
    left: -100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding: 30px 20px;
    background: #fff;
    transition: 0.2s;
    border-top: 2px solid #d4af7a;
  }
  header .navbar.mobileActive ul.navList{
    left: 0;
  }
  header.sticky .navbar{
    position: fixed;
    top: 59px;
    left: 0;
  }
  header .navbar .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 95%;
    height: 100%;
  }
  header .navbar .container .toggleFloatLeft{
    display: flex;
    width: 90%;
    position: relative;
  }
  header .navbar .toggleNavbar{
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  header .navbar .toggleNavbar #line-top{
    width: 100%;
    height: 1px;
    background: #151515;
    position: absolute;
    top: 30%;
    left: 0px;
    transform: translateY(-50%);
    transition: 0.2s;
  }
  header .navbar .toggleNavbar #line-bottom{
    width: 100%;
    height: 1px;
    background: #151515;
    position: absolute;
    top: 70%;
    left: 0px;
    transform: translateY(-50%);
    transition: 0.2s;
  }
  header .navbar.mobileActive .toggleNavbar #line-top{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%) rotateZ(-45deg);
  }
  header .navbar.mobileActive .toggleNavbar #line-bottom{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translateY(-50%) rotateZ(45deg);
  }
  .pc-none{
    display: block;
    visibility: visible;
    opacity: 1;
  }
  section#start{
    width: 100%;
    height: auto;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  section#start .icons{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  section#start .icons .icon{
    width: 50%;
    height: 210px;
  }
  section#start .icons .icon.active .iconBox{
    opacity: 0;
  }
  section#start .icons .icon.active .textBox .titel{
    position: relative;
    top: -40px;
  }
  section#start .icons .icon.active .textBox .text{
    position: relative;
    top: -30px;
  }
  .container{
    width: 100%;
    padding: 0 10px;
  }
  #ticket .formular{
    width: 98%;
  }
  #ticket .formular form button{
    margin-top: 100px;
  }
  .ticketBox{
    width: 98%;
  }
  .ticketBox #video-container{
    height: 350px;
    width: 350px;
  }
  .scanPopup{
    width: 98%;
  }
  .scanPopup p{
    font-size: 4vw !important;
  }
  
  .scanPopup .fail{
    font-size: 4vw !important;
  }
  .scanPopup .buttons .actionBtn {
    line-height: 50px !important;
    font-size: 3vw !important;
  }

  .scanPopup .buyStatus{
    font-size: 3vw !important;
  }
  section#wallpaper{
    width: 100%;
    min-height: 500px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    position: relative;
  }
  .helpList{
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
  }
  .helpList .helpItem{
    width: 100%;
    padding: 15px;
    margin: 10px 0;
  }
  .helpList .helpItem h3{
    font-size: 13px;
  }
  .helpList .helpItem span{
    font-size: 12.5px;
  }
  .helpList .helpItem a{
    width: 90%;
    color: #fff;
    background: #151515;
    border: 1px solid #151515;
    border-radius: 1px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    line-height: 35px;
    text-align: center;
    position: absolute;
    bottom: 15px;
  }
  .helpList .helpItem form{
    width: 90%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: absolute;
    bottom: 15px;
  }
  .helpList .helpItem form input{
    width: 100%;
    height: 35px;
    padding: 0 10px;
    color: #fff;
    border: 1px solid #d4af7a;
    outline: none;
    border-radius: 1px;
    background: none;
  }
  .helpList .helpItem form label{
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    text-align: left;
    padding-bottom: 5px;
  }
  .helpList .helpItem form label span{
    color: #FF0000;
    font-size: 20px;
  }
  .helpList .helpItem form button{
    width: 100%;
    height: auto;
    line-height: 35px;
    padding: 0 10px;
    color: #fff;
    background: #151515;
    border: 1px solid #151515;
    outline: none;
    border-radius: 1px;
    margin-top: 5px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.1s;
  }
  #overflowLogin .innerBox ul.helpList li a{
    font-size: 13px;
    word-wrap: break-word;
  }
  section#regelwerkPopup .innerBox{
    width: 98%;
  }
  section#regelwerkPopup .innerBox .header{
    height: 60px;
  }
  .regelwerk h3{
    font-size: 19px;
  }
  .regelwerk p{
    font-size: 16.5px;
    width: 85%;
  }
  .regelwerk span.absZeichen{
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    width: 15%;
    color: #fff;
    font-size: 16.5px;
    padding-left: 5px;
  }

  .regelwerk p.informationsHinweis{
    font-size: 16px;
    color: #fff;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    width: 100%;
    margin-top: 20px;
  }
  .heading{
    padding-top: 110px;
  }
  .headline{
    font-size: 25px;
    padding-left: 5px;
    padding-right: 5px;
  }
  #whitelistForm form{
    width: 90%;
    margin-top: 20px;
  }
  #whitelistForm form input {
    border-radius: 0px;
  }
  .formular form{
    width: 90%;
    margin-top: 20px;
  }
  .formular .user-box input#text {
    border-radius: 0px;
  }
  section#userContainer{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100%;
    padding: 50px 0px;
  }
  section#userContainer .row{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: row;
    flex-direction: column;
    width: 90%;
    margin-top: 30px;
  }
  section#userContainer .row .row1{
    width: 100%;
  }
  section#userContainer .row .row1 h3{
    font-size: 20px;
  }
  section#userContainer .row .row1 ul li a{
    font-size: 18px;
  }
  section#userContainer .row .row2{
    width: 100%;
    height: auto;
    margin-top: 30px;
  }
  section#userContainer .row .row2 .information p{
    width: 100%;
  }
  section#wallpaper .imgWallpaper{
    display: none;
    visibility: hidden;
    opacity: 0;
  }
  section#wallpaper .imgWallpaperMobile{
    display: flex;
    visibility: visible;
    opacity: 1;
    position: relative;
    top: 50px;
    left: 20px;
    height: 100%;
    z-index: 1000;
  }
  section#wallpaper .textBox{
    margin-top: 50px;
    margin-left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 1001;
  }
  body#loginBody{
    width: 100%;
    height: auto;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: visible;
  }
  
  body#loginBody img.eventmasterXBackgroundImg{
    width: 100%;
    height: 220px;
  }
  
  .eventmasterXLogo{
    text-decoration: none;
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
  }
  #overflowLogin{
    min-width: auto;
    width: 100%;
    height: auto;
    min-height: calc(100vh - 220px);
    position: relative;
    top: -20px;
    right: 0;
    box-shadow: 0px -15px 15px rgba(0, 0, 0, 0.3);
    padding: 20px 10px;
  }

  #overflowLogin .innerBox h1.headlineSmallMobile{
    font-size: 25px;
  }
  
  #overflowLogin .innerBox .backBtn{
    position: absolute;
  }
  
  #overflowLogin .innerBox .toggleButtons{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 25px;
    animation: fadeInAnimation 0.5s forwards;
    opacity: 0;
    animation-delay: 0.2s;
  }
  
  #overflowLogin .innerBox .toggleButtons .toggleItem{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    cursor: pointer
  }
  
  #overflowLogin .innerBox .toggleButtons .toggleItem h3{
    width: 100%;
    font-family: "Archivo Black", "Roboto", sans-serif;
    font-weight: bold;
    font-size: 15px;
    text-transform: uppercase;
    color: #151515;
    text-align: center;
    padding-bottom: 3px;
    text-decoration: none;
  }
  
  #overflowLogin .innerBox .toggleButtons .toggleItem span{
    width: 0%;
    height: 2px;
    position: absolute;
    bottom: -2px;
    background: #d4af7a;
    transition: 0.2s;
  }
  
  #overflowLogin .innerBox .toggleButtons .toggleItem.active span{
    width: 100%;
  }
  
  #overflowLogin .innerBox .toggleButtons .toggleItem#equipmentBtn span{
    right: 0px;
  }
  
  #overflowLogin .innerBox .toggleButtons .toggleItem#personalBtn span{
    left: 0px;
  }
  #overflowLogin .innerBox form .btnItem{
    flex-direction: column;
  }
  #overflowLogin .btn.btn-mobileBig:nth-child(1){
    margin-top: 0px;
  }
  #overflowLogin .btn.btn-mobileBig{
    width: 100%;
    height: 100%;
    text-align: center;
    margin-left: 0px;
    margin-top: 15px;
  }
  #overflowLogin .innerBox .formSwitch{
    width: 100%;
    max-height: 500px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 80px;
  }
  
  #overflowLogin .innerBox .formSwitch .switch{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle{
    width: 200%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement{
    width: 50%;
    max-height: 70%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    transition: 0.2s;
    overflow-y: scroll;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement#equipment.switchActive{
    margin-left: -50%;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem:nth-child(1){
    border-top: none;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox{
    width: 15%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox .checkboxInput {
    display: none;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox .checkboxInput + label.checkboxLabel {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid #d4af7a;
    border-radius: 4px;
    position: relative;
    cursor: pointer;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox .checkboxInput + label.checkboxLabel::after {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -50%) rotate(45deg);
    opacity: 0;
    /* transition: opacity 0.2s ease-in-out; */
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox .checkboxInput:checked + label.checkboxLabel {
    background-color: #d4af7a;
    border-color: #d4af7a;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .checkboxInputBox .checkboxInput:checked + label.checkboxLabel::after {
    opacity: 1;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem p{
    width: 75%;
    font-family: "Roboto", sans-serif;
    font-weight: bold;
    color: #151515;
    font-size: 17px;
    letter-spacing: 1px;
    margin-top: 0px;
    padding-top: 0px;
  }
  
  #overflowLogin .innerBox .formSwitch .switchToggle .switchElement .switchItem .numberInput{
    width: 10%;
    border: none;
    border-bottom: 1px solid #151515;
    font-family: "Roboto", sans-serif;
    background: none;
    outline: none;
    color: #151515;
    font-size: 12px;
    padding: 5px 0;
    visibility: hidden;
    opacity: 0;
  }
  
  #overflowLogin .innerBox form .tempAccessForm{
    width: 100%;
    height: 50px;
    grid-template-columns: repeat(8, 8.5vw);
    gap: auto;
  }
  
  #overflowLogin .innerBox form .tempAccessForm .tempAccessFormInput{
    font-size: 25px;
  }
  
  #overflowLogin .innerBox .footerLinks{
    height: auto;
    position: relative;
    margin-top: 50px;
  }
  #overflowLogin .poweredBy{
    position: fixed;
    bottom: 20px;
    right: 20px;
  }
  .eventTableBooking{
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  .eventTableBooking .floorSelection{
    width: 100%;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .eventTableBooking .tableArrangement{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    margin-top: 20px;
  }
  
  .eventTableBooking .tableArrangement svg{
    max-width: 70%;
    max-height: 200px;
  }
  #acmLogin{
    padding: 0px 20px;
  }
  #acmLogin.appVersion{
    padding: 0px;
  }

  #acmLogin #appBackground .appLogo{
    margin-top: 85px;
  }
  
  #acmLogin #acmContentBox{
    width: 100%;
    height: auto;
    padding: 30px 0;
  }
  
  #acmLogin #acmContentBox form .acmCodeForm{
    width: 100%;
    height: 45px;
    grid-template-columns: repeat(8, 8.5vw);
    gap: auto;
    margin-top: 30px;
  }
  
  #acmLogin #acmContentBox form .acmCodeForm .acmCodeFormInput{
    font-size: 20px;
  }
  #acmLogin .logoBackdrop{
    background: linear-gradient(0deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 100%);
  }
  #acmLogin.appVersion #appLoginPopup{
    width: 100%;
  }
  section#eventBuyBox .eventBlackscreen .eventBuyHeader{
    width: 95%;
  }
  
  section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-left{
    width: 80%;
  }
  
  section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-left a{
    font-size: 12px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
  }
  
  section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-left span.headerEventInformation{
    font-size: 12px;
  }
  
  section#eventBuyBox .eventBlackscreen .eventBuyHeader .row .float-right{
    width: 20%;
  }
  
  section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  
  section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter.show{
    max-height: calc(4 * 40px + 4 * 5px + 20px);
    padding: 3px 3px;
  }
  
  section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter form{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  
  section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter form select{
    width: 100%;
    height: 40px;
    border: 1px solid #d4af7a;
    color: #151515;
    background: none;
    outline: none;
    padding: 0 10px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-left-radius: 0px;
    color: #151515;
    font-weight: 700;
    letter-spacing: 2px;
    margin: 0 0px 5px 0;
  }
  
  section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter form input{
    width: 100%;
    border-radius: 0px;
    margin: 0 0px 5px 0;
  }
  
  section#eventBuyBox .eventBlackscreen .eventBuyHeader .row#headerFilter form input:nth-child(4){
    border-top-right-radius: 0px;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-bottom: 0px;
  }

  section#eventBuyBox .eventBlackscreen .eventList{
    width: 95%;
    padding: 20px 15px;
  }
  section#eventBuyBox .eventBlackscreen .eventList .prevEvents.visible{
    width: 100%;
    max-height: 2000px;
  }
  
  section#eventBuyBox .eventBlackscreen .eventList .headline .prevArrow{
    padding: 0px 0px 0px 10px;
  }
  
  section#eventBuyBox .eventBlackscreen .eventList .headline .prevArrow i{
    font-size: 16px;
    color: #151515;
    transition: 0.2s;
  }
  
  .eventItemBox{
    width: 100%;
    height: 130px;
    margin: 10px 0;
  }
  
  .eventItemBox .eventItem{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    background: #F9F9F9;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    text-decoration: none;
    position: relative;
  }
  
  .eventItemBox .eventItem .imgBox{
    display: none;
  }
  
  .eventItemBox .eventItem .textBox{
    width: 75%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 10px 20px;
    position: relative;
  }
  
  .eventItemBox .eventItem .textBox .leftElement{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }
  
  .eventItemBox .eventItem .textBox .leftElement h1{
    font-size: 15px;
    font-weight: 800;
  }
  
  .eventItemBox .eventItem .textBox .leftElement h3{
    font-size: 13px;
  }
  
  .eventItemBox .eventItem .textBox .leftElement p{
    font-size: 12px;
    margin-top: 7px;
  }
  
  .eventItemBox .eventItem .textBox .rightElement{
    display: none;
  }
  
  .eventItemBox .eventItem .dateBox{
    width: 25%;
  }
  
  .eventItemBox .eventItem .dateBox .numberDay{
    font-size: 25px;
    text-transform: uppercase;
    color: #d4af7a;
    font-weight: 900;
  }
  
  .eventItemBox .eventItem .dateBox .numberDate,
  .eventItemBox .eventItem .dateBox .numberTime{
    font-size: 11px;
    text-align: center;
  }

  section#warenkorbContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 150px 0 80px 0;
    width: 100%;
    height: auto;
  }

  section#warenkorbContainer .box1{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    width: 100%;
    height: auto;
  }
  section#warenkorbContainer .box1 .cartRow{
    width: 95%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 40px;
  }

  section#warenkorbContainer .box1 .cartRow .float-left{
    width: 100%;
    padding-bottom: 20px;
  }

  section#warenkorbContainer .box1 ul.bulledList{
    margin-top: 20px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }

  section#warenkorbContainer .box1 ul.bulledList h3{
    color: #151515;
    font-size: 14px;
    text-transform: uppercase;
    font-family: "Roboto", sans-serif;
    font-weight: 800;
    letter-spacing: 2px;
    padding-bottom: 3px;
  }

  section#warenkorbContainer .box1 ul.bulledList li{
    list-style: none;
    width: 100%;
    height: auto;
    color: #151515;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 6px 0;
  }

  section#warenkorbContainer .box1 ul.bulledList li .addInfo{
    color: #d4af7a;
    font-weight: 800;
  }

  section#warenkorbContainer .box1 ul.bulledList li i{
    width: 25px;
    font-size: 17px;
    --fa-primary-color: #151515;
    --fa-secondary-color: #d4af7a;
    --fa-secondary-opacity: 0.8;
  }
  .cartItems .cartItem .imgBox{
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: 2px;
  }

  .cartItems .cartItem .imgBox i{
    color: #151511;
    font-size: 25px;
  }

  .cartItems .cartItem .textBox{
    width: 90%;
  }
  .cartItems .cartItem .textBox .textMain{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 10px;
  }

  .cartItems .cartItem .textBox .textMain .textMain1,
  .cartItems .cartItem .textBox .textMain .textMain2{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }

  .cartItems .cartItem .textBox .textMain .textMain2{
    margin-left: 0;
  }

  .cartItems .cartItem .textBox .textMain .row{
    line-height: 17px;
  }

  .cartItems .cartItem .textBox .textAction .personalisierenForm input{
    border-radius: 0;
  }

  .cartItems .cartItem .textBox .textAction .personalisierenForm select{
    border-radius: 0;
  }

  .cartItems .cartItem .textBox .textAction .personalisieren{
    font-size: 10px;
    color: #151515;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: 0.2s;
    opacity: 1;
    cursor: pointer;
  }

  .cartItems .cartItem .textBox .textAction .personalisieren.notActive{
    color: #d4af7a;
  }

  .cartItems .cartItem .textBox .textAction.active .personalisieren{
    margin-top: -15px;
    opacity: 0;
  }

  .cartItems .cartItem .textBox .textAction .personalisieren i{
    font-size: 10px;
    padding-left: 3px;
  }

  .cartItems .cartItem .textBox .textAction .favButton{
    font-size: 25px;
    padding: 7px 12px;
    border: 1px solid #151515;
    border-radius: 1px;
    background: none;
    color: #151515;
    transition: 0.1s;
  }

  .cartItems .cartItem .textBox .textAction .favButton:hover{
    color: #FF0000;
    font-weight: 600;
  }

  .cartItems .cartItem .textBox .textAction .quantityBox{
    margin-left: 10px;
    height: 45px;
    width: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .cartItems .cartItem .textBox .textAction .quantityBox a{
    width: 30%;
    line-height: 45px;
    color: #151515;
    font-size: 20px;
    text-align: center;
  }

  .cartItems .cartItem .textBox .textAction .quantityBox span{
    width: 40%;
    line-height: 45px;
    color: #151515;
    font-size: 20px;
    text-align: center;
  }

  section#warenkorbContainer .box1 .cartRow .float-left h3.headTitel{
    color: #151515;
    font-size: 20px;
    letter-spacing: 2px;
    font-weight: 800;
    text-transform: uppercase;
    font-family: "Archivo Black", "Roboto", sans-serif;
    padding-bottom: 15px;
  }

  section#warenkorbContainer .box1 .cartRow .float-left p.headLoginTitel{
    font-size: 13px;
    color: #151515;
    font-weight: 400;
    letter-spacing: 1px;
  }

  section#warenkorbContainer .box1 .cartRow .float-left .login{
    font-size: 13px;
    color: #151515;
    font-weight: 400;
    letter-spacing: 1px;
    margin-top: 15px;
    cursor: pointer;
  }

  section#warenkorbContainer .box1 .cartRow .float-left .addressInput{
    width: 100%;
    height: auto;
  }

  section#warenkorbContainer .box1 .cartRow .float-left .addressInput p:nth-child(1){
    margin-top: 0px;
  }

  section#warenkorbContainer .box1 .cartRow .float-left .addressInput p{
    margin-top: 20px;
  }

  section#warenkorbContainer .box1 .cartRow .float-left .addressInput a.changeBtn{
    font-size: 15px;
    color: #151515;
    font-weight: 500;
    letter-spacing: 1px;
    margin-top: 25px;
    cursor: pointer;
  }

  section#warenkorbContainer .box1 .cartRow .float-left .anmeldeBox{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
  }

  section#warenkorbContainer .box1 .cartRow .float-left .anmeldeBox .anmeldeBtn{
    width: 100%;
    line-height: 40px;
    text-align: center;
    color: #151515;
    border: 1px solid #151515;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 15px;
    letter-spacing: 1px;
    font-weight: 700;
    margin: 10px 0;
  }

  section#warenkorbContainer .box1 .cartRow .float-right{
    width: 100%;
    height: auto;
    padding: 20px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    border: 1px solid #d4af7a;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    margin-top: 50px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabatt{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabatt p{
    font-size: 14px;
    color: #151515;
    font-weight: 500;
    letter-spacing: 1px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabatt .einlösen{
    cursor: pointer;
    color: #151515;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattInput{
    width: 100%;
    height: 0px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    margin-top: 5px;
    overflow: hidden;
    transition: 0.2s;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattInput.active{
    width: 100%;
    height: 35px;
  }

  #rabattArrow{
    transition: 0.2s;
  }
  #rabattArrow.active{
    transform: rotateZ(180deg);
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattInput .content{
    width: 100%;
    height: 35px;
    position: relative;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattInput .content input{
    width: 100%;
    height: 100%;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.5);
    background: #fff;
    outline: none;
    color: #151515;
    font-size: 14px;
    font-weight: 400;
    padding: 0px 25px 0px 0px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattInput .content input::placeholder{
    font-size: 11px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattInput .content button{
    position: absolute;
    top: 50%;
    right: 5px;
    transform: translateY(-50%);
    background: none;
    outline: none;
    border: none;
    font-size: 14px;
    color: #151515;
    cursor: pointer;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattCode{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattCode .textBox{
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattCode .textBox p{
    font-size: 16px;
    color: #151515;
    font-weight: 600;
    letter-spacing: 2px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattCode .textBox span{
    font-size: 12.5px;
    color: #151515;
    font-weight: 500;
    margin-top: 4px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattCode .closeBox{
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .rabattCode .closeBox a{
    font-size: 18px;
    color: #151515;
    font-weight: 500;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .loginCart{
    width: 100%;
    height: auto;
    margin-top: 20px;
    position: relative;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .loginCart p{
    font-size: 13px;
    color: #151515;
    font-weight: 400;
    letter-spacing: 1px;
    width: 100%;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .loginCart a{
    width: 100%;
    color: #fff;
    background: #151515;
    border: 1px solid #fff;
    border-radius: 1px;
    margin-top: 15px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    line-height: 45px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox{
    width: 100%;
    height: auto;
    margin-top: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: column;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding-top: 15px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .summe.gesamt{
    border-top: 1px solid #151515;
    padding-top: 20px;
    margin-top: 15px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .summe{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .summe p{
    font-size: 15px;
    color: #151515;
    font-weight: 700;
    letter-spacing: 1px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .summe.versand p{
    font-size: 13px;
    font-weight: 500;
    padding-bottom: 10px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .btn{
    width: 100%;
    color: #151515;
    background: none;
    border: 2px solid #d4af7a;
    border-radius: 1px;
    margin-top: 40px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    line-height: 40px;
    text-align: center;
    transition: 0.2s;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .btn:hover{
    color: #d4af7a;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .btn.notActive{
    color: #151515;
    border: 1px solid #151515;
    opacity: 0.3;
    pointer-events: none;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box{
    position: relative;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    border: 1px solid #d4af7a;
  	border-radius: 2px;
  	background: none;
  	cursor: pointer;
  	line-height: 0;
  	margin: 0 .6em 0 0;
  	outline: 0;
  	padding: 0 !important;
  	vertical-align: text-top;
  	height: 15px;
  	width: 15px;
  	-webkit-appearance: none;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box input[type=checkbox]:checked {
    background-color: none;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box input[type=checkbox]:checked:before {
    content: '';
    position: absolute;
    right: 50%;
    top: 50%;
    width: 3px;
    height: 8px;
    border: solid #d4af7a;
    border-width: 0 2px 2px 0;
    margin: -1px -1px 0 -1px;
    transform: rotate(45deg) translate(-50%, -50%);
    z-index: 2;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box .labelCheckbox {
    position: absolute;
    top: -10px;
    left: 30px;
    padding: 10px 0;
    color: #d4af7a;
    font-size: 14px;
    transition: .5s;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .user-box .labelCheckbox a{
    color: #d4af7a;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 30px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem{
    width: 100%;
    height: 38px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 20px 0;
    cursor: pointer;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem.notActive{
    pointer-events: none;
    opacity: 0.4;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem input{
    width: auto;
    height: 38px;
    position: absolute;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem label{
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #151515;
    width: 100%;
    line-height: 38px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    text-align: left;
    padding: 0 20px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem label i{
    width: 20px;
    padding-right: 20px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .paymentList .paymentItem input:checked + .paymentLabel{
    border-color: #d4af7a;
    box-shadow: 0px 0px 5px rgba(212, 175, 122, 0.4);
    color: #d4af7a;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentButtons{
    width: 100%;
    height: 70px;
    position: relative;
    margin-top: 20px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .btn-paypal{
    visibility: hidden;
    opacity: 0;
    transition: 0s;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .btn-paypal.show{
    visibility: visible;
    opacity: 1;
  }
  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox #paypal-button-container{
    pointer-events: all;
    opacity: 1;
    transition: 0s;
    z-index: 99;
  }
  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox #paypal-button-container.notActive{
    pointer-events: none;
    opacity: 0.4;
  }
  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox #payButton{
    visibility: visible;
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    margin-top: 0px;
    z-index: 100;
  }
  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox #payButton.notActive{
    opacity: 0.4;
  }
  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox #payButton.hidden{
    visibility: hidden;
    opacity: 0;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .personalisierenHinweis{
    color: #151515;
    font-weight: 500;
    font-size: 10px;
    width: 100%;
    text-align: left;
    margin-top: 7px;
    text-transform: uppercase;
    letter-spacing: 1px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .personalisierenHinweis i{
    color: #d4af7a;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout{
    margin-top: 20px;
    width: 100%;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout p{
    font-size: 10px;
    color: #151515;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    width: 100%;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout ul{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-top: 15px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout ul li{
    list-style: none;
    font-size: 13px;
    color: #151515;
    font-weight: 600;
    margin: 0px 10px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox .paymentsCheckout ul li i{
    font-size: 24px;
    margin-top: -5px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form{
    width: 100%;
    height: auto;
    margin-top: 20px;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .formPaymentItem{
    width: 100%;
    height: 35px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .formPaymentItem input{
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: none;
    border: 1px solid #151515;
    color: #151515;
    appearance: none;
    -webkit-apperance: none;
    outline: none;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .formPaymentItem input:checked{
    color: #151515;
    background: #004724;
  }

  section#warenkorbContainer .box1 .cartRow .float-right .checkoutBox form .formPaymentItem label{
    font-size: 13px;
    color: #fff;
    font-weight: 500;
    letter-spacing: 1px;
    margin-left: 15px;
  }

  section#eventBuyBox .eventBlackscreen .customerAboutBox{
    width: 95%;
  }

  section#eventBuyBox .eventBlackscreen .customerAboutBox .headline h3{
    font-size: 16px;
  }

  section#eventBuyBox .eventBlackscreen .customerAboutBox p{
    font-size: 14px;
  }

  section#eventBuyBox .eventBlackscreen .customerAboutBox .disclaimer{
    font-size: 11px;
  }

  section#eventBuyBox .eventBlackscreen .customerAboutBox .socials{
    justify-content: center;
    align-items: center;
  }

  section#eventBuyBox .eventBlackscreen .customerAboutBox .socials li{
    margin: 0px 15px;
  }

  section#eventBuyBox .eventBlackscreen .customerAboutBox .supportContacts{
    flex-direction: column;
  }

  section#eventBuyBox .eventBlackscreen .customerAboutBox .supportContacts li{
    margin: 10px 0px;
    font-size: 13px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox{
    width: 95%;
    flex-direction: column;
  }
  section#eventBuyBox .eventBlackscreen .eventBox .imgBox{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding-right: 0;
    padding-bottom: 20px;
    border-right: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    padding-left: 0;
    padding-top: 20px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox h1{
    font-family: "Roboto", sans-serif;
    font-weight: 800;
    font-size: 20px;
    color: #151515;
    letter-spacing: 5px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox h3{
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    font-size: 18px;
    letter-spacing: 3px;
    color: #151515;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox span{
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    font-size: 14px;
    color: #151511;
    margin-top: 10px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox span .dot{
    margin-left: 5px;
    margin-right: 5px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 25px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem{
    background: #D9D9D9;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px;
    height: 35px;
    border-radius: 3px;
    padding: 0px 10px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem.col-high{
    height: 40px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem.col-full{
    width: 100%;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem.col-half{
    width: 50%;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem i{
    font-size: 17px;
    color: #151515;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem .itemTextBox{
    margin-left: 5px;
    font-size: 14px;
    color: #151515;
    text-align: center;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .informationList .row .informationItem .itemTextBox g.startEvent{
    font-size: 13px;
    text-align: center;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 20px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .headline{
    font-weight: 700;
    text-transform: uppercase;
    color: #151515;
    letter-spacing: 2px;
    font-size: 11px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem{
    width: auto;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-right: 10px;
    margin-top: 10px;
    transition: 0.2s;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem:hover{
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem.soldOut{
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
    position: relative;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem.soldOut::before,
  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem.soldOut::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotateZ(17deg);
    width: 100%;
    height: 1px;
    background: rgba(0, 0, 0, 0.5);
  }
  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem.soldOut::after{
    transform: translate(-50%, -50%) rotateZ(-17deg);
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem.soldOut:hover{
    box-shadow: none;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem input{
    width: 100px;
    height: 40px;
    position: absolute;
    background: none;
    border: none;
    outline: none;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem label{
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #151515;
    width: 100%;
    line-height: 40px;
    border: 1px solid rgba(0, 0, 0, 0.5);
    text-align: center;
    padding: 0 10px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .categorieList .categorieItem input:checked + .categorieLabel{
    border-color: #d4af7a;
    box-shadow: 0px 0px 5px rgba(212, 175, 122, 0.4);
    color: #d4af7a;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons{
    margin-top: 35px;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons button{
    width: 80%;
    height: 40px;
    outline: none;
    background: none;
    border: 1px solid #151515;
    color: #151515;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    letter-spacing: 2px;
    transition: 0.2s;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons button i{
    padding-right: 10px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons button:hover{
    color: #d4af7a;
    border-color: #d4af7a;
    background: #fff;
    box-shadow: 0px 0px 20px rgba(212, 175, 122, 0.4);
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons button.notActive{
    pointer-events: none;
    opacity: 0.5;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .categorieForm .buttons a{
    width: 15%;
    line-height: 40px;
    outline: none;
    background: none;
    border: 1px solid #151515;
    color: #151515;
    font-size: 20px;
    text-align: center;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox h3.buyInformation{
    width: 100%;
    color: #151515;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
    margin-top: 30px;
  }
  section#eventBuyBox .eventBlackscreen .eventBox .textBox p.buyInformation{
    width: 100%;
    color: #151515;
    font-size: 11px;
    font-weight: 400;
    text-align: center;
    margin-top: 10px;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .moreInformation{
    margin-top: 15px;
    width: 100%;
    height: auto;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .moreInformation .personalisieren{
    width: 100%;
    height: auto;
    color: #151515;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  section#eventBuyBox .eventBlackscreen .eventBox .textBox .moreInformation .preisContent{
    width: 100%;
    height: auto;
    color: #151515;
    font-size: 11px;
    font-weight: 300;
    margin-top: 15px;
  }

  section#eventBuyBox .eventBlackscreen .downloadList{
    width: 95%;
  }

  #acmPanel header{
    padding: 0px 20px;
  }

  #acmPanel #acmInnerGrid{
    overflow-y: scroll;
    overflow-x: hidden;
    grid-template-columns: calc(100%/4) calc(100%/4) calc(100%/4) calc(100%/4);
    grid-template-rows: calc(100%/3) calc(100%/3) calc(100%/3) calc(100%/3) calc(100%/3) calc(100%/3);
    gap: 5px 2px;
    grid-template-areas:
    "box4 box4 box4 box4"
    "box1 box1 box2 box2"
    "box1 box1 box2 box2"
    "box5 box5 box5 box5"
    "box5 box5 box5 box5"
    "box3 box3 box3 box3";
  }

  #acmPanel #acmInnerGrid.abendkasseDeactivated{
    overflow-y: scroll;
    overflow-x: hidden;
    grid-template-columns: calc(100%/4) calc(100%/4) calc(100%/4) calc(100%/4);
    grid-template-rows: calc(100%/3) calc(100%/3) calc(100%/3) calc(100%/3) calc(100%/3);
    gap: 5px 2px;
    grid-template-areas:
    "box4 box4 box4 box4"
    "box1 box1 box2 box2"
    "box1 box1 box2 box2"
    "box3 box3 box3 box3"
    "box3 box3 box3 box3";
  }

  #acmPanel #acmInnerGrid #inhaltBox{
    position: fixed;
    top: 50px;
    height: calc((100% / 3) - 10px);
    z-index: 999;
    border-bottom: 2px solid #d4af7a;
  }

  #acmPanel #acmInnerGrid #statisticBox{
    padding-top: 5px;
  }

  #acmPanel #acmInnerGrid .gridBox .inputField{
    padding: 10px;
  }

  #acmPanel #acmLockScreen img{
    width: 200px;
  }
  #acmPanel #acmLockScreen h1{
    font-size: 20px;
  }

  #acmPanel #acmInnerGrid .gridBox .ticketList{
    height: calc(100% - 80px);
  }

  #ticketContentBox{
    width: 100%;
    max-height: 60%;
    overflow-y: scroll;
    padding: 20px;
  }
  #ticketContentBox .ticketInfoBox .ticketInfoHeader p{
    word-wrap: break-word;
  }
  #ticketContentBox .ticketInfoBox .ticketInformations{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    margin-top: 20px;
  }
  #ticketContentBox .ticketInfoBox .ticketInformations .textMain1,
  #ticketContentBox .ticketInfoBox .ticketInformations .textMain2{
    width: 100%;
  }
  
  #ticketContentBox .ticketInfoBox .ticketInformations .textMain2{
    margin-left: 0;
  }
  #ticketContentBox .actionBox{
    justify-content: flex-start;
    flex-direction: column-reverse;
  }
  #ticketContentBox .actionBox .left-align,
  #ticketContentBox .actionBox .right-align{
    width: 100%;
  }
  #ticketContentBox .actionBox .right-align{
    align-items: flex-start;
    padding-bottom: 40px;
  }
  #ticketContentBox .actionBox img{
    max-width: 50%;
    max-height: 70px;
  }
  #ticketContentBox .actionBox .actionBtn{
    width: 100%;
    height: auto;
    padding: 7px 0;
    text-align: center;
  }
  #ticketContentBox .ticketList{
    max-height: auto;
    overflow-y: visible;
  }
  .cartItems .cartItem.eventSelected{
    height: 120px;
  }
  .cartItems .cartItem.eventSelected .eventSelectedGrid i{
    font-size: 18px;
    height: 18px;
  }
  .cartItems.ticketList .cartItem.eventSelected .eventSelectedGrid span{
    font-size: 7px;
  }
  .cartItems.ticketList .cartItem .textBox .textMain .textMain2{
    display: none;
  }
  #eventmasterXLinkFooter{
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    justify-content: center;
    align-items: center;
    width: 100%;
  }
  
  #eventmasterXLinkFooter ul{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }

  #cookiePopup .container{
    width: 100%;
    padding: 0px 20px;
  }
  #cookiePopup .cookieHeader h3{
    font-size: 20px;
    letter-spacing: 1px;
  }
  
  #cookiePopup .textBox .cookieButtons{
    flex-direction: column;
  }
  
  #cookiePopup .textBox .cookieButtons a{
    width: 100%;
    text-align: center;
    padding: 7px 0;
    margin: 7px 0;
  }
  footer{
    width: 100%;
    height: auto;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }
  footer .row{
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: row;
    padding-left: 10px;
    padding-right: 10px;
  }
  footer .row .left{
    width: 60%;
  }
  footer .row .right{
    width: 40%;
    margin-top: 20px;
    padding-top: 10px;
    border-top: none;
  }
  footer .secList{
    margin: 20px 15px;
    padding: 15px 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  footer .secList .secItem{
    width: 50%;
    margin-top: 30px;
  }
  footer .secList .secItem:nth-child(1){
    margin-top: 0;
  }
  footer .secList .secItem:nth-child(2){
    margin-top: 0;
  }
  footer .secList .secItem h3{
    padding-bottom: 2px;
  }
  footer .secList .secItem ul li{
    list-style: none;
    margin: 5px 0;
  }
  footer .secList .secItem ul li:nth-child(1){
    margin-top: 0px;
  }
  footer .copyright{
    font-size: 11px;
    text-align: center;
  }
  footer .row .right .line.active{
    width: 100%;
    height: 90px;
  }
  section#wallpaper .blackscreen img{
    width: 50px;
    margin-top: -80px;
  }
  section#wallpaper .blackscreen h1{
    font-size: 33px;
    text-align: center;
    font-weight: 900;
  }
  section#wallpaper .blackscreen h3{
    font-size: 18px;
  }
  section#wallpaper .blackscreen a{
    margin-top: 20px;
    font-weight: 400;
    letter-spacing: 1px;
  }
  .ausschlussTextBox{
    flex-direction: column;
  }
  .ausschlussTextBox .row1{
    width: 100%;
  }
  .ausschlussTextBox .row2{
    width: 100%;
  }
  .ausschlussTextBox .row1 p{
    font-size: 18px;
  }
  .ausschlussTextBox .row1 span.subGrund{
    font-size: 15px;
  }
  .ausschlussTextBox .row2 .ausschlussBtn{
    margin-top: 50px;
  }
  .schriftzug{
    font-weight: 800;
  }
  .alert{
    background: #f9f9f9;
    position: fixed;
    right: 0;
    top: 125px;
    z-index: 3000;
    padding: 20px;
    min-width: 150px;
    border-radius: 4px;
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    overflow: hidden;
  }
  .alert.falsch{
    border-bottom: 2px solid #FF5F5F;
  }
  .alert.richtig{
    border-bottom: 2px solid #00CC00;
  }
  .alert.show{
    animation: show_slide 1s ease forwards;
  }
  @keyframes show_slide {
    0%{
      transform: translateX(100%);
    }
    40%{
      transform: translateX(-10%);
    }
    100%{
      transform: translateX(0%);
    }
  }
  @keyframes hide_slide {
    0%{
      transform: translateX(0%);
    }
    40%{
      transform: translateX(-10%);
    }
    100%{
      transform: translateX(100%);
    }
  }
  .alert .icon{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #4A4A4A;
    font-size: 25px;
  }
  .alert .msg{
    padding: 0 40px;
    font-size: 15px;
    color: #151515;
    font-family: "Roboto", sans-serif;
    font-weight: 400;
  }
  .alert .close-btn{
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.1);
    padding: 20px 18px;
    cursor: pointer;
    transition: 0.3s;
  }
  .alert .close-btn span{
    color: #4A4A4A;
    font-size: 20px;
    line-height: 40px;
  }
  section#wallpaper svg{
    width: 90%;
  }
  .slide p {
    padding: 0 20px;
  }
  .nav-btn {
    display: none;
  }
  #acmLogin.appVersion #appLoginPopup .innerBox .anmeldung .qr-code-scan{
    width: auto;
    height: auto;
    max-width: 200px;
    max-height: 200px;
  }
}

@media (max-width: 600px) and (pointer: coarse){
  #acmPanel header.appAccess{
    height: 110px;
  }
  #acmPanel header .appHeaderGradient{
    height: 60px;
    width: calc(100% + 40px);
    background: linear-gradient(0deg,rgba(255, 255, 255, 1) 0%, rgba(97, 97, 97, 1) 100%);
  }
  #ticket .logo.appAccess{
    top: 90px;
  }
  #ticket #changeKameraInput.appAccess{
    top: 160px;
  }

  #acmPanel #acmInnerGrid #inhaltBox.appAccess{
    top: 110px;
    height: calc((100% / 3) - 70px);
  }
}

@media (max-width: 900px) {
  .settingsPopupBox {
    width: calc(100% - 24px);
    height: 90vh;
    max-width: none;
    max-height: none;
    border-radius: 12px;
  }

  .settingsPopupContent {
    flex-direction: column;
  }

  .settingsSidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #ececec;
    background: #fafafa;
    padding: 12px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .settingsNavItem {
    flex: 1 1 calc(50% - 8px);
    text-align: center;
    padding: 11px 12px;
    font-size: 14px;
  }

  .settingsMainContent {
    padding: 18px;
  }

  .monitoringBox {
    flex-direction: column;
    gap: 20px;
  }

  .monitoringQrCode {
    width: 100%;
    max-width: 240px;
    min-height: 240px;
  }
}

@media (max-width: 600px) {
  .settingsPopupOverlay {
    padding: 0;
    align-items: flex-end;
    justify-content: center;
  }

  .settingsPopupBox {
    width: 100%;
    height: 90vh;
    max-width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
  }

  .settingsPopupHeader {
    padding: 16px;
  }

  .settingsPopupHeader h3 {
    font-size: 20px;
  }

  .settingsCloseBtn {
    font-size: 30px;
  }

  .settingsSidebar {
    padding: 10px;
    gap: 8px;
  }

  .settingsNavItem {
    flex: 1 1 100%;
    font-size: 14px;
    padding: 12px;
    border-radius: 8px;
  }

  .settingsMainContent {
    padding: 16px;
  }

  .settingsTabContent h4 {
    font-size: 20px;
    margin-bottom: 6px;
  }

  .settingsTabContent p {
    font-size: 15px;
    line-height: 1.5;
  }

  .settingsTabContent p span {
    font-size: 12px;
  }

  .settingsFormGroup {
    max-width: 100%;
    margin-top: 18px;
  }

  .settingsFormGroup label {
    font-size: 14px;
  }
}

@media (max-width: 380px) {
  .settingsPopupHeader h3 {
    font-size: 18px;
  }

  .settingsMainContent {
    padding: 14px;
  }

  .settingsTabContent h4 {
    font-size: 18px;
  }

  .settingsTabContent p {
    font-size: 14px;
  }

  .settingsNavItem {
    font-size: 13px;
    padding: 10px 12px;
  }

  .settingsSaveBtn,
  .settingsLinkBtn {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .ticket-buy-grid {
    grid-template-columns: 1fr !important;
    width: 100%;
  }
}