/* MIR MEDIA Start */

@font-face {

	font-family:"SelectaBlack";

	src: url("https://live.thalia-theater.de/fonts/Selecta/SelectaBlack.woff2") format("woff2");

	font-weight: 900;

}

@font-face {

	font-family:"SelectaRegular";

	src: url("https://live.thalia-theater.de/fonts/Selecta/SelectaRegular.woff2") format("woff2");

	font-weight: 500;

}

@font-face {

	font-family:"Moderat-Rounded-Thalia-Black";

	src: url("https://live.thalia-theater.de/fonts/Moderat/Moderat-Rounded-Thalia-Black.woff2") format("woff2");

	font-weight: 900;

}

#tix-seatpicker main #floater>div, #tix-seatpicker main #floater>section>div {

    background: #ffffff !important;

}

body, #SiteHead2, .primary-c, #BuyingSteps div .text, #EventSelector td.name, #EventSelector td.date, #EventSelector .selection-heading th, #TicketSelectTitle, #TicketSelector .name, .button, .button-small, #TicketSelector .select-zone, #TicketResultText, #TicketResults th, #DeliveryTypeTitle, #DeliverySelect li label, #DeliverySelect li label span.description, #ProductSelect h2, #ProductSelect ul.tiles li.product .info h1, .product-popup-description p, .product-popup-title h2, .basket-title, .basket-line, #BuyerTitle, #CardTitle, #GiftCardTitle, #InsuranceTitle, .profile-title, .headtexttotal li, #TicketResults .sum .text, #TicketResults .sum td, .item-info, .item-list .results-items .item-details .item-info>span>span, .item-list .results-header .total .prices .text, .item-list .results-header .title h2, #BasketContainer h3, .item-list .results-header .total .prices .text, #PurchaseLogin h2, #ProfileFields .profile-heading, #ProfileBar ul li button {

	font-family: Selecta, sans-serif!important;

  	font-weight: 500!important;

}

#TicketResultText,#BasketContainer h2.fnt-bold,.results-container h2.fnt-bold,#BasketContainer h3.fnt-bold, .fnt-normal, .fnt-normal h1, .fnt-normal h2, .fnt-normal h3, .fnt-normal h4, .fnt-normal h5, h1.fnt-normal, h2.fnt-normal, h3.fnt-normal, h4.fnt-normal, h5.fnt-normal, .fnt-normal input, .fnt-normal select, .fnt-normal textarea {

    font-family: Selecta, sans-serif!important; 

  	font-weight: 500!important;

}

body, #tix-seatpicker main section #hall-container {

	background-color: #FFFFFF; 

}

#EventSelector .event-select td {

    text-transform: initial; 

}

#BuyingSteps .steps.active {

    background-color: inherit;

}

#ProfileEdit .profile-content-block, .purchase-info-box  {

  background: white;  

  border-radius: 0;

    border-bottom: 1px solid black;

}

.fnt-bold, #BuyingSteps .steps.active .text, .fnt-sbold h1, .fnt-sbold h2 {

    text-transform: uppercase;

  	font-weight: 900!important;

}

#ProfileFields #SignInSocial button.social-button {

	background: transparent;

}

.item-list .results-container, .item-list .results-container .results-items {

    border-color: black !important;

    border-radius: 0;

}

#ProfileBar #BottomBorder {

	display:none;

}

.item-list .results-items .item-details .item-info>svg {

	color: black;

}

tr.event-select.fnt-normal {

    position: relative;

}

tr.event-select.fnt-normal:after {

    border-bottom: 1px solid #000000;

    content: "";

    position: absolute;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

}

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

    border-top-left-radius: 0;

    border-bottom-left-radius: 0;

}

#EventSelector .event-select td:last-child {

    border-top-right-radius: 0;

    border-bottom-right-radius: 0;

}

#EventSelector tr.event-select:not(.selected) {

    background-color: transparent;

}

.primary-c-button:hover {

    background: #ffffff!important;

    border-color: #000000!important;

    color: #000000!important;

}

#BuyingSteps div .text {

  color: #000000;

}

#BuyingSteps div.icon {

    background: transparent !important;

    border: 1px solid;

    box-sizing: border-box;

}

#BuyingSteps .steps.active div.icon {

  background: #000000 !important;

}

/* MIR MEDIA End */

@import url("https://use.typekit.net/dyd7iiz.css");

#SiteHead2 h1.logo {

	background-image: url(https://cdn.tixly.com/de/tix/Skin/20190411/29/Images/thalia_bildmarke.png) !important;

	width: 65px !important;

  height: 65px !important;

    

    margin-top: 20px !important;

}

#SiteHead2 div.logo {

	background-image: url(https://cdn.tixly.com/de/tix/Skin/20190411/29/Images/thalia_bildmarke.png) !important;

	width: 65px !important;

  height: 65px !important;

    

    margin-top: 20px !important;

}

#BuyingHead {

	background-image: url(Images/bg.jpg);

	padding: 50px 0;

	color: #000000 !important;

}

/* #BuyingHead, .headtexttitle, #TicketSelectTitle, #TicketResultText, #BasketContainer h3 {

  	font-family: "manofa", sans-serif !important;

    font-weight: 400;

    font-style: normal;

  	letter-spacing: -2px !important;

}

body, #SiteHead2, .primary-c, #BuyingSteps div .text, #EventSelector td.name, #EventSelector td.date, #EventSelector .selection-heading th, #TicketSelector .name, .button, .button-small, #TicketSelector .select-zone, #TicketResults th, #DeliveryTypeTitle, #DeliverySelect li label, #DeliverySelect li label span.description, #ProductSelect h2, #ProductSelect ul.tiles li.product .info h1, .product-popup-description p, .product-popup-title h2, .basket-title, .basket-line, #BuyerTitle, #CardTitle, #GiftCardTitle, #InsuranceTitle, .profile-title, .headtexttotal li, #TicketResults .sum .text, #TicketResults .sum td, .item-info, .item-list .results-items .item-details .item-info>span>span, .item-list .results-header .total .prices .text, .item-list .results-header .title h2, #BasketContainer h3, .item-list .results-header .total .prices .text, #PurchaseLogin h2, #ProfileFields .profile-heading, #ProfileBar ul li button

{

font-family: "Helvetica neue", sans-serif !important;

}*/

#FooterSocial {

	display: none;

}

#SiteHead2 .headbackbutt {

	display: none;

}

.message-area h3 {

    text-align: left !important;

}

div#ChangePayment.change-event div.item-description{

    display: none;

}

div[data-value="94628"] div:nth-child(3) {

    font-size: 0px !important;

}

div[data-value="94628"] div:nth-child(3):before {

    content: "Decide later";

    font-size: 16px !important;

}

div#EventGroupEvents39737 div.results-items {

    display: none;

}

div.receipt-block.order-container div.order-event div.item-line-wrapper, div.receipt-block-split {

 display: none;

}

/* Footer Tixly text white */

#footer .copyright-text a  {

  color:  #fff !important;

}

/* Other logo dimensions on mobile */

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

#SiteHead2 h1.logo {

  	width: 48px !important;

    height: 48px !important;

    margin-top: 9px !important; }

}

   /* This also hide the horizontal line */

  #SiteHead2 .headtexttitle 

  {

    border-bottom-width: 0px !important;

  }

	

	#SiteHead2 .headtexttotal:before {

display: none !important;

}

html[lang="de"] div#TicketResultText.fnt-bold {

    font-size: 0; /* Versteckt den ursprünglichen Text */

}

html[lang="de"] div#TicketResultText.fnt-bold:before {

    content: "Ihre Tickets"; /* Setzt den neuen Text */

    font-size: 38px !important; /* Setzt die Schriftgröße */

    color: #000000; /* Setzt die Schriftfarbe */

    display: block; /* Stellt sicher, dass der Text sichtbar ist */

}

/* Hide order without account */

#SkipLogin {

display: none !important;

}

/* Hide alternative delivery address */

input.different-delivery, label[for=DeliveryAddress_UseDifferentDeliveryAddress] {

    display: none !important;

}

html[lang="de"] #Step3 div.text {

    font-size: 0; /* Versteckt den ursprünglichen Text */

}

html[lang="de"] #Step3 div.text:before {

   content: "Kund*in"; /* Setzt den neuen Text */

    font-size: 16px !important; /* Setzt die Schriftgröße */

    display: inline; /* Stellt sicher, dass der Text sichtbar ist */

}

html[lang="de"] #MollieExternalInfo.mollie-info-container.purchase-info-box.card-info-container {

    font-size: 0; /* Versteckt den ursprünglichen Text */

}

html[lang="de"] #MollieExternalInfo.mollie-info-container.purchase-info-box.card-info-container:before {

   content: "Um Ihren Kauf abzuschließen, werden Sie im nächsten Schritt an unseren Zahlungsanbieter weitergeleitet"; /* Setzt den neuen Text */

    font-size: 14px !important; /* Setzt die Schriftgröße */

    display: inline; /* Stellt sicher, dass der Text sichtbar ist */

}

/* Change occupied seat color */

.s-s.occ circle {

    fill: lightgrey !important;

    stroke: lightgrey !important;

}

.primary-bg-c.fnt-normal.badge { 

font-size: 0px !important;

}

html[lang="de"] .primary-bg-c.fnt-normal.badge:before {

    content: "ABGESAGT"; /* Texte, die angezeigt werden sollen */

    font-size: 11px; /* Einstellung der Schriftgröße */

    color: #ffffff; /* Schriftfarbe */

    display: inline; /* Stellt sicher, dass der Text inline angezeigt wird */

}

html[lang="en"] .primary-bg-c.fnt-normal.badge:before {

    content: "CANCELLED"; /* Texte, die angezeigt werden sollen */

    font-size: 11px; /* Einstellung der Schriftgröße */

    color: #ffffff; /* Schriftfarbe */

    display: inline; /* Stellt sicher, dass der Text inline angezeigt wird */

}

.event-description {

    font-size: 0px !important; 

}

.event-description :before{

    font-size: 16px !important;

    content:"Sie können für Ihren Termintausch gerne direkt in eine neue Veranstaltung buchen, indem Sie das gewünschte Datum auswählen und auf weiter klicken. Wenn Sie noch unsicher sind, an welchem Termin Sie das getauschte Ticket einlösen möchten, können Sie zunächst in die Tauschveranstaltung buchen. Sobald Sie sich entschieden haben, ändern Sie dieses Ticket in eine reale Veranstaltung."

}

/* Hide suggestions in basket */

.event-group-suggestion {

display: none;

}

div#BasketContainer > h2:first-child{

display: none;

} 

/* Umbennennung Rechnung ansehen in Bestellung ansehen */

html[lang="de"] div.sold-ticket-order.past-event a.pay-button.primary-bg-c {

    font-size: 0px !important;

}

html[lang="de"] div.sold-ticket-order.past-event a.pay-button.primary-bg-c:before {

    content: "Bestellung ansehen";

    font-size: 14px;

    color: #fff;

    font-weight: 400;

        

}

/* Umbennennung Deine Aufträge in Ihre Aufträge */

html[lang="de"] #ProfileOrders h2.profile-content-heading {

    font-size: 0px !important;

}

html[lang="de"] #ProfileOrders h2.profile-content-heading:before {

    content: "Ihre Aufträge";

    font-size: 36px;

    color: #000;

    font-weight: 700;

        

}

/* Nur E-Mail bei der Login-Anzeige */

#SignInLocal label[for="PhoneOrEmail"] {

    visibility: hidden;

    position: relative;

}

#SignInLocal label[for="PhoneOrEmail"]::after {

    content: "E-Mail";

    visibility: visible;

    position: absolute;

    top: 0;

    left: 0;

}

/* Umbennennung Reiter Reservierungen in Bestellungen*/

#ProfileBar button[data-link="#ProfileEdit"] {

   font-size: 0px !important;

}

#ProfileBar button[data-link="#ProfileEdit"]::after {

  content: "Benutzer*innen-Information";

  font-size: 16px; /* optional, damit Text sichtbar ist */

}

/* Kund*in auf der Bestätigungsseite */

/* Ursprüngliche h3 komplett ausblenden */

.left-container > h3.fnt-bold + .receipt-block.customer-container {

    position: relative;

}

.left-container > h3.fnt-bold {

    display: none;

}

/* Stattdessen den Ersatz an den Container anhängen */

.left-container > .receipt-block.customer-container::before {

    content: "KUND*IN";

    display: block;

      font-weight: bold;

    font-size: 1rem;

    margin-bottom: 0.5em;

}

/* AGB Error */

/* Originaltext ausblenden */

#TermsAndConditions-error {

  font-size: 0 !important;

}

/* Neuen Text einfügen */

#TermsAndConditions-error::before {

  content: 'Bitte akzeptieren Sie die Allgemeinen Geschäftsbedingungen und klicken Sie auf Weiter.';

  font-size: 13px !important;

}

/*AGB Test*/

/* Immer nebeneinander */

#terms-info {

  display: flex;

  align-items: center;

  gap: 0.6rem;

  flex-wrap: nowrap;            /* nie untereinander */

}

/* Checkbox: Originalgröße, nicht schrumpfen */

#terms-info .terms-checkbox {

  flex: 0 0 auto;

  margin-top: 3px;              /* optische Korrektur */

  appearance: auto;

  -webkit-appearance: checkbox;

  transform: none !important;   /* falls vorher mal skaliert wurde */

}

/* Text: flexibel, aber mit Maximalbreite */

#terms-info .fnt-normal {

  flex: 1 1 auto;

  min-width: 0;                 /* wichtig, damit Flex schrumpfen darf */

  max-inline-size: 60ch;        /* z.B. ~60 Zeichen Breite */

  line-height: 1.4;

}

/* Optional: mobil etwas schmaler, desktop breiter */

@media (max-width: 760px)   { #terms-info .fnt-normal { max-inline-size: 50ch; } }

@media (min-width: 761px)   { #terms-info .fnt-normal { max-inline-size: 100ch; } }

/*Move seat-map move on mobile so that the login bar and logo is visible*/

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

    #tix-seatpicker {

        top: 60px !important;

    }

}

/*Header in Seat picker on Mobile*/

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

    .cart-aside {

      bottom: 75px !important;

    }

}

/*Hinweis für Ermäßigungen*/
html[lang="de"] .pick-type-hint.pick-type-3 { 

font-size: 0px !important;

}


html[lang="de"] .pick-type-hint.pick-type-3:before {

    content: 'Klicken Sie auf einen Platz, um Ihre Sitzplätze nacheinander auszuwählen. Sobald ein Platz ausgewählt wurde, können Sie den Tickettyp wählen. Infos dazu, wer welchen Tickettyp auswählen darf finden Sie hier: thalia-theater.de/de/tickets#ermäßigungen Der Ermäßigungsnachweis muss am Einlass vorgezeigt werden.' !important;

    font-size: 13px !important;

}
/* Color definitions */
/* Primary */
.primary-c {
    color: #000000;
}
.primary-bg-c {
    background-color: #000000;
	color: #ffffff;
}
/* Border color as font for primary background */
.primary-bg-font-border-c {
    border-color: #ffffff;
}
.primary-border-c {
    border-color: #000000;
}
.primary-c-button {
	background-color: #000000;
    color: #ffffff;
    border-color: #000000;
}
.primary-c-button:hover {
	border-color: #000000;
    background-color: #000000;
}
.primary-c-button-secondary {
	background-color: #000000;
    color: #ffffff;
    border-color: #000000;
}
.primary-c-button-secondary:hover {
    background-color: #000000;
    color: #ffffff;
    border-color: #000000;
}
.primary-c-button-2 {
    background-color: #ffffff;
    border-color: #000000;
    color: #000000;
}
.primary-c-button-2:hover {
    background-color: #000000;
    color: #ffffff;
}
.primary-c-button-2-secondary {
    background-color: #ffffff;
    border-color: #000000;
    color: #000000;
}
.primary-c-button-2-secondary:hover {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}
.primary-c-svg svg path, svg.primary-c-svg path {
    fill: #000000;
}
/* 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: #000000;
}
#skipToContent {
    background-color: #ffffff;
    color: #000000;
    border: 1px solid #000000;
}
.ms-options li > label {
    color: #000000;
}

.header-border-text-c {
    border-color: #000000;
}
.header-c-hover-before {
    background-color: #212121;
}
.header-c-hover-before::before {
    border-color: transparent #000000 transparent transparent;
}
.header-c-hover-before:hover {
    background-color: #000000;
}
.header-c-hover-before:hover::before {
    border-color: transparent #000000 transparent transparent;
}
#header .ticket-list .ticket-table::-webkit-scrollbar {
    background-color: #ffffff;
}
#header .ticket-list .ticket-table::-webkit-scrollbar-thumb {
    background-color: #212121;
    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: #000000;
}
/* Secondary */
.secondary-c {
    color: #000000;
}
.secondary-bg-c {
    background-color: #000000;
    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: #000000;
    color: #ffffff;
}
.secondary-c-button {
    background-color: #ffffff;
    color: #000000;
    border-color: #000000;
}
.secondary-c-button:hover {
    background-color: #000000;
    border-color: #000000;
    color: #ffffff;
}
/* Tertiary */
.tertiary-c {
    color: #212121;
}
.tertiary-bg-c {
    background-color: #212121;
    color: #ffffff;
}
.tertiary-border-c {
    border-color: #212121;
}
.tertiary-c-button-secondary {
	background-color: #212121;
    color: #000000;
    border-color: #212121;
}
.tertiary-c-button-secondary:hover {
    background-color: #212121;
    color: #000000;
    border-color: #212121;
}
.tertiary-bg-c-hover:hover {
    background-color: #212121;
    color: #ffffff;
}
/* Special cases that we can't put classes on */
#BuyingHead {
    color: #fff;
    border-color: #858687;
}

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

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

/* 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: #fa4517;
    background-image: url(Images/alert.svg);
    background-repeat: no-repeat;
}
input[type='checkbox'].input-validation-error:before{
    border-color: #fa4517 !important;
}
#div-terms.validation-error {
    background-image: url(Images/alert.svg);
}
.validation-summary-errors, .field-validation-error, a.terms-and-conditions.validation-error {
    color: #fa4517;
}