@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');
* { font-family: "Oswald", sans-serif; font-optical-sizing: auto; font-style: normal; }

:root {
    --primary-color:#000;
    --secondary-color:#666;
    --tertiary-color: #999;
    --primary-font-color: #eee;
    --secondary-font-color: #999;
    --accent-color:#D8FF3A;
    --accent-color-hover:#8AA90C; 
    --primary-bg: #2C2C2F;
    --secondary-bg: #212121;
    --accent-r: 216;
    --accent-g: 255;
    --accent-b: 58;
    --black: #666;
    --white: #fff;
    --primary-font-family: font-family: "Oswald", sans-serif; font-optical-sizing: auto; font-style: normal;
}

/* DEFAULT STYLES */
html, body { background-color: var(--primary-bg); }
h1, h2, h3 { font-family: "Oswald", sans-serif !important; }
h1, h2 { color: var(--accent-color); text-transform: uppercase; }
h3 { color: var(--primary-font-color); text-transform: uppercase; }
a { color: var(--accent-color); }
a:hover, a:active, a:focus { color: var(--accent-color); }

/* BUTTONS */
.ButtonSubmit, .OnlineButtonSubmit { color: var(--primary-color); background-color: var(--accent-color); }
.ButtonSubmit:hover, .ButtonSubmit:active, .OnlineButtonSubmit:hover, .OnlineButtonSubmit:active { color: var(--white); background-color: var(--accent-color-hover) !important; }
.ButtonSubmitAlt { color: var(--primary-color); background-color: var(--accent-color); }
.ButtonSubmitAlt:hover, .ButtonSubmitAlt:active { background-color: var(--accent-color-hover); }
.ButtonSubmitMd { color: var(--primary-color); background-color: var(--accent-color); }
.ButtonSubmitMd:hover, .ButtonSubmitMd:active { color: var(--white); background-color: var(--accent-color-hover) !important; }
.ContentToggle { color: var(--primary-color); background-color: var(--accent-color); }
.ContentToggle:hover { padding: 0 8px 3px 0; }
.ContentToggle__icon { margin-top: 2px; }

/* DIALOGBOX */
.uk-modal-body .CartCheckoutFooter, .uk-modal-body .CartCheckout, .uk-modal-body .CartHeaderWrapper, .uk-modal-body .CartCheckoutNotes { background-color: var(--secondary-bg) !important; }
.uk-modal-dialog { border-radius: 15px; box-shadow: 0 1px 10px rgba(0,0,0,0.9); background-color: #212121; color: var(--primary-font-color); }
.uk-modal-close-default { color: var(--primary-font-color); }
.MyCartSummary { color: var(--primary-font-color); }
#ContactForm > div > input { border-radius: 5px;  }
#ContactForm > div > textarea { border-radius: 5px !important;  }
.BoxSignIn2 { border-radius: 20px !important; }
.SignInNewAcctHdrLabel { margin: 0 0 5px 0; }
.SignInNewAcctHdrTxt { display: none; }
.SigninBoxLabel { padding: 0 0 0 17px; }

/* HOME PAGE */
.HeroTitle, .HeroTitle span { font-family: "Oswald", sans-serif; font-optical-sizing: auto; font-style: normal; text-shadow: 0 2px 2px rgb(0, 0, 0); text-transform: uppercase; }
.TicketShopHero { margin: 0 0 0 0; height: calc(100vh - 300px); }
.TicketShopHeader, .TicketShopHeader:hover { background: rgba(255,255,255,0.25);
  backdrop-filter: saturate(1.2) blur(8px); }
.MerchandisePicturesWrapper img, .TileImgWrapper img { background-color: transparent; }
.MerchandisePicturesWrapper, .TileImgWrapper { height: 220px; border-bottom: unset; transition: transform 400ms ease; will-change: transform; }
.MerchandiseTitleWrapper, .TileTitleWrapper { position: absolute; top: calc(50% - 35px); left: 0; width: 100%; z-index: 10; background: transparent !important; }
.MerchandiseTilePicture, .TileImg { transition: transform 400ms ease; will-change: transform; }
.MerchandiseTileBox:hover .MerchandiseTilePicture,
.TileBox:hover .TileImg { transform: scale(1.06); }
#EventsHeading { color: var(--accent-color) !important; }

.MerchandiseTitle { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 18px; line-height: 1.2; text-shadow: 0 1px 2px #000; }
.MerchandiseTitle::before { content: "\f553"; font-family: "Font Awesome 6 Pro"; font-weight: 300; font-size: 24px; width: 60px; height: 60px; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box;     display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px #000; }
.TileTitle { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 18px; line-height: 1.2; text-shadow: 1px 2px #000; }
.TileTitle::before { font-family: "Font Awesome 6 Pro"; font-weight: 300; font-size: 24px; width: 60px;  height: 60px; border: 2px solid #fff; border-radius: 50%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }

/* fa-heart */
.TitleTitleDonations::before { content: "\f004"; }
/* fa-address-card */
.TitleTitleMemberships::before { content: "\f2bb"; }

.CartDisabled { color: var(--primary-color); } 
.EventTypeBtn.active { background-color: var(--accent-color); color: var(--primary-color); }
.EventTypeBtn { background-color: var(--primary-color); color: var(--primary-font-color); }
.EventInfoName { color: var(--accent-color); }
.EventVenueName { color: var(--secondary-font-color) !important;  }
.EventBox:hover { box-shadow: 0 5px 10px rgba(var(--accent-r), var(--accent-g), var(--accent-b),0.1) !important; }

.EventPictureWrapper { overflow: hidden; }
.EventPicture { transition: transform 400ms ease; will-change: transform; }
.EventBox:hover .EventPicture { transform: scale(1.06); }

.EventPictureWrapper { background-color: var(--secondary-bg); border-bottom: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.20); }
.MerchandiseTitleWrapper, .TileTitleWrapper, .EventInfoWrapper { color: var(--primary-font-color); background-color: var(--secondary-bg); }

/* FOOTER */
.TicketShopImpressum { background-color: var(--secondary-bg); border-top: 1px solid rgba(var(--accent-r), var(--accent-g), var(--accent-b), 0.20); }
.PolicyLink:hover, .ImpressumLink:hover, .SupportLink:hover, .Language:hover { color: var(--primary-font-color); }
.BrandLogo > img {
  margin: -19px 0 0 -12px;
  height: 70px !important;
}

/* EVENT PAGE */
.EventDescriptionHeader, .EventDateTimeHeader, .EventLocationHeader, .EventOrganizerHeader { color: var(--accent-color) !important; }
.EventDescription { color: var(--primary-font-color); font-weight: 300; }
.EventMeta .Cell { background-color: var(--secondary-bg); }
.EventMeta .Cell .Label { color: var(--secondary-font-color); }
.EventMeta .Cell .Value { color: var(--primary-font-color); font-weight: 300; }
.SectionWrapper { font-family: "Oswald", sans-serif !important; background-color: var(--secondary-bg); }
.SectionWrapper .EventDescription { color: var(--secondary-font-color) !important;  }
.SectionLabel { font-family: "Oswald", sans-serif !important; }
.SectionValue { font-family: "Oswald", sans-serif !important; color: var(--primary-font-color); font-weight: 300; }
.EventVenueName { color: var(--primary-font-color) !important; font-weight: 300 !important; }
.EventVenueAddress { color: var(--secondary-font-color); font-weight: 300; }
.EventOrgInfo { font-family: "Oswald", sans-serif !important; color: var(--secondary-font-color) !important; font-weight: 300 !important; }
.EventCardMobileClose { color: var(--primary-font-color); background: #353535; }
.EventCard { background-color: var(--secondary-bg); }
.CurrMonthName { font-family: "Oswald", sans-serif !important; }
.PrevMonthWrapper, .CurrMonthName, .NextMonthWrapper { color: var(--primary-font-color); }
.CalDay { color: var(--secondary-font-color); }
.CalWeekEnd { color: #aaa; }
.CalEvent { color: var(--accent-color); background-color: #353535; }
.CalEvent:hover, .CalEvent:focus { color: #000 !important; background-color: var(--accent-color); }
.CalEventActive { color: #000 !important; background-color: var(--accent-color); }
#DateSelectButtonWrapper.fixed-bottom { background-color: var(--primary-bg); box-shadow: 0 -2px 5px rgba(0,0,0,0.5); }
.CrossListingHeader { margin-bottom: 0px; color: var(--accent-color) !important; }

/* DONATION PAGE */
.TicketShopWrapper h1 { padding: 10px 0 15px 0; }
.DonationPageDescription { color: var(--primary-font-color); font-weight: 300; }
.DonationCard { color: var(--secondary-font-color); background-color: var(--secondary-bg); border: none !important; }
.DonationCardHeader { color: var(--primary-font-color); cursor: pointer; }
.expanded .DonationCardHeader { color: var(--accent-color); }

/* TICKETS */
.TicketSelectHeader .EventNotes { text-align: unset; }
.TicketSelectHeader, .RegistrationFormHeader, .MerchandiseSelectHeader { background-color: var(--accent-color); }
.TicketWrapper { border-top: 2px solid rgba(0,0,0,0.75); }
.TicketWrapper:hover { border-top: 2px solid rgb(0,0,0); }
.GroupCodeButtonSm { padding: 3px 8px 5px 8px; color: var(--white) !important;
  background-color: var(--primary-color) !important; border-radius: 25px; }
.GroupCodeButtonSm:hover { box-shadow: 0 1px 3px rgba(0,0,0,0.25); }
.TicketNotes { font-size: 14px; }

/* MERCHANDISE */
.CheckoutStepHeader { background-color: var(--accent-color); }
.EventNotes { color: var(--primary-color) !important; font-size: 16px !important; font-weight: 400; text-align: right; }
.MerchMessage { font-size: 16px; }
.MerchBackDesktop, .MerchBackMobile { float: left; padding: 5px 8px 5px 8px; font-family: "Oswald", sans-serif !important; font-size: 12px; font-weight: 300; text-transform: uppercase; }
.MerchGridItem { border-top: 2px solid rgba(0,0,0,0.75); }
.MerchGridItem:hover { border-top: 2px solid rgb(0,0,0); }

/* DONATION */
.RegistrationBackDesktop { float: left; padding: 5px 8px 5px 8px; font-family: "Oswald", sans-serif !important; font-size: 12px; font-weight: 300; text-transform: uppercase; }
.DonationInfoContent { border-top: 2px solid rgba(0,0,0,0.75) !important; }
.DonationInfoContent:hover { border-top: 2px solid rgb(0,0,0) !important; }
.DonationInfoButton { font-family: "Oswald", sans-serif !important; }
.OnlineButtonSubmitInside { border-radius: 5px !important; }

/* CART */
.uk-modal #Timer { color: var(--accent-color); }
.CartItem, .CartLine, .CartTotal, .LineValue, .TotalLine, .TotalLabel, .TotalValue { font-family: "Oswald", sans-serif !important; }
.uk-modal .CartItem, .uk-modal .ItemPrice, .uk-modal .CartLine, .uk-modal .CartTotal, .uk-modal .LineValue, .uk-modal .TotalLine, .uk-modal .TotalLabel, .uk-modal .TotalValue { color: var(--primary-font-color) !important; }
.uk-modal .CartHeader { color: var(--accent-color) !important; }
.DiscountCode { font-weight: 400 !important; }
.uk-moda .CartCheckoutNotes { color: var(--primary-font-color) !important; font-size: 14px !important; font-weight: 300 !important; }
.uk-modal .CancelCartButton { font-family: "Oswald", sans-serif !important; color: var(--primary-font-color) !important; text-transform: uppercase; }
.CancelCartButton { font-family: "Oswald", sans-serif !important; text-transform: uppercase; }
.uk-modal .ASInfoLabel { color: var(--secondary-font-color) !important; }
.uk-modal .ASInfoValue { color: var(--primary-font-color) !important; }

/* LOGIN DIALOG */
.PasswordRecoverLink .LinkTheme { color: var(--primary-font-color); }
.PasswordRecoverLink button.LinkTheme:hover, .PasswordRecoverLink button.LinkTheme:active { color: var(--secondary-font-color); }

/* GROUP CODE DIALOG */
.GroupCodeText { color: var(--primary-font-color); font-weight: 300; }

/* REGISTRATION */
.MasterPageCustomQuestions { background-color: #fff; }
.MasterPageCustomQuestions .ContentBoxInner { border-top: 2px solid rgba(0,0,0,0.75); }
.AddOnWrapper { padding: 0 20px 0 20px; }
.MasterPageCustomQuestions .TicketDateTime { font-size: 14px; color: var(--black); }
.MasterPageCustomQuestions .TicketInfo { color: var(--primary-color) !important; }

/* PAYMENT */
.MasterPagePayment { background-color: #fff; }

/* CONFIRMATION */
.ThankYou { color: var(--primary-color); background-color: var(--accent-color); }
.InfoOutline { color: var(--secondary-font-color); background-color: var(--secondary-bg); }
.OrderConfirmationMsg { color: var(--secondary-font-color); }
.TicketDateTime { font-size: 14px; color: var(--secondary-font-color); }
.TicketInfo { color: var(--primary-font-color) !important; }
.ic-calendar-label { color: var(--secondary-font-color); }
.BannerAd img { border: none !important; height: auto !important; }

/* UIKIT */
.uk-checkbox, .uk-radio { border: 1px solid rgba(255,255,255,0.4) !important; }
.uk-checkbox:checked:focus, .uk-checkbox:indeterminate:focus, .uk-radio:checked:focus { background-color: var(--secondary-color); }
.uk-modal { background-color: rgba(0, 0, 0, 0.05) !important; backdrop-filter: blur(3px); }
.uk-checkbox, .uk-radio { border: 1px solid var(--secondary-font-color) !important; }
.DonationProgressWrapper progress::-moz-progress-bar { background-color: var(--accent-color); }
.uk-button-secondary { border: 1px solid #cbcbcb; }
.uk-card-default { background-color: var(--secondary-bg); }
.uk-card-default .uk-card-footer { border-top: 1px solid rgba(255,255,255,0.2) !important; }
.uk-modal .uk-input, .uk-modal .uk-select, .uk-modal .uk-textarea { color: #ddd !important; border: 1px solid rgba(255,255,255,0.25); background-color: #252525; }
.uk-modal .uk-input, .uk-modal .uk-select, .uk-modal .uk-textarea { color: var(--primary-font-color) !important; border: 1px solid#999 !important; background-color: #252525 !important; }
.uk-modal .uk-input:focus, .uk-modal .uk-select:focus, .uk-modal .uk-textarea:focus { color: var(--primary-font-color); box-shadow: 0 0 5px rgba(198, 255, 61, 0.35); border: 1px solid var(--accent-color); background-color: #252525; }

/* auto fill option*/
.uk-modal input:autofill, .uk-modal input:autofill:hover, .uk-modal input:autofill:focus { -webkit-box-shadow: 0 0 0 1000px #252525 inset !important; box-shadow: 0 0 0 1000px #252525 inset !important; -webkit-text-fill-color: #eee !important; }
.uk-card-default { color: var(--secondary-font-color); }

@media (max-width: 860px) {
  #EventCardMobile { background: #353535; }
}
@media (max-width: 960px) {
  .AddOnWrapper { padding: 0 0 0 15px; }
}