/* The Key member, guest and back-office skin (Tranche C).
   Load last. Public pages already use the-key-home.css; this brings every other
   screen onto the same palette without a one-off stylesheet per view.
   Only the style-guide colours. Georgia headings, Arial body, 16px, 8px cards, 6px controls. */
body.key-app {
  background: #080604 !important;
  color: #F5EFE4;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}
body.key-app h1, body.key-app h2, body.key-app h3, body.key-app h4,
body.key-app .display-4, body.key-app .modal-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  color: #F5EFE4;
  letter-spacing: 0.01em;
}
body.key-app .bg-light, body.key-app .bg-white, body.key-app .bg-light-subtle,
body.key-app .jumbotron, body.key-app .card, body.key-app .modal-content,
body.key-app .list-group-item, body.key-app .dropdown-menu, body.key-app .offcanvas,
body.key-app .toast, body.key-app .accordion-item, body.key-app .accordion-button {
  background-color: #100E0D !important;
  color: #F5EFE4 !important;
  border-color: rgba(216, 173, 88, 0.22) !important;
}
body.key-app .card, body.key-app .jumbotron, body.key-app .modal-content,
body.key-app .dropdown-menu { border-radius: 8px; }
body.key-app .text-dark, body.key-app .text-black, body.key-app .text-body,
body.key-app .text-muted { color: #D8D0C3 !important; }
body.key-app a { color: #F2D58A; }
body.key-app a:focus-visible, body.key-app button:focus-visible,
body.key-app input:focus-visible, body.key-app select:focus-visible, body.key-app textarea:focus-visible {
  outline: none; box-shadow: 0 0 0 2px #080604, 0 0 0 4px #F2D58A;
}
body.key-app .form-control, body.key-app .form-select, body.key-app select.form-control,
body.key-app textarea.form-control {
  background: #0B0908 !important;
  color: #F5EFE4 !important;
  border: 1px solid rgba(216, 173, 88, 0.35) !important;
  border-radius: 6px !important;
  min-height: 48px;
  font-size: 16px;
}
body.key-app .form-label, body.key-app label { color: #D8D0C3; }
body.key-app .btn, body.key-app .nav-link, body.key-app .navbar-toggler {
  min-height: 44px;
  border-radius: 6px;
}
body.key-app .btn-dark, body.key-app .btn-primary, body.key-app .btn-info,
body.key-app .btn-success, body.key-app .btn-warning {
  background: #D8AD58 !important;
  color: #080604 !important;
  border-color: #D8AD58 !important;
  font-weight: 700;
}
body.key-app .btn-light, body.key-app .btn-outline-light, body.key-app .btn-outline-dark,
body.key-app .btn-secondary {
  background: transparent !important;
  color: #F2D58A !important;
  border: 1px solid #D8AD58 !important;
}
body.key-app .btn-danger { background: #B84452 !important; border-color: #B84452 !important; color: #F5EFE4 !important; }
body.key-app .alert-warning, body.key-app .alert-info { background: rgba(198, 132, 42, 0.14) !important; color: #F3DDBA !important; border-color: #C6842A !important; }
body.key-app .alert-danger { background: rgba(184, 68, 82, 0.16) !important; color: #F2C9CF !important; border-color: #B84452 !important; }
body.key-app .alert-success, body.key-app .alert-primary { background: rgba(62, 155, 117, 0.14) !important; color: #CFEBDD !important; border-color: #3E9B75 !important; }
body.key-app .table { color: #D8D0C3; border-color: rgba(216, 173, 88, 0.15); }
body.key-app .table th { color: #AAA197; font-weight: 400; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; border-color: rgba(216, 173, 88, 0.22); }
body.key-app .table td { border-color: rgba(216, 173, 88, 0.12); vertical-align: middle; }
body.key-app .navbar { background: #080604 !important; border-bottom: 1px solid rgba(216, 173, 88, 0.22); height: auto !important; }
body.key-app .navbar .nav-link, body.key-app .dropdown-item { color: #D8D0C3 !important; display: flex; align-items: center; }
body.key-app .dropdown-item:hover, body.key-app .dropdown-item:focus { background: #080604 !important; color: #F2D58A !important; }
body.key-app #mainpages, body.key-app #key-main { padding-bottom: 48px; }
body.key-app [style*="background-color:white"], body.key-app [style*="background-color: white"],
body.key-app [style*="background:white"], body.key-app [style*="background-color:lightgrey"],
body.key-app [style*="background-color: lightgrey"], body.key-app [style*="background:#fff"],
body.key-app [style*="background-color:#fff"], body.key-app [style*="background-color:#ffffff"], body.key-app [style*="background-color: #ffffff"], body.key-app [style*="background-color: #fff"] {
  background-color: #100E0D !important;
  color: #F5EFE4 !important;
}
body.key-app .key-cookies {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 1100;
  max-width: 720px; margin: 0 auto; background: #100E0D; color: #F5EFE4;
  border: 1px solid rgba(216, 173, 88, 0.35); border-radius: 8px; padding: 20px 22px;
  font-size: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.45);
}
body.key-app .key-cookies p { margin: 0 0 12px; color: #D8D0C3; }
body.key-app .key-cookies .key-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.key-app .key-empty { text-align: center; padding: 48px 16px; color: #AAA197; }
@media (max-width: 767px) {
  body.key-app { font-size: 16px; }
  body.key-app .container, body.key-app .container-fluid { padding-left: 16px; padding-right: 16px; }
  body.key-app .navbar-collapse { padding-bottom: 12px; }
}

/* Live Meeting frame. The video itself still comes from the meeting script;
   this only colours the chrome around it. */
body.key-app #videomeetingpanel,
body.key-app #rtcpanel,
body.key-app .rtcpanel,
body.key-app .meetingpanel,
body.key-app .clientviewport {
  background: #080604 !important;
  color: #F5EFE4 !important;
  border-color: rgba(216, 173, 88, 0.22) !important;
}
body.key-app #chatcontent,
body.key-app #chatcontent div,
body.key-app .largeview,
body.key-app .chatscroll {
  color: #F5EFE4 !important;
  background: #100E0D !important;
}
body.key-app video {
  background: #080604;
  border-radius: 8px;
}
body.key-app .badge.text-bg-primary,
body.key-app .text-bg-primary {
  background: #D8AD58 !important;
  color: #080604 !important;
}

/* Tranche E: pages opened from The Key app (thekeylive.app host) get a way back to the app */
.key-app-return { background: #100E0D; border-bottom: 1px solid rgba(216, 173, 88, .35); padding: 0 16px; }
.key-app-return a { display: inline-flex; align-items: center; min-height: 44px; color: #F2D58A; font: 16px Arial, Helvetica, sans-serif; text-decoration: none; }
.key-app-return a:hover, .key-app-return a:focus-visible { color: #F5EFE4; text-decoration: underline; }