body {
      font-family: sans-serif;
      display: grid;
      height: 100vh;
      place-items: center;
    }

    .base-timer {
      position: relative;
      width: 120px;
      height: 120px;
    }

    .base-timer__svg {
      transform: scaleX(-1);
    }

    .base-timer__circle {
      fill: none;
      stroke: none;
    }

    .base-timer__path-elapsed {
      stroke-width: 9px;
      stroke: grey;
    }

    .base-timer__path-remaining {
      stroke-width: 7px;
      stroke-linecap: round;
      transform: rotate(90deg);
      transform-origin: center;
      transition: 1s linear all;
      fill-rule: nonzero;
      stroke: currentColor;
    }

    .base-timer__path-remaining.green {
      color: rgb(65, 184, 131);
    }

    .base-timer__path-remaining.orange {
      color: orange;
    }

    .base-timer__path-remaining.red {
      color: red;
    }

    .base-timer__label {
      position: absolute;
      width: 120px;
      height: 120px;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
    }

    .border-small {border:solid 1px red; font-size: 3px;line-height:1px; padding:0px; }
    .border-blue {border:solid 1px blue; }

    #timerapp{width: 120px;margin:0; padding: 0; float:left;  }