/* on wide displays, display the key and the value next to each other */
.appauth-row-key {
  display: inline-block !important;
}
.appauth-row-value {
  display: inline-block !important;
}

@media screen and (max-width: 1039px) {
  /* BE-Login Portal injects this very specific CSS selector (without the appauth-button class selector). The ID
     selector on #mobile-enrollment-show-qr-code-button below is somehow less specific than this one and the ID
     selector doesn't apply any more. We need an even more specific CSS selector in order to override the one from
     the BE-Login Portal, so this one duplicates the selector and adds the appauth-button class to it */
  .belogin #content-col-main form fieldset a.appauth-button[href*="/manage/"] {
    font-size: 1em !important;
  }

  .appauth-button, #mobile-enrollment-button, #mobile-enrollment-show-qr-code-button, #new-enrollment-button {
    color: #323232 !important;
    font-weight: normal !important;
    padding: 12px !important;
    line-height: 1.3em !important;
    font-size: 1em !important;
  }

  /* On narrow / mobile displays, we want to show the key above the value, just like it is done for other
     dictionary-like UIs */
  .appauth-row-key {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
  }
  .appauth-row-value {
    display: block !important;
    width: 100% !important;
  }
}