/* interval timer css */
.container {
  width: 85%;
  overflow: hidden; /* will contain if #first is longer than #second */
  margin: 0 auto;
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  background-color: #5a7db5;
  border-radius: 15px 15px 15px 15px;
  padding: 10px;
  color: white;
}
.buttons {
  background-color: #5a7db5;
  width: 85%;
  margin: 0 auto;
  max-width: 500px;
  padding: 10px;
  border-radius: 15px 15px 15px 15px;
  border-bottom: 2px solid white;
}

.top-buttons {
  cursor: pointer;
  font-size: large;
  background-color: #97bbf4;
  border:none;
  border-radius: 2px;
  padding: 2px 5px 2px 5px;
  margin: 2px;
  color: white;
}

.add_new_box {
  float: left;
  padding: 10px;
  border-right: 2px solid white;
}
.add-new-button {
  cursor: pointer;
  background-color: #97bbf4;
  border:none;
  border-radius: 2px;
  padding: 2px 5px 2px 5px;
  margin: 2px;
  font-size: large;
  color: white;
}

.timer-box {
  overflow: hidden;
  padding: 10px;
  flex-grow: 4;
  display: flex;
  flex-direction: column;
}

.timer {
  padding: 5px;
  margin: 2px;
  border-radius: 5px;
  background-color: #97bbf4;

}

.number_input {
  width: 50px;
  text-align: center;
  /* background: none; */
  /* border: none; */
}


.time {
  margin: 0 auto;
  color: white;
  font-weight: bold;
  font-size: large;
  font-family: sans-serif;
}

.delete {
  border: none;
  float: right;
  background: rgba(0,0,0,0);
  color: white;
  font-weight: bold;
  font-size: medium;
  cursor: pointer;

}

.flash {
  background-color: black;
  animation: flashing .5s;
  animation-iteration-count: 1;
}
@keyframes flashing {
  0% {background-color: black;}
  20% {background-color: white;}
  40% {background-color: black;}
  60% {background-color: white;}
  80% {background-color: black;}
  100% {background-color: white;}
}

/* settings dropdown */
.settings {
  cursor: pointer;
  font-size: large;
  float: right;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}
.settings-content {
  display: none;
  position: absolute;
  background-color: #97bbf4;
  z-index: 1;
  border:none;
  border-radius: 2px;
  padding: 2px 5px 2px 5px;
  margin: 2px;
}
.settings-content input {
  display: block;
  float: left;
  text-align: left;
}
.show-settings {
  display: block;
}

/* get rid of arrows on number inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}