@import url('https://use.fontawesome.com/releases/v6.5.1/css/all.css');

:root{
  --primary: #1a4189;
  --primaryDark: #143167;
  --primaryMed: #219ebc;
  --primaryLt: #8ecae6;
  --secondary: #ffb703;
  --secondaryDark: #fb8500;
  --secondaryLt: #f3ca40;
  --tertiary: #342a21;
  --quartary: #af7a6d;
  --quintary: #7cbf1d;
  --text: #222222;
}

img {
    max-width: 100%;
}

.tooltip {
	filter: drop-shadow(0 0 10px #FFFFFF);
}

.modal {
  color: #222222;
}

.site-container {
    margin: 0 auto;
    max-width: 1200px;
}

.homepage-content-area {
    margin-top: 50px;
    margin-bottom: 50px;
}

.custom-card {
  border: solid 2px #FFFFFF;
  margin-bottom: 50px;
  border-radius: .25rem;
  color: #FFFFFF;
  background: #111111;
}

.custom-card-white {
  border: solid 2px #CCCCCC;
  margin: 50px auto;
  border-radius: .25rem;
  color: #000000;
  background: #FFFFFF;
}

.custom-card-white .card-header {
  padding: 0.75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.125);
}

.custom-card-white .card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.custom-card .card {
  background: #333333;
  color: #FFFFFF;
  border: solid 1px #FFFFFF;
}

.custom-card .card-header {
  color: #0e0834;
  background: #CCCCCC;
}



.custom-card .table {
  background: #FFFFFF;
}

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
::placeholder {
	color: #CCCCCC !important;
}

label {
	margin-bottom: 0;
}

.custom-card-pmt {
	-webkit-box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.5); 
	box-shadow: 0px 0px 15px 2px rgba(0,0,0,0.5);
	max-width: 625px;
	margin: 50px auto;
	border-radius: 1rem;
	color: #000000;
	background: #eaf1ff;
}

.custom-card-pmt .card-header {
  padding: 0.75rem 1.25rem;
	color: #FFFFFF;
	background: #194fb3;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

.card-header h3 {
  margin-bottom: 0;
}

.custom-card-pmt .card-body {
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1.25rem;
}

.hero-image, .hero-image img, .page-hero, .page-hero img {
    width: 100%;
}


.page-image, .page-image img {
    width: 100%;
    margin: 20px 0;
}

.time-block {
    display: block;
    width: 100%;
    padding: 20px;
    color: #003366;
    background: #f4e89b;
    text-align: center;
    font-weight: 700;
    border: solid 2px #003366;
    border-radius: 8px;
    line-height: 16px;
    margin: 20px 0;
}

.time-block:hover {
    text-decoration: none;
    background: #fbf5d0;
}

.ease{
    -webkit-transition:all .3s ease-in-out;
    -moz-transition:all .3s ease-in-out;
    -o-transition:all .3s ease-in-out;
    -ms-transition:all .3s ease-in-out;
    transition:all .3s ease-in-out
}

fieldset {
  display: block;
  margin-left: 2px;
  margin-right: 2px;
  margin-bottom: 1em;
  padding-top: 0.35em;
  padding-bottom: 1em;
  padding-left: 0.75em;
  padding-right: 0.75em;
  border: solid 1px #CCCCCC;
}

legend {
  display: inline-block;
  width: auto;
  font-size: 1.2em;
  padding-left: 2px;
  padding-right: 2px;
  border: none;
}

.sc-default   {fill:#333333;}
/*.sc-stage     {fill:#010101;}*/
.sc-disabled  {fill:#CCCCCC;}
.sc-selected  {fill:#990000 !important;}
.sc-text      {
  fill: #FFFFFF;
  paint-order: stroke;
  stroke: #000000;
  stroke-width: 2px;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}

.sc-default:hover {
	fill: #194fb3;
	cursor: pointer;
}

.venuesection-disabled {
  cursor: not-allowed;
}

.venuesection-disabled path,
.venuesection-disabled polygon,
.venuesection-disabled rect {
  fill: #CCCCCC;
}

/* Calendar grid */
.day-of-week,
.date-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.date-grid > * {
  position: relative;
  padding: 2px;
  border: 1px solid #FFFFFF;
}


.listing-logo {
  position: absolute;
  z-index: 2;
  top: -40px;
  left: -20px;
  height: 100px;
  width: 100px;
  padding: 2px;
  background: #e8e8e8;
  border-radius: 50%;
  border: 5px solid rgba(26, 65, 137, 0.5);
  /*box-shadow: 0 0 10px #999999;*/
  overflow: hidden;
}

.listing-logo-lg {
  height: 160px;
  width: 160px;
  padding: 2px;
  background: #e8e8e8;
  border-radius: 50%;
  margin-left: 10px;
  border: 5px solid rgba(26, 65, 137, 0.5);
  /*box-shadow: 0 0 10px #999999;*/
  overflow: hidden;
}

.listing-logo img,
.listing-logo-lg img {
  object-fit: contain;
}

.listing-terms {
  padding: 3px 12px;
}

.listing-terms-full {
  padding: 3px 0 12px 0;
}

.listing-terms a,
.listing-terms-full a,
.listing-terms span,
.listing-terms-full span {
  display: inline-block;
  font-size: 0.8em;
  background: var(--secondary);
  color: var(--text);
  padding: 0 3px;
  margin: 0 3px;
  border-radius: 3px;
  text-decoration: none;
}



.cal-div {
	border: 10px solid #FFFFFF;
	box-shadow: 3px 3px 7px #888888;
	margin: 10px auto; 
	background: #eaeaea; 
	max-width: 300px;
  border-radius: 10px;
}

.cal-table {width: 100%; text-align: center; }
.cal-table tbody {color: #999999; background: #FFFFFF;}
.cal-legend {margin: 20px 0;}
.cal-leginst {display: inline-block; padding: 4px 8px; margin: 0 10px 5px 0; font-weight:700; border-radius: 8px;}
.cal-inst {font-weight: 700; position: relative;}
.cal-inst:hover {filter: brightness(1.25);}

.cal-inst a {color: #FFFFFF;}
.cal-inst a:hover {color: #FFFFCC;}
.cal-past {opacity: 0.6;}
.cal-inst0 {background: #3F0757; color: #FFFFFF;} /*purple*/
.cal-inst1 {background: #faad58; color: #3f1b00;} /*orange*/
.cal-inst2 {background: #014e86; color: #FFFFFF;} /*dark blue*/
.cal-inst3 {background: #0C6940; color: #FFFFFF;} /*green*/
.cal-inst4 {background: #fec484; color: #512a00;} /*lt orange*/
.cal-inst5 {background: #2488c0; color: #002a41;} /*lt blue*/
.cal-inst6 {background: #990000; color: #FFFFFF;} /*red*/
.cal-inst7 {background: #ceac8f; color: #431f00;} /*beige*/
.cal-inst8 {background: #57c5de; color: #01404e;} /*teal*/
.cal-inst9 {background: #69610C; color: #FFFFFF;} /*deep gold*/
.cal-inst10 {background: #bb7ad7; color: #34014a;} /*lt purple*/
.cal-inst11 {background: #69390C; color: #FFFFFF;} /*brown*/
.cal-inst12 {background: #a1d290; color: #103a01;} /*lt green*/
.cal-inst13 {background: #690C0C; color: #FFFFFF;} /*maroon*/
.cal-inst14 {background: #333333; color: #FFFFFF;} /*dk gray*/
.cal-inst15 {background: #e1be97; color: #492302;} /*ls brown*/
.cal-inst16 {background: #fcfda1; color: #424301;} /*lt yellow*/
.cal-inst17 {background: #999999; color: #333333;} /*lt gray*/
.cal-clear {border: 1px solid #CCCCCC; } /*lt gray border*/

.christmas-date {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-top: 10px solid #990000;
}

.christmas-date:after {
  display: block;
  content: ""; 
  position: absolute;
  height: 10px;
  width: 0;
  top: -10px;
  right: -5px;
  border-right: solid 1px #FFFFFF;
  -moz-transform: skew(-45deg);
  -webkit-transform: skew(-45deg);
  transform: skew(-45deg);
}

.gospel-date {
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-top: 10px solid #66cc00;
  }

.faux-box{
  display: inline-block;
  position: relative;
  height: 24px;
  width: 24px;
  line-height: 1.0;
  padding: 3px;
  text-align: center;
  color: #999999;
  border: solid 1px #999999;
  background: #FFFFFF;
}

.special-date-christmas {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-top: 10px solid #990000;
}

.special-date-1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-top: 10px solid #ffff33;
  overflow: hidden;
}

.special-date-2 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-bottom: 10px solid #66cc00;
  overflow: hidden;
}

.special-date-3 {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #ff99ff;
  overflow: hidden;
}

.special-date-4 {
  position: absolute;
  top: 0;
  right: 0;
  width: 7px;
  height: 7px;
  background: #f28e00;
  border-left: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  overflow: hidden;
}

.special-date-5 {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 7px;
  height: 7px;
  background: #00ffff;
  border-top: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  overflow: hidden;
}

.special-date-6 {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 7px;
  height: 7px;
  background: #0066cc;
  border-top: 1px solid #FFFFFF;
  border-left: 1px solid #FFFFFF;
  overflow: hidden;
}

.date-block span {
  display: block;
}

/*SEATING CHART STYLES*/

 
.seat-available{
  fill: #5575a1;
}

.seat-legend-available .seat-circle {
  fill: #386CB4;
  stroke: #FFFFFF;
}
.seat-available .seat-text {
  fill: #000000;
}

.seat-available:hover,
.seat-handicapped:hover,
.seat-wheelchair:hover,
.seat-reserved-clickable:hover {
  fill: #99ff99;
  stroke: #003300;
  cursor: pointer;
}

.seat-handicapped {
  fill: #aa00f8;
}

.seat-legend-handicapped .seat-circle {
  fill: #aa00f8;
  stroke: #580180;
}

.seat-handicapped .seat-text {
  fill: #FFFFFF;
}

.seat-wheelchair {
  fill: #3399ff;
  position: relative;
}

.seat-legend-wheelchair .seat-circle {
  fill: #3399ff;
  stroke: #0066cc;
}

.seat-wheelchair .seat-text {
  fill: #FFFFFF;
}

.seat-picked {
  fill: #009025 !important;
  stroke: #f6ff00;
}

.seat-available,
.seat-picked {
  cursor: pointer;
}

.seat-reserved {
  cursor: not-allowed;
  fill: #CCCCCC;
}

.seat-reserved-clickable {
  fill: #CCCCCC;
}

.seat-this {
  cursor: not-allowed;
  fill: #f6ff00;
  stroke: #009025;
}

.seat-this .seat-circle {
  fill: #f6ff00;
  stroke: #009025;
}

.seat-reserved .seat-circle,
.seat-legend-reserved .seat-circle {
  fill: #CCCCCC;
  stroke: #999999;
}
.seat-reserved .seat-text {
  fill: #999999;
}

.section-overlay-outline path,
.section-overlay-outline polygon,
.section-overlay-outline rect
{fill: none; stroke:#999999; stroke-width:1}

.section-overlay path,
.section-overlay polygon,
.section-overlay rect
{opacity:0.4;fill:#666666; cursor: pointer;}

.section-overlay path:hover,
.section-overlay polygon:hover,
.section-overlay rect:hover
{opacity:0.8;fill:#666666; cursor: pointer;}

.section-overlay-picked path,
.section-overlay-picked polygon,
.section-overlay-picked rect
{opacity:0.4;fill:#0059ff; cursor: pointer;}

.util-circle{display: none;}
.sc-util {display: none;}
.section-desc-text {opacity:0.9;fill:#FFFFFF; font-family:Arial, sans-serif; font-weight: 900; font-size:18px; cursor: pointer}
.section-desc-text-dark {opacity:0.9;fill:#666666; font-family:Arial, sans-serif; font-weight: 900; font-size:20px; cursor: pointer}
.sc-stage {opacity:0.9;fill:#FFFFFF; font-family:Arial, sans-serif; font-weight: 900; font-size:18px;}

.seat-legend-autopicked {
  fill: #000000;
  stroke: #f6ff00 !important;
  filter: drop-shadow(0 0 1px #ff00ff);
}

.seat-autopicked {
  stroke: #f6ff00 !important;
  filter: drop-shadow(0 0 1px #ff00ff);
}

.seating-chart svg { 
  display: block; 
  margin: 5px auto 20px auto; 
  width: 100%;
  height: auto;
  max-height: 75vh;
}

.popover {
  background-color: #FFFFFF;
  box-shadow: 0 0 10px 5px #FFFFFF;
}

.popover-header{
  position: relative;
  padding-left: 30px !important;
  background-color: #386cb4;
  color: #FFFFFF;
  border-radius: 0;
}
.popover-header:before {
  content:"\f6c0";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  top: 9px;
  left: 10px;
  z-index: 2;
}

.available-popover {
  border: 3px solid #386cb4;
}

.sold-popover {
  border: 3px solid #990000;
}

.sold-popover .popover-header{
  background-color: #990000 !important;
}

.hold-popover {
  border: 3px solid #f19100;
}

.hold-popover .popover-header{
  background-color: #f19100 !important;
}

.wheelchair-popover {
  border: 3px solid #3399ff;
}

.wheelchair-popover .popover-header{
  background-color: #3399ff !important;
  color: #FFFFFF !important;
}

.wheelchair-popover .popover-header:before {
  content:"\f193";
}

.accessible-popover {
border: 3px solid #aa00f8;
}

.accessible-popover .popover-header{
background-color: #aa00f8 !important;
color: #FFFFFF !important;
}

/* Variables */
* {
  box-sizing: border-box;
}


#payment-form {
  width: 100%;
  align-self: center;
}

.hidden {
  display: none;
}

#payment-message {
  color: rgb(105, 115, 134);
  font-size: 16px;
  line-height: 20px;
  padding-top: 12px;
  text-align: center;
}

#payment-element {
  margin-bottom: 24px;
}


/* spinner/processing state, errors */
.spinner,
.spinner:before,
.spinner:after {
  border-radius: 50%;
}
.spinner {
  color: #ffffff;
  font-size: 22px;
  text-indent: -99999px;
  margin: 0px auto;
  position: relative;
  width: 20px;
  height: 20px;
  box-shadow: inset 0 0 0 2px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
.spinner:before,
.spinner:after {
  position: absolute;
  content: "";
}
.spinner:before {
  width: 10.4px;
  height: 20.4px;
  background: #5469d4;
  border-radius: 20.4px 0 0 20.4px;
  top: -0.2px;
  left: -0.2px;
  -webkit-transform-origin: 10.4px 10.2px;
  transform-origin: 10.4px 10.2px;
  -webkit-animation: loading 2s infinite ease 1.5s;
  animation: loading 2s infinite ease 1.5s;
}
.spinner:after {
  width: 10.4px;
  height: 10.2px;
  background: #5469d4;
  border-radius: 0 10.2px 10.2px 0;
  top: -0.1px;
  left: 10.2px;
  -webkit-transform-origin: 0px 10.2px;
  transform-origin: 0px 10.2px;
  -webkit-animation: loading 2s infinite ease;
  animation: loading 2s infinite ease;
}

@-webkit-keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes loading {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@media only screen and (max-width: 600px) {
  #payment-form {
    width: 80vw;
    min-width: initial;
  }
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
  

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
  
  .seating-chart svg { 
    width: 100%;
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
  

}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  

}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {
  

}