/**
 * DIHOST overlay for HostBill 2019.
 * Loaded via before_displayuserheader_02.php. Do not edit templates/2019.
 *
 * Font: Plus Jakarta Sans (CDN via the hook; self-host later).
 * Chrome: Palette A (Ink & Alpine). 2019 colors are compiled — map tokens
 * onto existing classes; unused --dh-* values do nothing.
 *
 * Overrides belong under html.template-dihost.
 */

html.template-dihost {
    --dh-font-family: "Plus Jakarta Sans", Arial, sans-serif;
    --dh-font-size: 1rem;
    --dh-body-bg: #f4f6f8;
    --dh-body-color: #111318;
    --dh-ink-muted: #5c6370;
    --dh-surface: #ffffff;
    --dh-cta: #111318;
    --dh-cta-hover: #2a2e38;
    --dh-brand-primary: #111318;
    --dh-brand-secondary: #6b7280;
    --dh-brand-success: #1b8a5a;
    --dh-brand-info: #0e7c78;
    --dh-brand-warning: #b8860b;
    --dh-brand-danger: #c43a3a;
    --dh-accent: #0e7c78;
    --dh-accent-hover: #0b6562;
    --dh-accent-soft: #e7f4f3;
    --dh-link-color: #0e7c78;
    --dh-border-color: #e4e7eb;
    --dh-border-radius: 8px;
    --dh-btn-radius: 6px;
    --dh-navbar-bg: #ffffff;
    --dh-navbar-height: 70px;
    --dh-menu-bg: #ffffff;
    --dh-menu-item-color: #3a3f4a;
    --dh-menu-width: 270px;
}

/*
 * 2019 compiles Rubik with !important on body / tooltip / popover.
 * Material Icons and Font Awesome keep their own font-family.
 */
html.template-dihost,
html.template-dihost body,
html.template-dihost .navbar,
html.template-dihost .sidebar,
html.template-dihost .btn,
html.template-dihost .form-control,
html.template-dihost .dropdown-menu,
html.template-dihost .card,
html.template-dihost .nav-link,
html.template-dihost .tooltip,
html.template-dihost .popover,
html.template-dihost h1,
html.template-dihost h2,
html.template-dihost h3,
html.template-dihost h4,
html.template-dihost h5,
html.template-dihost h6 {
    font-family: var(--dh-font-family) !important;
}

/* --- Surfaces --- */

html.template-dihost body {
    background-color: var(--dh-body-bg);
    color: var(--dh-body-color);
}

html.template-dihost .main-overlay {
    background-color: var(--dh-body-bg);
}

html.template-dihost h1,
html.template-dihost .h1,
html.template-dihost h2,
html.template-dihost .h2 {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--dh-body-color);
}

html.template-dihost a {
    color: var(--dh-accent);
}

html.template-dihost a:hover {
    color: var(--dh-accent-hover);
}

html.template-dihost .text-primary {
    color: var(--dh-accent) !important;
}

html.template-dihost a.text-primary:hover,
html.template-dihost a.text-primary:focus {
    color: var(--dh-accent-hover) !important;
}

/* --- Navbar --- */

html.template-dihost .navbar {
    background-color: var(--dh-navbar-bg);
}

html.template-dihost .navbar .navbar-left {
    background-color: var(--dh-menu-bg);
    border-right: 1px solid var(--dh-border-color);
}

html.template-dihost .navbar .navbar-left .btn-left-navbar,
html.template-dihost .navbar .navbar-left .btn-toggler {
    color: var(--dh-ink-muted);
}

html.template-dihost .navbar .navbar-left .btn-left-navbar:active,
html.template-dihost .navbar .navbar-left .btn-toggler:active {
    color: var(--dh-body-color);
}

html.template-dihost .navbar .navbar-body {
    border-bottom-color: var(--dh-border-color);
}

html.template-dihost .navbar .navbar-body .navbar-search .input-group,
html.template-dihost .navbar .navbar-body .navbar-search .input-group input,
html.template-dihost .navbar .navbar-body .navbar-search .input-group input:focus,
html.template-dihost .navbar .navbar-body .navbar-search .input-icon-placeholder .input-group-text {
    background: var(--dh-navbar-bg);
}

html.template-dihost .navbar .navbar-body .navbar-menu .nav-link {
    color: var(--dh-ink-muted);
    background: var(--dh-navbar-bg);
    border-left-color: var(--dh-border-color);
}

html.template-dihost .navbar.sub-bar {
    background-color: var(--dh-navbar-bg);
    border-bottom: 1px solid var(--dh-border-color);
    box-shadow: none;
}

html.template-dihost body.sidenav-toggled .navbar .navbar-left {
    background-color: var(--dh-navbar-bg);
}

/* --- Sidebar --- */

html.template-dihost .sidebar {
    background-color: var(--dh-menu-bg);
    border-right: 1px solid var(--dh-border-color);
}

html.template-dihost .sidebar .nav-item.nav-item-head .nav-link {
    background-color: var(--dh-body-bg);
    color: var(--dh-body-color);
}

html.template-dihost .sidebar .nav-item > .nav-link {
    color: var(--dh-menu-item-color);
}

html.template-dihost .sidebar .nav-item > .nav-link > .material-icons {
    color: var(--dh-ink-muted);
}

html.template-dihost .sidebar .nav-item > .nav-link:hover:not(.active) {
    background-color: var(--dh-body-bg);
    color: var(--dh-body-color);
}

html.template-dihost .sidebar .nav-item > .nav-link.active {
    color: var(--dh-body-color);
    background-color: var(--dh-accent-soft);
}

html.template-dihost .sidebar .nav-item > .nav-link.active .material-icons {
    color: var(--dh-accent);
}

html.template-dihost .sidebar .nav-item > .nav-link.nav-link-dropdown:not(.collapsed) {
    background-color: var(--dh-body-bg);
    color: var(--dh-body-color);
}

html.template-dihost .sidebar .nav-item .nav-subnav,
html.template-dihost .sidebar .nav-item .nav-subnav .nav-item > .nav-link {
    background-color: var(--dh-body-bg);
    color: var(--dh-menu-item-color);
}

html.template-dihost .sidebar .nav-item .nav-subnav .nav-item > .nav-link:hover:not(.active, .disabled) {
    background-color: var(--dh-accent-soft);
    color: var(--dh-body-color);
}

html.template-dihost .sidebar .nav-item .nav-subnav .nav-item > .nav-link.active {
    color: var(--dh-body-color);
    background-color: var(--dh-accent-soft);
}

html.template-dihost .sidebar .nav-item .nav-subnav .nav-item > .nav-link.active .material-icons {
    color: var(--dh-accent);
}

html.template-dihost .sidebar .nav-link.nav-link-add {
    color: var(--dh-body-color);
    border: 1px solid var(--dh-border-color);
}

html.template-dihost .sidebar .nav-link.nav-link-add:hover:not(.active, .disabled) {
    background-color: var(--dh-body-bg) !important;
    color: var(--dh-body-color);
}

html.template-dihost .sidebar .sidebar-heading {
    color: var(--dh-ink-muted);
}

html.template-dihost .leftnavigation-box .nav-item {
    background-color: var(--dh-surface);
    color: var(--dh-ink-muted);
}

html.template-dihost .leftnavigation-box .nav-item .nav-link {
    color: var(--dh-ink-muted);
}

html.template-dihost .leftnavigation-box .nav-item:hover .nav-link,
html.template-dihost .leftnavigation-box .nav-item .nav-link.active {
    color: var(--dh-accent);
}

html.template-dihost .info-box .info-box-items {
    background-color: var(--dh-surface);
    border-color: var(--dh-border-color);
}

html.template-dihost .info-box .nav-pills .nav-link {
    background-color: var(--dh-surface);
    color: var(--dh-ink-muted);
}

html.template-dihost .info-box .nav-pills .nav-link.active,
html.template-dihost .info-box .nav-pills .nav-link.active:hover {
    background-color: var(--dh-accent-soft);
    color: var(--dh-accent);
    border-left-color: var(--dh-accent);
}

/* --- Buttons: CTA = ink, not Alpine --- */

html.template-dihost .btn {
    border-radius: var(--dh-btn-radius);
    font-weight: 600;
}

html.template-dihost .btn-primary {
    color: #fff;
    background-color: var(--dh-cta);
    background-image: none;
    border-color: var(--dh-cta);
}

html.template-dihost .btn-primary:hover,
html.template-dihost .btn-primary:focus,
html.template-dihost .btn-primary.focus {
    color: #fff;
    background-color: var(--dh-cta-hover);
    background-image: none;
    border-color: var(--dh-cta-hover);
    box-shadow: none;
}

html.template-dihost .btn-primary:not(:disabled):not(.disabled):active,
html.template-dihost .btn-primary:not(:disabled):not(.disabled).active,
html.template-dihost .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--dh-cta-hover);
    border-color: var(--dh-cta-hover);
}

/* HostBill used green for order/go CTAs. Same ink as primary; badges stay green. */
html.template-dihost .btn-success,
html.template-dihost .navbar-order-toggler.btn-success {
    color: #fff;
    background-color: var(--dh-cta);
    background-image: none;
    border-color: var(--dh-cta);
}

html.template-dihost .btn-success:hover,
html.template-dihost .btn-success:focus,
html.template-dihost .btn-success.focus,
html.template-dihost .navbar-order-toggler.btn-success:hover {
    color: #fff;
    background-color: var(--dh-cta-hover);
    background-image: none;
    border-color: var(--dh-cta-hover);
    box-shadow: none;
}

html.template-dihost .btn-success:not(:disabled):not(.disabled):active,
html.template-dihost .btn-success:not(:disabled):not(.disabled).active,
html.template-dihost .show > .btn-success.dropdown-toggle {
    color: #fff;
    background-color: var(--dh-cta-hover);
    border-color: var(--dh-cta-hover);
}

html.template-dihost .btn-secondary {
    color: var(--dh-body-color);
    background-color: var(--dh-surface);
    background-image: none;
    border-color: var(--dh-border-color);
}

html.template-dihost .btn-secondary:hover,
html.template-dihost .btn-secondary:focus,
html.template-dihost .btn-secondary.focus {
    color: var(--dh-body-color);
    background-color: var(--dh-body-bg);
    border-color: var(--dh-ink-muted);
    box-shadow: none;
}

html.template-dihost .btn-info {
    color: #fff;
    background-color: var(--dh-accent);
    background-image: none;
    border-color: var(--dh-accent);
}

html.template-dihost .btn-info:hover,
html.template-dihost .btn-info:focus {
    color: #fff;
    background-color: var(--dh-accent-hover);
    border-color: var(--dh-accent-hover);
    box-shadow: none;
}

html.template-dihost .page-item.active .page-link {
    color: #fff;
    background-color: var(--dh-cta);
    border-color: var(--dh-cta);
}

html.template-dihost .page-link {
    color: var(--dh-accent);
}

html.template-dihost .page-link:hover {
    color: var(--dh-accent-hover);
}

/* --- Cards --- */

html.template-dihost .card,
html.template-dihost .wbox {
    background-color: var(--dh-surface);
    border-color: var(--dh-border-color);
    border-radius: var(--dh-border-radius);
}

html.template-dihost .card .card-header,
html.template-dihost .card .wbox_header,
html.template-dihost .wbox .wbox_header {
    background-color: var(--dh-surface);
    border-bottom-color: var(--dh-border-color);
}

html.template-dihost .list-group .list-group-item {
    background-color: var(--dh-surface);
    border-color: var(--dh-border-color);
}

/* --- Tabs --- */

html.template-dihost .nav-tabs-wrapper .nav-tabs li.nav-item a.nav-link {
    color: var(--dh-ink-muted);
    font-weight: 500;
}

html.template-dihost .nav-tabs-wrapper .nav-tabs li.nav-item.active a.nav-link {
    color: var(--dh-body-color);
    font-weight: 600;
}

html.template-dihost .nav-tabs-wrapper .nav-tabs .slider .indicator {
    background-color: var(--dh-accent);
}

html.template-dihost .nav-tabs-wrapper .nav-tabs-arrow-left,
html.template-dihost .nav-tabs-wrapper .nav-tabs-arrow-right {
    background: var(--dh-body-bg);
}

/* --- Forms --- */

html.template-dihost .form-control {
    border-color: var(--dh-border-color);
    border-radius: var(--dh-btn-radius);
    background-color: var(--dh-surface);
}

html.template-dihost .form-control:focus {
    border-color: var(--dh-accent);
    box-shadow: 0 0 0 3px var(--dh-accent-soft);
}

html.template-dihost .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--dh-accent);
    border-color: var(--dh-accent);
}

html.template-dihost .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before,
html.template-dihost .custom-radio .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--dh-accent);
    border-color: var(--dh-accent);
}

/* --- Badges / leftover HostBill blue --- */

html.template-dihost .badge-primary {
    color: #fff;
    background-color: var(--dh-accent);
}

html.template-dihost .bg-primary {
    background-color: var(--dh-accent) !important;
}

html.template-dihost .border-primary {
    border-color: var(--dh-accent) !important;
}

html.template-dihost .pageloader-wrapper {
    background-color: var(--dh-body-bg);
}

html.template-dihost .pageloader-wrapper .pageloader-layer:nth-of-type(1) {
    background: var(--dh-accent-soft);
}

html.template-dihost .pageloader-wrapper .pageloader-layer:nth-of-type(2) {
    background: var(--dh-accent);
}

html.template-dihost .ui-pnotify .brighttheme.brighttheme-info {
    background-color: var(--dh-accent) !important;
    border-color: var(--dh-accent) !important;
}

html.template-dihost .ui-pnotify .brighttheme.brighttheme-info .brighttheme-icon-info {
    color: var(--dh-accent);
}

/* --- Tables, dashboard, service, login --- */

html.template-dihost .table-responsive.table-borders,
html.template-dihost .table-responsive.table-radius {
    background-color: var(--dh-surface);
    border-color: var(--dh-border-color);
    border-radius: var(--dh-border-radius);
    overflow: hidden;
}

html.template-dihost .table thead tr {
    background: var(--dh-surface);
}

html.template-dihost .table thead th {
    color: var(--dh-ink-muted);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom-color: var(--dh-border-color);
}

html.template-dihost .table thead th a {
    color: var(--dh-ink-muted);
}

html.template-dihost .table td,
html.template-dihost .table th {
    border-color: var(--dh-border-color);
}

html.template-dihost .table tr {
    border-bottom-color: var(--dh-border-color);
}

html.template-dihost .table tbody tr:hover {
    background-color: var(--dh-body-bg);
}

html.template-dihost .table tbody tr:has(td a[href]:not([href="#"]):not(.btn)) {
    cursor: pointer;
}

html.template-dihost .info-box {
    margin-top: 32px;
}

html.template-dihost .info-box h3,
html.template-dihost .section-dashboard h3 {
    font-weight: 700;
    letter-spacing: -0.02em;
}

html.template-dihost .filters-box {
    background-color: var(--dh-surface);
    border: 1px solid var(--dh-border-color);
}

html.template-dihost .cloud .btn-info {
    color: #fff;
    background-color: var(--dh-cta);
    background-image: none;
    border-color: var(--dh-cta);
    font-weight: 600;
    padding: 0.45rem 1rem;
    margin-top: 0 !important;
}

html.template-dihost .cloud .btn-info:hover,
html.template-dihost .cloud .btn-info:focus {
    color: #fff;
    background-color: var(--dh-cta-hover);
    border-color: var(--dh-cta-hover);
}

html.template-dihost .form-credentials {
    background-color: var(--dh-surface);
    border-color: var(--dh-border-color);
    border-radius: var(--dh-border-radius);
    padding: 40px 36px 36px;
}

html.template-dihost .form-credentials .image {
    background-color: transparent;
}

html.template-dihost .btn-default {
    color: var(--dh-body-color);
    background-color: var(--dh-surface);
    background-image: none;
    border-color: var(--dh-border-color);
}

html.template-dihost .btn-default:hover,
html.template-dihost .btn-default:focus {
    color: var(--dh-body-color);
    background-color: var(--dh-body-bg);
    border-color: var(--dh-ink-muted);
    box-shadow: none;
}

html.template-dihost .dropdown-item:hover,
html.template-dihost .dropdown-item:focus {
    background-color: var(--dh-body-bg);
    color: var(--dh-body-color);
}

html.template-dihost .progress-bar,
html.template-dihost .progress .bar {
    background-color: var(--dh-accent);
}

html.template-dihost .swal-overlay .swal-modal .swal-button.swal-button--confirm {
    background-color: var(--dh-cta);
    background-image: none;
}

html.template-dihost .swal-overlay .swal-modal .swal-button.swal-button--confirm:hover,
html.template-dihost .swal-overlay .swal-modal .swal-button.swal-button--confirm:focus,
html.template-dihost .swal-overlay .swal-modal .swal-button.swal-button--confirm:active {
    background-color: var(--dh-cta-hover);
}

/* --- Tickets, cart (2019 chrome), leftover stock blue --- */

html.template-dihost .comments .comment-body,
html.template-dihost .card.message-box {
    background-color: var(--dh-surface);
    border-color: var(--dh-border-color);
}

html.template-dihost .cart-progress {
    border-top-color: var(--dh-border-color);
}

html.template-dihost .cart-progress .progress-dot {
    color: var(--dh-ink-muted);
}

html.template-dihost .cart-progress .progress-dot.active {
    color: var(--dh-body-color);
}

html.template-dihost .cart-progress .progress-dot.active:before {
    background: var(--dh-cta);
    box-shadow: inset 0 0 0 5px var(--dh-surface);
}

html.template-dihost .cart-progress .progress-dot.completed:before {
    background: var(--dh-accent);
    border-color: var(--dh-accent);
}

html.template-dihost .cart-product:hover:not(.outofstock) {
    border-color: var(--dh-accent);
}

html.template-dihost .ui-slider .ui-slider-handle.ui-state-active,
html.template-dihost .slides .ui-slider-handle.ui-state-active {
    border-color: var(--dh-accent);
}

html.template-dihost .root-boxes .root-box:hover {
    border-color: var(--dh-accent) !important;
}

html.template-dihost .security-myip .security-myip-icon {
    background-color: var(--dh-accent-soft);
    color: var(--dh-accent);
}

html.template-dihost .breadcrumb a:hover {
    color: var(--dh-accent);
}

html.template-dihost .orderpage .services-type li strong,
html.template-dihost .orderpage .services-type li a:hover {
    color: var(--dh-accent);
}

html.template-dihost .orderpage .domain-input button,
html.template-dihost .orderpage .domain-search-summary_submit .btn-primary {
    background-color: var(--dh-cta);
    background-image: none;
    border-color: var(--dh-cta);
}

/* --- Leftover HostBill blue, KB, new ticket --- */

html.template-dihost .btn-outline-primary {
    color: var(--dh-cta);
    background-color: transparent;
    background-image: none;
    border-color: var(--dh-cta);
}

html.template-dihost .btn-outline-primary:hover,
html.template-dihost .btn-outline-primary:focus,
html.template-dihost .btn-outline-primary:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--dh-cta);
    border-color: var(--dh-cta);
    box-shadow: none;
}

html.template-dihost .alert-info {
    color: var(--dh-accent-hover);
    background-color: var(--dh-accent-soft);
    border-color: var(--dh-accent);
}

html.template-dihost .text-info {
    color: var(--dh-accent) !important;
}

html.template-dihost a.text-info:hover,
html.template-dihost a.text-info:focus {
    color: var(--dh-accent-hover) !important;
}

html.template-dihost .badge-info {
    color: #fff;
    background-color: var(--dh-accent);
}

html.template-dihost .nav-pills .nav-link.active,
html.template-dihost .nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--dh-cta);
}

html.template-dihost a.list-group-item {
    color: var(--dh-body-color);
}

html.template-dihost a.list-group-item:hover {
    background-color: var(--dh-body-bg);
    color: var(--dh-body-color);
}

html.template-dihost .section-knowledgebase article {
    background-color: var(--dh-surface);
    border: 1px solid var(--dh-border-color);
    border-radius: var(--dh-border-radius);
    padding: 28px 32px;
}

html.template-dihost #ticketsform {
    background-color: var(--dh-surface);
    border: 1px solid var(--dh-border-color);
    border-radius: var(--dh-border-radius);
    padding: 28px;
    max-width: 760px;
}

html.template-dihost .footer-content {
    border-top: 1px solid var(--dh-border-color);
}

html.template-dihost .breadcrumb {
    background-color: transparent;
    padding-left: 0;
}