.hidden {
  display: none !important;
}

#progress-bar {
  width: 200px;
  height: 1.2em;
  display: block;
  background: red;
  color: white;
  position: relative;
  font-size: 1em;
}
#progress-bar .inner {
  background: green;
  transition: 0.2s width;
  width: 0;
  height: 100%;
  top: 0;
  position: absolute;
}
#progress-bar .upload {
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  position: absolute;
}

.success {--color: #13FF94;}
.error {--color: #FF1334;}
.message {
	margin: 2rem;
	padding: 2rem;
	background-color: color-mix(in srgb, white 90%, var(--color, #13FF94));
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' preserveAspectRatio='none' viewBox='0 0 100 100'><g fill='black' opacity='.6'><path d='M0,0 H100 V10z'/><path d='M100,0 V100 h-1z'/><path d='M100,100 H0 v-10z'/><path d='M0,100 V0 h1z'/></g></svg>");
	scale: 1;
	transition: scale 0.3s ease-out;	
	@starting-style {
		scale: 0.5;
	}
}
.upload-info > div {
	display: grid;
	grid: "spinner bar" auto "spinner info" auto / auto 1fr;
	column-gap: 1rem;
	& .spinner {
		grid-area: spinner;
	}
}
.inset {
  box-sizing: border-box;
  padding: 1rem;
  max-width: 990px;
  margin: auto;
}

#list .item {
  display: grid;
  grid-template-columns: [land] 50px [title] 1fr [extra] 100px;
  grid-template-rows: repeat(2, auto);
  padding: 0.5rem 1rem;
  margin-inline: 0.5rem;
  background: white;
  &.inactive {
    color: #666
  }
  & + .item {
    border-top: 1px solid var(--theme);
  }
  & .area {
    grid-column: land;
    grid-row: 1 / end;
    & img {
      width: auto;
      height: 1rem;
    }
  }
  & .title {
    grid-column: title;
    grid-row: 1;
    font-weight: bold;
  }
  & .badge {
    grid-column: extra;
    grid-row: 1;
    border-radius: 5px;
    color: white;
    text-align: center;
    &.new {
      background: var(--accent);
    }
    &.closing {
      background: red;
    }
  }
  & .sub-title {
    grid-column: title;
    grid-row: 2;
    font-style: italic;
    font-size: 0.9em;
  }
  & .date {
    grid-column: extra;
    grid-row: 2;
    text-align: right;
  }
  &:nth-child(odd) {
    background: color-mix(in srgb, var(--accent) 15%, white)
  }
  &:not(.inactive):hover {
    cursor: pointer;
    background: color-mix(in hsl, white, var(--theme));
    color: white;
  }
  &.inactive:hover {
    cursor: pointer;
    background: color-mix(in hsl, white 85%, var(--theme));
  }
}
@media screen and (max-width: 800px) {
  #list .item {
    grid-template-columns: [land] 50px [title] 1fr;
    grid-template-rows: repeat(4, auto);
    & .title {
      grid-column: title;
      grid-row: 1;
    }
    & .date {
      grid-column: title;
      grid-row: 3;
      text-align: center;
    }
    & .badge {
      grid-column: title;
      grid-row: 4
    }
  }


}
input, button, textarea, select, .form-input {
	font-family: "Roboto", sans-serif;
	background: white;
	font-weight: 400;
	padding: 0.5rem;
	border-radius: 0.25rem;
	border: 1px solid var(--accent);
}
input, textarea, select {
	box-shadow: 0 0 0px 0px color-mix(in srgb, white, transparent);
	transition: box-shadow 0.3s;
	&:focus,&:focus-within {
		outline: none;
		box-shadow: 0 0 1px 5px color-mix(in srgb, white, transparent);
	}
}
input[type="button"], input[type="submit"], button {
  background: var(--theme);
  color: white;
}
.field-container {
  display: flex;
  align-items: center;
}
fieldset {
	border-radius: 0.4rem;
  border: 1px solid var(--theme);
  margin-bottom: 1rem;
}

label {
  width: 70px;
  display: block;
}

.list {
  padding: 1rem;
}
.hidden {
  display: none;
}

.events {
  border-bottom: 0.2rem solid var(--theme);
  padding: 0.5rem;
  margin-bottom: 0 !important;
}
.buttons-track {
  border-top: 0.2rem solid var(--theme);
  padding: 0.5rem;
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}


header.main-header {
  position: relative;
  background: white;
  height: 13rem;
  background-size: 100% auto;
  background-repeat: no-repeat;
  color: var(--theme);
  & svg {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
}
h2, h1 {
  margin: 0;
}
.text-center {
  text-align: center;
}
.align-center {
  margin-inline: auto;
}

.year-header {
  margin-top: 1rem;
  background: var(--theme);
  width: calc(100% - 1rem);
  margin-inline: 0.5rem;
  padding: 0.4rem 1rem;
  display: flex;
  color: white;
}
@keyframes spinner {
  from {rotate: 0turn}
  to {rotate: 3turn}
}
.spinner {
  width: 3rem;
  height: 3rem;
  position: relative;
	box-sizing: border-box;
  &::after,&::before {
    content: '';
    position: absolute;
    border: 5px solid;
    height: 100%;
    width: 100%;
    border-color: cornflowerblue transparent;
    border-radius: 50%;
	box-sizing: border-box;
  }
  &::before {
    animation: 2s spinner infinite cubic-bezier(0.64, 0.22, 0.35, 0.79);
  }
  &::after {
    border-color: #00aeff transparent transparent transparent;
    animation: 2.2s spinner infinite cubic-bezier(0.64, 0.22, 0.35, 0.79);
  }
}