@import url('https://fonts.googleapis.com/css2?family=Amiri&family=Roboto:wght@300&display=swap');

body {
  font-family: 'Roboto', sans-serif;
  color: #666;
}

#calendar body,
#calendar .main {
  background: #eee;
}

.calendar .account-bar .container {
  width: 100%;
  opacity: 85%;
}

.calendar .account-bar .container .col-sm-12 {
  padding: 0 5px;
}

.calendar .account-flex .account-bar-image img {
  height: 42px;
}

.calendar .account-links {
  padding: 2px 0;
}

@media all and (max-width: 600px) {
  .calendar .account-flex .account-bar-image-1 img {
    height: 30px;
    margin-top: 7px;
  }
}

.account-bar .container {
  background-color: black
}

.account-links a.account-link {
  color: #dddddd;
}

.account-links a.account-link:hover {
  color: white;
}

.tooltip-inner {
  background-color: #8b1212;
}

.unique-code {
  color: #FF6600 !important;
  font-weight: bold;
}

/* Override inline styles in performance text */
.description span {
  font-family: 'Roboto', sans-serif !important;
}

/* Ensure image does not take up too much on desktop */
#top-image {
  max-width: 400px;
}

h1, h2, .action-area h3 {
  color: #8b1212;
  font-family: 'Amiri', serif;
}

h1.header .performance-date, h1.header .venue {
  color: #666;
  font-family: 'Roboto', sans-serif;
}

body #banner {
  display: none;
}

body.calendar #banner {
  display: block
}

.standard .container.content {
  border: 1px solid #ccc;
  margin-top: 50px;
}

.action-area {
  color: #333;
  background: #faf9f6;
  border: 1px solid #9c0004;
}

.btn {
  text-transform: uppercase;
  font-weight: bold;
}

.btn-default {
  background-color: #cbbc97;
  border: 1px solid #dbcca7;
}

.btn[disabled] {
  color: #777777;
}

.btn, .btn:hover, .btn:active, .btn:focus {
  background-color: #ac0e14;
  border: 1px solid #9c0004;
  color: white;
}

.btn:hover, .btn:active, .btn:focus {
  background-color: #5f0c0c;
  transition: background-color 300ms linear;
}

.bootbox {
  color: black;
}

#footer {
  background-color: black;
}

.calendar-offer { border: 1px solid #444; background: linear-gradient(#fcc50e, #e5ee70); text-align: center; color: #444; font-size: 1.4em; line-height: 130%; padding: 0.5em; margin: 1em 0; } 
.calendar-offer .small { display: block; font-size: 14px; line-height: 17px; margin-top: 1em; }

/* For pre 8.98 time select */
.timeSelectHolder .timeSelect {
  background-color: #355b46;
}

.timeSelectHolder a:hover {
  filter: brightness(85%);
}