/*

timer.css

**********************************************************************
Copyright (c) 2019 Ugo Finnendahl <ugogon@hotmail.de>
                   Orm Finnendahl <orm.finnendahl@selma.hfmdk-frankfurt.de>

Revision history: See git repository.

This program is free software; you can redistribute it and/or
modify it under the terms of the Gnu Public License, version 2 or
later. See https://www.gnu.org/licenses/gpl-2.0.html for the text
of this agreement.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.

*/

/* [FONT] */
#ctime, #tpick {
  font-family: monospace, sans-serif;
}

.header {
  text-align: left;
  font-weight: normal;
  margin: 0px 0 0px 0;
}

/* [CURRENT TIME] */
#ctime {
  /* margin: 0 auto; */
  width: 100%;
  /* max-width: 350px; */
  padding: 0px;
  background:  #f2f2f2;
  text-align: left;
}
#ctime .header {
  color: #c61d1d;
}
#ctime .square {
  display: inline-block;
  padding: 10px;
  margin: 0px;
}

.subheader {
  text-align: left;
  font-weight: normal;
  margin: 40px 0 0px 0;
}


#ctime .digits {
  font-size: 17vw;
  width: 100%;
  background: #fff;
  color: #000;
  padding: 10px 10px;
  border-radius: 10px;
  border: 8px solid;
  border-color: #000000;
}

#ctime .inverteddigits {
  font-size: 17vw;
  width: 100%;
  background: #000;
  color: #fff;
  padding: 10px 10px;
  border-radius: 10px;
  border: 4px solid;
  border-color: #000000;
}

#ctime .overtimedigits {
  font-size: 17vw;
  width: 100%;
  background: #f00;
  color: #fff;
  padding: 10px 10px;
  border-radius: 10px;
  border: 4px solid;
  border-color: #000000;
}

#ctime .text {
  margin-top: 20px;
  color: #ddd;
}

/* [TIME PICKER] */
#tpick {
  margin: 0 auto;
  width: 100%;
  padding: 10px;
  background: #f2f2f2;
  white-space: nowrap;
}
#tpick-h, #tpick-m, #tpick-s {
  display: inline-block;
  width: 80px;
}
#tpick select {
  box-sizing: padding-box;
  width: 100%;
  font-size: 1.2em;
  font-weight: bold;
  margin: 20px 0;
}

#treset, #ttoggle, #tdirection, #tloop, #tautostop, #tmute {
    box-sizing: padding-box;
    width: 10vw;
    height: 10vw;
    background: #f2f2f2;
    background-image: url('./img/previous.svg');
    background-size: 100% 100%;
    padding: 10px;
    border: 0;
    cursor: pointer;
}

#thelp {
    box-sizing: padding-box;
    width: 10vw;
    height: 10vw;
    background: #f2f2f2;
    background-image: url('./img/help.svg');
    background-size: 100% 100%;
    padding: 10px;
    border: 0;
    cursor: pointer;