.in-iframe{
  .signature-box{
    min-height: 90vh;
  }
}

.signature-help-label{
  display: block;
  text-align: center;
  position: absolute;
  width: 85%;
  margin: auto;
  bottom: calc(25vh - 25px);
  left: 7.5%;
  font-size: .9em;
}

.signature-box{
  position: relative;
  min-height: 100vh;
  @include flexbox();
  @include flex-direction(column);
  @include justify-content(space-between);
  .header{
    padding: $sizeSmall;
    img{
      height: 40px;
    }
    @include media-breakpoint-up(md){
      padding: $sizeMedium;
      img{
        height: 60px;
      }
    }
  }
  .footer{
    text-align: right;
    padding: $sizeSmall;
    p{
      color: $themeDarkGray;
      font-size: .8em;
      margin: 0;
      padding: 5px 60px 0 0rem;
    }
    a{
      color: $themeDarkGray;
    }
    @include media-breakpoint-up(md){
      padding: $sizeMedium;
      p{
        font-size: .9em;
      }
    }
  }
  .body{
    padding: $sizeSmall;
    @include media-breakpoint-up(md){
      padding: $sizeMedium;
    }
  }
  .button-group{
    text-align: center;
    @include flexbox();
    @include justify-content(center);
    @include align-items(center);
    .btn{
      margin: $sizeSmall;
    }
  }
  .timeouted{
    .countdown{
      color: $themeDanger;
      font-size: 1.5em;
      font-weight: bold;
    }
  }
  .view-mode-switch{
    z-index: 1;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.1em;
    position: fixed;
    bottom: $sizeSmall;
    right: $sizeSmall;
    padding: 0;
    @include flexbox();
    @include justify-content(center);
    @include align-items(center);
    @include media-breakpoint-up(md){
      bottom: $sizeMedium;
      right: $sizeMedium;
    }
  }
}
.signature-wrapper{
  .signature-countdown{
    text-align: right;
    position: absolute;
    top: $sizeSmall;
    right: $sizeSmall;
    h4{
      text-align: right;
      font-size: 1em;
    }
    @include media-breakpoint-up(md){
      top: $sizeMedium;
      right: $sizeMedium;
      h4{
        font-size: 1.2em;
      }
    }
  }
  .btn{
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 1.2em;
    @include flexbox();
    @include justify-content(center);
    @include align-items(center);
    @include media-breakpoint-up(md){
      width: 80px;
      height: 80px;
      font-size: 1.9em;
    }
    &.disabled{
      width: 25px;
      height: 25px;
      font-size: 1em;
      cursor: default;
      @include media-breakpoint-up(md){
        width: 50px;
        height: 50px;
        font-size: 1.5em;
      }
    }
  }
  .signature-canvas{
    width: 100%;
    height: 60vh;
    margin: auto;
    display: block;
    //border: 1px solid $themeFrontGray;
    position: relative;
  }
  &:after{
    position: absolute;
    content: '';
    width: 85%;
    margin: auto;
    height: 1px;
    bottom: 25vh;
    left: 7.5%;
    border-bottom: 2px dashed $themeDarkGray;
  }
}

.qr-wrapper-outer{
  @include align-items(center);
  min-height: calc(60vh + 110px);
  @include media-breakpoint-up(lg) {
    @include align-items(flex-start);
    padding-top: 55px;
  }
}

.qr-wrapper{
  text-align: center;
  h4{
    margin-top: $sizeMedium;
  }
  .countdown{
    color: $themeColor;
  }
  svg{
    @include media-breakpoint-down(lg){
      @include transform(scale(.85));
      margin-top: $sizeMedium;
    }
  }
  &.disabled{
   svg{
     opacity: .15;
   }
  }
  .signature-countdown{
    @include media-breakpoint-down(lg){
      margin-top: -$sizeMedium;
    }
  }
}

.qr-info-wrapper{
  .button-group{
    margin-left: -$sizeSmall;
    @include justify-content(center);
    @include media-breakpoint-up(lg){
      @include justify-content(flex-start);
    }
  }
}

.message{
  text-align: center;
  svg{
    display: block;
    margin: $sizeMedium auto;
    color: $themeColor;
    font-size: 4em;
  }
  p{
    font-size: 1.5em;
  }
}