@import url('https://fonts.googleapis.com/css2?family=Voltaire&display=swap');

#SiteHead2 h1.logo {

	background-image: url(Images/scala_logo_rgb.svg) !important;

	width: 215px !important;

}

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

  #SiteHead2 h1.logo {

	width: 162px !important;

  }

}

#BuyingHead {

  	background-image: url(Images/background_pattern.jpeg) !important;

  	color: #ac866b !important;

  

  	padding: 50px 0 50px 0 !important; 

}

.headtexttitle, #BuyingHead, #EventSelector .selection-heading th.name, #EventSelector .event-select td.name, #TicketResultText, #TicketSelectTitle {

  text-transform: uppercase !important;

}

/* Custom font on most items */

body, #BuyingHead, #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, .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, .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, .fnt-sbold input, .fnt-sbold select, .fnt-sbold textarea, .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: 'Voltaire', sans-serif !important; 

}

#FooterSocial {

	display: none;

}

#SiteHead2 .headbackbutt {

	display: none;

}

.button, .button-small {

	border-radius: 50px !important;

  	text-transform: uppercase !important;

  	font-size: 14px !important;

}

/*EVENT PAGE*/

/*This changes the logo in the event page*/

body.site_sv .header .logo {

  background-image: url(Images/scala_logo_rgb.svg) !important;

  margin-top: 25px; 

  width: 215px !important;

  height: 43px;

}

/*This hides the search icon*/

.search-trigger {

  display: none;

}

.header .navigation.main {

  float: right;

  margin-right: 30px;

}

/*This hides the language menu*/

.header .navigation.right {

  display: none;

}

/*This hides the address field in the footer*/

.address {

  display: none;

}

/*This hides the term links and the social media icons in the footer*/

.footer > div > div:last-child {

  display: none;

}

/*PrimaryBackgroundColor*/

.footer > div > div.contact > div, .event > .dates ul li span, .event > .dates button, .event > .dates a.link-button, .footer hr, .footer > div > div.contact a:hover, .header .navigation.main ul li:not(:last-child):after {

  background: #59ad80;

}

.event > .dates button:hover, .event > .dates a.link-button:hover {

  color: #59ad80;

}

.header .navigation ul li a svg path, .header .navigation ul li a:hover {

  fill: #59ad80 !important;

}

.header .navigation ul li a:hover svg path, .header .navigation ul li a:hover svg circle {

  stroke: #59ad80 !important;

}

/*SecondaryBackgroundColor*/

.footer, .event > .dates, .event, .event > ul > li .info > div {

  background: #59ad80;

}

/*HeaderBackgroundColor*/

.header {

  height: 99px;

  background: #08121a;

}

/*PrimaryTextColor*/

.event > .dates button, .event > .dates a.link-button {

  color: #ffffff;

}

.event > .dates button:hover, .event > .dates a.link-button:hover {

  background: #59ad80;

}

/*SecondaryTextColor*/

.event > .dates h5 span, .footer > div > div.contact > p:first-of-type, .event > ul > li .info > div h2, .event > ul > li .info > div h3, .event > ul > li .info > div h4 {

  color: #ffffff;

}

.footer svg path {

  fill: #08121a;

}

.venoframe {

  border-radius: 10px; }

.terms-and-conditions-content {

  padding: 10px; }

/* SEAT PICKER */

.s-s.occ circle.p-1, .s-s.occ circle.p-2, .s-s.occ circle.p-3, .s-s.occ circle.p-4, .s-s.occ circle.p-5, .s-s.occ circle.p-6, .s-s.occ circle.p-7, .s-s.occ circle.p-8, .s-s.occ circle.p-9 {

    fill: #cdcdcd !important;

    stroke: #cdcdcd !important;

} 

.s-s circle.p-1 {

    stroke: #cc0000 !important;

    fill: #cc0000 !important;

}

.s-s circle.p-2 {

    stroke: #6aa84f !important;

    fill: #6aa84f !important;

}

.s-s circle.p-3 {

    stroke: #3d85c6 !important;

    fill: #3d85c6 !important;

}

.s-s circle.p-4 {

    stroke: #674ea7 !important;

    fill: #674ea7 !important;

}

.s-s circle.p-5 {

    stroke: #990000 !important;

    fill: #990000 !important;

}

.s-s circle.p-6 {

    stroke: #f91c9e !important;

    fill: #f91c9e !important;

}

.s-s circle.p-7 {

    stroke: #8e7cc3 !important;

    fill: #8e7cc3 !important;

}

.s-s circle.p-8 {

    stroke: #f1c232 !important;

    fill: #f1c232 !important;

}

.s-s circle.p-9 {

    stroke: #933a16 !important;

    fill: #933a16 !important;

}

#ProfileFields #SkipLogin button {

background-color: #a30808 !important;

  color: #ffffff !important;

}

/* LOGIN BUTTON MOVED HACK */

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

  #SkipLogin {

	margin-top: -650px !important; /*If Custom Login hint is used change to -650px IF NOT IN USE use -550px*/

}

#PurchaseLogin {

	margin-top: 60px !important;

	}

}

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

   #SkipLogin {

      margin-top: -740px !important; /*If Custom Login hint is used change to -740px IF NOT IN USE use -640px*/

		}

  #PurchaseLogin {

      margin-top: 100px !important;

      	}

}


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

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

#BuyingSteps div.icon {
    background: rgba(128,128,128,.15);
}
#BuyingSteps .steps.active div.icon {
    background: #59ad80;
}
#SectionGroups li.selected-group a {
    background: #59ad80;
    color: #ffffff;
}
#ProfileBar ul li button.active {
    color: #59ad80;
    box-shadow: 0 3px 0px 0px #59ad80;
}
#CardType > li.active, #GiftCardDescription p a {
    color: #59ad80;
}
#CardType li.active svg path, #CardType li.active svg rect {
    fill: #59ad80;
}
#SiteHead2 .headtexttotal .tickets > a > span > svg path {
    stroke: #59ad80;
}
#ProfileOrders .order-receipt-link a > span > svg path {
    stroke: #59ad80;
}
#ProfileContainer .profile-content .order-receipt-link a > span > svg path {
    stroke: #59ad80;
}
#BuyingSteps.profile-steps .steps.active .text {
    color: #59ad80;
}
#SiteHead2 .profile-language-bar > a > span > svg path,
#SiteHead2 .profile-language-bar > a > span > svg circle {
    stroke: #ffffff;
}
#GiftCardDescription p a:hover {
    color: #49946B;
}
#EventSelector .selected td.toggle a {
    border-color: transparent transparent #59ad80 transparent;
}
input[type='checkbox']:checked {
    background-color: #59ad80;
}
.clndr-grid .day.selected, .calendar-event.selected, .month-dropdown button.selected {
    background-color: #08121a;
    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: #d9605a;
    background-image: url(Images/alert.svg);
    background-repeat: no-repeat;
}
input[type='checkbox'].input-validation-error:before{
    border-color: #d9605a !important;
}
#div-terms.validation-error {
    background-image: url(Images/alert.svg);
}
.validation-summary-errors, .field-validation-error, a.terms-and-conditions.validation-error {
    color: #d9605a;
}