:root {
    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: #263b52;
    background: #fff;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #fff;
}

a {
    color: inherit;
}

.portal-header {
    background: #fff;
}

.portal-top {
    width: min(1120px, calc(100% - 32px));
    min-height: 84px;
    margin: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
}

.portal-logo {
    color: #085c98;
    font-size: 28px;
    font-weight: 300;
    letter-spacing: -.04em;
    text-decoration: none;
}

.portal-logo strong {
    font-weight: 650;
}

.portal-account-nav {
    display: flex;
    align-items: center;
    gap: 19px;

    color: #718195;
    font-size: 12px;
}

.portal-account-nav a {
    text-decoration: none;
}

.portal-account-nav a:hover,
.portal-account-nav a.active {
    color: #075f9c;
}

.portal-cart-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    border-radius: 4px;
    background: #0d5b88;
    padding: 10px 14px;

    color: #fff !important;
    font-weight: 750;
}

.portal-cart-button span {
    min-width: 19px;
    border-radius: 999px;
    background: rgba(255,255,255,.19);
    padding: 2px 6px;
    text-align: center;
}

.portal-menu {
    background: #075377;
    color: #fff;
}

.portal-menu-inner {
    width: min(1120px, calc(100% - 32px));
    min-height: 44px;
    margin: auto;

    display: flex;
    align-items: center;
    gap: 30px;
}

.portal-menu-inner a {
    font-size: 12px;
    text-decoration: none;
}

.portal-menu-inner a:hover {
    opacity: .8;
}

.portal-menu-account {
    margin-left: auto;
}

.domain-hero {
    background:
        linear-gradient(
            135deg,
            #063c5b,
            #075979
        );

    color: #fff;
}

.domain-hero-inner {
    width: min(880px, calc(100% - 32px));
    margin: auto;
    padding: 42px 0 52px;
    text-align: center;
}

.domain-hero h1 {
    margin: 0;
    font-size: clamp(26px, 4vw, 38px);
    font-weight: 350;
    letter-spacing: -.025em;
}

.domain-hero p {
    margin: 10px 0 23px;
    color: #b9d7e5;
    font-size: 13px;
}

.domain-search-form {
    max-width: 720px;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr auto;
}

.domain-search-form input {
    min-height: 50px;
    border: 0;
    outline: 0;
    padding: 0 17px;
    font: inherit;
    font-size: 15px;
}

.domain-search-form button {
    border: 0;
    background: #39b985;
    padding: 0 28px;
    color: #fff;
    font: inherit;
    font-weight: 750;
    cursor: pointer;
}

.portal-quick-nav {
    display: grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));

    background: #27a6c4;
    color: #fff;
}

.portal-quick-nav a {
    border-right:
        1px solid
        rgba(255,255,255,.2);

    padding: 13px;
    text-align: center;
    text-decoration: none;
}

.portal-quick-nav strong,
.portal-quick-nav span {
    display: block;
}

.portal-quick-nav strong {
    font-size: 12px;
}

.portal-quick-nav span {
    margin-top: 2px;
    color: #dff7ff;
    font-size: 9px;
}

.portal-main {
    width: min(1120px, calc(100% - 32px));
    margin: 32px auto 65px;
}

.portal-alert {
    margin-bottom: 18px;
    border-radius: 8px;
    padding: 13px 15px;
    font-size: 12px;
}

.portal-alert-error {
    border: 1px solid #efc5c5;
    background: #fff2f2;
    color: #9d2f2f;
}

.portal-alert-success {
    border: 1px solid #bee6cd;
    background: #ecf9f1;
    color: #17683e;
}

.domain-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    border: 1px solid #dce5ed;
    border-radius: 12px;

    padding: 21px 23px;
    margin-bottom: 27px;
}

.domain-result-available {
    border-left: 4px solid #25aa70;
    background: #fbfffd;
}

.domain-result-unavailable {
    border-left: 4px solid #d48740;
    background: #fffcf8;
}

.domain-result-label {
    color: #8593a4;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.domain-result h2 {
    margin: 4px 0;
    color: #1e344d;
    font-size: 22px;
}

.domain-result p {
    margin: 0;
    color: #758395;
    font-size: 11px;
}

.domain-result-action {
    display: flex;
    align-items: center;
    gap: 16px;
}

.domain-price {
    text-align: right;
}

.domain-price strong {
    display: block;
    color: #075d9b;
    font-size: 20px;
}

.domain-price span {
    color: #8794a5;
    font-size: 10px;
}

.domain-status {
    border-radius: 999px;
    background: #eef2f6;
    padding: 7px 10px;
    color: #68778a;
    font-size: 9px;
    font-weight: 800;
}

.portal-primary-button,
.portal-secondary-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 40px;
    border: 0;
    border-radius: 6px;

    padding: 9px 16px;
    font: inherit;
    font-size: 12px;
    font-weight: 750;
    cursor: pointer;
}

.portal-primary-button {
    background: #0873b6;
    color: #fff;
}

.portal-secondary-button {
    border: 1px solid #d4dde7;
    background: #fff;
    color: #45586e;
}

.portal-button-link {
    text-decoration: none;
}

.portal-section {
    margin-top: 42px;
}

.portal-section-heading h2 {
    margin: 0;
    color: #263d55;
    font-size: 24px;
    font-weight: 400;
}

.portal-section-heading p {
    margin: 6px 0 0;
    color: #7b899b;
    font-size: 12px;
}

.tld-card-grid {
    display: grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 13px;
    margin-top: 20px;
}

.tld-card {
    border: 1px solid #e0e6ed;
    border-radius: 9px;
    padding: 17px;
}

.tld-card strong {
    display: block;
    color: #0b619c;
    font-size: 19px;
}

.tld-card span {
    display: block;
    margin-top: 10px;
    color: #8b97a6;
    font-size: 9px;
}

.tld-card b {
    display: block;
    margin-top: 2px;
    color: #283e56;
    font-size: 14px;
}

.portal-service-grid {
    display: grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap: 15px;
    margin-top: 20px;
}

.portal-service-grid > div {
    border: 1px solid #e0e6ed;
    border-radius: 10px;
    padding: 20px;
}

.portal-service-grid h3 {
    margin: 0;
    font-size: 15px;
}

.portal-service-grid p {
    margin: 7px 0 0;
    color: #78869a;
    font-size: 11px;
    line-height: 1.5;
}

.portal-footer {
    border-top: 1px solid #e5e9ee;
    background: #f8f9fb;
}

.portal-footer > div {
    width: min(1120px, calc(100% - 32px));
    margin: auto;
    padding: 26px 0;
    color: #768598;
    font-size: 10px;
}

/* Authentication + Registration */

.portal-auth-main,
.portal-login-main {
    width: min(980px, calc(100% - 32px));
    margin: 45px auto 70px;
}

.portal-auth-heading {
    margin-bottom: 22px;
}

.portal-auth-heading h1,
.portal-login-heading h1 {
    margin: 0;
    color: #243b54;
    font-size: 28px;
    font-weight: 400;
}

.portal-auth-heading p,
.portal-login-heading p {
    margin: 6px 0 0;
    color: #8190a1;
    font-size: 12px;
}

.registration-card,
.portal-login-card,
.portal-cart-card,
.portal-empty-card {
    border: 1px solid #dfe5ec;
    border-radius: 11px;
    background: #fff;
    box-shadow:
        0 8px 28px
        rgba(20,42,64,.045);
}

.registration-section {
    padding: 24px;
    border-bottom: 1px solid #e8edf2;
}

.registration-section h2 {
    margin: 0 0 17px;
    color: #2c4259;
    font-size: 15px;
}

.portal-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));
    gap: 17px;
}

.portal-full {
    grid-column: 1 / -1;
}

.portal-field label {
    display: block;
    margin-bottom: 6px;
    color: #43566c;
    font-size: 10px;
    font-weight: 750;
}

.portal-field input,
.portal-field select {
    width: 100%;
    min-height: 41px;

    border: 1px solid #d4dde7;
    border-radius: 6px;

    outline: 0;
    padding: 8px 10px;

    font: inherit;
    font-size: 12px;
}

.portal-field input:focus,
.portal-field select:focus {
    border-color: #3993cb;
    box-shadow:
        0 0 0 3px
        rgba(18,118,180,.08);
}

.portal-field small {
    display: block;
    margin-top: 5px;
    color: #8b97a6;
    font-size: 9px;
}

.portal-terms {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 20px;
    color: #66768a;
    font-size: 10px;
}

.registration-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 17px 24px;
    background: #fafbfd;
}

.registration-footer span {
    color: #7d8b9c;
    font-size: 10px;
}

.registration-footer a {
    color: #0870ae;
}

.portal-login-main {
    width: min(460px, calc(100% - 32px));
}

.portal-login-card {
    padding: 28px;
}

.portal-login-heading {
    margin-bottom: 21px;
    text-align: center;
}

.portal-login-card .portal-field {
    margin-bottom: 15px;
}

.portal-login-button {
    width: 100%;
    margin-top: 3px;
}

.portal-login-footer {
    margin-top: 20px;
    text-align: center;
    color: #8491a1;
    font-size: 10px;
}

.portal-login-footer a {
    color: #0870ae;
    font-weight: 750;
}

/* Cart */

.portal-cart-main {
    max-width: 900px;
}

.portal-empty-card {
    padding: 45px;
    text-align: center;
}

.portal-empty-card h2 {
    margin: 0;
}

.portal-empty-card p {
    color: #8190a1;
    font-size: 12px;
}

.portal-cart-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding: 19px 22px;
    border-bottom: 1px solid #e7ecf1;
}

.portal-cart-row > div:first-child strong,
.portal-cart-row > div:first-child span {
    display: block;
}

.portal-cart-row > div:first-child strong {
    color: #243d57;
    font-size: 15px;
}

.portal-cart-row > div:first-child span {
    margin-top: 4px;
    color: #8693a3;
    font-size: 10px;
}

.portal-cart-price {
    display: flex;
    align-items: center;
    gap: 15px;
}

.portal-cart-price strong {
    color: #075f9d;
}

.portal-remove-button {
    border: 0;
    background: transparent;
    color: #bf4b4b;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.portal-cart-total {
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    padding: 18px 22px;
    background: #f8fafc;
}

.portal-cart-total span {
    color: #718196;
}

.portal-cart-total strong {
    min-width: 110px;
    text-align: right;
}

.portal-cart-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 18px 22px;
}

.portal-checkout-actions {
    display: flex;
    gap: 9px;
}

/* Client portal */

.portal-client-name {
    color: #4c6075;
    font-size: 11px;
}

.portal-account-nav form {
    margin: 0;
}

.portal-logout-button {
    border: 1px solid #dbe1e8;
    border-radius: 5px;
    background: #fff;
    padding: 8px 11px;
    color: #5e7083;
    font: inherit;
    font-size: 10px;
    cursor: pointer;
}

.client-portal-main {
    width: min(1180px, calc(100% - 32px));
    margin: 32px auto 70px;
}

.client-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.client-welcome span {
    color: #8694a4;
    font-size: 10px;
}

.client-welcome h1 {
    margin: 3px 0;
    color: #233b55;
    font-size: 27px;
    font-weight: 400;
}

.client-welcome p {
    margin: 0;
    color: #7d8c9e;
    font-size: 11px;
}

.client-summary-grid {
    display: grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap: 13px;
    margin-top: 25px;
}

.client-summary-grid > div {
    border: 1px solid #e0e6ed;
    border-radius: 9px;
    padding: 17px;
}

.client-summary-grid span {
    display: block;
    color: #8290a1;
    font-size: 9px;
    font-weight: 750;
    text-transform: uppercase;
}

.client-summary-grid strong {
    display: block;
    margin-top: 6px;
    color: #1f3b58;
    font-size: 24px;
}

.client-portal-section {
    margin-top: 25px;
    border: 1px solid #dfe6ed;
    border-radius: 10px;
    overflow: hidden;
}

.client-section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 18px 20px;
    border-bottom: 1px solid #e5eaf0;
    background: #fbfcfd;
}

.client-section-heading h2 {
    margin: 0;
    color: #2d4258;
    font-size: 15px;
}

.client-section-heading p {
    margin: 4px 0 0;
    color: #8995a4;
    font-size: 9px;
}

.client-section-heading a {
    color: #0870af;
    font-size: 10px;
    text-decoration: none;
}

.client-empty {
    padding: 35px 20px;
    color: #8794a3;
    text-align: center;
    font-size: 11px;
}

.client-domain-table-wrap {
    overflow-x: auto;
}

.client-domain-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 10px;
}

.client-domain-table th {
    padding: 10px;
    background: #f7f9fb;
    color: #718094;
    font-size: 8px;
    text-align: left;
    text-transform: uppercase;
}

.client-domain-table td {
    padding: 11px 10px;
    border-top: 1px solid #edf0f3;
    color: #53657a;
}

.client-domain-table td strong {
    color: #183b5b;
}

.client-domain-status {
    border-radius: 999px;
    background: #e9f7ef;
    padding: 4px 7px;
    color: #17683e;
    font-size: 8px;
    font-weight: 800;
}

.client-service-grid {
    display: grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap: 12px;
    padding: 17px;
}

.client-service-grid > div {
    border: 1px solid #e4e9ee;
    border-radius: 8px;
    padding: 15px;
}

.client-service-grid h3 {
    margin: 0;
    font-size: 12px;
}

.client-service-grid p {
    color: #7e8c9d;
    font-size: 10px;
}

.client-service-grid strong {
    color: #17683e;
    font-size: 9px;
}

@media (max-width: 800px) {

    .portal-top {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px 0;
    }

    .portal-account-nav {
        flex-wrap: wrap;
    }

    .portal-menu-inner {
        overflow-x: auto;
    }

    .portal-quick-nav,
    .tld-card-grid,
    .portal-service-grid,
    .client-summary-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .domain-result,
    .client-welcome,
    .portal-cart-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .domain-result-action {
        justify-content: space-between;
    }

    .portal-form-grid {
        grid-template-columns: 1fr;
    }

    .portal-full {
        grid-column: auto;
    }
}

@media (max-width: 520px) {

    .domain-search-form {
        grid-template-columns: 1fr;
        gap: 7px;
    }

    .domain-search-form button {
        min-height: 45px;
    }

    .portal-quick-nav,
    .tld-card-grid,
    .portal-service-grid,
    .client-summary-grid {
        grid-template-columns: 1fr;
    }

    .portal-cart-row,
    .portal-cart-price,
    .registration-footer {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ==========================================================
   ZEUSBILLING HOSTING STORE
   ========================================================== */

.hosting-title {
    padding: 34px 20px 26px;
    background: #f8fafc;
    text-align: center;
}

.hosting-title h1 {
    margin: 0;
    color: #243d57;
    font-size: 30px;
    font-weight: 400;
}

.hosting-title p {
    margin: 7px 0 0;
    color: #7d8c9e;
    font-size: 12px;
}

.hosting-domain-chip {
    display: inline-block;
    margin-top: 15px;
    border-radius: 999px;
    background: #eaf5fb;
    padding: 8px 14px;
    color: #27627f;
    font-size: 11px;
}

.hosting-main {
    width: min(1180px, calc(100% - 32px));
    margin: 34px auto 70px;
}

.hosting-package-grid {
    display: grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap: 16px;
}

.hosting-package-card {
    display: flex;
    flex-direction: column;

    border: 1px solid #dce4eb;
    border-radius: 9px;
    background: #fff;
    padding: 21px;

    box-shadow:
        0 8px 26px
        rgba(20,42,64,.04);
}

.hosting-package-head {
    border-bottom: 1px solid #edf0f3;
    padding-bottom: 15px;
}

.hosting-package-head h2 {
    min-height: 46px;
    margin: 0;
    color: #29435e;
    font-size: 17px;
    font-weight: 500;
}

.hosting-price {
    margin-top: 8px;
}

.hosting-price strong {
    color: #0873b6;
    font-size: 27px;
    font-weight: 650;
}

.hosting-price span {
    color: #8996a5;
    font-size: 10px;
}

.hosting-package-card ul {
    flex: 1;
    margin: 17px 0 20px;
    padding: 0;
    list-style: none;
}

.hosting-package-card li {
    position: relative;
    margin: 8px 0;
    padding-left: 17px;
    color: #68788b;
    font-size: 10px;
    line-height: 1.45;
}

.hosting-package-card li::before {
    position: absolute;
    left: 0;
    content: "✓";
    color: #2baa75;
    font-weight: 800;
}

.hosting-package-card .portal-field {
    margin-bottom: 12px;
}

.hosting-order-button {
    width: 100%;
}

.hosting-promo-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;

    margin-top: 18px;

    border: 1px solid #d7dce1;
    border-radius: 6px;
    background: #fff;

    padding: 23px 26px;
}

.hosting-promo-kicker {
    color: #d98930;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
}

.hosting-promo-card h2 {
    margin: 4px 0 2px;
    color: #29435e;
    font-size: 21px;
    font-weight: 400;
}

.hosting-promo-card p {
    margin: 0 0 15px;
    color: #8a6a4a;
    font-size: 10px;
}

.hosting-promo-button {
    display: inline-flex;
    min-height: 36px;
    align-items: center;

    border-radius: 4px;
    background: #f2a43c;

    padding: 8px 14px;

    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
}

.hosting-server-icon {
    width: 57px;
}

.hosting-server-icon span {
    position: relative;
    display: block;

    height: 13px;
    margin: 4px 0;

    border-radius: 3px;
    background: #444;
}

.hosting-server-icon span::after {
    position: absolute;
    top: 4px;
    right: 6px;

    width: 4px;
    height: 4px;

    border-radius: 999px;
    background: #fff;
    content: "";
}

.hosting-cart-controls {
    display: flex;
    align-items: center;
    gap: 26px;
}

.hosting-period-form {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hosting-period-form label {
    color: #8090a2;
    font-size: 9px;
}

.hosting-period-form select {
    min-height: 32px;
    border: 1px solid #d7dfe7;
    border-radius: 5px;
    background: #fff;
    padding: 4px 7px;
    font: inherit;
    font-size: 10px;
}

.hosting-period-form button {
    min-height: 32px;
    border: 1px solid #cbd8e3;
    border-radius: 5px;
    background: #fff;
    padding: 4px 9px;
    color: #3d5d79;
    font: inherit;
    font-size: 9px;
    cursor: pointer;
}

.cart-final-step {
    margin-top: 18px;
}

.cart-account-step {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cart-account-step > div strong,
.cart-account-step > div span {
    display: block;
}

.cart-account-step > div strong {
    color: #344c64;
    font-size: 10px;
}

.cart-account-step > div span {
    margin-top: 2px;
    color: #8492a3;
    font-size: 9px;
}

@media (max-width: 950px) {

    .hosting-package-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .hosting-cart-controls {
        align-items: flex-end;
        flex-direction: column;
    }
}

@media (max-width: 560px) {

    .hosting-package-grid {
        grid-template-columns: 1fr;
    }

    .hosting-promo-card,
    .cart-account-step {
        align-items: stretch;
        flex-direction: column;
    }

    .hosting-server-icon {
        display: none;
    }

    .hosting-period-form {
        align-items: stretch;
        flex-direction: column;
    }
}

/* ==========================================================
   ZEUSBILLING CLIENT REGISTRATION CHECKOUT
   ========================================================== */

.registration-checkout-main {
    width: min(
        1180px,
        calc(100% - 32px)
    );

    margin:
        36px auto
        75px;
}

.registration-page-heading {
    margin-bottom: 22px;
}

.registration-page-heading > span {
    color: #0a78b9;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .08em;
}

.registration-page-heading h1 {
    margin: 4px 0;
    color: #243d57;
    font-size: 29px;
    font-weight: 400;
}

.registration-page-heading p {
    margin: 0;
    color: #8290a0;
    font-size: 11px;
}

.registration-checkout-grid {
    display: grid;

    grid-template-columns:
        minmax(0,1.65fr)
        minmax(300px,.75fr);

    gap: 20px;

    align-items: start;
}

.registration-section-title {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-bottom: 18px;
}

.registration-section-title > span {
    display: inline-flex;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    align-items: center;
    justify-content: center;

    border-radius: 999px;

    background: #e9f4fb;
    color: #0871b0;

    font-size: 11px;
    font-weight: 850;
}

.registration-section-title h2 {
    margin: 0;
    color: #2c4259;
    font-size: 14px;
}

.registration-section-title p {
    margin: 3px 0 0;
    color: #8a97a6;
    font-size: 9px;
}

.registration-terms {
    margin-top: 22px;
}

.registration-footer > div span,
.registration-footer > div a {
    font-size: 10px;
}

.registration-submit-button {
    min-width: 190px;
}

.registration-order-summary {
    position: sticky;
    top: 18px;

    overflow: hidden;

    border: 1px solid #dfe5ec;
    border-radius: 10px;

    background: #fff;

    box-shadow:
        0 8px 28px
        rgba(20,42,64,.045);
}

.order-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    border-bottom: 1px solid #e8edf2;

    padding: 16px 17px;

    background: #fafbfd;
}

.order-summary-header h2 {
    margin: 0;
    color: #2a425a;
    font-size: 14px;
}

.order-summary-header a {
    color: #0870ae;
    font-size: 9px;
    text-decoration: none;
}

.order-summary-item {
    display: flex;
    justify-content: space-between;
    gap: 13px;

    padding: 14px 17px;

    border-bottom: 1px solid #edf0f3;
}

.order-summary-item strong,
.order-summary-item span {
    display: block;
}

.order-summary-item strong {
    color: #294158;
    font-size: 11px;
}

.order-summary-item span {
    margin-top: 3px;
    color: #8a96a5;
    font-size: 9px;
    line-height: 1.4;
}

.order-summary-item b {
    flex-shrink: 0;
    color: #075f9e;
    font-size: 11px;
}

.order-summary-total {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 16px 17px;

    background: #f5f8fb;
}

.order-summary-total span {
    color: #66778b;
    font-size: 10px;
    font-weight: 750;
}

.order-summary-total strong {
    color: #183d5d;
    font-size: 17px;
}

.order-summary-empty {
    padding: 30px 17px;
    color: #8a97a7;
    text-align: center;
    font-size: 10px;
}

.registration-security-box {
    margin: 14px;

    border: 1px solid #dce9e3;
    border-radius: 8px;

    background: #f7fcf9;

    padding: 13px;
}

.registration-security-box strong {
    color: #276549;
    font-size: 10px;
}

.registration-security-box ul {
    margin: 9px 0 0;
    padding: 0;

    list-style: none;
}

.registration-security-box li {
    position: relative;

    margin: 6px 0;

    padding-left: 14px;

    color: #668071;
    font-size: 8px;
    line-height: 1.45;
}

.registration-security-box li::before {
    position: absolute;
    left: 0;

    color: #28a46b;
    content: "✓";
}

@media (max-width: 900px) {

    .registration-checkout-grid {
        grid-template-columns: 1fr;
    }

    .registration-order-summary {
        position: static;
    }
}

/* ==========================================================
   CLIENT PORTAL SEPARATION
   ========================================================== */

.portal-alert-info {
    border: 1px solid #c7deef;
    background: #f0f8fd;
    color: #35637d;
}

.portal-client-login-note {
    margin-top: 14px;
    color: #8290a0;
    font-size: 9px;
}

/* ==========================================================
   ZEUSBILLING CLIENT PORTAL
   ========================================================== */

.cp-header {
    background: #fff;
}

.cp-top {
    width: min(1180px, calc(100% - 32px));
    min-height: 64px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cp-logo {
    color: #07548e;
    font-size: 26px;
    font-weight: 300;
    text-decoration: none;
}

.cp-logo strong {
    font-weight: 700;
}

.cp-top-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    color: #7d8996;
    font-size: 11px;
}

.cp-top-actions form {
    margin: 0;
}

.cp-logout {
    border: 0;
    border-radius: 3px;
    background: #075681;
    padding: 9px 17px;
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.cp-nav {
    background: #07577d;
}

.cp-nav-inner {
    width: min(1180px, calc(100% - 32px));
    min-height: 40px;
    margin: 0 auto;
    display: flex;
    align-items: center;
}

.cp-nav a {
    display: flex;
    min-height: 40px;
    align-items: center;
    padding: 0 16px;
    color: #fff;
    font-size: 11px;
    text-decoration: none;
}

.cp-nav a:hover {
    background: rgba(255,255,255,.08);
}

.cp-greeting {
    min-height: 40px;
    margin-left: auto;
    display: flex;
    align-items: center;
    border-left: 1px solid rgba(0,0,0,.12);
    padding: 0 15px;
    background: rgba(0,0,0,.07);
    color: #fff;
    font-size: 11px;
}

.cp-page {
    min-height: calc(100vh - 105px);
    background: #fff;
    padding: 20px 0 70px;
}

.cp-layout {
    width: min(1000px, calc(100% - 32px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: 225px minmax(0, 1fr);
    gap: 26px;
}

.cp-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cp-side-card {
    overflow: hidden;
    border: 1px solid #e1e4e7;
    border-radius: 4px;
    background: #fff;
}

.cp-side-card h3 {
    margin: 0;
    background: #f4f4f4;
    padding: 12px 13px;
    color: #747b83;
    font-size: 14px;
    font-weight: 400;
}

.cp-address {
    padding: 13px;
    color: #555;
    font-size: 11px;
    line-height: 1.45;
}

.cp-address strong,
.cp-address span {
    display: block;
}

.cp-side-button {
    display: block;
    margin: 0 13px 13px;
    border-radius: 3px;
    background: #57b45e;
    padding: 7px;
    color: #fff;
    text-align: center;
    font-size: 10px;
    text-decoration: none;
}

.cp-side-links a {
    display: block;
    border-top: 1px solid #ececec;
    padding: 10px 13px;
    color: #647589;
    font-size: 10px;
    text-decoration: none;
}

.cp-side-links a.active {
    background: #4c585c;
    color: #fff;
}

.cp-content {
    min-width: 0;
}

.cp-title {
    margin-bottom: 22px;
    border-bottom: 1px solid #d7d7d7;
    padding-bottom: 8px;
}

.cp-title h1 {
    margin: 0;
    color: #0862a0;
    font-size: 29px;
    font-weight: 300;
}

.cp-breadcrumb {
    margin-top: 7px;
    color: #9199a1;
    font-size: 9px;
}

.cp-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    margin-bottom: 17px;
    border: 1px solid #e4e7ea;
}

.cp-stat {
    min-height: 88px;
    border-right: 1px solid #ddd;
    padding: 17px 15px 10px;
    text-decoration: none;
}

.cp-stat:last-child {
    border-right: 0;
}

.cp-stat strong {
    display: block;
    color: #075b91;
    font-size: 31px;
    font-weight: 300;
}

.cp-stat span {
    display: block;
    margin-top: 2px;
    color: #75808b;
    font-size: 9px;
}

.cp-stat-blue {
    border-bottom: 2px solid #3bb7e4;
}

.cp-stat-green {
    border-bottom: 2px solid #62ba4c;
}

.cp-stat-red {
    border-bottom: 2px solid #ef5148;
}

.cp-stat-orange {
    border-bottom: 2px solid #f0a83e;
}

.cp-module {
    margin-bottom: 17px;
    border: 1px solid #ddd;
    border-top-width: 2px;
    background: #fff;
}

.cp-module-orange {
    border-top-color: #f0a42e;
}

.cp-module-red {
    border-top-color: #ef5148;
}

.cp-module-dark {
    border-top-color: #344d5e;
}

.cp-module-cyan {
    border-top-color: #35b7db;
}

.cp-module-green {
    border-top-color: #43bd55;
}

.cp-module header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 12px;
}

.cp-module header h2 {
    margin: 0;
    color: #586875;
    font-size: 13px;
    font-weight: 400;
}

.cp-module header a {
    border-radius: 2px;
    background: #efaa3d;
    padding: 4px 7px;
    color: #fff;
    font-size: 8px;
    text-decoration: none;
}

.cp-empty {
    min-height: 54px;
    border-top: 1px solid #eee;
    background: #fafafa;
    padding: 13px;
    color: #667;
    font-size: 9px;
}

.cp-empty a {
    color: #0872ae;
}

.cp-two-columns {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 17px;
}

.cp-list-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    border-top: 1px solid #eee;
    padding: 10px 12px;
    color: #536474;
    font-size: 9px;
}

.cp-list-row strong,
.cp-list-row span {
    display: block;
}

.cp-list-row span {
    margin-top: 3px;
    color: #89939d;
}

.cp-status {
    color: #409a50 !important;
}

.cp-domain-order {
    display: flex;
    padding: 12px;
}

.cp-order-button,
.cp-order-secondary {
    padding: 8px 17px;
    text-decoration: none;
    font-size: 10px;
}

.cp-order-button {
    background: #58b850;
    color: #fff;
}

.cp-order-secondary {
    border: 1px solid #ddd;
    color: #4e6677;
}

.cp-domain-table-card,
.cp-domain-detail {
    margin-bottom: 18px;
    border: 1px solid #ddd;
    background: #fff;
}

.cp-table-toolbar {
    min-height: 50px;
    background: #555d6d;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-size: 9px;
}

.cp-table-toolbar input {
    width: 190px;
    border: 0;
    border-radius: 2px;
    padding: 8px;
}

.cp-responsive-table {
    overflow-x: auto;
}

.cp-table {
    width: 100%;
    border-collapse: collapse;
}

.cp-table th {
    border-bottom: 3px solid #70c644;
    padding: 10px 8px;
    color: #566573;
    font-size: 9px;
    font-weight: 400;
    text-align: left;
}

.cp-table td {
    border-bottom: 1px solid #ddd;
    padding: 11px 8px;
    color: #506171;
    font-size: 9px;
}

.cp-domain-name {
    color: #0674ae;
    text-decoration: none;
}

.cp-domain-status {
    display: inline-block;
    border: 1px solid #c7d0d6;
    padding: 5px 13px;
    color: #3b9a49;
}

.cp-manage-button {
    display: inline-block;
    border: 1px solid #ccd6dc;
    border-radius: 3px;
    padding: 5px 8px;
    color: #355468;
    text-decoration: none;
}

.cp-table-empty,
.cp-empty-large {
    padding: 35px !important;
    color: #8b969f !important;
    text-align: center;
}

.cp-domain-detail {
    padding: 16px;
}

.cp-domain-detail h2 {
    margin: 0 0 14px;
    color: #43525f;
    font-size: 20px;
    font-weight: 300;
}

.cp-detail-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 12px;
}

.cp-detail-grid > div {
    border: 1px solid #e3e6e8;
    padding: 11px;
}

.cp-detail-grid span,
.cp-detail-grid strong {
    display: block;
}

.cp-detail-grid span {
    color: #87919a;
    font-size: 9px;
}

.cp-detail-grid strong {
    margin-top: 4px;
    color: #465a69;
    font-size: 11px;
}

.cp-info-box {
    margin-bottom: 18px;
    background: #d9eff9;
    padding: 13px;
    color: #4e8ca8;
    font-size: 10px;
    line-height: 1.5;
}

.cp-ns-fields {
    max-width: 650px;
}

.cp-ns-fields label {
    display: grid;
    grid-template-columns: 180px 1fr;
    align-items: center;
    gap: 15px;
    margin-bottom: 9px;
}

.cp-ns-fields span {
    color: #445762;
    font-size: 10px;
    text-align: right;
}

.cp-ns-fields input {
    border: 1px solid #d4d8db;
    border-radius: 3px;
    padding: 9px 10px;
    background: #fff;
    color: #61717f;
}

.cp-disabled-button {
    margin-left: 195px;
    border: 0;
    border-radius: 3px;
    background: #a8b3bb;
    padding: 9px 16px;
    color: #fff;
}

@media (max-width: 850px) {
    .cp-layout {
        grid-template-columns: 1fr;
    }

    .cp-sidebar {
        display: none;
    }

    .cp-stats,
    .cp-two-columns {
        grid-template-columns: repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 560px) {
    .cp-nav-inner {
        flex-wrap: wrap;
    }

    .cp-greeting {
        width: 100%;
        margin-left: 0;
    }

    .cp-stats,
    .cp-two-columns,
    .cp-detail-grid {
        grid-template-columns: 1fr;
    }

    .cp-ns-fields label {
        grid-template-columns: 1fr;
    }

    .cp-ns-fields span {
        text-align: left;
    }

    .cp-disabled-button {
        margin-left: 0;
    }
}

/* ==========================================================
   CLIENT PORTAL DOCUMENT BASE
   ========================================================== */

html {
    min-height: 100%;
    background: #ffffff;
}

.client-portal-body {
    min-height: 100vh;
    margin: 0;
    background: #ffffff;
    color: #27394a;
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

.client-portal-body *,
.client-portal-body *::before,
.client-portal-body *::after {
    box-sizing: border-box;
}

.cp-footer {
    border-top: 1px solid #e5e8eb;
    background: #f8f9fa;
}

.cp-footer-inner {
    width: min(1000px, calc(100% - 32px));
    margin: 0 auto;
    padding: 22px 0;
    color: #7d8892;
    font-size: 11px;
}