:root {
  --font-size-tiny: 10px;
  --font-size-small: 12px;
  --font-size-normal: 14px;
  --font-size-large: 16px;
  --font-size-huge: 18px;

  --header-size-tiny: 20px;
  --header-size-small: 22px;
  --header-size-normal: 24px;
  --header-size-large: 26px;
  --header-size-huge: 28px;

  --weight-normal: 400;
  --weight-bolder: 500;
  --weight-bold: 600;

  --shadow-common: 0 2px 18px 0 #e2e6ec;

  --ovvk-color-primary: #38B5CF;
  --ovvk-color-success: rgb(97, 166, 48);
  --ovvk-color-white: white;
  --ovvk-color-tinted: #eceff3;
  --ovvk-color-black: black;
  --ovvk-color-border: #dee2e6;
  --ovvk-color-grey: #5c5c5c;
  --ovvk-color-grey-light: #808080;
  --ovvk-color-disabled: #ccc;
  --ovvk-border: 1px solid var(--ovvk-color-border);
  --ovvk-border-radius: 4px;
  --ovvk-border-radius-rounder: 5px;

  --input-height: 38px;
}

/***********************************************************************************************
 *
 *        1. General Styles
 *
 ***********************************************************************************************/
.mb-rem-2 {
  margin-bottom: 2rem !important;
}

.mt-rem-2 {
  margin-top: 2rem !important;
}

.ovvk-header-section {
  margin-top: calc(60px - max(30px, 1vw)) !important;
}

#ovvk-step-1-outer-flex-container .btn:hover,
#ovvk-step-2-container .btn:hover,
#ovvk-step-3-container .btn:hover {
  opacity: 80%;
  color:  var(--ovvk-color-white) !important;
}

/***********************************************************************************************
 * Fonts
 ***********************************************************************************************/
.ovvk-ticket-shop h1,
.ovvk-ticket-shop h2,
.ovvk-ticket-shop h3,
.ovvk-ticket-shop h4,
.ovvk-ticket-shop h5,
.ovvk-ticket-shop h6 {
  font-weight: var(--weight-normal);
}

.ovvk-font-normal div {
  font-size: var(--font-size-normal) !important;
}

h3.ovvk-card-header-3 {
  font-size: var(--header-size-large) !important;
}

h5.ovvk-card-header-5 {
  font-size: var(--header-size-tiny) !important;
}

h6.ovvk-card-header-6 {
  font-size: var(--font-size-huge) !important;
}

div.ovvk-card-header {
  font-size: var(--font-size-huge) !important;
}

.ovvk-fs-12 {
  font-size: var(--font-size-small) !important;
}

.ovvk-fs-10 {
  font-size: 10px !important;
}

/***********************************************************************************************
 * Colors
 ***********************************************************************************************/
.ovvk-gray-section,
.ovvk-step-2-card,
.ovvk-step-1-card {
  background-color: var(--ovvk-color-white) !important;
  box-shadow: var(--shadow-common) !important;
}

.ovvk-bg,
.ovvk-gray-section input.ovvk-bg,
.ovvk-gray-section button.ovvk-bg {
  background-color: var(--ovvk-color-primary) !important;
  color: var(--ovvk-color-white) !important;
  border-color: var(--ovvk-color-primary) !important;
}

.ovvk-bg-danger {
  background-color: #fe667b;
}

/***********************************************************************************************
 *
 *        Step 1 and Step 2
 *
 ***********************************************************************************************/
 .ovvk-step-1-container,
 #ovvk-step-2-container {
  width: min(100%, 700px);
 } 

.ovvk-locations-hint {
  font-size: var(--font-size-small) !important;
}

.ovvk-primary-button,
.ovvk-step-1-button-container form a {
  background-color: var(--ovvk-color-primary) !important;
  color: var(--ovvk-color-white);
  border-color: var(--ovvk-color-primary) !important;
  border-radius: var(--ovvk-border-radius-rounder) !important;
  text-decoration: none;
}

.ovvk-disabled-button {
  background-color: var(--ovvk-color-disabled) !important;
  color: var(--ovvk-color-grey) !important;
  border-color: var(--ovvk-color-disabled) !important;
  border-radius: var(--ovvk-border-radius-rounder) !important;
  text-decoration: none;
}

.ovvk-step-1-card h3 {
  font-size: var(--header-size-large) !important;
}

.ovvk-step-1-card h4 {
  font-size: var(--font-size-huge) !important;
}

#ovvk-step-1-container .ovvk-step-1-card .ovvk-step-1-button-container a {
  width: 100%;
}

/* Desktop only? */
@media only screen and (min-width: 992px) {
  #ovvk-step-1-container {
    padding-right: 40%;
  }
}
#ovvk-step-1-outer-container,
#ovvk-step-2-outer-container {
  
  display:flex;
  flex-direction: column;
  align-items: center;
}
#ovvk-step-1-outer-flex-container, 
#ovvk-step-2-outer-flex-container {
  width: min(90%, 1310px);
}
/***********************************************************************************************
 *
 *        Step 3
 *
 ***********************************************************************************************/
#ovvk-step-3-container {
  margin-left: auto;
  margin-right: auto;
  max-width: min(90%, 1310px);
}

.ovvk-basket-moduleshop-item-container__header {
  font-size: var(--font-size-huge) !important;
}

#ovvk-ticket-pricing {
  font-size: var(--font-size-small) !important;
}

.ovvk-number-range {
  border-radius: 0px !important;
  border-top: var(--ovvk-border) !important;
  border-left: var(--ovvk-border) !important;
  border-right: var(--ovvk-border) !important;
  border-bottom: var(--ovvk-border) !important;
}

/* Some Hack? */
.ovvk-ticketing-module-shop-img-container img:last-child:not(img:first-child) {
  display: none;
}

/***********************************************************************************************
 * Module Shop grid
 ***********************************************************************************************/
.ovvk-basket-moduleshop-items-grid {
  display: grid;
  margin: 0 -12px;
  grid-template-columns: repeat(1, 1fr);
  column-gap: 30px;
  row-gap: 30px;
}

@media only screen and (max-width: 768px) {

  .ovvk-basket-moduleshop-item-container .card {
    display: flex !important;
    flex-direction: row !important;
  }

  .ovvk-basket-moduleshop-item-container .card .carousel {
    max-width: 40% !important;
    min-width: 40% !important;
  }

  .ovvk-basket-moduleshop-item-container .card .carousel,
  .ovvk-basket-moduleshop-item-container .card .carousel-inner {
    display: flex !important;
    justify-content: center !important;
  }

  .ovvk-basket-moduleshop-item-container .card .carousel-item {
    margin: auto !important;
  }

  .ovvk-module-item-description {
    font-size: 8px !important;
  }

  .ovvk-basket-moduleshop-item-container .card .card-body {
    border-top: unset !important;
  }

}

@media only screen and (min-width: 360px) {
  .ovvk-basket-moduleshop-items-grid {
    grid-template-columns: repeat(1, 1fr);
    row-gap: 0px;
  }
  .ovvk-basket-moduleshop-item-container {
    padding-right: 0px;
    padding-left: 0px;
  }
}

@media (min-width: 720px) {
  .ovvk-basket-moduleshop-items-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/***********************************************************************************************
 * Module Shop Items
 ***********************************************************************************************/
h4.ovvk-basket-moduleshop-item-container__header {
  padding-left: 5px;
}

.ovvk-basket-moduleshop-item-container .card-img-top {
  width: 100%;
  object-fit: fill;
}

/***********************************************************************************************
 * Payment Buttons
 ***********************************************************************************************/
div#ovvk-pre-payment-section {
  display: grid;
  /*grid-template-columns: repeat(2, 1fr);  2 columns, 3 for credit-card integration - it is set in html according to the set options*/
  column-gap: max(3vw, 10px);
}

@media (min-width: 480px) {
  div#ovvk-pre-payment-section {
    column-gap: 3vw;
    row-gap: 2rem;
  }
}
@media (min-width: 720px) {
  div#ovvk-pre-payment-section {
    column-gap: 5vw;
    row-gap: 3rem;
  }
}

button.ovvk-payment-button {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: var(--ovvk-color-white) !important;
  border: none !important;

 
  padding: 0px !important;
  width: 100%;
}


div.ovvk-paymant-image-container {
  display: flex;
  justify-content: center;
  align-items: center;

  width: min(140px, 100%);
  aspect-ratio: 1 / 1;

 
  border-width: 3px !important;
  border-style: solid !important;
  border-radius: var(--ovvk-border-radius-rounder) !important;
}




@media (min-width: 720px) {
  div.ovvk-paymant-image-container {
    aspect-ratio: initial;
    height: 120px;
    width: min(320px, 100%);
  }
}

img.ovvk-payment-image-full {
  max-width: min(140px, 90%);
}
img.ovvk-payment-image-half {
  max-width: min(70px, 50%);
}

button.ovvk-payment-button div.ovvk-paymant-image-container img.ovvk-payment-image{
  filter: grayscale(100%);
}
button.ovvk-payment-button.ovvk-payment-active div.ovvk-paymant-image-container img.ovvk-payment-image {
  filter: grayscale(0%);
}

button.ovvk-payment-button div.ovvk-paymant-image-container {
  border-color: var(--ovvk-color-grey-light);
}
button.ovvk-payment-button.ovvk-payment-active div.ovvk-paymant-image-container {
  border-color: var(--ovvk-color-success);
}

/***********************************************************************************************
 * Inputs
 ***********************************************************************************************/
.ovvk-input:not(.border-danger):not(.discount-applied),
#ovvk-pre-payment-form input:not(.border-danger),
input#ovvk-discount-input:not(.border-danger),
#ovvk-step-3-container input[type="email"]:not(.border-danger),
#ovvk-step-3-container
  input[type="text"]:not(.border-danger):not(.discount-applied) {
  border-color: var(--ovvk-color-border) !important;
}

.ovvk-input,
#ovvk-pre-payment-form input,
input#ovvk-discount-input,
#ovvk-step-3-container input[type="email"],
#ovvk-step-3-container input[type="text"],
#ovvk-step-3-container select {
  background-color: var(--ovvk-color-white) !important;
  border-radius: var(--ovvk-border-radius-rounder) !important;
}

#ovvk-step-3-container select#ovvk-time-control,
#ovvk-step-3-container select#ovvk-tickets-control,
#ovvk-step-3-container select#ovvk-additional-tickets-control {
  border-radius: 0px !important;
}

#ovvk-step-3-container select#ovvk-tickets-control {
  padding: .375rem .75rem .375rem .75rem;;
}

#ovvk-step-3-container .ovvk-dashicon-control-plus.disabled,
#ovvk-step-3-container .ovvk-dashicon-control-minus.disabled {
  background-image: none !important;
}

#ovvk-step-3-container select#ovvk-tickets-control:disabled {
  background-color: var(--ovvk-color-tinted) !important;
  border-left: unset !important;
  border-right: unset !important;
}

input#ovvk-discount-input.discount-applied {
  border-width: 3px !important;
  border-color: var(--ovvk-color-success) !important;
  box-shadow: none !important;
}

#ovvk-pre-payment-form input,
input#ovvk-discount-input {
  height: var(--input-height) !important;
}

#ovvk-step-3-container select:focus,
#ovvk-step-3-container input[type="button"]:focus {
  box-shadow: none !important;
}

#card-form label.form-label,
#card-form input.form-control,
#ovvk-pre-payment-form label.form-label,
#ovvk-pre-payment-form input.form-control {
  font-size: var(--font-size-normal) !important;
}

#card-form label.form-label,
#ovvk-pre-payment-form label.form-label {
  margin-top: 2rem !important;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/***********************************************************************************************
 * Custom Select Arrow
 ***********************************************************************************************/
#ovvk-step-3-container select {
  background-image: none !important;
  text-align: -webkit-center !important;
}

#ovvk-step-3-container  select#ovvk-jga-ticket-delivery-control,
#ovvk-step-3-container .ovvk-basket-moduleshop-items-grid select {
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 83 62"><path id="vertical-line" d="M 0,0 V 62 H 3.8 V 0 Z" style="fill:%23e6e6e6"/><path id="up-arrow" d="m 83,27 h -30 l 15,-15 z" style="fill:%23e6e6e6"/><path id="down-arrow" d="m 83,34 h -30 l 15,15 z" style="fill:%23e6e6e6"/></svg>') !important;
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 24px auto;
  -webkit-appearance: none; /* For Chrome and Safari */
  -moz-appearance: none; /* For Firefox */
  appearance: none; /* Standard syntax */
}

/***********************************************************************************************
 * Custom Checkbox
 ***********************************************************************************************/
#ovvk-step-3-container input[type="checkbox"] {
  appearance: initial !important;
  -webkit-appearance: initial !important;
}

 #ovvk-step-3-container .form-check-input:not(.border-danger) {
  border: var(--ovvk-border) !important;
}
#ovvk-step-3-container .form-check-input {
  position: relative;
}
#ovvk-step-3-container .form-check-input:active:not(.border-danger),
#ovvk-step-3-container .form-check-input:checked:not(.border-danger) {
  border: var(--ovvk-border);
}

#ovvk-step-3-container .form-check-input:active,
#ovvk-step-3-container .form-check-input:checked {
  background-color: var(--ovvk-color-white);
  filter: brightness(100%);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='rgb(89,89,89)' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

#ovvk-step-3-container .form-check-input:focus:not(.border-danger) {
  border: var(--ovvk-border) !important;
}

#ovvk-step-3-container .form-check-input:focus {
  box-shadow: none;
  background-color: var(--ovvk-color-white);
}

/***********************************************************************************************
 * Time Slot Selection
 ***********************************************************************************************/
.ovvk-dashicon-control-plus,
.ovvk-dashicon-control-minus {
  background-color: var(--ovvk-color-tinted) !important;
  height: var(--input-height) !important;
  min-width: var(--input-height) !important;

  background-repeat: no-repeat;
  background-position: center;

  border-radius: 0px !important;
  border-bottom: var(--ovvk-border) !important;
  border-top: var(--ovvk-border) !important;
}

#ovvk-step-3-container .dashicons-minus,
#ovvk-step-3-container .dashicons-plus {
  color: var(--ovvk-color-black) !important;
}

.ovvk-dashicon-control-minus {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAApSURBVHgB7cMhDgAgDASwCy/fzwGFJxMzbdIEAADgqXs3Vz6sAAAAzDmD5hDzMIpg4AAAAABJRU5ErkJggg==");

  border-top-left-radius: var(--ovvk-border-radius) !important;
  border-bottom-left-radius: var(--ovvk-border-radius-rounder) !important;

  border-left: var(--ovvk-border) !important;
  border-right: 0px !important;
}

.ovvk-dashicon-control-plus {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACgAAAAoCAYAAACM/rhtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABnSURBVHgB7dXBCYAwDIXhpzhI3bRO5iqO4AZ6CdhrTIVI/w8eLfQSGkgkAADgUC1pXZZuZiU3VIFFH6DFUekL9Kp6RsnbVDmk/8FJcaU5d7uvzfuhJIrYJDGnfoAWp7Oor00AAMDjBnk4G7dpxk0lAAAAAElFTkSuQmCC");

  border-top-right-radius: var(--ovvk-border-radius-rounder) !important;
  border-bottom-right-radius: var(--ovvk-border-radius-rounder) !important;

  border-right: var(--ovvk-border) !important;
  border-left: 0px !important;
}

/***********************************************************************************************
 * Basket
 ***********************************************************************************************/
#ovvk-submit-purchase-button {
  box-shadow: var(--shadow-common) !important;
  background-color: var(--ovvk-color-primary) !important;
  color: var(--ovvk-color-white) !important;
  border-color: var(--ovvk-color-primary) !important;
}

#ovvk-tickets-basket-item {
  line-height: 1.5;
}

.ovvk-basket-infos {
  font-size: var(--font-size-small) !important;
  color: var(--ovvk-color-grey) !important;
}

#ovvk-mobile-basket-sum-overview {
  position: fixed;
  bottom: 0px;
  left: 0px;
  background: var(--ovvk-color-primary);
  padding: 15px 20px;
  width: 100%;
  color: var(--ovvk-color-white);
  cursor: pointer;
  text-align: right;
}

#ovvk-basket {
  height: fit-content;
}

#ovvk-basket {
  font-size: var(--font-size-small) !important;
}

#ovvk-basket td {
  background-color: var(--ovvk-color-white) !important;
}

#ovvk-basket-body td:last-child {
  white-space: nowrap;
}

#ovvk-basket-head td,
#ovvk-basket-body td {
  color: black !important;
  border-radius: var(--ovvk-border-radius-rounder) !important;

  padding: 0.5rem 0.2rem !important;
}

#ovvk-basket-footer-table tbody td,
#ovvk-basket-footer-table thead td {
  padding: 0.5rem 0.2rem !important;
}

div.ovvk-basket-moduleshop-item-container div.text-center:nth-child(1) {
  font-size: var(--font-size-tiny) !important;
}

/* Desktop */
@media screen and (min-width: 784px) {
  #ovvk-basket-header {
    padding-left: calc(var(--bs-gutter-x) * 0.5) !important;
  }

  .ovvk-event-not-found-info-text {
    text-align: center;
  }
}

/***********************************************************************************************
 * Paypal Notice Popup
 ***********************************************************************************************/
#ovvk-paypal-info-popup-container {
  position: fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  display: flex;
  z-index: 3;
}

#ovvk-paypal-info-popup-container-overlay {
  background-color: var(--ovvk-color-grey-light);
  opacity: 0.7;
  height: 100%;
  width: 100%;
  position: absolute;
}

#ovvk-paypal-info-popup {
  margin: 72px auto auto auto;
  border-radius: var(--ovvk-border-radius-rounder);
  z-index: 4;
}

/***********************************************************************************************
 * Icons
 ***********************************************************************************************/
 .ovvk-person-black-icon {
  width: 10px;
  height: 10px;
 }