/* Niederhauser Consulting branding for the osTicket 1.18.4 client portal. */
:root {
  --nc-ink: #313131;
  --nc-navy: #17273d;
  --nc-blue: #4f72ff;
  --nc-blue-hover: #3458e7;
  --nc-peach: #ffae78;
  --nc-muted: #68727d;
  --nc-surface: #ffffff;
  --nc-soft: #f3f6fb;
  --nc-border: #dbe3ef;
  --nc-radius: 10px;
  --nc-shadow: 0 12px 36px rgb(23 39 61 / 10%);
  --nc-font: Inter, "Segoe UI", Arial, sans-serif;
}
body.nc-client-portal { color: var(--nc-ink); background: var(--nc-soft); font-family: var(--nc-font); line-height: 1.55; }
.nc-client-portal #container { width: min(1120px, calc(100% - 32px)); margin: 24px auto; background: var(--nc-surface); border: 1px solid var(--nc-border); border-radius: 14px; box-shadow: var(--nc-shadow); overflow: hidden; }
.nc-client-portal #header { min-height: 92px; background: var(--nc-surface); border-bottom: 1px solid var(--nc-border); }
.nc-client-portal #logo { padding: 22px 28px; }
.nc-client-portal #logo img { width: min(360px, 65vw); height: auto; }
.nc-client-portal #header p { color: var(--nc-muted); }
.nc-client-portal #header a, .nc-client-portal a { color: var(--nc-blue); }
.nc-client-portal #nav, .nc-client-portal #sub_nav { background: var(--nc-navy); border: 0; }
.nc-client-portal #nav { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; min-height: 42px; height: auto; padding: 6px 10px; box-sizing: border-box; list-style: none; }
.nc-client-portal #nav li { display: block; float: none !important; width: auto !important; margin: 0; padding: 0; }
.nc-client-portal #nav li a, .nc-client-portal #sub_nav li a { color: #fff; font-family: var(--nc-font); }
.nc-client-portal #nav li a { display: block; position: static !important; width: auto !important; height: auto !important; min-height: 0; padding: 7px 14px !important; border-radius: 7px; background-image: none !important; line-height: 1.4; text-decoration: none; }
.nc-client-portal #nav li a img { display: none !important; }
.nc-client-portal #nav li a:focus-visible { outline-color: #fff; }
.nc-client-portal #nav li a:hover, .nc-client-portal #nav li.active a, .nc-client-portal #nav li a.active, .nc-client-portal #sub_nav li a:hover, .nc-client-portal #sub_nav li a.active { background: var(--nc-blue) !important; color: #fff !important; text-shadow: none; }
.nc-client-portal #content { padding: 32px; }
.nc-client-portal #landing_page > .sidebar { display: none; }
.nc-client-portal #landing_page > .main-content { float: none; width: 100%; box-sizing: border-box; }
.nc-client-portal h1, .nc-client-portal h2, .nc-client-portal h3 { color: var(--nc-navy); font-family: var(--nc-font); }
.nc-client-portal input[type="text"], .nc-client-portal input[type="email"], .nc-client-portal input[type="password"], .nc-client-portal select, .nc-client-portal textarea { border: 1px solid var(--nc-border); border-radius: 7px; font: inherit; }
.nc-client-portal input:focus, .nc-client-portal select:focus, .nc-client-portal textarea:focus, .nc-client-portal a:focus-visible, .nc-client-portal button:focus-visible { outline: 3px solid rgb(79 114 255 / 30%); outline-offset: 2px; }
.nc-client-portal input[type="submit"], .nc-client-portal input[type="button"], .nc-client-portal button, .nc-client-portal .button, .nc-client-portal .btn { background: var(--nc-blue); border: 1px solid var(--nc-blue); border-radius: 7px; color: #fff; font-family: var(--nc-font); font-weight: 650; }
.nc-client-portal input[type="submit"]:hover, .nc-client-portal button:hover, .nc-client-portal .button:hover, .nc-client-portal .btn:hover { background: var(--nc-blue-hover); border-color: var(--nc-blue-hover); color: #fff; }
.nc-client-portal #login { border: 1px solid var(--nc-border); border-radius: var(--nc-radius); }
.nc-client-portal #login h1 { border-bottom-color: var(--nc-peach); }
.nc-client-portal #footer { background: var(--nc-navy); color: #fff; padding: 22px 28px; }
.nc-client-portal #footer a { color: #fff; }
.nc-client-portal .nc-footer__meta { opacity: .78; font-size: .9rem; }
@media (max-width: 760px) {
  .nc-client-portal #container { width: 100%; margin: 0; border: 0; border-radius: 0; }
  .nc-client-portal #header { min-height: 72px; }
  .nc-client-portal #logo { padding: 18px 20px; }
  .nc-client-portal #content { padding: 22px 18px; }
}