/* Additions on top of the ported portal stylesheet.
   Kept in a separate file so the ported one stays a verbatim reference and a
   future re-port does not silently drop our own rules. */

.navbar-inner > .container { position: relative; }
.my_theme_toggle {
  position: absolute; right: 8px; top: 8px;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: #687887; font-size: 23px;
}
.navbar-inner .navbar-nav { padding-right: 36px; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: #17212b; color: #e9edf1; }
html[data-theme="dark"] .tl_page_head {
  background: #17212b; border-color: #334452;
}
html[data-theme="dark"] .as_brand_name,
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] label { color: #e9edf1; }
html[data-theme="dark"] .help-block,
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .as_brand_tagline { color: #afbdca; }
html[data-theme="dark"] a { color: #6ab7ee; }
html[data-theme="dark"] .navbar-tg .nav > li > a { color: #6ab7ee; }
html[data-theme="dark"] .my_theme_toggle { color: #afbdca; }
html[data-theme="dark"] .navbar-nav > li > a:hover,
html[data-theme="dark"] .navbar-nav > li > a:focus { background: #233342; }
html[data-theme="dark"] .form-control {
  color: #e9edf1 !important; background: #22303e !important;
  border-color: #526779 !important;
}
html[data-theme="dark"] .form-control::placeholder { color: #afbdca; opacity: 1; }
html[data-theme="dark"] .form-control:focus { border-color: #6ab7ee !important; }
html[data-theme="dark"] pre,
html[data-theme="dark"] code { background: #22303e; color: #d7e6f2; border-color: #526779; }
html[data-theme="dark"] .alert-warning { background: #3b3422; color: #f2d99e; border-color: #6a5b36; }
html[data-theme="dark"] .alert-danger { background: #422a30; color: #ffb4ab; border-color: #75414a; }
html[data-theme="dark"] .alert-success { background: #213b31; color: #a8e3bf; border-color: #426c54; }
html[data-theme="dark"] .btn-primary { background: #246b93 !important; color: #fff !important; border-color: #398bb9; }
html[data-theme="dark"] .btn-primary:hover { background: #246b93 !important; }
html[data-theme="dark"] .navbar-inner { border-color: #334452; }
html[data-theme="dark"] .tooltip-inner { background: #334452; color: #e9edf1; }

/* The brand block in the column the reference fills with an illustration. */
.as_brand_card {
  text-align: center;
  padding: 24px 12px 8px;
}
.as_brand_logo {
  width: 96px;
  height: 96px;
  /* The source file is a square: the same asset is the home-screen icon, where a
     pre-rounded image would pick up a dark ring from the OS mask. */
  border-radius: 22px;
  display: inline-block;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
}
.as_brand_name {
  margin-top: 18px;
  font-size: 40px;
  line-height: 46px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #222;
}
.as_brand_tagline {
  margin-top: 4px;
  font-size: 15px;
  line-height: 20px;
  color: #8b8f94;
}

/* Below the two-column breakpoint the block sits above the form, where a 96px
   logo and a 40px wordmark are more than the page needs. */
@media (max-width: 991px) {
  .as_brand_card { padding: 8px 12px 16px; }
  .as_brand_logo { width: 64px; height: 64px; border-radius: 15px; }
  .as_brand_name { margin-top: 12px; font-size: 28px; line-height: 32px; }
  .as_brand_tagline { font-size: 14px; }
}

/* Application forms use the available phone width instead of a 700px canvas. */
@media (max-width: 767px) {
  .navbar-tg .nav > li > a { padding-left: 9px; padding-right: 9px; }
  .app_edit_page {
    width: 100%;
    margin: 24px auto;
    overflow-wrap: anywhere;
  }
  .app_edit_page .form-group { margin-left: 0; margin-right: 0; }
  .app_edit_page .col-md-1 { display: none; }
  .app_edit_page .form-control { max-width: 100%; min-width: 0; }
  .app_edit_page .uneditable-input {
    height: auto;
    min-height: 34px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .app_edit_page pre { max-width: 100%; overflow-x: auto; }
}