/*
 * WSD HostBill client theme
 * Based on HostBill 2019, branded for Webshop-Danmark.
 */
:root {
  --wsd-blue: #82c7ec;
  --wsd-blue-dark: #3b91c7;
  --wsd-orange: #d64a2c;
  --wsd-orange-dark: #b93b22;
  --wsd-ink: #293746;
  --wsd-ink-soft: #405364;
  --wsd-muted: #70808d;
  --wsd-line: #dce5eb;
  --wsd-soft: #f3f7fa;
  --wsd-white: #ffffff;
  --wsd-shadow: 0 12px 30px rgba(39, 56, 70, .09);
}

html { background: var(--wsd-soft); }
body.template_wsd {
  background: var(--wsd-soft);
  color: var(--wsd-ink);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif !important;
}
body.template_wsd::before {
  content: "";
  position: fixed;
  z-index: 1200;
  top: 0;
  right: 0;
  left: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--wsd-blue-dark) 0 68%, var(--wsd-orange) 68% 100%);
}
body.template_wsd a { color: var(--wsd-blue-dark); }
body.template_wsd a:hover { color: var(--wsd-orange); }

/* Main HostBill navbar */
body.template_wsd .navbar.fixed-top {
  top: 5px;
  height: 82px;
  background: #fff;
  border: 0;
  border-bottom: 1px solid var(--wsd-line);
  box-shadow: 0 5px 18px rgba(39, 56, 70, .08);
}
body.template_wsd .navbar .navbar-left {
  flex-basis: 260px;
  width: 260px;
  padding: 8px 16px;
  background: #fff;
  border-right: 1px solid var(--wsd-line);
  border-bottom: 0;
}
body.template_wsd .navbar .navbar-left .navbar-brand {
  height: 66px;
  width: 205px;
  margin: 0;
  display: flex;
  align-items: center;
}
body.template_wsd .navbar .navbar-left .navbar-brand img {
  width: 100%;
  max-width: 205px;
  max-height: 60px;
  object-fit: contain;
}
body.template_wsd .navbar .navbar-left .btn-left-navbar {
  color: var(--wsd-ink);
  margin: 3px;
}
body.template_wsd .navbar .navbar-left .btn-left-navbar:hover { color: var(--wsd-orange); }
body.template_wsd .navbar .navbar-body {
  background: #fff;
  border-bottom: 0;
}
body.template_wsd .navbar .navbar-body .navbar-search .input-group,
body.template_wsd .navbar .navbar-body .navbar-search .input-group input,
body.template_wsd .navbar .navbar-body .navbar-search .input-group .input-group-text {
  background: #fff;
}
body.template_wsd .navbar .navbar-body .navbar-search .input-group {
  border-left: 0;
}
body.template_wsd .navbar .navbar-body .navbar-search .input-group input {
  color: var(--wsd-ink);
  font-size: 15px;
}
body.template_wsd .navbar .navbar-body .navbar-menu .nav-link {
  color: var(--wsd-ink-soft);
  background: #fff;
  border-left-color: var(--wsd-line);
}
body.template_wsd .navbar .navbar-body .navbar-menu .nav-link:hover:not(.active,.disabled) {
  opacity: 1;
  color: var(--wsd-orange);
  background: rgba(130,199,236,.11);
}
body.template_wsd .navbar-order .btn,
body.template_wsd .button-add-service {
  background: var(--wsd-orange) !important;
  border-color: var(--wsd-orange) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(214,74,44,.20);
}
body.template_wsd .navbar-order .btn:hover,
body.template_wsd .button-add-service:hover {
  background: var(--wsd-orange-dark) !important;
  border-color: var(--wsd-orange-dark) !important;
}

/* Sidebar */
body.template_wsd .sidebar {
  top: 87px;
  width: 260px !important;
  min-height: calc(100vh - 87px);
  background: var(--wsd-ink);
  border-right: 0;
  box-shadow: 7px 0 22px rgba(39,56,70,.08);
}
body.template_wsd .sidebar .sidebar-wrap { width: 260px; }
body.template_wsd .sidebar .nav-item.nav-item-head .nav-link {
  background: #344858;
  color: rgba(255,255,255,.82);
}
body.template_wsd .sidebar .nav-item > .nav-link {
  color: rgba(255,255,255,.67);
  border-radius: 8px;
}
body.template_wsd .sidebar .nav-item > .nav-link > .material-icons { color: var(--wsd-blue); }
body.template_wsd .sidebar .nav-item > .nav-link:hover:not(.active) {
  color: #fff;
  background: rgba(130,199,236,.13);
}
body.template_wsd .sidebar .nav-item > .nav-link.active,
body.template_wsd .sidebar .nav-item .nav-subnav .nav-item > .nav-link.active {
  color: #fff;
  background: var(--wsd-orange);
  box-shadow: 0 5px 15px rgba(214,74,44,.22);
}
body.template_wsd .sidebar .nav-item > .nav-link.active .material-icons { color:#fff; }
body.template_wsd .sidebar .nav-item .nav-subnav { background: #23323e; }
body.template_wsd .sidebar .nav-item .nav-subnav .nav-item > .nav-link {
  background: transparent;
  color: rgba(255,255,255,.62);
}
body.template_wsd .sidebar .nav-item .nav-subnav .nav-item > .nav-link:hover:not(.active,.disabled) {
  background: rgba(130,199,236,.11);
  color: #fff;
}

/* Page canvas */
@media (min-width: 994px) {
  body.template_wsd .body-content,
  body.template_wsd .footer-content { margin-left: 260px; }
  body.template_wsd.sidenav-toggled .body-content,
  body.template_wsd.sidenav-toggled .footer-content { margin-left: 0; }
  body.template_wsd.sidenav-toggled .navbar .navbar-left { width: 76px; }
}
body.template_wsd .section-main {
  max-width: 1320px !important;
  margin: calc(30px + 87px) auto 30px !important;
  padding: 32px 28px 45px !important;
}
body.template_wsd .section-main > h1,
body.template_wsd .section-account-header h1,
body.template_wsd h1 { color: var(--wsd-ink); font-weight: 650; }
body.template_wsd .section-account-header {
  margin-bottom: 22px;
  padding: 22px 25px;
  border-left: 5px solid var(--wsd-orange);
  border-radius: 9px;
  background: linear-gradient(135deg,#fff 0%,#f3f9fc 100%);
  box-shadow: var(--wsd-shadow);
}
body.template_wsd .section-account-header h1 { margin: 0; }

/* Cards, widgets and tables */
body.template_wsd .card,
body.template_wsd .widget,
body.template_wsd .panel,
body.template_wsd .box,
body.template_wsd .table-borders,
body.template_wsd .content-box,
body.template_wsd .list-group,
body.template_wsd .domain-box {
  border: 1px solid var(--wsd-line) !important;
  border-radius: 10px !important;
  background: #fff;
  box-shadow: var(--wsd-shadow);
}
body.template_wsd .card-header,
body.template_wsd .widget-header,
body.template_wsd .panel-heading {
  color: var(--wsd-ink);
  border-bottom-color: var(--wsd-line);
  background: linear-gradient(180deg,#fff,#f6fafc);
}
body.template_wsd .table { color: var(--wsd-ink); background:#fff; }
body.template_wsd .table thead th {
  color: var(--wsd-ink);
  background: #eaf5fa;
  border-bottom: 2px solid var(--wsd-blue);
}
body.template_wsd .table td,
body.template_wsd .table th { border-color: var(--wsd-line); }
body.template_wsd .table-hover tbody tr:hover { background: rgba(130,199,236,.10); }

/* Buttons and badges */
body.template_wsd .btn {
  border-radius: 7px;
  font-weight: 600;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
body.template_wsd .btn:hover { transform: translateY(-1px); }
body.template_wsd .btn-primary,
body.template_wsd .badge-primary,
body.template_wsd .page-item.active .page-link {
  background-color: var(--wsd-orange) !important;
  border-color: var(--wsd-orange) !important;
  color:#fff !important;
}
body.template_wsd .btn-primary:hover {
  background-color: var(--wsd-orange-dark) !important;
  border-color: var(--wsd-orange-dark) !important;
}
body.template_wsd .btn-success,
body.template_wsd .btn-info,
body.template_wsd .badge-info {
  background-color: var(--wsd-blue-dark) !important;
  border-color: var(--wsd-blue-dark) !important;
  color:#fff !important;
}
body.template_wsd .text-primary { color: var(--wsd-orange) !important; }
body.template_wsd .icon-info-color { color: var(--wsd-blue-dark) !important; }

/* Forms */
body.template_wsd .form-control,
body.template_wsd .custom-select,
body.template_wsd input,
body.template_wsd select,
body.template_wsd textarea {
  border-color: #cfdbe2;
  border-radius: 7px;
}
body.template_wsd .form-control:focus,
body.template_wsd input:focus,
body.template_wsd select:focus,
body.template_wsd textarea:focus {
  border-color: var(--wsd-blue-dark) !important;
  box-shadow: 0 0 0 .2rem rgba(59,145,199,.14) !important;
}

/* Login and password pages */
body.template_wsd .section-signin,
body.template_wsd .section-passreminder {
  min-height: calc(100vh - 160px);
  padding: 55px 20px;
  background:
    radial-gradient(circle at 15% 12%, rgba(130,199,236,.28), transparent 34%),
    radial-gradient(circle at 90% 80%, rgba(214,74,44,.12), transparent 28%);
}
body.template_wsd .form-credentials {
  width: min(460px,100%);
  margin: 0 auto;
  padding: 34px;
  border: 1px solid var(--wsd-line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(39,56,70,.13);
}
body.template_wsd .form-credentials img.image { max-width: 330px; height:auto; }

/* Footer */
body.template_wsd .footer-content { background: var(--wsd-ink); }
body.template_wsd .footer.wsd-footer { color: rgba(255,255,255,.78); background: var(--wsd-ink); }
body.template_wsd .wsd-footer-main {
  display:grid;
  grid-template-columns: minmax(220px,1.5fr) minmax(200px,1fr);
  gap: 38px;
  max-width: 1320px;
  margin:0 auto;
  padding: 36px 28px 24px;
}
body.template_wsd .wsd-footer-brand img { width: 260px; max-width:100%; padding:8px; border-radius:6px; background:#fff; }
body.template_wsd .wsd-footer-brand p { max-width:520px; margin:16px 0 0; }
body.template_wsd .wsd-footer-links .nav { display:flex; flex-wrap:wrap; gap:5px 17px; }
body.template_wsd .wsd-footer-links .nav-link { padding: 4px 0; color:rgba(255,255,255,.78) !important; }
body.template_wsd .wsd-footer-links .nav-link:hover { color:var(--wsd-blue) !important; }
body.template_wsd .wsd-footer-bottom {
  border-top:1px solid rgba(255,255,255,.11);
  padding:15px 28px;
  color:rgba(255,255,255,.60);
  font-size:12px;
  text-align:center;
}

/* Dropdowns */
body.template_wsd .dropdown-menu {
  border:1px solid var(--wsd-line);
  border-radius:9px;
  box-shadow:0 12px 35px rgba(39,56,70,.16);
}
body.template_wsd .dropdown-item:hover,
body.template_wsd .dropdown-item:focus { background:rgba(130,199,236,.13); color:var(--wsd-ink); }

@media (max-width: 993px) {
  body.template_wsd::before { height:4px; }
  body.template_wsd .navbar.fixed-top { top:4px; height:72px; }
  body.template_wsd .navbar .navbar-left { width:100%; flex-basis:auto; padding:6px 12px; }
  body.template_wsd .navbar .navbar-left .navbar-brand { width:230px; height:58px; }
  body.template_wsd .navbar .navbar-left .navbar-brand img { max-width:220px; max-height:54px; }
  body.template_wsd .sidebar { top:76px; min-height:calc(100vh - 76px); }
  body.template_wsd .navbar.sub-bar { margin-top:76px !important; }
  body.template_wsd .section-main { margin:0 auto 20px !important; padding:25px 16px 38px !important; }
}
@media (max-width: 680px) {
  body.template_wsd .wsd-footer-main { grid-template-columns:1fr; padding:30px 18px 22px; }
  body.template_wsd .wsd-footer-bottom { padding:14px 18px; }
  body.template_wsd .section-account-header { padding:18px; }
  body.template_wsd .form-credentials { padding:25px 20px; }
}