/* =========================================================
   JOMETECH HOSTING
   CLEAN WHMCS CLIENT UI 2026
   ========================================================= */

:root {
    --jt-blue: #0000CC;
    --jt-blue-dark: #000099;
    --jt-red: #FE2D2B;

    --jt-navy: #171B35;
    --jt-text: #414960;
    --jt-muted: #737B8E;

    --jt-bg: #F6F7FB;
    --jt-soft: #FAFBFD;
    --jt-border: #E4E7EE;

    --jt-radius: 14px;
    --jt-radius-lg: 18px;

    --jt-shadow:
        0 8px 30px rgba(23,27,53,.06);

    --jt-shadow-lg:
        0 18px 55px rgba(23,27,53,.10);
}


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

html,
body {
    background: var(--jt-bg) !important;
}

body {
    margin: 0 !important;

    color: var(--jt-text) !important;

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif !important;

    -webkit-font-smoothing: antialiased;
}

a {
    transition:
        color .15s ease,
        background .15s ease,
        border-color .15s ease;
}


/* =========================================================
   PROMO BAR
   ========================================================= */

.jtc-promo {
    background: var(--jt-blue);
    color: #fff;
}

.jtc-promo__inner {
    min-height: 38px;

    max-width: 1200px;
    margin: 0 auto;

    padding: 7px 22px;

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

    gap: 24px;

    font-size: 13px;
    font-weight: 600;
}

.jtc-promo a {
    color: #fff;
    font-weight: 750;

    text-decoration: none;
    white-space: nowrap;
}

.jtc-promo a:hover {
    text-decoration: underline;
}


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

.jtc-header {
    position: relative;

    background: #fff;

    border-bottom:
        1px solid var(--jt-border);

    box-shadow:
        0 3px 18px rgba(23,27,53,.035);

    z-index: 1000;
}

.jtc-header__inner {
    min-height: 82px;

    max-width: 1200px;
    margin: 0 auto;

    padding: 0 22px;

    display: flex;
    align-items: center;

    gap: 28px;
}


/* LOGO */

.jtc-logo {
    flex: 0 0 auto;

    display: flex;
    align-items: center;

    text-decoration: none;
}

.jtc-logo img {
    display: block;

    width: auto;
    height: auto;

    max-height: 47px;
    max-width: 235px;
}


/* =========================================================
   DESKTOP NAVIGATION
   ========================================================= */

.jtc-nav {
    flex: 1 1 auto;

    display: flex;
    justify-content: center;
}

.jtc-nav__list {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;

    gap: 3px;

    list-style: none;
}

.jtc-nav__item {
    position: relative;
}

.jtc-nav__link,
.jtc-nav__parent {
    min-height: 44px;

    padding: 10px 13px;

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

    gap: 7px;

    border: 0;
    border-radius: 9px;

    background: transparent;

    color: var(--jt-navy);

    font-family: inherit;
    font-size: 14.5px;
    font-weight: 650;

    line-height: 1;

    cursor: pointer;

    text-decoration: none;
    white-space: nowrap;
}

.jtc-nav__link:hover,
.jtc-nav__parent:hover,
.jtc-nav__item:focus-within > .jtc-nav__parent {
    background: #F4F5F9;
    color: var(--jt-blue);
}

.jtc-nav__chevron {
    width: 7px;
    height: 7px;

    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;

    transform: rotate(45deg) translateY(-2px);

    opacity: .65;
}


/* =========================================================
   DESKTOP DROPDOWN
   ========================================================= */

.jtc-dropdown {
    position: absolute;

    top: calc(100% + 8px);
    left: 0;

    min-width: 235px;

    margin: 0;
    padding: 8px;

    list-style: none;

    background: #fff;

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

    border-radius: 13px;

    box-shadow: var(--jt-shadow-lg);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform: translateY(6px);

    transition:
        opacity .15s ease,
        visibility .15s ease,
        transform .15s ease;

    z-index: 10000;
}

.jtc-nav__item:hover > .jtc-dropdown,
.jtc-nav__item:focus-within > .jtc-dropdown,
.jtc-nav__item.is-open > .jtc-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;

    transform: translateY(0);
}

.jtc-dropdown a {
    padding: 10px 11px;

    display: flex;
    align-items: center;

    gap: 9px;

    border-radius: 8px;

    color: var(--jt-text);

    font-size: 14px;
    font-weight: 550;

    text-decoration: none;
}

.jtc-dropdown a:hover {
    background: #F5F6FA;
    color: var(--jt-blue);
}


/* =========================================================
   ACCOUNT ACTION
   ========================================================= */

.jtc-account {
    flex: 0 0 auto;

    min-height: 43px;

    padding: 0 15px;

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

    gap: 7px;

    border:
        1px solid var(--jt-blue);

    border-radius: 10px;

    background: #fff;
    color: var(--jt-blue);

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

    text-decoration: none;

    white-space: nowrap;
}

.jtc-account:hover {
    background: var(--jt-blue);
    color: #fff;
}


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

.jtc-menu-toggle {
    display: none;

    width: 42px;
    height: 42px;

    padding: 0;

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

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

    border-radius: 10px;

    background: #fff;
    color: var(--jt-navy);

    font-size: 19px;

    cursor: pointer;
}


/* =========================================================
   WHMCS MAIN CONTENT
   ========================================================= */

#main-body {
    padding-top: 34px !important;
    padding-bottom: 60px !important;
}

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

.container {
    max-width: 1180px;
}


/* =========================================================
   BREADCRUMBS
   ========================================================= */

.master-breadcrumb,
.breadcrumb {
    border: 0 !important;

    background: #F0F2F7 !important;

    color: var(--jt-muted) !important;

    font-size: 13.5px !important;
}

.breadcrumb {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
}


/* =========================================================
   CARDS / PANELS
   ========================================================= */

.card,
.panel {
    border:
        1px solid var(--jt-border) !important;

    border-radius:
        var(--jt-radius) !important;

    background: #fff !important;

    box-shadow:
        var(--jt-shadow) !important;

    overflow: hidden;
}

.card-header,
.panel-heading {
    padding:
        16px 19px !important;

    border-bottom:
        1px solid var(--jt-border) !important;

    background:
        #FAFBFD !important;

    color:
        var(--jt-navy) !important;

    font-weight: 700 !important;
}

.card-body,
.panel-body {
    padding:
        21px !important;
}


/* =========================================================
   LOGIN / AUTH
   ========================================================= */

.logincontainer {
    width: 100% !important;
    max-width: 570px !important;

    margin:
        36px auto 0 !important;
}

.logincontainer .card {
    border-radius:
        var(--jt-radius-lg) !important;

    box-shadow:
        0 18px 50px
        rgba(23,27,53,.08) !important;
}

.logincontainer .card-body {
    padding:
        34px 30px !important;
}

.logincontainer h1,
.logincontainer h2,
.logincontainer h3 {
    color:
        var(--jt-navy) !important;

    letter-spacing:
        -.025em !important;
}

.logincontainer .text-muted {
    color:
        var(--jt-muted) !important;
}


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

label,
.form-label {
    margin-bottom:
        7px !important;

    color:
        #404966 !important;

    font-size:
        13.5px !important;

    font-weight:
        700 !important;
}

.form-control,
.custom-select,
select,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"] {
    min-height:
        48px !important;

    border:
        1px solid #DCE1EB !important;

    border-radius:
        10px !important;

    background:
        #fff !important;

    color:
        var(--jt-navy) !important;

    font-size:
        15px !important;

    box-shadow:
        none !important;
}

.form-control:focus,
.custom-select:focus,
textarea:focus,
input:focus {
    border-color:
        rgba(0,0,204,.65) !important;

    outline: 0 !important;

    box-shadow:
        0 0 0 4px
        rgba(0,0,204,.07) !important;
}

.input-group-text,
.input-group-addon {
    border-color:
        #DCE1EB !important;

    background:
        #F2F4F8 !important;

    color:
        #596174 !important;
}


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

.btn {
    min-height:
        43px !important;

    padding:
        9px 17px !important;

    border-radius:
        10px !important;

    font-weight:
        700 !important;
}

.btn-primary,
.btn-success {
    border-color:
        var(--jt-blue) !important;

    background:
        var(--jt-blue) !important;

    color:
        #fff !important;

    box-shadow:
        0 6px 18px
        rgba(0,0,204,.15) !important;
}

.btn-primary:hover,
.btn-success:hover {
    border-color:
        var(--jt-blue-dark) !important;

    background:
        var(--jt-blue-dark) !important;
}

.btn-outline-primary {
    border-color:
        var(--jt-blue) !important;

    color:
        var(--jt-blue) !important;
}

.btn-outline-primary:hover {
    background:
        var(--jt-blue) !important;

    color:
        #fff !important;
}


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

.table {
    background:
        #fff !important;
}

.table thead th {
    padding:
        13px 14px !important;

    border-bottom:
        1px solid var(--jt-border) !important;

    background:
        #F7F8FB !important;

    color:
        #596177 !important;

    font-size:
        12.5px !important;

    font-weight:
        750 !important;

    text-transform:
        uppercase !important;

    letter-spacing:
        .03em !important;
}

.table td {
    padding:
        14px !important;

    border-color:
        #EEF0F5 !important;

    vertical-align:
        middle !important;
}


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

.sidebar .card,
.sidebar .panel {
    margin-bottom:
        18px !important;
}


/* =========================================================
   ALERTS
   ========================================================= */

.alert {
    border:
        0 !important;

    border-radius:
        11px !important;

    padding:
        14px 16px !important;
}


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

.jtc-footer {
    margin-top:
        50px;

    background:
        #09122E;

    color:
        #BFC5D3;
}

.jtc-footer__inner {
    max-width:
        1180px;

    margin:
        0 auto;

    padding:
        48px 22px 28px;
}

.jtc-footer__grid {
    display:
        grid;

    grid-template-columns:
        1.5fr 1fr 1fr 1.2fr;

    gap:
        42px;
}

.jtc-footer h4 {
    margin:
        0 0 15px;

    color:
        #fff;

    font-size:
        13px;

    font-weight:
        750;

    text-transform:
        uppercase;

    letter-spacing:
        .06em;
}

.jtc-footer p {
    margin:
        0;

    line-height:
        1.7;
}

.jtc-footer ul {
    margin:
        0;

    padding:
        0;

    list-style:
        none;
}

.jtc-footer li {
    margin-bottom:
        9px;
}

.jtc-footer a {
    color:
        #CBD0DB;

    text-decoration:
        none;
}

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

.jtc-footer__bottom {
    margin-top:
        34px;

    padding-top:
        20px;

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

    color:
        #8F98AC;

    font-size:
        13px;
}


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

@media (max-width: 900px) {

    .jtc-promo__inner {
        min-height: 36px;

        padding:
            7px 12px;

        gap:
            14px;

        font-size:
            11.5px;
    }


    /*
     * Critical difference:
     * mobile menu stays IN DOCUMENT FLOW.
     */

    .jtc-header__inner {
        min-height:
            70px;

        padding:
            10px 13px;

        display:
            grid;

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

        gap:
            7px 8px;

        align-items:
            center;
    }


    .jtc-logo {
        min-width: 0;
    }

    .jtc-logo img {
        max-width:
            155px;

        max-height:
            40px;
    }


    .jtc-account {
        min-height:
            41px;

        padding:
            0 12px;

        font-size:
            13px;
    }


    .jtc-menu-toggle {
        display:
            inline-flex;
    }


    .jtc-nav {
        grid-column:
            1 / -1;

        width:
            100%;

        display:
            none;

        padding-top:
            4px;

        border-top:
            1px solid var(--jt-border);
    }


    .jtc-header.is-open
    .jtc-nav {
        display:
            block;
    }


    .jtc-nav__list {
        width:
            100%;

        padding:
            8px 0 3px;

        display:
            flex;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            2px;
    }


    .jtc-nav__item {
        width:
            100%;
    }


    .jtc-nav__link,
    .jtc-nav__parent {
        width:
            100%;

        min-height:
            44px;

        padding:
            11px 12px;

        justify-content:
            space-between;

        font-size:
            14.5px;
    }


    /*
     * Mobile submenu remains in flow too.
     */

    .jtc-dropdown {
        position:
            static;

        display:
            none;

        width:
            100%;

        min-width:
            0;

        margin:
            2px 0 6px;

        padding:
            5px;

        background:
            #F6F7FB;

        border:
            0;

        border-radius:
            9px;

        box-shadow:
            none;

        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            none;
    }


    .jtc-nav__item.is-open
    > .jtc-dropdown {
        display:
            block;
    }


    .jtc-dropdown a {
        padding:
            10px 11px;
    }


    #main-body {
        padding-top:
            22px !important;
    }


    .logincontainer {
        margin-top:
            12px !important;

        padding:
            0 12px !important;
    }


    .logincontainer .card-body {
        padding:
            28px 24px !important;
    }


    .jtc-footer__grid {
        grid-template-columns:
            1fr 1fr;
    }

}


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

@media (max-width: 520px) {

    .jtc-logo img {
        max-width:
            135px;
    }

    .jtc-account {
        min-height:
            39px;

        padding:
            0 10px;
    }

    .jtc-menu-toggle {
        width:
            39px;

        height:
            39px;
    }


    .logincontainer .card-body {
        padding:
            25px 20px !important;
    }


    .jtc-footer__grid {
        grid-template-columns:
            1fr;

        gap:
            28px;
    }

}


/* =========================================================
   END CLEAN CLIENT UI
   ========================================================= */



/* === JOMETECH CLIENT DASHBOARD V1 === */


/* =========================================================
   REMOVE OLD PORTAL BREADCRUMB STRIP
   ========================================================= */

.master-breadcrumb,
.breadcrumb-container {
    display: none !important;
}


/* =========================================================
   GENERAL CLIENT CONTENT
   ========================================================= */

#main-body {
    background: #F6F7FB !important;
}

#main-body > .container {
    max-width: 1180px !important;
}

#main-body h1,
#main-body h2,
#main-body h3,
#main-body h4 {
    color: #171B35 !important;
}

#main-body h1 {
    font-weight: 750 !important;
    letter-spacing: -.025em !important;
}

#main-body h2 {
    font-weight: 700 !important;
    letter-spacing: -.02em !important;
}


/* =========================================================
   DASHBOARD STAT TILES
   ========================================================= */

.tiles {
    display: grid !important;

    grid-template-columns:
        repeat(4, minmax(0, 1fr)) !important;

    gap: 16px !important;

    margin:
        0 0 24px !important;
}

.tiles .tile {
    position: relative !important;

    width: auto !important;
    min-height: 135px !important;

    margin: 0 !important;
    padding: 21px !important;

    overflow: hidden !important;

    border:
        1px solid #E4E7EE !important;

    border-radius:
        16px !important;

    background:
        #fff !important;

    box-shadow:
        0 8px 28px
        rgba(23,27,53,.055) !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease !important;
}

.tiles .tile:hover {
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 14px 36px
        rgba(23,27,53,.09) !important;
}

.tiles .tile .icon {
    opacity: .10 !important;

    color:
        #0000CC !important;

    font-size:
        54px !important;
}

.tiles .tile .stat {
    color:
        #171B35 !important;

    font-size:
        31px !important;

    font-weight:
        750 !important;

    line-height:
        1 !important;
}

.tiles .tile .title {
    margin-top:
        9px !important;

    color:
        #70798F !important;

    font-size:
        13px !important;

    font-weight:
        650 !important;

    text-transform:
        none !important;
}


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

.client-home-panels {
    display: grid !important;

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

    gap:
        18px !important;

    margin-top:
        22px !important;
}

.client-home-panels > div {
    width:
        100% !important;

    max-width:
        none !important;
}

.client-home-panels .panel,
.client-home-panels .card {
    height:
        100% !important;

    margin:
        0 !important;

    border:
        1px solid #E4E7EE !important;

    border-radius:
        16px !important;

    box-shadow:
        0 8px 28px
        rgba(23,27,53,.055) !important;
}

.client-home-panels .panel-heading,
.client-home-panels .card-header {
    padding:
        17px 19px !important;

    background:
        #fff !important;

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

    color:
        #171B35 !important;

    font-size:
        15px !important;

    font-weight:
        700 !important;
}

.client-home-panels .panel-body,
.client-home-panels .card-body {
    padding:
        19px !important;
}

.client-home-panels .panel-footer,
.client-home-panels .card-footer {
    padding:
        13px 19px !important;

    background:
        #FAFBFD !important;

    border-top:
        1px solid #EEF0F5 !important;
}


/* =========================================================
   SERVICES / DOMAINS / INVOICES / TICKETS TABLES
   ========================================================= */

.table-container,
.table-responsive,
.dataTables_wrapper {
    overflow-x:
        auto !important;

    border:
        1px solid #E4E7EE !important;

    border-radius:
        14px !important;

    background:
        #fff !important;

    box-shadow:
        0 7px 24px
        rgba(23,27,53,.045) !important;
}

.dataTables_wrapper {
    padding:
        0 !important;
}

table.table,
table.dataTable {
    width:
        100% !important;

    margin:
        0 !important;

    border-collapse:
        separate !important;

    border-spacing:
        0 !important;

    background:
        #fff !important;
}

table.table thead th,
table.dataTable thead th {
    padding:
        13px 15px !important;

    background:
        #F8F9FC !important;

    border:
        0 !important;

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

    color:
        #626B81 !important;

    font-size:
        11.5px !important;

    font-weight:
        750 !important;

    letter-spacing:
        .045em !important;

    text-transform:
        uppercase !important;

    white-space:
        nowrap !important;
}

table.table tbody td,
table.dataTable tbody td {
    padding:
        15px !important;

    border:
        0 !important;

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

    color:
        #404860 !important;

    vertical-align:
        middle !important;
}

table.table tbody tr:last-child td,
table.dataTable tbody tr:last-child td {
    border-bottom:
        0 !important;
}

table.table tbody tr:hover,
table.dataTable tbody tr:hover {
    background:
        #FAFBFD !important;
}


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

.dataTables_filter,
.dataTables_length,
.dataTables_info,
.dataTables_paginate {
    padding:
        14px 16px !important;
}

.dataTables_filter input,
.dataTables_length select {
    min-height:
        39px !important;

    border:
        1px solid #DEE2EA !important;

    border-radius:
        9px !important;

    background:
        #fff !important;
}

.dataTables_paginate .paginate_button,
.pagination .page-link {
    min-width:
        36px !important;

    min-height:
        36px !important;

    margin:
        0 2px !important;

    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        1px solid #E2E5EC !important;

    border-radius:
        8px !important;

    background:
        #fff !important;

    color:
        #404860 !important;
}

.pagination .page-item.active .page-link,
.dataTables_paginate .paginate_button.current {
    border-color:
        #0000CC !important;

    background:
        #0000CC !important;

    color:
        #fff !important;
}


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

.label,
.badge,
.status {
    display:
        inline-flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    min-height:
        27px !important;

    padding:
        4px 10px !important;

    border:
        0 !important;

    border-radius:
        999px !important;

    font-size:
        11.5px !important;

    font-weight:
        750 !important;

    line-height:
        1 !important;
}


/* ACTIVE / PAID */

.label-success,
.badge-success,
.status-active,
.status-paid,
.domain-status-active {
    background:
        #EAF8F1 !important;

    color:
        #138A57 !important;
}


/* PENDING */

.label-warning,
.badge-warning,
.status-pending,
.domain-status-pending {
    background:
        #FFF5DC !important;

    color:
        #A96D00 !important;
}


/* SUSPENDED / OVERDUE */

.status-suspended,
.status-overdue,
.label-danger,
.badge-danger {
    background:
        #FDECEC !important;

    color:
        #C53737 !important;
}


/* CANCELLED / TERMINATED */

.status-cancelled,
.status-terminated,
.status-expired {
    background:
        #EEF0F4 !important;

    color:
        #6C7382 !important;
}


/* INFORMATION */

.label-info,
.badge-info {
    background:
        #EEF1FF !important;

    color:
        #0000CC !important;
}


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

.sidebar .panel,
.sidebar .card {
    margin-bottom:
        16px !important;

    border:
        1px solid #E4E7EE !important;

    border-radius:
        14px !important;

    background:
        #fff !important;

    box-shadow:
        0 6px 22px
        rgba(23,27,53,.04) !important;
}

.sidebar .panel-heading,
.sidebar .card-header {
    padding:
        14px 16px !important;

    background:
        #FAFBFD !important;

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

    color:
        #171B35 !important;

    font-weight:
        700 !important;
}

.sidebar .list-group-item {
    padding:
        12px 15px !important;

    border-color:
        #EEF0F5 !important;

    color:
        #4B536A !important;
}

.sidebar .list-group-item:hover {
    background:
        #F8F9FC !important;

    color:
        #0000CC !important;
}


/* =========================================================
   EMPTY STATES
   ========================================================= */

.dataTables_empty,
.no-data,
.empty-state,
.alert-info {
    padding:
        26px !important;

    border:
        1px dashed #D5DAE4 !important;

    border-radius:
        12px !important;

    background:
        #FAFBFD !important;

    color:
        #697287 !important;

    text-align:
        center !important;
}


/* =========================================================
   TABS
   ========================================================= */

.nav-tabs {
    gap:
        5px !important;

    border-bottom:
        1px solid #E4E7EE !important;
}

.nav-tabs .nav-link {
    padding:
        10px 14px !important;

    border:
        0 !important;

    border-radius:
        9px 9px 0 0 !important;

    color:
        #697287 !important;

    font-weight:
        650 !important;
}

.nav-tabs .nav-link:hover {
    color:
        #0000CC !important;
}

.nav-tabs .nav-link.active {
    background:
        #EEF0FF !important;

    color:
        #0000CC !important;
}


/* =========================================================
   MODALS
   ========================================================= */

.modal-content {
    overflow:
        hidden !important;

    border:
        0 !important;

    border-radius:
        16px !important;

    box-shadow:
        0 26px 80px
        rgba(23,27,53,.20) !important;
}

.modal-header {
    padding:
        18px 20px !important;

    border-bottom:
        1px solid #E9ECF2 !important;
}

.modal-footer {
    padding:
        15px 20px !important;

    border-top:
        1px solid #E9ECF2 !important;
}


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

.product-listing .product,
.products .product,
.product-group,
.store-product {
    border:
        1px solid #E4E7EE !important;

    border-radius:
        16px !important;

    background:
        #fff !important;

    box-shadow:
        0 8px 28px
        rgba(23,27,53,.055) !important;

    transition:
        transform .15s ease,
        box-shadow .15s ease !important;
}

.product-listing .product:hover,
.products .product:hover,
.product-group:hover,
.store-product:hover {
    transform:
        translateY(-2px) !important;

    box-shadow:
        0 14px 38px
        rgba(23,27,53,.085) !important;
}


/* =========================================================
   PORTAL HOME PRODUCT CARDS
   ========================================================= */

#main-body .card {
    border:
        1px solid #E4E7EE !important;

    border-radius:
        16px !important;

    box-shadow:
        0 8px 28px
        rgba(23,27,53,.05) !important;
}

#main-body .card:hover {
    box-shadow:
        0 13px 35px
        rgba(23,27,53,.075) !important;
}


/* =========================================================
   LINKS
   ========================================================= */

#main-body a:not(.btn) {
    text-decoration:
        none;
}

#main-body a:not(.btn):hover {
    color:
        #0000CC;
}


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

@media (max-width: 900px) {

    .tiles {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
    }

    .client-home-panels {
        grid-template-columns:
            1fr !important;
    }

    #main-body {
        padding-left:
            0 !important;

        padding-right:
            0 !important;
    }

    #main-body > .container {
        padding-left:
            14px !important;

        padding-right:
            14px !important;
    }

}


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

@media (max-width: 560px) {

    .tiles {
        grid-template-columns:
            1fr !important;

        gap:
            11px !important;
    }

    .tiles .tile {
        min-height:
            105px !important;

        padding:
            17px !important;
    }

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

    table.table tbody td,
    table.dataTable tbody td {
        padding:
            12px !important;
    }

    .client-home-panels {
        gap:
            13px !important;
    }

}


/* === END JOMETECH CLIENT DASHBOARD V1 === */