.av-button {
  background-color: white;
  position: relative;
  overflow: hidden;
  color: blue;
  font-weight: 600;
  display: block;
  width: 100%;
  border: 0;
  outline: 0;
  text-decoration: none;
  text-align: center;
  padding: 0.5rem 0;
  transition: all 0.1s ease;
  transform: translateZ(0);
  will-change: transition;
}
.av-button.c-regular {
  background-color: #4594ff;
  color: #fff;
}
.av-button.c-regular:hover {
  background-color: #1277ff;
}
.av-button.c-regular:focus, .av-button.c-regular:hover, .av-button.c-regular:active {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  background-color: #1277ff;
}
.av-button.c-regular:disabled {
  background-color: #78b1ff;
}
.av-button.c-danger {
  background-color: red;
  color: #fff;
}
.av-button.c-danger:hover {
  background-color: #cc0000;
}
.av-button.c-danger:focus, .av-button.c-danger:hover, .av-button.c-danger:active {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  background-color: #cc0000;
}
.av-button.c-danger:disabled {
  background-color: #ff3333;
}
.av-button.c-success {
  background-color: #0c9100;
  color: #fff;
}
.av-button.c-success:hover {
  background-color: #085e00;
}
.av-button.c-success:focus, .av-button.c-success:hover, .av-button.c-success:active {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  background-color: #085e00;
}
.av-button.c-success:disabled {
  background-color: #10c400;
}
.av-button.c-warning {
  background-color: #ffb045;
  color: #000;
}
.av-button.c-warning:hover {
  background-color: #ff9a12;
}
.av-button.c-warning:focus, .av-button.c-warning:hover, .av-button.c-warning:active {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  background-color: #ff9a12;
}
.av-button.c-warning:disabled {
  background-color: #ffc678;
}
.av-button.c-dark {
  background-color: #565656;
  color: #fff;
}
.av-button.c-dark:hover {
  background-color: #3d3d3d;
}
.av-button.c-dark:focus, .av-button.c-dark:hover, .av-button.c-dark:active {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  background-color: #3d3d3d;
}
.av-button.c-dark:disabled {
  background-color: #707070;
}
.av-button.c-light {
  background-color: #e2eeff;
  color: #000;
}
.av-button.c-light:hover {
  background-color: #afd0ff;
}
.av-button.c-light:focus, .av-button.c-light:hover, .av-button.c-light:active {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  background-color: #afd0ff;
}
.av-button.c-light:disabled {
  background-color: white;
}
.av-button.c-triadic {
  background-color: #ff7cb4;
  color: #000;
}
.av-button.c-triadic:hover {
  background-color: #ff4997;
}
.av-button.c-triadic:focus, .av-button.c-triadic:hover, .av-button.c-triadic:active {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  background-color: #ff4997;
}
.av-button.c-triadic:disabled {
  background-color: #ffafd1;
}
.av-button.c-rdark {
  background-color: #2d3949;
  color: #fff;
}
.av-button.c-rdark:hover {
  background-color: #1a2029;
}
.av-button.c-rdark:focus, .av-button.c-rdark:hover, .av-button.c-rdark:active {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.45);
  background-color: #1a2029;
}
.av-button.c-rdark:disabled {
  background-color: #405269;
}
.av-button.half-size {
  width: 50%;
}
.av-button * {
  pointer-events: none;
}

.av-button-dismiss {
  display: block;
  background-color: transparent;
  outline: 0;
  border: 0;
  font-size: 22px;
  transition: all 0.15s ease;
  transform: translateZ(0);
  will-change: transition;
}
.av-button-dismiss:hover, .av-button-dismiss:focus {
  color: rgba(0, 0, 0, 0.5);
}

@-webkit-keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}
span.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0) translateZ(0);
  -webkit-animation: ripple 600ms linear;
          animation: ripple 600ms linear;
  z-index: 50;
  pointer-events: none;
  will-change: transform, animation;
}
span.ripple.white {
  background-color: #fff;
}
span.ripple.black {
  background-color: #000;
}
span.ripple.white-75 {
  background-color: rgba(255, 255, 255, 0.75);
}
span.ripple.black-75 {
  background-color: rgba(0, 0, 0, 0.75);
}
span.ripple.regular {
  background-color: #4594ff;
}
span.ripple.danger {
  background-color: red;
}
span.ripple.success {
  background-color: #0c9100;
}
span.ripple.warning {
  background-color: #ffb045;
}
span.ripple.dark {
  background-color: #565656;
}
span.ripple.light {
  background-color: #e2eeff;
}
span.ripple.triadic {
  background-color: #ff7cb4;
}
span.ripple.rdark {
  background-color: #2d3949;
}

.av-btn-group {
  display: flex;
}

.av-text-regular {
  color: #4594ff;
}

.av-text-danger {
  color: red;
}

.av-text-success {
  color: #0c9100;
}

.av-text-warning {
  color: #ffb045;
}

.av-text-dark {
  color: #565656;
}

.av-text-light {
  color: #e2eeff;
}

.av-text-triadic {
  color: #ff7cb4;
}

.av-text-rdark {
  color: #2d3949;
}

.border-0 {
  border: 0;
}

.av-table {
  width: 100%;
  border-collapse: collapse;
}
.av-table td, .av-table th {
  border: 1px solid #d8d8d8;
  padding: 5px;
}
.av-table.light-border td, .av-table.light-border th {
  border: 0px solid #d8d8d8;
  border-top: 1px solid #d8d8d8;
}

body {
  overflow: auto;
}

.wrapper {
  height: 100vh;
  width: 100vw;
  display: grid;
  grid-template-rows: 55px auto;
  position: relative;
  overflow: hidden;
}
.wrapper .logo {
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #4594ff;
  box-shadow: 0 0 5px #565656;
}
.wrapper .logo img {
  width: auto;
  height: 80%;
}
.wrapper .content {
  display: block;
  position: relative;
  overflow: hidden;
}
.wrapper .content .selection {
  display: grid;
  width: 100%;
  height: 100%;
  padding: 10px;
  grid-template-rows: 30% 70%;
}
.wrapper .content .selection div:first-child {
  align-self: center;
  justify-self: center;
  text-align: center;
}
.wrapper .content .selection div:nth-child(2) {
  display: flex;
  flex-wrap: wrap;
  font-size: 40px;
}
.wrapper .content .av-section {
  display: block;
  position: absolute;
  overflow: hidden;
  padding: 10px;
  z-index: 1;
  right: -100vw;
  top: 0;
  width: 100%;
  height: 100%;
  transition: right 0.5s;
  background-color: white;
}
.wrapper .content .av-section.show {
  right: 0;
}
.wrapper .content .av-section.allow-overflow {
  overflow: auto !important;
}
.wrapper .content .av-section .payment-wrapper {
  position: relative;
  height: 100%;
  width: 100%;
}
.wrapper .content .av-section .payment-wrapper .plate-wrapper {
  position: relative;
}
.wrapper .content .av-section .payment-wrapper .plate-wrapper .plate-num {
  width: 270px;
  height: 66px;
  position: absolute;
  right: 50%;
  transform: translate(54%, 0%);
  text-align: center;
}
.wrapper .content .av-section .payment-wrapper .plate-wrapper .plate-num h3 {
  font-size: 42px;
  margin: 6px 0 0 0;
}
@media only screen and (max-width: 310px) {
  .wrapper .content .av-section .payment-wrapper .plate-wrapper .plate-num h3 {
    font-size: 34px;
  }
}
.wrapper .content .av-section .payment-wrapper .plate-wrapper img {
  display: block;
  width: 300px;
  margin: 15px auto;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.35);
  border-radius: 6px;
}
@media only screen and (max-width: 325px) {
  .wrapper .content .av-section .payment-wrapper .plate-wrapper img {
    width: 285px;
  }
}
@media only screen and (max-width: 310px) {
  .wrapper .content .av-section .payment-wrapper .plate-wrapper img {
    width: 245px;
  }
}
.wrapper .content .av-section .payment-wrapper .ticket-details {
  display: grid;
  grid-template: "a b" 100% "c c" 100% "d d" 100%;
  text-align: center;
  grid-template-rows: auto;
}
.wrapper .content .av-section .payment-wrapper .ticket-details .loading-spinner {
  font-size: 100px;
  margin: 0 auto;
}
.wrapper .content .av-section .payment-wrapper .ticket-details .loading-spinner svg {
  color: #4594ff;
  -webkit-animation: spinner-anim1 2s ease-in-out infinite;
          animation: spinner-anim1 2s ease-in-out infinite;
  border-radius: 50%;
}
.wrapper .content .av-section .payment-wrapper .ticket-details .grid-item-a {
  grid-area: a;
}
.wrapper .content .av-section .payment-wrapper .ticket-details .grid-item-b {
  grid-area: b;
}
.wrapper .content .av-section .payment-wrapper .ticket-details .grid-item-c {
  grid-area: c;
}
.wrapper .content .av-section .payment-wrapper .ticket-details .grid-item-d {
  grid-area: d;
}
.wrapper .content .av-section .payment-wrapper .ticket-details h5 {
  border-bottom: 1px solid #4594ff;
}
.wrapper .content .av-section .payment-wrapper .ticket-details div {
  padding: 0 5px;
}
.wrapper .content .av-section .guest-wrapper {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x {
  display: grid;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-auto-rows: auto;
  grid-gap: 5px;
  grid-template-areas: "item-1 item-2" "item-4 item-11" "item-3 item-6" "item-5 item-5" "item-7 item-7" "item-8 item-8" "item-9 item-9" "item-10 item-10" "btngroup btngroup" "btngroup btngroup";
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-1 {
  grid-area: item-1;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-2 {
  grid-area: item-2;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-3 {
  grid-area: item-3;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-4 {
  grid-area: item-4;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-5 {
  grid-area: item-5;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-6 {
  grid-area: item-6;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-7 {
  grid-area: item-7;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-8 {
  grid-area: item-8;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-9 {
  grid-area: item-9;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-10 {
  grid-area: item-10;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .grid-x .item-11 {
  grid-area: item-11;
}
.wrapper .content .av-section .guest-wrapper .inner-section-1 .av-btn-group {
  grid-area: btngroup;
}
.wrapper .content .av-section .guest-wrapper .inner-section-2 {
  position: absolute;
  width: 100%;
  height: 100%;
  right: -100vw;
  top: 0;
  z-index: 2;
  background-color: #fff;
  transition: right 0.5s;
}
.wrapper .content .av-section .guest-wrapper .inner-section-2.show {
  right: 0;
}
.wrapper .content .av-section .guest-wrapper .inner-section-2 .success-icon {
  font-size: 6rem !important;
}
.wrapper .content .av-section .section-body {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  right: 0;
  transition: right 0.5s;
  overflow: auto;
  background-color: white;
  padding: 0 5px;
}
.wrapper .content .av-section .section-body .av-btn-group {
  position: absolute;
  width: 98%;
  bottom: 6%;
  right: 1%;
}
.wrapper .content .av-section .section-body.hidden {
  right: -100vw;
}
.wrapper .content .av-section .section-body.level-1 {
  z-index: 1;
}
.wrapper .content .av-section .section-body.level-2 {
  z-index: 2;
}
.wrapper .content .av-section .section-body.level-3 {
  z-index: 3;
}
.wrapper .content .av-section .section-body .payment-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-areas: "num num" "date ccv" "email email" "phone name";
}
.wrapper .content .av-section .section-body .payment-grid .date {
  grid-area: date;
}
.wrapper .content .av-section .section-body .payment-grid .ccv {
  grid-area: ccv;
}
.wrapper .content .av-section .section-body .payment-grid .num {
  grid-area: num;
}
.wrapper .content .av-section .section-body .payment-grid .email {
  grid-area: email;
}
.wrapper .content .av-section .section-body .payment-grid .phone {
  grid-area: phone;
}

.success-resize-6 {
  font-size: 6rem !important;
}

.ovrflw-y {
  overflow-y: auto !important;
}

.spin-me {
  -webkit-animation: spinner-anim1 2s ease-in-out infinite;
          animation: spinner-anim1 2s ease-in-out infinite;
}

@-webkit-keyframes spinner-anim1 {
  0% {
    transform: rotate(0deg);
    color: #4594ff;
  }
  50% {
    color: #c5ddff;
  }
  100% {
    transform: rotate(-360deg);
    color: #4594ff;
  }
}

@keyframes spinner-anim1 {
  0% {
    transform: rotate(0deg);
    color: #4594ff;
  }
  50% {
    color: #c5ddff;
  }
  100% {
    transform: rotate(-360deg);
    color: #4594ff;
  }
}