/* TIN Solutions client portal theme */
:root {
  --tin-navy:#0d2340;
  --tin-navy-strong:#07192e;
  --tin-orange:#f28c28;
  --tin-charcoal:#444444;
  --tin-muted:#68778a;
  --tin-surface:#f3f6f9;
  --tin-border:#dce4ec;
}

html { overflow-x:hidden; }

body.customers {
  color:var(--tin-charcoal);
  background:var(--tin-surface);
  font-family:Inter,Arial,Helvetica,sans-serif;
  letter-spacing:0;
  max-width:100%;
  overflow-x:hidden;
}
body.customers #wrapper,
body.customers #content { background:var(--tin-surface); }
body.customers #content { min-height:calc(100vh - 260px); padding-bottom:46px; }
body.customers a { color:#155a9a; }
body.customers a:hover,
body.customers a:focus { color:var(--tin-navy); }

.tin-utility-bar {
  color:#dfe7ef;
  background:var(--tin-navy-strong);
  font-size:12px;
  line-height:38px;
}
.tin-utility-bar .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:38px;
}
.tin-utility-links,
.tin-utility-actions { display:flex; align-items:center; gap:22px; }
.tin-utility-bar a { color:#fff; text-decoration:none; }
.tin-utility-bar a:hover { color:var(--tin-orange); }
.tin-utility-bar i { width:15px; color:var(--tin-orange); text-align:center; }

body.customers .navbar-default.header {
  width:100%;
  max-width:100%;
  min-height:78px;
  margin-bottom:28px;
  background:#fff;
  border:0;
  border-bottom:1px solid var(--tin-border);
  border-radius:0;
  box-shadow:0 4px 16px rgba(13,35,64,.06);
}
body.customers .navbar-default.header .container { min-height:78px; }
body.customers .navbar-default.header .navbar-brand {
  height:78px;
  padding-top:15px;
  padding-bottom:15px;
}
body.customers .navbar-default.header .navbar-brand img {
  width:auto;
  max-width:230px;
  height:48px;
  object-fit:contain;
}
body.customers .navbar-default.header .navbar-nav>li>a {
  min-height:78px;
  padding:29px 15px 24px;
  color:var(--tin-navy);
  font-size:13px;
  font-weight:700;
  line-height:22px;
  white-space:nowrap;
}
body.customers .navbar-default.header .navbar-nav>li>a:hover,
body.customers .navbar-default.header .navbar-nav>li>a:focus,
body.customers .navbar-default.header .navbar-nav>li.active>a {
  color:var(--tin-orange);
  background:transparent;
}
body.customers .navbar-default.header .navbar-nav>li.active>a::after {
  position:absolute;
  right:15px;
  bottom:17px;
  left:15px;
  height:2px;
  content:"";
  background:var(--tin-orange);
}
body.customers .navbar-default.header .client-profile-image-small {
  width:34px;
  height:34px;
  margin-top:-7px;
  border:2px solid #fff;
  box-shadow:0 0 0 2px #d7e0e9;
}
body.customers .navbar-default.header .dropdown-menu {
  padding:8px;
  border:1px solid var(--tin-border);
  border-radius:7px;
  box-shadow:0 14px 30px rgba(13,35,64,.14);
}
body.customers .navbar-default.header .dropdown-menu>li>a {
  padding:9px 12px;
  border-radius:5px;
}
body.customers .navbar-toggle {
  margin-top:20px;
  margin-right:0;
  padding:10px 12px;
  color:#fff;
  background:var(--tin-navy);
  border:0;
  border-radius:6px;
}
body.customers .navbar-toggle:hover,
body.customers .navbar-toggle:focus { background:var(--tin-orange); }
body.customers .navbar-toggle .icon-bar { background:#fff; }
.tin-menu-label {
  display:inline-block;
  margin-left:8px;
  font-size:12px;
  font-weight:700;
  line-height:14px;
  vertical-align:top;
}

body.customers .customer-top-submenu {
  margin:-12px 0 24px;
  padding:8px;
  background:#fff;
  border:1px solid var(--tin-border);
  border-radius:7px;
}
body.customers .customer-top-submenu>li>a {
  padding:8px 12px;
  border-radius:5px;
  font-weight:700;
}

.tin-dashboard { width:100%; }
.tin-dashboard-hero {
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(280px,.75fr);
  gap:32px;
  overflow:hidden;
  margin-bottom:20px;
  padding:34px;
  color:#fff;
  background:var(--tin-navy);
  border-radius:8px;
  box-shadow:0 14px 34px rgba(13,35,64,.16);
}
.tin-dashboard-hero::after {
  position:absolute;
  top:-82px;
  right:-58px;
  width:310px;
  height:310px;
  content:"";
  border:1px solid rgba(255,255,255,.11);
  border-radius:50%;
}
.tin-dashboard-hero__content,
.tin-dashboard-attention { position:relative; z-index:1; }
.tin-eyebrow {
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:15px;
  color:#ffb267;
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.tin-eyebrow::before {
  width:8px;
  height:8px;
  content:"";
  background:var(--tin-orange);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(242,140,40,.16);
}
.tin-dashboard-hero h1 {
  max-width:620px;
  margin:0;
  color:#fff;
  font-size:34px;
  font-weight:800;
  line-height:1.16;
}
.tin-dashboard-hero__lead {
  max-width:650px;
  margin:15px 0 22px;
  color:#d6e0eb;
  font-size:14px;
  line-height:1.7;
}
.tin-dashboard-actions { display:flex; flex-wrap:wrap; gap:10px; }
body.customers .tin-dashboard-actions .btn { min-height:42px; padding:10px 17px; }
.tin-dashboard-attention {
  align-self:stretch;
  padding:18px;
  background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.18);
  border-radius:7px;
}
.tin-dashboard-attention h2 {
  margin:0 0 13px;
  color:#fff;
  font-size:15px;
  font-weight:800;
}
.tin-attention-item {
  display:flex;
  align-items:center;
  gap:12px;
  min-height:62px;
  margin-top:9px;
  padding:11px 12px;
  color:#fff!important;
  background:rgba(255,255,255,.11);
  border-radius:6px;
  text-decoration:none!important;
}
.tin-attention-item__icon {
  display:inline-flex;
  flex:0 0 36px;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  color:var(--tin-orange);
  background:rgba(255,255,255,.12);
  border-radius:6px;
}
.tin-attention-item strong,
.tin-attention-item span { display:block; }
.tin-attention-item strong { color:#fff; font-size:13px; }
.tin-attention-item span span { margin-top:2px; color:#d6e0eb; font-size:11px; }
.tin-attention-clear { padding:18px 10px; color:#d6e0eb; font-size:13px; text-align:center; }

.tin-metric-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-bottom:20px;
}
.tin-metric-card,
.tin-portal-card {
  background:#fff;
  border:1px solid var(--tin-border);
  border-radius:7px;
  box-shadow:0 4px 14px rgba(13,35,64,.04);
}
.tin-metric-card { min-height:126px; padding:19px; }
.tin-metric-card__label {
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--tin-muted);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
}
.tin-metric-card__label i { color:var(--tin-orange); }
.tin-metric-card__value {
  display:block;
  margin-top:12px;
  color:var(--tin-navy);
  font-size:25px;
  font-weight:800;
  line-height:1.1;
  word-break:break-word;
}
.tin-metric-card__note { display:block; margin-top:8px; color:var(--tin-muted); font-size:11px; }

.tin-dashboard-grid {
  display:grid;
  grid-template-columns:minmax(0,1.55fr) minmax(280px,.65fr);
  gap:20px;
}
.tin-portal-card { margin-bottom:20px; padding:22px; }
.tin-card-heading {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  margin-bottom:17px;
}
.tin-card-heading h2,
.tin-card-heading h3 { margin:0; color:var(--tin-navy); font-size:18px; font-weight:800; }
.tin-card-heading p { margin:5px 0 0; color:var(--tin-muted); font-size:12px; line-height:1.55; }
.tin-card-heading a { flex:0 0 auto; color:var(--tin-orange); font-size:12px; font-weight:800; }
.tin-quick-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tin-quick-action {
  display:flex;
  min-height:96px;
  flex-direction:column;
  align-items:flex-start;
  justify-content:space-between;
  padding:14px;
  color:var(--tin-navy)!important;
  background:#f7f9fb;
  border:1px solid var(--tin-border);
  border-radius:6px;
  font-size:12px;
  font-weight:800;
  text-decoration:none!important;
  transition:transform 150ms ease,border-color 150ms ease,background-color 150ms ease;
}
.tin-quick-action:hover,
.tin-quick-action:focus {
  background:#fff8f0;
  border-color:#f5b77b;
  transform:translateY(-1px);
}
.tin-quick-action i { color:var(--tin-orange); font-size:18px; }

body.customers .panel_s .panel-body {
  border-color:var(--tin-border);
  border-radius:7px;
  box-shadow:0 4px 14px rgba(13,35,64,.04);
}
body.customers .btn {
  min-height:38px;
  border-radius:6px;
  font-weight:800;
  letter-spacing:0;
}
body.customers .btn-primary,
body.customers .btn-info { color:#fff; background:var(--tin-orange); border-color:var(--tin-orange); }
body.customers .btn-primary:hover,
body.customers .btn-primary:focus,
body.customers .btn-info:hover,
body.customers .btn-info:focus { color:#fff; background:#d9781d; border-color:#d9781d; }
body.customers .btn-default { color:var(--tin-navy); background:#fff; border-color:#cbd5df; }
body.customers .form-control,
body.customers .bootstrap-select .btn-default {
  min-height:41px;
  border-color:#cbd5df;
  border-radius:5px;
  box-shadow:none;
}
body.customers .form-control:focus,
body.customers .bootstrap-select.open>.btn-default {
  border-color:var(--tin-orange);
  box-shadow:0 0 0 3px rgba(242,140,40,.12);
}
body.customers table.table>thead>tr>th {
  color:var(--tin-navy);
  background:#edf1f5;
  border-bottom-color:#cbd5df;
  font-weight:800;
}
body.customers table.table>tbody>tr:hover>td { background:#fff8f0; }

.tin-login-shell {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(360px,.55fr);
  gap:0;
  overflow:hidden;
  max-width:980px;
  min-height:545px;
  margin:40px auto 20px;
  background:#fff;
  border:1px solid var(--tin-border);
  border-radius:8px;
  box-shadow:0 20px 50px rgba(13,35,64,.12);
}
.tin-login-intro {
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:50px;
  color:#fff;
  background:var(--tin-navy);
}
.tin-login-intro h1 {
  max-width:470px;
  margin:0;
  color:#fff;
  font-size:36px;
  font-weight:800;
  line-height:1.16;
}
.tin-login-intro p { max-width:480px; margin:18px 0 0; color:#d6e0eb; font-size:14px; line-height:1.7; }
.tin-login-points { display:grid; gap:12px; margin-top:30px; }
.tin-login-point { display:flex; align-items:center; gap:11px; color:#fff; font-size:13px; font-weight:700; }
.tin-login-point i {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:32px;
  height:32px;
  color:var(--tin-orange);
  background:rgba(255,255,255,.09);
  border-radius:6px;
}
.tin-login-form { display:flex; flex-direction:column; justify-content:center; padding:45px; }
.tin-login-form h2 { margin:0 0 7px; color:var(--tin-navy); font-size:25px; font-weight:800; }
.tin-login-form__lead { margin:0 0 24px; color:var(--tin-muted); font-size:13px; line-height:1.55; }
.tin-login-form .panel_s,
.tin-login-form .panel_s .panel-body { margin:0; padding:0; border:0; box-shadow:none; }

body.customers .footer {
  width:100%;
  max-width:100%;
  height:auto;
  min-height:0;
  padding:30px 0;
  color:#c7d1de;
  background:var(--tin-navy-strong);
  border:0;
}
.tin-footer-grid { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.tin-footer-brand strong { display:block; color:#fff; font-size:14px; }
.tin-footer-brand span { display:block; margin-top:5px; font-size:11px; }
.tin-footer-links { display:flex; flex-wrap:wrap; gap:18px; }
body.customers .footer a { color:#fff; font-size:12px; font-weight:700; }
body.customers .footer a:hover { color:var(--tin-orange); }

@media (max-width:991px) {
  .tin-dashboard-hero,
  .tin-dashboard-grid,
  .tin-login-shell { grid-template-columns:1fr; }
  .tin-metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .tin-login-shell { max-width:690px; }
  .tin-login-intro,
  .tin-login-form { padding:38px; }
  body.customers .navbar-default.header .navbar-nav>li>a {
    padding-right:10px;
    padding-left:10px;
    font-size:12px;
  }
}

@media (max-width:767px) {
  .tin-utility-bar { display:none; }
  body.customers .navbar-default.header { min-height:72px; margin-bottom:18px; }
  body.customers .navbar-default.header .container,
  body.customers .navbar-default.header .navbar-header { min-height:72px; }
  body.customers .navbar-default.header .navbar-brand {
    height:72px;
    max-width:calc(100% - 92px);
    padding-top:14px;
  }
  body.customers .navbar-default.header .navbar-brand img { max-width:180px; height:42px; }
  body.customers .navbar-default.header .navbar-collapse {
    max-height:calc(100vh - 86px);
    margin:0;
    padding:10px 0 14px;
    background:#fff;
    border-top:1px solid var(--tin-border);
    box-shadow:0 14px 24px rgba(13,35,64,.12);
  }
  body.customers .navbar-default.header .navbar-nav { margin:0; }
  body.customers .navbar-default.header .navbar-nav>li>a {
    min-height:44px;
    margin:3px 10px;
    padding:11px 13px;
    border-radius:5px;
    font-size:13px;
  }
  body.customers .navbar-default.header .navbar-nav>li>a:hover,
  body.customers .navbar-default.header .navbar-nav>li>a:focus,
  body.customers .navbar-default.header .navbar-nav>li.active>a {
    color:var(--tin-navy);
    background:#fff4e8;
  }
  body.customers .navbar-default.header .navbar-nav>li.active>a::after { display:none; }
  body.customers .container { width:100%; padding-right:14px; padding-left:14px; }
  .tin-dashboard-hero { gap:22px; padding:24px 20px; border-radius:7px; }
  .tin-dashboard-hero h1 { font-size:28px; }
  .tin-dashboard-actions .btn { width:100%; }
  .tin-metric-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .tin-metric-card { min-height:118px; padding:15px; }
  .tin-metric-card__value { font-size:21px; }
  .tin-portal-card { padding:18px; }
  .tin-card-heading { flex-direction:column; }
  .tin-login-shell { min-height:0; margin:18px auto 8px; border-radius:7px; }
  .tin-login-intro,
  .tin-login-form { padding:28px 22px; }
  .tin-login-intro h1 { font-size:28px; }
  .tin-footer-grid { align-items:flex-start; flex-direction:column; }
  .tin-footer-links { gap:12px 16px; }
  body.customers .table-responsive { border:0; }
}

@media (max-width:430px) {
  .tin-metric-grid,
  .tin-quick-actions { grid-template-columns:1fr; }
  .tin-metric-card { min-height:0; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
  }
}
