:root {
    background-color: #1a1a1a;
    font-size: 62.5%;
}

*{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    color: #cccccc;
}

h1, 
h2, 
h3, 
h4 {
    margin-bottom: 1rem;
}
html {
  height:100%;
  color: #cccccc;
}
body {
  margin:0;
}

p {
  color: #cccccc;
  background-color: #262626;
}

h1 {
    font-size: 5.4rem;
    color: white;
    margin-bottom: 5rem;
  }
  
  h1 > span {
    font-size: 2.4rem;
    font-weight: 500;
  }
  
  h2 {
    font-size: 4.2rem;
    margin-bottom: 4rem;
    font-weight: 700;
  }
  
  h3 {
    font-size: 2.8rem;
    font-weight: 500;
  }

  /* UTILITIES */

  .container {
    width: 100vw;
    height: 100vh;
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem;
  }

  /* Any container child */
  .container > * {
    width: 100%;
  }

  .flex-column {
    display: flex;
    flex-direction: column;
  }
  
  .flex-center {
    justify-content: center;
    align-items: center;
  }
  
  .justify-center {
    justify-content: center;
  }
  
  .text-center {
    text-align: center;
  }
  
  .hidden {
    display: none;
  }

   /* BUTTONS */
   .btn {
    font-size: 1.8rem;
    padding: 1rem 0;
    width: 20rem;
    text-align: center;
    /*border: 0.1rem solid black;*/
    margin-bottom: 1rem;
    text-decoration: none;
    color: black;
    background-color: white;
  }
  
  .btn:hover {
    cursor: pointer;
    box-shadow: 0 0.4rem 1.4rem 0 #cccccc;
    transform: translateY(-0.1rem);
    transition: transform 150ms;
  }
  
  .btn[disabled]:hover {
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
  }

  /* FORMS */
  form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  input {
    margin-bottom: 1rem;
    width: 20rem;
    padding: 1.5rem;
    font-size: 1.8rem;
    border: none;
    box-shadow: 0 0.1rem 1.4rem 0 rgba(86, 185, 235, 0.5);
  }

  input::placeholder{
    color: #AAA;
  }
.aktiv{
  background-color: #00ff00;
}


/* Images for Emoticons */
.twa {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0 .05em 0 .1em;
  vertical-align: -0.1em;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 1em 1em; }

  .twa-lg {
    height: 1.33em;
    width: 1.33em;
    margin: 0 0.0665em 0 0.133em;
    vertical-align: -0.133em;
    background-size: 1.33em 1.33em; }
  
  .twa-2x {
    height: 2em;
    width: 2em;
    margin: 0 0.1em 0 0.2em;
    vertical-align: -0.2em;
    background-size: 2em 2em; }
  
  .twa-3x {
    height: 3em;
    width: 3em;
    margin: 0 0.15em 0 0.3em;
    vertical-align: -0.3em;
    background-size: 3em 3em; }
  
  .twa-4x {
    height: 4em;
    width: 4em;
    margin: 0 0.2em 0 0.4em;
    vertical-align: -0.4em;
    background-size: 4em 4em; }
  
  .twa-5x {
    height: 5em;
    width: 5em;
    margin: 0 0.25em 0 0.5em;
    vertical-align: -0.5em;
    background-size: 5em 5em; }


.bk-1 {
  background-image: url("https://arnestatic.de/timetrack/student.svg");
}
.bk-2 {
  background-image: url("https://arnestatic.de/timetrack/medien.svg");
}
.bk-3 {
  background-image: url("https://arnestatic.de/timetrack/hobby.svg");
}
.bk-4 {
  background-image: url("https://arnestatic.de/timetrack/sleep.svg");
}
.bk-5 {
  background-image: url("https://arnestatic.de/timetrack/social.svg");
}
.bk-6 {
  background-image: url("https://arnestatic.de/timetrack/pause.svg");
}
.bk-7 {
  background-image: url("https://arnestatic.de/timetrack/sport.svg");
}
.bk-8 {
  background-image: url("https://arnestatic.de/timetrack/commute.svg");
}
.bk-9 {
  background-image: url("https://arnestatic.de/timetrack/hausarbeit.svg");
}
.bk-10 {
  background-image: url("https://arnestatic.de/timetrack/fuersich.svg");
}
.bk-11 {
  background-image: url("https://arnestatic.de/timetrack/other.svg");
}
.no-info {
  background-image: url("https://arnestatic.de/timetrack/noinfo.svg");
}
.tracker {
  background-image: url("https://arnestatic.de/timetrack/puck-js.svg");
}

.status {
  text-align: center;
}

.wrapper{
  width:100%;
  display:block;
  overflow:hidden;
  margin:0 auto;
  padding: 20px 22px;
  border-radius:4px;
}

canvas{
  height:400px;
}