.clock-wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  .clockchain-bar, .clock-face {
    flex-shrink: 0;
    flex-grow: 0;
  }

  .clockchain-bar {
    position: relative;
    height: 15.625%;
    // background: #1d1f31;
    // box-shadow: 0 0 15px #000;
  }

  .clock-face {
    position: relative;
    height: 84.375%;
    margin: auto;
    overflow: hidden;

    .cut-out, .demo-dial {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;

      .face {
        fill: #11131f;
      }
    }
  }
}