cse112-sp20/Team-Potato

.popupFocusMode {
  text-align: center;
}

.popupFocusModeTitle {
  background: mediumseagreen;
  color: white;
  padding-top: 15px;
  height: 70px;
}

.popupFocusModeTimer {
  border-radius: 2em;
  font-size: 60px;
  font-weight: bold;
  margin-top: 20px;
  outline: none;
}

.popupFocusModeTimer:hover {
  background-color: rgb(209, 209, 209);
}

.popupFocusModeTabGroupName {
  font-size: 20px;
  margin-top: 40px;
}

.popupFocusModeButton {
  margin-bottom: 20px;
}

.popupFocusModeBackButton {
  margin-bottom: 20px;
}

.horizontal-slider {
  background: #d3d3d3;
  height: 10px;
  margin-top: 10px;
  margin-bottom: -20px;
  margin-left: 50px;
  margin-right: 50px;
}

.horizontal-slider:hover {
  opacity: 1;
}

.sliderThumb {
  width: 20px;
  height: 10px;
  border-radius: 50%;
  background: mediumseagreen;
  cursor: pointer;
}

.popupFocusModeBtnContainer {
  text-align: center;
  margin: 10px;
  bottom: 0;
  right: 20%;
  left: 20%;
}

.popupFocusModeButton {
  height: 50px;
  width: 100%;
  background-color: mediumseagreen !important;
  color: white !important;
  border: none !important;
}

.popupFocusModeButton:hover {
  background-color: limegreen !important;
}

.popupFocusModeBackButton {
  width: 100%;
  background-color: lightslategrey !important;
  color: white !important;
  border: none !important;
}

.popupFocusModeBackButton:hover {
  background-color: grey !important;
}

.popupFocusModeBodyContainer {
  width: 300px;
  height: 210px;
}