body {
  font-family: 'Work Sans', sans-serif;
  width: 100%;
  color: #1f1f1f;
  margin: auto;
  /*box-sizing: border-box;*/
  display: flex;
  flex-flow: column;
}

.nonprint {
  visibility: visible;
  display: flex;
  align-items: center;
  width: 100%;
  background-color: #1f1f1f;
  max-height: 5rem;
  justify-content: space-evenly;
  padding: 1rem;
  flex-flow: row;
}


.title-container {
  display: flex;
  flex-flow: row;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: rgb(129, 9, 9);
}

.title {
  background-image: url('./images/PSLogo.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-color: rgb(129, 9, 9);
  width: 80%;
  height: auto;
  justify-content: center;
  padding: 1rem;
}

.container {
  display: flex;
  flex-flow: row;
  height: 100%;
  width: 100%;
  justify-content: center;
}

#element-to-print {
  width: 100%
}

.subtitle {
  width: 100%;
  border: 3px rgb(129, 9, 9) solid;
  padding: 1rem;
  margin: 0.5em;
  font-weight: 900;
  font-style: italic;
  font-size: 2.5em;
  justify-self: center;
}

.calevent {
  background-color: rgba(218, 218, 218, 1);
  font-family: 'Nunito', sans-serif;
  font-size: 1.5em;
  font-style: italic;
  width: 66%;
  border: 3px black solid;
  padding: 1em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

.eventdate {
  display: flex;
  flex-flow: column;
  width: 15%;
  border: rgb(129, 9, 9) 3px solid;
  background-color: rgb(129, 9, 9);
  color: whitesmoke;
  align-items: center;
  justify-content: center;
  padding: 1em;
  margin-right: 0.5em;
  margin-left: 0.5em;
  margin-top: 0.5em;
  margin-bottom: 1em;
}

.date-mo {
  font-style: italic;
  text-transform: uppercase;

}

.date-day {
  font-style: bold;
  font-size: 3rem;
}

.event-title {
  font-style: bold;
  font-weight: 900;
  font-size: 1.5em;
  padding-bottom: .5rem;
}

.event-time {
  font-size: smaller;
  padding-bottom: .25rem;

}

.event-location {
  padding-bottom: .25rem;
  font-size: smaller;
}

.help-text {
  display: flex;
  flex-direction: column;
}

.help-text p {
  color: white;
  font-weight: bold;
  font-size: small;
  align-items: stretch;
}

.togg {
  display: inline-block;
  background: rgb(216, 216, 216);
  min-width: 6rem;
  min-height: 1rem;
  padding: .25rem;
  border-radius: .35rem;
  border-color: rgb(220, 220, 220);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}


.date-picker {
  display: inline-block;
  background: rgb(216, 216, 216);
  min-width: 6rem;
  min-height: 1.75rem;
  border-radius: .35rem;
  padding-right: 1rem;
  padding-left: 0.5rem;
  border-color: rgb(220, 220, 220);
  position: relative;
  isolation: isolate;
}

.date-picker,
.date-picker>* {
  cursor: text;
  font-size: small;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.date-picker:hover {
  background: rgb(200, 200, 200);
}

.date-picker:active {
  background: rgba(150, 150, 150, 0.2);
}

.date-picker:focus>input[type="date"],
.date-picker:focus-within>input[type="date"] {
  color: #1f1f1f;
}

.date-picker:focus,
.date-picker:focus-within {
  box-shadow: 0 0 0 .1rem #3e0303;
}

.date-picker>.placeholder::after {
  content: "Click for calender";
  pointer-events: none;
  position: absolute;
  inset: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
  color: #222;
}

.date-picker:focus>.placeholder,
.date-picker:focus-within>.placeholder,
.date-picker>input[type="date"]:valid+.placeholder {
  display: none;
}

.date-picker>input[type="date"] {
  background: none;
  border: none;
  outline: none;
  color: transparent;
  font-family: serif;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

}

.date-picker>input[type="date"]:valid {
  color: #1f1f1f !important;
}

@media print {
  .nonprint {
    visibility: hidden;
  }
}

/*Extra small devices (phones, 600px and down) */
@media only screen and (max-width : 400px) {
  .nonprint {
    flex-flow: column;
  }
}