/* ============================================================
   ALPNEXA — caddy-security (authcrunch) Custom CSS
   Brand: Alpnexa | Navy #004C7F | Teal #00B6C9
   Loaded via:  ui { custom css path /etc/caddy/branding/caddy-security.css }

   Verified against the live downloads.alpnexa.com DOM and the
   compiled CSS bundles at /caddy-security/assets/css/{login,
   portal,generic}.css. Class names below are the actual ones the
   plugin emits — every selector has been ground-truthed.

   Templates covered:
     login.css   → /caddy-security/login
     portal.css  → /caddy-security/portal/  (post-auth dashboard)
     generic.css → /caddy-security/{register,recover,…} status pages

   Shared skeleton:    .app-page  >  .app-content  > (template card)
   Login card:         .app-container
   Generic card:       .app-content > div.bg-white      (Tailwind utility soup)
   Portal card:        .app-container.app-portal       (varies by build)
   ============================================================ */

:root {
  --alp-navy:       #004C7F;
  --alp-navy-dark:  #133E5D;
  --alp-navy-deep:  #0E2A40;
  --alp-teal:       #00B6C9;
  --alp-teal-hover: #00D4E8;
  --alp-teal-press: #009BAA;
  --alp-teal-dark:  #00899A;
  --alp-teal-alt:   #1297AB;
  --alp-text:       #1A2A3A;
  --alp-hint:       #A0AAB4;
  --alp-annot:      #8892A0;
  --alp-divider:    #E4E8EC;
  --alp-bg-soft:    #F7F9FB;
  --alp-bg-card:    #EEF3F8;
}

/* ============================================================
   1. Page background — overrides Tailwind's `html.bg-blue-100`
   ============================================================ */
html, html.h-full, html.bg-blue-100 {
  background:
    radial-gradient(circle at 80% 0%, rgba(0,182,201,0.18), transparent 55%),
    linear-gradient(135deg, var(--alp-navy) 0%, var(--alp-navy-dark) 100%) !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: var(--alp-text);
  min-height: 100%;
}
body, body.h-full {
  background: transparent !important;
  min-height: 100vh;
}

/* ============================================================
   2. Page shell (every template)
   ============================================================ */
.app-page {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 32px 16px !important;
}
.app-content {
  width: 100% !important;
  margin: 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 12px !important;
}

/* ============================================================
   3. LOGIN template — `.app-container`
   ============================================================ */
.app-container {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 40px 36px !important;
  width: 100% !important;
  max-width: 420px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.20) !important;
  position: relative;
}

/* ---- Logo + auto-injected tagline ---- */
.logo-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
}
.logo-img {
  display: block !important;
  max-height: 56px !important;
  width: auto !important;
  margin: 0 auto 8px !important;
  filter: none !important;
}
.logo-box::after {
  content: "Secure. Private. Yours.";
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--alp-annot);
  margin-top: 8px;
}
.logo-txt {
  margin: 18px 0 0 !important;
  text-align: center !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: var(--alp-navy-dark) !important;
}

/* ---- SSO authenticator buttons (`#authenticators` row) ---- */
#authenticators {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-top: 18px !important;
}
.app-login-btn-box {
  display: flex !important;
  align-items: stretch !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: var(--alp-teal) !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 12px rgba(0,182,201,0.25) !important;
  cursor: pointer;
}
.app-login-btn-box:hover {
  background: var(--alp-teal-hover) !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,182,201,0.40) !important;
}
.app-login-btn-box:active { background: var(--alp-teal-press) !important; transform: translateY(0); }

/* The icon column (Tailwind: `bg-[#324960] rounded-l-md p-4`) */
.app-login-btn-box > div:first-child {
  background: var(--alp-navy) !important;
  color: #FFFFFF !important;
  padding: 14px 18px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 22px !important;
  flex: 0 0 auto !important;
}
.app-login-btn-box > div:first-child i { font-size: 24px !important; }

.app-login-btn-txt {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
}
.app-login-btn-txt span {
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  line-height: 1.2 !important;
}
.app-login-btn-txt span {
  font-size: 0 !important;
}
.app-login-btn-txt span::after {
  content: "Continue with Authentik";
  display: inline-block;
  font-size: 14px !important;
  line-height: 1.2 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
}

/* ---- Form inputs (when local backend with username/password is used) ---- */
.app-inp-box {
  position: relative;
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: stretch !important;
  border-radius: 8px !important;
  border: 1px solid var(--alp-divider) !important;
  background: #FFFFFF !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
  overflow: hidden;
}
.app-inp-box:focus-within {
  border-color: var(--alp-teal) !important;
  box-shadow: 0 0 0 2px rgba(0,182,201,0.20) !important;
}
.app-inp-prf-img {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 12px !important;
  background: var(--alp-bg-soft) !important;
  color: var(--alp-navy) !important;
  border-right: 1px solid var(--alp-divider) !important;
}
.app-inp-prf-img i { font-size: 18px !important; }

.app-inp-txt,
.app-inp-sel {
  flex: 1 1 auto !important;
  border: none !important;
  background: transparent !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  color: var(--alp-text) !important;
  outline: none !important;
}
.app-inp-txt::placeholder { color: var(--alp-hint) !important; }
.app-inp-sel { appearance: none; cursor: pointer; }

.app-inp-lbl {
  display: block !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--alp-annot) !important;
  margin: 12px 0 4px !important;
}

/* ---- Primary / secondary buttons (login form) ---- */
.app-btn-pri,
button.app-btn-pri,
input.app-btn-pri,
a.app-btn-pri {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 48px !important;
  background: var(--alp-teal) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #FFFFFF !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  letter-spacing: 0.02em !important;
  cursor: pointer;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0,182,201,0.25) !important;
  transition: all 0.2s ease !important;
}
.app-btn-pri:hover {
  background: var(--alp-teal-hover) !important;
  box-shadow: 0 6px 20px rgba(0,182,201,0.40) !important;
  transform: translateY(-1px);
}
.app-btn-pri:active { background: var(--alp-teal-press) !important; transform: translateY(0); }

.app-btn-sec,
a.app-btn-sec,
button.app-btn-sec {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 44px !important;
  background: transparent !important;
  border: 1px solid var(--alp-teal) !important;
  border-radius: 10px !important;
  color: var(--alp-teal-dark) !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-decoration: none !important;
  margin-top: 8px !important;
  transition: all 0.18s ease !important;
}
.app-btn-sec:hover {
  background: rgba(0,182,201,0.08) !important;
  border-color: var(--alp-teal-hover) !important;
  color: var(--alp-teal-hover) !important;
}

/* ============================================================
   4. PORTAL template — post-auth dashboard
   ============================================================ */
/* Portal page uses .app-container too, but with wider max-width
   when many app tiles are present. Override only when the
   portal tile classes are present. */
.app-container:has(.app-portal-btn-box),
.app-container.app-portal {
  max-width: 980px !important;
  padding: 32px 28px !important;
}
.app-container:has(.app-portal-btn-box) > div:not(.logo-box),
.app-container.app-portal > div:not(.logo-box) {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
  gap: 16px !important;
  margin-top: 18px !important;
}

.app-portal-btn-box {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 22px 16px !important;
  border: 1px solid var(--alp-divider) !important;
  border-radius: 12px !important;
  background: #FFFFFF !important;
  text-decoration: none !important;
  color: var(--alp-text) !important;
  transition: all 0.25s ease !important;
  text-align: center;
}
.app-portal-btn-box:hover {
  border-color: var(--alp-teal) !important;
  box-shadow: 0 8px 24px rgba(0,182,201,0.15) !important;
  transform: translateY(-2px);
  color: var(--alp-navy) !important;
}

.app-portal-btn-img {
  flex: 0 0 auto !important;
  width: 56px !important;
  height: 56px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  background: rgba(0,76,127,0.06) !important;
  color: var(--alp-navy) !important;
  font-size: 28px !important;
  transition: all 0.25s ease !important;
}
.app-portal-btn-box:hover .app-portal-btn-img {
  background: rgba(0,182,201,0.14) !important;
  color: var(--alp-teal-dark) !important;
}
.app-portal-btn-img img { width: 36px; height: 36px; object-fit: contain; }
.app-portal-btn-img i  { font-size: 28px; }

.app-portal-btn-txt {
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.3 !important;
  color: inherit !important;
  word-break: break-word;
}

/* ============================================================
   5. GENERIC template — error / status pages
   (register=503, recover=501, etc.)

   DOM:  .app-page > .app-content.md:max-w-2xl
           > div.bg-white.py-8.shadow-lg.sm:rounded-lg
             > div.bg-white > div.max-w-max > main.sm:flex
                 > .logo-img + div > .app-gen-banner-box + .app-gen-btn-box
   ============================================================ */
.app-content > .bg-white,
.app-content > div.bg-white.py-8 {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 16px !important;
  padding: 40px 36px !important;
  width: 100% !important;
  max-width: 600px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.20) !important;
}
/* Inner duplicate bg-white div that caddy-security wraps content in */
.app-content > .bg-white > .bg-white {
  background: transparent !important;
  padding: 0 !important;
  min-height: auto !important;
}

.app-gen-banner-box {
  margin-bottom: 18px !important;
}
.app-gen-banner-header {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  color: var(--alp-navy-dark) !important;
  margin: 0 0 8px !important;
}
.app-gen-banner-message {
  color: var(--alp-text) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.app-gen-banner-message:empty {
  display: none !important;
}

.app-gen-btn-box {
  margin-top: 18px !important;
  display: flex !important;
  gap: 8px !important;
}
.app-gen-btn-txt {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 10px 18px !important;
  background: var(--alp-teal) !important;
  color: #FFFFFF !important;
  border-radius: 10px !important;
  border: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.02em !important;
  text-decoration: none !important;
  box-shadow: 0 4px 12px rgba(0,182,201,0.25) !important;
  transition: all 0.2s ease !important;
}
.app-gen-btn-txt:hover {
  background: var(--alp-teal-hover) !important;
  box-shadow: 0 6px 20px rgba(0,182,201,0.40) !important;
  transform: translateY(-1px);
  color: #FFFFFF !important;
}

/* ============================================================
   6. QR code launcher (`#bookmarks`) + overlay (`#qr`)
   ============================================================ */
#bookmarks,
#qr {
  display: none !important;
}
#bookmarks > div {
  background: rgba(255,255,255,0.10) !important;
  color: #FFFFFF !important;
  border-radius: 0 0 12px 12px !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-top: 0 !important;
  backdrop-filter: blur(8px);
  transition: all 0.18s ease !important;
}
#bookmarks > div:hover {
  background: rgba(255,255,255,0.18) !important;
  color: var(--alp-teal-hover) !important;
}
#qr #qrcode {
  background: #FFFFFF !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18) !important;
  border: none !important;
}

/* ============================================================
   7. Headings, dividers, alerts (used in profile / settings)
   ============================================================ */
.app-container h1,
.app-container h2,
.app-container h3 {
  color: var(--alp-navy-dark) !important;
  font-weight: 700 !important;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.app-container hr {
  border: 0 !important;
  border-top: 1px solid var(--alp-divider) !important;
  margin: 20px 0 !important;
}

.app-container .text-red-600,
.app-container .bg-red-100,
.app-container .alert-error {
  background: #FCEAEA !important;
  color: #B83838 !important;
  border: 1px solid #F4C8C8 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  margin-bottom: 12px !important;
}
.app-container .text-green-600,
.app-container .bg-green-100,
.app-container .alert-success {
  background: rgba(0,182,201,0.08) !important;
  color: var(--alp-teal-dark) !important;
  border: 1px solid rgba(0,182,201,0.30) !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
}

/* ============================================================
   8. Footer attribution clean-up
   ============================================================ */
footer a[href*="github.com/greenpau"],
footer a[href*="authp.github.io"],
.app-container footer a[href*="caddy-security"] {
  display: none !important;
}
.app-container > footer,
.app-content > footer {
  text-align: center;
  margin-top: 18px;
  font-size: 12px;
  color: var(--alp-annot);
}
.app-content > footer::after {
  content: "Powered by Alpnexa";
  display: block;
  margin-top: 4px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.65);
}

/* ============================================================
   9. Selection, scrollbar, reduced motion
   ============================================================ */
::selection      { background: rgba(0,182,201,0.25); color: inherit; }
::-moz-selection { background: rgba(0,182,201,0.25); color: inherit; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,76,127,0.18); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,76,127,0.32); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    transform: none !important;
  }
}

@media (max-width: 640px) {
  .app-page {
    align-items: flex-start !important;
    padding: 18px 12px !important;
  }
  .app-container,
  .app-content > .bg-white,
  .app-content > div.bg-white.py-8 {
    max-width: 100% !important;
    padding: 28px 20px !important;
    border-radius: 12px !important;
  }
  .app-portal .app-portal-btn-box,
  .app-portal-btn-box {
    min-height: 54px !important;
  }
  .app-portal-btn-txt,
  .app-gen-banner-header,
  .app-gen-banner-message {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* ============================================================
   10. Royal-blue restoration override
   Keep this last so AuthCrunch/Tailwind utility classes do not
   reintroduce a heavy dark or plain white default after upgrades.
   ============================================================ */
:root {
  --alp-page-text: #12324C;
  --alp-panel: rgba(235,247,255,0.92);
  --alp-panel-soft: rgba(255,255,255,0.68);
  --alp-panel-border: rgba(7,55,94,0.16);
  --alp-panel-muted: #526E82;
}

html,
html.h-full,
html.bg-blue-100,
body,
body.h-full,
.app-page {
  background:
    radial-gradient(circle at 86% 4%, rgba(255,255,255,0.68), transparent 24rem),
    radial-gradient(circle at 12% 16%, rgba(0,212,232,0.28), transparent 28rem),
    linear-gradient(135deg, #0E63A3 0%, #2A8FD7 48%, #A9DDF5 100%) !important;
  color: var(--alp-page-text) !important;
}

.app-container,
.app-container.app-portal,
.app-content > .bg-white,
.app-content > div.bg-white,
.app-content > div[class*="bg-white"],
.app-content > div[class*="shadow"],
.app-portal {
  background: var(--alp-panel) !important;
  color: var(--alp-page-text) !important;
  border: 1px solid var(--alp-panel-border) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(4,63,106,0.20) !important;
  backdrop-filter: blur(14px);
}

.app-container h1,
.app-container h2,
.app-container h3,
.app-container h4,
.app-content h1,
.app-content h2,
.app-content h3,
.logo-txt,
.app-gen-banner-header,
.app-portal-btn-txt,
.app-portal-btn-txt span,
.app-login-btn-txt,
.app-login-btn-txt span {
  color: #07375E !important;
}

.logo-box::after,
.app-gen-banner-message,
.app-content p,
.app-content li,
.app-content label,
.app-content small,
.app-content .text-gray-500,
.app-content .text-gray-600,
.app-content .text-slate-500,
.app-content .text-slate-600 {
  color: var(--alp-panel-muted) !important;
}

.app-inp-box,
.app-content input,
.app-content select,
.app-content textarea {
  background: rgba(255,255,255,0.76) !important;
  color: #12324C !important;
  border-color: rgba(7,55,94,0.16) !important;
}

.app-inp-prf-img {
  background: rgba(0,182,201,0.10) !important;
  color: #0A4675 !important;
  border-right-color: rgba(7,55,94,0.12) !important;
}

.app-content input::placeholder,
.app-content textarea::placeholder {
  color: rgba(18,50,76,0.54) !important;
}

.app-portal-btn-box,
.app-portal a,
.app-content a[class*="rounded"],
.app-content button,
.app-content .app-gen-btn-txt {
  background: var(--alp-panel-soft) !important;
  border: 1px solid var(--alp-panel-border) !important;
  color: #12324C !important;
}

.app-portal-btn-box:hover,
.app-portal a:hover,
.app-content a[class*="rounded"]:hover,
.app-content button:hover {
  background: rgba(0,182,201,0.15) !important;
  border-color: var(--alp-teal) !important;
  color: #07375E !important;
}

.app-login-btn-box,
.app-gen-btn-txt,
.app-content button[type="submit"],
.app-content input[type="submit"] {
  background: var(--alp-teal) !important;
  color: #FFFFFF !important;
  border-color: var(--alp-teal) !important;
}

.app-login-btn-box:hover,
.app-gen-btn-txt:hover,
.app-content button[type="submit"]:hover,
.app-content input[type="submit"]:hover {
  background: var(--alp-teal-hover) !important;
  border-color: var(--alp-teal-hover) !important;
  color: #FFFFFF !important;
}

.app-login-btn-box .app-login-btn-txt,
.app-login-btn-box .app-login-btn-txt span,
.app-login-btn-box .app-login-btn-txt span::after {
  color: #FFFFFF !important;
}

.app-container hr,
.app-content hr {
  border-color: rgba(7,55,94,0.14) !important;
}

.app-container .text-red-600,
.app-container .bg-red-100,
.app-container .alert-error,
.app-content .text-red-600,
.app-content .bg-red-100 {
  background: #FFF1F2 !important;
  color: #991B1B !important;
  border-color: rgba(248,113,113,0.34) !important;
}

.app-container .text-green-600,
.app-container .bg-green-100,
.app-container .alert-success,
.app-content .text-green-600,
.app-content .bg-green-100 {
  background: rgba(0,182,201,0.12) !important;
  color: #075C83 !important;
  border-color: rgba(0,182,201,0.32) !important;
}

/* ============================================================
   11. Login readability guard
   AuthCrunch login pages use the configured logo plus generated
   provider buttons. Keep this last so bundled Tailwind utilities
   cannot make the sign-in card low-contrast.
   ============================================================ */
.app-container:has(#authenticators) {
  background: rgba(235,247,255,0.94) !important;
  color: #12324C !important;
  border: 1px solid rgba(255,255,255,0.72) !important;
  box-shadow: 0 22px 58px rgba(4,63,106,0.26) !important;
}

.app-container:has(#authenticators) .logo-img {
  max-height: 58px !important;
  filter: none !important;
}

.app-container:has(#authenticators) .logo-txt {
  color: #07375E !important;
  font-weight: 780 !important;
}

.app-container:has(#authenticators) .logo-box::after {
  color: #526E82 !important;
}

.app-container:has(#authenticators) #authenticators a {
  display: block !important;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.app-container:has(#authenticators) .app-login-btn-box {
  background: linear-gradient(135deg, #00899A 0%, #00B6C9 100%) !important;
  border: 1px solid rgba(255,255,255,0.54) !important;
  color: #FFFFFF !important;
  box-shadow: 0 12px 26px rgba(0,137,154,0.28) !important;
}

.app-container:has(#authenticators) .app-login-btn-box:hover {
  background: linear-gradient(135deg, #00A6B8 0%, #00D4E8 100%) !important;
  color: #FFFFFF !important;
}

.app-container:has(#authenticators) .app-login-btn-box > div:first-child {
  background: rgba(0,76,127,0.94) !important;
  color: #FFFFFF !important;
}

.app-container:has(#authenticators) .app-login-btn-box .app-login-btn-txt,
.app-container:has(#authenticators) .app-login-btn-box .app-login-btn-txt span,
.app-container:has(#authenticators) .app-login-btn-box .app-login-btn-txt span::after {
  color: #FFFFFF !important;
  font-weight: 780 !important;
}

#authenticators a,
#authenticators a:visited,
#authenticators a:hover {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

#authenticators .app-login-btn-box {
  background: linear-gradient(135deg, #FFFFFF 0%, #EBF7FF 100%) !important;
  border: 1px solid rgba(0,76,127,0.22) !important;
  color: #07375E !important;
  box-shadow: 0 12px 26px rgba(4,63,106,0.16) !important;
}

#authenticators .app-login-btn-box:hover {
  background: linear-gradient(135deg, #F8FCFF 0%, #DFF4FF 100%) !important;
  color: #07375E !important;
  border-color: rgba(0,182,201,0.55) !important;
}

#authenticators .app-login-btn-box > div:first-child,
#authenticators .app-login-btn-box > div:first-child * {
  background: #004C7F !important;
  color: #FFFFFF !important;
}

#authenticators .app-login-btn-box,
#authenticators .app-login-btn-txt,
#authenticators .app-login-btn-txt span,
#authenticators .app-login-btn-txt span::after {
  color: #07375E !important;
}

.app-container #authenticators .app-login-btn-box .app-login-btn-txt,
.app-container #authenticators .app-login-btn-box .app-login-btn-txt span,
.app-container #authenticators .app-login-btn-box .app-login-btn-txt span::after {
  color: #07375E !important;
}

#authenticators .app-login-btn-txt span::after {
  color: #07375E !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
  text-shadow: none !important;
}

/* — end royal-blue restoration */