h1 {
  margin-bottom: 15px;
  font-size: 28px;
  font-weight: 400;
  line-height: 35px;
  color: var(--grey-7);
}

.pinModal,
.passphraseModal,
.togglePassphraseConfirmModal,
.wordModal {
  width: 413px;
  padding: 30px 23px 20px 40px;
  position: relative;
}

.pinModal.getStarted,
.wordModal.getStarted,
.togglePassphraseConfirmModal,
.passphraseModal.getStarted {
  padding: 2em;
}

.pinModal > p,
.togglePassphraseConfirmModal > p,
.wordModal > p {
  margin-bottom: 15px;
  font-size: 13px;
  line-height: 16px;
  color: var(--grey-7);
}

.passphraseModal p:last-child {
  margin-bottom: 10px;
}

.pinPadContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 55px 30px 37px;
}

.learnMoreLink {
  color: var(--link-color) !important;
  cursor: pointer;
  text-decoration: underline !important;
}

.pinPad {
  display: grid;
  grid-template-columns: 80px 80px 80px;
  grid-template-rows: 80px 80px 80px;
  grid-gap: 9px;
  text-align: center;
  font-size: 150%;
}

.pinPadButton {
  border: 1px solid var(--trezor-pin-bt-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey-7);
  font-size: 28px;
}

.pinPadButton:hover {
  border: 1px solid #6397ff;
}

.passphraseModal strong {
  color: var(--error-red);
}

.passwordField {
  margin-bottom: 20px;
  padding: 0 55px 0 37px;
}

.passwordFieldInput {
  font-size: 28px !important;
  line-height: 35px !important;
  letter-spacing: 0.5em;
  color: var(--grey-7);
}

.clearPinButton {
  height: 15px;
  width: 15px;
  background-image: var(--x-grey);
  border: none !important;
  padding: 0 !important;
  transition: none !important;
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--background-back-color) !important;
}

.clearPinButton:hover {
  opacity: 0.85;
}

.closeButton {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 10px;
  width: 10px;
  background-image: var(--x-grey);
  background-size: 10px 10px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.wordSelect {
  min-height: 10em;
}

.label {
  font-family: var(--font-family-regular);
}

.buttons {
  display: flex;
  justify-content: flex-end;
}

.buttons button {
  height: 44px;
}

@media (--xs-viewport) {
  .pinModal,
  .passphraseModal,
  .togglePassphraseConfirmModal,
  .wordModal {
    width: 250px;
  }
}
