body {
  margin: 0;
  padding: 0;
}
audio {
  display: block;
}

button {
  cursor: pointer;
}

.hide {
  display: none;
}

.audios {}

.homescore {
  background-color: lightgreen;
}
#homescore {
  cursor: pointer;
}

.guestscore {
  background-color: #7cc2ff;
}
#guestscore {
  cursor: pointer;
}

.homescore, .guestscore {
  width: 50%;
  float: left;
  text-align: center;
}

#homescore, #guestscore, #countdown {
  font-size: 120px;
  text-align: center;
}

body[data-mode="timeedit"] #homescore, body[data-mode="timeedit"] #guestscore,
body[data-mode="timeedit"] button.scores_minus, body[data-mode="timeedit"] button.scores_plus {
  z-index: 2;
}

body[data-mode="playing"] #go222, body[data-mode="playing"] #go20, body[data-mode="playing"] #go15, body[data-mode="playing"] #lastGame,
body[data-mode="playing"] #reset, body[data-mode="playing"] #showlogs,
body[data-mode="playing"] #removePeriod, body[data-mode="playing"] #addPeriod,
body[data-mode="playing"] .hourtimer-button,
body[data-mode="playing"] #settings,
body[data-mode="playing"] .tohide {
  display: none;
}

#hourtimer {
  font-size: 35px;
  text-align: center;
}

#countdown {
  cursor: pointer;
}

.countdown, .hourtimer {
  text-align: center;
}

#countdown, #hourtimer {
  border-radius: 25px;
  padding-right: 10px;
  padding-left: 10px;
  z-index: 2;
}

#numbCount {
  width: 100px;
}

button.scores {
  width: 49%;
  height: 30px;
  float: left;
  border-radius: 0;
}

button.scores_plus {
  float: right;
}

button.scores_minus {
  float: left;
}

button.fullscreen {
  position: absolute;
  right: 0;
  top: 0;
}

.team_names {
  font-size: 50px;
}

/*.team_name1 { background-color: lightgrey; } */
/*.team_name2 { background-color: lightgrey; } */

.countdown-inner, .hourtimer-inner {
  background-color: white;
  display: inline-block;
}

.countdown-active {
  color: black;
}

.countdown-inactive {
  color: #8a8a8a; 
}

.countdown-nearend {
  color: red;
}

.hourtimer-button {
  position: relative;
  display: inline-block;
  height: 70px;
  width: 35px;
  font-size: 15px;
  text-align: center;
}

.hourtimer-button-addH {
  left: -110px;
  top: -135px;
}

.hourtimer-button-remH {
  left: -149px;
  top: -65px;
}

.hourtimer-button-addS {
  left: 149px;
  top: -135px;
}

.hourtimer-button-remS {
  left: 110px;
  top: -65px;
}

#fullScreenModal {
  width: 100%;
  height: 100%;
  background-color: black;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 1000;
  color: white;
  text-align: center;
  padding-top: 80px;
  font-size: 35px;
}

.periode_label {
  display: inline-block;
  top: -10px;
  position: relative
}


/* ************* */
/* Media Queries */
/* ************* */
@media (orientation: landscape) {
  .countdown, .hourtimer {
    position: absolute;
    width:  100%;
    height: 196px;
    z-index: 3;
  }

  .countdown-inner, .hourtimer-inner {
    top: 55px;
    position: relative;
  }

  .hourtimer {
    height: 55px;
  }

  .hourtimer-inner {
    top: 5px;
  }

  #debug {
    /* top: 210px; */
    /* position: relative; */
  }

  #numbCount, #go, #go15, #go20 {
    /* top: 201px; */
    position: relative;
    font-size: 20px;
  }

  #lastGame, #go222 {
    font-size: 20px;
  }

  #removePeriod, #addPeriod, #period, #settings {
    font-size: 20px;
  }

  .team_name1 { 
    width: 56%; /* 65%; */
    text-align: center;
  }

  .team_name2 {
    float: right;
    width: 56%; /* 65%; */
    text-align: center;
  }

  #homescore {
    display: inline-block;
    width: 56%; /* 65%; */
    float: left;
    z-index: 5;
    position: relative;
  }

  .homescore-inner {
    display: inline-block;
    width: 100%;
    left: 0;
    top: 15%;
    position: relative;
  }

  .homescore, .guestscore {
    width:   50%;
    height: 100vh;
  }

  .scores_plus {
    display: none;
  }

  .homescore .scores_minus {
    position: relative;
    left: 30px;
  }

  .guestscore .scores_minus {
    position: relative;
    right: 30px;
    float: right;
  }

  .guestscore {
    float: right;
  }

  #guestscore {
    display: inline-block;
    width: 56%; /* 65%; */
    float: right;
    z-index: 5;
    position: relative;
  }

  .guestscore-inner {
    display: inline-block;
    width: 100%;
    right: 0;
    top:  15%;
    position: relative;
  }

  .audios {
    position: absolute;
    top: 280px;
    /* left: 270px; */
    left: 0;
    width: 100%;
    text-align: center;
  }

  .audios button {
    position: relative;
    top:    16px;
    left: -150px;
  }

  #myAudio {
    display: inline;
    position: relative;
    left: 20px;
  }

  .timer-group {
    position: absolute;
    top: 215px;
    /* left: 270px; */
    left: 0px;
    width: 100%;
    text-align: center;
    z-index: 3;
  }

  .countdown2 {
    position: relative;
    top: 50px;
  }

  #showlogs {
    position: absolute;
    right:  0px;
    top: -215px;
    opacity: 0;
  }

  #reset {
    position: absolute;
    top: -215px;
    left:   0px;
  }

  #settings, #addPeriod, #removePeriod, #period {
    position: relative;
    top: -10px;
  }

  #period {
    width: 30px;
    text-align: center;
  }

  button.scores_minus {
    font-size: 30px;
    z-index: 7;
  }

  button.scores {
    height: 40px;
  }
}

@media (orientation: portrait) {
  .countdown {
    height: 150px;
  }
}