/* This is the go-to file for styling new content in the online checkout. It is a layer of styling on top of the default styles of base.css. These styles can be for elements that only appear on a single page or multiple pages. */

body {
	background-color: #ededed;
}

#header {
	background: #fff;
	border-bottom: 3px solid #00549f;
	padding: 0.5em 1em;
}

.columns.swap {
	float: right;
}

.container,
.fixed-container {
	background: #fff;
	padding: 1em 0;
}

.checkout h1 {
	font-size: 1.6em;
}

#order-confirmation h1 {
	clear: left;
}

.checkout h2 {
	font-size: 1.3em;
	margin-bottom: 0.5em;
	color: #333;
}

.checkout h3 {
	font-size: 1.2em;
	margin-bottom: 0.5em;
	color: #333;
}

.checkout h4 {
	font-size: 1.1em;
}

/* Keeps Country selector from being wider than viewport on mobile */
/*select {
	max-width: 100%;
}*/

#performance-details .location,
#performance-details-mobile .location {
	margin-top: 0.5em;
}

#performance-details .location h2 {
	font-size: 18px;
}

#performance-details-mobile .location h2 {
	font-size: 1em;
}

.calendar-day {
	text-align: center;
	padding: 0.2em;
	width: 40px;
	position: absolute;
}

.calendar-day span {
	display: block;
	font-weight: bold;
	line-height: 1.2;	
}

.calendar-day .date {
	font-size: 1.4em;
}

.calendar-day .backdrop {
	background-color: #ededed;
}

.performer-image {
  float: left;
  width: 120px;
}

@media only screen and (max-width: 768px) {
  .performer-image {
    float: none;
  }
}

#checkout-breadcrumb {
	margin-bottom: 20px;
	padding-bottom: 10px;
	border-bottom: 1px dotted #ccc; 
	text-align: center;
}

#checkout-breadcrumb li {
	list-style: none;
	display: inline;
	font-weight: bold;
	text-transform: uppercase;
	color: #ccc;
}

.checkout-step-1 #checkout-breadcrumb .step1,
.checkout-step-2 #checkout-breadcrumb .step2,
.checkout-step-3 #checkout-breadcrumb .step3,
.checkout-step-4 #checkout-breadcrumb .step4 {
	color: #000;
}

#checkout-breadcrumb li:after {
	padding: 0 20px;
	content: '\2192';
}

#checkout-breadcrumb li.last:after {
	content: '';
}

#checkout-breadcrumb .current {
	color: #000;
}


.checkout-step-3 form .row .label,
.checkout-step-3 form .row label {
	font-weight:normal;
	text-align:left;
}

#performance-details .description,
#performance-details-mobile .description,
#delivery-methods .row .description {
	font-size: 0.9em;
	line-height: 1.2;
}

#EtixOnlineManifestMapDivSection {
	text-align: center;
}

#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #a3a6ac;
	background-color: #ffffff;
	padding: 10px 10px 5px 10px;
	min-width: 80px ;
}

.ui-tooltip {
	-moz-border-radius: 0;
	-webkit-border-radius: 0;
	border-radius: 0;
	color: #000;
  padding: 10px;
  font: bold 14px 'Open Sans', 'Helvetica Neue', Sans-Serif;
  display: inline-block;
  width: auto;
  min-width: 180px;
  min-height: 16px;
}

[id$="-seat-manifest"] .ui-tooltip, #add-seat-show-manifest .ui-tooltip {
    /* DEV-5060 - "jumping" bug fix. Absolute positioning is used to override inline style. */
    position: absolute !important;
	/* DEV-6553 Upgrade jquery related library to lasted version for online pages */
	opacity: 1!important;
	/* overlay the select element added in pick up seat page, set it equals value of z-index on dialog */
	z-index: 1002;
}

.ui-tooltip__title {
	float: left;
}

.ui-tooltip__status {
	color: #dd5858;
	float: right;
	font-weight: normal;
	font-size: 15px;
}

.ui-tooltip__img {
	margin: 7px 0 -3px 0;
}

.ui-tooltip .arrow {
	height: 1px;
  width: 70px;
  overflow: hidden;
  position: absolute;
  margin-left: -35px;
  bottom: -16px;
	z-index: 3000;
	padding: 10px 10px 5px 10px;
	min-width: 80px ;
}

.ui-tooltip .arrow:after {
  content: '';
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.ui-tooltip .arrow.top {
  top: -16px;
  bottom: auto;
}

.ui-tooltip .arrow.top:after {
  bottom: -20px;
  top: auto;
}

.ui-tooltip .arrow.left {
  left: 20%;
}

.ui-tooltip .arrow.right {
  left: 82%;
}

.ui-tooltip, .ui-tooltip .arrow:after {
  background: #fff;
  border: 1px solid #a3a6ac;
}

#tooltip h3, #tooltip div { 
	margin: 0; 
}

.tooltip__contents {
	font-size: 14px;
}

.tooltip__img {
	padding-top: 10px;
}

.tooltip__title {
	float: left;
	font-weight: bold;
}

.tooltip__status {
	color: #dd5858;
	float: right;
	padding-left: 5px;
}

.presentatonMessage {
  margin: 10px auto;
  text-align: center;
  display: block;
  color: #333;
  font-weight: bolder;
}

#seat-legend {
	list-style: none;
	padding-left: 0;
}

#seat-legend li {
    margin: 5px 20px 5px 0;
    display: inline-block;
}

#seat-legend li * {
	vertical-align: middle;
}

#shopping-links {
  text-align: right;
  float: right;
  font-size: 0.9em;
}

.botstopper {
	margin-bottom: 15px;
}

.botstopper .verify-code {
	margin-bottom: 10px;
}

.botstopper input[type='text'] {
    width: 200px;
}

.checkout-step-1 .row .helper {
  margin: 0;
  font-weight: normal;
  max-width: 227px;
}

@media screen and (max-width: 358px) {
	/* Reduce width of price code helper text at very small widths: */
	.checkout-step-1 .row .helper {
		width: 190px;
	}
}

@media screen and (max-width: 550px) {
	/* Margin for price level select boxes when they stack at mobile widths */
	.checkout-step-1 label + .select {
	  margin-top: 6px;
	}
}

.price-level-row {
  margin-bottom: 10px;
}

@media screen and (max-width: 767px) {
	.price-level-row {
		margin-bottom: 21px;
	}
}

.price-level-row .password {
  margin-top: 3px;
}

.price-level-row .password input {
  width: 200px;
}

.suggest-events p {
	font-size: 1.3em;
}

.suggest-events a {
	float: left;
	width: 280px;
	margin: 0 2em 2em 0em;
	color: white;
	font-size: 0.8em;
}

.suggest-events a:last-child {
	margin-right: 0;
}

.upsell-img-wrapper {
	margin-left: 25px;
}

.upsell-img {
	text-align: left;
	background: transparent url(../online3/images/featuredevent-gradient.png) left -90px;
	height: 182px;
	position: relative;
}

.upsell-text {
	position: absolute;
	bottom: 0;
	padding: 0 0 1em 1em;
	font-family: 'open sans';
}

.upsell-event-name {
	font-size: 12px;
	font-weight: bold;
}

/* Resend confirmation email */
#confirmation-email-resend {
	background-color: #fff;
}

#confirmation-email-resend .alert {
	padding: 15px;
	border: 1px solid transparent;
	border-radius: 4px;
}

#confirmation-email-resend .alert-danger {
	color: #b94a48;
	background-color: #f2dede;
	border-color: #eed3d7;
}

#confirmation-email-resend .bordered {
	width: 100%;
}
#confirmation-email-resend .five.columns {
	/* Lines columns up at around 840px wide */
	/* Keeps credit card label from breaking on smaller screens */
	min-width: 280px;
}

#confirmation-email-resend .sent,
#confirmation-email-resend table .fa.info {
	color: #69a32b;
	font-size: 24px;
}

#confirmation-email-resend .sent .fromEmail{
	font-size: 12px;
}

#confirmation-email-resend .table {
    border: 1px solid #dbdde2;
    border-collapse: collapse;
}


#confirmation-email-resend .table > tbody > tr {
    border:0;
    margin-bottom: 0;
    padding-bottom: 1em;
}

#confirmation-email-resend .table > tbody > tr > td,
#confirmation-email-resend .table > tbody {
    background-color: #f9fafc;
}

#confirmation-email-resend .my_table_striped tbody:nth-child(even),
#confirmation-email-resend .my_table_striped tbody:nth-child(even) td {
    background-color: #fff;
}

/* Resend Email button */
#confirmation-email-resend  .table > tbody > tr:last-of-type td:last-child {
	vertical-align: bottom;
}

.sent {
	display: none;
}

#newOrderSearch {
	margin-bottom: 15px;
}

@media screen and (max-width: 767px) {
	.visible-xs {
		display: block !important;
	}

	.hidden-xs {
		display: none !important;
	}

	/* For inputs on Find Orders page */
	#confirmation-email-resend .row {
		margin-left: 10px;
		margin-right: 10px;
	}

	#confirmation-email-resend div.row.etix-header {
		margin: 0;
	}
}

@media screen and (min-width: 768px) {
	.visible-xs {
		display: none !important;
	}

	.hidden-xs {
		display: block !important;
	}

	#confirmation-email-resend .two.columns {
		width: 76px;
	}
}

@media screen and (min-width: 960px) and (max-width: 1100px) {
	#confirmation-email-resend .container {
		width: 768px;
	}
}
/* End resend confirmation email */

/*
 * View shopping cart
 */

.invoice {
  margin-top: 10px;
}

#gift-card-payment-info .gift-card-balance,
#gift-card-payment-info .actions {
    text-align: right;
}

.invoice .ticket-row,
#delivery-methods .row {
	margin-bottom: 5px;
	padding-bottom: 5px;
}

/*
 * Display Remaining Member Limit Tickets banner
 */
div.remaining-tickets-banner {
	display: table;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
}

.remaining-tickets-banner .price-code-names {
	display: table-cell;
	vertical-align: middle;
}

.remaining-tickets-banner .remaining-tickets-info {
	float: right;
	display: table-cell;
}

.remaining-tickets-banner .remaining-tickets-info .no-limit {
	margin-right: 10px;
}

.remaining-tickets-banner .remaining-tickets-info .available-number {
	display: inline-block;
	border-right: 2px solid;
	padding-right: 15px;
	text-align: center;
}

.remaining-tickets-banner .remaining-tickets-info .total-number {
	display: inline-block;
	margin-left: 10px;
	margin-right: 20px;
	text-align: center;
}

/* Can delete this if no styles end up being used for this class */
/*.bulk-delivery-methods {*/
	/*display: none;*/
/*}*/

.row-header {
	margin-bottom: 5px;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	font-size: 1.2em;
}

/* Only for group/bulk sale (as of 05/30/17) */
.delivery-method-error {
	margin-bottom: 14px;
}

.bulk-shipping-form {
	display: none;
}

.invoice .subtotal-row,
.invoice .fees-and-total {
	text-align: right;
  margin-right: 1em;
}

.remove-all {
  float: left;
  font-size: 0.857em;
  text-transform: uppercase;
  margin-top: 0.125em;
  margin-left: 1em;
}

.reveal-for-mobile {
	display: none;
}

#required-helper {
    margin: 10px 0;	
}

#required-helper .required {
	color: #cd0a0a;
}

#invoice .single-row label {
	font-weight: normal;
	text-align: left;
}

/* Credit card collection */

#payment-info-section {
    position: relative;
}

.insuranceOffer .callout {
	padding: 15px 30px;
	margin: 0 0 5px;
}

.insurance-terms {
	font-size: 12px;
	margin-top: 13px;
}

@media screen and (max-width: 768px) {
	.insuranceOffer .callout {
		margin-left: 10px;
		padding: 15px 20px;
	}
}

.insurance-options {
	display: table;
}

.insurance-options + .insurance-options {
	margin-top: 4px;
}

.insurance-options input,
.insurance-options label {
	display: table-cell;
}

.three.columns.card-number {
	width: auto;
}

@media screen and (min-width: 768px) {
	.three.columns.field.card-number {
		padding-top: 2px;
		width: auto;
	}
}

.credit-card-icon {
	display: none;
	padding: 6px 0;
}

@media screen and (min-width: 768px) {
	.credit-card-icon {
		padding: 0;
	}
}

.credit-card-icon.default-card-icon {
	display: inline-block;
}

@media screen and (min-width: 768px) {
	/* Prevents helper text from overlapping with ccv input */
	.container .one.columns.ccv {
		width: auto;
	}

	.ccv input[name="cvv_code"] {
		width: 40px;
	}
}

.card-number input.invalid-card-number:focus {
    box-shadow: 0 0 4px 2px #ff0000;
}

@media screen and (min-width: 768px) {
    .card-number input.invalid-card-number {
        margin: auto;
    }
}

.invalid-card.errorBox {
    display: none;
    font-weight: bold;
    font-size: 13px;
    padding: 7px 15px;
	margin: 6px 0 12px;
}

@media screen and (min-width: 768px) {
	.invalid-card.errorBox {
		margin: 0;
	}
}

/*
	The old credit card dropdown is still in the new credit card collection,
 	but it needs to be invisible.
 */
.row.cc-type-container {
	display: none;
}

/*
	Initially set these to not display. Once it is determined if the new (auto) or
	old (manual) card collection will display, then set that one to display block
	(see setCreditCardByJS.jspf). Doing it this way keeps the unused CC collection
	from flashing on the screen for a moment before it's removed.
*/
.auto-card-brand-selection,
.manual-card-brand-selection {
	display: none;
}

/* End credit card collection */

.container .three.columns.label.cash-payment-amount-label {
	font-size: 16px;
	width: auto;
}

.cash-payment-amount {
	margin: 6px;
	font-size: 16px;
}

/* SEPA payments */
@media screen and (min-width: 768px) {
	.container .three.columns .iban-input {
		width: 325px;
	}
}

.no-bic {
	padding-top: 5px;
}
/* End SEPA payments */

#ssl-cert-info {
  position: absolute;
  right: 0;
  top: 60px;
  width: 100px;
  height: 72px;
  overflow: hidden;
}

.venue-terms-and-conditions {
  margin-left: 10px;
  margin-bottom: 10px;
}

.venue-terms-and-conditions ol, .venue-terms-and-conditions ul, .venue-terms-and-conditions dl {
	padding: 0 2em;
}

.scroll {
  overflow: auto;
  height: 250px;
}

.seating-chart {
	overflow: auto;
}

/* confirmation page */

.event-details {
	margin-bottom: 10px;
}

.event-details .share {
	margin: 10px 0 0;
}

#payment-details {
	min-width: 320px; /* 695px */
	padding: 10px 0;
	position: relative;
	overflow: hidden;
	margin-bottom: 10px;
	clear: both;
}

.event-details .share .social {
	display: inline-block;
	width: 32px;
}

.event-details .share .email {
	background: linear-gradient(to bottom, #fff 0%, #f1f2f7 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  display: inline-block;
  font-size: 10px;
  font-weight: normal;
  line-height: 110%;
  margin-bottom: 5px;
  margin-right: 10px;
  padding: 5px;
  position: relative;
  text-align: center;
  text-decoration: none;
  width: 60px;
}

.event-details .share .facebook {
	background: transparent url(../images2z/facebook.jpg) no-repeat left center;
	text-indent: -9999em;
}

.event-details .share .twitter {
	background: transparent url(../images2z/twitter.jpg) no-repeat left center;
	text-indent: -9999em;
}

#payment-details .header,
#payment-details .total-row {
	font-weight: bold;
	position: relative;
	overflow: hidden;
}

#payment-details .ticket-row {
	float: left;
	clear: both;
	width: 100%;
	margin: 3px 0;
}

#payment-details .title,
#payment-details .name,
#payment-details .fee,
#payment-details .subtotal,
#payment-details .price {
	float: left;
	display: inline;
	white-space: nowrap;
}

#payment-details .title, 
#payment-details .name {
	width: 45%;
	padding-right: 1.43880%;
	margin-bottom: 0;
}

#payment-details .price,
#payment-details .fee,
#payment-details .subtotal,
#payment-details .total-row .total {
	width: 16%;
	padding-right: 1.333333%;
}

#payment-details .subtotal {
	padding-right: 0;
}

#payment-details .total-row .total {
	float: right;
	clear: right;
	font-weight: normal;
	padding-right: 2.7%;
}

.confirmation_footer {
	text-align: center;
	font-size: 90%;
}

#delivery-method {
	margin-bottom: 10px;
}

#delivery-method .print-orders {
	line-height: 1.6;
	font-size: 1.6em;	
}

/*.checkout .price-code {
	margin-left: 10px;
}*/

.price-level-container {
	/*margin-top: 10px;*/
	margin-left: 10px;
}

@media (max-width: 767px) {
.select select.price-code-level {
		font-size: 14px;
	}
}

.price-level-password {
	margin-bottom: 5px;
}

.checkout .invoice .price-code {
  margin-left: 0;
}

/* SMS */

/* breakpoints: 480, 768, 960 */

.order-Id {
	text-align: center;
}

@media (min-width: 768px) {
	.order-Id {
		text-align: left;
	}
}

.sendSMS {
	background-color: #ededed;
	padding: 15px;
	text-align: center;
	margin: auto; 
	border: 1px solid #d0d0d0; 
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

@media (min-width: 768px) {
	.sendSMS {
		width: 430px;
	}
}

.sendSMS label {
	display: block;
	font-size: 1.1em;
	margin-bottom: 8px;
}

@media (min-width: 768px) {
	.sendSMS label {
		display: inline-block;
		font-size: 1.3em;
	}	
}

.sendSMS [type="text"] {
	width: 120px; 
	margin: 0 5px;
}

.sendSMS .send-sms-btn {
	padding: 0.25em 0.5em;
}

@media (min-width: 768px) {
	.sendSMS .send-sms-btn {
		padding: 0.5em 1.2em;
	}
}

.sms-result {
	text-align: center; 
	padding-top: 7px;
	font-size: 15px;
}

.sms-charge {
	text-align: center;
	margin: 24px 0;
}

/* end SMS */

/* one or two form rows look odd with labels right-aligned */
.checkout-step-1 form .row label,
.checkout-step-1 form .row .label {
	text-align: left; 
	cursor: auto;
	max-width: 246px;
}

#add-package-seat-price-level .price-level,
#add-mini-package-seat-price .price-level{
	list-style: none;
	padding: 0.5em 1em;
	font-size: 0.9em;
	font-weight: normal;
	color: #555;
	padding-left: 0;
}

#add-package-seat-price-level .price-level .price,
#add-mini-package-seat-price .price-level .price {
	color: #333;
}

/* Cobrand styles (underscore naming scheme for backwards compatibility)
be careful! those styles need to be in consistent with src/main/webapp/queue/css/CobrandFromCheckout.css
*/
.etix_cobrand_body_header {
	text-align: center;
}

.etix_cobrand_body_header .container {
  padding: 0;
  background: none;
}

.etix_cobrand_body_footer {
    clear: both;
}

.etix_cobrand_body_footer .container {
	padding: 5px;
	width: auto;
	border-top: 1px solid #444;
  text-align: center;
}

.etix_cobrand_body_footer .container .noBgFooter a {
	display: block;
}

.required {
	color: #cd0a0a;
}

/* Accessible seating */
.ada-modal {
	display: none;
	text-align: left;
}

/* Membership upsell */
.add-membership-to-cart #addMembershipBtn {
	padding: 7px 14px;
}

.add-membership-to-cart {
	clear: both;
	background-color: #f1f8e9;
	border: 2px solid #009e0f;
	padding: 8px;
	border-radius: 8px;
	margin-bottom: 20px;
	text-align: center;
}

.add-membership-to-cart .description {
	width: 80%;
	display: inline-block;
	text-align: center;
}

.add-membership-to-cart .add-membership-button {
	display: inline-block;
	width: 18%;
	text-align: right;
}

.membership-level-list {
	clear: both;
}

/* modals */
#memebership-upsell-dialog {
	display: none;
}

.membership-upsell-dialog {
	border-radius: 8px;
}

.membership-upsell-dialog .membership-level-list {
	padding: 5px 10px;
}

.membership-upsell-dialog .membership-level-list .table {
	width: 100%;
	border-bottom: 1px solid #d8dadf;
}

.membership-upsell-dialog .membership-level-list .table select {
	padding: 5px 26px 5px 12px;
	width: auto;
}

.membership-upsell-dialog .membership-level-list .membership-levle-description {
	padding-left: 20px;
}

.membership-upsell-dialog .ui-dialog-titlebar {
	display: none;
}

.checkout .membership-upsell-dialog h2 {
	text-align: center;
	margin-bottom: 0;
	padding: 0 20px;
}

.membership-upsell-dialog .subheading {
	text-align: center;
	color: gray;
	font-size: 24px;
	padding: 0 20px;
}

.membership-upsell-dialog .membershipBenefit {
	margin: 20px 0;
	padding: 0 20px;
}

.membership-upsell-dialog .button-group a {
	line-height: 36px;
}
/* End Membership upsell */

#ticket-type {
	clear: both;
}

div.passcode {
	background-color: #fff;
	margin-bottom: 5px;
}

div.passcode input[type=text] {
	width: 150px;
}

div.passcode input[type=button] {
	height: 35px;
}

.passcode-message {
	margin-bottom: 15px;
}

.passcode-description strong {
	font-size:1.3em;
	display: block;
}

.passcode-description .code {
	font-weight: bold;
	margin-top: 10px;
}

.passcode-selected {
	font-weight: bold;
	color: #666666;
}

.passcode-selected span {
	font-weight: normal;
}

/* Buy X Get Y (Quantity Discount) modals */

.redemption-dialog.ui-dialog {
	padding: 0;
}

.no-close .ui-dialog-titlebar-close {
	display: none !important;
}

.redemption-dialog.ui-dialog .ui-dialog-titlebar-close {
	background-color: unset;
	border-bottom: unset;
}

.redemption-dialog .ui-dialog-titlebar {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}

.checkout .redemption-dialog h1 {
	text-align: center;
	font-size: 26px;
	font-weight: 400;
	margin: 15px 15px 10px;
}

.checkout .redemption-dialog .claim-rewards-dialog h1 {
	/* Don't need a margin-bottonm on this dialog, because there is a subheading under the h1 */
	margin-bottom: 0;
}

.redemption-dialog__subheading {
    text-align: center;
	margin: 0 10px 30px;
}

#redemptionForm table {
	width: 80%;
	margin: 0 auto;
}

.reward-price-code-name {
	padding: 0px 10px 20px;
	line-height: 15px;
}

.reward-price-code-description {
	font-size: 12px;
	color: gray;
}

.required-x-item {
	padding-left: 35px;
}

#redemptionForm .select, #gaSectionAddSeatForm .select {
	/* Wide enough to accommodate 2 digits */
	min-width: 57px;

	/* Need this to be somewhat high, or user can't open the selects */
	z-index: 5000;
}

.redemption-dialog .button-group a {
	display: inline-block;
}

@media only screen and (max-width: 767px) {
	.redemption-dialog .button-group a {
		width: 100%;
		text-align: center;
		margin: 5px 0 15px;
	}
}

/* In the rewards removal confirmation dialog */
#keepTicketsInCart {
	float: left;
}

/* End Buy X Get Y (Quantity Discount) modals */

/* DEV-4170 GA section select seat dialog start */
#gaSectionAddSeat_dialog{
	border-top: 1px solid #d0d0d0;
}

#gaSectionAddSeatForm {
	margin-left: 10px;
	margin-top: 10px;
}

#gaSectionAddSeatForm .ticket-quantity {
    float: right;
    margin-right: 15px;
}
#gaSectionAddSeatForm h3{
	margin-top:.5em;
}
#gaSectionAddSeatForm .discountDiv{
	margin-top: 20px
}
#gaSectionAddSeatForm .columns.field {
	max-width: 150px;
	display: inline-block;
}

#gaSectionAddSeatForm .columns.helper{
	display: inline-block;
	margin-left: 10px;
}
#gaSectionAddSeatForm #totalTicket{
	font-size: 18px;
	margin-left: 10px;
}
.gaSectionAddSeat_ui_dialog button.dialogBtn {
	background-color: #83ca37 !important;
	color: #fff !important;
	border: 0 !important;
	font-weight: 400 !important;
}
/* DEV-4170 GA section select seat dialog end */

/* Media queries, for various resolutions.
All styles preceded with .container class because only classes 
inside Skeleton's .container should run in a media query.
Our .fixed-container won't trigger the media query styles.

Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
	/* reduce heading sizes to save space */
	.container h1 {
    font-size: 1.6em;
  }
	
  .container h2 {
    font-size: 1.4em;
  }
	
  .container h3 {
    font-size: 1.3em;
  }
	
  .container h4 {
    font-size: 1.2em;
  }
	
  .container h5 {
    font-size: 1.1em;
  }
	
  .container h6 {
    font-size: 1.0em;
  }
}

.payment-plan-option h5 a {
	color: #333;
}

/* Custom CSS for Automated Payments - Step Wizard */
ul.stepper {
	padding: 2rem 1.5rem 1.25rem 1.5rem;
	margin: 1rem 0;
	overflow-x: hidden;
	overflow-y: auto;
	counter-reset: section;
	float: none;
}

ul.stepper.horizontal {
	background: #f0f2f5;
}

ul.stepper.horizontal .step:last-of-type .step-title {
	height: 2.25rem;
}

ul.stepper>li:not(:last-of-type) {
	margin-bottom: 0;
	transition: margin-bottom .4s;
}

ul.stepper .step {
	position: relative;
	list-style: none;
	clear: both;
}

ul.stepper .step-title:after {
	content: attr(data-step-label);
	display: block;
	position: absolute;
	font-size: 80%;
	color: #8b909a;
	font-weight: 400;
	top: 1rem;
}

ul.stepper .step:not(:last-of-type).active {
	margin-bottom: 2.25rem;
}

ul.stepper .step:before {
	position: absolute;
	top: 0;
	counter-increment: section;
	content: counter(section);
	height: 10px;
	width: 10px;
	color: #fff;
	background-color: #000;
	text-align: center;
	line-height: 1.75rem;
	font-weight: 400;
	text-indent: 999px;
}

ul.stepper>.step.active:not(:last-child):after {
	height: 100%;
	height: calc(100% - 0);
}

ul.stepper>.step:not(:last-of-type):after {
	content: '';
	position: absolute;
	top: 0px;
	left: 4px;
	width: .0625rem;
	height: 40%;
	height: calc(100% - 0px);
	background-color: rgba(0,0,0,.1);
	transition: all .4s;
}

ul.stepper .step:not(:last-of-type).active {
	margin-bottom: 0;
}

ul.stepper .step.active .step-title {
	font-weight: 500;
}

ul.stepper .step-title {
	margin: 0;
	cursor: pointer;
	padding: .9688rem 2.75rem 1rem 0;
	display: block;
}

.effect {
	position: relative;
	overflow: hidden;
	cursor: pointer;
	user-select: none;
}

ul.stepper .step:not(:last-of-type).active .step-title,
ul.stepper .step:not(:last-of-type).active .step-title:after {
	text-decoration: line-through;
}

ul.stepper.horizontal .step-title {
	line-height: 1rem;
	height: 3.25rem;
	margin: 0;
	padding: 0 1.5625rem 0 0.5rem;
	display: inline-block;
	max-width: 13.75rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
}

@media only screen and (min-width: 993px) {
	ul.stepper {
		padding: 0;
	}

	ul.stepper .step {
		clear: unset;
	}

	ul.stepper.horizontal {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		background: transparent;
	}

	ul.stepper.horizontal:before {
		content: '';
		background-color: transparent;
		width: 100%;
		min-height: 5.25rem;
		position: absolute;
		left: -3px;
	}

	ul.stepper.horizontal .step {
		display: -webkit-box;
		display: -webkit-flex;
		display: -ms-flexbox;
		display: flex;
		background: #f0f2f5;
		height: 3.25rem !important;
		margin: 0;
		padding: 1em 0;
	}

	ul.stepper.horizontal > .step.active:not(:last-of-type):after {
		content: '';
		position: absolute;
		display: inline-block;
		width: 100%;
		height: .0625rem;
	}

	ul.stepper.horizontal .step:not(:last-of-type):after {
		content: '';
		position: absolute;
		display: inline-block;
		width: 100%;
		height: .0625rem;
		z-index: 1;
	}

	ul.stepper .step:before {
		top: 70%;
		left: 14px;
	}

	ul.stepper.horizontal .step:nth-child(6) {
		overflow: hidden;
	}

	ul.stepper.horizontal .step:nth-child(7):not(:last-of-type):after {
		left:0;
		width: 110%;
	}

	ul.stepper.horizontal .step-title {
		left: 0rem;
		height: 2.25rem;
	}

	ul.stepper>.step:not(:last-of-type):after {
		top: 76%;
		left:14px
	}
}

/* End Automated Payments - Step Wizard */

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
	.container #shopping-links {
    float: none;
    width: auto;
    text-align: left;
	}

	.container #shopping-links a {
    display: block;
	}

	.container #shopping-links .separator,
	#ssl-cert-info,
	.container #checkout-breadcrumb,
	.container .calendar-day,
	.container .row-header {
	    display: none;
	}
        
	body {
    background: #fff;
	}
        
  body.full-width {
    /* reset color if forcing desktop version */
    background-color: #ededed;
  }
	
	.container {
    border: none;
	}
        
/* shrink cobrand header images */
  .container .etix_cobrand_body_header img {
    max-width: 100%; 
  }

	.container .ui-tabs .ui-tabs-panel { 
		border: none;
		padding: 0; 
	}

	.container .ui-tabs .ui-tabs-nav {
		position: relative;
		padding-bottom: 42px;
	}

	.container .ui-tabs .ui-tabs-nav li { 
		float: none;
		margin: 0 0 1px 0;
		border-bottom: 1px solid #D0D0D0 !important;
		-moz-border-radius: 4px;
		-webkit-border-radius: 4px;
		-khtml-border-radius: 4px;
		border-radius: 4px; 
		width: 100%;
	}

	.container .ui-tabs .ui-tabs-nav li a { 
		float: none;
		display: block; 
	}

	.container .ui-tabs .ui-tabs-nav li.ui-tabs-selected {
		position: absolute;
		bottom: 0;
		left: 0;
		top: auto;
	}
	
	.container .reveal-for-mobile { 
		display: inline;
	}	
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
	input[type='submit'], 
	button, 
	input[type='submit']:hover, 
	button:hover {
    width: 100%;
	}
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
	.container .performance-info {
		margin-left: 0;
	}
	
	input[type='submit'],
	button,
	input[type='submit']:hover,
	button:hover {
    width: 100%;
	}

	.upsell-img-wrapper {
		margin-left: 0;
	}
}

@media only screen and (min-width: 960px) {
  .zip-dependent-delivery {
    display: inline-block;
    width: 33%;
    vertical-align: middle;
  }
}

/* mobile to high end windows phone */
@media only screen and (max-width: 970px) {
  .zip-dependent-delivery label {
    width: 100%;
    padding-bottom: 5px;
  }
}

/* ipad to desktop */
@media only screen and (min-width: 971px) {
  .zip-dependent-delivery label {
    white-space: nowrap;
    padding-bottom: 10px;
  }
}

.tip-why {
	color: #00b3ee;
	cursor: pointer;
}

#tip-why-content {
	display: none;
}

.limit-explain {
	padding: 10px 20px;
	font-weight: normal;
}

input[type='number'] {
  -moz-appearance: textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.more-info {
	margin-bottom: 10px;
}

.seat-legend {
	margin-bottom: 10px;
}

#cartExpiredDialog{
	text-align: center;
	padding: 10px 30px;
	font-family: 'Open Sans';
}

#cartExpiredDialog #title {
	font-size: 1.5em
}

#cartExpiredDialog #body {
	margin: 30px auto;
	text-align: left;
	font-size:1.2em
}

/* Overwrite styles that are nested within a dialog within an iframe */
.ui-dialog {
  border: 0;
  border-width: 0;
  padding: 0;
}

#customer_login_dialog {
  padding: 0.5em 0 0;
}

/* For modal on email capture */
.email-capture {
  padding: 0 !important;
}

.email-capture h3 {
  margin: 0 0 0.5em !important;
  padding: 0 0.65em;
}

.email-capture p {
  padding: 0 1em 1em;
}

.result-message {
  margin: 1em 0;
  color: #f00;
}

.result-message,
.purchase-reminder {
  padding: 0 1em;
}

.purchase-reminder {
  margin: 1.5em 0;
}

.purchase-reminder-email {
  margin: 0 1em;
}

.purchase-reminder-checkbox {
  margin-right: 0.5em;
}

.button-group {
  background-color: #f2f2f2;
  overflow: hidden;
  padding: 1em;
  border-top: 1px solid #d8dadf;
}

.button-group .button {
  float: right;
}

.borderless-fieldset {
	border: none;
	padding: 0;
}

.discount {
	clear: both;
}

#addPromoCodeBtn {
	margin-left: 10px;
	margin-right: 10px;
}

.discount #discount-code {
	width: 140px!important;
}

.discount input[type=text] {
	margin-bottom: 5px;
}

.no-titlebar div.ui-dialog-titlebar{
    display: none;
}

#remove-confirm-dialog div.message-section{
    margin:15px;
}


#remove-confirm-dialog div.button-group{
    text-align: center;
    padding: 8px;
}

#remove-confirm-dialog div.button-group .button{
    margin: 0 3px;
    float: none;
}

/*Hide original status message*/
.sale-status-message, .sold-out-message, .sale-status-alert-box {
	display: none;
}

.h1-without-margin {
	margin: 0 0 !important;
}

.blank-line-mock-h1-margin {
	margin-bottom: 15px;
}

.presenter-font-performance-page {
	font-size: 16px;
}

.presenter-font-list-page {
	font-size: 14px;
}

.pre-inherit-from-parent {
	all: inherit;
}

div.payment-method-name{

}

div.payment-amount-item{
	margin: 0 6px;
	font-size: small;
}