/**************************************
        QUEENSLAND THEATRE
        TNEW v7 Stylesheet

Last Updated: 20 May 2019

Unminified version for de-bug and development.  Minified version published online.

Changelog:
(2019-05-20 RK) Created new TNEW CSS to support TNEW v7 site upgrade


-------------TABLE OF CONTENTS--------------
GLOBALS / ALL PAGES
[0.10] - Test site only (eg: hide certain elements that only appear in test to make test site appear more like live site)
[1.10] - Fonts
[2.10] - Header
..[2.20] - Footer
[3.10] - Nav
..[3.20] - Promo Box
[4.10] - Main

CALENDAR & EVENT LISTING
[5.10] - Listing/Calendar (/events)
..[5.20] - View as Calendar / View as List nav menu
..[5.30] - Calendar events
..[5.40] - Calendar datepicker
..[5.50] - List view

PRODUCTIONS & PERFORMANCES
[6.10] - Prod Season Overview (/overview/[PSID])
[7.10] - Event/Item Detail ([PSID]/[PerfID])
..[7.20] - Style Alternate Event list as carousel
[8.10] - SYOS

ERRORS & MODALS
[9.10] - Errors and modals

CART & CHECKOUT
[10.10] - Review your cart [carts/details]
[10.20] - Guest checkout billing details [cart/guest]
[10.30] - Payment [cart/payment]
..[10.31] - Custom 'suggested donation' buttons
..[10.32] - Big, fat 'Buy now' button
..[10.33] - Position 'Apply Gift Voucher' button adjacent to gift voucher number input field (on larger screens only)
..[10.34] - Position 'Add Donation' button adjacent to Donation input field (on larger screens only)
..[10.35] - Make donation input less "angry" looking when invalid data is entered (eg: if customer leaves it blank!)
[10.40] - Delivery options [cart/shipping]
[10.50] - RACQ Member tracking cart validation

ACCOUNTS & LOGGING IN
[11.10] - Login Page [account/login]
[11.20] - Create new account [account/create]
[11.30] - Account Update [account/update]
[11.40] - Account Log Out [account/logout]
[11.50] - Account create brief [account/create/brief]
[11.60] - Update Password [account/update/password]

CONTRIBUTIONS
[12.10] - Donate Now [donate/contribute1], [donate/contribute2], [donate/i/[slug]]

GIFT CERTIFICATES
[13.10] - Gift certificate [gift/certificiate]

PACKAGES
[14.10] - Flex Package selection / builder [packages/flex/[id]

AD-HOC
[15.10] - Covid19 update banner

***************************************/


/*[0.10] - Test site only (eg: hide certain elements that only appear in test to make test site appear more like live site)*/
aside {
  visibility: hidden !important;
  display: none !important;
}

/*[1.10] - Fonts
Comment: 
(2019-05-20 RK) I tried importing fonts from the Assets/Fonts subdirectory but encountered a CORS Policy error. Changes to web.config did not resolve this error.  However, I was able to import fonts from the top-level directory without the error, so I have simply done that instead.
*/
@font-face {
  font-family: 'QT Theatrical';
  src: url('https://tessitura.queenslandtheatre.com.au/QT Typeface.eot');
  src: local('☺'), url('https://tessitura.queenslandtheatre.com.au/QT Typeface.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/QT Typeface.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/QT Typeface.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/*Gordita font to be used in most body/content */
@font-face {
  font-family: 'Gordita';
  src: url('https://tessitura.queenslandtheatre.com.au/gorditablack-webfont.eot');
  src: url('https://tessitura.queenslandtheatre.com.au/gorditablack-webfont.eot?#iefix') format('embedded-opentype'), url('https://tessitura.queenslandtheatre.com.au/gorditablack-webfont.woff2') format('woff2'), url('https://tessitura.queenslandtheatre.com.au/gorditablack-webfont.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/gorditablack-webfont.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/gorditablack-webfont.svg#gorditablack') format('svg');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'Gordita';
  src: url('https://tessitura.queenslandtheatre.com.au/gorditablackitalic-webfont.eot');
  src: url('https://tessitura.queenslandtheatre.com.au/gorditablackitalic-webfont.eot?#iefix') format('embedded-opentype'), url('https://tessitura.queenslandtheatre.com.au/gorditablackitalic-webfont.woff2') format('woff2'), url('https://tessitura.queenslandtheatre.com.au/gorditablackitalic-webfont.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/gorditablackitalic-webfont.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/gorditablackitalic-webfont.svg#gorditablack_italic') format('svg');
  font-weight: 900;
  font-style: italic;
}
@font-face {
  font-family: 'Gordita';
  src: url('https://tessitura.queenslandtheatre.com.au/gorditabolditalic-webfont.eot');
  src: url('https://tessitura.queenslandtheatre.com.au/gorditabolditalic-webfont.eot?#iefix') format('embedded-opentype'), url('https://tessitura.queenslandtheatre.com.au/gorditabolditalic-webfont.woff2') format('woff2'), url('https://tessitura.queenslandtheatre.com.au/gorditabolditalic-webfont.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/gorditabolditalic-webfont.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/gorditabolditalic-webfont.svg#gorditabold_italic') format('svg');
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: 'Gordita';
  src: url('https://tessitura.queenslandtheatre.com.au/gorditalight-webfont.eot');
  src: url('https://tessitura.queenslandtheatre.com.au/gorditalight-webfont.eot?#iefix') format('embedded-opentype'), url('https://tessitura.queenslandtheatre.com.au/gorditalight-webfont.woff2') format('woff2'), url('https://tessitura.queenslandtheatre.com.au/gorditalight-webfont.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/gorditalight-webfont.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/gorditalight-webfont.svg#gorditalight') format('svg');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Gordita';
  src: url('https://tessitura.queenslandtheatre.com.au/gorditalightitalic-webfont.eot');
  src: url('https://tessitura.queenslandtheatre.com.au/gorditalightitalic-webfont.eot?#iefix') format('embedded-opentype'), url('https://tessitura.queenslandtheatre.com.au/gorditalightitalic-webfont.woff2') format('woff2'), url('https://tessitura.queenslandtheatre.com.au/gorditalightitalic-webfont.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/gorditalightitalic-webfont.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/gorditalightitalic-webfont.svg#gorditalight_italic') format('svg');
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: 'Gordita';
  src: url('https://tessitura.queenslandtheatre.com.au/gorditaregular-webfont.eot');
  src: url('https://tessitura.queenslandtheatre.com.au/gorditaregular-webfont.eot?#iefix') format('embedded-opentype'), url('https://tessitura.queenslandtheatre.com.au/gorditaregular-webfont.woff2') format('woff2'), url('https://tessitura.queenslandtheatre.com.au/gorditaregular-webfont.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/gorditaregular-webfont.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/gorditaregular-webfont.svg#gorditaregular') format('svg');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Gordita';
  src: url('https://tessitura.queenslandtheatre.com.au/gorditabold-webfont.eot');
  src: url('https://tessitura.queenslandtheatre.com.au/gorditabold-webfont.eot?#iefix') format('embedded-opentype'), url('https://tessitura.queenslandtheatre.com.au/gorditabold-webfont.woff2') format('woff2'), url('https://tessitura.queenslandtheatre.com.au/gorditabold-webfont.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/gorditabold-webfont.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/gorditabold-webfont.svg#gorditabold') format('svg');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Gordita';
  src: url('https://tessitura.queenslandtheatre.com.au/gorditamedium-webfont.eot');
  src: url('https://tessitura.queenslandtheatre.com.au/gorditamedium-webfont.eot?#iefix') format('embedded-opentype'), url('https://tessitura.queenslandtheatre.com.au/gorditamedium-webfont.woff2') format('woff2'), url('https://tessitura.queenslandtheatre.com.au/gorditamedium-webfont.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/gorditamedium-webfont.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/gorditamedium-webfont.svg#gorditamedium') format('svg');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'Gordita';
  src: url('https://tessitura.queenslandtheatre.com.au/gorditaregularitalic-webfont.eot');
  src: url('https://tessitura.queenslandtheatre.com.au/gorditaregularitalic-webfont.eot?#iefix') format('embedded-opentype'), url('https://tessitura.queenslandtheatre.com.au/gorditaregularitalic-webfont.woff2') format('woff2'), url('https://tessitura.queenslandtheatre.com.au/gorditaregularitalic-webfont.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/gorditaregularitalic-webfont.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/gorditaregularitalic-webfont.svg#gorditaregular_italic') format('svg');
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: 'Gordita';
  src: url('https://tessitura.queenslandtheatre.com.au/gorditamediumitalic-webfont.eot');
  src: url('https://tessitura.queenslandtheatre.com.au/gorditamediumitalic-webfont.eot?#iefix') format('embedded-opentype'), url('https://tessitura.queenslandtheatre.com.au/gorditamediumitalic-webfont.woff2') format('woff2'), url('https://tessitura.queenslandtheatre.com.au/gorditamediumitalic-webfont.woff') format('woff'), url('https://tessitura.queenslandtheatre.com.au/gorditamediumitalic-webfont.ttf') format('truetype'), url('https://tessitura.queenslandtheatre.com.au/gorditamediumitalic-webfont.svg#gorditamedium_italic') format('svg');
  font-weight: 500;
  font-style: italic;
}

/*[2.10] - Header*/
header {
  border-bottom: 1px solid rgb(238, 238, 238);
}

.qt-header {
  background-color: #000;
}


.qt-header .qt-title {
  width: 100%;
  text-align: center;
  font-family: QT Theatrical;
  font-size: calc( 32px + (52 - 32) * ( (100vw - 400px) / ( 1200 - 400) ));
  white-space: nowrap;
}

.qt-header .qt-title a, .qt-header .qt-title a:hover, .qt-header .qt-title a:visited, .qt-header .qt-title a:active {
  text-decoration: none !important;
  color: #fff;
}

/*[2.20] - Footer*/
.qt-footer {
  background-color: #000;
  padding-top: 30px;
  padding-bottom: 30px;
  margin-top: 50px !important;
  text-align: center;
  font-family: Gordita;
  font-weight: 600;
  color: #fff;
}

.qt-footer a, .qt-footer a:hover, .qt-footer a:visited, .qt-footer a:active {
  color: #fff;
  text-decoration: none !important;
}

.qt-footer ul {
  list-style: none;
  padding: 0 0 0 0 !important;
}

.qt-footer ul > li {
  //padding: 10px 10px 10px 10px !important;
  white-space: nowrap;
}

@media (max-width: 768px) {
  .qt-footer ul > li {
    //padding: 0px 30px 0px 30px !important;
  }
  .qt-footer-main-nav {
    font-size: 130%;
  }
  .qt-footer-sub-nav {
    padding-top: 20px;
    font-size: 70% !important;
  }
}

@media (min-width: 768px) {
  .qt-footer ul > li {
    display: inline;
  }
  .qt-footer-main-nav li {
    font-size: 150%;
    padding: 0px 50px 0px 50px !important;
  }
  .qt-footer-sub-nav {
    padding-top: 20px;
  }
  .qt-footer-sub-nav li {
    font-size: 75% !important;
    padding: 0px 10px 0px 10px !important;    
  }
}

/*[3.10] - Nav*/
@media (max-width: 768px) {
nav {
    padding-left: 7vw !important;
    padding-right: 2vw !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-weight: 500;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
nav {
    padding-top: 20px !important;
    padding-left: 10vw !important;
    padding-right: 10vw !important;
    padding-bottom: 20px !important;
    font-weight: 500;
  }
}

@media (min-width: 1280px) {
nav {
    padding-top: 20px !important;
    padding-left: 15vw !important;
    padding-right: 15vw !important;
    padding-bottom: 20px !important;
    font-weight: 500;
  }
}

nav {
  font-size: calc( 16px + (18 - 16) * ( (100vw - 400px) / ( 1200 - 400) ));
  color: #000;
  font-family: Gordita;
  border-bottom: 1px solid rgb(238, 238, 238);
}

nav a, nav a:visited {
  color: #000 !important;
}

nav a:hover, nav a:active {
  color: rgb(182, 182, 182) !important;
}

/*[3.20] Promo Box*/
.tn-subnav-promo-button {
  font-size: 0.7em;
  background-color: #000 !important;
  padding: 0.4em 1.2em 0.4em 0.6em !important;
  border-top-right-radius: 0.9em;
  border-bottom-right-radius: 0.9em;
  vertical-align: top !important;
  text-transform: uppercase;
  text-decoration: none !important;
  color: #fff !important;
}

.tn-subnav-promo-button:hover {
  background-color: rgb(182, 182, 182) !important;
}

.tn-subnav-promo-code {
  vertical-align: bottom !important;
  padding: 0em 0em 0em 0em !important;
  border-bottom: 1px solid rgb(210, 210, 210) !important;
  color: rgb(129, 129, 129);
  //text-transform: uppercase;
}

/*promo-applied can be too big for small screens; shrink it!*/
@media (max-width: 768px) {
  .tn-promo-applied {
    font-size: 60%;
    vertical-align: bottom;
  }
}

/*[4.10] Main */
@media (max-width: 768px) {
  main {
   margin-left: 3.5vw !important;
   padding-right: 3.5vw !important;
  }
}

@media (min-width: 768px) and (max-width: 1280px) {
  main {
   margin-left: 8vw !important;
   padding-right: 8vw !important;
  }
}

@media (min-width: 1280px) {
  main {
   margin-left: 15vw !important;
   padding-right: 15vw !important;
  }
}

main {
  font-family: Gordita;
  font-weight: 400 !important;
}

/*[4.20] Mobile responsive images*/
img {
 max-width: 100% !important;
  height: auto !important;
}

/*[5.10] - Calendar page (section: tn-events-listing-page) page sizing*/
.tn-events-listing-page > .tn-header-component > .tn-heading {
  margin-bottom: 0px !important;
  //margin-top: 0vh !important;
}

/*tidying up the views container (eg view as calendar v view as list)*/

/* hide the view as calendar / view as list for small devices; the default of calendar is excellent for mobile & this removes screen clutter*/
@media (max-width: 768px) {
  .tn-event-listing-mode-tab-nav__list {
    display: none !important;
    visibility: hidden !important;
  }
}


/*[5.20] - View as Calendar / View as List nav menu */
/*"view as calendar / view as list" nav section should be borderless and fitting overall page look & feel*/
.tn-event-listing-mode-tab-nav__list.tn-event-listing-mode-tab-nav__list, .tn-event-listing-mode-tab-nav__list-item {
  border: 0px !important;
  background-color: #fff !important;
}

.tn-event-listing-mode-tab-nav__list-item:not(.active) {
  //color: rgb(218, 41, 28) !important; /*darkred*/
  //color: rgb(43, 81, 161) !important; /*darkblue*/
  color: rgb(255, 92, 96) !important; /*pinge*/
}

.tn-event-listing-mode-tab-nav__list-item:hover:not(.active) {
  //color: rgb(255, 92, 96) !important;
  text-decoration: underline !important;
}

/*[5.30] - Calendar events*/
/*event item cells*/
.tn-events-calendar__event {
  background-color: rgb(255, 92, 96) !important;
  //border: 1px solid rgb(223, 62, 72) !important;
}

/*Today cell --> override special colour assigned to "today", instead make it the same colour as active month days (even if today is outside active month)*/
.tn-events-calendar__day-cell--today {
  background-color: #fafafa !important;
  border: 1px solid #DDDDDD !important;
}

.tn-events-calendar__event:hover, .tn-events-calendar__event:active {
  background-color: rgb(223, 62, 72) !important;
}

/*limited availability / sold out messaging*/
.tn-events-calendar__event-status {
  background-color: rgb(0, 176, 203) !important;
  font-style: normal !important;
  font-size: 70% !important;
  color: #fff !important;
}

/*[5.40] - Calendar datepicker*/
/*prev & next month chevrons*/
.tn-btn-datepicker__btn-period-prev-next {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;
}

.tn-btn-datepicker__btn-period-prev-next:hover {
  background-color: rgb(223, 62, 72) !important;
}

/*calendar icon within datepicker*/
.tn-btn-datepicker__icon-container {
  color: rgb(255, 67, 71) !important;
}

.tn-btn-datepicker__icon-container:hover {
  color: rgb(255, 92, 96) !important;
}

/*date selected in datepicker */
.tn-datepicker .selected > span {
  background-color: rgb(223, 62, 72) !important;
  border-color: rgb(223, 62, 72) !important;
  color: #fff !important;
}

/*[5.50] List view
This view can be a preview of individual productions. However, that purpose has already been achieved for the user on the marketing site.  
Instead, view as list will function as a simplified calendar.  We aren't sharing show content here.  To this end, the grid system has been removed
and we no longer display show synopsis or image.
*/

/*we won't use images on this page. hide the img container. if an image is used, it will mess up the display of tn-prod-list-item which now consumes the whole grid!*/
.tn-prod-list-item__property--img-container {
  display: none !important;
  visibility: hidden !important;
}

/*override the grid display that comes with tnew out of the box. we want the list items to consume the whole block.*/
.tn-prod-list-item {
  display: block !important;;
}

/*show title colour*/
.tn-prod-list-item__property--heading a {
  color: rgb(255, 67, 71) !important;
}

/*make purchase chevrons behave according to theme*/
.tn-prod-list-item__perf-anchor > .glyphicon-chevron-right {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-prod-list-item__perf-anchor > .glyphicon-chevron-right:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*limited availability/ sold out messages*/
.tn-prod-list-item__perf-status {
  font-style: normal !important;
  color: rgb(255, 67, 71) !important;
}

/*[6.10] - Prod Season Overview (/overview/[PSID])
/* The same classes exist on this page as exist on the Listing/Calendar page in List view.  This page is effectively styled by [5.50].  No */

/*[7.10] - Event/Item Detail ([PSID]/[PerfID])*/

/*break the grid display so elements can be re-organised*/
.tn-event-detail {
  display: block !important;
}

/*hide the main prod-season-header; we are repurposing tn-event-detail__performance-details-container to be the header as it has better detail. this also avoid duplication of information.*/
.tn-events-detail-page > .tn-prod-season-header {
  display: none !important;
}

/*hide the initial additional event container. we use javascript to duplicate this element in a location more suited to usability and layout.*/
.tn-event-detail__additional-events-container {
  //display: none;
}

/*restyle the event-detail info to function as an event header*/
.tn-event-detail__display-time {
  font-weight: 600;
}

.tn-event-detail__title {
  font-size: xx-large !important;
  font-weight: 600;
  margin-top: 4px !important;
 }

.tn-event-detail__performance-details-container {
  margin-bottom: 4px !important;
}

/*[7.20] - Style Alternate Event list as carousel*/
.tn-additional-events__continue-shopping-link {
  display: none !important;
}

.tn-additional-events__instructions {
  background-color: transparent !important;
}

.tn-additional-events {
  border: 0px !important;
}

.tn-event-detail__additional-events-container {
  width: 100% !important;
  //margin-left: -3%;
  background-color: transparent !important;
}

.tn-additional-events__list-view-container > ul {
  display: flex !important;
  align-items: center !important;
  vertical-align: middle !important;'
}

.tn-additional-events__list-item a {
  display: block;
  text-align: center !important;
  border: 1px solid rgb(204, 204, 204);
  padding: 3px 3px 3px 3px;
  margin: 1px 1px 1px 1px;
  height: 50px !important;
  color: #000;
  font-size: calc( 10px + (11 - 10) * ( (100vw - 400px) / ( 1200 - 400) ));
}

.selling-fast:after {
  display: inline-block;
  content: 'Selling Fast!';
  padding: 2px;
  //color: rgb(255, 92, 96) !important;
  color: rgb(0, 149, 176);
  font-weight: 600;
}

.sold-out:after {
  display: inline-block;
  content: 'Sold Out';
  padding: 2px;
  color: rgb(255, 92, 96) !important;
  //color: rgb(0, 149, 176);
  font-weight: 600;
}

.tn-additional-events__list-item a,
.tn-additional-events__list-item a:hover,
.tn-additional-events__list-item a:visited,
.tn-additional-events__list-item a:active {
  color: #000;
  text-decoration: none;
}

.tn-additional-events__list-item:hover,
.tn-additional-events__list-item:active {
  border-color: rgb(173, 173, 173);
  background-color: rgb(230, 230, 230);
}

.slick-prev {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  margin: -1px 0px 0px 0px;
  padding: 0px 10px 0px 10px;
  cursor: pointer;
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border: 1px solid rgb(223, 62, 72) !important;
}

.slick-next {
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  margin: -1px 0px 0px 0px;
  padding: 0px 10px 0px 10px;
  cursor: pointer;
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border: 1px solid rgb(223, 62, 72) !important;
}

.slick-next:hover {
  background-color: rgb(223, 62, 72) !important;
}

.slick-prev:hover {
  background-color: rgb(223, 62, 72) !important;
}

/*[8.10] - SYOS */

/*select a section buttons*/
.tn-syos-screen-button {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-syos-screen-button:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*choose pricetype popover*/
.tn-syos-seat-info__price-type--button {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-syos-seat-info__price-type--button:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*add to cart button*/
.tn-syos__btn-add-to-cart:not([disabled]) {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-syos__btn-add-to-cart:not([disabled]):hover {
  background-color: rgb(223, 62, 72) !important; 
}


/*[9.10] - Errors and Modals*/

/*modal primary button*/
.modal-btn-confirm {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.modal-btn-confirm:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*[10.10] - Review your cart */

/*primary action button*/
.tn-cart-buttons__primary-action {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-cart-buttons__primary-action:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*secondary action button*/
.tn-cart-buttons__secondary-action {
  border: 1px solid rgb(204, 204, 204);
  border-radius: 4px;
  //padding: 6px 12px;
  padding: 6px 24px 6px 24px;
  color: #000 !important;
  text-decoration: none !important;
}

.tn-cart-buttons__secondary-action:hover {
  background-color: rgb(230, 230, 230) !important;
}


/*on mobile devices, make the action buttons full-width*/
@media (max-width: 1200px) {
  .tn-cart-buttons__item-container {
    width: 100% !important;
    text-align: center !important;
  }
  .tn-cart-buttons__primary-action {
    width: 100% !important;
    margin-bottom: 10px !important;
  }
  .tn-cart-buttons__secondary-action {
    display: block;
    width: 100% !important;
    margin-bottom: 3px !important;
  }
}

/*[10.20] - Guest checkout billing details [cart/guest]*/
/*primary action button*/
.tn-cart-guest-page .btn-primary {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-cart-guest-page .btn-primary:hover {
  background-color: rgb(223, 62, 72) !important; 
}


/*[10.30] - Payment [cart/payment]*/
/*[10.31] custom donation buttons*/
.qt-checkout-gift-wrapper {
  width: 100%;
  margin-top: 10px;
}

.qt-checkout-gift {
  display: inline-block;
  min-width: 80px;
  padding: 20px 20px 20px 20px;
  color: #fff;
  text-align: center;
  vertical-align: middle;
  background-color: rgb(255, 92, 96) !important;
  border: 1px solid rgb(223, 62, 72) !important;
  border-radius: 4px;
  cursor: pointer;
}

.qt-checkout-gift:hover,
.qt-checkout-gift:active {
  background-color: rgb(223, 62, 72) !important;
}

@media (max-width: 768px) {
  .qt-checkout-gift-desktop-wrapper {
    display: none;
  }
  .qt-checkout-gift-responsive-wrapper {
    display: block;
  }
  .qt-check-gift-ask-desktop {
    display: none;
  }
  .qt-check-gift-ask-responsive {
    display: none; //currently set to display none as there is no content
  }
}

@media (min-width: 768px) {
  .qt-checkout-gift-desktop-wrapper {
    display: block;
  }
  .qt-checkout-gift-responsive-wrapper {
    display: none;
  }
  .qt-check-gift-ask-responsive {
    display: none;
  }
}

/*[10.32] GREAT BIG FAT BUY NOW BUTTON*/
#tn-payment-submit-button {
  background-color: rgb(255, 92, 96) !important;
  border: 1px solid rgb(223, 62, 72) !important;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: xx-large;
  font-weight: 600;
}

#tn-payment-submit-button:hover {
  background-color: rgb(223, 62, 72) !important;
}

/*[10.33] gift voucher lookup - move apply gift voucher button to end of gift voucher input box*/
@media (min-width: 768px) {
  #tn-payment-apply-gift-certificate-form {
    display: flex;
    flex-direction: row;
    //vertical-align: middle;
    align-items: stretch;
  }
  #tn-payment-apply-gift-certificate-form > .form-group {
    width: 50%;
    word-wrap: word-wrap;
  }
  #ApplyGiftCertificate_GiftCertificateId,
  #tn-payment-apply-gift-certificate-form > .form-group > .input-group {
    width: 100% !important;
  }
  #tn-payment-apply-gift-certificate-submit {
    max-height: 35px;
    margin-top: 24px;
    margin-left: 5px;
  }
}

/*on smaller screens, gift voucher number input field should fill the screen like the buttons... all nice and justified!*/
@media (max-width: 768px) {
  #ApplyGiftCertificate_GiftCertificateId,
  #tn-payment-apply-gift-certificate-form > .form-group > .input-group {
    width: 100% !important;
  }
}

/*[10.34] Position add donation button adjacent to donation amount input field*/
@media (min-width: 768px) {
  .tn-donation-ask-component > .row > div {
    width: 100%;
  }
  #tn-add-donation-form {
    display: flex;
    flex-basis: auto;
    flex-direction: row;
    align-items: stretch;
    //width: 100%;
  }
  #tn-add-donation-form > .form-group {
    width: 50%;
    word-wrap: word-wrap;
  }
  #tn-add-donation-button {
    max-height: 35px;
    margin-top: 24px;
    margin-left: 5px;
  }
}

/*[10.35] Make donation input less "angry" looking when invalid data is entered (eg: if customer leaves it blank!)*/
#tn-add-donation-form > .form-group > .control-label {
  color: #000 !important; 
  //font-weight: normal; 
}

#tn-add-donation-form > .form-group > .control-label:before {
  color: transparent;
  display: none;
}

#tn-add-donation-form > .form-group > .help-block {
  display: none !important;
}

#PaymentDonation_Amount:placeholder {
    font-size: xx-small;
}

#tn-add-donation-form > .has-error > .input-group > .input-group-addon {
  background-color: rgb(238,238,238) !important;
  border-color: rgb(204,204,204) !important;
  color: #000 !important;
}

#tn-add-donation-form > .has-error > .input-group > #PaymentDonation_Amount  {
  border-color: rgb(204,204,204) !important;
} 


/*[10.40] - Delivery options [cart/shipping]*/
/*primary button styling*/
#tn-shipping-button {
  background-color: rgb(255, 92, 96) !important;
  border: 1px solid rgb(223, 62, 72) !important;
}

#tn-shipping-button:hover {
  background-color: rgb(223, 62, 72) !important;
}

/*[10.50] - RACQ Member tracking cart validation*/
.racq-checkout-wrapper {
  margin-bottom: 1em;
  background-color: #eff8fc;
  padding: 1em;
  border-radius: 4px;
  box-sizing: border-box;
  font-family: Gordita;
  color: #333;
}

.racq-checkout-header {
  font-weight: 600;
}

.racq-checkout-subhead {
  margin-bottom: 1em;
}

.racq-checkout-input {
  margin-bottom: 0.5em;
}

#racq-member-number {
  width: 50%;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  height: 34px;
  padding: 6px 12px;
  background-color: #fff;
  vertical-align: middle;
}

.racq-member-btn {
  font-size: 110%;
  vertical-align: middle !important;
  margin-left: 5px !important;
}


/*[11.10] - Login Page [account/login]*/

/*style primary log in button to fit site look and feel*/
/*make purchase chevrons behave according to theme*/
#tn-login-button {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

#tn-login-button:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*simplify log in page for mobile --> hide headings for Create Account & Checkout as Guest; instead simply display the buttons*/
@media (max-width: 768px) {
  .tn-create-heading,
  .tn-create-sub-heading,
  .tn-account-login__guest-login-section-heading,
  .tn-account-login__guest-login-section-text {
    display: none !important;
    visibility: hidden !important;
  }
  .tn-account-login__guest-login-section {
    margin-top: 0px !important;
  }
  .tn-register-button {
    margin-top: 20px !important;
  }
}

/*[11.20] - Create new account [account/create]*/
/*style primary lbutton to fit site look and feel*/
/*make purchase chevrons behave according to theme*/
#tn-account-register-button-register {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

#tn-account-register-button-register:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*[11.30] - Account Update [account/update] */
/*Edit Account Information buttons*/
#tn-update-button {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

#tn-update-button:hover {
  background-color: rgb(223, 62, 72) !important; 
}

#tn-update-form .btn-default {
  width: 100% !important;
}

/*Update interests buttons*/
.tn-account-interests-page .btn-primary {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-account-interests-page .btn-primary:hover {
  background-color: rgb(223, 62, 72) !important; 
}

.tn-account-interests-page .btn-default {
  width: 100% !important;
}

/*Account Tab Navigation*/
/*borderless tabs*/
.tn-account-tab-navigation > ul,
.tn-account-tab-navigation a {
  border: 0px !important;
}

/*make tabs behave like buttons*/
.tn-account-tab-navigation a {
  border: 1px solid rgb(204, 204, 204) !important;
  border-radius: 4px !important;
  //padding: 6px 12px;
  padding: 6px 24px 6px 24px;
  
  color: #000 !important;
  text-decoration: none !important;
}

@media (max-width: 768px) {
  .tn-account-interests {
    margin-top: 8px;
  }
}

@media (min-width: 768px) {
  .tn-account-interests {
    margin-left: 10px !important;
    //margin-top: 8px;
  }
}

.tn-account-tab-navigation a:hover {
  background-color: rgb(230, 230, 230) !important;
}

.tn-account-tab-navigation .active a {
  background-color: rgb(230, 230, 230) !important;
}

/*[11.40] - Account Logout [account/logout]*/
/*style button to match look & feel*/
.tn-account-logout-page .btn-primary {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-account-logout-page .btn-primary:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*[11.50] - Account create brief [account/create/brief]*/
/*style button to match look & feel*/
.tn-account-create-brief-page .btn-primary {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-account-create-brief-page .btn-primary:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*[11.60] - Update Password [account/update/password]*/
/*primary action button*/
.tn-account-update-password-page .btn-primary {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-account-update-password-page .btn-primary:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*[12.10] - Donate Now [donate/contribute1], [donate/contribute2], [donate/i/[slug]]*/
#tn-contribution-submit {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

#tn-contribution-submit:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*[13.10] - Gift certificate [gift/certificiate]*/
#tn-gift-certificate-submit {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

#tn-gift-certificate-submit:hover {
  background-color: rgb(223, 62, 72) !important; 
}


/*[14.10] - Packages [packages/flex/[id]*/

/*Choosing prices*/
.tn-flex-package-detail-page .btn-primary {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-flex-package-detail-page .btn-primary:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/* Add "Checking availability" to busy spinner*/
.tn-flex-performance__busy-indicator__content:before {
  content: "Checking availability...";
  padding-bottom: 3px !important;
}

/*Hide extraneous padding and Group heading in perf groups*/
.tn-flex-performance-group__details {
  visibility: hidden;
  display: none;
}

.tn-flex-performance-group {
  padding-top: 0px !important;
}

/*Colour match perf add button*/
#tn-add-to-cart-button {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

#tn-add-to-cart-button:hover {
  background-color: rgb(223, 62, 72) !important; 
}

/*Colour match Add Package to Cart button*/
.tn-flex-cart__primary-section > .btn-primary {
  background-color: rgb(255, 92, 96) !important;
  color: #fff !important;
  border-color: rgb(223, 62, 72) !important;  
}

.tn-flex-cart__primary-section > .btn-primary:hover {
  background-color: rgb(223, 62, 72) !important; 
}


/*[15.10] - Covid19 update banner*/
.subbox a {
  font-size: 22px;
  font-weight: 600;
  font-family: Gordita;
  color: #fff;
  background-color: rgb(38, 166, 154);
  padding: 6px 36px 6px 24px;
  border-radius:  0;
}

.subbox a:hover {
  text-decoration: none;
  color: #fff;
}


/*[16.10] - Play Club email ask*/

.qt-club-container {
  padding-top: 5vh;
}

.qt-club-mainhead {
  font-weight: 600;
  font-size: xx-large;
}

.qt-club-subhead {
  font-size:medium;
  padding-top: 10px;
  padding-bottom: 10px;
}

.qt-club-emphasis {
  font-weight: 600;
}

.qt-club-text-input {
  width: 50% !important;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
  height: 34px;
  padding: 6px 12px;
  background-color: #fff;
  vertical-align: middle;
}

.qt-club-primary-btn {
  margin-top: 20px;
  display: inline-block;
  text-align: center;
  min-width: 350px;
  background-color: rgb(255, 92, 96);
  color: #fff;
  border-color: rgb(223, 62, 72);
  border-radius: 4px;
  padding: 10px 10px 10px 10px;
  cursor: pointer;
}

.qt-club-primary-btn:hover {
  background-color: rgb(223, 62, 72) !important;
}