* {
	font-family: "Open Sans", sans-serif, arial;
  box-sizing: border-box;
}



body {
  margin: 0;
  padding: 0;
  font-size: 14px;
  color: #000;
  overflow-x: hidden;
	overflow-y: scroll;
  font-weight: 300;
  background-position: top center;
  background-repeat: no-repeat;
  background: var(--bodyBackground);
  background-attachment: fixed;
}

img { -ms-interpolation-mode: bicubic; }

#drt-header {
	background: url(/images/drt-header-bg-dark-50.png) top left repeat-x;
	color: #FFF; 
	padding: 10px 0; 
	border-bottom: solid 1px rgba(0, 0, 0, 0.2); 
  width: 965px;
  margin: auto;
	
}

#footer-detail {
	width: 100%;
	position: fixed;
	bottom: 0;
	z-index: -10;
	height: 280px;
  background: none top left repeat-x;
}

  h1, h2, h3 {
		margin-top: 0;
		padding: 0;
		text-align: center;
    font-weight: normal;
  }
  
  #header {
    color: gray;
    height: 220px;
    position: absolute;
    z-index: 11;
    top: 0;
    left: 0;
    width: 100%;
  }
      
			
#page-header {
  position: relative;
  border-radius: 0 !important;
  width: 965px;
  height: var(--headerHeight);
  margin: auto;
  background: var(--headerBackground);
  background-position: 0 50%;
  background-repeat: no-repeat;
  background-size: cover;         
}
      
#page-header h1 {
  line-height: 100%;
  color: var(--headerTextColor);
  font-size: var(--headerTextSize);
  text-shadow: none;
  text-align: left;
  text-transform: uppercase;
  position: absolute;
  top: var(--headerTextTop);
  right: var(--headerTextRight);
  max-width: var(--headerTextMaxWidth);
  font-weight: var(--headerTextWeight, 700);        
}

#page-header #header-text {
  display: var(--headerTextDisplay);
}

#page-header div[rel="dates-location"] {
  border-top: solid 1px rgba(0, 0, 0, 0.1); 
  font-size: var(--headerSubtextSize); 
  line-height: 120%; 
  font-weight: normal; 
  text-transform: uppercase; 
  margin-top: 0.25em; 
  padding-top: 0.5em; 
  text-align: right;
}

#logo {
  position: absolute;
  top: var(--logoTop); 
  left: var(--logoLeft);
  max-width: var(--logoMaxWidth);
  max-height: var(--logoMaxHeight);
  display: var(--logoDisplay);
}

      #footer-content {
        padding: 10px 0;
        
      }
      
      #footer {
        text-align: center;
        font-size: 90%;
				background: url(/images/drt-header-bg-dark-50.png) top left repeat;    
				margin: 0;
				line-height: 24px;
				width: 965px;
				margin-bottom: 2em;
        margin-left: auto;
        margin-right: auto;  
        margin-top: 0;
        padding: 0 0 0 0;
      }
            
      #footer a {
        text-decoration: none;
      }
      
      #footer a:hover {
        text-decoration: underline;
      }
      
      a, a:link, a:visited, a:hover, a:active {
        color: #000000;
        text-decoration: none !important;
      }
      
      a.obvious {
      	text-decoration: underline !important
      }
      
      a i, a:link i {
      	text-decoration: none !important;
      }
      
      h1 {
        font-size: 60px;

      }
      
      h2 {
        font-size: 1.8em;
/*				margin-bottom: 20px;*/
        text-transform: uppercase;
      }
      
      h3 {
        font-size: 22px;
        margin-top: 1em;
        text-transform: uppercase;
      }
      
      h3:first-child {
      	margin-top: 0;
      }
      
      
      .divider {
        background: url(/images/tb-divider.gif) 0 4px no-repeat white;
        height: 9px;
        width: 870px;
        margin-left: 15px;
        padding-top: 4px;
      }
      
      #noshow {
        display: none;
      }
      
      #header-gap {
        height: 10px;
      }

      
      label {
        display: block;
        color: #333333;
        font-style: italic;
        font-size: 100%;
				margin-top: 8px;
      }
      
      #content {
        min-height: 400px;
        z-index: 12;
				background-color: #fff;
				width: 965px;
				margin-bottom: 1em;
				margin-top: 1em;
        margin-left: auto;
        margin-right: auto;
      }
			
			#content-footer {
				background: #fff; /*url(/images/gradient.jpg) top left repeat-x white;*/
				width: 965px;
				margin-bottom: 1em;
				margin-top: 1em;
        margin-left: auto;
        margin-right: auto;  
        padding: 2em 0;
        
			}
      
      #content-footer h2 {
      	color: rgba(0, 0, 0, 0.9);
      }
      
      #content.fullwidth-map {
        box-shadow: none;
      }      
      
      #content.fullwidth-map #div-map-container,
      #content.fullwidth-map #div-left-side
      {
        width: 965px;
      }
      
      #content.fullwidth-map #a-go-full-width,
      #content.fullwidth-map #div-right-side,
      #content.fullwidth-map #div-code-box
      {
        display: none;
      }
      
      /*
      #content.mini-cart {
        box-shadow: inset -215px 0 0 #dddddd, inset -215px 0 0 #999999;
      }
      
      #content.mini-cart > #div-left-side {
        width: 750px;
      }

      #content.mini-cart > #div-right-side {
        width: 215px;
      } 
      */

      
      p {
        margin-top: 10px;
        line-height: 130%;
      }
      


button, .button {
	border-style: solid;
  border-width: 0 0 0.3em 0;
  border-color: rgba(0, 0, 0, 0.3);
	border-radius: 0.4em;
	padding: 0.75em 2em;
	color: black;
	font-weight: normal;
	cursor: pointer;
  text-decoration: none;
  display: inline-block;
  vertical-align: top;
  text-transform: uppercase;
  text-align: center;
  background-color: #DDD;
  transition: background-color 200ms, color 200ms;
}

  .pillbutton
, .custom-color-2 p .pillbutton
, .custom-color-2 p .pillbutton:visited
, a.pillbutton
, .custom-color-2 p a.pillbutton
, .custom-color-2 p a.pillbutton:visited {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: 1em;
  background-color: var(--color1);
  color: var(--color1text);
  transition: background-color 200ms, color 200ms;
}

button:hover, .button:hover, .pillbutton:hover, .custom-color-2 .pillbutton:hover{
  background-color: black !important;
  color: white !important;
}

.custom-color-2 p .pillbutton:hover:visited {
  background-color: black;
  color: white;
}

button.gray, .button.gray {
  background-color: #AAA;
}

button:disabled {
	opacity:0.4;
  filter:alpha(opacity=40); /* For IE8 and earlier */
  cursor: not-allowed;
}

button.small, .button.small {
	font-size: 90%;
	padding: 0.4em 0.9em;
	border-radius: 0.3em;
  border-width: 0 0 0.25em 0;
  width: auto;
}

button.dark, .button.dark {
	background-color: #666;
  border-color: #000;
  color: white !important;
}

button.big, .button.big {
	padding-top: 1.5em;
	padding-bottom: 1.5em;
}

button[inline], input[type=text][inline] {
	display: inline-block;
}

button.width50 {
	width: calc(50% - 1em);
  margin-right: 1em;
  box-sizing: border-box;
  float: left;
  font-size: 150%;
  padding: 1em;
}
button.width50:last-child {
	margin-right: 0;
  width: 50%;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
textarea,
select
{
  border-style: solid;
  border-width: 0 0 0 0.4em;
  border-color: white;
	padding: 0.83em 1.2em .83em 0.8em !important;
  display: inline-block;
  vertical-align: top;
  outline: solid 1px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}

select {
  margin: 0;
  padding: 0.755em 1.2em .755em 0.8em !important;
}

input[type=text],
input[type=email],
input[type=tel],
input[type=number],
textarea{
	display: block;
  width: 100%;
}

input[inline] {
	display: inline-block;
}

input:focus, select:focus, a:focus, textarea:focus {
	outline: solid 1px black;
	box-shadow: 0 0 4px 2px rgba(255, 255, 0, 0.6);
  border-left-color: yellow
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    /* display: none; <- Crashes Chrome on hover */
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

input[size] {
	margin-left: 0;
	margin-right: 0;
  display: inline-block;
}

  input[type=text].narrow {
    width: 5em;
  }  
  
  input[type=text].x-narrow {
    width: 3em;
  }  

	
	.printonly {
	 	display: none;
	}

.icon {
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	border: none;
}

.icon15 {
	width: 24px;
	height: 24px;
	transform: translate(0, -2px);
  line-height: 0;
	border: none;
  vertical-align: -4px;
}

.flagicon {
	width: 16px;
	height: 11px;
	vertical-align: top;
	border: none;
  vertical-align: middle;
  cursor: pointer;
}

.modal h3 {
	color: black;
}

.modal label {
	color: #333;
}

#cc-notice {
	color: red;
}

.blur {
	 color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
	 text-decoration: line-through;
}
.chair {
	position: absolute;
	cursor: pointer;
}
.chair:hover {
	opacity: 0.5;
}

#div-refund {
	border: solid 10px yellow; 
	background-color: red !important; 
	padding: 20px; 
	color: white !important; 
	box-shadow: rgba(0, 0, 0, 0.5) 0 10px 10px -5px; 
	text-align: center;
}

#div-refund h3, #div-refund p {
  color: white !important;
}

#backdrop-provider {
	position: absolute;
	bottom: 0px;
	right: 0px;
	padding: 2px 1em;
	background-color: rgba(255, 255, 255, 0.8);
	color: black;
	font-size: 8px;
	text-transform: uppercase;
}

#backdrop-provider a, #backdrop-provider a:link {
	color: black;
}

#select-show-id {
  vertical-align: absmiddle !important;
  margin: 0 !important;
}

#div-general h3 {
	color: rgba(0, 0, 0, 0.7)!important;
}

#div-right-side #div-cart-box {
	padding: 1em 1em 1em 1em;
	box-sizing: border-box;
}

#div-right-side #div-cart-box [rel=totals] {
	text-align: center;
  border-top: solid 1px rgba(0, 0, 0, 0.1);
}

#div-cart-box [rel=summary] {
	margin-top: 1em;
  font-size: 100%;
}

#cart {
	margin: 0 -1em 1em -1em;
  padding: 1em;
  border-bottom: solid 1px rgba(0, 0, 0, 0.1);
}

tr[rel=cart-headers] {
	font-size: 1em;
	
}

tr[rel=cart-item] {
	font-size: 1em;
}

tr[rel=cart-item] td {
	padding: 0.3em;
}

tr[rel=cart-item] td:first-child, tr[rel=cart-headers] td:first-child {
	text-align: left;
  padding-left: 0;
}

tr[rel=cart-item] td:last-child, tr[rel=cart-headers] td:last-child {
	text-align: right;
  padding-right: 0;
}



tr[rel=cart-item]:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

#popup-select-show {
	width: 100%;
}

#popup-select-show tr {
	cursor: pointer;
}

#popup-select-show tr td {
	border-bottom: solid 1px rgba(0, 0, 0, 0.1);
  padding: 10px;
}

#popup-select-show tr:last-child td {
  border-bottom: none;
}
#popup-select-show tr td:last-child {
	text-align: right;
  vertical-align: middle;
  font-size: 200%;
}

#popup-select-show tr:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#a-select-floor {
	text-decoration: none;
  display: inline-block;
  margin-left: 1em;
  text-decoration: underline;
}

#a-select-floor:before {
	display: inline-block;
	background: url(/images/icons/light/layers.svg) no-repeat 0 0.1em;
  background-size: 90%;
  margin: 0 0.25em 0 0;
  width: 1em;
  height: 1em;
  content: "";
}

#a-select-floor:hover {
  font-weight: bold;
}

#button-select-show {
  margin: -0.5em;
  padding: 0.5em;
  cursor: pointer;
}

#button-select-show:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

#div-right-side #div-priority-codes {
  border-top: solid 1px rgba(0, 0, 0, 0.1);
  padding-top: 1em;
}

#div-back-of-theatre {
	background-color: black; 
  color: white; 
  text-align: center; 
  padding: 6px 0; 
  width: 100%;
}

#div-map-container {
	width: 100%; 
  position: relative;
}

#div-top-bar {
	margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
  padding: 1em 0;
  height: auto;
  min-height: 52px;
  width: 965px;
  background-color: white;
}

#div-left-side {
	/*float: left; 
  width: 650px;*/
}

#div-left-side p, #div-left-side td, #div-left-side div {
	/*color: black;*/
}

#div-right-side {
/*	width: 315px;
  float: right; */
  text-align: center;
  position: relative;
  display: inline-block;
  min-width: 315px;
}
#div-right-side > div {
	padding: 1em;
}
#div-right-side > div:last-child {
  padding: 0;
}

#div-right-side.floating #div-cart-box {
/*
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  */
}

#table-tiers, #table-products, #table-funds {
	border-collapse: collapse; background-color: rgba(0, 0, 0, 0.1);
}

#table-tiers td, #table-products td, #table-funds td {
	padding: 1em;
}

#table-tiers td:first-child, #table-products td:first-child, #table-funds td:first-child {
	padding-left: 2em;
}

#table-tiers td:last-child, #table-products td:last-child, #table-funds td:last-child {
	padding-right: 2em;
}

.whitebg {
  background-color: white !important;
  color: black !important;
}

#div-code-box {
  background-color: rgba(0, 0, 0, 0.1);
  height: 5em;
  overflow-y: hidden;
  position: relative;
}

#form-code-box {
	position: absolute;
	top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}

#div-message {
  background: none top left repeat-x #CC0000;  
  color: #fff; 
  margin-bottom: 1em;
}

#div-message h2 {
	color: white;
  margin-bottom: 0;  
}

#div-message h3 {
	color: white;
  text-transform: uppercase;
  margin: 0;
}

.div-notes {
	padding: 1em; 
  font-weight: normal; 
  font-size: 100%; 
  text-align: center; 
  color: black; 
  background-color: yellow; 
  position: relative;
}

[hide] {
	display: none;
}

[show] {
	display: auto;
}

#content {
  /*box-shadow: inset -315px 0 0 #999999;*/
}

#cc_exp_month_id {
  width: 45%;
  margin-right: 4%;
}

#cc_exp_year_id {
  width: 45%;
  margin-left: 4%;
}

/* TOPBAR/FOOTER COLOR */

.custom-color-1 {
  background: var(--color1);
  color: var(--color1text);
  border-color: rgba(0, 0, 0, 0.3) !important;
}

.button.custom-color-1,
.custom-color-1 p, 
.custom-color-1 td,
.custom-color-1 span,
.custom-color-1 a:link,
.custom-color-1 a:visited,
.custom-color-1 a
{
	 color: var(--color1text);
}

/* SIDEBAR COLOR */

#content {
  /*box-shadow: inset -315px 0 0  var(--color2);*/
  /* use this next one if you want to lift the content box off the page by a small amount */
  /*box-shadow: rgba(0, 0, 0, 0.498039) 0px 15px 10px -10px, rgba(0, 0, 0, 0.298039) 0px 1px 4px 0px, rgba(0, 0, 0, 0.0980392) 0px 0px 40px 0px inset;*/
}

.custom-color-2 {
  background: var(--color2) !important;
  color: var(--color2text);
  border-color: rgba(0, 0, 0, 0.3) !important;
}

button.custom-color-2 {
	/*background-color: black !important;*/
}

.custom-color-2 p, 
.custom-color-2 td,
.custom-color-2 span,
.custom-color-2 a:link,
.custom-color-2 a:visited,
.custom-color-2 a
{
	color: var(--color2text);
}

/*
div#div-timer {
    position:relative;
    width:60px;
    height:60px;
    display: inline-block;
    vertical-align: middle;
}
div#div-timer canvas {
    display: block;
    position:absolute;
    top:0;
    left:0;
}
div#div-timer span {
    color:#555;
    display:block;
    line-height:60px;
    text-align:center;
    width:60px;
    font-size:18px;
    font-weight:100;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
*/

div#div-timer {
  display: inline-block;
}

div#div-priority-header {
	height: calc(2em + 4/3em);
  padding: .666666667em;
  font-size: 1.5em;
  overflow-y: hidden;
  text-align: center;
  line-height: 2em;
}

.modal-content > h2 {
	text-align: left;
  font-size: 100%;
  padding: 0.5em;
}

sub, sup {
  /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
  font-size: 75%;

  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;

  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;

  /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
  vertical-align: baseline;
}

sup {
  /* Move the superscripted text up */
  top: -0.5em;
}

sub {
  /* Move the subscripted text down, but only
     half as far down as the superscript moved up */
  bottom: -0.25em;
}

#steps {
    width: 965px;
    margin-bottom: 1em;
    margin-top: 1em;
    margin-left: auto;
    margin-right: auto;
}

	.steps {
		width: 100%;
		height: 3em;
	    line-height: 1em;
	    display: flex;
		overflow: hidden;
    
	}
	#steps .steps a {
	    flex: 1 1 0px;
		padding: 1em;
		text-align: center;
		width: 1;
		display: inline-block;
		position: relative;
		height: 3em;
		box-sizing: border-box;
	  	color: var(--color1text);
	    opacity: 0.8;
		float: left;
	    font-weight: normal;
		text-transform: uppercase;
		text-decoration: none;
		z-index: 1;
		opacity: 0.3;
	}


	#steps .steps a[current] {
		position: relative;
		z-index: 2;
		opacity: 1;
	}

.steps a[current]::before {
	width: 80%;
	background-color: rgba(255, 255, 255, 0.2);
	height: 0;
	padding-bottom: 80%;
	position: absolute;
	top: 50%;
	left: 50%;
	content: '';
	transform: translate(-50%, -50%) rotate(45deg);
	tranform-origin: 50%;
	border-radius: 2em;
}

	.steps a[current] span {
    font-weight: bold;
	}
  
  
#showpicker .datebadge {
    width: 32px;
    height: 32px;
    display: inline-block;
    position: relative;
    font-size: 14px;
    border: solid 1px rgba(0, 0, 0, 0.5);
    border-radius: 0.2em;
    vertical-align: top;
    float: left;
  }	

  #showpicker .datebadge [rel=day] {
    position: absolute;
    bottom: 60%;
    left: 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 65%;
    white-space: nowrap;
    overflow: hidden;
  }

  #showpicker .datebadge [dow] {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 150%;
    line-height: 16px;
    letter-spacing: -1px;
    text-indent: -1px;
    font-family: "Share Tech Mono", monospace;
  }

  #showpicker .performer-search {
    width: 100%; 
    position: relative; 
    height: 4em;
    border-bottom: solid 1px rgba(0, 0, 0, 0.1);
    display: block;
  }

  #showpicker .dates-container {
    height: 300px;
    position: relative;
  }

  #showpicker .dates {
    
  }

  #showpicker .dates tr {
    cursor: pointer;
    -webkit-transition: background-color 0.25s; /* Safari */
    transition: background-color 0.25s;
  }

  #showpicker .dates tr.highlighted {
    background-color: yellow;
  }
  #showpicker .dates tr.highlighted td:nth-child(3) {
    font-weight: bold;
  }
  #showpicker .dates tr.highlighted td:nth-child(4) {
    font-weight: bold;
  }

  #showpicker .dates tr:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
 
  #showpicker .dates tr td {
    padding: 0.5em 0.5em;
    vertical-align: middle;

  }

  #showpicker .dates tr td:first-child {
    font-size: 150%;
  }

  #showpicker .dates tr td:last-child {
    position: relative;
    overflow-x: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 300px;
    word-break: break-all; 
    word-wrap: break-word; 
  }

  #showpicker .searchbox {
    height: 2em;
    border-style: none;
    border-width: 0;
    outline: none;
    font-size: 2em;
    padding: 0 0.5em !important;
    display: inline;
    width: calc(100% - 2em);
    box-sizing: border-box;
    line-height: 0;
    text-transform: uppercase;
  }

  #showpicker input.searchbox:focus {
    outline: none;
    box-shadow: none;
  }  

      
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(0, 0, 0, 0.2);
}
::-moz-placeholder { /* Firefox 19+ */
  color: rgba(0, 0, 0, 0.2);
  opacity: 1;
}
:-ms-input-placeholder { /* IE 10+ */
  color: rgba(0, 0, 0, 0.2);
}
:-moz-placeholder { /* Firefox 18- */
  color: rgba(0, 0, 0, 0.2);
} 

.admin {
	background-color: rgba(255, 0, 0, 0.7);
  color: white;
}

#landing-content a {
  text-decoration: underline !important;
  color: blue;
}

#landing-content ul {
  list-style: disc;
  margin-top: 1em;
}

.legend {
  background-color: rgba(0, 0, 0, 0.1);
}

.legend table, table.legend {
  border-collapse: collapse;
  width: 100%;
}

.legend table:not([cellpadding]) td {
  padding: 0.5em;
  text-align: center;
}

/* Exclude any old type legends (with cellpadding) from the color rules */
.legend table:not([cellpadding]) tr:nth-child(1) {
  background-color: rgba(0, 0, 0, 0.05);
}

.legend .stage-numbers {
  position: relative;
  background-color: black; 
  color: white; 
  padding: 0 11.076923% 0 11.076923%; 
  text-align: center; 
  display: flex; 
  justify-content: space-evenly; 
  padding-bottom: 1em;
  box-shadow: inset #421a00 72px 0, inset #421a00 -72px 0;
  font-weight: bold;
}

.fullwidth-map .legend .stage-numbers {
  position: relative;
  background-color: black; 
  color: white; 
  padding: 0 11.076923% 0 11.076923%; 
  text-align: center; 
  display: flex; 
  justify-content: space-evenly; 
  padding-bottom: 1em;
  box-shadow: inset #421a00 107px 0, inset #421a00 -107px 0;
}

.legend .chairs, .legend .chairs > * {
  background-color: #662b01 !important;
  color: white;
}

.legend [rel=head] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 1em;
  text-align: center;
  font-weight: bold;
  padding: 0.5em 0;
}

.legend [rel=body] {
  display: flex;
  padding: 0.5em 0;
  align-items: center;
  justify-content: space-between;
  text-align: center;
}

.legend .alternating > :nth-child(odd) {
  background-color: rgba(0, 0, 0, 0.05);
}

.legend .alternating > :nth-child(even) {
  background-color: rgba(0, 0, 0, 0.1);
}

.legend [rel=important] {
  padding: 1em 0;
  text-align: center;
  font-weight: 700;
}


.calendar {
  width: calc(8.5em * 0.7);
  height: calc(11em * 0.5);
  font-family:'Open Sans', Arial, sans-serif;
  font-size: 1em;
  border-radius: 0.75em;
  padding: 0 3px 3px 3px;
  background: linear-gradient(#00000011, #00000066) red;
}
.calendar > span:first-child {
  display: block;
  color: white;
  height: 60%;
  position: relative;
  line-height: 0;
}

.calendar > span:first-child > span {
  font-size: 180%;
  text-transform: uppercase;
  font-weight: bold;
  letter-spacing: +0.05em;
  text-align: center;  
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);  
  line-height: 0;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.calendar > span:last-child {
  display: block;
  height: 40%;
  background: linear-gradient(#00000011, #00000000) white;
  border-radius: 0 0 0.5em 0.5em;
  position: relative;
  line-height: 0;
}

.calendar > span:last-child > span {
  font-size: 120%;
  text-align: center;  
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 0;
}

#div-main {
  display: grid;
  grid-template-columns: auto 315px;
  overflow: hidden;
  transition: 200ms;
  transition-timing-function: ease-out;
}

.no-cart #div-main {
  grid-template-columns: auto 0;
}

#div-mini-cart {
  display: none;
  border-left: solid 1px rgba(0, 0, 0, 0.25);
  margin-left: 1em;
  padding-left: 1em;
}

#div-mini-cart-patron-name {
  display: none;
  border-right: solid 1px rgba(0, 0, 0, 0.25);
  margin-right: 1em;
  padding-right: 1em;
}
  
#div-mini-cart[data-badge] {
    position:relative;    
}
#div-mini-cart[data-badge]:after {
      content:attr(data-badge);
      font-size: 75%;
      padding-right: 1.333333em;
    }