@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700;800&display=swap");

:root {
    --mg-bg: #121417;
    --mg-surface: #181b20;
    --mg-surface-2: #20242b;
    --mg-border: rgba(255, 255, 255, 0.09);
    --mg-text: #c4c8ce;
    --mg-heading: #f1f3f5;
    --mg-muted: #8f98a6;
    --mg-blue: #3a7afe;
    --mg-blue-hover: #1f63f1;
}

body,
.primary-bg-color {
    background: var(--mg-bg);
    color: var(--mg-text);
    font-family: "Lexend", "Open Sans", Arial, sans-serif;
}

a {
    color: var(--mg-blue);
}

a:hover {
    color: #78a2ff;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    color: var(--mg-heading);
    font-family: "Lexend", "Open Sans", Arial, sans-serif;
    font-weight: 700;
}

.header,
.header .navbar,
.header .main-navbar-wrapper,
.topbar {
    background: var(--mg-bg) !important;
    border-color: var(--mg-border) !important;
}

.header {
    border-bottom: 1px solid var(--mg-border) !important;
}

body #header.header,
body header.header,
body #header .navbar,
body #header .main-navbar-wrapper,
body .main-navbar-wrapper {
    background-color: var(--mg-bg) !important;
}

.magabox-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--mg-heading) !important;
    font-weight: 800;
    letter-spacing: 0;
}

.magabox-logo {
    width: 54px;
    height: 54px;
    max-height: 54px;
    object-fit: contain;
}

.magabox-brand-text {
    color: var(--mg-heading);
    font-size: 18px;
}

.navbar-light .navbar-nav .nav-link,
.navbar-main .navbar-nav .nav-link,
.main-navbar-wrapper .navbar-nav .nav-link,
#nav > li > a,
[id^="Primary_Navbar-"] > a,
[id^="Secondary_Navbar-"] > a,
.topbar,
.topbar a {
    color: #fff !important;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link:focus,
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .nav-link:focus,
#nav > li > a:hover,
#nav > li > a:focus,
[id^="Primary_Navbar-"] > a:hover,
[id^="Primary_Navbar-"] > a:focus,
[id^="Secondary_Navbar-"] > a:hover,
[id^="Secondary_Navbar-"] > a:focus,
.navbar-nav .dropdown-menu a:hover {
    color: var(--mg-blue) !important;
}

#Primary_Navbar-Network_Status {
    display: none !important;
}

.dropdown-menu {
    background: var(--mg-surface);
    border: 1px solid var(--mg-border);
    border-radius: 8px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
}

.dropdown-item,
.dropdown-menu a {
    color: var(--mg-text);
}

.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-menu a:hover,
.dropdown-menu a:focus {
    background: var(--mg-surface-2);
    color: var(--mg-heading);
}

.main-content,
.main-body,
section#main-body {
    background: var(--mg-bg);
}

.card,
.panel,
.tile,
.client-home-panels .panel,
.list-group-item,
.domain-checker-container,
.announcement-single,
.kb-article-item {
    background: var(--mg-surface);
    border-color: var(--mg-border);
    color: var(--mg-text);
    border-radius: 8px;
}

.card-header,
.panel-heading,
.panel-sidebar > .panel-heading,
.list-group-item-action:hover,
.list-group-item-action:focus {
    background: var(--mg-surface-2);
    border-color: var(--mg-border);
    color: var(--mg-heading);
}

.panel-sidebar .list-group-item,
.list-group-item {
    background: var(--mg-surface);
    border-color: var(--mg-border);
}

.panel-sidebar .list-group-item.active,
.list-group-item.active {
    background: var(--mg-blue);
    border-color: var(--mg-blue);
    color: #fff;
}

.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a,
.text-muted,
.small,
small {
    color: var(--mg-muted) !important;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-order-now,
button[type="submit"].btn-primary {
    background: var(--mg-blue);
    border-color: var(--mg-blue);
    color: #fff;
    border-radius: 6px;
    font-weight: 700;
    box-shadow: 0 10px 24px rgba(58, 122, 254, 0.22);
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-order-now:hover,
button[type="submit"].btn-primary:hover {
    background: var(--mg-blue-hover);
    border-color: var(--mg-blue-hover);
    color: #fff;
}

.btn-default,
.btn-secondary,
.btn-outline-primary,
.btn-light {
    background: transparent;
    border-color: var(--mg-border);
    color: var(--mg-heading);
    border-radius: 6px;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-light:hover {
    background: var(--mg-surface-2);
    border-color: rgba(255, 255, 255, 0.18);
    color: var(--mg-heading);
}

.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"] {
    background: #0f1114;
    border-color: var(--mg-border);
    color: var(--mg-heading);
    border-radius: 6px;
}

.form-control:focus,
.custom-select:focus {
    background: #0f1114;
    border-color: var(--mg-blue);
    color: var(--mg-heading);
    box-shadow: 0 0 0 0.2rem rgba(58, 122, 254, 0.22);
}

table,
.table {
    color: var(--mg-text);
}

.table thead th {
    border-color: var(--mg-border);
    color: var(--mg-heading);
}

.table td,
.table th {
    border-color: var(--mg-border);
}

.footer {
    background: #0f1114;
    border-top: 1px solid var(--mg-border);
    color: var(--mg-muted);
}

.footer a {
    color: var(--mg-text);
}

.footer a:hover {
    color: var(--mg-heading);
}

.alert {
    border-radius: 8px;
}

.badge-info,
.badge-primary {
    background: var(--mg-blue);
}

#products .product,
#products .package,
#products .generic_content {
    background: #fff;
    color: #111827 !important;
}

#products .product header,
#products .product header span,
#products .product-desc,
#products .product-desc p,
#products .product-desc li,
#products .product-pricing,
#products .product-pricing span,
#products .product-pricing .price,
#products .package-title,
#products .package-price,
#products .package-description,
#products .cart-product-name,
#products .product-heading-data,
#products .product-billing-cycle,
#products .product-setup-fee {
    color: #111827 !important;
    font-weight: 700;
}

#products .product-desc,
#products .product-desc p,
#products .product-desc li,
#products .package-description {
    font-weight: 600;
}

#products .product-pricing,
#products .product-pricing .price,
#products .package-price {
    font-weight: 800;
}

#products .btn,
#products .btn *,
#products .btn-order-now,
#products .btn-order-now *,
#products .wgs_custom-btn,
#products .wgs_custom-btn * {
    color: #fff !important;
}

#order-standard_cart .product-info,
#order-standard_cart .product-info *,
#order-standard_cart .order-summary,
#order-standard_cart .order-summary *,
#order-standard_cart .summary-container,
#order-standard_cart .summary-container *,
#order-standard_cart .view-cart-items,
#order-standard_cart .view-cart-items *,
#order-standard_cart .view-cart-tabs,
#order-standard_cart .view-cart-tabs *,
#order-standard_cart .item,
#order-standard_cart .item *,
#order-standard_cart .product-configurable-options,
#order-standard_cart .product-configurable-options *,
#order-standard_cart #productConfigurableOptions,
#order-standard_cart #productConfigurableOptions *,
#order-standard_cart .sub-heading,
#order-standard_cart .sub-heading span,
#order-standard_cart .field,
#order-standard_cart .field *,
#order-standard_cart .form-group,
#order-standard_cart .form-group label {
    color: #111827 !important;
    font-weight: 700;
}

#order-standard_cart .product-info li,
#order-standard_cart .product-info p,
#order-standard_cart .summary-container small,
#order-standard_cart .order-summary small,
#order-standard_cart .view-cart-items small {
    color: #111827 !important;
    font-weight: 600;
}

#order-standard_cart .summary-container .total-due-today,
#order-standard_cart .summary-container .amt,
#order-standard_cart .order-summary .total-due-today,
#order-standard_cart .order-summary .amt,
#order-standard_cart .view-cart-items .item-title {
    color: #111827 !important;
    font-weight: 800;
}

#order-standard_cart .btn,
#order-standard_cart .btn *,
#order-standard_cart button,
#order-standard_cart button *,
#order-standard_cart a.btn,
#order-standard_cart a.btn * {
    color: #fff !important;
}

.action-icon-btns a {
    min-height: 140px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 16px;
    padding: 28px 32px;
    background: var(--mg-surface) !important;
    border: 1px solid rgba(58, 122, 254, 0.85) !important;
    border-radius: 8px;
    color: var(--mg-heading) !important;
    font-weight: 800;
    text-align: left;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

.action-icon-btns a:hover,
.action-icon-btns a:focus {
    border-color: var(--mg-blue) !important;
    color: #fff !important;
    transform: translateY(-2px);
    text-decoration: none;
}

.action-icon-btns .ico-container {
    width: 54px;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    background: rgba(58, 122, 254, 0.13);
    border-radius: 10px;
}

.action-icon-btns .ico-container i {
    color: var(--mg-blue) !important;
    font-size: 24px;
}

.action-icon-btns a:before {
    display: none !important;
}

#header form[action*="/knowledgebase/search"] {
    display: none !important;
}

@media (max-width: 767px) {
    .magabox-brand-text {
        font-size: 16px;
    }

    .magabox-logo {
        width: 46px;
        height: 46px;
        max-height: 46px;
    }
}