.template-container {
  background-color: #3f4458;
  min-height: 100%; /* Fallback for browsers do NOT support vh unit */
  min-height: 100vh; /* These two lines are counted as one :-)       */
  display: flex;
  align-items: center;
  text-align: center;
}

.template-container-fixed {
  background-color: #3f4458;
  height: 100%;
  display: flex;
  align-items: center;
  text-align: center;
}

.template-subcontainer {
  /* width: 60%; */
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.template-subtitle {
  text-align: left;
  color: var(--color-white);
  font-size: 12px;
  padding-bottom: 20px;
}

.template-title {
  text-align: left;
  /* color: #4da1ff; */
  color: var(--theme-color);
  font-weight: bold;
}

.template-card {
  width: 320px;
  height: 300px;
  background: var(--color-white);
  border-radius: 5px;
  margin-top: 20px;
  margin-left: 10px;
  transition: all 0.2s ease-in-out;
}

.template-card:hover {
  cursor: pointer;
  transform: scale(1.05);
}

.template-card-title {
  font-size: 12px;
  font-weight: bold;
}

.template-card-suggestion {
  /* color: #2675eb; */
  color: var(--theme-color) !important;
  font-size: 12px;
}

.frame-css {
  overflow: hidden;
}
.event-valid {
  color: var(--theme-color);
}
.event-expired {
  color: var(--color-red);
}