/* ========================================

   FONTS

   ======================================== */

@font-face {

  font-family: KGL Sharp Sans;

  src: url(https://www.kglteater.dk/dist/fonts/KGLSharpSans-Book.woff2) format("woff2");

  font-weight: 400;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: KGL Sharp Sans;

  src: url(https://www.kglteater.dk/dist/fonts/kglsharpsans-medium-vertical-fixed.woff2) format("woff2");

  font-weight: 500;

  font-style: normal;

  font-display: swap;

}

@font-face {

  font-family: KGL Sharp Sans;

  src: url(https://www.kglteater.dk/dist/fonts/kglsharpsans-bold-vertical-fixed.woff2) format("woff2");

  font-weight: 700;

  font-style: normal;

  font-display: swap;

}

/* ========================================

   BASE

   ======================================== */

body {

  color: #282828 !important;

}

/* ========================================

   TYPOGRAPHY / HEADINGS

   ======================================== */

.fnt-bold h1, .fnt-bold h2, .fnt-bold h3, .fnt-bold h4, .fnt-bold h5,

h1.fnt-bold, h2.fnt-bold, h3.fnt-bold, h4.fnt-bold, h5.fnt-bold,

.fnt-sbold h1, .fnt-sbold h2, .fnt-sbold h3, .fnt-sbold h4, .fnt-sbold h5, 

h1.fnt-sbold, h2.fnt-sbold, h3.fnt-sbold, h4.fnt-sbold, h5.fnt-sbold,

#ProfileContainer .profile-content .order-title {

  font-family: 'KGL Sharp Sans', sans-serif !important;

  letter-spacing: 0.02em !important;

  font-weight: 700 !important;

}

#SiteHead2 .headtexttitle h1,

#BasketContainer h1,

#tix-seatpicker main aside .cart-content h3,

.receipt-suggestion-header,

.item-list .results-summary-container .total-line h2,

.item-list .results-header .title h2,

#PurchaseLogin h2,

#tix-seatpicker .overlay h3.ticket-type-header,

.event-group-suggestion .info h3,

#ProfileContainer .profile-content-heading {

  text-transform: uppercase;

}

h3.purchase-info-heading {

  font-weight: 500 !important;

}

.event-group-suggestion .info h3 {

  line-height: 1;

}

/* ========================================

   HEADER

   ======================================== */

#SiteHead2 {

  border-bottom: 1px solid rgb(40 40 40 / 20%) !important;

}

#SiteHead2 a.brandLogo {

  display: none !important;

}

#SiteHead2 h1.logo {

  background-image: url(Images/dkt-tixly-logo.svg);

  width: 79px;

}

#BuyingHead {

  background: #282828;

  padding: 50px 0;

  text-transform: uppercase;

  font-size: 38px;

}

/* ========================================

   FOOTER

   ======================================== */

#FooterSocial,

#footer .left-foot.bottom,

#SiteHead2 .headbackbutt {

  display: none !important;

}

#footer .right-foot.bottom a.tnc::after {

  background-color: #FFFFFF;

}

/* ========================================

   BUTTONS

   ======================================== */

.button, .button-small,

#ProfileContainer .profile-content .pay-button,

#ProfileContainer .profile-content .sold-membership-order .receipt-button, 

#ProfileContainer .profile-content .sold-giftcard-order .receipt-button,

#ProfileContainer .profile-content .pay-button {

  text-transform: uppercase;

  border-radius: 0 !important;

  font-family: 'KGL Sharp Sans', sans-serif !important;

  font-weight: 700 !important;

  box-sizing: border-box;

}

#ProfileContainer .profile-content .sold-membership-order .receipt-button, 

#ProfileContainer .profile-content .sold-giftcard-order .receipt-button {

    padding: 10px 25px !important;

    font-size: 14px !important;

    background-color: #282828 !important;

    color: #ffffff !important;

}

.refund-button, .view-seats-button, .add-product-button {

  background-color: #ffffff !important;

  border: 1px solid #282828 !important;

  color: #282828;

}

.secondary-c-button, .primary-c-button-2-secondary, .primary-c-button-2 {

  color: #FFFFFF !important;

  background: #282828 !important;

  border-color: #282828 !important;

  font-family: 'KGL Sharp Sans', sans-serif !important;

  font-weight: 700 !important;

}

.secondary-c-button:hover, .primary-c-button-2-secondary:hover, .primary-c-button-2:hover {

  border-color: #282828 !important;

  background-color: #000000 !important;

  color: #FFFFFF !important;

}

#ReceiptContainer .receipt-change-event a {

  opacity: 0.87 !important;

}

#ProfileFields #SkipLogin button {

  border: 0 !important;

  background-color: rgba(0, 0, 0, 0.05) !important;

  color: rgba(0, 0, 0, 0.8) !important;

}

#ProfileFields #SkipLogin button, 

#ProfileFields #RegisterProfile, 

#ProfileFields .login-button {

    box-sizing: border-box;

}

/* ========================================

   BORDER RADIUS RESETS

   ======================================== */

.calendar-event,

.headtexttotal .expires,

#tix-seatpicker .overlay #TicketTypeSelect .ticket-type-list .row,

#tix-seatpicker .overlay #TicketTypeSelect .ticket-type-description,

#tix-seatpicker main aside .cart-content .cart-ticket-container .cart-ticket .btn-edit,

.dropdown-body,

.item-list .results-container,

.item-list .results-summary-container,

.refund-button, .view-seats-button, .add-product-button,

#ProductSelect .tiles .product,

.purchase-info-box,

#PurchaseFields dl dd input[type='text'],

#PurchaseFields dl dd input[type='email'],

#PurchaseFields dl dd input[type='tel'],

input[type='checkbox'],

.input-line input:not([type="checkbox"]),

.input-line select,

#ProfileFields #SignInLocal input,

#ReceiptContainer .sale-item-wrapper,

#ReceiptContainer .customer-container,

#ReceiptContainer .delivery-container,

#ChangeEventGroups .event-group-container,

#ChangeEventGroups .event-group-container .image-and-info .image,

#ChangeEventContainer .chooseToggle,

#ChangeEventContainer .chooseDropDown,

#SeasonCardSelect .heading .number-of-cards .ticket-type-row,

#SeasonCardSelect .shows ul.tiles li.show,

#SeasonCardSelect .shows ul.tiles li.show .image,

#SeasonCardSelect .shows ul.tiles li.show .select-options select,

#SeasonCardSelect .shows ul.tiles li.show .select-options .event-ticket-type-select,

.basket-recommendation-container .recommendation-card,

.basket-recommendation-container .recommendation-image,

.basket-rule-wrapper,

.event-group-suggestion,

#EventSelector .event-select td,

#EventSelector .event-select td:first-child,

#ProductSelect .tiles .product .image,

#ProfileContainer .profile-content .order-image,

#ProfileContainer .profile-content .sold-ticket-order, 

#ProfileContainer .profile-content .reserved-ticket-order, 

#ProfileContainer .profile-content .sold-giftcard-order,

#ProfileMemberships .membership-container .membership-card,

#ProfileContainer .profile-content .sold-membership-container,

#GiftCardSelector li,

#TicketSelector li,

#TicketSelector .select-zone,

#TicketSelector .price-zone-dropdown,

#ProfileFields #SignInLocal .login-new-system-hint {

  border-radius: 0 !important;

}

/* ========================================

   BUYING STEPS

   ======================================== */

#BuyingSteps {

  font-weight: normal !important;

}

/* ========================================

   ERROR MESSAGES

   ======================================== */

.input-validation-error-message {

  color: #cc003c !important;

}

/* ========================================

   PROFILE PAGE

   ======================================== */

#ProfileBar ul li a.active {

    box-shadow: 0 3px 0 0 #282828 !important;

}

/* ========================================

   ORDER PAGE

   ======================================== */

.information-message-type {

    color: #282828 !important;

}

#cart-heading {

    margin-bottom: 20px;

}

/* ========================================

   TIXLY OVERRIDES

   ======================================== */

/* Hide socials on receipt page */

.receipt-block-split .social {

  display: none !important;

}

/* Hide documents in online flow */

li[onclick*="SelectDocument"],

#GetDocuments {

  display: none !important;

}

/* Hide note and edit buttons on reserved/renewal orders in my pages */

.reservation-note-button,

.reservation-edit-button {

  display: none !important;

}

/* Hide event suggestions in basket */

.receipt-suggestion-header,

.event-group-suggestion-wrapper {

  display: none;

}

/* Hide back button on subscription and season ticket flows */

#BackToTickets[href*="buyingflow/subscription"],

#BackToTickets[href*="buyingflow/seasonticket"] {

  display: none;

}

/* ========================================

   TRANSLATION HACKS (DA)

   ======================================== */

/* "Mine medlemskaber" heading in basket */

#ProfileMemberships h3.profile-content-block-heading:has(+ .membership-container) {

  font-size: 0;

}

#ProfileMemberships h3.profile-content-block-heading:has(+ .membership-container)::before {

  content: "Mine medlemskaber ";

  font-size: 1.6rem;

  font-weight: bold;

}

#ProfileMemberships h3.profile-content-block-heading:has(+ .membership-container) .count-bubble {

  font-size: 1rem;

}

/* "Hent Gavekort" text in dropdown */

li[onclick*="pdf/giftcard"] a {

  font-size: 0;

}

li[onclick*="pdf/giftcard"] a::before {

  content: "Hent Gavekort og Tilgodehavende";

  font-size: 14px;

}

/* Change tickets description text */

#ChangeEventContainer #ChangeEvent .event-description > div {

  font-size: 0;

}

#ChangeEventContainer #ChangeEvent .event-description > div::before {

  content: "Du er i gang med at flytte dine billetter til en anden event. Vælg den event og den dato, der passer dig herunder – så finder vi automatisk de ledige billetter for dig. Hvis det er muligt på den valgte event, kan du bagefter frit vælge andre pladser end dem, vi foreslår, så du ender med de pladser, der passer dig bedst.";

  display: block;

  font-size: 18px;

  margin-bottom: 1em;

}

/* Gift card button text */

#GetGiftCardPdf {

  font-size: 0;

  padding: 10px;

}

#GetGiftCardPdf::before {

  content: "Hent Gavekort og Tilgodehavende";

  font-size: 16px;

}

/* "Shop more" button text */

#BasketContainer #BasketButtons a[href*="forestillinger"],

#FloatingBasketButtons .floating-content a[href*="forestillinger"] {

  font-size: 0;

}

#BasketContainer #BasketButtons a[href*="forestillinger"]::before,

#FloatingBasketButtons .floating-content a[href*="forestillinger"]::before {

  content: "Gå til alle oplevelser";

  font-size: 16px;

}

#BasketContainer #BasketButtons a[href*="forestillinger"] svg,

#FloatingBasketButtons .floating-content a[href*="forestillinger"] svg {

  width: 14px;

  height: 14px;

}

/* ========================================

   TRANSLATED ERROR MESSAGES (DA)

   ======================================== */

html[lang="da"] .input-validation-error-message {

  font-size: 0;

}

html[lang="da"] .input-validation-error-message::before {

  display: block;

  font-size: 14px;

}

html[lang="da"] #Name + .input-validation-error-message::before {

  content: "Navn-feltet er påkrævet.";

}

html[lang="da"] #Email + .input-validation-error-message::before {

  content: "E-mail-feltet er påkrævet.";

}

html[lang="da"] #EmailConfirm + .input-validation-error-message::before {

  content: "Bekræft e-mail-feltet er påkrævet.";

}

html[lang="da"] #Mobile + .input-validation-error-message::before {

  content: "Mobil-feltet er påkrævet.";

}

html[lang="da"] #NewPassword + .input-validation-error-message::before {

  content: "Adgangskode-feltet er påkrævet.";

}

html[lang="da"] #BuyerInfo .input-validation-error-message {

  font-size: 0;

}

html[lang="da"] #BuyerInfo .input-validation-error-message::before {

  content: "Dette felt skal udfyldes.";

  display: block;

  font-size: 14px;

}

html[lang="da"] #BuyerInfo .email-field + .input-validation-error-message::before {

  content: "Indtast venligst en gyldig e-mailadresse.";

}

/* Change "Vilkår" to "Handelsbetingelser" in footer */

#footer .right-foot.bottom a[href*="/da/lightbox/termsandconditions/"] {

  font-size: 0 !important;

  line-height: 0 !important;

  color: transparent !important;

}

#footer .right-foot.bottom a[href*="/da/lightbox/termsandconditions/"]::before {

  content: "Handelsbetingelser";

  font-size: 14px !important;

  color: #FFFFFF !important;

}

/* Change "Persondata" to "Privatlivspolitik" in footer */

#footer .right-foot.bottom a[href*="/da/lightbox/privacypolicy/"] {

  font-size: 0 !important;

  line-height: 0 !important;

  color: transparent !important;

}

#footer .right-foot.bottom a[href*="/da/lightbox/privacypolicy/"]::before {

  content: "Privatlivspolitik";

  font-size: 14px !important;

  color: #FFFFFF !important;

}

/* Makes seatpicker alert visible on top */

#tix-seatpicker main > div.picker-alert {

  z-index: 3;

}

/* ========================================

   RESPONSIVE

   ======================================== */

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

  #footer .right-foot.bottom a[href*="/da/lightbox/termsandconditions/"] {

    font-size: 0 !important;

    line-height: 0 !important;

    color: transparent !important;

  }

  #footer .right-foot.bottom a[href*="/da/lightbox/termsandconditions/"]::before {

    content: "Handelsbetingelser";

    font-size: 14px !important;

    color: #FFFFFF !important;

  }

  #footer .right-foot.bottom a[href*="/da/lightbox/privacypolicy/"] {

    font-size: 0 !important;

    line-height: 0 !important;

    color: transparent !important;

  }

  #footer .right-foot.bottom a[href*="/da/lightbox/privacypolicy/"]::before {

    content: "Privatlivspolitik";

    font-size: 14px !important;

    color: #FFFFFF !important;

  }

}

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

  #SiteHead2 h1.logo {

    height: 45px;

  }

  .headtexttitle {

    display: none !important;

  }

}

/* Color definitions */
/* Primary */
.primary-c {
    color: #282828;
}
.primary-bg-c {
    background-color: #282828;
	color: #ffffff;
}
/* Border color as font for primary background */
.primary-bg-font-border-c {
    border-color: #ffffff;
}
.primary-border-c {
    border-color: #282828;
}
.primary-c-button {
	background-color: #282828;
    color: #ffffff;
    border-color: #282828;
}
.primary-c-button:hover {
	border-color: #131313;
    background-color: #131313;
}
.primary-c-button-secondary {
	background-color: #282828;
    color: #ffffff;
    border-color: #282828;
}
.primary-c-button-secondary:hover {
    background-color: #282828;
    color: #ffffff;
    border-color: #282828;
}
.primary-c-button-2 {
    background-color: #ffffff;
    border-color: #282828;
    color: #282828;
}
.primary-c-button-2:hover {
    background-color: #282828;
    color: #ffffff;
}
.primary-c-button-2-secondary {
    background-color: #ffffff;
    border-color: #282828;
    color: #282828;
}
.primary-c-button-2-secondary:hover {
    background-color: #282828;
    border-color: #282828;
    color: #ffffff;
}
.primary-c-svg svg path, svg.primary-c-svg path {
    fill: #282828;
}
/* Special for header */
.header-c-gradient-right::before {
    background: rgba(255,255,255,0);
    background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff', GradientType=1 );
}
.header-bg-c {
    background-color: #ffffff;
    color: #282828;
}
#skipToContent {
    background-color: #ffffff;
    color: #282828;
    border: 1px solid #282828;
}
.ms-options li > label {
    color: #282828;
}

.header-border-text-c {
    border-color: #282828;
}
.header-c-hover-before {
    background-color: #282828;
}
.header-c-hover-before::before {
    border-color: transparent #282828 transparent transparent;
}
.header-c-hover-before:hover {
    background-color: #282828;
}
.header-c-hover-before:hover::before {
    border-color: transparent #282828 transparent transparent;
}
#header .ticket-list .ticket-table::-webkit-scrollbar {
    background-color: #ffffff;
}
#header .ticket-list .ticket-table::-webkit-scrollbar-thumb {
    background-color: #282828;
    border-color: #ffffff;
}
#header .ticket-list .ticket-table table tbody td {
    border-color: #ffffff;
}
#header .ticket-list .ticket-table table td.event span.dash {
    color: #ffffff;
}
.footer-highlight-c {
    color: #ffffff;
}
.content-inline-heading, .content-table-heading th {
     color: #282828;
}
/* Secondary */
.secondary-c {
    color: #282828;
}
.secondary-bg-c {
    background-color: #282828;
    color: #ffffff;
}
/* Border color as font for secondary background */
.secondary-bg-font-border-c-before:before {
    border-color: #ffffff;
}
/* Border color as font for secondary background */
.secondary-bg-font-border-c-hover:hover {
    border-color: #ffffff;
}
.secondary-bg-c-hover:hover {
    background-color: #282828;
    color: #ffffff;
}
.secondary-c-button {
    background-color: #ffffff;
    color: #282828;
    border-color: #282828;
}
.secondary-c-button:hover {
    background-color: #282828;
    border-color: #282828;
    color: #ffffff;
}
/* Tertiary */
.tertiary-c {
    color: #282828;
}
.tertiary-bg-c {
    background-color: #282828;
    color: #ffffff;
}
.tertiary-border-c {
    border-color: #282828;
}
.tertiary-c-button-secondary {
	background-color: #282828;
    color: #282828;
    border-color: #282828;
}
.tertiary-c-button-secondary:hover {
    background-color: #282828;
    color: #282828;
    border-color: #282828;
}
.tertiary-bg-c-hover:hover {
    background-color: #282828;
    color: #ffffff;
}
/* Special cases that we can't put classes on */
#BuyingHead {
    color: #fff;
    border-color: #858687;
}

#SiteHead2 {
    border-bottom: 1px solid #282828;
}

#BuyingSteps div.icon {
    background: rgba(40,40,40,.15);
}
#BuyingSteps .steps.active div.icon {
    background: #282828;
}
#SectionGroups li.selected-group a {
    background: #282828;
    color: #ffffff;
}
#ProfileBar ul li button.active {
    color: #282828;
    box-shadow: 0 3px 0px 0px #282828;
}
#CardType > li.active, #GiftCardDescription p a {
    color: #282828;
}
#CardType li.active svg path, #CardType li.active svg rect {
    fill: #282828;
}
#SiteHead2 .headtexttotal .tickets > a > span > svg path {
    stroke: #282828;
}
#ProfileOrders .order-receipt-link a > span > svg path {
    stroke: #282828;
}
#ProfileContainer .profile-content .order-receipt-link a > span > svg path {
    stroke: #282828;
}
#BuyingSteps.profile-steps .steps.active .text {
    color: #282828;
}
#SiteHead2 .profile-language-bar > a > span > svg path,
#SiteHead2 .profile-language-bar > a > span > svg circle {
    stroke: #282828;
}
#GiftCardDescription p a:hover {
    color: #131313;
}
#EventSelector .selected td.toggle a {
    border-color: transparent transparent #282828 transparent;
}
input[type='checkbox']:checked {
    background-color: #282828;
}
.clndr-grid .day.selected, .calendar-event.selected, .month-dropdown button.selected {
    background-color: #ffffff;
    color: #282828;
}

/* Nice little special block for validation colors */
input[type='text'].input-validation-error,
input[type='email'].input-validation-error,
input[type='tel'].input-validation-error,
input[type='date'].input-validation-error,
input[type='password'].input-validation-error,
textarea.input-validation-error,
.field-validation-error > span {
    border-color: #cc003c;
    background-image: url(Images/alert.svg);
    background-repeat: no-repeat;
}
input[type='checkbox'].input-validation-error:before{
    border-color: #cc003c !important;
}
#div-terms.validation-error {
    background-image: url(Images/alert.svg);
}
.validation-summary-errors, .field-validation-error, a.terms-and-conditions.validation-error {
    color: #cc003c;
}