:root {
  --clocksize: 500;
}


#clocks {
  display: flex;
  flex-wrap: wrap;
}

#clocks > div {
  flex: 0 0;
  margin:10px;
}

#clocks object {
  width: calc(var(--clocksize) * 1px);
}


.clock_label {
  text-align: center;
  height: 30px;
}

.hidden {
    display:none;
}

.fullscreen {
    position:absolute;
    left:0px;
    right:0px;
    top:0px;
    bottom:0px;
    background-color: rgba(0,0,0,0.75);
}

.utc_offset_indicator {
  text-align: center;
  font-family: sans-serif;
  font-size: smaller;
  color: gray;
}

.right {
  right: 20px;
}

.right.button_minus {
  top: 55px;
}

.button_plus, .button_minus {
  position: absolute;
  width: 35px;
  height: 35px;
  background: #fff;
  cursor: pointer;
  border: 2px solid #095776;
}

.button_plus:after, .button_minus:after {
  content: '';
  position: absolute;
  transform: translate(-50%, -50%);
  height: 4px;
  width: 50%;
  background: #095776;
  top: 50%;
  left: 50%;
}

.button_plus:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #095776;
  height: 50%;
  width: 4px;
}

.button_plus:hover:before,
.button_plus:hover:after,
.button_minus:hover:after {
  background: #fff;
  transition: 0.2s;
}

.button_plus:hover,
.button_minus:hover
 {
  background-color: #095776;
  transition: 0.2s;
}