@charset "utf-8";
/* CSS Document */

#calenderbox, #calendargroup {
  max-width: 620px;
  margin: 0 auto;
  padding: 1rem; }

.daterow {
  display: grid;
  grid-template-columns: repeat(7, 1fr); }

.date {
  flex: 1 0 14%;
  height: auto;
  margin: 0.5rem;
  background-color: #222;
  border-radius: 0.2rem;
  position: relative;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  border: 1px solid #333; }

.date:hover {
  background-color: #ffea00;
  color: #212529; }

.date:hover > .hatVeranstaltung {
  background-color: black; }

.hatVeranstaltung {
  border-radius: 0.1rem;
  height: 0.5rem;
  width: 0.5rem;
  background-color: #ffea00;
  position: absolute;
  bottom: 2px;
  right: 2px;
  transition: all 0.2s ease-in-out; }

.date:before {
  content: '';
  display: block;
  padding-top: 100%; }

.monthnamewrapper {
  color: #ccc;
  display: flex;
  margin-bottom: 1rem;
  }

.monthwrapper.hidden.d-flex.flex-column {
  display: none !important; }

.showlistwrapper {
  display: none; }

.monthname {
  background-color: #333;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  text-align: center;
  transition: all 0.2s ease-in-out;
  border: 1px solid #444;
  flex: 1;
  cursor: pointer; }

.monthname:hover {
  border: 1px solid #ffea00;
  color: #ffea00; }

.monthname.font-tech.h5.selected {
  background-color: #ffea00;
  color: #212529; }

.date.selected {
  background-color: #ffea00;
  color: #212529; }

.date.selected > .hatVeranstaltung {
  background-color: black; }

.day {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem; }

.daynames > div {
  border: 1px solid #333;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 0.2rem;
  text-align: center; }

@media (max-width: 575.98px) {
  .date, .monthname, .daynames > div {
    margin: 0.2rem !important; } }
.showlistrow.d-flex {
  padding: 0.5rem; }

#showlist {
  margin-top: 3rem; }

.showlistrow.d-flex > div, .showlistrow.d-flex > a {
  flex: 1;
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 0.5rem; }

.tickets {
  background-color: #ffea00;
  padding: 0.5rem;
  border-radius: 0.5rem;
  text-decoration: none;
  text-align: center;
  font-family: 'Share Tech';
  color: #212529;
  border: 1px solid;
  border-color: transparent;
  transition: all 0.1s ease-in-out; }

.tickets:hover {
  background-color: transparent;
  border-color: #ffea00;
  color: #ffea00; }

.tickets.soon {
  background-color: #999; }

.tickets.sold {
  background-color: #FF0004;
  color: white !important; }

.time {
  background-color: #333;
  border-radius: 0.5rem;
  padding: 0.5rem;
  font-family: 'Share Tech';
  color: #212529; }

.d-flex {
  display: flex !important;
}

.flex-column {
  flex-direction: column !important;
}

.font-tech{
  font-family: "Share Tech", sans-serif;
  color: inherit;
}

body {
  color: white;
}