body {
  overflow-x: hidden;
}

.box-wrapper {
  -webkit-transition-duration: 600ms;
  transition-duration: 600ms;
}

.box-wrapper.loading:nth-child(odd) {
  transform: translate(100%);
}
.box-wrapper.loading:nth-child(even) {
  transform: translate(-100%);
}

.red {
  background-color: red;
}

.green {
  background-color: lightgreen;
}

.blue {
  background-color: lightblue;
}

.yellow {
  background-color: yellow;
}

.event-set-up {
}

.staffing {
}

.revenues {
}

.expenses {
}

.key-metrics {
}

.event-set-up,
.staffing,
.revenues,
.expenses {
  border-top: 2px black solid;
  border-bottom: 2px black solid;
  border-left: 1px black solid;
  border-right: 1px black solid;
}

.well-run-link {
  display: inline-block;
  background-color: black;
  color: #ff1f1f;
}
.well-run-link:hover {
  display: inline-block;
  background-color: rgb(255, 255, 255);
  color: black;
}

.key-metrics {
  width: 40%;
  display: inline-block;
  background-color: hsl(0, 0%, 89%);
  padding: 4px;
  border: rgb(87, 191, 226) solid 3px;
  border-radius: 5%;
}

.key-metrics-flex {
  display: flex;
  justify-content: flex-start;
}

.divider-finance {
}

.submit-button {
}

input {
  width: 60px;
}

.header-flex {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
@media all and (max-width: 800px) {
  .header-flex {
    flex-wrap: wrap;
  }
}
@media all and (max-width: 500px) {
  .key-metrics {
    width: 55%;
  }
}
@media all and (max-width: 500px) {
  .key-metrics {
    width: 75%;
  }
}
@media all and (max-width: 225px) {
  .key-metrics {
    width: 100%;
  }
}
.key-metrics-background {
  background-image: url(/Screen\ Shot\ 2021-06-02\ at\ 3.38.54\ PM.png);
  background-size: cover;
  background-position: center;
}

.white-oval {
  background-color: #e3e3e3;
  display: inline-block;
  border: rgb(87, 191, 226) solid 3px;
  border-radius: 50%;
  width: 20em;
}