$gray: #aaa;
$red: red;
$size_small: 14px;
$size_tiny: 12px;


.ui-dialog .ui-dialog-content.withdraw-dialog {
  background: #fff;
  padding: 0;
  overflow-y: scroll;

  .explanation {
      color: $gray;
      font-size: $size_small;
  }

  .menu {
    padding: 5px 10px;

    > * {
      display: block;
      margin: 10px 0;
    }
  }

  .verify {
    padding: 5px 10px;
    > * {
      display: block;
    }
    .title {
      margin: 10px 0 20px 0;
    }
    input {
      margin: 5px 0 2px 0;
      width: 70%;
    }
    button {
      margin-top: 15px;
    }
    .errors {
      height: $size_tiny;
      .error {
        font-size: $size_tiny;
        color: $red;
      }
    }
  }

  .standard {
    height: calc(100% - 22px);
    z-index: 0;
    iframe {
      width: 100%;
      height: 100%;
      border: none;
    }
    .rotating-logo {
      position: absolute;
      top: 100px;
      left: calc(50% - 100px);
      width: 200px;
      height: 200px;
      background:url(../images/binary-symbol-logo.svg) center center no-repeat;
      background-size: 100% 100%;
      animation: withdraw-rotate 1.4s linear infinite;
    }
    .back-arrow {
      padding: 5px 0 0 5px;
      display: inline-block;
    }
  }

  .transfer {
    padding: 10px;
    .title {
      margin: 10px 0 2px 0;
      &:first-of-type {
        display: inline-block;
        margin: 10px 20px 20px 0;
      }
    }
    input.account {
      width: 200px;
    }
    input.amount {
      width: 70px;
    }

    button {
      display: block;
      margin: 20px 0 0;
    }
    .error {
      margin: 2px 0 0 0;
      display: block;
      font-size: $size_tiny;
      color: $red;
    }
  }

  .agent {
    padding: 10px;
    .title {
      display: block;
      margin: 10px 0 5px 0;
    }
    select + .ui-selectmenu-button {
      font-size: $size_small;
      width: 60%;
    }
    .commission {
      color: $gray;
      font-size: $size_small;
      line-height: 2.2em;
      display: inline-block;
      vertical-align: top;
      padding:0 0 0 5px;
    }
    .amount {
      font-size: $size_small;
      .titles{
        margin: 10px 0 5px 0;
        span {
          display: inline-block;
          width: 200px;
        }
      }
      .fields {
        input {
          width: 50px;
          display: inline-block;
          margin: 0 117px 0 0;
          &[disabled] {
            border-color: $gray;
            color: $gray;
          }
        }
      }

    }
    .hint {
      display: block;
      color: $gray;
      font-size: $size_tiny;
    }
    textarea {
      font-size: $size_small;
      outline: 0;
      display: block;
      width: 70%;
      border: 1px solid #ccc;
      resize: none;
    }
    .error {
      margin: 2px 0 0 0;
      display: block;
      font-size: $size_tiny;
      color: $red;
    }
    button.submit {
      margin: 15px 0 15px 0;
    }
    .disclaimer {
      font-size: $size_tiny;
      color: $gray;
      display: block;
      line-height: 1.5em;
    }
  }

  .agent-confirm {
    padding: 10px;
    div {
      margin: 10px 0;
    }
    button {
      display: block;
      margin: 30px 0 15px 0;
    }
    .disclaimer {
      font-size: $size_tiny;
      color: $gray;
      display: block;
      line-height: 1.5em;
    }
  }

  .agent-done, .transfer-done {
    padding: 10px;
    div {
      margin: 10px 0;
      &:first-child {
        margin-bottom: 20px;
      }
    }
  }

  .back-arrow {
    display: block;
    color: $gray;
    font-size: $size_tiny;
    cursor: pointer;
    padding-bottom: 10px;
    > span {
      display: inline-block;
      position: relative;
    }
  }
}

.withdraw-dialog-ul {
  font-size: $size_small;
  max-height: 300px;
}

@keyframes withdraw-rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
