p {
  margin: 0 0 12px 0;
}

.form {
  width: 420px;
}

.txSuccessContainer {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  svg {
    margin-top: 24px;
  }

  code {
    font-size: 10px;

    color: var(--wc-tooltip-button-color);
  }

  p {
    width: 400px;
    text-align: center;

    font-size: 18px;
    color: #7e939b;
    letter-spacing: 0;
    text-align: center;
    line-height: 22px;
  }
}

.approveConnectionContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin-top: 24px;
  margin-bottom: 48px;
  width: 100%;
  margin: auto;

  img {
    margin: auto;
    max-width: 50px;
  }

  .connectionDetails {
    background: var(--wc-connection-details-bg);
    border-radius: 0 0 4px 4px;

    font-size: 16px;
    color: var(--wc-connection-details-color);
    text-align: left;
    padding: 6px 24px;
    margin: auto;
    max-width: 450px;
    min-width: 450px;
    width: 450px;
  }

  .details {
    background: var(--wc-connection-details-bg2);
    padding: 6px 12px;
    margin: 0px -12px;
  }

  .detailsLabel {
    width: 100%;
    text-align: left;
    padding-bottom: 6px;
    border-bottom: 1px solid #626b7d;
    display: flex;
    align-items: center;
    justify-content: space-between;

    svg {
      cursor: pointer;

      path {
        fill: var(--wc-tooltip-button-color);
      }
    }

    label {
      margin-bottom: 0;
    }
  }

  .featuresRow {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
    color: var(--wc-connection-details-color);
    font-family: var(--font-gotham-light);
    padding: 6px 0px 12px 0px;

    label {
      margin-bottom: 0;
    }

    div {
      display: flex;
      flex-direction: column;
      text-align: left;
    }
  }

  .confirmation {
    padding-top: 18px;
    padding: 12px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    svg {
      margin: 0 6px;
      cursor: pointer;
    }

    svg:last-child {
      margin-right: 0;
    }
  }
}

.approveRequestContainer {
  .methodName {
    color: var(--wc-tooltip-button-color);
  }

  .detailRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    font-size: 12px;
    margin: auto;
    width: 100%;

    label {
      margin: 0;
    }

    .scriptHash {
      font-size: 12px;
      color: var(--wc-tooltip-button-color);
      display: flex;
      align-items: center;

      svg {
        cursor: pointer;
        margin-left: 6px;
        max-width: 18px;
      }
    }

    .fee {
      font-size: 12px;
      color: var(--wc-tooltip-button-color);
      display: flex;
      align-items: center;

      svg {
        cursor: pointer;
        margin-left: 6px;

        max-width: 18px;

        path {
          fill: var(--wc-tooltip-button-color);
        }
      }
    }
  }

  .contractName {
    background-color: var(--wc-connection-details-bg2);
    height: 38px;
    display: flex;
    border-radius: 4px 4px 0 0;
    align-items: center;
    padding: 0 24px;
    width: 600px;
    margin: auto;
  }

  .noBorder {
    border: none !important;
  }

  .centered {
    display: flex;
    align-items: center;
  }

  .requestParams {
    font-size: 12px;

    svg {
      cursor: pointer;
    }

    .paramContainer {
      display: flex;
      margin: 12px 0;
      align-items: center;
      justify-content: space-between;

      div {
        display: flex;
        align-items: center;
      }

      svg {
        max-width: 18px;
      }
    }

    .jsonParams {
      display: flex;
      flex-direction: column;
      margin-left: 48px;
      white-space: pre;
      margin-top: -12px;
      font-size: 11px;
      text-overflow: ellipsis;
      overflow-x: hidden;
      align-items: flex-start;
    }

    .index {
      margin-right: 6px;

      background: var(--wc-param-index);
      height: 22px;
      min-height: 22px;
      width: 22px;
      min-width: 22px;
      font-size: 12px;
      color: var(--wc-tooltip-button-color);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 100%;
    }

    .argType {
      padding: 2px 6px;
    }

    div {
      display: flex;
    }
  }
}

.walletConnectIcon {
  svg {
    path {
      fill: rgb(255, 255, 255) !important;
    }
  }
}

.warningDialogue {
  margin-top: 0;
  margin-bottom: 20px;
  width: 100%;
  max-width: 440px;
  text-align: left;
}

.shortParam {
  width: 10px !important;
}

.methodParameter {
  display: flex;
  align-items: center;
  border-radius: 3px;
  margin: 5px;

  .parameterName {
    color: #ffffff;
    padding: 0 6px;
    width: 50px;
    display: inline !important;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .parameterValue {
    background: var(--wc-connection-details-bg2);
    color: var(--wc-connection-details-color);
    padding: 2px;
    margin: 4px;
    border-radius: 4px;
    border: 2px solid;
    justify-content: space-between;
    width: 300px;

    span {
      padding: 6px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  .parameterType {
    color: #ffffff;
    font-weight: 400;
    padding: 3px;
  }
}

.pointer {
  cursor: pointer !important;
}

.radius {
  border-radius: 4px !important;
}

.feeRow {
  border-top: 1px solid #626b7d;
  border-bottom: 1px solid #626b7d !important;
  padding: 6px 24px !important;
  width: 600px !important;
  height: 30px;
  margin-bottom: 12px;
}

.sigRow {
  margin-top: -12px;
  border-top: none !important;
  border-bottom: none !important;
  padding: 6px 24px !important;
  width: auto !important;
  height: 30px;
  color: var(--base-text) !important;

  align-items: center;

  svg {
    margin-left: 4px;
    max-width: 20px;
    path {
      fill: #d355e7 !important;
    }
  }

  div {
    display: flex;
    align-items: center;
  }
}

.singleSigRow {
  border-bottom: none !important;
  padding: 6px 24px !important;
  width: 600px !important;
}

.noPadding {
  padding-bottom: 0px !important;
}

.wcMessageContents {
  word-wrap: break-word;
}

.wantsToCallHeader {
  margin: 12px 24px 24px 24px;
}

.approveTransactionPanel {
  width: 800px;
  margin: auto;
}

.approveTransactionPanelContainer {
  width: 800px;
}

.multiSigRow {
  display: flex;
}

.multiSigColumn {
  display: flex;
  flex-direction: column;
  border-bottom: none !important;
  background: var(--wc-connection-details-bg);
  border-radius: 4px;
  padding: 12px;
  width: 450px;
  margin-top: -12px;

  .multiSigCell:first-child {
    margin-top: 0px;
  }

  .multiSigCell {
    margin-top: 24px;
  }

  .multiSigCell:last-child {
    border-bottom: none;
  }

  .contractRow:last-child {
    border-bottom: none !important;
  }

  .index {
    margin-right: 6px;

    background: var(--wc-param-index);
    height: 22px;
    min-height: 22px;
    width: 22px;
    min-width: 22px;
    font-size: 12px;
    color: var(--wc-tooltip-button-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
  }
}

.transactionDetails {
  background: var(--wc-connection-details-bg);
  border-radius: 0 0 4px 4px;
  font-size: 16px;
  color: var(--wc-connection-details-color);
  text-align: left;
  padding: 6px 24px;
  margin: auto;
  width: 600px;
}

.invocationLoaderContainer {
  width: 100%;
  display: flex;
  justify-content: center;
}

.invocationLoader {
  position: unset !important;
  left: unset !important;
  top: unset !important;
  transform: unset !important;
}
