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

   HEADER / BRANDING

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

#SiteHead2 a.brandLogo { display: none !important; }

#SiteHead2 h1.logo {

  background-image: url(https://cdn.tixly.com/fi/tix/Skin/20210915/51/Images/tkt_logo.svg) !important;

  width: 50px !important;

}

#BuyingHead {

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

  padding: 50px 0;

  color: #000000 !important;

}

#FooterSocial { display: none; }

#SiteHead2 .headbackbutt { display: none; }

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

   TABLES / ICONS

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

th.name, th.location, th.price, th.date { color: #000000 !important; }

div.icon { background: #dad8d6; }

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

   BUTTONS

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

.button { border-radius: 0px !important; }

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

   TYPOGRAPHY

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

.fnt-bold,

.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-bold input, .fnt-bold select, .fnt-bold textarea,

strong, b,

.fnt-sbold h3, .fnt-sbold h2 {

  font-family: Helvetica !important;

}

.fnt-sbold,

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

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

.fnt-sbold input, .fnt-sbold select, .fnt-sbold textarea {

  font-family: Helvetica !important;

}

.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,

.item-list .results-header .title .sub-title {

  font-family: Helvetica !important;

}

.fnt-light,

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

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

.fnt-light input, .fnt-light select, .fnt-light textarea {

  font-family: Helvetica !important;

}

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

   BASKET CLEANUP

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

.event-group-suggestion,

.receipt-suggestion-header { display: none; }

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

   SEAT MAP (IMPORTANT PART)

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

/* SOLD / unavailable seats → white fill + dark outline */

#tix-seatpicker .s-s.occ circle,
#tix-seatpicker .s-s.occ path,
#tix-seatpicker .s-s.occ rect,
#tix-seatpicker .s-s.occ polygon {

  fill: #d4d4d4 !important;
  stroke: none !important;

}

/* SELECTED seat → brand green fill + outline */

#tix-seatpicker .s-s.your-seat circle,

#tix-seatpicker .s-s.your-seat path,

#tix-seatpicker .s-s.your-seat rect,

#tix-seatpicker .s-s.your-seat polygon {

  fill: #00855f !important;

  stroke: #00855f !important;

  stroke-width: 3 !important;

  animation: none !important;

}

/* Default free seats: keep white fill (so only outline shows colour) */

#tix-seatpicker .s-s:not(.occ):not(.your-seat) circle,

#tix-seatpicker .s-s:not(.occ):not(.your-seat) path,

#tix-seatpicker .s-s:not(.occ):not(.your-seat) rect,

#tix-seatpicker .s-s:not(.occ):not(.your-seat) polygon {

  fill: #ffffff !important;

}

/* Hover on free seats – subtle */

#tix-seatpicker .s-s:not(.occ):not(.your-seat):hover circle,

#tix-seatpicker .s-s:not(.occ):not(.your-seat):hover path,

#tix-seatpicker .s-s:not(.occ):not(.your-seat):hover rect,

#tix-seatpicker .s-s:not(.occ):not(.your-seat):hover polygon {

  opacity: 0.85;

}

/* Seat numbers (keep readable) */

#tix-seatpicker text {

  fill: #000000 !important;

}

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

   CATEGORY COLOURS (OUTLINE = stroke)

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

/* CAT 1 → #00855f */

#tix-seatpicker .cat-1 circle,

#tix-seatpicker .cat-1 path,

#tix-seatpicker .cat-1 rect,

#tix-seatpicker .cat-1 polygon,

#tix-seatpicker .s-s.cat-1 circle,

#tix-seatpicker .s-s.cat-1 path,

#tix-seatpicker .s-s.cat-1 rect,

#tix-seatpicker .s-s.cat-1 polygon {

  stroke: #00855f !important;

  stroke-width: 2 !important;

}

/* CAT 2 → #00A791 */

#tix-seatpicker .cat-2 circle,

#tix-seatpicker .cat-2 path,

#tix-seatpicker .cat-2 rect,

#tix-seatpicker .cat-2 polygon,

#tix-seatpicker .s-s.cat-2 circle,

#tix-seatpicker .s-s.cat-2 path,

#tix-seatpicker .s-s.cat-2 rect,

#tix-seatpicker .s-s.cat-2 polygon {

  stroke: #00A791 !important;

  stroke-width: 2 !important;

}

/* CAT 3 → #f26522 */

#tix-seatpicker .cat-3 circle,

#tix-seatpicker .cat-3 path,

#tix-seatpicker .cat-3 rect,

#tix-seatpicker .cat-3 polygon,

#tix-seatpicker .s-s.cat-3 circle,

#tix-seatpicker .s-s.cat-3 path,

#tix-seatpicker .s-s.cat-3 rect,

#tix-seatpicker .s-s.cat-3 polygon {

  stroke: #f26522 !important;

  stroke-width: 2 !important;

}

/* Ensure selected seat always wins over category colours */

#tix-seatpicker .s-s.your-seat circle,

#tix-seatpicker .s-s.your-seat path,

#tix-seatpicker .s-s.your-seat rect,

#tix-seatpicker .s-s.your-seat polygon {

  stroke: #00855f !important;

}

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

   Event product categories Header

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

#ProductSelect h2 {

  font-size: 30px !important;

  margin: 20px !important;

  padding: 20px !important;

  border: 2px solid #000000 !important;

}

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

   SEAT OUTLINE COLOUR REMAP (PUT THIS AT THE VERY BOTTOM)

   Works even when Tixly uses inline SVG stroke/fill values.

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

/* 1) PINK/MAGENTA outlines -> #00855f */

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#D02F5C"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#d02f5c"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [style*="stroke:#D02F5C"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [style*="stroke:#d02f5c"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [style*="stroke: rgb(208, 47, 92)"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [style*="stroke:rgb(208,47,92)"] {

  stroke: #00855f !important;

}

/* 2) GREEN outlines -> #00A791  (Tixly greens vary slightly, so we include common values) */

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#2E9E57"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#2e9e57"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#4AA45A"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#4aa45a"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#5DBB63"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#5dbb63"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [style*="stroke: rgb(74, 164, 90)"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [style*="stroke:rgb(74,164,90)"] {

  stroke: #00A791 !important;

}

/* 3) ORANGE outlines -> #f26522 */

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#F26522"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#f26522"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#F7941D"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [stroke="#f7941d"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [style*="stroke: rgb(242, 101, 34)"],

#tix-seatpicker .s-s:not(.occ):not(.your-seat) [style*="stroke:rgb(242,101,34)"] {

  stroke: #f26522 !important;

}

/* Keep seat fill white so only outlines show the colour */

#tix-seatpicker .s-s:not(.occ):not(.your-seat) circle,

#tix-seatpicker .s-s:not(.occ):not(.your-seat) path,

#tix-seatpicker .s-s:not(.occ):not(.your-seat) rect,

#tix-seatpicker .s-s:not(.occ):not(.your-seat) polygon {

  fill: #ffffff !important;

}

/* Selected seat always wins */

#tix-seatpicker .s-s.your-seat circle,

#tix-seatpicker .s-s.your-seat path,

#tix-seatpicker .s-s.your-seat rect,

#tix-seatpicker .s-s.your-seat polygon {

  fill: #00855f !important;

  stroke: #00855f !important;

  stroke-width: 3 !important;

}

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

   REMAP SEAT COLOURS

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

/* Pink seats (#e30a5a) -> #00855f */

#tix-seatpicker svg [stroke="#e30a5a"],

#tix-seatpicker svg [stroke="#E30A5A"],

#tix-seatpicker svg [style*="stroke:#e30a5a"],

#tix-seatpicker svg [style*="stroke:#E30A5A"] {

  stroke: #00855f !important;

}

/* Green seats -> #00A791 */

#tix-seatpicker svg [stroke="#1aa85b"],

#tix-seatpicker svg [stroke="#1AA85B"],

#tix-seatpicker svg [style*="stroke:#1aa85b"] {

  stroke: #00A791 !important;

}

/* Orange seats -> #f26522 */

#tix-seatpicker svg [stroke="#f26522"],

#tix-seatpicker svg [stroke="#F26522"],

#tix-seatpicker svg [style*="stroke:#f26522"] {

  stroke: #f26522 !important;

}

/* Keep seats white inside */

#tix-seatpicker .s-s circle,

#tix-seatpicker .s-s path,

#tix-seatpicker .s-s rect,

#tix-seatpicker .s-s polygon {

  fill: #ffffff !important;

}


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

.header-border-text-c {
    border-color: #ffffff;
}
.header-c-hover-before {
    background-color: #0f0f0f;
}
.header-c-hover-before::before {
    border-color: transparent #00855f transparent transparent;
}
.header-c-hover-before:hover {
    background-color: #00855f;
}
.header-c-hover-before:hover::before {
    border-color: transparent #ffffff transparent transparent;
}
#header .ticket-list .ticket-table::-webkit-scrollbar {
    background-color: #0f0f0f;
}
#header .ticket-list .ticket-table::-webkit-scrollbar-thumb {
    background-color: #0f0f0f;
    border-color: #0f0f0f;
}
#header .ticket-list .ticket-table table tbody td {
    border-color: #0f0f0f;
}
#header .ticket-list .ticket-table table td.event span.dash {
    color: #0f0f0f;
}
.footer-highlight-c {
    color: #ffffff;
}
.content-inline-heading, .content-table-heading th {
     color: #aaaaaa;
}
/* Secondary */
.secondary-c {
    color: #0f0f0f;
}
.secondary-bg-c {
    background-color: #0f0f0f;
    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: #0f0f0f;
    color: #ffffff;
}
.secondary-c-button {
    background-color: #ffffff;
    color: #0f0f0f;
    border-color: #0f0f0f;
}
.secondary-c-button:hover {
    background-color: #0f0f0f;
    border-color: #0f0f0f;
    color: #ffffff;
}
/* Tertiary */
.tertiary-c {
    color: #0f0f0f;
}
.tertiary-bg-c {
    background-color: #0f0f0f;
    color: #ffffff;
}
.tertiary-border-c {
    border-color: #0f0f0f;
}
.tertiary-c-button-secondary {
	background-color: #0f0f0f;
    color: #00855f;
    border-color: #0f0f0f;
}
.tertiary-c-button-secondary:hover {
    background-color: #0f0f0f;
    color: #0f0f0f;
    border-color: #0f0f0f;
}
.tertiary-bg-c-hover:hover {
    background-color: #0f0f0f;
    color: #ffffff;
}
/* Special cases that we can't put classes on */
#BuyingHead {
    color: #fff;
    border-color: #858687;
}

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

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