@import url('https://fonts.googleapis.com/css?family=Lato:300,400,400i,700,900');

body {
    font-family: 'Lato', sans-serif;
    color: #646566;
    overflow-y: scroll;
}

h1, h2, h3, h4, h5, h6{
  color: #e33a91;
}

#aspnetForm .SpektrixPage h1{
  font-size: 6vw;
}

/* Lists */

#aspnetForm .SpektrixPage ul li{
  list-style-type: none;
  position: relative;
  margin-bottom: .3rem;
}
#aspnetForm .SpektrixPage ul li:before{
  content: "";
  height: 10px;
  width: 10px;
  background: #e33a91;
  border-radius: 50%;
  left: 0;
  display: block;
  position: absolute;
  left: -1.5rem;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Tables */

#aspnetForm .SpektrixPage table{
  border: 1px solid #e33a91;
  border-collapse: collapse;
  empty-cells: show;
  width: 100%;
}
#aspnetForm .SpektrixPage table tr th{
  background: #e33a91;
  color: #FFF;
  font-weight: 600;
  padding: .5rem 1.5rem;
}

#aspnetForm .SpektrixPage table tr,
#aspnetForm .SpektrixPage table td{
  border: 1px solid #e33a91;
}

#aspnetForm .SpektrixPage table tr td{
  padding: .5rem 1.5rem;
}

/* Calendar Selection Table */
#aspnetForm .SpektrixPage .CalendarGrid table{ width: auto; }
#aspnetForm .SpektrixPage .CalendarGrid table th{ padding: 0.4rem 0.5rem; }
#aspnetForm .SpektrixPage .CalendarGrid table tr,
#aspnetForm .SpektrixPage .CalendarGrid table td{ padding: .2rem; }

/* Links */

#aspnetForm .SpektrixPage a{
  color: #e33a91;
  font-weight: 600;
}
#aspnetForm .SpektrixPage a:hover{ text-decoration: underline; }


/* Buttons */
#aspnetForm .Basket2 .CheckoutLink,
#aspnetForm .SpektrixPage .Button,
#aspnetForm .SpektrixPage #ctl00_ContentPlaceHolder_AddressEditor_PostcodeLookupTop,
#aspnetForm .NewAccount .Postcode input[type="submit"],
.fox form .PaymentOptions .ConfirmButton, .spx-button-secondary, .spx-button-primary, #FindMyAddressButton, .spx-button-tertiary{
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: #e33a91;
  color: #FFF;
  text-decoration: none;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  font-size: 17px;
  border: 0;
  font-weight: 400;
  border-radius: 0;
  -webkit-transition: all .2s ease-out;
     -moz-transition: all .2s ease-out;
          transition: all .2s ease-out;
}

#FindMyAddressButton, .spx-button-secondary, .spx-button-primary {
    margin-top:10px;
    margin-bottom: 10px;
}

.fox form .PaymentOptions .ConfirmButton:hover,
#aspnetForm .Basket2 .CheckoutLink:hover,
#aspnetForm .SpektrixPage #ctl00_ContentPlaceHolder_AddressEditor_PostcodeLookupTop:hover,
#aspnetForm .NewAccount .Postcode input[type="submit"]:hover,
#aspnetForm .NewAccount .Postcode input[type="submit"]:active,
#aspnetForm .SpektrixPage .Button:hover,
#aspnetForm .SpektrixPage .Button:active{
  background: #a21b69;
  text-decoration: none;
}

#aspnetForm .Basket2 .CheckoutLink:hover,
#aspnetForm .SpektrixPage #ctl00_ContentPlaceHolder_AddressEditor_PostcodeLookupTop:hover,
#aspnetForm .NewAccount .Postcode input[type="submit"]:hover,
#aspnetForm .SpektrixPage .Button:hover{ cursor: pointer; }

/* Forms
---------------------------------------------------------- */

/* Select Fields */
#aspnetForm select {
  border-radius: 0;
  background: #FFF;
  border: 1px solid #e33a91;
  font-size: 17px;
  padding: 0.6rem;
  color: #646566;
}

/* Login/New Account/Forgot Password */

#aspnetForm .LoginLogout .OptionalMessage {
  margin-bottom: 1.5rem;
}

#aspnetForm .LoginLogout .LoginForm {
  margin-bottom: 1.5rem;
}

#aspnetForm .NewAccount .Progress ol li, .spx-list-item { color: #e33a91; }
#aspnetForm .NewAccount .Progress ol li.current { color: #a21b69; }

#aspnetForm .NewAccount .Container,
#aspnetForm .LoginLogout .LoginForm .Container {
  margin-bottom: 1rem;
}

#aspnetForm .SpektrixPage label.left {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
  color: #e33a91;
}

#aspnetForm .SpektrixPage input[type="text"],
#aspnetForm .SpektrixPage .Input_Text,
.spx-input-text  {
  display: inline-block;
  padding: 10px 16px;
  color: #646566;
  font-size: 17px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #e33a91;
  margin-bottom: .2rem;
  border-radius: 0;
}

#aspnetForm .NewAccount .DateOfBirth input {
  border: 1px solid #e33a91;
  padding: 0.6rem;
  font-size: 17px;
  color: #646566;
}

#aspnetForm .SpektrixPage label.right { padding-left: 0.5rem; }

/* Addresses */
#aspnetForm .NewAccount .SelectMessage{
  color: #e33a91;
  font-weight: 600;
}
#aspnetForm .NewAccount .Addresses{ margin-bottom: 1.5rem; }
#aspnetForm .NewAccount .Addresses .AddressOption{ margin-bottom: 0.3rem; }

#aspnetForm .SpektrixPage.ForgotPassword .Email{ margin-bottom: 1rem; }

/* My Account
----------------------------------------------------------------- */

#aspnetForm .SpektrixPage.MyAccount .Options ul li a{
  text-decoration: none;
  color: #e33a91;
  font-weight: 400;
}
#aspnetForm .SpektrixPage.MyAccount .Options ul li a:hover { text-decoration: underline; }
#aspnetForm .SpektrixPage.MyAccount .Options ul li a.Selected{
  color: #a21b69;
  font-weight: 600;
}

#aspnetForm .SpektrixPage.MyAccount .DetailsEditor{ margin-bottom: 1.5rem; }
#aspnetForm .SpektrixPage.MyAccount a.ChangePassword{ margin-bottom: 1rem; display: block; }

#aspnetForm .SpektrixPage.MyAccount .Addresses{
  margin-bottom: 1.5rem;
}
#aspnetForm .SpektrixPage.MyAccount .Addresses .Address a{ margin-right: 1rem; }

/* Edit Address */

#aspnetForm .EditAddress .AddressOptions,
#aspnetForm .EditAddress .AddressEdit{ margin-bottom: 1.5rem; }

/* Preferences */
#aspnetForm .SpektrixPage.MyAccount .Preferences{ margin-bottom: 1.5rem; }

/* Orders */
#aspnetForm .SpektrixPage.MyAccount .MyOrders .Pager a{ margin-right: 1rem; }

/* Gift Vouchers
----------------------------------------------------------------- */

#aspnetForm .SpektrixPage.AddGiftVoucher .Container,
#aspnetForm .SpektrixPage.AddGiftVoucher .Container .AddAnotherVoucherText{
  display: block;
  margin-bottom: 25px;
}
#aspnetForm .SpektrixPage.AddGiftVoucher .Container span.left{
  color: #e33a91;
  display: block;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

/* Save Time - Interval
----------------------------------------------------------------- */

#aspnetForm .SpektrixPage.SupplementaryEventsPage #SimpleSeatingDiv > .TicketType{
  display: flex;
  margin-top: 10px;
}
#aspnetForm .SpektrixPage.SupplementaryEventsPage #SimpleSeatingDiv > .TicketType > * {
  flex: 1 1 0;
  min-width: 20%;
  margin: 10px;
}


/* Basket
----------------------------------------------------------------- */

/* Hide */
#aspnetForm .SpektrixPage .BasketHeading{ display: none; }
#aspnetForm .SpektrixPage.Basket2 .Savings > p,
#aspnetForm .SpektrixPage.Basket2 .Savings > ul{
  display: none;
}

#aspnetForm .SpektrixPage.Basket2 .Savings{ margin-bottom: 2rem; }

#aspnetForm .SpektrixPage.Basket2 .Items .Header{ display: none; }
#aspnetForm .SpektrixPage.Basket2 .Items .Item.Instance > span{
  font-weight: 600;
  color: #e33a91;
  font-size: 18px;
}
#aspnetForm .SpektrixPage.Basket2 .Items .Item.Instance .InstanceDate{ font-weight: 500; }
#aspnetForm .SpektrixPage.Basket2 .Items dd.Item.Instance{ margin-bottom: 1.5rem; }
#aspnetForm .SpektrixPage.Basket2 .Items dt.Footer{
  font-weight: 600;
  margin-bottom: 0.5rem;

}
#aspnetForm .SpektrixPage.Basket2 .Items dd.Footer{
  margin-bottom: 1.5rem;
  display: block;
}
#aspnetForm .SpektrixPage.Basket2 .Items dd.Footer .Breakdown{ padding: 0; }
#aspnetForm .SpektrixPage.Basket2 .Items dd.Footer .Breakdown li:before{
  content: none;
}

/* Billing/Payment
---------------------------------------------------------------- */

#aspnetForm .SpektrixPage .BillingView .AddressList li:before{ content: none; }
#aspnetForm .SpektrixPage .BillingView .AddressList li{ position: relative; }
#aspnetForm .SpektrixPage .BillingView .AddressList li > label{ margin-bottom: 1rem; display: block; }
#aspnetForm .SpektrixPage .BillingView .AddressList li input[type="radio"]{
  position: absolute;
  left: -2rem;
  top: .2rem;
}

#aspnetForm .SpektrixPage.Checkout .SummarySection > table{ margin-bottom: 1rem; }

/* Payment Form */
.fox form .PaymentOptions .Container { margin-bottom: 1rem; }
.fox form .PaymentOptions label.left{
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
  color: #e33a91;
}
.fox form .PaymentOptions label.right{ padding-left: 0.5rem; }
.fox form .PaymentOptions .Input_Text{
  display: inline-block;
  padding: 10px 16px;
  color: #646566;
  font-size: 17px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: 1px solid #e33a91;
  margin-bottom: .2rem;
  border-radius: 0;
}

.fox form .PaymentOptions select{
  border-radius: 0;
  background: #FFF;
  border: 1px solid #e33a91;
  font-size: 17px;
  padding: 0.6rem;
  color: #646566;
}


/* DOnations
---------------------------------------------------------------- */


/* Responsive Changes
---------------------------------------------------------------- */

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

  body { overflow: auto; }

  #aspnetForm .SpektrixPage h1{
    font-size: 2.25rem;
  }

}

.spx-input-checkbox {
    float: left;
    margin-right:10px;
}

.spx-link-edit {
     color: #e33a91;
     text-decoration: none;
}

.spx-link-edit:hover {
    text-decoration: underline;
}

#EnterMyAddressManuallyLink, #TermsAndConditionsWikiText a{
    color: #e33a91;
    text-decoration: none;
}

#EnterMyAddressManuallyLink, #TermsAndConditionsWikiText a:hover{
    text-decoration: underline;
}

.spx-input-dropdown, .spx-field-container select {

   display: inline-block;
    font-size: 16px;
    font-family: sans-serif;
    font-weight: 700;
    color: #444;
    line-height: 1.3;
    padding: .6em 1.4em .5em .8em;
    max-width: 100%; /* useful when width is set to anything other than 100% */
    box-sizing: border-box;
    margin: 10px 6px 10px 10px;;
    border: 1px solid #e33a91;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;

}

.spx-section-container__checkout--payment {
    min-height: 700px;
}

.spx-iframe__checkout--payment {
    min-height: 700px;
}

.ErrorMessage {
    color: red;
    font-weight: bold;
}

.spx-state-empty h2{
    color: #cccccc !important;
}