#videocontrols {
    width: 100%;
    height: var(--video-controls-height);
    white-space: nowrap;
    position: relative;
}
#videocontrols > div {
    position: absolute;
}


#videocontrols > div > button {
    width: 3.5em;
    height: 2.3em;
    margin: .7em;
    padding: .3em;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes button-click {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(.9);
  }
}

#videocontrols > div > button.pressed {
  animation-name: button-click;
  animation-duration: .05s;
  animation-direction: alternate;
  animation-iteration-count: 2;
}

#videocontrols > div > button .superscript {
    font-size: .55em;
    position: absolute;
    display: block;
    top: 0;
    width: 3em;
    left: calc(50% - 1.5em);
}

#timestamp {
    display: inline-block;
    position: relative;
}
#timestamp > input {
    width: 12em;
    text-align: center;
    margin: 0 1.5em;
    height: 2em;
    border: 1px solid grey;
    border-radius: 0.2em;
}

#timestamp > input:focus {
  outline-width: 0;
}

#timestamp.warning {
    background-color: hsl(60 70% 80%);
}
#timestamp.warning > input {
    border-color: hsl(60 80% 40%);
    background-color: hsl(60 70% 80%);
}
#timestamp > input::selection {
    background-color: transparent; /* don't want to see the selection */
}

#timestamp.warning::before, #timestamp.warning::after {
    content: "\26A0";
    position: absolute;
    font-size: 1.3em
}
#timestamp.warning::before {
    left: 0;
}
#timestamp.warning::after {
    right: 0;
}