/*
 ============================================================
 HOSTPLUS WHMCS THEME
 Parent: Nexus
 WHMCS: 9.0.8
 ============================================================
*/

:root {

    --hp-navy-950: #06172b;
    --hp-navy-900: #081f38;
    --hp-navy-800: #0b2b4c;
    --hp-navy-700: #104269;

    --hp-orange: #f39221;
    --hp-orange-dark: #db7811;
    --hp-orange-soft: #fff4e7;

    --hp-blue: #1883bd;

    --hp-bg: #f5f7fb;
    --hp-surface: #ffffff;
    --hp-border: #e4eaf1;

    --hp-text: #182a3d;
    --hp-muted: #6e7e8f;

    --hp-radius-sm: 10px;
    --hp-radius: 16px;
    --hp-radius-lg: 24px;

    --hp-shadow-sm:
        0 4px 18px rgba(6, 23, 43, .06);

    --hp-shadow:
        0 14px 40px rgba(6, 23, 43, .10);

    --hp-shadow-lg:
        0 24px 70px rgba(6, 23, 43, .15);
}


/* ==========================================================
   BASE
========================================================== */

html {
    scroll-behavior: smooth;
}

body {
    background: var(--hp-bg);
    color: var(--hp-text);
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--hp-navy-700);
    transition:
        color .2s ease,
        background-color .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

a:hover {
    color: var(--hp-orange-dark);
    text-decoration: none;
}

#main-body {
    padding-top: 42px;
    padding-bottom: 70px;
}

#main-body > .container {
    max-width: 1240px;
}


/* ==========================================================
   HEADER
========================================================== */

#header.header {
    background: #fff;
    box-shadow: 0 6px 30px rgba(6, 23, 43, .07);
    position: relative;
    z-index: 100;
}

#header .topbar {
    background: var(--hp-navy-950);
    color: rgba(255, 255, 255, .85);
    border: 0;
}

#header .topbar .btn,
#header .topbar .input-group-text {
    color: #fff;
    background: transparent;
    border-color: rgba(255, 255, 255, .12);
}

#header .navbar-light {
    background: #fff;
}

#header .navbar-light > .container {
    min-height: 72px;
}

#header .navbar-brand {
    padding: 0;
}

#header .logo-img {
    max-height: 52px;
    width: auto;
}

#header .search .form-control {
    min-width: 280px;
    height: 42px;
    border-radius: 0 10px 10px 0;
    background: #f6f8fb;
    border-color: var(--hp-border);
}

#header .search .btn {
    height: 42px;
    border-radius: 10px 0 0 10px;
    background: #f6f8fb;
    border: 1px solid var(--hp-border);
    border-right: 0;
    color: var(--hp-muted);
}

#header .toolbar .nav-link {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    border: 1px solid var(--hp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hp-navy-900);
}

#header .cart-btn:hover {
    background: var(--hp-orange-soft);
    border-color: rgba(243, 146, 33, .35);
}

#header .cart-btn .badge {
    background: var(--hp-orange);
}


/* ==========================================================
   MAIN NAVIGATION
========================================================== */

.main-navbar-wrapper {
    background:
        linear-gradient(
            90deg,
            var(--hp-navy-950),
            var(--hp-navy-800)
        );
    border: 0 !important;
    min-height: 54px;
}

.main-navbar-wrapper .navbar-nav > li > a {
    display: block;
    color: rgba(255, 255, 255, .88) !important;
    font-weight: 600;
    font-size: 14px;
    padding: 17px 16px !important;
    position: relative;
}

.main-navbar-wrapper .navbar-nav > li > a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
}

.main-navbar-wrapper .navbar-nav > li > a:after {
    border-top-color: rgba(255,255,255,.7);
}

.main-navbar-wrapper .dropdown-menu {
    border: 0;
    border-radius: 12px;
    box-shadow: var(--hp-shadow-lg);
    padding: 10px;
    margin-top: 0;
}

.main-navbar-wrapper .dropdown-item {
    border-radius: 8px;
    padding: 8px !important;
}

.main-navbar-wrapper .dropdown-item:hover {
    background: var(--hp-orange-soft);
    color: var(--hp-orange-dark);
}


/* ==========================================================
   BREADCRUMB
========================================================== */

.master-breadcrumb {
    background: #fff;
    border-bottom: 1px solid var(--hp-border);
}

.master-breadcrumb .breadcrumb {
    background: transparent;
    margin: 0;
    padding-top: 11px;
    padding-bottom: 11px;
    font-size: 13px;
}


/* ==========================================================
   DOMAIN HERO
========================================================== */

#frmDomainHomepage {
    margin: 0;
}

.hp-domain-hero {

    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            var(--hp-navy-950) 0%,
            #0a3154 56%,
            #0f5074 100%
        );

    padding:
        74px 0 76px;

    color: #fff;
}

.hp-domain-container {
    position: relative;
    z-index: 2;
}

.hp-domain-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(4px);
    opacity: .18;
}

.hp-domain-glow-one {
    width: 420px;
    height: 420px;
    background: var(--hp-orange);
    top: -260px;
    right: 5%;
}

.hp-domain-glow-two {
    width: 360px;
    height: 360px;
    background: #31a9dd;
    bottom: -280px;
    left: 5%;
}

.hp-domain-heading {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 30px;
}

.hp-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #ffd49f;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.hp-domain-heading h1 {
    color: #fff;
    font-size: 40px;
    line-height: 1.15;
    margin-bottom: 14px;
    font-weight: 750;
}

.hp-domain-heading p {
    color: rgba(255,255,255,.74);
    font-size: 17px;
    margin-bottom: 0;
}

.hp-domain-search-box {
    max-width: 900px;
    margin: auto;
}

.hp-domain-input-group {
    background: #fff;
    padding: 8px;
    border-radius: 16px;
    display: flex;
    align-items: stretch;
    gap: 8px;
    box-shadow: var(--hp-shadow-lg);
}

.hp-domain-input {
    position: relative;
    flex: 1 1 auto;
}

.hp-domain-input > i {
    position: absolute;
    top: 50%;
    left: 19px;
    transform: translateY(-50%);
    color: #8394a6;
    z-index: 3;
}

.hp-domain-input .form-control {
    height: 58px;
    border: 0;
    box-shadow: none;
    padding-left: 50px;
    padding-right: 20px;
    font-size: 16px;
    border-radius: 11px;
}

.hp-domain-buttons {
    display: flex;
    gap: 8px;
}

.hp-domain-buttons .btn {
    min-width: 130px;
    height: 58px;
    padding: 0 22px;
    border-radius: 11px;
    font-weight: 700;
}

.hp-domain-buttons .btn-primary {
    background: var(--hp-orange);
    border-color: var(--hp-orange);
}

.hp-domain-buttons .btn-primary:hover {
    background: var(--hp-orange-dark);
    border-color: var(--hp-orange-dark);
}

.hp-domain-buttons .btn-outline-light {
    color: var(--hp-navy-900);
    border-color: #d8e0e8;
    background: #f5f7fa;
}

.hp-domain-buttons .btn-outline-light:hover {
    background: #eaf0f5;
    color: var(--hp-navy-950);
}

.hp-domain-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 6px 0;
}

.hp-tlds {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.hp-tld {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.78);
    font-size: 13px;
}

.hp-tld img {
    max-width: 55px;
    max-height: 25px;
    object-fit: contain;
}

.hp-domain-pricing {
    color: rgba(255,255,255,.85);
    font-size: 13px;
    font-weight: 700;
}

.hp-domain-pricing:hover {
    color: #fff;
}


/* ==========================================================
   SECTIONS
========================================================== */

.hp-home-section {
    padding: 38px 0;
}

.hp-section-heading {
    text-align: center;
    max-width: 680px;
    margin: 0 auto 35px;
}

.hp-section-heading > span {
    display: block;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.7px;
    color: var(--hp-orange);
    margin-bottom: 10px;
}

.hp-section-heading h2 {
    color: var(--hp-navy-950);
    font-size: 30px;
    font-weight: 750;
    margin-bottom: 10px;
}

.hp-section-heading p {
    color: var(--hp-muted);
    font-size: 15px;
}


/* ==========================================================
   PRODUCT CARDS
========================================================== */

.hp-product-grid > [class*="col-"] {
    display: flex;
}

.hp-product-card {
    width: 100%;
    min-height: 285px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    padding: 26px;
    color: var(--hp-text);
    box-shadow: var(--hp-shadow-sm);
    position: relative;
    overflow: hidden;
}

.hp-product-card:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: var(--hp-orange);
    transition: height .25s ease;
}

.hp-product-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--hp-shadow);
    color: var(--hp-text);
    border-color: rgba(243,146,33,.34);
}

.hp-product-card:hover:before {
    height: 100%;
}

.hp-product-icon {
    width: 52px;
    height: 52px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--hp-orange-soft);
    color: var(--hp-orange-dark);
    border-radius: 13px;
    font-size: 23px;
    margin-bottom: 22px;
}

.hp-product-content {
    flex: 1 1 auto;
}

.hp-product-content h3 {
    font-size: 19px;
    color: var(--hp-navy-900);
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 13px;
}

.hp-product-content p {
    color: var(--hp-muted);
    line-height: 1.6;
    font-size: 14px;
}

.hp-product-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--hp-border);
    margin-top: 18px;
    padding-top: 17px;
    color: var(--hp-navy-700);
    font-weight: 700;
    font-size: 13px;
}

.hp-product-card:hover .hp-product-footer {
    color: var(--hp-orange-dark);
}


/* ==========================================================
   ACTION CARDS
========================================================== */

.hp-action-grid > [class*="col-"] {
    display: flex;
}

.hp-action-card {
    width: 100%;
    min-height: 130px;
    padding: 20px 14px;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--hp-navy-900);
    font-weight: 650;
    font-size: 13px;
    box-shadow: var(--hp-shadow-sm);
}

.hp-action-card i {
    font-size: 27px;
    color: var(--hp-orange);
    margin-bottom: 13px;
}

.hp-action-card:hover {
    transform: translateY(-4px);
    border-color: rgba(243,146,33,.4);
    box-shadow: var(--hp-shadow);
    color: var(--hp-orange-dark);
}

.hp-action-primary {
    background:
        linear-gradient(
            135deg,
            var(--hp-orange),
            #e47712
        );
    color: #fff;
    border-color: transparent;
}

.hp-action-primary i {
    color: #fff;
}

.hp-action-primary:hover {
    color: #fff;
}


/* ==========================================================
   GENERAL CARDS / SIDEBARS
========================================================== */

.card,
.panel {
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-sm);
}

.card-header,
.panel-heading {
    background: #fff;
    border-bottom: 1px solid var(--hp-border);
}

.sidebar .card,
.sidebar .panel {
    overflow: hidden;
}

.sidebar .card-header,
.sidebar .panel-heading {
    color: var(--hp-navy-900);
    font-weight: 700;
}


/* ==========================================================
   BUTTONS / FORMS
========================================================== */

.btn {
    border-radius: 9px;
    font-weight: 650;
}

.btn-primary {
    background: var(--hp-orange);
    border-color: var(--hp-orange);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background: var(--hp-orange-dark) !important;
    border-color: var(--hp-orange-dark) !important;
}

.btn-outline-primary {
    color: var(--hp-navy-700);
    border-color: var(--hp-navy-700);
}

.btn-outline-primary:hover {
    background: var(--hp-navy-800);
    border-color: var(--hp-navy-800);
}

.form-control {
    border-radius: 9px;
    border-color: var(--hp-border);
}

.form-control:focus {
    border-color: var(--hp-orange);
    box-shadow: 0 0 0 .2rem rgba(243,146,33,.13);
}


/* ==========================================================
   CLIENT AREA DASHBOARD TILES
========================================================== */

.tiles .row {
    margin-left: -8px;
    margin-right: -8px;
}

.tiles .row > div {
    padding: 8px;
}

.tiles .tile {
    min-height: 145px;
    margin: 0;
    background: #fff;
    border: 1px solid var(--hp-border);
    border-radius: var(--hp-radius);
    box-shadow: var(--hp-shadow-sm);
    overflow: hidden;
}

.tiles .tile:hover {
    transform: translateY(-4px);
    box-shadow: var(--hp-shadow);
}

.tiles .tile > i {
    color: var(--hp-orange);
    opacity: 1;
}

.tiles .tile .stat {
    color: var(--hp-navy-950);
    font-weight: 750;
}

.tiles .tile .title {
    color: var(--hp-muted);
    font-weight: 650;
}

.tiles .tile .highlight {
    height: 4px;
    background: var(--hp-orange) !important;
}

.client-home-cards .card {
    margin-bottom: 24px;
    overflow: hidden;
}

.client-home-cards .card-header {
    padding: 16px 20px;
}

.client-home-cards .card-title {
    color: var(--hp-navy-900);
    font-size: 16px;
    font-weight: 700;
}

.client-home-cards .list-group-item {
    border-color: var(--hp-border);
    padding: 13px 18px;
}

.client-home-cards .list-group-item:hover {
    background: #f8fafc;
}


/* ==========================================================
   TABLES
========================================================== */

.table {
    background: #fff;
}

.table thead th {
    border-top: 0;
    color: var(--hp-navy-900);
    background: #f7f9fc;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .4px;
}


/* ==========================================================
   FOOTER
========================================================== */

#footer.footer {
    background:
        linear-gradient(
            135deg,
            var(--hp-navy-950),
            var(--hp-navy-800)
        );

    border: 0;
    padding-top: 34px;
    padding-bottom: 34px;
    color: rgba(255,255,255,.62);
}

#footer.footer a {
    color: rgba(255,255,255,.75);
}

#footer.footer a:hover {
    color: #fff;
}

#footer .copyright {
    color: rgba(255,255,255,.48);
    font-size: 12px;
}


/* ==========================================================
   PAGINATION
========================================================== */

.page-link {
    color: var(--hp-navy-700);
}

.page-item.active .page-link {
    background: var(--hp-orange);
    border-color: var(--hp-orange);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991.98px) {

    .hp-domain-hero {
        padding: 55px 0 58px;
    }

    .hp-domain-heading h1 {
        font-size: 33px;
    }

}


@media (max-width: 767.98px) {

    #header .logo-img {
        max-height: 42px;
    }

    .hp-domain-heading h1 {
        font-size: 28px;
    }

    .hp-domain-heading p {
        font-size: 15px;
    }

    .hp-domain-input-group {
        display: block;
    }

    .hp-domain-buttons {
        margin-top: 8px;
    }

    .hp-domain-buttons .btn {
        flex: 1 1 50%;
        min-width: 0;
    }

    .hp-domain-meta {
        display: block;
    }

    .hp-domain-pricing {
        display: inline-block;
        margin-top: 18px;
    }

    .hp-section-heading h2 {
        font-size: 25px;
    }

}


@media (max-width: 575.98px) {

    .hp-domain-hero {
        padding: 45px 0;
    }

    .hp-domain-buttons {
        display: block;
    }

    .hp-domain-buttons .btn {
        width: 100%;
        margin-top: 6px;
    }

    .hp-tlds {
        gap: 12px;
    }

    .hp-product-card {
        min-height: 0;
    }

}


/*
 ============================================================
 HOSTPLUS PASS 2
 Header / Sidebar / Client Dashboard refinement
 ============================================================
*/


/* ==========================================================
   GLOBAL WIDTH / SPACING
========================================================== */

#header .container,
.master-breadcrumb .container,
#main-body > .container,
#footer .container,
.hp-domain-container {
    max-width: 1320px;
}

#main-body {
    padding-top: 34px;
}


/* ==========================================================
   BRAND / HEADER
========================================================== */

#header .navbar-light > .container {
    min-height: 82px;
}

#header .logo-img {
    max-height: 62px;
    max-width: 190px;
    object-fit: contain;
}

#header .navbar-brand {
    display: flex;
    align-items: center;
}

#header .topbar {
    min-height: 32px;
    font-size: 12px;
}

#header .topbar .btn {
    font-size: 12px;
    padding-top: 4px;
    padding-bottom: 4px;
}

#header .main-navbar-wrapper {
    min-height: 58px;
}

.main-navbar-wrapper .navbar-nav > li > a {
    padding-top: 19px !important;
    padding-bottom: 19px !important;
}

.main-navbar-wrapper .navbar-nav > li:first-child > a {
    padding-left: 0 !important;
}

#header .search .form-control {
    min-width: 340px;
}


/* ==========================================================
   BREADCRUMB
========================================================== */

.master-breadcrumb {
    box-shadow:
        0 3px 12px rgba(6, 23, 43, .025);
}

.master-breadcrumb .breadcrumb {
    padding-top: 12px;
    padding-bottom: 12px;
}


/* ==========================================================
   CLIENT AREA MAIN LAYOUT
========================================================== */

#main-body .primary-content {
    min-width: 0;
}

@media (min-width: 1200px) {

    #main-body .col-xl-3 {
        flex: 0 0 22%;
        max-width: 22%;
    }

    #main-body .col-xl-9 {
        flex: 0 0 78%;
        max-width: 78%;
    }

}


/* ==========================================================
   SIDEBAR
========================================================== */

.sidebar {
    margin-bottom: 22px;
}

.sidebar .card {
    border: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
        0 6px 24px rgba(6, 23, 43, .075);
}

.sidebar .card-header {
    padding: 14px 17px;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f7f9fc
        );
    border-bottom:
        1px solid var(--hp-border);
}

.sidebar .card-header .card-title {
    font-size: 14px;
    font-weight: 750;
    color: var(--hp-navy-900);
}

.sidebar .list-group-item {
    border-color: #edf1f5;
    padding: 11px 17px;
    font-size: 13px;
    color: #44576a;
}

.sidebar .list-group-item:hover {
    background: var(--hp-orange-soft);
    color: var(--hp-orange-dark);
}

.sidebar .list-group-item.active {
    background: var(--hp-navy-800);
    border-color: var(--hp-navy-800);
    color: #fff;
}

.sidebar .card-body {
    padding: 17px;
    font-size: 13px;
}

.sidebar .btn-success {
    background:
        linear-gradient(
            135deg,
            #22a52c,
            #179322
        );
    border: 0;
    font-weight: 700;
    border-radius: 8px;
}


/* ==========================================================
   DASHBOARD STATS
========================================================== */

.tiles {
    margin-bottom: 28px !important;
}

.tiles .tile {
    position: relative;
    min-height: 128px;
    padding: 19px 18px 18px;
    text-align: left;
    border: 0;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #fbfcfe 100%
        );
}

.tiles .tile > i {
    position: absolute;
    right: 18px;
    top: 20px;
    font-size: 38px;
    color: var(--hp-orange);
    opacity: .95;
}

.tiles .tile .stat {
    font-size: 31px;
    line-height: 1;
    margin-top: 8px;
    margin-bottom: 8px;
    color: var(--hp-navy-950);
}

.tiles .tile .title {
    text-transform: uppercase;
    letter-spacing: .45px;
    font-size: 11px;
    font-weight: 800;
    color: #8291a0;
}

.tiles .tile .highlight {
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 14px;
    width: auto;
    height: 3px;
    border-radius: 5px;
}

.tiles .tile:hover {
    transform: translateY(-5px);
}


/* ==========================================================
   CLIENT HOME PANELS
========================================================== */

.client-home-cards > .row {
    margin-left: -10px;
    margin-right: -10px;
}

.client-home-cards > .row > div {
    padding-left: 10px;
    padding-right: 10px;
}

.client-home-cards .card {
    border: 0;
    border-radius: 15px;
    box-shadow:
        0 7px 26px rgba(6, 23, 43, .07);
    overflow: hidden;
}

.client-home-cards .card-header {
    padding: 15px 18px;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );
}

.client-home-cards .card-title {
    font-size: 15px;
    line-height: 1.3;
}

.client-home-cards .card-title > i {
    color: var(--hp-orange);
}

.client-home-cards .card-body {
    padding: 18px;
}

.client-home-cards .card-footer {
    background: #fff;
    border-top-color: var(--hp-border);
}

.client-home-cards .list-group-item {
    padding: 12px 16px;
    font-size: 13px;
}

.client-home-cards .list-group-item:hover {
    background: #fff9f2;
}


/* ==========================================================
   SITEJET / ADDON PANELS
========================================================== */

.client-home-cards img,
.primary-content img {
    max-width: 100%;
}

.client-home-cards select.form-control,
.primary-content select.form-control {
    min-height: 40px;
}

.primary-content .btn-warning,
.primary-content .btn-success {
    border: 0;
    border-radius: 8px;
    font-weight: 700;
}

.primary-content .btn-warning {
    background: var(--hp-orange);
    color: #fff;
}

.primary-content .btn-warning:hover {
    background: var(--hp-orange-dark);
}


/* ==========================================================
   PRODUCT / SERVICE LISTS
========================================================== */

.client-home-cards .list-group-item .badge,
.primary-content .badge-success {
    border-radius: 6px;
    padding: 5px 7px;
    font-size: 10px;
    font-weight: 750;
}

.primary-content .table,
.primary-content .dataTables_wrapper {
    border-radius: 14px;
    overflow: hidden;
}


/* ==========================================================
   GENERAL BUTTONS
========================================================== */

.btn-default {
    background: #fff;
    border-color: #dce3ea;
    color: var(--hp-navy-900);
}

.btn-default:hover {
    background: #f6f8fb;
    border-color: #cdd7e0;
    color: var(--hp-navy-950);
}


/* ==========================================================
   FOOTER REFINEMENT
========================================================== */

#footer.footer {
    margin-top: 35px;
    padding-top: 38px;
    padding-bottom: 38px;
}

#footer.footer .nav-link {
    padding-left: 0;
    padding-right: 24px;
}

#footer.footer .btn-outline-light {
    border-color: rgba(255,255,255,.45);
    color: #fff;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199.98px) {

    #header .search .form-control {
        min-width: 240px;
    }

}

@media (max-width: 767.98px) {

    #header .navbar-light > .container {
        min-height: 68px;
    }

    #header .logo-img {
        max-height: 48px;
        max-width: 150px;
    }

    .tiles .tile {
        min-height: 116px;
    }

    .tiles .tile > i {
        font-size: 31px;
    }

    .tiles .tile .stat {
        font-size: 27px;
    }

}


/*
 ============================================================
 HOSTPLUS PASS 3
 Homepage cleanup + dashboard identity
 ============================================================
*/


/* ==========================================================
   HEADER SEARCH - FIX BROKEN TWO-LINE DISPLAY
========================================================== */

#header .navbar-light form.form-inline {
    flex-flow: row nowrap;
}

#header .navbar-light .input-group.search {
    flex-wrap: nowrap !important;
    align-items: stretch;
}

#header .navbar-light .search .input-group-prepend {
    display: none !important;
}

#header .navbar-light .search .form-control {
    min-width: 320px;
    width: 320px;
    height: 44px;
    border-radius: 11px !important;
    padding-left: 16px;
    border: 1px solid var(--hp-border);
    background: #f6f8fb;
}


/* ==========================================================
   HOMEPAGE - REMOVE SIDEBAR / USE FULL WIDTH
   Modern browsers only; no template-core modification
========================================================== */

#main-body .row:has(.hp-products-section) > .col-lg-4,
#main-body .row:has(.hp-products-section) > .col-xl-3 {
    display: none !important;
}

#main-body .row:has(.hp-products-section) > .primary-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

#main-body .row:has(.hp-products-section) {
    justify-content: center;
}


/* ==========================================================
   HOMEPAGE PRODUCT AREA
========================================================== */

.hp-products-section {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
}

.hp-product-grid {
    justify-content: center;
}

.hp-product-card {
    min-height: 310px;
}

.hp-product-content h3 {
    min-height: 48px;
}


/* ==========================================================
   DASHBOARD WELCOME
========================================================== */

.hp-dashboard-welcome {

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

    padding: 28px 30px;
    margin-bottom: 24px;

    border-radius: 18px;

    background:
        linear-gradient(
            135deg,
            var(--hp-navy-950) 0%,
            var(--hp-navy-800) 58%,
            #124c71 100%
        );

    color: #fff;

    box-shadow:
        0 14px 36px rgba(6, 23, 43, .16);

    position: relative;
    overflow: hidden;
}

.hp-dashboard-welcome:after {

    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    background:
        rgba(243, 146, 33, .14);

    top: -150px;
    right: -50px;
}

.hp-dashboard-welcome-text {
    position: relative;
    z-index: 2;
    max-width: 650px;
}

.hp-dashboard-eyebrow {

    display: block;

    color: #ffc47c;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1.7px;

    margin-bottom: 8px;
}

.hp-dashboard-welcome h1 {

    color: #fff;

    font-size: 27px;
    font-weight: 750;

    margin-bottom: 8px;
}

.hp-dashboard-welcome p {

    color: rgba(255,255,255,.72);

    font-size: 14px;

    margin: 0;
}

.hp-dashboard-welcome-actions {

    position: relative;
    z-index: 2;

    display: flex;
    gap: 10px;

    flex: 0 0 auto;
}

.hp-dashboard-welcome-actions .btn {

    min-height: 43px;

    display: inline-flex;
    align-items: center;

    padding-left: 17px;
    padding-right: 17px;
}

.hp-dashboard-welcome-actions .btn-default {

    background: rgba(255,255,255,.10);

    color: #fff;

    border-color: rgba(255,255,255,.22);
}

.hp-dashboard-welcome-actions .btn-default:hover {

    background: rgba(255,255,255,.18);

    color: #fff;

    border-color: rgba(255,255,255,.32);
}


/* ==========================================================
   DASHBOARD STAT CARDS
========================================================== */

.tiles .row {
    gap: 0;
}

.tiles .tile {

    border: 1px solid rgba(223,230,237,.85);

    box-shadow:
        0 8px 24px rgba(6,23,43,.07);
}

.tiles .tile > i {

    width: 46px;
    height: 46px;

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

    border-radius: 12px;

    background: var(--hp-orange-soft);

    font-size: 25px;
}

.tiles .tile .stat {
    margin-top: 4px;
}


/* ==========================================================
   CLIENT AREA PANELS
========================================================== */

.client-home-cards .card-header {
    min-height: 52px;
    display: flex;
    align-items: center;
}

.client-home-cards .card-header .card-title {
    width: 100%;
}

.client-home-cards .card {

    transition:
        transform .2s ease,
        box-shadow .2s ease;
}

.client-home-cards .card:hover {

    box-shadow:
        0 12px 32px rgba(6,23,43,.095);
}


/* ==========================================================
   SITEJET PANEL
========================================================== */

.primary-content [menuitemname="Sitejet Builder"],
.primary-content .sitejet-builder {

    border-radius: 16px !important;

    overflow: hidden;
}


/* ==========================================================
   HEADER / LOGO FINAL TWEAK
========================================================== */

#header .logo-img {
    max-height: 68px;
    max-width: 210px;
}

#header .navbar-light > .container {
    min-height: 88px;
}


/* ==========================================================
   FOOTER
========================================================== */

#footer.footer {
    border-top:
        3px solid rgba(243,146,33,.72);
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 991.98px) {

    .hp-dashboard-welcome {
        display: block;
    }

    .hp-dashboard-welcome-actions {
        margin-top: 20px;
    }

}

@media (max-width: 767.98px) {

    #header .navbar-light .search .form-control {
        min-width: 0;
        width: 100%;
    }

    .hp-dashboard-welcome {
        padding: 24px 20px;
    }

    .hp-dashboard-welcome h1 {
        font-size: 23px;
    }

    .hp-dashboard-welcome-actions {
        display: block;
    }

    .hp-dashboard-welcome-actions .btn {
        width: 100%;
        justify-content: center;
        margin-top: 8px;
    }

}


/*
 ============================================================
 HOSTPLUS PASS 4
 Structural branding based on new HostPlus website
 ============================================================
*/


/* ==========================================================
   UTILITY BAR
========================================================== */

.hp-utility-bar {

    background: #061b3b;

    color: rgba(255,255,255,.88);

    font-size: 12px;

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.hp-utility-bar > .container {

    min-height: 34px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.hp-utility-left,
.hp-utility-right {

    display: flex;

    align-items: center;

    gap: 19px;
}

.hp-utility-left span {

    display: inline-flex;

    align-items: center;

    gap: 6px;
}

.hp-utility-left i {

    color: var(--hp-orange);
}

.hp-utility-right a {

    color: rgba(255,255,255,.82);

    font-size: 11px;
}

.hp-utility-right a:hover {

    color: #fff;
}

.hp-return-admin {

    color: #ffc276 !important;
}


/* ==========================================================
   MAIN WHITE HEADER
========================================================== */

.hp-main-header {

    background: #fff;

    box-shadow:
        0 5px 20px rgba(6,23,43,.055);
}

.hp-main-header .navbar {

    min-height: 84px;
}

.hp-brand {

    margin-right: 42px;
}

.hp-brand .logo-img {

    max-width: 190px !important;

    max-height: 64px !important;
}

.hp-primary-menu {

    gap: 5px;
}

.hp-primary-menu > li > a {

    color: #092452 !important;

    font-size: 14px;

    font-weight: 700;

    padding:
        31px 13px !important;

    position: relative;
}

.hp-primary-menu > li > a:hover {

    color: var(--hp-orange) !important;

    background: transparent !important;
}

.hp-primary-menu > li > a:before {

    content: "";

    position: absolute;

    left: 13px;
    right: 13px;

    bottom: 21px;

    height: 2px;

    background: var(--hp-orange);

    transform: scaleX(0);

    transition:
        transform .18s ease;
}

.hp-primary-menu > li > a:hover:before {

    transform: scaleX(1);
}

.hp-primary-menu .dropdown-menu {

    border: 0;

    border-radius: 13px;

    box-shadow:
        0 16px 50px rgba(6,23,43,.14);

    padding: 9px;
}

.hp-primary-menu .dropdown-item {

    border-radius: 8px;

    padding: 8px 10px !important;
}

.hp-primary-menu .dropdown-item:hover {

    background: #fff4e8;

    color: var(--hp-orange-dark);
}


/* Disable old Nexus dark navigation */

.main-navbar-wrapper {

    display: none !important;
}


/* ==========================================================
   HEADER ACTIONS
========================================================== */

.hp-header-actions {

    display: flex;

    align-items: center;

    gap: 9px;
}

.hp-login-btn,
.hp-register-btn {

    min-width: 94px;

    height: 44px;

    display: inline-flex;

    justify-content: center;

    align-items: center;
}

.hp-login-btn {

    background: #fff;

    color: #0b2d61;

    border: 1px solid #aebfde;
}

.hp-login-btn:hover {

    background: #f5f8fc;

    color: #071d42;
}

.hp-register-btn {

    background:
        linear-gradient(
            135deg,
            #ff9e24,
            #f47800
        );

    border: 0;

    color: #fff;
}

.hp-register-btn:hover {

    color: #fff;

    box-shadow:
        0 8px 22px rgba(244,120,0,.26);
}

.hp-cart-button {

    width: 44px;
    height: 44px;

    border-radius: 10px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: #f7f9fc;

    border:
        1px solid var(--hp-border);

    color: #0b2d61;

    position: relative;
}

.hp-cart-button span {

    position: absolute;

    top: -7px;
    right: -7px;

    min-width: 20px;
    height: 20px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: var(--hp-orange);

    color: #fff;

    font-size: 10px;

    font-weight: 800;
}


/* logged-in account menu */

.hp-account-menu > li > a {

    color: #092452 !important;

    font-weight: 700;

    padding: 12px !important;
}


/* ==========================================================
   HOSTING HERO
========================================================== */

.hp-hosting-hero {

    position: relative;

    overflow: hidden;

    color: #fff;

    padding:
        64px 0 0;

    background:
        linear-gradient(
            110deg,
            #071d43 0%,
            #0b3e70 52%,
            #166d91 100%
        );
}

.hp-hosting-hero:before {

    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 12% 20%,
            rgba(255,255,255,.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 86% 35%,
            rgba(243,146,33,.14),
            transparent 34%
        );
}

.hp-hero-bg-shape {

    position: absolute;

    border-radius: 50%;
}

.hp-hero-shape-one {

    width: 340px;
    height: 340px;

    right: 5%;

    top: -210px;

    background:
        rgba(255,174,76,.14);
}

.hp-hero-shape-two {

    width: 300px;
    height: 300px;

    left: -120px;

    bottom: -190px;

    background:
        rgba(50,186,232,.13);
}

.hp-hosting-hero .container {

    position: relative;

    z-index: 2;
}


/* Hero copy */

.hp-hero-copy {

    padding:
        18px 35px 50px 0;
}

.hp-hero-kicker {

    display: block;

    color: #ffc274;

    font-weight: 800;

    font-size: 11px;

    letter-spacing: 1.8px;

    margin-bottom: 13px;
}

.hp-hero-copy h1 {

    color: #fff;

    font-size: 46px;

    line-height: 1.08;

    letter-spacing: -.8px;

    font-weight: 800;

    margin-bottom: 18px;
}

.hp-hero-copy h1 span {

    display: block;

    font-weight: 700;
}

.hp-hero-subtitle {

    font-size: 17px;

    color: rgba(255,255,255,.88);

    margin-bottom: 22px;
}

.hp-hero-subtitle strong {

    color: #ffad47;
}

.hp-hero-subtitle b {

    color: rgba(255,255,255,.35);

    padding: 0 6px;
}

.hp-hero-points {

    padding: 0;

    margin: 0;

    list-style: none;
}

.hp-hero-points li {

    margin-bottom: 10px;

    font-size: 14px;

    color: rgba(255,255,255,.88);
}

.hp-hero-points i {

    color: #56c85d;

    margin-right: 8px;
}


/* ==========================================================
   DOMAIN FINDER CARD
========================================================== */

.hp-domain-finder {

    background:
        rgba(255,255,255,.97);

    color: var(--hp-text);

    padding: 26px;

    border-radius: 18px;

    box-shadow:
        0 24px 60px rgba(0,0,0,.18);

    backdrop-filter: blur(10px);
}

.hp-domain-finder-title {

    color: #092a5c;

    font-size: 21px;

    font-weight: 800;

    margin-bottom: 4px;
}

.hp-domain-finder > p {

    color: #657589;

    margin-bottom: 18px;

    font-size: 13px;
}

.hp-domain-finder-input {

    display: flex;

    position: relative;

    gap: 8px;
}

.hp-domain-finder-input > i {

    position: absolute;

    left: 16px;

    top: 50%;

    transform:
        translateY(-50%);

    color: #8391a3;

    z-index: 2;
}

.hp-domain-finder-input .form-control {

    height: 52px;

    padding-left: 43px;

    background: #fff;

    border:
        1px solid #dfe6ee;

    box-shadow: none;
}

.hp-domain-finder-input .btn {

    min-width: 125px;

    border-radius: 9px;

    background:
        linear-gradient(
            135deg,
            #ff9e24,
            #f47700
        );

    border: 0;
}

.hp-domain-finder-bottom {

    margin-top: 17px;
}

.hp-domain-price-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}

.hp-domain-price-chips span {

    display: inline-flex;

    align-items: center;

    gap: 4px;

    min-height: 32px;

    padding: 6px 9px;

    border-radius: 7px;

    background: #f4f6fa;

    color: #4d6076;

    font-size: 10px;
}

.hp-domain-price-chips strong {

    color: #e86d00;

    text-transform: uppercase;
}

.hp-domain-finder-links {

    margin-top: 14px;

    padding-top: 12px;

    border-top:
        1px solid #e8edf2;

    display: flex;

    align-items: center;

    justify-content: space-between;
}

.hp-domain-finder-links a,
.hp-domain-finder-links .btn-link {

    padding: 0;

    font-size: 12px;

    font-weight: 700;

    color: #0c3c70;
}


/* ==========================================================
   HERO BENEFITS BAR
========================================================== */

.hp-hero-benefits {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    background:
        rgba(255,255,255,.95);

    border-radius:
        18px 18px 0 0;

    margin-top: 46px;

    box-shadow:
        0 -5px 30px rgba(0,0,0,.09);
}

.hp-hero-benefits > div {

    min-height: 82px;

    padding: 18px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: #233b5d;

    border-right:
        1px solid #e9edf3;
}

.hp-hero-benefits > div:last-child {

    border-right: 0;
}

.hp-hero-benefits i {

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--hp-orange);

    background: #fff2e3;

    border-radius: 10px;

    font-size: 18px;
}

.hp-hero-benefits span {

    color: #6e7e91;

    font-size: 11px;

    line-height: 1.35;
}

.hp-hero-benefits strong {

    display: block;

    color: #0a2a5c;

    font-size: 12px;

    margin-bottom: 2px;
}


/* ==========================================================
   HOMEPAGE AFTER HERO
========================================================== */

body:has(#frmDomainHomepage) #main-body {

    padding-top: 0;
}

body:has(#frmDomainHomepage) {

    background:
        linear-gradient(
            #ffffff 0,
            #f7f9fd 720px,
            #f5f7fb 100%
        );
}


/* ==========================================================
   MEGA FOOTER
========================================================== */

.hp-mega-footer {

    margin-top: 60px !important;

    padding:
        52px 0 22px !important;

    background:
        linear-gradient(
            135deg,
            #061a37,
            #082c55
        ) !important;

    border-top:
        0 !important;

    color:
        rgba(255,255,255,.68);
}

.hp-footer-grid h4 {

    color: #fff;

    font-size: 14px;

    font-weight: 800;

    margin-bottom: 17px;
}

.hp-footer-grid ul {

    list-style: none;

    padding: 0;

    margin: 0;
}

.hp-footer-grid li {

    margin-bottom: 9px;

    font-size: 12px;
}

.hp-footer-grid a {

    color:
        rgba(255,255,255,.67) !important;
}

.hp-footer-grid a:hover {

    color: #fff !important;
}

.hp-footer-brand img {

    max-width: 165px;

    max-height: 60px;

    filter:
        brightness(0) invert(1);

    opacity: .93;
}

.hp-footer-intro {

    max-width: 255px;

    margin:
        18px 0;

    color:
        rgba(255,255,255,.61);

    line-height: 1.6;

    font-size: 12px;
}

.hp-footer-badges {

    display: flex;

    gap: 7px;

    flex-wrap: wrap;
}

.hp-footer-badges span {

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.10);

    border-radius: 6px;

    padding: 5px 8px;

    font-size: 10px;

    color:
        rgba(255,255,255,.72);
}

.hp-footer-contact li {

    display: flex;

    align-items: center;

    gap: 8px;
}

.hp-footer-contact i {

    color: var(--hp-orange);

    width: 15px;
}

.hp-language-btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    margin-top: 12px;

    background:
        rgba(255,255,255,.07);

    color: #fff;

    border:
        1px solid rgba(255,255,255,.18);
}

.hp-footer-bottom {

    border-top:
        1px solid rgba(255,255,255,.10);

    margin-top: 18px;

    padding-top: 21px;

    display: flex;

    justify-content: space-between;

    align-items: center;
}

.hp-footer-bottom p {

    margin: 0;

    font-size: 11px;

    color:
        rgba(255,255,255,.48);
}

.hp-footer-security {

    display: flex;

    gap: 18px;

    font-size: 10px;

    color:
        rgba(255,255,255,.50);
}

.hp-footer-security i {

    color: var(--hp-orange);

    margin-right: 5px;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199.98px) {

    .hp-main-header .navbar {

        min-height: 72px;
    }

    .hp-brand {

        margin-right: 0;
    }

    .hp-main-header .navbar-collapse {

        position: absolute;

        left: 0;
        right: 0;

        top: 72px;

        background: #fff;

        padding: 16px;

        box-shadow:
            0 18px 35px rgba(6,23,43,.13);

        z-index: 200;
    }

    .hp-primary-menu {

        margin: 0 !important;
    }

    .hp-primary-menu > li > a {

        padding:
            11px 8px !important;
    }

    .hp-primary-menu > li > a:before {

        display: none;
    }

    .hp-header-actions {

        margin-top: 12px;
    }

}


@media (max-width: 991.98px) {

    .hp-utility-left span:nth-child(n+3) {

        display: none;
    }

    .hp-utility-right a:not(.hp-return-admin) {

        display: none;
    }

    .hp-hero-copy {

        padding:
            10px 0 35px;
    }

    .hp-hero-copy h1 {

        font-size: 38px;
    }

    .hp-domain-finder {

        margin-top: 10px;
    }

    .hp-hero-benefits {

        grid-template-columns:
            repeat(2,1fr);
    }

    .hp-hero-benefits > div:nth-child(2) {

        border-right: 0;
    }

}


@media (max-width: 575.98px) {

    .hp-utility-bar > .container {

        justify-content: center;
    }

    .hp-utility-left {

        gap: 12px;
    }

    .hp-hero-copy h1 {

        font-size: 31px;
    }

    .hp-hero-subtitle {

        font-size: 14px;
    }

    .hp-domain-finder {

        padding: 20px;
    }

    .hp-domain-finder-input {

        display: block;
    }

    .hp-domain-finder-input .btn {

        width: 100%;

        height: 48px;

        margin-top: 8px;
    }

    .hp-hero-benefits {

        grid-template-columns: 1fr;
    }

    .hp-hero-benefits > div {

        border-right: 0;

        border-bottom:
            1px solid #e9edf3;
    }

    .hp-footer-bottom {

        display: block;

        text-align: center;
    }

    .hp-footer-security {

        justify-content: center;

        margin-top: 12px;
    }

}


/*
 * HostPlus:
 * Hide only the Sitejet Builder card
 * from the client-area dashboard.
 */

.client-home-cards [menuitemname="Sitejet Builder"] {
    display: none !important;
}


/*
 ============================================================
 HOSTPLUS PASS 5
 Product cards based on new HostPlus website
 ============================================================
*/

.hp-real-products {

    max-width: 1240px;

    margin-left: auto;
    margin-right: auto;

    padding-top: 56px;
    padding-bottom: 46px;
}


.hp-reference-heading {

    margin-bottom: 42px;
}


.hp-pricing-grid > [class*="col-"] {

    display: flex;
}


/* ==========================================================
   CARD
========================================================== */

.hp-pricing-card {

    position: relative;

    width: 100%;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    background: #fff;

    border:
        1px solid #e3e8ef;

    border-radius: 18px;

    box-shadow:
        0 10px 32px rgba(6,23,43,.07);

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}


.hp-pricing-card:hover {

    transform:
        translateY(-7px);

    border-color:
        rgba(243,146,33,.45);

    box-shadow:
        0 22px 52px rgba(6,23,43,.13);
}


.hp-pricing-card-featured {

    border:
        2px solid var(--hp-orange);

    box-shadow:
        0 18px 45px rgba(243,146,33,.16);
}


.hp-pricing-ribbon {

    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 5;

    background:
        linear-gradient(
            135deg,
            #ff9e24,
            #f47700
        );

    color: #fff;

    padding:
        6px 10px;

    border-radius: 6px;

    font-size: 9px;

    line-height: 1;

    font-weight: 800;

    letter-spacing: .9px;
}


/* ==========================================================
   VISUAL TOP
========================================================== */

.hp-pricing-visual {

    position: relative;

    height: 138px;

    display: flex;

    align-items: center;

    justify-content: center;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            #f6f9fd 0%,
            #edf4fb 100%
        );

    border-bottom:
        1px solid #e8edf3;
}


.hp-pricing-card-featured .hp-pricing-visual {

    background:
        linear-gradient(
            145deg,
            #fff7ed 0%,
            #fff 100%
        );
}


.hp-pricing-icon {

    position: relative;

    z-index: 3;

    width: 72px;
    height: 72px;

    display: flex;

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

    border-radius: 20px;

    background:
        linear-gradient(
            145deg,
            #0a2d5b,
            #125d89
        );

    color: #fff;

    box-shadow:
        0 14px 32px rgba(7,40,80,.20);

    font-size: 31px;
}


.hp-pricing-card-featured .hp-pricing-icon {

    background:
        linear-gradient(
            145deg,
            #ff9e24,
            #f47700
        );

    box-shadow:
        0 14px 32px rgba(244,119,0,.22);
}


.hp-pricing-orbit {

    position: absolute;

    border-radius: 50%;

    border:
        1px solid rgba(13,65,111,.09);
}


.hp-pricing-orbit-one {

    width: 125px;
    height: 125px;
}


.hp-pricing-orbit-two {

    width: 180px;
    height: 180px;
}


/* ==========================================================
   CARD BODY
========================================================== */

.hp-pricing-body {

    flex: 1 1 auto;

    padding:
        25px 24px 19px;
}


.hp-pricing-eyebrow {

    display: block;

    color: var(--hp-orange);

    font-size: 9px;

    font-weight: 850;

    letter-spacing: 1.25px;

    margin-bottom: 7px;
}


.hp-pricing-body h3 {

    color: #082b59;

    font-size: 20px;

    line-height: 1.2;

    font-weight: 800;

    margin-bottom: 5px;
}


.hp-pricing-product-name {

    min-height: 19px;

    color: #8290a0;

    font-size: 11px;

    margin-bottom: 20px;
}


/* ==========================================================
   PRICE
========================================================== */

.hp-pricing-price {

    display: flex;

    align-items: flex-end;

    min-height: 48px;

    margin-bottom: 3px;
}


.hp-pricing-price .hp-from {

    align-self: center;

    margin-right: 7px;

    color: #78889a;

    font-size: 10px;
}


.hp-pricing-price strong {

    color: #092d5d;

    font-size: 34px;

    line-height: 1;

    letter-spacing: -1px;
}


.hp-pricing-price sup {

    top: -.9em;

    margin-left: 2px;

    color: var(--hp-orange);

    font-size: 15px;

    font-weight: 800;
}


.hp-pricing-price .hp-per {

    padding-bottom: 4px;

    margin-left: 4px;

    color: #7a8998;

    font-size: 10px;
}


.hp-pricing-billing {

    min-height: 27px;

    color: #8996a5;

    font-size: 9px;

    border-bottom:
        1px solid #edf0f4;

    padding-bottom: 13px;

    margin-bottom: 15px;
}


/* ==========================================================
   FEATURES
========================================================== */

.hp-pricing-features {

    padding: 0;

    margin: 0;

    list-style: none;
}


.hp-pricing-features li {

    display: flex;

    align-items: flex-start;

    gap: 7px;

    color: #526579;

    font-size: 11px;

    line-height: 1.4;

    margin-bottom: 8px;
}


.hp-pricing-features i {

    margin-top: 2px;

    color: #54b95d;

    font-size: 11px;
}


/* ==========================================================
   CARD FOOTER
========================================================== */

.hp-pricing-footer {

    padding:
        0 24px 24px;
}


.hp-pricing-footer .btn {

    width: 100%;

    min-height: 44px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.hp-card-button {

    color: #0a376a;

    background: #fff;

    border:
        1px solid #9fb4ca;
}


.hp-card-button:hover {

    color: #fff;

    background: #0a376a;

    border-color: #0a376a;
}


.hp-products-all {

    margin-top: 10px;

    text-align: center;
}


.hp-products-all-link {

    display: inline-flex;

    align-items: center;

    gap: 7px;

    color: #0c3d70;

    font-size: 12px;

    font-weight: 750;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 1199.98px) {

    .hp-pricing-card {

        min-height: 100%;
    }

}


@media (max-width: 575.98px) {

    .hp-real-products {

        padding-top: 38px;
    }

    .hp-pricing-body h3 {

        font-size: 19px;
    }

}


/*
 ============================================================
 HOSTPLUS PASS 6
 Homepage full width + footer correction
 ============================================================
*/


/* ==========================================================
   HOMEPAGE MUST NOT HAVE CLIENT SIDEBAR
========================================================== */

body:has(#frmDomainHomepage) #main-body .sidebar {
    display: none !important;
}

body:has(#frmDomainHomepage) #main-body .primary-content {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

body:has(#frmDomainHomepage) #main-body > .container {
    max-width: 1320px;
}

body:has(#frmDomainHomepage) #main-body > .container > .row {
    justify-content: center;
}


/* ==========================================================
   PRICING AREA — CENTER LIKE MAIN HOSTPLUS DESIGN
========================================================== */

body:has(#frmDomainHomepage) .hp-real-products {
    max-width: 1180px;
}

body:has(#frmDomainHomepage) .hp-pricing-grid {
    margin-left: -11px;
    margin-right: -11px;
}

body:has(#frmDomainHomepage) .hp-pricing-grid > [class*="col-"] {
    padding-left: 11px;
    padding-right: 11px;
}


/* ==========================================================
   REMOVE OLD HOMEPAGE SIDEBAR SPACE
========================================================== */

body:has(#frmDomainHomepage) #main-body {
    padding-left: 0;
    padding-right: 0;
}


/* ==========================================================
   FOOTER — OLD LOGO IMAGE MUST NOT BECOME WHITE RECTANGLE
========================================================== */

.hp-footer-brand img {
    filter: none !important;
    opacity: 1 !important;
    max-width: 165px;
    max-height: 60px;
    object-fit: contain;
}


/* ==========================================================
   SMALL VISUAL REFINEMENT
========================================================== */

.hp-pricing-card {
    min-height: 100%;
}

.hp-pricing-body {
    padding-left: 22px;
    padding-right: 22px;
}

.hp-pricing-price strong {
    white-space: nowrap;
}


/* BEGIN HOSTPLUS HERO IMAGE + MOBILE */

/*
 ============================================================
 HOSTPLUS REAL HERO IMAGE
 Uses actual WHMCS HostPlus markup:
 .hp-hosting-hero
 .hp-hero-copy
 .hp-domain-finder
 .hp-hero-benefits
 ============================================================
*/


/* ==========================================================
   DESKTOP HERO
========================================================== */

.hp-hosting-hero {

    position: relative;

    min-height: 545px;

    padding:
        68px 0 0;

    overflow: hidden;

    background-color: #082b55;

    background-image:
        linear-gradient(
            90deg,
            rgba(5, 23, 48, .93) 0%,
            rgba(7, 35, 66, .88) 31%,
            rgba(7, 43, 77, .69) 55%,
            rgba(5, 33, 60, .32) 100%
        ),
        url('../assets/img/hero-hostplus.webp');

    background-repeat:
        no-repeat,
        no-repeat;

    background-size:
        cover,
        cover;

    background-position:
        center center,
        center center;
}


/*
 * Remove the older decorative gradient layer.
 * The photo now provides the hero visual.
 */

.hp-hosting-hero:before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(2,14,31,.04) 0%,
            rgba(2,14,31,.03) 60%,
            rgba(2,14,31,.14) 100%
        );
}


/* Remove old circles from the gradient-only hero */

.hp-hosting-hero .hp-hero-bg-shape {

    display: none;
}


/* Content always above the image */

.hp-hosting-hero > .container {

    position: relative;

    z-index: 2;
}


/* ==========================================================
   LEFT HERO COPY
========================================================== */

.hp-hosting-hero .hp-hero-copy {

    max-width: 650px;

    padding:
        16px 52px 52px 0;
}


.hp-hosting-hero .hp-hero-kicker {

    display: inline-flex;

    align-items: center;

    min-height: 27px;

    padding:
        5px 11px;

    margin-bottom: 15px;

    border-radius: 999px;

    background:
        rgba(255,255,255,.08);

    border:
        1px solid rgba(255,255,255,.13);

    color: #ffc373;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.5px;

    backdrop-filter:
        blur(5px);
}


.hp-hosting-hero .hp-hero-copy h1 {

    max-width: 630px;

    margin-bottom: 17px;

    color: #fff;

    font-size: 49px;

    line-height: 1.04;

    letter-spacing: -.9px;

    font-weight: 800;

    text-shadow:
        0 2px 18px rgba(0,0,0,.16);
}


.hp-hosting-hero .hp-hero-copy h1 span {

    display: block;

    color: #fff;

    font-weight: 700;
}


.hp-hosting-hero .hp-hero-subtitle {

    margin-bottom: 21px;

    color:
        rgba(255,255,255,.90);

    font-size: 17px;
}


.hp-hosting-hero .hp-hero-subtitle strong {

    color: #ffad47;
}


.hp-hosting-hero .hp-hero-points li {

    margin-bottom: 10px;

    color:
        rgba(255,255,255,.93);

    font-size: 14px;

    text-shadow:
        0 1px 7px rgba(0,0,0,.16);
}


/* ==========================================================
   DOMAIN SEARCH CARD
========================================================== */

.hp-hosting-hero .hp-domain-finder {

    background:
        rgba(255,255,255,.965);

    border:
        1px solid rgba(255,255,255,.55);

    border-radius: 19px;

    padding: 27px;

    box-shadow:
        0 28px 65px rgba(0,0,0,.24);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.hp-hosting-hero .hp-domain-finder-title {

    font-size: 23px;

    line-height: 1.15;

    font-weight: 800;

    color: #082b59;
}


.hp-hosting-hero .hp-domain-finder-input .form-control {

    height: 52px;

    background: #fff;
}


.hp-hosting-hero .hp-domain-finder-input .btn {

    height: 52px;
}


/* ==========================================================
   BENEFITS STRIP
========================================================== */

.hp-hosting-hero .hp-hero-benefits {

    margin-top: 48px;

    background:
        rgba(255,255,255,.965);

    box-shadow:
        0 -8px 34px rgba(3,22,42,.16);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


/* ==========================================================
   LARGE TABLET / SMALL DESKTOP
========================================================== */

@media (max-width: 1199.98px) {

    .hp-hosting-hero {

        min-height: 515px;

        padding-top: 58px;

        background-position:
            center center,
            58% center;
    }


    .hp-hosting-hero .hp-hero-copy {

        padding-right: 30px;
    }


    .hp-hosting-hero .hp-hero-copy h1 {

        font-size: 43px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991.98px) {

    .hp-hosting-hero {

        min-height: auto;

        padding:
            46px 0 0;

        background-image:
            linear-gradient(
                180deg,
                rgba(5,23,48,.92) 0%,
                rgba(6,34,64,.83) 48%,
                rgba(7,43,77,.70) 100%
            ),
            url('../assets/img/hero-hostplus.webp');

        background-position:
            center center,
            66% center;
    }


    .hp-hosting-hero .hp-hero-copy {

        max-width: 700px;

        padding:
            8px 0 32px;
    }


    .hp-hosting-hero .hp-hero-copy h1 {

        max-width: 650px;

        font-size: 39px;
    }


    .hp-hosting-hero .hp-domain-finder {

        margin-top: 4px;

        margin-bottom: 4px;
    }


    .hp-hosting-hero .hp-hero-benefits {

        margin-top: 36px;

        grid-template-columns:
            repeat(2, 1fr);
    }


    .hp-hosting-hero .hp-hero-benefits > div:nth-child(2) {

        border-right: 0;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {

    .hp-hosting-hero {

        padding:
            36px 0 0;

        background-image:
            linear-gradient(
                180deg,
                rgba(4,20,43,.94) 0%,
                rgba(5,31,59,.87) 46%,
                rgba(8,53,86,.76) 100%
            ),
            url('../assets/img/hero-hostplus.webp');

        background-size:
            cover,
            auto 100%;

        background-position:
            center center,
            64% center;
    }


    .hp-hosting-hero .hp-hero-copy {

        padding:
            3px 0 27px;
    }


    .hp-hosting-hero .hp-hero-kicker {

        margin-bottom: 12px;

        padding:
            4px 9px;

        font-size: 8px;

        letter-spacing: 1.15px;
    }


    .hp-hosting-hero .hp-hero-copy h1 {

        font-size: 33px;

        line-height: 1.08;

        letter-spacing: -.5px;

        margin-bottom: 14px;
    }


    .hp-hosting-hero .hp-hero-subtitle {

        margin-bottom: 18px;

        font-size: 15px;

        line-height: 1.55;
    }


    .hp-hosting-hero .hp-hero-points li {

        margin-bottom: 8px;

        font-size: 13px;

        line-height: 1.45;
    }


    /* Domain box below hero copy */

    .hp-hosting-hero .hp-domain-finder {

        width: 100%;

        margin:
            3px 0 0;

        padding: 19px;

        border-radius: 15px;
    }


    .hp-hosting-hero .hp-domain-finder-title {

        font-size: 20px;
    }


    .hp-hosting-hero .hp-domain-finder > p {

        margin-bottom: 14px;

        font-size: 12px;
    }


    .hp-hosting-hero .hp-domain-finder-input {

        display: block;
    }


    .hp-hosting-hero .hp-domain-finder-input > i {

        top: 25px;
    }


    .hp-hosting-hero .hp-domain-finder-input .form-control {

        width: 100%;

        height: 49px;

        font-size: 16px;
    }


    .hp-hosting-hero .hp-domain-finder-input .btn {

        width: 100%;

        height: 48px;

        margin-top: 9px;
    }


    .hp-hosting-hero .hp-domain-price-chips {

        gap: 6px;
    }


    .hp-hosting-hero .hp-domain-price-chips span {

        font-size: 9px;

        padding:
            5px 7px;
    }


    .hp-hosting-hero .hp-domain-finder-links {

        align-items: flex-start;

        gap: 9px;

        flex-direction: column;
    }


    /* Benefits 1-per-line on phone */

    .hp-hosting-hero .hp-hero-benefits {

        margin-top: 26px;

        grid-template-columns:
            1fr;

        border-radius:
            14px 14px 0 0;
    }


    .hp-hosting-hero .hp-hero-benefits > div {

        min-height: 70px;

        padding:
            14px 16px;

        border-right: 0;

        border-bottom:
            1px solid #e8edf2;
    }


    .hp-hosting-hero .hp-hero-benefits > div:last-child {

        border-bottom: 0;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 479.98px) {

    .hp-hosting-hero {

        padding-top: 31px;

        background-position:
            center center,
            67% center;
    }


    .hp-hosting-hero .hp-hero-copy h1 {

        font-size: 29px;
    }


    .hp-hosting-hero .hp-hero-subtitle {

        font-size: 14px;
    }


    .hp-hosting-hero .hp-hero-points li {

        font-size: 12.5px;
    }


    .hp-hosting-hero .hp-domain-finder {

        padding: 16px;
    }


    .hp-hosting-hero .hp-domain-finder-title {

        font-size: 19px;
    }

}

/* END HOSTPLUS HERO IMAGE + MOBILE */


/* BEGIN HOSTPLUS PASS 8 MOBILE POLISH */

/*
 ============================================================
 HOSTPLUS MOBILE POLISH
 ============================================================
*/


/* ==========================================================
   TABLET / MOBILE
========================================================== */

@media (max-width: 767.98px) {

    /*
     * HERO BENEFITS
     * 2 x 2 instead of four long rows.
     */

    .hp-hosting-hero .hp-hero-benefits {

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        margin-top: 24px;

        border-radius:
            14px 14px 0 0;
    }


    .hp-hosting-hero .hp-hero-benefits > div {

        min-height: 82px;

        padding:
            13px 12px;

        gap: 9px;

        border-right:
            1px solid #e8edf2;

        border-bottom:
            1px solid #e8edf2;
    }


    .hp-hosting-hero .hp-hero-benefits > div:nth-child(2n) {

        border-right: 0;
    }


    .hp-hosting-hero .hp-hero-benefits > div:nth-last-child(-n+2) {

        border-bottom: 0;
    }


    .hp-hosting-hero .hp-hero-benefits i {

        flex:
            0 0 34px;

        width: 34px;

        height: 34px;

        font-size: 15px;
    }


    .hp-hosting-hero .hp-hero-benefits strong {

        font-size: 11px;

        line-height: 1.2;
    }


    .hp-hosting-hero .hp-hero-benefits span {

        font-size: 9.5px;

        line-height: 1.25;
    }


    /*
     * PRODUCT CARDS
     * Keep one card per row but reduce unnecessary vertical height.
     */

    .hp-pricing-grid > [class*="col-"] {

        margin-bottom:
            18px !important;
    }


    .hp-pricing-visual {

        height: 112px;
    }


    .hp-pricing-icon {

        width: 62px;

        height: 62px;

        border-radius: 17px;

        font-size: 27px;
    }


    .hp-pricing-orbit-one {

        width: 108px;

        height: 108px;
    }


    .hp-pricing-orbit-two {

        width: 154px;

        height: 154px;
    }


    .hp-pricing-body {

        padding:
            20px 20px 14px;
    }


    .hp-pricing-product-name {

        margin-bottom: 14px;
    }


    .hp-pricing-price {

        min-height: 42px;
    }


    .hp-pricing-price strong {

        font-size: 32px;
    }


    .hp-pricing-billing {

        padding-bottom: 11px;

        margin-bottom: 12px;
    }


    .hp-pricing-features li {

        margin-bottom: 6px;

        font-size: 11px;
    }


    .hp-pricing-footer {

        padding:
            0 20px 20px;
    }


    /*
     * ACTION CARDS
     */

    .hp-action-card {

        min-height: 116px;

        padding:
            16px 10px;

        font-size: 12px;
    }


    .hp-action-card i {

        margin-bottom: 10px;

        font-size: 25px;
    }


    /*
     * The fifth item should not sit alone on the left.
     */

    .hp-help-section .hp-action-grid > div:last-child,
    .hp-account-section .hp-action-grid > div:last-child {

        margin-left: auto;

        margin-right: auto;
    }


    /*
     * Reduce the large empty area before footer.
     */

    .hp-account-section {

        padding-bottom:
            12px !important;
    }


    .hp-mega-footer {

        margin-top:
            24px !important;

        padding-top:
            38px !important;
    }

}


/* ==========================================================
   SMALL PHONES
========================================================== */

@media (max-width: 479.98px) {

    .hp-hosting-hero .hp-hero-benefits > div {

        min-height: 78px;

        padding:
            11px 9px;

        gap: 7px;
    }


    .hp-hosting-hero .hp-hero-benefits i {

        flex-basis: 31px;

        width: 31px;

        height: 31px;

        border-radius: 8px;

        font-size: 14px;
    }


    .hp-hosting-hero .hp-hero-benefits strong {

        font-size: 10px;
    }


    .hp-hosting-hero .hp-hero-benefits span {

        font-size: 8.5px;
    }


    .hp-real-products {

        padding-top:
            32px;

        padding-bottom:
            30px;
    }


    .hp-reference-heading {

        margin-bottom:
            26px;
    }


    .hp-section-heading {

        margin-bottom:
            25px;
    }


    .hp-section-heading h2 {

        font-size:
            25px;
    }


    .hp-action-card {

        min-height:
            108px;
    }


    .hp-mega-footer {

        margin-top:
            18px !important;

        padding-top:
            32px !important;
    }

}

/* END HOSTPLUS PASS 8 MOBILE POLISH */


/* BEGIN HOSTPLUS DOMAIN PICKS V2 */


/* ----------------------------------------------------------
   .GR / .COM / .EU
---------------------------------------------------------- */

.hp-domain-finder .hp-domain-picks {

    display: grid;

    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: 8px;

    margin:
        15px 0 13px;
}


.hp-domain-finder .hp-domain-pick {

    min-width: 0;

    min-height: 57px;

    padding:
        8px 7px;

    border:
        1px solid #dae3ed;

    border-radius:
        10px;

    background:
        #f7f9fc;

    color:
        #0b315e;

    appearance:
        none;

    cursor:
        pointer;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        4px;

    transition:
        all .18s ease;

    box-shadow:
        0 3px 11px
        rgba(8, 38, 72, .05);
}


.hp-domain-finder .hp-domain-pick:hover {

    border-color:
        #f58a16;

    background:
        #fff9f1;

    transform:
        translateY(-1px);
}


.hp-domain-finder .hp-domain-pick.is-active {

    color:
        #fff;

    border-color:
        #f58a16;

    background:
        linear-gradient(
            135deg,
            #ff9b22,
            #f47700
        );

    box-shadow:
        0 8px 19px
        rgba(244,119,0,.20);
}


.hp-domain-pick-tld {

    font-size:
        14px;

    line-height:
        1;

    font-weight:
        850;
}


.hp-domain-pick-price {

    white-space:
        nowrap;

    font-size:
        9px;

    line-height:
        1.1;

    font-weight:
        650;

    opacity:
        .86;
}


/* ----------------------------------------------------------
   TRANSFER / ALL PRICES
---------------------------------------------------------- */

.hp-domain-finder .hp-domain-finder-links {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        8px;

    padding-top:
        12px;

    margin-top:
        3px;

    align-items:
        stretch;
}


.hp-domain-finder .hp-domain-finder-links #btnTransfer,
.hp-domain-finder .hp-domain-finder-links > a {

    width:
        100%;

    min-height:
        39px;

    margin:
        0 !important;

    padding:
        7px 8px !important;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        9px !important;

    font-size:
        10.5px !important;

    line-height:
        1.2;

    font-weight:
        750 !important;

    text-align:
        center;

    text-decoration:
        none !important;
}


/* Μεταφορά domain */

.hp-domain-finder .hp-domain-finder-links #btnTransfer {

    color:
        #0a3768 !important;

    background:
        #eef4fa !important;

    border:
        1px solid #cbd9e7 !important;

    box-shadow:
        none !important;
}


/* Όλες οι τιμές */

.hp-domain-finder .hp-domain-finder-links > a {

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #ff9b22,
            #f47700
        );

    border:
        1px solid #f47700 !important;
}


.hp-domain-finder .hp-domain-finder-links #btnTransfer:hover {

    color:
        #082e5b !important;

    background:
        #e4eef7 !important;
}


.hp-domain-finder .hp-domain-finder-links > a:hover {

    color:
        #fff !important;

    background:
        #e96f00;
}


/* ----------------------------------------------------------
   MOBILE
---------------------------------------------------------- */

@media (max-width: 767.98px) {

    .hp-domain-finder .hp-domain-picks {

        gap:
            6px;

        margin:
            12px 0 11px;
    }


    .hp-domain-finder .hp-domain-pick {

        min-height:
            53px;

        padding:
            7px 4px;
    }


    .hp-domain-pick-tld {

        font-size:
            13px;
    }


    .hp-domain-pick-price {

        font-size:
            8px;
    }


    .hp-domain-finder .hp-domain-finder-links {

        grid-template-columns:
            1fr 1fr;

        gap:
            7px;
    }


    .hp-domain-finder .hp-domain-finder-links #btnTransfer,
    .hp-domain-finder .hp-domain-finder-links > a {

        min-height:
            42px;

        font-size:
            10px !important;
    }

}


@media (max-width: 359.98px) {

    .hp-domain-finder .hp-domain-picks {

        grid-template-columns:
            1fr;
    }


    .hp-domain-finder .hp-domain-pick {

        min-height:
            42px;

        padding:
            8px 12px;

        flex-direction:
            row;

        justify-content:
            space-between;
    }

}

/* END HOSTPLUS DOMAIN PICKS V2 */


/* BEGIN HOSTPLUS BRAND SLOGAN */


/*
 ============================================================
 HOSTPLUS SLOGAN V4
 Real SVG flowing waves
 ============================================================
*/


.hp-brand-promise {

    position: relative;

    width: 100vw;

    margin-left:
        calc(50% - 50vw);

    height: 170px;

    margin-top: 0;
    margin-bottom: 0;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 52%,
            #f9fbfe 100%
        );
}


/* ==========================================================
   SVG ARTWORK
========================================================== */

.hp-promise-svg {

    position: absolute;

    z-index: 1;

    inset: 0;

    width: 100%;

    height: 100%;

    pointer-events: none;

    overflow: visible;
}


/* ==========================================================
   CENTRAL CLOUD
========================================================== */

.hp-promise-cloud {

    position: absolute;

    z-index: 1;

    left: 50%;

    top: 41%;

    transform:
        translate(-50%, -50%);

    color:
        rgba(72,148,214,.10);

    font-size:
        98px;

    line-height:
        1;

    pointer-events:
        none;
}


/* ==========================================================
   CENTRAL WHITE LIGHT AREA
========================================================== */

.hp-brand-promise:after {

    content: "";

    position: absolute;

    z-index: 2;

    left: 50%;

    top: 50%;

    width:
        min(880px, 62vw);

    height:
        155px;

    transform:
        translate(-50%, -50%);

    background:
        radial-gradient(
            ellipse at center,
            rgba(255,255,255,.99) 0%,
            rgba(255,255,255,.95) 42%,
            rgba(255,255,255,.70) 61%,
            rgba(255,255,255,0) 82%
        );

    pointer-events:
        none;
}


/* ==========================================================
   TEXT
========================================================== */

.hp-brand-promise-inner {

    position: relative;

    z-index: 3;

    width: 100%;

    max-width: 1260px;

    margin:
        0 auto;

    padding:
        23px 30px 20px;

    text-align:
        center;
}


.hp-brand-promise-title {

    display: flex;

    align-items: flex-start;

    justify-content: center;

    gap:
        15px;
}


.hp-brand-promise-title h2 {

    margin: 0;

    color:
        #092e5d;

    font-size:
        clamp(30px, 2.2vw, 40px);

    line-height:
        1.17;

    font-weight:
        500;

    letter-spacing:
        -.7px;
}


.hp-brand-promise-title h2 strong {

    position: relative;

    display: inline-block;

    color:
        #f47700;

    font-weight:
        800;

    white-space:
        nowrap;
}


.hp-brand-promise-title h2 strong:after {

    content: "";

    position: absolute;

    left: 5%;
    right: 5%;

    bottom: -7px;

    height: 4px;

    border-radius:
        100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(244,119,0,.35),
            rgba(255,161,44,.75),
            rgba(244,119,0,.35),
            transparent
        );

    filter:
        blur(.5px);
}


/* ==========================================================
   QUOTES
========================================================== */

.hp-promise-quote {

    position: relative;

    top:
        -5px;

    color:
        #ff8909;

    font-family:
        Georgia, serif;

    font-size:
        61px;

    line-height:
        .7;

    font-weight:
        700;

    text-shadow:
        0 6px 18px
        rgba(244,119,0,.12);
}


/* ==========================================================
   SECONDARY TEXT
========================================================== */

.hp-brand-promise-inner p {

    margin:
        13px auto 0;

    color:
        #74859a;

    font-size:
        12.5px;

    line-height:
        1.5;

    font-weight:
        450;
}


.hp-promise-accent {

    width:
        90px;

    height:
        3px;

    margin:
        15px auto 0;

    border-radius:
        999px;

    background:
        linear-gradient(
            90deg,
            #ff9d29,
            #f47700
        );

    box-shadow:
        0 3px 11px
        rgba(244,119,0,.16);
}


/* ==========================================================
   PRODUCTS SHOULD START IMMEDIATELY BELOW
========================================================== */

.hp-brand-promise + .hp-real-products {

    padding-top:
        18px !important;
}


.hp-brand-promise + .hp-real-products
.hp-reference-heading {

    margin-bottom:
        35px;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991.98px) {

    .hp-brand-promise {

        height:
            160px;
    }


    .hp-brand-promise-title h2 {

        font-size:
            29px;
    }


    .hp-promise-quote {

        font-size:
            50px;
    }


    .hp-promise-cloud {

        font-size:
            80px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {

    .hp-brand-promise {

        height:
            176px;
    }


    .hp-brand-promise-inner {

        padding:
            25px 20px 21px;
    }


    .hp-brand-promise-title {

        position:
            relative;

        display:
            block;

        padding:
            0 16px;
    }


    .hp-brand-promise-title h2 {

        max-width:
            520px;

        margin:
            0 auto;

        font-size:
            23px;

        line-height:
            1.30;

        letter-spacing:
            -.35px;
    }


    .hp-brand-promise-title h2 strong {

        display:
            block;

        width:
            max-content;

        max-width:
            100%;

        margin:
            3px auto 0;
    }


    .hp-promise-quote {

        position:
            absolute;

        top:
            -4px;

        font-size:
            37px;
    }


    .hp-promise-quote-left {

        left:
            0;
    }


    .hp-promise-quote-right {

        right:
            0;
    }


    .hp-brand-promise-inner p {

        max-width:
            390px;

        margin-top:
            11px;

        font-size:
            10.8px;
    }


    .hp-promise-accent {

        width:
            68px;

        margin-top:
            12px;
    }


    .hp-promise-cloud {

        top:
            38%;

        font-size:
            68px;
    }


    /*
     * Show less of each side on phones
     * so waves don't collide with text.
     */

    .hp-promise-svg {

        width:
            145%;

        left:
            -22.5%;
    }


    .hp-brand-promise + .hp-real-products {

        padding-top:
            16px !important;
    }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 479.98px) {

    .hp-brand-promise {

        height:
            180px;
    }


    .hp-brand-promise-title h2 {

        font-size:
            21px;
    }


    .hp-brand-promise-inner p {

        font-size:
            10.2px;
    }


    .hp-promise-svg {

        opacity:
            .70;
    }

}


/* END HOSTPLUS BRAND SLOGAN */


/* BEGIN HOSTPLUS SLOGAN V4.1 */


/*
 ============================================================
 HOSTPLUS SLOGAN V4.1
 Closer to approved initial mockup
 ============================================================
*/


/* Main problem:
   previous section was 170px and vertically centered,
   creating too much empty space above the slogan.
*/

.hp-brand-promise {

    height: 132px !important;

    min-height: 132px !important;

    align-items:
        flex-start !important;
}


/* Move the actual message upward */

.hp-brand-promise-inner {

    padding:
        18px 30px 10px !important;
}


/* Slightly larger / more prominent slogan */

.hp-brand-promise-title h2 {

    font-size:
        clamp(30px, 2.15vw, 38px) !important;

    line-height:
        1.12 !important;
}


/* Quotes closer to text */

.hp-promise-quote {

    top:
        -2px !important;

    font-size:
        56px !important;
}


/* Secondary line closer */

.hp-brand-promise-inner p {

    margin-top:
        9px !important;

    font-size:
        12px !important;
}


/* Smaller orange underline */

.hp-promise-accent {

    width:
        78px !important;

    height:
        2px !important;

    margin-top:
        10px !important;
}


/* Cloud should sit behind headline,
   not high above it */

.hp-promise-cloud {

    top:
        38% !important;

    font-size:
        82px !important;
}


/* Pull SVG waves toward the slogan */

.hp-promise-svg {

    top:
        -13px !important;

    height:
        145px !important;
}


/* Reduce the white central masking,
   so side waves remain visible */

.hp-brand-promise:after {

    width:
        min(760px, 54vw) !important;

    height:
        125px !important;

    top:
        43% !important;
}


/* Product heading comes much closer */

.hp-brand-promise + .hp-real-products {

    padding-top:
        8px !important;
}


.hp-brand-promise + .hp-real-products
.hp-reference-heading {

    margin-bottom:
        31px !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991.98px) {

    .hp-brand-promise {

        height:
            130px !important;

        min-height:
            130px !important;
    }


    .hp-brand-promise-inner {

        padding-top:
            17px !important;
    }


    .hp-brand-promise-title h2 {

        font-size:
            27px !important;
    }


    .hp-promise-svg {

        top:
            -8px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {

    .hp-brand-promise {

        height:
            154px !important;

        min-height:
            154px !important;
    }


    .hp-brand-promise-inner {

        padding:
            19px 18px 12px !important;
    }


    .hp-brand-promise-title h2 {

        font-size:
            22px !important;

        line-height:
            1.26 !important;
    }


    .hp-brand-promise-inner p {

        margin-top:
            8px !important;

        font-size:
            10.5px !important;
    }


    .hp-promise-accent {

        margin-top:
            9px !important;
    }


    .hp-promise-svg {

        top:
            -2px !important;

        height:
            150px !important;
    }


    .hp-brand-promise + .hp-real-products {

        padding-top:
            7px !important;
    }

}


/* END HOSTPLUS SLOGAN V4.1 */


/* BEGIN HOSTPLUS FOOTER LOGO */

.hp-footer-brand img {

    display: block;

    width: auto;

    max-width: 245px !important;

    max-height: 82px !important;

    object-fit: contain;

    filter: none !important;

    opacity: 1 !important;
}


/* Mobile */

@media (max-width: 767.98px) {

    .hp-footer-brand img {

        max-width: 220px !important;

        max-height: 74px !important;

    }

}


/* Small mobile */

@media (max-width: 479.98px) {

    .hp-footer-brand img {

        max-width: 195px !important;

        max-height: 66px !important;

    }

}

/* END HOSTPLUS FOOTER LOGO */


/* BEGIN HOSTPLUS INNER SERVICES PASS 1 */


/*
 ============================================================
 HOSTPLUS INTERNAL SERVICES PAGE
 Modern client-area application UI
 ============================================================
*/


/* ==========================================================
   PAGE HERO
========================================================== */

.hp-inner-services-hero {

    position: relative;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #f8fbff 0%,
            #ffffff 100%
        );

    border-bottom:
        1px solid #e6edf5;
}


.hp-inner-services-hero:before,
.hp-inner-services-hero:after {

    content: "";

    position: absolute;

    width: 58%;

    height: 80px;

    top: 48px;

    pointer-events: none;

    border-top:
        1px solid rgba(45,135,210,.16);

    border-radius:
        50%;
}


.hp-inner-services-hero:before {

    left: -10%;

    transform:
        rotate(2deg);
}


.hp-inner-services-hero:after {

    right: -10%;

    transform:
        rotate(-2deg);

    border-color:
        rgba(244,119,0,.16);
}


.hp-inner-services-hero > .container {

    position: relative;

    z-index: 2;

    min-height: 112px;

    display: flex;

    align-items: center;

    gap: 18px;
}


.hp-inner-hero-icon {

    flex:
        0 0 54px;

    width: 54px;

    height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #ff9c24,
            #f47700
        );

    border-radius:
        16px;

    font-size:
        25px;

    box-shadow:
        0 10px 25px
        rgba(244,119,0,.20);
}


.hp-inner-hero-copy h1 {

    margin:
        0 0 4px;

    color:
        #082d5b;

    font-size:
        29px;

    line-height:
        1.2;

    font-weight:
        800;

    letter-spacing:
        -.35px;
}


.hp-inner-hero-copy p {

    margin: 0;

    color:
        #748399;

    font-size:
        13px;
}


/* ==========================================================
   BREADCRUMB AFTER PAGE HERO
========================================================== */

.hp-inner-services-hero + .master-breadcrumb {

    background:
        #fff;

    border-bottom:
        1px solid #e9eef4;

    box-shadow: none;
}


.hp-inner-services-hero + .master-breadcrumb
.breadcrumb {

    padding-top:
        11px;

    padding-bottom:
        11px;

    margin-bottom: 0;

    font-size:
        11px;
}


/* ==========================================================
   PAGE BACKGROUND / SPACING
========================================================== */

.hp-inner-services-hero ~ #main-body {

    padding-top:
        22px !important;

    padding-bottom:
        30px !important;

    background:
        #f4f7fb;
}


.hp-inner-services-hero ~ #main-body > .container {

    max-width:
        1320px;
}


/* ==========================================================
   SIDEBAR
========================================================== */

.hp-inner-services-hero ~ #main-body .sidebar {

    margin-bottom:
        18px;
}


.hp-inner-services-hero ~ #main-body .sidebar .card {

    overflow: hidden;

    margin-bottom:
        17px;

    background:
        #fff;

    border:
        1px solid #e2e9f1 !important;

    border-radius:
        15px !important;

    box-shadow:
        0 7px 22px
        rgba(9,43,80,.06) !important;
}


.hp-inner-services-hero ~ #main-body
.sidebar .card-header {

    min-height:
        46px;

    display: flex;

    align-items: center;

    padding:
        12px 16px;

    color:
        #0a315d;

    background:
        #fff;

    border-bottom:
        1px solid #edf1f5;

    font-size:
        12px;

    font-weight:
        800;
}


/*
 * First sidebar panel = Partner identity card
 */

.hp-inner-services-hero ~ #main-body
.sidebar:first-child .card:first-child .card-header {

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #07386d,
            #0b58a0
        ) !important;

    border-bottom: 0;

    min-height:
        54px;
}


.hp-inner-services-hero ~ #main-body
.sidebar:first-child .card:first-child .card-body {

    padding:
        17px 16px;
}


.hp-inner-services-hero ~ #main-body
.sidebar .card-body {

    padding:
        14px 16px;

    color:
        #526479;

    font-size:
        11px;

    line-height:
        1.6;
}


/* Partner button */

.hp-inner-services-hero ~ #main-body
.sidebar:first-child .card:first-child
.btn-success,

.hp-inner-services-hero ~ #main-body
.sidebar:first-child .card:first-child
.btn-primary {

    width:
        100%;

    margin-top:
        10px;

    min-height:
        40px;

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #ff9b22,
            #f47700
        ) !important;

    border:
        0 !important;

    border-radius:
        9px !important;

    font-size:
        11px;

    font-weight:
        800;

    box-shadow:
        0 7px 17px
        rgba(244,119,0,.18);
}


/* Sidebar links */

.hp-inner-services-hero ~ #main-body
.sidebar .list-group-item {

    padding:
        10px 15px;

    color:
        #53657a;

    background:
        transparent;

    border-color:
        #edf1f5;

    font-size:
        11px;
}


.hp-inner-services-hero ~ #main-body
.sidebar .list-group-item:hover {

    color:
        #0b3e74;

    background:
        #f7faff;
}


/* ==========================================================
   RIGHT CONTENT CARD
========================================================== */

.hp-inner-services-hero ~ #main-body
.primary-content {

    position: relative;

    min-width: 0;

    padding:
        24px !important;

    background:
        #fff;

    border:
        1px solid #e2e9f1;

    border-radius:
        17px;

    box-shadow:
        0 9px 30px
        rgba(7,39,76,.065);
}


/* Add card title without changing WHMCS table logic */

.hp-inner-services-hero ~ #main-body
.primary-content:before {

    content:
        "Οι υπηρεσίες σας";

    display: block;

    margin:
        0 0 5px;

    padding-left:
        44px;

    min-height:
        34px;

    color:
        #092e5c;

    font-size:
        20px;

    line-height:
        34px;

    font-weight:
        800;

    background:
        radial-gradient(
            circle at 17px 17px,
            #fff1df 0,
            #fff1df 16px,
            transparent 17px
        );
}


.hp-inner-services-hero ~ #main-body
.primary-content:after {

    content:
        "Διαχειριστείτε τα πακέτα φιλοξενίας και τις ενεργές υπηρεσίες σας.";

    display: block;

    position: absolute;

    top:
        57px;

    left:
        68px;

    color:
        #8795a6;

    font-size:
        10.5px;

    pointer-events:
        none;
}


/* Give header area room */

.hp-inner-services-hero ~ #main-body
.primary-content > *:first-child {

    margin-top:
        22px;
}


/* ==========================================================
   DATATABLE CONTROLS
========================================================== */

.hp-inner-services-hero ~ #main-body
.dataTables_wrapper {

    color:
        #536478;

    font-size:
        11px;
}


.hp-inner-services-hero ~ #main-body
.dataTables_filter {

    margin-bottom:
        14px;
}


.hp-inner-services-hero ~ #main-body
.dataTables_filter input {

    width:
        235px !important;

    height:
        39px;

    padding:
        8px 12px;

    color:
        #1b3554;

    background:
        #f8fafc;

    border:
        1px solid #dbe4ed !important;

    border-radius:
        9px !important;

    box-shadow: none !important;
}


.hp-inner-services-hero ~ #main-body
.dataTables_filter input:focus {

    background:
        #fff;

    border-color:
        #7daed8 !important;

    box-shadow:
        0 0 0 3px
        rgba(35,119,193,.08) !important;
}


/* ==========================================================
   SERVICES TABLE
========================================================== */

.hp-inner-services-hero ~ #main-body
#tableServicesList,

.hp-inner-services-hero ~ #main-body
table.table-list {

    width:
        100% !important;

    margin-top:
        12px !important;

    overflow:
        hidden;

    background:
        #fff;

    border:
        1px solid #e2e8ef !important;

    border-radius:
        12px;

    border-collapse:
        separate !important;

    border-spacing:
        0;
}


.hp-inner-services-hero ~ #main-body
#tableServicesList thead th,

.hp-inner-services-hero ~ #main-body
table.table-list thead th {

    height:
        43px;

    padding:
        11px 12px !important;

    color:
        #69788c;

    background:
        #f7f9fc;

    border-top: 0 !important;

    border-bottom:
        1px solid #e1e7ee !important;

    font-size:
        9.5px;

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .25px;

    vertical-align:
        middle;
}


.hp-inner-services-hero ~ #main-body
#tableServicesList tbody td,

.hp-inner-services-hero ~ #main-body
table.table-list tbody td {

    padding:
        13px 12px !important;

    color:
        #42566d;

    background:
        #fff;

    border-top:
        1px solid #edf1f5 !important;

    vertical-align:
        middle;

    font-size:
        11px;
}


.hp-inner-services-hero ~ #main-body
#tableServicesList tbody tr:hover td,

.hp-inner-services-hero ~ #main-body
table.table-list tbody tr:hover td {

    background:
        #f8fbfe;
}


/* Strong service name */

.hp-inner-services-hero ~ #main-body
#tableServicesList tbody strong,

.hp-inner-services-hero ~ #main-body
table.table-list tbody strong {

    color:
        #102f55;

    font-weight:
        800;
}


/* Domain link */

.hp-inner-services-hero ~ #main-body
#tableServicesList tbody a,

.hp-inner-services-hero ~ #main-body
table.table-list tbody a {

    color:
        #1470b8;

    font-weight:
        600;
}


/* ==========================================================
   STATUS PILLS
========================================================== */

.hp-inner-services-hero ~ #main-body
.label,

.hp-inner-services-hero ~ #main-body
.badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        25px;

    padding:
        5px 10px !important;

    border-radius:
        999px !important;

    border:
        0 !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .15px;
}


.hp-inner-services-hero ~ #main-body
.label-success,

.hp-inner-services-hero ~ #main-body
.badge-success {

    color:
        #21883b !important;

    background:
        #e4f7e8 !important;
}


.hp-inner-services-hero ~ #main-body
.label-danger,

.hp-inner-services-hero ~ #main-body
.badge-danger {

    color:
        #d62d2d !important;

    background:
        #fde8e8 !important;
}


.hp-inner-services-hero ~ #main-body
.label-warning,

.hp-inner-services-hero ~ #main-body
.badge-warning {

    color:
        #9b6a00 !important;

    background:
        #fff3cf !important;
}


.hp-inner-services-hero ~ #main-body
.label-default,

.hp-inner-services-hero ~ #main-body
.label-secondary,

.hp-inner-services-hero ~ #main-body
.badge-secondary {

    color:
        #65758a !important;

    background:
        #eef2f6 !important;
}


/* ==========================================================
   DATATABLE FOOTER / PAGINATION
========================================================== */

.hp-inner-services-hero ~ #main-body
.dataTables_info,

.hp-inner-services-hero ~ #main-body
.dataTables_length {

    margin-top:
        13px;

    color:
        #67788b;

    font-size:
        10.5px;
}


.hp-inner-services-hero ~ #main-body
.dataTables_length select {

    min-height:
        34px;

    padding:
        4px 8px;

    border:
        1px solid #dce4ec;

    border-radius:
        7px;
}


.hp-inner-services-hero ~ #main-body
.pagination {

    margin-top:
        12px;
}


.hp-inner-services-hero ~ #main-body
.pagination .page-link {

    min-width:
        34px;

    height:
        34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #53677e;

    border-color:
        #dfe6ee;

    font-size:
        10px;
}


.hp-inner-services-hero ~ #main-body
.pagination .active .page-link {

    color:
        #fff;

    background:
        #f5820b;

    border-color:
        #f5820b;
}


/* ==========================================================
   REMOVE LARGE EMPTY GAP BEFORE FOOTER
========================================================== */

body:has(.hp-inner-services-hero)
.hp-mega-footer {

    margin-top:
        18px !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991.98px) {

    .hp-inner-services-hero > .container {

        min-height:
            100px;
    }


    .hp-inner-hero-copy h1 {

        font-size:
            25px;
    }


    .hp-inner-services-hero ~ #main-body
    .primary-content {

        padding:
            19px !important;
    }


    .hp-inner-services-hero ~ #main-body
    .dataTables_filter input {

        width:
            190px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {

    .hp-inner-services-hero > .container {

        min-height:
            92px;

        gap:
            13px;

        padding-top:
            14px;

        padding-bottom:
            14px;
    }


    .hp-inner-hero-icon {

        flex-basis:
            45px;

        width:
            45px;

        height:
            45px;

        border-radius:
            13px;

        font-size:
            20px;
    }


    .hp-inner-hero-copy h1 {

        font-size:
            20px;

        line-height:
            1.2;
    }


    .hp-inner-hero-copy p {

        margin-top:
            4px;

        font-size:
            10.5px;

        line-height:
            1.4;
    }


    .hp-inner-services-hero ~ #main-body {

        padding-top:
            15px !important;
    }


    .hp-inner-services-hero ~ #main-body
    .primary-content {

        margin-top:
            3px;

        padding:
            15px !important;

        border-radius:
            14px;
    }


    .hp-inner-services-hero ~ #main-body
    .primary-content:before {

        padding-left:
            39px;

        font-size:
            18px;
    }


    .hp-inner-services-hero ~ #main-body
    .primary-content:after {

        position:
            static;

        display:
            block;

        margin:
            -5px 0 15px 39px;

        font-size:
            9.5px;
    }


    .hp-inner-services-hero ~ #main-body
    .primary-content > *:first-child {

        margin-top:
            0;
    }


    .hp-inner-services-hero ~ #main-body
    .dataTables_filter {

        float:
            none !important;

        text-align:
            left !important;
    }


    .hp-inner-services-hero ~ #main-body
    .dataTables_filter input {

        width:
            100% !important;

        margin-left:
            0 !important;

        margin-top:
            5px;
    }


    /*
     * Keep table functional on phones:
     * horizontal scrolling instead of destroying columns.
     */

    .hp-inner-services-hero ~ #main-body
    .dataTables_wrapper {

        overflow-x:
            auto;

        -webkit-overflow-scrolling:
            touch;
    }


    .hp-inner-services-hero ~ #main-body
    #tableServicesList,

    .hp-inner-services-hero ~ #main-body
    table.table-list {

        min-width:
            760px;
    }


    body:has(.hp-inner-services-hero)
    .hp-mega-footer {

        margin-top:
            10px !important;
    }

}


/* END HOSTPLUS INNER SERVICES PASS 1 */


/* BEGIN HOSTPLUS INNER SERVICES PASS 2 */


/*
 ============================================================
 HOSTPLUS INTERNAL SERVICES
 Refinement toward dashboard mockup
 ============================================================
*/


/* ==========================================================
   WIDER APPLICATION CANVAS
========================================================== */

body:has(.hp-inner-services-hero)
#main-body > .container,

body:has(.hp-inner-services-hero)
.hp-inner-services-hero > .container,

body:has(.hp-inner-services-hero)
.master-breadcrumb > .container {

    max-width: 1380px !important;
}


/*
 * Give the sidebar proper dashboard proportions.
 */

@media (min-width: 1200px) {

    body:has(.hp-inner-services-hero)
    #main-body .col-xl-3 {

        flex:
            0 0 24% !important;

        max-width:
            24% !important;
    }


    body:has(.hp-inner-services-hero)
    #main-body .col-xl-9 {

        flex:
            0 0 76% !important;

        max-width:
            76% !important;
    }

}


/* ==========================================================
   PAGE HERO - TIGHTER / CLEANER
========================================================== */

.hp-inner-services-hero > .container {

    min-height:
        104px !important;
}


.hp-inner-hero-icon {

    width:
        50px;

    height:
        50px;

    flex-basis:
        50px;

    border-radius:
        14px;
}


.hp-inner-hero-copy h1 {

    font-size:
        27px;

    letter-spacing:
        -.45px;
}


.hp-inner-hero-copy p {

    font-size:
        12px;
}


/* ==========================================================
   SIDEBAR - PREMIUM ACCOUNT CARD
========================================================== */

body:has(.hp-inner-services-hero)
.sidebar .card {

    border-radius:
        16px !important;

    box-shadow:
        0 7px 23px
        rgba(8,42,78,.065) !important;
}


/*
 * First account card header.
 */

body:has(.hp-inner-services-hero)
.sidebar .card:first-child .card-header {

    min-height:
        56px;

    padding:
        14px 17px;

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #073768 0%,
            #0b5aa4 100%
        ) !important;

    border:
        0 !important;

    font-size:
        13px;

    font-weight:
        800;
}


body:has(.hp-inner-services-hero)
.sidebar .card:first-child .card-header * {

    color:
        #fff !important;
}


body:has(.hp-inner-services-hero)
.sidebar .card:first-child .card-body {

    padding:
        17px 18px 16px !important;

    font-size:
        11.5px;

    line-height:
        1.8;
}


body:has(.hp-inner-services-hero)
.sidebar .card:first-child .card-body strong {

    color:
        #203b59;

    font-weight:
        800;
}


/*
 * Partner dashboard button.
 */

body:has(.hp-inner-services-hero)
.sidebar .card:first-child .btn {

    min-height:
        43px;

    margin-top:
        11px;

    border-radius:
        9px !important;

    font-size:
        11.5px;

    letter-spacing:
        .1px;

    box-shadow:
        0 8px 18px
        rgba(244,119,0,.18) !important;
}


/* ==========================================================
   OTHER SIDEBAR PANELS
========================================================== */

body:has(.hp-inner-services-hero)
.sidebar .card:not(:first-child) .card-header {

    min-height:
        49px;

    padding:
        13px 17px;

    color:
        #153758;

    background:
        #fff;

    font-size:
        12.5px;

    font-weight:
        800;
}


body:has(.hp-inner-services-hero)
.sidebar .card:not(:first-child) .card-body {

    padding:
        8px 17px 13px;
}


body:has(.hp-inner-services-hero)
.sidebar .list-group-item {

    min-height:
        39px;

    padding:
        10px 13px;

    font-size:
        11.5px;
}


/* ==========================================================
   MAIN APPLICATION CARD
========================================================== */

body:has(.hp-inner-services-hero)
#main-body .primary-content {

    padding:
        27px 29px 21px !important;

    border:
        1px solid #dfe7ef !important;

    border-radius:
        17px !important;

    box-shadow:
        0 10px 30px
        rgba(8,41,77,.06) !important;
}


/*
 * Remove the artificial beige circle.
 * Use a clean orange accent like the rest of HostPlus.
 */

body:has(.hp-inner-services-hero)
#main-body .primary-content:before {

    min-height:
        auto !important;

    margin:
        0 0 6px !important;

    padding:
        1px 0 1px 14px !important;

    color:
        #0a315e !important;

    background:
        none !important;

    border-left:
        4px solid #f5820b;

    line-height:
        1.25 !important;

    font-size:
        21px !important;

    font-weight:
        800 !important;
}


body:has(.hp-inner-services-hero)
#main-body .primary-content:after {

    top:
        57px !important;

    left:
        43px !important;

    color:
        #8492a4 !important;

    font-size:
        11px !important;
}


/*
 * Space below title area.
 */

body:has(.hp-inner-services-hero)
#main-body .primary-content > *:first-child {

    margin-top:
        31px !important;
}


/* ==========================================================
   SEARCH
========================================================== */

body:has(.hp-inner-services-hero)
.dataTables_filter {

    margin:
        0 0 17px !important;
}


body:has(.hp-inner-services-hero)
.dataTables_filter input {

    width:
        255px !important;

    height:
        42px !important;

    padding:
        9px 13px !important;

    color:
        #183655;

    background:
        #f8fafc;

    border:
        1px solid #d8e2ec !important;

    border-radius:
        10px !important;

    font-size:
        12px !important;

    transition:
        all .18s ease;
}


body:has(.hp-inner-services-hero)
.dataTables_filter input:hover {

    background:
        #fff;

    border-color:
        #b8cadb !important;
}


body:has(.hp-inner-services-hero)
.dataTables_filter input:focus {

    background:
        #fff;

    border-color:
        #5e9ed3 !important;

    box-shadow:
        0 0 0 3px
        rgba(54,128,190,.08) !important;
}


/* ==========================================================
   TABLE
========================================================== */

body:has(.hp-inner-services-hero)
#tableServicesList,

body:has(.hp-inner-services-hero)
table.table-list {

    margin-top:
        15px !important;

    border-radius:
        12px !important;

    box-shadow:
        0 2px 5px
        rgba(8,42,77,.025);
}


body:has(.hp-inner-services-hero)
#tableServicesList thead th,

body:has(.hp-inner-services-hero)
table.table-list thead th {

    height:
        46px !important;

    padding:
        12px 13px !important;

    color:
        #6e7f92 !important;

    background:
        #f5f8fb !important;

    font-size:
        10px !important;

    font-weight:
        800 !important;

    letter-spacing:
        .25px;
}


body:has(.hp-inner-services-hero)
#tableServicesList tbody td,

body:has(.hp-inner-services-hero)
table.table-list tbody td {

    min-height:
        58px;

    padding:
        14px 13px !important;

    color:
        #43586f !important;

    font-size:
        12px !important;

    line-height:
        1.45;
}


body:has(.hp-inner-services-hero)
#tableServicesList tbody td:first-child,

body:has(.hp-inner-services-hero)
table.table-list tbody td:first-child {

    width:
        50px;

    text-align:
        center;
}


body:has(.hp-inner-services-hero)
#tableServicesList tbody strong,

body:has(.hp-inner-services-hero)
table.table-list tbody strong {

    color:
        #102f54 !important;

    font-size:
        12.5px;

    font-weight:
        800;
}


body:has(.hp-inner-services-hero)
#tableServicesList tbody a,

body:has(.hp-inner-services-hero)
table.table-list tbody a {

    color:
        #1170ba !important;

    font-size:
        11.5px;

    font-weight:
        650;
}


body:has(.hp-inner-services-hero)
#tableServicesList tbody tr {

    transition:
        background .15s ease;
}


body:has(.hp-inner-services-hero)
#tableServicesList tbody tr:hover td {

    background:
        #f7fbff !important;
}


/* ==========================================================
   SERVICE LOCK ICONS
========================================================== */

body:has(.hp-inner-services-hero)
#tableServicesList tbody td:first-child i {

    font-size:
        16px;
}


/* ==========================================================
   STATUS PILLS
========================================================== */

body:has(.hp-inner-services-hero)
#tableServicesList .label,

body:has(.hp-inner-services-hero)
#tableServicesList .badge {

    min-width:
        62px;

    min-height:
        26px;

    padding:
        5px 10px !important;

    border-radius:
        999px !important;

    font-size:
        9.5px !important;

    font-weight:
        850 !important;
}


/* ==========================================================
   BOTTOM CONTROLS
========================================================== */

body:has(.hp-inner-services-hero)
.dataTables_length,

body:has(.hp-inner-services-hero)
.dataTables_info {

    margin-top:
        15px !important;

    color:
        #65778a;

    font-size:
        11px;
}


body:has(.hp-inner-services-hero)
.dataTables_length select {

    min-width:
        52px;

    min-height:
        35px;

    background:
        #fff;

    border:
        1px solid #d9e3ec;

    border-radius:
        8px;
}


body:has(.hp-inner-services-hero)
.pagination {

    margin:
        15px 0 0 !important;
}


body:has(.hp-inner-services-hero)
.pagination .page-link {

    min-width:
        36px;

    height:
        36px;

    font-size:
        10.5px;
}


/* ==========================================================
   FOOTER CONNECTION
========================================================== */

body:has(.hp-inner-services-hero)
.hp-mega-footer {

    margin-top:
        22px !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991.98px) {

    body:has(.hp-inner-services-hero)
    #main-body .primary-content {

        padding:
            22px !important;
    }


    body:has(.hp-inner-services-hero)
    .dataTables_filter input {

        width:
            220px !important;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {

    body:has(.hp-inner-services-hero)
    #main-body .primary-content {

        padding:
            17px !important;
    }


    body:has(.hp-inner-services-hero)
    #main-body .primary-content:before {

        padding-left:
            11px !important;

        font-size:
            18px !important;
    }


    body:has(.hp-inner-services-hero)
    #main-body .primary-content:after {

        position:
            static !important;

        margin:
            7px 0 15px 15px !important;

        font-size:
            10px !important;
    }


    body:has(.hp-inner-services-hero)
    #main-body .primary-content > *:first-child {

        margin-top:
            0 !important;
    }


    body:has(.hp-inner-services-hero)
    .dataTables_filter input {

        width:
            100% !important;

        height:
            43px !important;
    }


    body:has(.hp-inner-services-hero)
    #tableServicesList,

    body:has(.hp-inner-services-hero)
    table.table-list {

        min-width:
            820px;
    }

}


/* END HOSTPLUS INNER SERVICES PASS 2 */


/* BEGIN HOSTPLUS SERVICES REAL TEMPLATE */


/*
 ============================================================
 REAL CLIENTAREAPRODUCTS TEMPLATE
 ============================================================
*/


/* ==========================================================
   REMOVE CSS-GENERATED HEADER FROM PREVIOUS PASSES
========================================================== */

body:has(.hp-services-app)
#main-body .primary-content:before,

body:has(.hp-services-app)
#main-body .primary-content:after {

    content:
        none !important;

    display:
        none !important;
}


body:has(.hp-services-app)
#main-body .primary-content > *:first-child {

    margin-top:
        0 !important;
}


/* ==========================================================
   PRIMARY CONTENT IS NOW ONLY A LAYOUT COLUMN
========================================================== */

body:has(.hp-services-app)
#main-body .primary-content {

    padding:
        0 !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        0 !important;

    box-shadow:
        none !important;
}


/* ==========================================================
   APPLICATION CARD
========================================================== */

.hp-services-app {

    overflow:
        hidden;

    width:
        100%;

    background:
        #ffffff;

    border:
        1px solid #dfe7ef;

    border-radius:
        17px;

    box-shadow:
        0 10px 30px
        rgba(8,41,77,.065);
}


/* ==========================================================
   CARD HEADER
========================================================== */

.hp-services-app-header {

    min-height:
        112px;

    padding:
        23px 25px 19px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfdff 100%
        );

    border-bottom:
        1px solid #edf1f5;
}


.hp-services-heading {

    min-width: 0;

    display:
        flex;

    align-items:
        center;

    gap:
        14px;
}


.hp-services-heading-icon {

    flex:
        0 0 47px;

    width:
        47px;

    height:
        47px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #f47b08;

    background:
        #fff1e1;

    border:
        1px solid #ffe1bd;

    border-radius:
        14px;

    font-size:
        21px;
}


.hp-services-heading-copy {

    min-width:
        0;
}


.hp-services-heading-copy h2 {

    margin:
        0 0 3px;

    color:
        #0a315e;

    font-size:
        21px;

    line-height:
        1.2;

    font-weight:
        800;

    letter-spacing:
        -.25px;
}


.hp-services-heading-copy > p {

    margin:
        0;

    color:
        #8190a2;

    font-size:
        11px;

    line-height:
        1.4;
}


/* ==========================================================
   DATATABLE INFO UNDER TITLE
========================================================== */

.hp-services-summary-slot {

    min-height:
        16px;

    margin-top:
        8px;
}


.hp-services-summary-slot
.dataTables_info {

    float:
        none !important;

    clear:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    color:
        #7c8a9b;

    font-size:
        10px;
}


/* ==========================================================
   SEARCH
========================================================== */

.hp-services-search-slot {

    position:
        relative;

    flex:
        0 0 285px;

    max-width:
        285px;
}


.hp-services-search-slot
.dataTables_filter {

    float:
        none !important;

    margin:
        0 !important;

    text-align:
        left !important;
}


.hp-services-search-slot
.dataTables_filter label {

    display:
        block;

    width:
        100%;

    margin:
        0;
}


.hp-services-search-slot
.dataTables_filter input {

    width:
        100% !important;

    height:
        43px !important;

    margin:
        0 !important;

    padding:
        9px 13px 9px 40px !important;

    color:
        #183855;

    background:
        #f8fafc;

    border:
        1px solid #d9e3ec !important;

    border-radius:
        10px !important;

    outline:
        none;

    font-size:
        11.5px !important;

    box-shadow:
        none !important;

    transition:
        border-color .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.hp-services-search-slot
.dataTables_filter input::placeholder {

    color:
        #9ba8b6;

    opacity:
        1;
}


.hp-services-search-slot
.dataTables_filter input:focus {

    background:
        #fff;

    border-color:
        #79a9d1 !important;

    box-shadow:
        0 0 0 3px
        rgba(46,123,188,.08) !important;
}


.hp-services-search-icon {

    position:
        absolute;

    z-index:
        4;

    left:
        14px;

    top:
        50%;

    transform:
        translateY(-50%);

    color:
        #51718f;

    font-size:
        14px;

    pointer-events:
        none;
}


/* ==========================================================
   TABLE SHELL
========================================================== */

.hp-services-table-shell {

    padding:
        0 25px;

    overflow-x:
        auto;

    -webkit-overflow-scrolling:
        touch;
}


.hp-services-table-shell
.table-container {

    margin:
        0;
}


/* ==========================================================
   SERVICES TABLE
========================================================== */

body:has(.hp-services-app)
#tableServicesList {

    width:
        100% !important;

    margin:
        0 !important;

    background:
        #fff;

    border:
        1px solid #e1e8ef !important;

    border-collapse:
        separate !important;

    border-spacing:
        0;

    border-radius:
        12px;

    overflow:
        hidden;

    box-shadow:
        0 2px 5px
        rgba(8,42,77,.022);
}


body:has(.hp-services-app)
#tableServicesList thead th {

    height:
        47px;

    padding:
        11px 13px !important;

    color:
        #687a8f !important;

    background:
        #f5f8fb !important;

    border:
        0 !important;

    border-bottom:
        1px solid #dee7ef !important;

    font-size:
        9.5px !important;

    line-height:
        1.25;

    font-weight:
        800 !important;

    text-transform:
        uppercase;

    letter-spacing:
        .25px;

    vertical-align:
        middle;
}


body:has(.hp-services-app)
#tableServicesList tbody td {

    padding:
        13px !important;

    color:
        #465a70;

    background:
        #fff;

    border:
        0 !important;

    border-bottom:
        1px solid #edf1f5 !important;

    font-size:
        11.5px !important;

    line-height:
        1.4;

    vertical-align:
        middle;

    transition:
        background .15s ease;
}


body:has(.hp-services-app)
#tableServicesList tbody tr:last-child td {

    border-bottom:
        0 !important;
}


.hp-service-row {

    cursor:
        pointer;
}


.hp-service-row:hover td {

    background:
        #f7fbff !important;
}


/* ==========================================================
   ICON COLUMN
========================================================== */

.hp-service-icon-column {

    width:
        54px !important;
}


.hp-service-security {

    width:
        54px;

    text-align:
        center;
}


.hp-service-security img {

    width:
        26px;

    height:
        auto;

    transition:
        transform .16s ease;
}


.hp-service-row:hover
.hp-service-security img {

    transform:
        scale(1.05);
}


/* ==========================================================
   PRODUCT / DOMAIN
========================================================== */

.hp-service-product {

    min-width:
        210px;
}


.hp-service-product strong {

    display:
        inline-block;

    margin-bottom:
        2px;

    color:
        #102f54 !important;

    font-size:
        12px;

    font-weight:
        800;
}


.hp-service-product a {

    color:
        #126fb8 !important;

    font-size:
        11px;

    font-weight:
        650;

    text-decoration:
        none !important;
}


.hp-service-product a:hover {

    color:
        #f47700 !important;
}


.hp-service-no-domain {

    color:
        #a3aebb;
}


/* ==========================================================
   PRICE / DATE
========================================================== */

.hp-service-price {

    white-space:
        nowrap;
}


.hp-service-price small {

    margin-left:
        3px;

    color:
        #9aa5b1 !important;

    font-size:
        8.5px;
}


.hp-service-due {

    white-space:
        nowrap;

    color:
        #667a90 !important;
}


/* ==========================================================
   STATUS
========================================================== */

.hp-service-status {

    width:
        130px;

    white-space:
        nowrap;
}


.hp-service-status
.status {

    display:
        inline-flex !important;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        67px;

    min-height:
        27px;

    padding:
        5px 11px !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    font-size:
        9px !important;

    line-height:
        1;

    font-weight:
        850 !important;

    letter-spacing:
        .2px;
}


/* Active */

.hp-service-status
.status-active {

    color:
        #248c3e !important;

    background:
        #e3f7e7 !important;
}


/* Pending */

.hp-service-status
.status-pending {

    color:
        #776224 !important;

    background:
        #fff4cf !important;
}


/* Suspended */

.hp-service-status
.status-suspended {

    color:
        #c93030 !important;

    background:
        #fde7e7 !important;
}


/* Terminated */

.hp-service-status
.status-terminated {

    color:
        #657485 !important;

    background:
        #e9eef3 !important;
}


/* Cancelled */

.hp-service-status
.status-cancelled {

    color:
        #6d7783 !important;

    background:
        #eef1f4 !important;
}


/* ==========================================================
   APP FOOTER
========================================================== */

.hp-services-app-footer {

    min-height:
        68px;

    padding:
        14px 25px 15px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    background:
        #fff;

    border-top:
        1px solid #edf1f5;
}


/* ==========================================================
   PAGE LENGTH SELECTOR
========================================================== */

.hp-services-length-slot
.dataTables_length {

    float:
        none !important;

    margin:
        0 !important;

    color:
        #718194;

    font-size:
        10.5px;
}


.hp-services-length-slot
.dataTables_length label {

    margin:
        0;
}


.hp-services-length-slot
select {

    height:
        35px;

    min-width:
        54px;

    margin:
        0 5px;

    padding:
        4px 7px;

    color:
        #344e69;

    background:
        #fff;

    border:
        1px solid #dbe4ed;

    border-radius:
        8px;
}


/* ==========================================================
   PAGINATION
========================================================== */

.hp-services-pagination-slot
.dataTables_paginate {

    float:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;
}


.hp-services-pagination-slot
.pagination {

    margin:
        0 !important;
}


.hp-services-pagination-slot
.page-link {

    min-width:
        35px;

    height:
        35px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #62758a;

    background:
        #fff;

    border-color:
        #dfe7ef;

    font-size:
        9.5px;
}


.hp-services-pagination-slot
.active .page-link {

    color:
        #fff !important;

    background:
        #f47b08 !important;

    border-color:
        #f47b08 !important;
}


/* ==========================================================
   DATATABLE DEFAULT GENERATED ROWS
========================================================== */

body:has(.hp-services-app)
#tableServicesList_wrapper
.row {

    margin-left:
        0;

    margin-right:
        0;
}


body:has(.hp-services-app)
#tableServicesList_wrapper
> .row:first-child,

body:has(.hp-services-app)
#tableServicesList_wrapper
> .row:last-child {

    margin:
        0;
}


/* ==========================================================
   LOADING
========================================================== */

.hp-services-loading {

    padding:
        30px;

    color:
        #748599;

    font-size:
        11px;
}


/* ==========================================================
   PAGE FOOTER GAP
========================================================== */

body:has(.hp-services-app)
.hp-mega-footer {

    margin-top:
        20px !important;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 991.98px) {

    .hp-services-app-header {

        padding:
            20px;

        gap:
            18px;
    }


    .hp-services-search-slot {

        flex-basis:
            240px;

        max-width:
            240px;
    }


    .hp-services-table-shell {

        padding:
            0 20px;
    }


    .hp-services-app-footer {

        padding-left:
            20px;

        padding-right:
            20px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {

    .hp-services-app {

        border-radius:
            14px;
    }


    .hp-services-app-header {

        min-height:
            0;

        padding:
            18px 16px;

        display:
            block;
    }


    .hp-services-heading {

        align-items:
            flex-start;
    }


    .hp-services-heading-icon {

        flex-basis:
            42px;

        width:
            42px;

        height:
            42px;

        border-radius:
            12px;

        font-size:
            18px;
    }


    .hp-services-heading-copy h2 {

        font-size:
            18px;
    }


    .hp-services-heading-copy > p {

        font-size:
            10px;
    }


    .hp-services-summary-slot {

        margin-top:
            6px;
    }


    .hp-services-search-slot {

        width:
            100%;

        max-width:
            none;

        margin-top:
            15px;
    }


    .hp-services-table-shell {

        padding:
            0 14px;
    }


    body:has(.hp-services-app)
    #tableServicesList {

        min-width:
            760px;
    }


    .hp-services-app-footer {

        min-height:
            0;

        padding:
            13px 15px;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            11px;
    }


    .hp-services-length-slot {

        text-align:
            center;
    }


    .hp-services-pagination-slot {

        display:
            flex;

        justify-content:
            center;
    }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 479.98px) {

    .hp-inner-services-hero
    .hp-inner-hero-copy h1 {

        font-size:
            18px !important;
    }


    .hp-inner-services-hero
    .hp-inner-hero-copy p {

        font-size:
            9.5px !important;
    }

}


/* END HOSTPLUS SERVICES REAL TEMPLATE */


/* BEGIN HOSTPLUS SERVICES POLISH PASS 3 */


/*
 ============================================================
 SIDEBAR HEADERS
 ============================================================
*/


body:has(.hp-services-app)
.sidebar .card-header {

    position:
        relative;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;
}


body:has(.hp-services-app)
.sidebar .card-header .card-title {

    min-width:
        0;

    flex:
        1 1 auto;

    margin:
        0 !important;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;
}


/*
 * Push WHMCS collapse toggle fully right.
 */

body:has(.hp-services-app)
.sidebar .card-header .card-minimise {

    flex:
        0 0 auto;

    margin-left:
        auto !important;

    padding:
        4px 2px 4px 8px;

    color:
        #6d8093 !important;

    line-height:
        1;
}


body:has(.hp-services-app)
.hp-partner-card .card-header .card-minimise {

    color:
        rgba(255,255,255,.88) !important;
}


body:has(.hp-services-app)
.sidebar .card-header .card-minimise i {

    font-size:
        11px;

    transition:
        transform .18s ease;
}


/* ==========================================================
   SIDEBAR TITLE ICONS
========================================================== */

.hp-sidebar-title-icon {

    flex:
        0 0 29px;

    width:
        29px;

    height:
        29px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #1363a6;

    background:
        #edf6fd;

    border-radius:
        9px;

    font-size:
        13px;
}


.hp-partner-card
.hp-sidebar-title-icon {

    color:
        #fff;

    background:
        rgba(255,255,255,.13);
}


/* ==========================================================
   PARTNER CARD
========================================================== */

body:has(.hp-services-app)
.hp-partner-card {

    position:
        relative;

    overflow:
        hidden;
}


body:has(.hp-services-app)
.hp-partner-card:after {

    content: "";

    position:
        absolute;

    right:
        -42px;

    bottom:
        -57px;

    width:
        145px;

    height:
        145px;

    border:
        1px solid rgba(24,112,181,.07);

    border-radius:
        50%;

    pointer-events:
        none;
}


body:has(.hp-services-app)
.hp-partner-card .card-body {

    position:
        relative;

    z-index:
        2;
}


/*
 * Partner Active status.
 */

.hp-partner-status {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        22px;

    margin-left:
        4px;

    padding:
        3px 8px;

    color:
        #278a40;

    background:
        #e2f7e7;

    border:
        1px solid #c9efd2;

    border-radius:
        999px;

    font-size:
        9px;

    line-height:
        1;

    font-weight:
        800;

    vertical-align:
        middle;
}


.hp-partner-status:before {

    content: "";

    width:
        6px;

    height:
        6px;

    margin-right:
        5px;

    background:
        #39a852;

    border-radius:
        50%;
}


/* ==========================================================
   PARTNER DASHBOARD BUTTON
========================================================== */

body:has(.hp-services-app)
.hp-partner-dashboard-btn {

    position:
        relative;

    min-height:
        43px !important;

    padding:
        10px 37px 10px 14px !important;

    display:
        flex !important;

    align-items:
        center;

    justify-content:
        center;

    color:
        #fff !important;

    background:
        linear-gradient(
            135deg,
            #ff9b22,
            #f47700
        ) !important;

    border:
        0 !important;

    border-radius:
        10px !important;

    font-size:
        10.5px !important;

    font-weight:
        850 !important;

    letter-spacing:
        .18px;

    box-shadow:
        0 8px 18px
        rgba(244,119,0,.19) !important;

    transition:
        transform .16s ease,
        box-shadow .16s ease;
}


body:has(.hp-services-app)
.hp-partner-dashboard-btn:after {

    content:
        "\f061";

    position:
        absolute;

    right:
        15px;

    top:
        50%;

    transform:
        translateY(-50%);

    font-family:
        "Font Awesome 5 Pro";

    font-weight:
        300;

    font-size:
        11px;
}


body:has(.hp-services-app)
.hp-partner-dashboard-btn:hover {

    color:
        #fff !important;

    transform:
        translateY(-1px);

    box-shadow:
        0 11px 24px
        rgba(244,119,0,.24) !important;
}


/* ==========================================================
   VIEW / ACTION CARDS
========================================================== */

body:has(.hp-services-app)
.hp-sidebar-view-card .card-header,

body:has(.hp-services-app)
.hp-sidebar-actions-card .card-header {

    color:
        #12395f;

    background:
        linear-gradient(
            180deg,
            #fff,
            #fbfdff
        );
}


body:has(.hp-services-app)
.hp-sidebar-view-card .list-group-item,

body:has(.hp-services-app)
.hp-sidebar-actions-card .list-group-item {

    min-height:
        41px;

    display:
        flex;

    align-items:
        center;

    border-color:
        #eef2f6;

    transition:
        background .15s ease,
        color .15s ease;
}


body:has(.hp-services-app)
.hp-sidebar-view-card .list-group-item:hover,

body:has(.hp-services-app)
.hp-sidebar-actions-card .list-group-item:hover {

    color:
        #0a518d;

    background:
        #f5faff;
}


/*
 * Numeric badges on filter card.
 */

body:has(.hp-services-app)
.hp-sidebar-view-card
.list-group-item .badge {

    min-width:
        24px;

    height:
        21px;

    margin-left:
        auto;

    padding:
        3px 7px !important;

    color:
        #47637e !important;

    background:
        #edf3f8 !important;

    border-radius:
        999px !important;

    font-size:
        9px !important;
}


/* ==========================================================
   SEARCH - STRONGER / CLEARER
========================================================== */

.hp-services-search-slot {

    flex-basis:
        315px !important;

    max-width:
        315px !important;
}


.hp-services-search-slot
.dataTables_filter input {

    height:
        45px !important;

    padding-left:
        42px !important;

    background:
        #f9fbfd !important;

    border-color:
        #d5e0ea !important;

    font-size:
        11.5px !important;
}


.hp-services-search-icon {

    left:
        15px !important;

    color:
        #496b88 !important;

    font-size:
        14px !important;
}


/* ==========================================================
   FIX "Δείτε 10 καταχωρίσεις"
========================================================== */

.hp-services-length-slot {

    display:
        flex;

    align-items:
        center;

    min-height:
        36px;
}


.hp-services-length-slot
.dataTables_length {

    width:
        auto !important;

    margin:
        0 !important;

    padding:
        0 !important;

    float:
        none !important;

    white-space:
        nowrap !important;
}


.hp-services-length-slot
.dataTables_length label {

    width:
        auto !important;

    margin:
        0 !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    gap:
        6px;

    white-space:
        nowrap !important;

    color:
        #6d7e91;

    font-size:
        10.5px;
}


.hp-services-length-slot
.dataTables_length select {

    display:
        inline-block !important;

    width:
        58px !important;

    min-width:
        58px !important;

    height:
        35px !important;

    margin:
        0 2px !important;

    padding:
        4px 7px !important;

    color:
        #274866;

    background:
        #fff;

    border:
        1px solid #d7e1ea !important;

    border-radius:
        8px !important;
}


/* ==========================================================
   APP FOOTER
========================================================== */

.hp-services-app-footer {

    min-height:
        62px !important;

    padding-top:
        12px !important;

    padding-bottom:
        12px !important;
}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767.98px) {

    .hp-services-search-slot {

        width:
            100% !important;

        max-width:
            none !important;

        flex-basis:
            auto !important;
    }


    .hp-services-length-slot {

        justify-content:
            center;
    }


    body:has(.hp-services-app)
    .sidebar .card-header .card-title {

        font-size:
            12px;
    }


    .hp-sidebar-title-icon {

        flex-basis:
            27px;

        width:
            27px;

        height:
            27px;
    }

}


/* END HOSTPLUS SERVICES POLISH PASS 3 */


/* BEGIN HOSTPLUS SERVICES MICROFIX 4 */


/*
 ============================================================
 1. SEARCH MAGNIFIER - PERFECT VERTICAL ALIGNMENT
 ============================================================
*/

.hp-services-search-slot {

    position:
        relative !important;

    height:
        45px !important;

    display:
        flex !important;

    align-items:
        center !important;
}


.hp-services-search-slot
.dataTables_filter {

    width:
        100% !important;

    height:
        45px !important;

    display:
        block !important;

    margin:
        0 !important;
}


.hp-services-search-slot
.dataTables_filter label {

    width:
        100% !important;

    height:
        45px !important;

    display:
        block !important;

    margin:
        0 !important;
}


.hp-services-search-slot
.dataTables_filter input {

    width:
        100% !important;

    height:
        45px !important;

    margin:
        0 !important;

    padding:
        0 14px 0 43px !important;

    line-height:
        45px !important;
}


.hp-services-search-icon {

    position:
        absolute !important;

    z-index:
        10 !important;

    left:
        15px !important;

    top:
        0 !important;

    bottom:
        0 !important;

    width:
        18px !important;

    height:
        45px !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    transform:
        none !important;

    color:
        #52718d !important;

    pointer-events:
        none;
}


.hp-services-search-icon i {

    display:
        block !important;

    margin:
        0 !important;

    padding:
        0 !important;

    line-height:
        1 !important;

    font-size:
        14px !important;
}


/*
 ============================================================
 2. ACTIONS ICON - MAKE GEAR CLEARLY VISIBLE
 ============================================================
*/

body:has(.hp-services-app)
.hp-sidebar-actions-card
.hp-sidebar-title-icon {

    color:
        #0d5f9f !important;

    background:
        #edf6fd !important;

    border:
        1px solid #d9ebf8 !important;
}


body:has(.hp-services-app)
.hp-sidebar-actions-card
.hp-sidebar-title-icon i {

    display:
        inline-block !important;

    visibility:
        visible !important;

    opacity:
        1 !important;

    color:
        #0d5f9f !important;

    font-size:
        13px !important;

    line-height:
        1 !important;
}


/*
 * Fallback gear in case the FA glyph fails for any reason.
 */

body:has(.hp-services-app)
.hp-sidebar-actions-card
.hp-sidebar-title-icon:empty:before {

    content:
        "⚙";

    display:
        block;

    color:
        #0d5f9f;

    font-size:
        14px;

    line-height:
        1;
}


/*
 ============================================================
 3. PARTNER DASHBOARD BUTTON ARROW
 ============================================================
*/

/*
 * Disable the previous Font Awesome pseudo glyph
 * which is currently rendering as a square.
 */

body:has(.hp-services-app)
.hp-partner-dashboard-btn:after {

    content:
        "→" !important;

    right:
        15px !important;

    color:
        #fff !important;

    font-family:
        Arial, Helvetica, sans-serif !important;

    font-size:
        17px !important;

    line-height:
        1 !important;

    font-weight:
        700 !important;
}


/*
 * Give the text enough room for the arrow.
 */

body:has(.hp-services-app)
.hp-partner-dashboard-btn {

    padding-right:
        42px !important;
}


/*
 ============================================================
 MOBILE
 ============================================================
*/

@media (max-width: 767.98px) {

    .hp-services-search-slot {

        height:
            45px !important;
    }


    .hp-services-search-icon {

        height:
            45px !important;
    }

}


/* END HOSTPLUS SERVICES MICROFIX 4 */


/* BEGIN HOSTPLUS SERVICES MICROFIX 5 */


/* ==========================================================
   SEARCH ICON
   High specificity intentionally used to beat old passes.
========================================================== */

html body:has(.hp-services-app)
#main-body
.primary-content
.hp-services-search-slot {

    position: relative !important;

    height: 45px !important;

    display: block !important;
}


html body:has(.hp-services-app)
#main-body
.primary-content
.hp-services-search-slot
.dataTables_filter,

html body:has(.hp-services-app)
#main-body
.primary-content
.hp-services-search-slot
.dataTables_filter label {

    width: 100% !important;

    height: 45px !important;

    margin: 0 !important;

    padding: 0 !important;

    display: block !important;
}


html body:has(.hp-services-app)
#main-body
.primary-content
.hp-services-search-slot
.dataTables_filter input {

    width: 100% !important;

    height: 45px !important;

    margin: 0 !important;

    padding:
        0 15px 0 44px !important;

    line-height: normal !important;

    display: block !important;
}


html body:has(.hp-services-app)
#main-body
.primary-content
.hp-services-search-slot
.hp-services-search-icon {

    position: absolute !important;

    z-index: 20 !important;

    left: 15px !important;

    top: 50% !important;

    bottom: auto !important;

    width: 18px !important;

    height: 18px !important;

    margin: 0 !important;

    padding: 0 !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    transform:
        translateY(-50%) !important;

    color:
        #4d6e8a !important;

    line-height: 1 !important;

    pointer-events: none !important;
}


html body:has(.hp-services-app)
#main-body
.primary-content
.hp-services-search-slot
.hp-services-search-icon svg {

    width: 18px !important;

    height: 18px !important;

    display: block !important;

    overflow: visible;
}


/* ==========================================================
   ACTIONS GEAR
========================================================== */

html body:has(.hp-services-app)
#main-body
.hp-sidebar-actions-card
.hp-sidebar-title-icon {

    color:
        #0d5f9f !important;

    background:
        #edf6fd !important;

    border:
        1px solid #d7eaf7 !important;
}


html body:has(.hp-services-app)
#main-body
.hp-sidebar-actions-card
.hp-native-gear {

    width: 100% !important;

    height: 100% !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    color:
        #0d5f9f !important;

    font-family:
        Arial, Helvetica, sans-serif !important;

    font-size:
        16px !important;

    line-height:
        1 !important;

    font-weight:
        400 !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


/* ==========================================================
   PARTNER BUTTON
========================================================== */

/*
 * Kill every old pseudo arrow.
 */

html body:has(.hp-services-app)
#main-body
.hp-partner-dashboard-btn:after {

    content:
        none !important;

    display:
        none !important;
}


html body:has(.hp-services-app)
#main-body
.hp-partner-dashboard-btn {

    position:
        relative !important;

    padding:
        10px 43px 10px 15px !important;
}


html body:has(.hp-services-app)
#main-body
.hp-partner-dashboard-btn
.hp-partner-arrow {

    position:
        absolute !important;

    right:
        15px !important;

    top:
        50% !important;

    transform:
        translateY(-52%) !important;

    display:
        block !important;

    color:
        #ffffff !important;

    font-family:
        Arial, Helvetica, sans-serif !important;

    font-size:
        18px !important;

    line-height:
        1 !important;

    font-weight:
        700 !important;

    visibility:
        visible !important;

    opacity:
        1 !important;
}


/* END HOSTPLUS SERVICES MICROFIX 5 */