/* security.css: settings page for account security (docs/proto-v2/06-pages.md § 2) */

.rb-security-page {
  border: 0;
  padding: 0;
  margin: 0;
  background: var(--c-white);
}

.rb-sec-header {
  margin: 0 0 16px;
  padding: 0 16px;
}

#view h2.rb-sec-title,
.rb-sec-title {
  font: 400 26px/30px var(--font);
  color: var(--c-text);
  margin: 0;
  padding: 0;
}

.rb-sec-subtitle {
  font: 400 13px/20px var(--font);
  color: var(--c-text-2);
  margin: 4px 0 0;
  padding: 0;
}

.rb-security-page .rb-desc a {
  display: inline-block;
  vertical-align: baseline;
}

.rb-sec-notice-wrap {
  margin: 16px 16px 0;
}

.rb-sec-block {
  margin-top: 24px;
  border: 0;
  padding: 0;
}

.rb-sec-block-title {
  font: 500 15px/20px var(--font);
  color: var(--c-text);
  margin: 24px 0 8px;
  padding: 0 16px;
  border: 0;
}

#view .rb-security-page .rb-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 168px;
  column-gap: 24px;
  padding: 8px 16px;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  box-sizing: border-box;
  background: var(--c-white);
}

#view .rb-security-page .rb-item:hover {
  background-color: var(--c-field);
}

#view .rb-security-page .rb-item .rb-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#view .rb-security-page .rb-item .rb-name {
  font: 400 15px/20px var(--font);
  color: var(--c-text);
  cursor: pointer;
}

#view .rb-security-page .rb-item .rb-desc {
  font: 400 13px/20px var(--font);
  color: var(--c-text-2);
  margin-top: 4px;
}

#view .rb-security-page .rb-item .rb-ctl {
  width: 168px;
  height: 20px;
  align-self: start;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  justify-self: end;
}

.rb-no-tfa-count {
  font: 400 15px/20px var(--font);
  color: var(--c-text);
  text-align: right;
}

.rb-ip-val {
  font: 400 15px/20px var(--font);
  font-variant-numeric: tabular-nums;
  color: var(--c-text);
}

#view .rb-security-page .rb-item-ip-add .rb-ctl {
  height: 40px;
}

#sec-ips-list {
  margin: 0;
  padding: 0;
  border: 0;
}

#view .rb-security-page .rb-savebar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
  padding: 16px;
  background: var(--c-field);
  border-radius: 8px;
  box-sizing: border-box;
}

#view .rb-security-page .rb-save-count {
  font: 400 15px/20px var(--font);
  color: var(--c-text);
}

@media (max-width: 767px) {
  #view .rb-security-page .rb-item {
    grid-template-columns: minmax(0, 1fr) 140px;
    column-gap: 12px;
  }
  #view .rb-security-page .rb-item .rb-ctl {
    width: 140px;
  }
}