/*#arbeitsblaetter, #arbeitsblaetter ul {
}*/
#arbeitsblaetter img {
    width:1.5em;
    vertical-align: middle;
    margin-left:0.5em;
}
.open {
    display: block;
}
.closed {
    display: none;
}

.expanded {
    list-style-type : disclosure-open;
}
.contracted {
    list-style-type : disclosure-closed;
}

.leaflist {
    padding-left:0;
}

.leaf {
    list-style-type : none;
    display: inline;
    padding-right:0.5em;
}

a.intern {
    font-size:large;
    border-style: outset;
    border-color:rgb(186, 186, 255);
    background-color: rgb(235, 235, 255);
    padding:0.5em;
    margin:0.2em;
    color:black;
    display:inline-block;
    text-decoration: none;
}

a.intern:visited {
    color: black;
}

.canvascontainer {
    position: relative;
    display:inline-block;
}

.overlay {
    position:absolute;
    width:3.8095%;
    height:2.694%;
}
.correct {
    background-color: #00ff0044;
}
.wrong {
    background-color: #ff000044;
}
.unknown {
    background-color: #ffff0044;
}
.unanswered {
    background-color: #0000ff44;
}

.digit {
  position: relative;
  width:100%;
  text-align: center;
  bottom:1em;
}
.toggleCorrect {
  position: relative;
  left:120%;
  bottom:40%;
  opacity: 60%;
  font-size:larger;
  cursor: pointer;
}

/* from https://css-tricks.com/css3-progress-bars/ */

.meter {
  box-sizing: content-box;
  height: 20px; /* Can be anything */
  position: relative;
  margin: 60px 0 20px 0; /* Just for demo spacing */
  background: #555;
  border-radius: 25px;
  padding: 10px;
  box-shadow: inset 0 -1px 1px rgba(255, 255, 255, 0.3);
}
.meter > span {
  display: block;
  height: 100%;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  background-color: rgb(43, 194, 83);
  background-image: linear-gradient(
    center bottom,
    rgb(43, 194, 83) 37%,
    rgb(84, 240, 84) 69%
  );
  box-shadow: inset 0 2px 9px rgba(255, 255, 255, 0.3),
    inset 0 -2px 6px rgba(0, 0, 0, 0.4);
  position: relative;
  overflow: hidden;
}
.meter > span:after,
.animate > span > span {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: linear-gradient(
    -45deg,
    rgba(255, 255, 255, 0.2) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.2) 50%,
    rgba(255, 255, 255, 0.2) 75%,
    transparent 75%,
    transparent
  );
  z-index: 1;
  background-size: 50px 50px;
  animation: move 2s linear infinite;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  overflow: hidden;
}

.animate > span:after {
  display: none;
}

@keyframes move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 50px;
  }
}

.orange > span {
  background-image: linear-gradient(#f1a165, #f36d0a);
}

.red > span {
  background-image: linear-gradient(#f0a3a3, #f42323);
}

.nostripes > span > span,
.nostripes > span::after {
  background-image: none;
}