/* Variables */
/* Custom fonts */
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,700;1,400;1,700&display=swap");
* {
  font-family: "Poppins", sans-serif !important;
}

/* Breakpoints */
/* 769px to 1034px */
/* 768px and up */
/* 1400px and up */
/* 1035px to 1399px */
/* 1px to 768px */
/* 480px to 768px */
/* HEADER */
#header #SiteHead2 {
  margin-right: 15px;
}
@media only screen and (min-width: 769px) and (max-width: 1034px) {
  #header #SiteHead2 {
    height: 100px;
  }
}
#header #SiteHead2 a.brandLogo, #header #SiteHead2 .headbackbutt, #header #SiteHead2 .profile-language-bar .language-currency-link {
  display: none;
}
#header #SiteHead2 > a > h1.logo {
  background-image: url("https://cdn.tixly.com/uk/tix/Skin/20210630/129/Images/quaytickets_logo_whitetext.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
  width: 198px;
  margin-top: 30px;
}
@media only screen and (max-width: 768px) {
  #header #SiteHead2 > a > h1.logo {
    width: 150px;
    margin-top: 15px;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1034px) {
  #header #SiteHead2 > a > h1.logo {
    width: 150px;
    margin-top: 30px;
  }
}
#header #SiteHead2 .primary-c.basket-items {
  color: #ffffff;
}
#header #SiteHead2 .headtexttotal .tickets svg.primary-c {
  filter: brightness(150%);
}
#header #SiteHead2 .headtexttotal::before {
  display: none;
}
#header #SiteHead2 .headtexttitle {
  width: 50%;
  position: relative;
  margin-right: 15px;
}
@media only screen and (min-width: 1400px) {
  #header #SiteHead2 .headtexttitle {
    width: 50%;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1034px) {
  #header #SiteHead2 .headtexttitle {
    width: 24%;
    margin-top: 5px;
    height: 90px;
  }
}
@media only screen and (min-width: 1035px) and (max-width: 1399px) {
  #header #SiteHead2 .headtexttitle {
    width: 40%;
    margin-top: 19px;
  }
}
@media only screen and (max-width: 768px) {
  #header #SiteHead2 .headtexttitle {
    display: none;
  }
}
#header #SiteHead2 .headtexttitle h1 {
  font-size: 22px;
  line-height: 28px;
}
@media only screen and (min-width: 769px) and (max-width: 1034px) {
  #header #SiteHead2 .headtexttitle h1 {
    font-size: 16px;
    line-height: 20px;
    height: 100px;
    overflow: hidden;
  }
}
@media only screen and (min-width: 1035px) and (max-width: 1399px) {
  #header #SiteHead2 .headtexttitle h1 {
    font-size: 18px;
    line-height: 24px;
  }
}
@media only screen and (max-width: 768px) {
  #header #SiteHead2 .headtexttitle h1 {
    font-size: 16px;
    line-height: 20px;
    height: 63px;
    overflow: hidden;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1034px) {
  #header #SiteHead2 .headtexttitle::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 30px;
    background: linear-gradient(to bottom, rgba(34, 31, 33, 0) 0%, rgb(34, 31, 33) 100%);
  }
}
@media only screen and (max-width: 768px) {
  #header #SiteHead2 .headtexttitle::before {
    display: none;
  }
}
#header #BuyingHead {
  padding: 50px 0;
  color: #000000;
  margin: 0 30px;
}
@media only screen and (max-width: 768px) {
  #header #BuyingHead {
    padding: 30px 0 0 0;
  }
}
#header #BuyingSteps .steps.active div.icon {
  color: #ffffff;
}

/* Content - All Pages */
body h3#cart-heading {
  margin-bottom: 15px;
}
body a.button:hover {
  transition: border-color 0s ease;
}
body .button {
  padding: 10px 15px;
  border-width: 1px;
  border-radius: 50px;
  line-height: 1.4;
  height: unset;
  width: unset;
}
body .primary-c-button {
  font-weight: bold;
  color: #ffffff;
}
body .primary-c-button-2 {
  background-color: #FFFFFF;
  border-color: #FFFFFF;
  color: #FFFFFF;
}
body .primary-c-button-2:hover {
  border-color: transparent;
}
body .secondary-c-button {
  border: 1px solid #0075ab;
}
body .information-message-type {
  color: #221f21;
}
body #SignInLocal {
  display: flex;
  flex-direction: column;
}
body .login-new-system-hint {
  order: -1;
}

/* Basket Page */
#BasketContainer h2.receipt-suggestion-header, #BasketContainer .row.event-group-suggestion-wrapper {
  display: none;
}
#BasketContainer .basket-recommendation-container .recommendation-card > div:first-of-type {
  background: #221f21 !important;
}
#BasketContainer .basket-recommendation-container .primary-c-button-secondary {
  background: #221f21 !important;
  border: 1px solid #221f21 !important;
  color: #ffffff !important;
}

#EventSelector tr.selection-heading th.price {
  visibility: hidden !important;
}
#EventSelector tr.event-select {
  background-color: #0075ab;
  color: #ffffff;
  position: relative;
}
#EventSelector tr.event-select td.toggle a {
  background-color: #0075ab;
  color: #FFFFFF;
}
@media only screen and (min-width: 769px) {
  #EventSelector tr.event-select td.name {
    position: absolute;
    top: 0;
    bottom: 0;
    overflow: hidden;
    box-sizing: border-box;
    padding: 0;
    color: #FFF;
    margin: 15px;
    width: 35%;
  }
}
@media only screen and (max-width: 768px) {
  #EventSelector tr.event-select td.name {
    padding-top: 22px;
  }
}
#EventSelector tr.event-select td.price {
  display: none;
}
@media only screen and (max-width: 768px) {
  #EventSelector tr.event-select td.availability {
    width: 100%;
  }
}
@media only screen and (min-width: 480px) and (max-width: 768px) {
  #EventSelector tr.event-select td.availability {
    width: auto;
  }
}
@media only screen and (max-width: 768px) {
  #EventSelector tr.event-select td.availability div.red {
    width: 100%;
  }
}
@media only screen and (max-width: 768px) {
  #EventSelector tr.event-select td.availability div.red::before {
    top: 0px;
    left: calc(50% - 7px);
  }
}
#EventSelector tr.event-select:not(.selected) {
  background-color: #eeeeee;
  color: #221f21;
}
#EventSelector tr.event-select:not(.selected) td.toggle a {
  background-color: #eeeeee;
  color: #221f21;
}
#EventSelector tr.event-select:not(.selected):hover {
  background-color: #0075ab;
  color: #ffffff;
}
#EventSelector tr.event-select:not(.selected):hover td.toggle a {
  background-color: #0075ab;
  color: #ffffff;
}
#EventSelector tr.ticket-finder #TicketSelector li {
  width: 250px;
}
#EventSelector tr.ticket-finder #TicketSelector li .select-zone.secondary-bg-c {
  background-color: #0075ab;
}
#EventSelector tr.ticket-finder #TicketSelector li .select-zone.secondary-bg-c svg {
  color: #FFFFFF;
}
#EventSelector tr.ticket-finder #TicketSelector li .name {
  white-space: normal !important;
  text-overflow: clip !important;
  overflow: visible !important;
  line-height: 1.2em !important;
  min-height: 2.4em !important;
}

/* SEAT PICKER PAGE */
#tix-seatpicker .s-s.occ circle {
  fill: lightgrey !important;
  stroke: lightgrey !important;
}
#tix-seatpicker g[data-price-zone-id="1"].s-s.clk circle {
  fill: #76a5af;
}
#tix-seatpicker g[data-price-zone-id="2"].s-s.clk circle {
  fill: #339900;
}
#tix-seatpicker g[data-price-zone-id="3"].s-s.clk circle {
  fill: #0033ff;
}
#tix-seatpicker g[data-price-zone-id="4"].s-s.clk circle {
  fill: #73b7ff;
}
#tix-seatpicker g[data-price-zone-id="5"].s-s.clk circle {
  fill: orange;
}
#tix-seatpicker g[data-price-zone-id="6"].s-s.clk circle {
  fill: red;
}
#tix-seatpicker g[data-price-zone-id="7"].s-s.clk circle {
  fill: #6633ff;
}
#tix-seatpicker g[data-price-zone-id="8"].s-s.clk circle {
  fill: #cc00cc;
}
#tix-seatpicker g[data-price-zone-id="9"].s-s.clk circle {
  fill: cyan;
}
#tix-seatpicker g[data-price-zone-id="10"].s-s.clk circle {
  fill: #b6499b;
}
#tix-seatpicker g[data-price-zone-id="11"].s-s.clk circle {
  fill: #ff6699;
}
#tix-seatpicker g[data-price-zone-id="12"].s-s.clk circle {
  fill: #66ccff;
}
#tix-seatpicker g[data-price-zone-id="13"].s-s.clk circle {
  fill: #ffcc66;
}
#tix-seatpicker g[data-price-zone-id="14"].s-s.clk circle {
  fill: #930000;
}
#tix-seatpicker g[data-price-zone-id="15"].s-s.clk circle {
  fill: #641e36;
}
#tix-seatpicker g[data-price-zone-id="16"].s-s.clk circle {
  fill: #ff0099;
}
#tix-seatpicker g[data-price-zone-id="17"].s-s.clk circle {
  fill: yellow;
}
#tix-seatpicker g[data-price-zone-id="18"].s-s.clk circle {
  fill: #00ff66;
}
#tix-seatpicker g[data-price-zone-id="19"].s-s.clk circle {
  fill: #006666;
}
#tix-seatpicker g[data-price-zone-id="20"].s-s.clk circle {
  fill: #006666;
}
#tix-seatpicker g[data-price-zone-id="21"].s-s.clk circle {
  fill: #ff99ff;
}
#tix-seatpicker g[data-price-zone-id="22"].s-s.clk circle {
  fill: #930000;
}
#tix-seatpicker g[data-price-zone-id="23"].s-s.clk circle {
  fill: #ff9900;
}
#tix-seatpicker g[data-price-zone-id="24"].s-s.clk circle {
  fill: #33ff66;
}
#tix-seatpicker g[data-price-zone-id="25"].s-s.clk circle {
  fill: #ff9999;
}
#tix-seatpicker g.s-s.clk circle {
  stroke-width: 3px;
}
#tix-seatpicker g.s-s.your-seat circle {
  fill: black !important;
}
#tix-seatpicker #seat-picker__fees-and-charges-container.fees-and-charges-container {
  top: 76px;
}
#tix-seatpicker .price-matrix::before {
  content: "View prices";
}
#tix-seatpicker div.price-matrix {
  border-radius: 10px !important;
  padding: 0px 20px;
}
#tix-seatpicker .price-matrix img {
  display: none;
}

.cart-total-container > div:last-child h4 {
  font-size: 0 !important;
}

.cart-total-container > div:last-child h4::after {
  content: "Price";
  font-size: 12px;
}

/* PRE-PAYMENT PAGE */
#PurchaseContainer #PurchaseFields #InsuranceInfo .insurance-header {
  align-items: center !important;
}
#PurchaseContainer #PurchaseFields #InsuranceInfo .insurance-header h3 {
  display: flex !important;
}
#PurchaseContainer #PurchaseFields #InsuranceInfo .insurance-header h3 span {
  margin-left: 5px !important;
}
/* RECEIPT PAGE */
#pdfDropdown li[onclick*="#SelectDocument"] {
  display: none !important;
}

a[data-src="#SelectDocumentModal"],
a#GetDocumentsModal {
  display: none !important;
}

/* FOOTER */
#footer #FooterContent.secondary-bg-c {
  background-color: #221f21;
}
#footer #FooterContent .footer-highlight-c {
  color: #ffffff;
}
#footer #FooterContent .right-foot.bottom a.tnc::after {
  background-color: #ffffff;
}
#footer #FooterContent .copyright-text {
  position: relative;
}
#footer #FooterContent .copyright-text .primary-c {
  display: none;
}
#footer #FooterContent .copyright-text::after {
  content: url("https://cdn.tixly.com/uk/tix/Skin/20210630/129/Images/quaytickets_logo_whitetext.svg");
  position: absolute;
  right: 0;
  top: 0;
  height: auto;
  width: 175px;
  margin-right: -180px;
  margin-top: -4px;
}
@media only screen and (max-width: 768px) {
  #footer #FooterContent .copyright-text::after {
    right: unset;
    width: 125px;
    margin-right: unset;
    margin-top: 30px;
    left: 0;
    margin-left: -15px;
  }
}
@media only screen and (max-width: 768px) {
  #footer #FooterContent {
    padding-bottom: 35px;
  }
}
/* Color definitions */
/* Primary */
.primary-c {
    color: #02739e;
}
.primary-bg-c {
    background-color: #02739e;
	color: #ffffff;
}
/* Border color as font for primary background */
.primary-bg-font-border-c {
    border-color: #ffffff;
}
.primary-border-c {
    border-color: #02739e;
}
.primary-c-button {
	background-color: #02739e;
    color: #ffffff;
    border-color: #02739e;
}
.primary-c-button:hover {
	border-color: #015575;
    background-color: #015575;
}
.primary-c-button-secondary {
	background-color: #02739e;
    color: #ffffff;
    border-color: #02739e;
}
.primary-c-button-secondary:hover {
    background-color: #221f21;
    color: #ffffff;
    border-color: #221f21;
}
.primary-c-button-2 {
    background-color: #ffffff;
    border-color: #02739e;
    color: #02739e;
}
.primary-c-button-2:hover {
    background-color: #02739e;
    color: #ffffff;
}
.primary-c-button-2-secondary {
    background-color: #ffffff;
    border-color: #02739e;
    color: #02739e;
}
.primary-c-button-2-secondary:hover {
    background-color: #221f21;
    border-color: #221f21;
    color: #ffffff;
}
.primary-c-svg svg path, svg.primary-c-svg path {
    fill: #02739e;
}
/* Special for header */
.header-c-gradient-right::before {
    background: rgba(34,31,33,0);
    background: -moz-linear-gradient(left, rgba(34,31,33,0) 0%, rgba(34,31,33,1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0%, rgba(34,31,33,0)), color-stop(100%, rgba(34,31,33,1)));
    background: -webkit-linear-gradient(left, rgba(34,31,33,0) 0%, rgba(34,31,33,1) 100%);
    background: -o-linear-gradient(left, rgba(34,31,33,0) 0%, rgba(34,31,33,1) 100%);
    background: -ms-linear-gradient(left, rgba(34,31,33,0) 0%, rgba(34,31,33,1) 100%);
    background: linear-gradient(to right, rgba(34,31,33,0) 0%, rgba(34,31,33,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#221f21', endColorstr='#221f21', GradientType=1 );
}
.header-bg-c {
    background-color: #221f21;
    color: #ffffff;
}
#skipToContent {
    background-color: #221f21;
    color: #ffffff;
    border: 1px solid #ffffff;
}
.ms-options li > label {
    color: #02739e;
}

.header-border-text-c {
    border-color: #ffffff;
}
.header-c-hover-before {
    background-color: #221f21;
}
.header-c-hover-before::before {
    border-color: transparent #02739e transparent transparent;
}
.header-c-hover-before:hover {
    background-color: #02739e;
}
.header-c-hover-before:hover::before {
    border-color: transparent #ffffff transparent transparent;
}
#header .ticket-list .ticket-table::-webkit-scrollbar {
    background-color: #221f21;
}
#header .ticket-list .ticket-table::-webkit-scrollbar-thumb {
    background-color: #221f21;
    border-color: #221f21;
}
#header .ticket-list .ticket-table table tbody td {
    border-color: #221f21;
}
#header .ticket-list .ticket-table table td.event span.dash {
    color: #221f21;
}
.footer-highlight-c {
    color: #ffffff;
}
.content-inline-heading, .content-table-heading th {
     color: #aaaaaa;
}
/* Secondary */
.secondary-c {
    color: #221f21;
}
.secondary-bg-c {
    background-color: #221f21;
    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: #221f21;
    color: #ffffff;
}
.secondary-c-button {
    background-color: #ffffff;
    color: #221f21;
    border-color: #221f21;
}
.secondary-c-button:hover {
    background-color: #221f21;
    border-color: #221f21;
    color: #ffffff;
}
/* Tertiary */
.tertiary-c {
    color: #221f21;
}
.tertiary-bg-c {
    background-color: #221f21;
    color: #aaaaaa;
}
.tertiary-border-c {
    border-color: #221f21;
}
.tertiary-c-button-secondary {
	background-color: #221f21;
    color: #02739e;
    border-color: #221f21;
}
.tertiary-c-button-secondary:hover {
    background-color: #221f21;
    color: #221f21;
    border-color: #221f21;
}
.tertiary-bg-c-hover:hover {
    background-color: #221f21;
    color: #aaaaaa;
}
/* 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: #02739e;
}
#SectionGroups li.selected-group a {
    background: #02739e;
    color: #ffffff;
}
#ProfileBar ul li button.active {
    color: #02739e;
    box-shadow: 0 3px 0px 0px #02739e;
}
#CardType > li.active, #GiftCardDescription p a {
    color: #02739e;
}
#CardType li.active svg path, #CardType li.active svg rect {
    fill: #02739e;
}
#SiteHead2 .headtexttotal .tickets > a > span > svg path {
    stroke: #02739e;
}
#ProfileOrders .order-receipt-link a > span > svg path {
    stroke: #02739e;
}
#ProfileContainer .profile-content .order-receipt-link a > span > svg path {
    stroke: #02739e;
}
#BuyingSteps.profile-steps .steps.active .text {
    color: #02739e;
}
#SiteHead2 .profile-language-bar > a > span > svg path,
#SiteHead2 .profile-language-bar > a > span > svg circle {
    stroke: #ffffff;
}
#GiftCardDescription p a:hover {
    color: #015575;
}
#EventSelector .selected td.toggle a {
    border-color: transparent transparent #02739e transparent;
}
input[type='checkbox']:checked {
    background-color: #02739e;
}
.clndr-grid .day.selected, .calendar-event.selected, .month-dropdown button.selected {
    background-color: #221f21;
    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: #981b1b;
    background-image: url(Images/alert.svg);
    background-repeat: no-repeat;
}
input[type='checkbox'].input-validation-error:before{
    border-color: #981b1b !important;
}
#div-terms.validation-error {
    background-image: url(Images/alert.svg);
}
.validation-summary-errors, .field-validation-error, a.terms-and-conditions.validation-error {
    color: #981b1b;
}
