/* John Maisey - 13/10/2020 - j.maisey@ucl
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after {
  content: '';
  content: none;
}

q:before, q:after {
  content: '';
  content: none;
}

/* remember to define focus styles! */
:focus {
  outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
  text-decoration: none;
}

del {
  text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

html {
  background: transparent;
}

body {
  background: transparent;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  font-size: 16px;
  line-height: 1.4;
  padding: 20px 0 0 0;
  color: #393736;
}

p, ul, ol, h2 {
  margin-bottom: 14px;
}

ul, ol {
  margin-left: 14px;
}

a:link, a:visited {
  text-decoration: none;
}
a:hover, a:active, a:focus {
  text-decoration: underline;
}

h1 {
  color: #393736;
  font-size: 30px;
  font-weight: 300;
  padding: 5px 0;
}

h2 {
  color: #393736;
  font-size: 24px;
  font-weight: 300;
}


/*-- form styling --*/
.Container {
  margin-bottom: 10px;
}

label.left {
  display: block;
  margin-bottom: 2px;
}

/* input.Input_Text */
input {
  padding: 0.3em;
  font-size: 16px;
  max-width: 100%;
}

label.right {
  color: #AD141A;
}

.comment {
  color: #999;
  display: block;
  font-size: 12px;
}

/* buttons */
/* Secondary: background: #d6d2c4 */


a.LinkButton, a#EnterMyAddressManuallyLink {
  color: #fff;
  cursor: pointer;
  display: inline-block;
  vertical-align: center;
  border: 0;
  background: #d6d2c4;
    border-radius: 2px;
}
a.LinkButton:link, a.LinkButton:visited,
a#EnterMyAddressManuallyLink:link, a#EnterMyAddressManuallyLink:visited {
  background: #d6d2c4;
    border-radius: 2px;
}

input[type=submit], input.Button, .spx-button-secondary, .spx-button-tertiary {
  font-size: 16px;
  color: #fff;
  cursor: pointer;
  display: inline-block;
  vertical-align: center;
  border: 0;
  background: #d6d2c4;
  border-radius: 2px;
}

.ConfirmButton, .MonthList li a, .spx-button-primary {
  color: #fff;
  cursor: pointer;
  display: inline-block;
  vertical-align: center;
  border: 0;
  background: #d6d2c4;
  margin-bottom: 10px;
  padding: 0 5px;
  border-radius: 2px;
}

a.LinkButton:hover, a.LinkButton:active, a.LinkButton:focus,
a#EnterMyAddressManuallyLink:hover, a#EnterMyAddressManuallyLink:active, a#EnterMyAddressManuallyLink:focus {
  text-decoration: none;
  background: #8c8279;
}

input.Button:hover, input.Button:active, input.Button:focus {
  text-decoration: none;
  background: #8c8279;
}
input.Button:hover {
  background: #8c8279;
}
input[type=submit]:hover, .spx-button-secondary:hover, .spx-button-tertiary:hover {
  background: #8c8279;
}

.ConfirmButton:hover, .MonthList li a:hover {
  background: #8c8279;
}

/* CTA Buttons */
.BookNowButton, .UpdateButton, .LinkButton, .Login, .NextButton, .CreateButton, .ContinueButton, .SaveButton, .SaveDetailsButton, .SavePreferencesButton, .SaveOtherPreferencesButton, .ResetPasswordButton, .Change_Password, .LoginLogout .Account_Link a, #ctl00_ContentPlaceHolder_Continue, #ctl00_ContentPlaceHolder_PasswordSetRedirectButton, #ctl00_ContentPlaceHolder_ContinueButton, #ctl00_ContentPlaceHolder_ContinueToBasketButton, input#ctl00_ContentPlaceHolder_AddToBasketButton,
.spx-button-primary {
  background: #034da1 !important;
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  text-align: center;
  color: #fff;
  line-height: 1;
  font-weight: 700;
  font-size: 19.2px !important;
  padding: .75em 0;
  margin: 20px 0;
  width: 100%;
  clear: both;
  float: right;
}
.BookNowButton:hover, .BookNowButton:active, .BookNowButton:focus, .UpdateButton:hover, .UpdateButton:active, .UpdateButton:focus, .LinkButton:hover, .LinkButton:active, .LinkButton:focus, .Login:hover, .Login:active, .Login:focus, .NextButton:hover, .NextButton:active, .NextButton:focus, .CreateButton:hover, .CreateButton:active, .CreateButton:focus, .ContinueButton:hover, .ContinueButton:active, .ContinueButton:focus, .SaveButton:hover, .SaveButton:active, .SaveButton:focus, .SaveDetailsButton:hover, .SaveDetailsButton:active, .SaveDetailsButton:focus, .SavePreferencesButton:hover, .SavePreferencesButton:active, .SavePreferencesButton:focus, .SaveOtherPreferencesButton:hover, .SaveOtherPreferencesButton:active, .SaveOtherPreferencesButton:focus, .ResetPasswordButton:hover, .ResetPasswordButton:active, .ResetPasswordButton:focus, .Change_Password:hover, .Change_Password:active, .Change_Password:focus, .LoginLogout .Account_Link a:hover, .LoginLogout .Account_Link a:active, .LoginLogout .Account_Link a:focus, #ctl00_ContentPlaceHolder_Continue:hover, #ctl00_ContentPlaceHolder_Continue:active, #ctl00_ContentPlaceHolder_Continue:focus, #ctl00_ContentPlaceHolder_PasswordSetRedirectButton:hover, #ctl00_ContentPlaceHolder_PasswordSetRedirectButton:active, #ctl00_ContentPlaceHolder_PasswordSetRedirectButton:focus, #ctl00_ContentPlaceHolder_ContinueButton:hover, #ctl00_ContentPlaceHolder_ContinueButton:active, #ctl00_ContentPlaceHolder_ContinueButton:focus, input#ctl00_ContentPlaceHolder_AddToBasketButton:hover, input#ctl00_ContentPlaceHolder_AddToBasketButton:active, input#ctl00_ContentPlaceHolder_AddToBasketButton:focus {
  text-decoration: none;
  background: #002854 !important;
}

/* Secondary Action Buttons */
.Logout, a#EnterMyAddressManuallyLink, input#ctl00_ContentPlaceHolder_AddAnotherGiftVoucherButton {
  clear: both;
  float: right;
  padding: 5px 8px;
}

.Options{
  clear: both;
  float: left;
}

.MonthList {
  float: none;
 }

.Month .MonthList {
  display: none !important;
}

/*-- basket styling --*/
/* keep the prototip short */
.prototip .SpektrixPage {
    min-height: 0px !important;
}

.PromoCode span.Input_Text {
  padding: 0.4em 4em 0.4em 0.4em;
  font-size: 16px;
  border: 1px solid #999;
}

.PromoCode .Button {
    font-size: 14px;
    background: #d6d2c4;
    padding: 7px;
    border: solid 1px #034da1;
    border-radius: 4px;
}

.Items {
  background: #fff;
  border: 1px solid #999;
  margin-bottom: 20px;
  padding: 8px;
}
.Items:after {
  clear: both;
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  visibility: hidden;
}

/* continue browsing link */
#ctl00_ContentPlaceHolder_WhatsOnLink {
  float: right;
  clear: both;
}

/* new clearfix */
* html .Items, *:first-child + html .Items {
  zoom: 1;
}

/* IE6 */
/* IE7 */
.Items dt {
  clear: left;
  float: left;
}
.Items dt.Item {
  /*      font-size: 14px; */
  font-weight: bold;
}
.Items dd {
  float: right;
}
.Items .Breakdown {
  margin: 0;
}
.Items .Breakdown li {
  float: left;
  padding: 0 10px;
}
.Items .Breakdown li.Total {
  text-align: right;
}
.Items .Breakdown .Label {
  display: none;
}
.Items dd.Header {
  float: right;
}
.Items dt.Item {
  border-top: 1px solid #d4d4d4;
  padding-top: 8px;
  margin: 8px 0 0 0;
  width: 100%;
}
.Items dt.Item span {
  clear: both;
  float: left;
  width: 70%;
}
.Items dd.Item {
  padding-top: 0px;
  position: relative;
  width: 100%;
}
.Items dd.Item .Details {
  font-size: 11px;
  margin: 0;
  padding-bottom: 10px;
}
.Items dd.Item .ViewDetails {
  /* float: left; */
}
.Items dd.Item .Buttons {
  float: right;
  margin-top: 15px;
  margin-bottom: 8px;
}
/* Specialcode fro line save button */
.Items dd.Item .Buttons input[value="Save"] {
  background: #034da1 !important;
}
.Items dd.Item .Buttons input[value="Save"]:hover {
  background: #002854 !important;
}

.Items dd.Item .ViewDetails {
  margin-bottom: 8px;
}
.Items dd.Item .Buttons .Button {
  background: #d6d2c4;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  padding: 3px 8px;
    border-radius: 2px;
}
.Items dd.Item .ViewDetails a:link, .Items dd.Item .ViewDetails a:visited {
  background: #d6d2c4;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  padding: 3px 8px;
    border-radius: 2px;
}
.Items dd.Item .Buttons .Button:hover, .Items dd.Item .Buttons .Button:active, .Items dd.Item .Buttons .Button:focus {
  text-decoration: none;
  background: #8c8279;
}
.Items dd.Item .ViewDetails a:hover, .Items dd.Item .ViewDetails a:active, .Items dd.Item .ViewDetails a:focus {
  text-decoration: none;
  background: #8c8279;
}
.Items dd.Item .Breakdown {
  /* position: absolute; */
  top: -14px;
  right: 0;
}

.Items .Footer {
  margin-top: 20px;
  border-top: 1px solid #d4d4d4;
  padding: 8px 0;
  font-size: 18px;
  font-weight: bold;
  width: 50%;
  clear: right;
}
.Items .Footer .Breakdown {
  float: right;
}
.Basket2 .Items dd.Item .Breakdown {
  float: right;
}
.Basket2 .Items dd.Item .Buttons {
  clear: both;
  float: right;
}


/*-- Ticket details --*/
.Details th, .TicketsSection th {
  border-bottom: 1px solid #d4d4d4;
  padding: 4px 6px;
  text-align: left;
}
.Details td, .TicketsSection td {
  padding: 4px 6px;
}

/*-- Login page styling --*/
.LoginLogout .LoginHeading::before {
  content: "Account ";
}
.LoginLogout .Account_Link {
  border-top: 1px solid #cccccc;
  font-size: 30px;
  font-weight: 300;
  padding: 20px 0 0;
  float: left;
  width: 100%;
  clear: both;
  margin-bottom: 0;
}
.LoginLogout .LoginForm {
  margin-top: 10px;
}

/* priceband table */
/* flip columns and rows */
.PricesContainer {
  clear: both;
}

/*-- Footer styles --*/
.SpektrixFooter {
  background: transparent;
  padding: 8px;
}

/* custom */
.Event, .Event_Summary, .Delivery_Method {
  margin-top: 14px;
}

.EventName, .Event_Summary, .Delivery_Method {
  font-weight: bold;
}

.ChooseSeats .EventName {
    font-size: 2em;
}
.ChooseSeats span.DateAndTime {
    display: block;
}

.Basket2 div.Buttons {
  float: right;
  width: 100%;
}

.Savings {
  float: right;
}
.Savings input {
  margin-bottom: 5px;
}

.Items {
  clear: both;
}

select {
  padding: 0.3em;
  font-size: 16px;
  line-height: 16px;
  max-width: 100%;
}

/* calendar view */

/* calendar month picker */
.EventsCalendar .MonthList li a {
  display: block;
  float: left;
  margin: 0 6px 20px 0;
  padding: 5px 8px;
  background-color: #8c8279;
  opacity: 1.0;
}
.EventsCalendar .MonthList li a:hover, .EventsCalendar .MonthList li a:active, .EventsCalendar .MonthList li a:focus {
  text-decoration: none;
  background: #9c9188;
} 

/* calendar view - calendar*/
.EventsCalendar table {
  margin-top: 20px;
  clear: both;
  float: left;
  width: 100%;
  border: 1px solid #ccc;
}
.EventsCalendar th, .EventsCalendar td {
  border: 1px solid #ccc;
}
.EventsCalendar table td {
  width: 13%;
  height: 70px;
}
.EventsCalendar table .CalendarDate {
  background-color: #9c9188;
  opacity: 1.0;
  padding: 1px 3px;
  color: #fff;
  font-size: 12px;
}
.EventsCalendar table .Inactive .CalendarDate {
  background-color: #d6d2c4;
}
.EventsCalendar table .Instance a {
  background-color: rgba(214, 210, 196, 0.3);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  display: block;
  padding: 2px 2px;
  margin: 3px;
}
.EventsCalendar table .Instance a:hover {
  background-color: rgba(214, 210, 196, 0.7);
}
.EventsCalendar table .Instance .Thumbnail, .EventsCalendar table .Instance .Description, .EventsCalendar table .Instance .MoreInfo {
  display: none;
}

.EventDates {
  padding-bottom: 20px;
}

/* New Account buttons */
.NewAccount .Progress li span.Done, .NewAccount .Progress li span.Current {
  color: #fff;
  display: block;
  float: left;
  margin: 0 6px 6px 0;
  padding: 5px 8px;
  background-color: #8c8279;
  opacity: 1.0;
}
.NewAccount .Progress li span.Done:hover, .NewAccount .Progress li span.Done:active, .NewAccount .Progress li span.Done:focus, .NewAccount .Progress li span.Current:hover, .NewAccount .Progress li span.Current:active, .NewAccount .Progress li span.Current:focus {
  text-decoration: none;
  background: #9c9188;
}

.NewAccount .Progress li span.NotDone {
  display: block;
  float: left;
  margin: 0 6px 6px 0;
  padding: 4px 8px;
  border: 1px solid;
  opacity: 1.0;
}

.NewAccount h2 {
  clear: both;
}

/* My Account buttons */
.MyAccount .Options li a {
  color: #fff;
  display: block;
  float: left;
  margin: 0 6px 6px 0;
  padding: 5px 8px;
  background-color: #8c8279;
  opacity: 1.0;
}
.MyAccount .Options li a:hover, .MyAccount .Options li a:active, .MyAccount .Options li a:focus {
  text-decoration: none;
  background: #9c9188;
}

.MyAccount .Options li a.Selected {
  color: #393736;
}

.MyAccount .Options {
  float: inherit;
}

.MyAccount h2 {
  padding-top: 30px;
  clear: both;
}
.MyAccount li#ctl00_ContentPlaceHolder_OtherPreferencesBullet {
    display: inline-table;
}

/* Checkout buttons */
.Checkout .Progress li a {
  color: #fff;
  display: block;
  float: left;
  margin: 0 6px 6px 0;
  padding: 5px 8px;
  background-color: #8c8279;
  opacity: 1.0;
}
.Checkout .Progress li a:hover, .Checkout .Progress li a:active, .Checkout .Progress li a:focus {
  text-decoration: none;
  background: #9c9188;
}

.Checkout .Progress li .NotDone {
  display: block;
  float: left;
  margin: 0 6px 6px 0;
  padding: 4px 8px;
  border: 1px solid;
  opacity: 1.0;
}

.Checkout h2 {
  clear: both;
}

.Current {
  color: #393736;
}

.Checkout .View {
  float: left;
  clear: both;
  padding-top: 30px;
}

/* checkout edit button space after */
.Checkout .View .Buttons {
  padding-bottom: 40px;
}

/* Ts & Cs checkbox */
.TermsAndConditions input {
  margin-top: 10px;
  vertical-align: bottom;
}
.TermsAndConditions::after {
  content: "I agree to the terms & conditions.";
  color: red;
}

/* checkout summary table */
.SummarySection table {
  margin: 20px 0px;
  font-weight: bold;
}
.SummarySection table td {
  padding: 0 10px 0 0;
  font-weight: bold;
}

/* Checkout step back buttons */
/* Billing edit buttons */
.SummaryView .Buttons .Button, .BillingView .Button {
  background: #d6d2c4;
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  padding: 3px 8px;
    border-radius: 2px;
}

.SummaryView .Buttons .Button:hover, .SummaryView .Buttons .Button:active, .SummaryView .Buttons .Button:focus {
  text-decoration: none;
  background: #002854;
}

.BillingView .Button:hover, .BillingView .Button:active, .BillingView .Button:focus {
  text-decoration: none;
  background: #8c8279;
}

.SpektrixPage {
  clear: both;
}

/* Header buttons */
#HeaderButtons {
  float: right;
}
a.HeaderButton {
  color: #fff !important;
  cursor: pointer;
  display: inline-block;
  margin: 0 0 10px;
  padding: 5px 20px;
  border: 0;
  background-color: #8f993e;
}
a.HeaderButton:hover {
  text-decoration: none;
  background-color: #9ca35f;
}
/* New top buttons resize */
#HeaderButtons img {
  width: 24px;
  height: 24px;
  vertical-align: middle;
}

/* To show event images at no more than 100% width of container */
.DetailsContainer img {
  max-width: 100%;
}

/* 
To show ".EventsCalendar table" as a list.
from: https://css-tricks.com/responsive-data-tables/
This query will take effect for any screen smaller than 600px.
*/
@media only screen and (max-width: 600px), (min-device-width: 100px) and (max-device-width: 1024px) {
  .Details, .TicketsSection {
    width: 100%;
  }
  .Details td, .Details tr, .TicketsSection td, .TicketsSection tr {
    display: block;
  }
  .Details tr, .TicketsSection tr {
    border-bottom: 1px solid #ddd;
  }
  .Details td.Delete::after, .TicketsSection td.Delete::after {
    content: " Remove ticket";
  }

  /* Force table to not be like tables anymore */
  .EventsCalendar table, .EventsCalendar thead, .EventsCalendar tbody, .EventsCalendar th, .EventsCalendar td, .EventsCalendar tr {
    display: initial;
    border: none;
  }
  .EventsCalendar td.Date {
    position: relative;
  }
  .EventsCalendar table .Instance a {
    padding: 4px 8px;
    font-size: 16px;
  }
  .EventsCalendar table td div:nth-child(2), .EventsCalendar table td div:nth-child(3), .EventsCalendar table td div:nth-child(4), .EventsCalendar table td div:nth-child(5), .EventsCalendar table td div:nth-child(6) {
    /* height: 25px; */
    margin: 10px 0;
    width: 100%;
  }
  .EventsCalendar table td div:nth-last-child(2) {
    /* height: 0; */
    padding: 0;
    font-size: 0px;
  }

/* for under 600px resize zone selector Circle/Stalls*/
/* resize bg image and use VW measures */
/* John Maisey - 5/2/20 */
 div#ctl00_ContentPlaceHolder_SeatingAreaControl_ContainerDiv {
    background-repeat: no-repeat !important;
    background-size: contain !important;
    width: 100vw !important;
    height: 100vw !important;
  }
div#ctl00_ContentPlaceHolder_SeatingAreaControl_ContainerDiv a#ctl00_ContentPlaceHolder_SeatingAreaControl_SeatingAreaList_ctl00_Name {
   height: 17vw !important;
   left: 11vw !important;
   top: 13vw !important;
   width: 78vw !important;
  }
div#ctl00_ContentPlaceHolder_SeatingAreaControl_ContainerDiv a#ctl00_ContentPlaceHolder_SeatingAreaControl_SeatingAreaList_ctl01_Name {
   height: 17vw !important;
   left: 11vw !important;
   top: 35vw !important;
   width: 78vw !important;
  }
}

/* fix webkit buttons */
.Button {
  -webkit-appearance: none;
}

/* payment page scrolling*/
#ctl00_ContentPlaceHolder_PurchaseViewControl_PaymentUIControl_FoxIFrameControl_IFrame {
  height: 700px;
}

/* add space below .DetailsContainer */
.EventDetails .DetailsContainer {
  padding-bottom: 50px;
}

/* sold out message in red */
.SoldOutMessage, p.NoDates, p.ErrorMessage {
  color: red;
  font-size: 24px;
}

/* Acc updates message in red */
#ctl00_ContentPlaceHolder_SavedMessage,
.spx-validation-message {
  color: red;
}

/* Acc duplicate message in new para*/
#ctl00_ContentPlaceHolder_ErrorMessageContainer {
  clear: both;
  padding-top: 10px;
}

/* Hide DOB field */
.NewAccount .DateOfBirth,
.DetailsEditor .DateOfBirth {
  display: none;
}

/* Cooler saving text basket*/
.Basket2 .Saving {
  color: #9ca35f;
}
/* Hide savings total on basket*/
.Basket2 .Footer .Saving {
  display: none;
}

/*space Account preferences pannel */
.AccountPreferencesHeading {
  margin-bottom: 10px;
}

/* for Order Attribute page */
.Checkout .Container.Attribute {
  clear: both;
  padding: 20px 0px 0px;
}

.Checkout .Container.Attribute input {
  width: 90%;
}

.detailBefore::before {
  content: "If so, please describe your ";
}

.checkBefore::before {
  content: "Do you have ";
}

/* For contact Prefs list */
.GeneralPreferences .PreferenceContainer::before {
  content: "In addition to directly contacting you about your event bookings:";
}

.GeneralPreferences .PreferenceContainer .Preferences {
  margin-top: 10px;
}

/* for specific mailing list prefs */
#ctl00_ContentPlaceHolder_OtherPreferences1_TagGroupList_ctl00_Description::after  {
  content: " We will send you occasional updates on these by email.";
}

/* partner companies option */

#ctl00_ContentPlaceHolder_ContactPreferencesViewControl_ContactPreferencesWikiText {
  margin-bottom: 14px;
}

/* gab above simpleseatingdiv */

#ctl00_ContentPlaceHolder_EventsRepeater_ctl00_Label2 {
	Padding-top: 14px;
}

/* clear both for loging form so error message does not run on */
div.LoginForm {
	clear: both;
}

/* padding in event details tables */

div.EventDetails td {
	padding: 10px 5px 0 5px;
}

/*CSS for Event List - added Nov 2019 */

.EventsList .Events {
	display: block;
	float: left;
	clear: both;
	margin-bottom:100px;
}

.EventsList .Events div {
	display: block;
	float: left;
	clear: both;
}
.EventsList .Event_Image {
	display: none;
}

.EventsList .Event_Text .Event_Name {
  color: #393736;
  font-size: 24px;
  font-weight: 300;
}
.EventsList .Event_Text .Event_Name,
.EventsList .Event_Text .Event_Description,
.EventsList .Event_Text .Event_Dates,
.EventsList .Event_Text .More_Info {
  display: block;
  float: left;
  clear: both;
}
.EventsList .Event_Text .Event_Dates,
.EventsList .Event_Text .More_Info {
  padding-left: 40px;
}

/* New Checkout flow specific */

.spx-section-container {
  clear: both;
  border-top: 1px solid;
  padding: 5px 0 20px;
}

.spx-field-container {
  margin-bottom: 14px;
}

/* hide empty fields yet to be editable */
.spx-state-empty {
    display: none;
}
/*Highlight errors box*/
.spx-validation-summary-errors {
    margin: 1em;
    background-color: lightpink;
    padding: 1em;
    border: 1px solid gray;
}

/* tidy up for labels for Gift Aid text boxes... */
.spx-fieldset-container__checkout--gift-aid .spx-field-container__checkout--gift-aid {
	margin: 14px 0;
}
.spx-fieldset-container__checkout--gift-aid .spx-field-container .spx-label-field__checkout--gift-aid {
    display: inline-block;
    width: 90%;
    text-align: left;
    padding-left: 5px;
}
.spx-fieldset-container__checkout--gift-aid .spx-field-container .spx-radio-button__checkout--gift-aid {
   vertical-align: top;
 }

/* Main checkout button - space below for extending form */
.spx-button-primary__checkout {
    margin-bottom: 100px;
}
.spx-button-primary__checkout--ticket-delivery {
     margin-bottom: 400px;
}   
/* For Option and checkboxes */
div.spx-state-available label.spx-label-field, 
.spx-field-container label.spx-label-field__checkout--contact-preferences, 
.spx-field-container label.spx-label-field__checkout--order-summary, 
.spx-field-container label.spx-label-field__checkout--select-address {
    text-align: left;
    width: auto;
}

div.spx-subsection-summary-container__checkout--personal-details,
div.spx-data-group-address-view {
    padding-left: 14px;

}
span.spx-text-copy__checkout--personal-details.spx-data-email, 
span.spx-text-copy__checkout--personal-details.spx-data-phone-number, 
span.spx-text-copy__checkout--ticket-delivery-address, 
span.spx-text-copy__checkout--billing-address {
    display: block;
}

.spx-wikitext-container__checkout--additional-details {
  padding-bottom: 20px;
}

.spx-button-secondary, .spx-button-tertiary {
  border: none;
  padding: 5px 8px
}

.spx-order-line__checkout--ticket-summary {
  display: block;
}

/* Special padding for "forgotten password" button */
.spx-button-secondary__checkout--start-checkout-forgotten-password {
    min-width: 50%;
    padding: 1em;
}
.spx-text-copy__checkout--start-checkout-forgotten-password::before {
	content: 'New Here, or ';
}
.spx-button-primary__checkout[name="action:LoginWithPassword"] {
    margin-bottom: 20px;
}


.spx-data-event-name {
  font-weight: bold;
}

.spx-iframe__checkout--payment {
  height: 550px !important;
}

/* FB option on account page */
#fb-root {
    float: left;
    margin-bottom: 2em;
}

#ctl00_ContentPlaceHolder_LoginWithFacebookLabel {
    float: left;
    margin-right: 1em;
}

/* style cross selling items 2/12/20 JM */

.Basket2 dt.Promo {
    width: 100%;
    border-top: 1px solid #d4d4d4;
}

.Basket2 ul.PromoItems a {
    color: white;
    background: #d6d2c4;
    display: block;
    padding: 2px 5px;
    margin: 5px 0;
    border: solid 1px #034da1;
    border-radius: 4px;
}

.Basket2 ul.PromoItems a:hover {
    text-decoration: none;
    background: #8c8279;
}

/* Gift Voucher page https://www.ucl.ac.uk/event-ticketing/app/?pg=GiftVouchers */

.AddGiftVoucher .Message textarea {
    height: 6em;
    width: 15em;
}
.AddGiftVoucher .SendTo .left,
.AddGiftVoucher .SendTo .Input_Text, 
.AddGiftVoucher .From .left,
.AddGiftVoucher .Message .left {
    display: block;
}


/* Account Memberships https://tickets.ucl.ac.uk/bloomsburytheatre/website/secure/MyAccount.aspx?screen=memberships */
.MyMemberships .MembershipName {
    font-weight: bold;
    display: block;
}

/* accesibility on seat select page */
.ChooseSeatsHeading table
{
    margin: 1em;
    background-color: lightpink;
    padding: 1em;
    border: 1px solid gray;
}
.ChooseSeatsHeading table td
{
    padding: 1em;
}