.approval-control-agreement {
  #agreement-text {
    height: 300px;
    overflow: auto;
    border: 1px solid #ccc;
    padding: 10px;
  }

  .signature-pad-title {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 0;
    color: #333;
  }

  #signature-pad {
    border: 1px solid #ccc;
    margin: 0;
    width: 400px;
    max-width: 100%;
    height: 200px;
    touch-action: none;
  }

  .button-set {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin-top: 10px;
    gap: 10px;
  }

  button.approval-control-button {
    width: auto;
    min-width: 100px;
    max-width: unset;
    height: auto;
    min-height: unset;
    max-height: unset;
    cursor: pointer;
    display: inline-block;
    position: relative;
    margin: 0;
    padding: 10px;
    border: 0;
    border-radius: 2px;
    background-image: unset;
    line-height: 1.45em;
    text-align: center;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;

    &.primary {
      background-color: #17a8e3;
      color: #fff;

      &:hover {
        background-color: #008fca;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6);
      }
    }

    &.secondary {
      background-color: white;
      border: solid 1px #17a8e3;
      color: #17a8e3;

      &:hover {
        background-color: #f0f0f0;
        box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.6);
      }
    }
  }
}