:root {
    --material-primary: #448aff;
    --material-primary-dark: #2f6fdb;
    --material-success: #11c15b;
    --material-danger: #ff5252;
    --material-warning: #ffb64d;
    --material-info: #00bcd4;
    --material-ink: #37474f;
    --material-muted: #607d8b;
    --material-line: #e7edf3;
    --material-canvas: #f4f7fa;
    --material-surface: #fff;
    --material-radius: 6px;
    --material-shadow: 0 2px 12px rgba(55, 71, 79, .10);
}

html {
    min-height: 100%;
    background: var(--material-canvas);
}

body.material-client-area {
    min-height: 100%;
    color: var(--material-ink);
    background: var(--material-canvas);
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 14px;
    line-height: 1.6;
}

a {
    color: var(--material-primary);
}

a:hover,
a:focus {
    color: var(--material-primary-dark);
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex]:focus {
    outline: 3px solid rgba(68, 138, 255, .3);
    outline-offset: 2px;
}

#header {
    min-height: 74px;
    padding: 14px 0;
    color: #fff;
    background: linear-gradient(135deg, #37474f, #263238);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}

#header .logo {
    display: inline-flex;
    align-items: center;
    min-height: 46px;
    color: #fff;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -.02em;
}

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

.material-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 10px;
    color: #fff;
    background: var(--material-primary);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(68, 138, 255, .4);
}

#header .top-nav {
    margin-top: 7px;
}

#header .top-nav > li > a {
    color: rgba(255, 255, 255, .88);
}

#header .top-nav > li > a:hover,
#header .top-nav > li > a:focus {
    color: #fff;
    background: rgba(255, 255, 255, .1);
}

#main-menu {
    position: relative;
    z-index: 20;
    background: var(--material-surface);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .08);
}

.navbar-main {
    min-height: 54px;
    margin: 0;
    background: transparent;
    border: 0;
}

.navbar-main .navbar-nav > li > a {
    min-height: 54px;
    padding-top: 17px;
    color: var(--material-ink);
    font-weight: 600;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover {
    color: var(--material-primary);
    background: rgba(68, 138, 255, .07);
}

.navbar-main .navbar-nav > .active > a:after {
    position: absolute;
    right: 14px;
    bottom: 0;
    left: 14px;
    height: 3px;
    content: "";
    background: var(--material-primary);
}

.material-page-accent {
    height: 4px;
    background: linear-gradient(90deg, var(--material-primary), var(--material-info), var(--material-success));
}

#main-body {
    min-height: 520px;
    padding: 34px 0 52px;
}

.main-content > .header-lined {
    margin: -4px 0 24px;
    padding: 0 0 15px;
    border-bottom: 1px solid var(--material-line);
}

.main-content > .header-lined h1 {
    color: var(--material-ink);
    font-size: 27px;
    font-weight: 600;
}

.breadcrumb {
    padding: 0;
    background: transparent;
}

.panel,
.card,
.material-surface,
.logincontainer,
.domain-checker-container,
.home-kb-search {
    background: var(--material-surface);
    border: 0;
    border-radius: var(--material-radius);
    box-shadow: var(--material-shadow);
}

.panel {
    overflow: hidden;
    margin-bottom: 24px;
}

.card {
    overflow: hidden;
    margin-bottom: 24px;
    background: var(--material-surface);
    border: 0;
    border-radius: var(--material-radius);
    box-shadow: var(--material-shadow);
}

.card-header {
    min-height: 53px;
    padding: 16px 20px;
    color: var(--material-ink);
    background: #fff;
    border-bottom: 1px solid var(--material-line);
}

.card-header .card-title {
    margin: 0;
    color: var(--material-ink);
    font-size: 15px;
    font-weight: 600;
}

.card-body {
    padding: 20px;
}

.card-footer {
    padding: 13px 20px;
    background: #fbfcfd;
    border-top: 1px solid var(--material-line);
}

.float-right {
    float: right !important;
}

.text-white {
    color: #fff !important;
}

.card.bg-danger { background: var(--material-danger); }
.card.bg-secondary { background: #607d8b; }
.card.bg-info { background: var(--material-info); }
.card.bg-success { background: var(--material-success); }

.widget-box-two.card .card-body,
.widget-box-two.card a,
.widget-box-two.card .stat,
.widget-box-two.card .title,
.widget-box-two.card .icon {
    color: #fff;
}

.panel-heading {
    min-height: 53px;
    padding: 16px 20px;
    background: #fff !important;
    border-bottom: 1px solid var(--material-line);
}

.panel-heading .panel-title {
    color: var(--material-ink) !important;
    font-size: 15px;
    font-weight: 600;
}

.panel-heading .panel-title:after {
    display: block;
    width: 34px;
    height: 2px;
    margin-top: 11px;
    content: "";
    background: var(--material-primary);
}

.panel-body {
    padding: 20px;
}

.panel-footer {
    padding: 13px 20px;
    background: #fbfcfd;
    border-top: 1px solid var(--material-line);
}

.panel-sidebar .panel-heading {
    background: #37474f !important;
}

.panel-sidebar .panel-heading .panel-title {
    color: #fff !important;
}

.panel-sidebar .list-group-item {
    padding: 13px 16px;
    color: var(--material-ink);
    border-color: var(--material-line);
}

.panel-sidebar .list-group-item:hover,
.panel-sidebar .list-group-item:focus,
.panel-sidebar .list-group-item.active {
    color: var(--material-primary);
    background: #f6f9ff;
    border-left: 3px solid var(--material-primary);
}

.btn {
    min-height: 36px;
    border-radius: 4px;
    font-weight: 600;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .08);
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease;
}

.btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .13);
}

.btn-primary,
.btn-info {
    color: #fff;
    background: var(--material-primary);
    border-color: var(--material-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--material-primary-dark);
    border-color: var(--material-primary-dark);
}

.btn-success {
    background: var(--material-success);
    border-color: var(--material-success);
}

.btn-danger {
    background: var(--material-danger);
    border-color: var(--material-danger);
}

.form-control {
    min-height: 40px;
    color: var(--material-ink);
    background: #fff;
    border: 1px solid #d7e0e8;
    border-radius: 4px;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.form-control:focus {
    border-color: var(--material-primary);
    box-shadow: 0 0 0 3px rgba(68, 138, 255, .13);
}

label {
    color: #455a64;
    font-weight: 600;
}

.alert {
    border: 0;
    border-left: 4px solid;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(55, 71, 79, .08);
}

.alert-info { border-left-color: var(--material-info); }
.alert-success { border-left-color: var(--material-success); }
.alert-warning { border-left-color: var(--material-warning); }
.alert-danger { border-left-color: var(--material-danger); }

.table-responsive,
.material-table-wrap {
    border: 0;
    border-radius: var(--material-radius);
}

.table > thead > tr > th {
    padding: 13px 12px;
    color: #455a64;
    background: #f5f7fa;
    border-bottom: 2px solid #dfe7ee;
    font-size: 12px;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.table > tbody > tr > td {
    padding: 13px 12px;
    vertical-align: middle;
    border-top-color: var(--material-line);
}

.table-striped > tbody > tr:nth-of-type(odd) {
    background: #fbfcfd;
}

.label,
.badge {
    padding: 5px 8px;
    border-radius: 12px;
    font-weight: 600;
}

.label-success,
.status-active { background: var(--material-success); }
.label-danger,
.status-terminated,
.status-cancelled { background: var(--material-danger); }
.label-warning,
.status-suspended,
.status-pending { background: var(--material-warning); }
.label-info { background: var(--material-primary); }
.badge-info { color: #fff; background: var(--material-primary); }
.badge-success { color: #fff; background: var(--material-success); }
.badge-warning { color: #fff; background: var(--material-warning); }
.badge-danger { color: #fff; background: var(--material-danger); }
.badge-dark { color: #fff; background: #37474f; }

.tiles .tile > a {
    min-height: 138px;
    color: var(--material-ink);
    background: var(--material-surface);
    border: 0;
    border-radius: var(--material-radius);
    box-shadow: var(--material-shadow);
}

.tiles .tile .icon {
    color: var(--material-primary);
}

.tiles .tile .stat {
    color: var(--material-ink);
    font-size: 32px;
    font-weight: 700;
}

.tiles .tile .title {
    color: var(--material-muted);
}

.tiles .tile .highlight {
    height: 4px;
}

.home-kb-search {
    margin: 18px 0 28px;
    padding: 14px;
}

.logincontainer {
    max-width: 760px;
    padding: 28px;
}

.is-guest.template-login #main-body,
.is-guest.template-clientregister #main-body,
.is-guest.template-pwreset #main-body {
    background:
        linear-gradient(rgba(38, 50, 56, .82), rgba(38, 50, 56, .82)),
        url("../assets/images/breadcrumb-bg.jpg") center/cover fixed;
}

.is-guest.template-login .logincontainer,
.is-guest.template-clientregister .main-content > form,
.is-guest.template-pwreset .main-content {
    background: #fff;
    border-radius: var(--material-radius);
    box-shadow: 0 15px 38px rgba(0, 0, 0, .22);
}

#home-banner {
    background:
        linear-gradient(135deg, rgba(68, 138, 255, .92), rgba(0, 188, 212, .9)),
        url("../assets/images/breadcrumb-bg.jpg") center/cover;
}

#footer {
    padding: 26px 0;
    color: rgba(255, 255, 255, .75);
    background: #263238;
    border: 0;
}

#footer a {
    color: #fff;
}

.pagination > li > a,
.pagination > li > span {
    color: var(--material-primary);
    border-color: var(--material-line);
}

.pagination > .active > a,
.pagination > .active > span {
    background: var(--material-primary);
    border-color: var(--material-primary);
}

.modal-content {
    overflow: hidden;
    border: 0;
    border-radius: var(--material-radius);
    box-shadow: 0 18px 60px rgba(0, 0, 0, .25);
}

@media (max-width: 991px) {
    #main-body {
        padding-top: 24px;
    }

    .sidebar {
        margin-bottom: 20px;
    }
}

@media (max-width: 767px) {
    #header {
        min-height: 64px;
        padding: 10px 0;
    }

    #header .top-nav {
        float: none;
        clear: both;
        padding-top: 8px;
        text-align: center;
    }

    .navbar-main .navbar-nav > li > a {
        min-height: 44px;
        padding: 12px 18px;
    }

    .navbar-main .navbar-nav > .active > a:after {
        top: 8px;
        right: auto;
        bottom: 8px;
        left: 0;
        width: 3px;
        height: auto;
    }

    .tiles .tile {
        margin-bottom: 14px;
    }

    .logincontainer {
        width: auto;
        margin: 0 10px;
        padding: 20px 16px;
    }

    .table-responsive .btn {
        margin-bottom: 4px;
    }
}

.material-reset-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(390px, .98fr);
    max-width: 1120px;
    min-height: 580px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--material-surface);
    border: 1px solid var(--material-line);
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(38, 50, 56, .14);
}

.material-reset-visual {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 44px 40px 32px;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background:
        radial-gradient(circle at 16% 13%, rgba(255, 255, 255, .14), transparent 28%),
        linear-gradient(145deg, #263544, #315db6 68%, #00a8c6);
}

.material-reset-visual::after {
    position: absolute;
    right: -90px;
    bottom: -120px;
    width: 320px;
    height: 320px;
    content: "";
    background: rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.material-reset-visual-copy,
.material-reset-illustration,
.material-reset-security {
    position: relative;
    z-index: 1;
}

.material-reset-eyebrow {
    display: inline-block;
    margin-bottom: 13px;
    color: #a9ccff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.material-reset-visual h1 {
    margin: 0 0 13px;
    color: #fff !important;
    font-size: clamp(30px, 3vw, 42px);
    font-weight: 700;
    line-height: 1.15;
}

.material-reset-visual p {
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, .76) !important;
    line-height: 1.65;
}

.material-reset-illustration {
    display: block;
    width: min(100%, 530px);
    margin: 22px auto 8px;
    filter: drop-shadow(0 15px 22px rgba(13, 39, 72, .22));
}

.material-reset-security {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 600;
}

.material-reset-security i {
    color: #7ee3c3;
}

.material-reset-panel {
    display: flex;
    align-items: center;
    padding: 46px;
    background: var(--material-surface);
}

.material-reset-panel-inner {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.material-reset-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 25px;
}

.material-reset-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: #fff;
    background: var(--material-primary);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(68, 138, 255, .24);
}

.material-reset-heading h2 {
    margin: 0;
    color: var(--material-ink);
    font-size: 24px;
    font-weight: 700;
}

.material-reset-heading p {
    margin: 4px 0 0;
    color: var(--material-muted);
    font-size: 12px;
}

.material-reset-content > p {
    margin-bottom: 20px;
    color: var(--material-muted);
    line-height: 1.6;
}

.material-reset-content .form-group {
    margin-bottom: 18px;
}

.material-reset-content label {
    margin-bottom: 7px;
    color: var(--material-ink);
    font-size: 12px;
    font-weight: 700;
}

.material-content-surface .material-reset-content .form-control {
    height: 47px;
    padding: 10px 13px;
    color: var(--material-ink);
    background: #fff;
    border: 1px solid #d7e0e8;
    border-radius: 5px;
}

.material-content-surface .material-reset-content .form-control:focus {
    border-color: var(--material-primary);
    box-shadow: 0 0 0 3px rgba(68, 138, 255, .12);
}

.material-reset-content form .text-center {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 9px;
}

.material-reset-content form .btn {
    min-width: 145px;
}

.material-reset-success {
    padding: 18px;
    color: #08783a;
    background: rgba(17, 193, 91, .09);
    border: 1px solid rgba(17, 193, 91, .3);
    border-radius: 6px;
    text-align: center;
}

.material-reset-success i {
    margin-bottom: 9px;
    font-size: 28px;
}

.material-reset-success p {
    margin: 0;
}

.material-reset-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: var(--material-primary);
    font-size: 12px;
    font-weight: 700;
}

html.material-theme-dark .material-reset-shell,
html.material-theme-dark .material-reset-panel {
    background: #1c2732;
    border-color: #344554;
}

html.material-theme-dark .material-reset-heading h2,
html.material-theme-dark .material-reset-content label {
    color: #edf4fa;
}

html.material-theme-dark .material-reset-heading p,
html.material-theme-dark .material-reset-content > p {
    color: #a9bac8;
}

html.material-theme-dark .material-content-surface .material-reset-content .form-control {
    color: #edf4fa;
    background: #17212b;
    border-color: #526474;
}

@media (max-width: 991px) {
    .material-reset-shell {
        grid-template-columns: minmax(0, .85fr) minmax(380px, 1.15fr);
    }

    .material-reset-visual {
        padding: 36px 28px;
    }

    .material-reset-panel {
        padding: 38px 30px;
    }
}

@media (max-width: 767px) {
    .material-reset-shell {
        display: block;
        min-height: 0;
    }

    .material-reset-visual {
        min-height: 245px;
        padding: 27px 21px 20px;
    }

    .material-reset-visual h1 {
        font-size: 27px;
    }

    .material-reset-illustration {
        width: min(78%, 350px);
        margin: 17px auto 0;
    }

    .material-reset-security {
        display: none;
    }

    .material-reset-panel {
        padding: 30px 20px;
    }

    .material-reset-content form .btn {
        width: 100%;
    }
}

.material-login-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(390px, .92fr);
    max-width: 1160px;
    min-height: 610px;
    margin: 0 auto;
    overflow: hidden;
    background: var(--material-surface);
    border: 1px solid var(--material-line);
    border-radius: 10px;
    box-shadow: 0 10px 32px rgba(38, 50, 56, .14);
}

.material-login-visual {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 48px 44px 34px;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
    background:
        radial-gradient(circle at 15% 15%, rgba(255, 255, 255, .14), transparent 28%),
        linear-gradient(145deg, #263544, #1d6fd8 72%, #00a8c6);
}

.material-login-visual::after {
    position: absolute;
    right: -80px;
    bottom: -110px;
    width: 310px;
    height: 310px;
    content: "";
    background: rgba(255, 255, 255, .06);
    border-radius: 50%;
}

.material-login-visual-copy,
.material-login-illustration,
.material-login-trust {
    position: relative;
    z-index: 1;
}

.material-login-eyebrow {
    display: inline-block;
    margin-bottom: 14px;
    color: #a9ccff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.material-login-visual h1 {
    max-width: 520px;
    margin: 0 0 13px;
    color: #fff !important;
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 700;
    line-height: 1.14;
}

.material-login-visual p {
    max-width: 500px;
    margin: 0;
    color: rgba(255, 255, 255, .76) !important;
    font-size: 14px;
    line-height: 1.65;
}

.material-login-illustration {
    display: block;
    width: min(100%, 560px);
    margin: 24px auto 12px;
    filter: drop-shadow(0 16px 22px rgba(13, 39, 72, .22));
}

.material-login-trust {
    display: flex;
    align-items: center;
    gap: 24px;
    color: rgba(255, 255, 255, .82);
    font-size: 12px;
    font-weight: 600;
}

.material-login-trust span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.material-login-trust i {
    color: #7ee3c3;
}

.material-login-panel {
    display: flex;
    align-items: center;
    padding: 48px;
    background: var(--material-surface);
}

.material-login-panel-inner {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.material-login-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.material-login-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: #fff;
    background: var(--material-primary);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(68, 138, 255, .24);
}

.material-login-heading h2 {
    margin: 0;
    color: var(--material-ink);
    font-size: 25px;
    font-weight: 700;
}

.material-login-heading p {
    margin: 4px 0 0;
    color: var(--material-muted);
    font-size: 12px;
}

.material-login-form .form-group {
    margin-bottom: 19px;
}

.material-login-form label {
    margin-bottom: 7px;
    color: var(--material-ink);
    font-size: 12px;
    font-weight: 700;
}

.material-login-field {
    position: relative;
}

.material-login-field > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 15px;
    color: var(--material-muted);
    transform: translateY(-50%);
}

.material-content-surface .material-login-field .form-control {
    height: 47px;
    padding: 10px 14px 10px 43px;
    color: var(--material-ink);
    background: #fff;
    border: 1px solid #d7e0e8;
    border-radius: 5px;
}

.material-content-surface .material-login-field .form-control:focus {
    border-color: var(--material-primary);
    box-shadow: 0 0 0 3px rgba(68, 138, 255, .12);
}

.material-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 2px 0 22px;
    font-size: 12px;
}

.material-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--material-muted);
    font-weight: 500;
}

.material-login-options a {
    color: var(--material-primary);
    font-weight: 700;
}

.material-login-captcha {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}

.material-content-surface .material-login-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 47px;
}

.material-login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 16px;
    color: var(--material-muted);
    font-size: 11px;
    text-align: center;
}

.material-login-divider::before,
.material-login-divider::after {
    height: 1px;
    flex: 1 1 auto;
    content: "";
    background: var(--material-line);
}

.material-login-register {
    margin: 24px 0 0;
    color: var(--material-muted);
    font-size: 12px;
    text-align: center;
}

.material-login-register a {
    color: var(--material-primary);
    font-weight: 700;
}

html.material-theme-dark .material-login-shell {
    background: #1c2732;
    border-color: #344554;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .32);
}

html.material-theme-dark .material-login-panel {
    background: #1c2732;
}

html.material-theme-dark .material-login-heading h2,
html.material-theme-dark .material-login-form label {
    color: #edf4fa;
}

html.material-theme-dark .material-login-heading p,
html.material-theme-dark .material-login-remember,
html.material-theme-dark .material-login-divider,
html.material-theme-dark .material-login-register {
    color: #a9bac8;
}

html.material-theme-dark .material-content-surface .material-login-field .form-control {
    color: #edf4fa;
    background: #17212b;
    border-color: #526474;
}

@media (max-width: 991px) {
    .material-login-shell {
        grid-template-columns: minmax(0, .85fr) minmax(380px, 1.15fr);
    }

    .material-login-visual {
        padding: 38px 30px;
    }

    .material-login-panel {
        padding: 40px 32px;
    }
}

@media (max-width: 767px) {
    .material-login-shell {
        display: block;
        min-height: 0;
        border-radius: 7px;
    }

    .material-login-visual {
        min-height: 250px;
        padding: 28px 22px 22px;
    }

    .material-login-visual h1 {
        font-size: 28px;
    }

    .material-login-illustration {
        width: min(78%, 360px);
        margin: 18px auto 0;
    }

    .material-login-trust {
        display: none;
    }

    .material-login-panel {
        padding: 30px 20px;
    }
}

.material-contact {
    max-width: 1080px;
    margin: 0 auto;
}

.material-contact-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 22px 24px;
    color: #fff;
    background: linear-gradient(135deg, #263544, #34495e);
    border-radius: 7px 7px 0 0;
}

.material-contact-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: #fff;
    background: var(--material-primary);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(68, 138, 255, .28);
}

.material-contact-heading h1 {
    margin: 0;
    color: #fff !important;
    font-size: 23px;
    font-weight: 700;
}

.material-contact-heading p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .72) !important;
}

.material-contact-form {
    padding: 28px;
    background: var(--material-surface);
    border: 1px solid var(--material-line);
    border-top: 0;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 5px 18px rgba(38, 50, 56, .11);
}

.material-contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.material-contact-full {
    grid-column: 1 / -1;
}

.material-contact-form .form-group {
    margin: 0;
}

.material-contact-form label {
    display: block;
    margin-bottom: 8px;
    color: var(--material-ink);
    font-size: 13px;
    font-weight: 700;
}

.material-contact-field {
    position: relative;
}

.material-contact-field > i {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 15px;
    color: var(--material-muted);
    transform: translateY(-50%);
}

.material-content-surface .material-contact-field .form-control {
    height: 46px;
    padding: 10px 14px 10px 42px;
    color: var(--material-ink);
    background: #fff;
    border: 1px solid #d7e0e8;
    border-radius: 5px;
}

.material-content-surface .material-contact-form textarea.form-control {
    min-height: 180px;
    padding: 13px 15px;
    color: var(--material-ink);
    background: #fff;
    border: 1px solid #d7e0e8;
    border-radius: 5px;
    resize: vertical;
}

.material-content-surface .material-contact-field .form-control:focus,
.material-content-surface .material-contact-form textarea.form-control:focus {
    border-color: var(--material-primary);
    box-shadow: 0 0 0 3px rgba(68, 138, 255, .12);
}

.material-contact-captcha {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.material-contact-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--material-line);
}

.material-content-surface .material-contact-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 180px;
}

html.material-theme-dark .material-contact-form {
    background: #1c2732;
    border-color: #344554;
    box-shadow: 0 5px 20px rgba(0, 0, 0, .26);
}

html.material-theme-dark .material-contact-form label {
    color: #edf4fa;
}

html.material-theme-dark .material-content-surface .material-contact-field .form-control,
html.material-theme-dark .material-content-surface .material-contact-form textarea.form-control {
    color: #edf4fa;
    background: #17212b;
    border-color: #526474;
}

html.material-theme-dark .material-contact-field > i {
    color: #94a9b9;
}

html.material-theme-dark .material-contact-actions {
    border-top-color: #344554;
}

@media (max-width: 767px) {
    .material-contact-heading {
        align-items: flex-start;
        padding: 19px 17px;
    }

    .material-contact-form {
        padding: 20px 16px;
    }

    .material-contact-grid {
        grid-template-columns: 1fr;
        gap: 17px;
    }

    .material-contact-full {
        grid-column: auto;
    }

    .material-contact-actions .btn {
        width: 100%;
    }
}

.material-kb-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    padding: 22px 24px;
    color: #fff;
    background: linear-gradient(135deg, #263544, #34495e);
    border-radius: 7px;
    box-shadow: 0 5px 18px rgba(38, 50, 56, .16);
}

.material-kb-heading-icon,
.material-kb-section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: #fff;
    background: var(--material-primary);
    border-radius: 50%;
}

.material-kb-heading h1 {
    margin: 0;
    color: #fff !important;
    font-size: 23px;
    font-weight: 700;
}

.material-kb-heading p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .72) !important;
}

.material-kb-search {
    position: relative;
    display: flex;
    align-items: stretch;
    margin-bottom: 28px;
    padding: 7px;
    background: var(--material-surface);
    border: 1px solid var(--material-line);
    border-radius: 7px;
    box-shadow: 0 3px 14px rgba(38, 50, 56, .09);
}

.material-kb-search-icon {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 23px;
    color: var(--material-muted);
    transform: translateY(-50%);
}

.material-content-surface .material-kb-search .form-control {
    height: 46px;
    padding: 9px 16px 9px 43px;
    border: 0;
    border-radius: 4px 0 0 4px;
}

.material-content-surface .material-kb-search .btn {
    min-width: 118px;
    border-radius: 4px;
}

.material-kb-section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 16px;
}

.material-kb-section-heading .material-kb-section-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
    color: var(--material-primary);
    background: rgba(68, 138, 255, .1);
}

.material-kb-section-heading h2 {
    margin: 0;
    color: var(--material-ink);
    font-size: 20px;
    font-weight: 700;
}

.material-kb-category-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.material-kb-category-card,
.material-kb-article-card {
    position: relative;
    background: var(--material-surface);
    border: 1px solid var(--material-line);
    border-radius: 7px;
    box-shadow: 0 2px 12px rgba(38, 50, 56, .08);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.material-kb-category-card:hover,
.material-kb-article-card:hover {
    border-color: rgba(68, 138, 255, .46);
    box-shadow: 0 7px 18px rgba(38, 50, 56, .12);
    transform: translateY(-2px);
}

.material-kb-category-link {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-height: 126px;
    padding: 19px;
    color: var(--material-ink);
    text-decoration: none;
}

.material-kb-category-link:hover,
.material-kb-category-link:focus {
    color: var(--material-ink);
    text-decoration: none;
}

.material-kb-category-icon,
.material-kb-article-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    color: var(--material-primary);
    background: rgba(68, 138, 255, .1);
    border-radius: 50%;
}

.material-kb-category-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 7px;
}

.material-kb-category-copy strong,
.material-kb-article-copy > a {
    color: var(--material-primary);
    font-size: 14px;
    font-weight: 700;
}

.material-kb-category-copy > span,
.material-kb-article-copy p {
    margin: 0;
    color: var(--material-muted);
    font-size: 12px;
    line-height: 1.55;
}

.material-kb-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 27px;
    height: 27px;
    padding: 0 7px;
    color: #fff;
    background: var(--material-primary);
    border-radius: 14px;
    font-size: 11px;
    font-weight: 700;
}

.material-kb-edit {
    position: absolute !important;
    right: 10px;
    bottom: 10px;
}

.material-kb-popular-heading {
    margin-top: 30px;
}

.material-kb-article-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.material-kb-article-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    min-height: 104px;
    padding: 17px 18px;
}

.material-kb-article-icon {
    flex-basis: 36px;
    width: 36px;
    height: 36px;
}

.material-kb-article-copy {
    min-width: 0;
    flex: 1 1 auto;
}

.material-kb-article-copy > a:hover,
.material-kb-article-copy > a:focus {
    color: var(--material-primary-dark);
}

.material-kb-article-copy p {
    margin-top: 6px;
}

.material-kb-article-arrow {
    margin-top: 12px;
    color: var(--material-muted);
    font-size: 11px;
}

html.material-theme-dark .material-kb-search,
html.material-theme-dark .material-kb-category-card,
html.material-theme-dark .material-kb-article-card {
    background: #1c2732;
    border-color: #344554;
    box-shadow: 0 3px 15px rgba(0, 0, 0, .22);
}

html.material-theme-dark .material-kb-section-heading h2,
html.material-theme-dark .material-kb-category-link {
    color: #edf4fa;
}

html.material-theme-dark .material-kb-category-link:hover,
html.material-theme-dark .material-kb-category-link:focus {
    color: #edf4fa;
}

html.material-theme-dark .material-kb-category-copy > span,
html.material-theme-dark .material-kb-article-copy p,
html.material-theme-dark .material-kb-article-arrow {
    color: #a9bac8;
}

@media (max-width: 991px) {
    .material-kb-category-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .material-kb-heading {
        align-items: flex-start;
        padding: 19px 17px;
    }

    .material-kb-search {
        flex-wrap: wrap;
    }

    .material-content-surface .material-kb-search .form-control {
        width: 100%;
        border-radius: 4px;
    }

    .material-content-surface .material-kb-search .btn {
        width: 100%;
        margin-top: 7px;
    }

    .material-kb-search-icon {
        top: 30px;
    }

    .material-kb-category-grid,
    .material-kb-article-list {
        grid-template-columns: 1fr;
    }
}

@media print {
    #header,
    #main-menu,
    .material-page-accent,
    #footer,
    .sidebar {
        display: none !important;
    }

    body.material-client-area,
    #main-body {
        background: #fff !important;
    }

    .panel,
    .material-surface {
        box-shadow: none;
    }
}

.material-content-surface .widget-box-two.card.bg-danger {
    background: #ff5252;
}

.material-content-surface .widget-box-two.card.bg-secondary {
    background: #607d8b;
}

.material-content-surface .widget-box-two.card.bg-info {
    background: #00bcd4;
}

.material-content-surface .widget-box-two.card.bg-success {
    background: #11c15b;
}

.material-content-surface .widget-box-two.card,
.material-content-surface .widget-box-two.card a,
.material-content-surface .widget-box-two.card .stat,
.material-content-surface .widget-box-two.card .title,
.material-content-surface .widget-box-two.card .icon {
    color: #fff;
}

/* Product navigation converted from the WHMCSModule parent template. */
.material-product-bar {
    position: fixed;
    z-index: 1025;
    top: 64px;
    right: 0;
    left: 0;
    height: 48px;
    color: var(--material-ink);
    background: #fff;
    border-top: 1px solid #f1f4f7;
    border-bottom: 1px solid var(--material-line);
    box-shadow: 0 2px 7px rgba(55, 71, 79, .08);
    transition: left .24s ease;
}

.has-material-sidebar .material-product-bar {
    left: 260px;
}

.material-sidebar-collapsed.has-material-sidebar .material-product-bar {
    left: 0;
}

.material-product-bar-inner {
    position: relative;
    max-width: 1600px;
    height: 100%;
    margin: 0 auto;
    padding: 0 18px;
}

.material-product-menu {
    display: flex;
    align-items: stretch;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

.material-product-item {
    position: relative;
    height: 100%;
}

.material-product-utility-start {
    margin-left: auto;
}

.material-product-utility-link {
    color: #71818d;
    font-size: 12px;
}

.material-product-link {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 100%;
    padding: 0 15px;
    color: #52616c;
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, background .18s ease, border-color .18s ease;
}

.material-product-link > .fa-chevron-down {
    margin-left: 2px;
    font-size: 9px;
    transition: transform .18s ease;
}

.material-product-link:hover,
.material-product-link:focus,
.material-product-item.open > .material-product-link {
    color: var(--material-primary-dark);
    background: rgba(68, 138, 255, .07);
    border-bottom-color: var(--material-primary);
    text-decoration: none;
}

.material-product-item.open > .material-product-link > .fa-chevron-down {
    transform: rotate(180deg);
}

.material-product-mobile-toggle {
    display: none;
}

.material-mega-panel {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    display: none;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: calc(100vh - 128px);
    padding: 22px;
    background: #fff;
    border: 1px solid var(--material-line);
    border-top: 3px solid var(--material-primary);
    border-radius: 0 0 8px 8px;
    box-shadow: 0 14px 32px rgba(38, 50, 56, .18);
}

.material-product-item.open > .material-mega-panel {
    display: block;
}

.material-mega-panel-small {
    width: 380px;
}

.material-mega-panel-medium {
    width: 720px;
}

.material-mega-panel-wide {
    left: -115px;
    width: 1050px;
    max-width: calc(100vw - 300px);
}

.material-mega-heading {
    display: flex;
    align-items: center;
    gap: 13px;
    margin: -4px 0 18px;
    padding: 0 0 16px;
    border-bottom: 1px solid var(--material-line);
}

.material-mega-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    color: var(--material-primary);
    background: rgba(68, 138, 255, .1);
    border-radius: 50%;
}

.material-mega-heading strong,
.material-mega-heading small {
    display: block;
}

.material-mega-heading strong {
    color: var(--material-ink);
    font-size: 15px;
}

.material-mega-heading small {
    margin-top: 2px;
    color: var(--material-muted);
    font-size: 12px;
    font-weight: 400;
}

.material-mega-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 5px 18px;
}

.material-mega-links.two-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.material-mega-links a,
.material-provider-group a {
    position: relative;
    display: block;
    padding: 8px 10px 8px 22px;
    color: #536571;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.35;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}

.material-mega-links a::before,
.material-provider-group a::before {
    position: absolute;
    top: 14px;
    left: 9px;
    width: 5px;
    height: 5px;
    background: #b0bec5;
    border-radius: 50%;
    content: "";
}

.material-mega-links a:hover,
.material-mega-links a:focus,
.material-provider-group a:hover,
.material-provider-group a:focus {
    color: var(--material-primary-dark);
    background: rgba(68, 138, 255, .07);
}

.material-mega-links a:hover::before,
.material-mega-links a:focus::before,
.material-provider-group a:hover::before,
.material-provider-group a:focus::before {
    background: var(--material-primary);
}

.material-mega-panel .badge {
    display: inline-block;
    min-width: 0;
    margin-left: 4px;
    padding: 2px 5px;
    color: #fff;
    border-radius: 10px;
    font-size: 8px;
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    vertical-align: 1px;
}

.material-mega-panel .badge-success {
    background: var(--material-success);
}

.material-mega-panel .badge-danger {
    background: var(--material-danger);
}

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

.material-provider-group {
    min-width: 0;
    margin: 0;
}

.material-provider-group h3 {
    margin: 0 8px 7px;
    padding-bottom: 7px;
    color: var(--material-ink);
    border-bottom: 2px solid rgba(68, 138, 255, .18);
    font-size: 13px;
    font-weight: 700;
}

.material-workspace {
    padding-top: 112px;
}

/* Material corporate footer converted from the WHMCSModule footer. */
.material-footer-cta {
    padding: 42px 28px;
    color: #fff;
    background-color: var(--material-primary-dark);
    background-position: center;
    background-size: cover;
}

.material-footer-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    max-width: 1450px;
    margin: 0 auto;
}

.material-footer-cta-copy {
    max-width: 960px;
}

.material-footer-eyebrow {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .76);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.material-footer-cta h2 {
    margin: 0;
    color: #fff;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 600;
    line-height: 1.3;
}

.material-footer-cta .btn-material-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    gap: 11px;
    min-width: 150px;
    min-height: 46px;
    padding: 11px 20px;
    color: var(--material-primary-dark);
    background: #fff;
    border: 2px solid #fff;
    border-radius: 5px;
    box-shadow: 0 5px 14px rgba(16, 43, 80, .2);
    font-weight: 700;
}

.material-footer-cta .btn-material-cta:hover,
.material-footer-cta .btn-material-cta:focus {
    color: #fff;
    background: transparent;
    text-decoration: none;
}

.material-corporate-footer {
    margin: 0;
    padding: 0;
    color: #b5c0c9;
    background: #263544;
    border: 0;
    text-align: left;
}

.material-footer-grid {
    display: grid;
    grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
    gap: 38px;
    max-width: 1506px;
    margin: 0 auto;
    padding: 56px 28px 48px;
}

.material-footer-logo {
    display: inline-block;
    margin-bottom: 22px;
}

.material-footer-logo img {
    display: block;
    max-width: 205px;
    max-height: 54px;
    width: auto;
}

.material-footer-company address {
    margin: 0;
    color: #aebbc5;
    font-style: normal;
    line-height: 1.8;
}

.material-footer-company address strong {
    color: #fff;
    font-weight: 600;
}

.material-footer-column h2 {
    position: relative;
    margin: 5px 0 20px;
    padding-bottom: 13px;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.material-footer-column h2::after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 38px;
    height: 3px;
    background: var(--material-primary);
    border-radius: 2px;
    content: "";
}

.material-footer-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.material-footer-column li + li {
    margin-top: 9px;
}

.material-footer-column a {
    position: relative;
    display: inline-block;
    padding-left: 14px;
    color: #b5c0c9;
    font-size: 13px;
    line-height: 1.45;
}

.material-footer-column a::before {
    position: absolute;
    top: 7px;
    left: 0;
    width: 5px;
    height: 5px;
    background: #6e8292;
    border-radius: 50%;
    content: "";
}

.material-footer-column a:hover,
.material-footer-column a:focus,
.material-footer-bottom a:hover,
.material-footer-bottom a:focus {
    color: #fff;
    text-decoration: none;
}

.material-footer-column a:hover::before,
.material-footer-column a:focus::before {
    background: var(--material-primary);
}

.material-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 19px 28px;
    color: #91a1ae;
    background: #1d2a35;
}

.material-footer-bottom > div {
    max-width: 1450px;
}

.material-footer-bottom p {
    margin: 0;
}

.material-footer-bottom a {
    color: #d7e0e7;
}

.material-footer-disclaimer {
    max-width: 1200px;
    margin-top: 5px !important;
    font-size: 10px;
    line-height: 1.5;
}

.material-back-to-top {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    color: #fff !important;
    background: var(--material-primary);
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .24);
}

.material-back-to-top:hover,
.material-back-to-top:focus {
    background: var(--material-primary-dark);
}

@media (max-width: 1199px) {
    .material-product-link {
        padding-right: 10px;
        padding-left: 10px;
    }

    .material-product-utility-link {
        justify-content: center;
        width: 40px;
        padding: 0;
    }

    .material-product-utility-link span {
        display: none;
    }

    .material-mega-panel-wide {
        left: -70px;
        width: 900px;
    }

    .material-provider-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

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

}

@media (max-width: 991px) {
    .material-product-bar,
    .has-material-sidebar .material-product-bar {
        left: 0;
    }

    .material-product-bar-inner {
        padding: 0;
    }

    .material-product-mobile-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        height: 48px;
        padding: 0 16px;
        color: #52616c;
        background: #fff;
        border: 0;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        text-align: left;
    }

    .material-product-mobile-toggle > span {
        margin-left: 9px;
    }

    .material-product-mobile-caret {
        margin-left: auto;
        font-size: 10px;
        transition: transform .18s ease;
    }

    .material-product-menu-open .material-product-mobile-caret {
        transform: rotate(180deg);
    }

    .material-product-menu {
        position: absolute;
        top: 48px;
        right: 0;
        left: 0;
        display: none;
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        max-height: calc(100vh - 112px);
        padding: 6px 0 10px;
        background: #fff;
        border-top: 1px solid var(--material-line);
        box-shadow: 0 14px 28px rgba(38, 50, 56, .2);
    }

    .material-product-menu-open .material-product-menu {
        display: block;
    }

    .material-product-item {
        height: auto;
    }

    .material-product-utility-start {
        margin-left: 0;
    }

    .material-product-link {
        width: 100%;
        height: 44px;
        padding: 0 18px;
        border: 0;
        border-left: 3px solid transparent;
        text-align: left;
    }

    .material-product-utility-link {
        justify-content: flex-start;
    }

    .material-product-utility-link span {
        display: inline;
    }

    .material-product-link > .fa-chevron-down {
        margin-left: auto;
    }

    .material-product-link:hover,
    .material-product-link:focus,
    .material-product-item.open > .material-product-link {
        border-bottom-color: transparent;
        border-left-color: var(--material-primary);
    }

    .material-mega-panel,
    .material-mega-panel-wide {
        position: static;
        width: auto;
        max-width: none;
        max-height: none;
        margin: 0 12px 8px;
        padding: 17px;
        background: #f8fafc;
        border: 0;
        border-left: 3px solid rgba(68, 138, 255, .35);
        border-radius: 4px;
        box-shadow: none;
    }

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

    .material-footer-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 767px) {
    .material-product-bar {
        top: 58px;
    }

    .material-workspace {
        padding-top: 106px;
    }

    .material-product-menu {
        max-height: calc(100vh - 106px);
    }

    .material-mega-links.two-columns,
    .material-provider-grid {
        grid-template-columns: 1fr;
    }

    .material-mega-heading {
        align-items: flex-start;
    }

    .material-footer-cta {
        padding: 34px 20px;
    }

    .material-footer-grid {
        grid-template-columns: 1fr;
        gap: 34px;
        padding: 44px 20px 40px;
    }

    .material-footer-bottom {
        align-items: flex-start;
        padding: 20px;
        text-align: left;
    }
}

@media print {
    .material-product-bar,
    .material-footer-cta,
    .material-corporate-footer {
        display: none !important;
    }
}

.material-content-surface {
    color: #666;
    font-size: 14px;
}

.material-content-surface h1,
.material-content-surface h2,
.material-content-surface h3,
.material-content-surface h4,
.material-content-surface h5,
.material-content-surface h6 {
    color: #37474f;
    font-weight: 600;
}

.material-content-surface p,
.material-content-surface .help-block,
.material-content-surface .text-muted {
    color: #78909c;
}

.material-content-surface .card,
.material-content-surface .panel,
.material-content-surface .material-surface {
    margin-bottom: 30px;
    background: #fff;
    border: 0;
    border-radius: 5px;
    box-shadow: 0 1px 20px rgba(69, 90, 100, .08);
}

.material-content-surface .card-header,
.material-content-surface .panel-heading {
    position: relative;
    min-height: 60px;
    padding: 20px;
    background: transparent !important;
    border: 0;
    border-radius: 5px 5px 0 0;
    box-shadow: 0 1px 20px rgba(69, 90, 100, .08);
}

.material-content-surface .card-header .card-title,
.material-content-surface .card-header h3,
.material-content-surface .card-header h4,
.material-content-surface .card-header h5,
.material-content-surface .panel-heading .panel-title {
    position: relative;
    display: inline-block;
    margin: 0;
    color: #37474f !important;
    font-size: 15px;
    font-weight: 600;
    line-height: 20px;
}

.material-content-surface .card-header .card-title:before,
.material-content-surface .card-header h3:before,
.material-content-surface .card-header h4:before,
.material-content-surface .card-header h5:before,
.material-content-surface .panel-heading .panel-title:before {
    position: absolute;
    top: 0;
    left: -20px;
    width: 4px;
    height: 20px;
    content: "";
    background: #448aff;
}

.material-content-surface .panel-heading .panel-title:after,
.material-content-surface .card-header .card-title:after {
    display: none;
}

.material-content-surface .card-body,
.material-content-surface .card-block,
.material-content-surface .panel-body {
    padding: 20px;
}

.material-content-surface .card-footer,
.material-content-surface .panel-footer {
    padding: 15px 20px;
    background: #fbfcfd;
    border: 0;
    border-radius: 0 0 5px 5px;
}

.material-content-surface form .form-group {
    position: relative;
    margin-bottom: 24px;
}

.material-content-surface form label,
.material-content-surface .control-label {
    margin-bottom: 4px;
    color: #607d8b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.material-content-surface form .form-control,
.material-content-surface form select.form-control,
.material-content-surface form textarea.form-control {
    display: block;
    width: 100%;
    height: 43px;
    padding: 8px 0 6px;
    color: #37474f;
    background-color: transparent;
    background-image: none;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
    font-size: 14px;
    font-weight: 400;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.material-content-surface form textarea.form-control {
    min-height: 100px;
    padding-top: 10px;
    resize: vertical;
}

.material-content-surface form select.form-control {
    padding-right: 24px;
}

.material-content-surface form .form-control:focus,
.material-content-surface form select.form-control:focus,
.material-content-surface form textarea.form-control:focus {
    border-color: transparent;
    outline: 0;
    box-shadow: inset 0 -2px 0 #448aff;
}

.material-content-surface form .form-group:focus-within > label,
.material-content-surface form .form-group:focus-within > .control-label {
    color: #448aff;
}

.material-content-surface form .form-control::placeholder {
    color: #a5b2bc;
    opacity: 1;
}

.material-content-surface form .form-control[disabled],
.material-content-surface form .form-control[readonly],
.material-content-surface form fieldset[disabled] .form-control {
    color: #90a4ae;
    background: rgba(236, 239, 241, .52);
    border-bottom-style: dashed;
    cursor: not-allowed;
}

.material-content-surface form .has-error .form-control {
    border-bottom-color: #ff5252;
    box-shadow: inset 0 -1px 0 #ff5252;
}

.material-content-surface form .has-error .control-label,
.material-content-surface form .has-error .help-block {
    color: #ff5252;
}

.material-content-surface form .has-success .form-control {
    border-bottom-color: #11c15b;
    box-shadow: inset 0 -1px 0 #11c15b;
}

.material-content-surface form .has-success .control-label {
    color: #11c15b;
}

.material-content-surface .input-group-addon,
.material-content-surface .input-group-btn > .btn {
    height: 43px;
    color: #607d8b;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    box-shadow: none;
}

.material-content-surface .input-group-btn > .btn-primary,
.material-content-surface .input-group-btn > .btn-success {
    color: #fff;
    background: #448aff;
    border-bottom-color: #448aff;
    border-radius: 3px;
}

.material-content-surface input[type="checkbox"],
.material-content-surface input[type="radio"] {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: #448aff;
}

.material-content-surface .checkbox label,
.material-content-surface .radio label,
.material-content-surface .checkbox-inline,
.material-content-surface .radio-inline {
    color: #455a64;
    font-size: 13px;
    font-weight: 400;
}

.material-content-surface .table-container,
.material-content-surface .dataTables_wrapper,
.material-content-surface .table-responsive {
    width: 100%;
    background: #fff;
    border: 0;
    border-radius: 5px;
}

.material-content-surface .table-container {
    overflow-x: auto;
    margin-bottom: 30px;
    box-shadow: 0 1px 20px rgba(69, 90, 100, .08);
}

.material-content-surface .table {
    width: 100%;
    max-width: 100%;
    margin-bottom: 0;
    color: #455a64;
    background: #fff;
}

.material-content-surface .table > thead > tr > th {
    padding: 14px 16px;
    color: #37474f;
    background: transparent;
    border-top: 0;
    border-bottom: 2px solid #ccc;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    vertical-align: bottom;
    white-space: nowrap;
}

.material-content-surface .table > tbody > tr > th,
.material-content-surface .table > tbody > tr > td,
.material-content-surface .table > tfoot > tr > th,
.material-content-surface .table > tfoot > tr > td {
    padding: 13px 16px;
    color: #455a64;
    background: transparent;
    border-top: 1px solid #e9ecef;
    vertical-align: middle;
}

.material-content-surface .table-hover > tbody > tr:hover > td,
.material-content-surface .table-hover > tbody > tr:hover > th,
.material-content-surface .table-list > tbody > tr:hover > td {
    background: rgba(68, 138, 255, .045);
}

.material-content-surface .table-striped > tbody > tr:nth-of-type(odd) > td,
.material-content-surface .table-striped > tbody > tr:nth-of-type(odd) > th {
    background: #fafbfc;
}

.material-content-surface .table-bordered {
    border-color: #e1e6eb;
}

.material-content-surface .table-bordered > thead > tr > th,
.material-content-surface .table-bordered > tbody > tr > th,
.material-content-surface .table-bordered > tfoot > tr > th,
.material-content-surface .table-bordered > thead > tr > td,
.material-content-surface .table-bordered > tbody > tr > td,
.material-content-surface .table-bordered > tfoot > tr > td {
    border-color: #e1e6eb;
}

.material-content-surface .table .sorting:after,
.material-content-surface .table .sorting_asc:after,
.material-content-surface .table .sorting_desc:after {
    color: #448aff;
    opacity: .72;
}

.material-content-surface .dataTables_wrapper .dataTables_length,
.material-content-surface .dataTables_wrapper .dataTables_filter {
    padding: 14px 16px 8px;
}

.material-content-surface .dataTables_wrapper .dataTables_info,
.material-content-surface .dataTables_wrapper .dataTables_paginate {
    padding: 12px 16px 16px;
}

.material-content-surface .dataTables_wrapper input,
.material-content-surface .dataTables_wrapper select {
    min-height: 34px;
    padding: 5px 8px;
    color: #37474f;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    outline: 0;
}

.material-content-surface .dataTables_wrapper input:focus,
.material-content-surface .dataTables_wrapper select:focus {
    border-bottom-color: #448aff;
    box-shadow: inset 0 -1px 0 #448aff;
}

.material-content-surface .label,
.material-content-surface .badge {
    display: inline-block;
    min-width: 10px;
    padding: 5px 8px;
    color: #fff;
    border-radius: 2px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    text-transform: capitalize;
}

.material-content-surface .label-primary,
.material-content-surface .badge-primary,
.material-content-surface .label-info {
    background: #448aff;
}

.material-content-surface .label-success,
.material-content-surface .badge-success {
    background: #11c15b;
}

.material-content-surface .label-warning,
.material-content-surface .badge-warning {
    color: #fff;
    background: #ffe100;
}

.material-content-surface .label-danger,
.material-content-surface .badge-danger {
    background: #ff5252;
}

.material-content-surface .label-default,
.material-content-surface .badge-default {
    color: #455a64;
    background: #d6d6d6;
}

.material-content-surface .label-inverse,
.material-content-surface .badge-inverse,
.material-content-surface .badge-dark {
    background: #37474f;
}

.material-content-surface .nav-tabs {
    border-bottom: 1px solid #e0e6eb;
}

.material-content-surface .nav-tabs > li {
    margin-bottom: -1px;
}

.material-content-surface .nav-tabs > li > a {
    margin: 0;
    padding: 12px 16px;
    color: #607d8b;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    font-weight: 600;
}

.material-content-surface .nav-tabs > li > a:hover,
.material-content-surface .nav-tabs > li > a:focus {
    color: #448aff;
    background: rgba(68, 138, 255, .04);
    border-color: transparent transparent rgba(68, 138, 255, .42);
}

.material-content-surface .nav-tabs > li.active > a,
.material-content-surface .nav-tabs > li.active > a:hover,
.material-content-surface .nav-tabs > li.active > a:focus {
    color: #448aff;
    background: transparent;
    border: 0;
    border-bottom: 2px solid #448aff;
}

.material-content-surface .tab-content {
    padding: 20px 0;
}

.material-content-surface .alert {
    position: relative;
    padding: 14px 18px;
    color: #455a64;
    background: #fff;
    border: 0;
    border-left: 4px solid;
    border-radius: 3px;
    box-shadow: 0 1px 20px rgba(69, 90, 100, .08);
}

.material-content-surface .alert-success { border-left-color: #11c15b; }
.material-content-surface .alert-info { border-left-color: #00bcd4; }
.material-content-surface .alert-warning { border-left-color: #ffe100; }
.material-content-surface .alert-danger { border-left-color: #ff5252; }

.material-content-surface .pagination {
    margin: 18px 0;
}

.material-content-surface .pagination > li > a,
.material-content-surface .pagination > li > span {
    min-width: 36px;
    min-height: 36px;
    margin: 0 3px;
    padding: 8px 11px;
    color: #607d8b;
    background: #fff;
    border: 0;
    border-radius: 3px;
    box-shadow: 0 1px 6px rgba(69, 90, 100, .1);
    text-align: center;
}

.material-content-surface .pagination > li > a:hover,
.material-content-surface .pagination > li > a:focus {
    color: #448aff;
    background: rgba(68, 138, 255, .06);
}

.material-content-surface .pagination > .active > a,
.material-content-surface .pagination > .active > span,
.material-content-surface .pagination > .active > a:hover,
.material-content-surface .pagination > .active > span:hover {
    color: #fff;
    background: #448aff;
}

.material-content-surface .dropdown-menu {
    padding: 7px 0;
    border: 0;
    border-radius: 4px;
    box-shadow: 0 8px 25px rgba(69, 90, 100, .16);
}

.material-content-surface .dropdown-menu > li > a {
    padding: 9px 16px;
    color: #455a64;
}

.material-content-surface .dropdown-menu > li > a:hover,
.material-content-surface .dropdown-menu > li > a:focus {
    color: #448aff;
    background: rgba(68, 138, 255, .055);
}

.material-content-surface code {
    padding: 2px 5px;
    color: #ff5252;
    background: #f4f6f8;
    border-radius: 2px;
}

@media (max-width: 767px) {
    .material-content-surface .card-header,
    .material-content-surface .panel-heading,
    .material-content-surface .card-body,
    .material-content-surface .card-block,
    .material-content-surface .panel-body {
        padding-right: 15px;
        padding-left: 15px;
    }

    .material-content-surface .card-header .card-title:before,
    .material-content-surface .card-header h3:before,
    .material-content-surface .card-header h4:before,
    .material-content-surface .card-header h5:before,
    .material-content-surface .panel-heading .panel-title:before {
        left: -15px;
    }

    .material-content-surface .table > thead > tr > th,
    .material-content-surface .table > tbody > tr > th,
    .material-content-surface .table > tbody > tr > td,
    .material-content-surface .table > tfoot > tr > th,
    .material-content-surface .table > tfoot > tr > td {
        padding: 11px 12px;
        white-space: nowrap;
    }

    .material-content-surface .nav-tabs {
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
    }

    .material-content-surface .nav-tabs > li {
        float: none;
        flex: 0 0 auto;
    }
}

.material-app-shell {
    min-height: 100vh;
}

.material-sidebar {
    position: fixed;
    z-index: 1040;
    top: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 260px;
    color: #b7c0cd;
    background: #263544;
    box-shadow: 3px 0 14px rgba(30, 45, 58, .18);
    transition: transform .24s ease;
}

.material-sidebar-brand {
    display: flex;
    align-items: center;
    flex: 0 0 64px;
    height: 64px;
    padding: 0 16px;
    background: var(--material-primary);
}

.material-sidebar-logo {
    display: flex;
    align-items: center;
    min-width: 0;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
}

.material-sidebar-logo:hover,
.material-sidebar-logo:focus {
    color: #fff;
    text-decoration: none;
}

.material-sidebar-logo img {
    display: block;
    max-width: 190px;
    max-height: 42px;
    width: auto;
}

.material-sidebar-logo .material-brand-mark {
    flex: 0 0 36px;
    background: rgba(255, 255, 255, .18);
    box-shadow: none;
}

.material-brand-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-sidebar-close {
    display: none;
    margin-left: auto;
    padding: 9px;
    color: #fff;
    background: transparent;
    border: 0;
    border-radius: 4px;
}

.material-sidebar-scroll {
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1 1 auto;
    padding-bottom: 20px;
    scrollbar-color: #526274 #263544;
    scrollbar-width: thin;
}

.material-sidebar-scroll::-webkit-scrollbar {
    width: 6px;
}

.material-sidebar-scroll::-webkit-scrollbar-thumb {
    background: #526274;
    border-radius: 4px;
}

.material-user-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 18px 15px;
    background: rgba(0, 0, 0, .08);
}

.material-user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    color: #fff;
    background: linear-gradient(135deg, var(--material-primary), var(--material-info));
    border: 3px solid rgba(255, 255, 255, .14);
    border-radius: 50%;
}

.material-user-copy {
    min-width: 0;
}

.material-user-copy strong {
    display: block;
    overflow: hidden;
    color: #fff;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-user-copy a {
    color: #8fa2b7;
    font-size: 11px;
}

.material-user-copy a:hover,
.material-user-copy a:focus {
    color: #fff;
}

.material-sidebar-search {
    position: relative;
    margin: 16px 16px 8px;
}

.material-sidebar-search i {
    position: absolute;
    top: 50%;
    left: 13px;
    color: #7f91a4;
    transform: translateY(-50%);
}

.material-sidebar-search input {
    width: 100%;
    height: 38px;
    padding: 8px 12px 8px 36px;
    color: #fff;
    background: #1f2d3a;
    border: 1px solid #344657;
    border-radius: 4px;
    outline: 0;
}

.material-sidebar-search input::placeholder {
    color: #7f91a4;
}

.material-sidebar-search input:focus {
    border-color: var(--material-primary);
    box-shadow: 0 0 0 3px rgba(68, 138, 255, .18);
}

.material-navigation-label {
    padding: 16px 20px 8px;
    color: #718295;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.material-nav-list,
.material-submenu,
.material-popover-list,
.material-alert-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.material-nav-item {
    position: relative;
}

.material-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 46px;
    padding: 10px 17px;
    color: #b7c0cd;
    background: transparent;
    border: 0;
    border-left: 3px solid transparent;
    text-align: left;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease;
}

.material-nav-link:hover,
.material-nav-link:focus,
.material-nav-item.active > .material-nav-link,
.material-nav-item.open > .material-nav-link {
    color: #fff;
    background: #1d2a36;
    border-left-color: var(--material-primary);
    text-decoration: none;
}

.material-nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 28px;
    width: 28px;
    color: #8fa2b7;
    font-size: 15px;
}

.material-nav-link:hover .material-nav-icon,
.material-nav-link:focus .material-nav-icon,
.material-nav-item.active > .material-nav-link .material-nav-icon {
    color: var(--material-primary);
}

.material-nav-text {
    overflow: hidden;
    flex: 1 1 auto;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-nav-caret {
    margin-left: 8px;
    font-size: 10px;
    transition: transform .18s ease;
}

.material-nav-item.open > .material-nav-link .material-nav-caret {
    transform: rotate(180deg);
}

.material-submenu {
    display: none;
    padding: 4px 0 8px;
    background: #1f2d3a;
}

.material-nav-item.open > .material-submenu,
.material-nav-item.active > .material-submenu {
    display: block;
}

.material-submenu a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 8px 16px 8px 50px;
    color: #9eacbb;
    font-size: 12px;
}

.material-submenu a:hover,
.material-submenu a:focus,
.material-submenu li.active > a {
    color: #fff;
    background: rgba(255, 255, 255, .035);
    text-decoration: none;
}

.material-submenu-dot {
    flex: 0 0 5px;
    width: 5px;
    height: 5px;
    background: #657789;
    border-radius: 50%;
}

.material-submenu li.active .material-submenu-dot {
    background: var(--material-primary);
    box-shadow: 0 0 0 3px rgba(68, 138, 255, .16);
}

.material-nav-list > .material-nav-divider,
.material-submenu > .material-nav-divider {
    display: block;
    height: 1px;
    margin: 8px 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
}

.material-submenu > .material-nav-divider {
    margin-right: 22px;
    margin-left: 50px;
}

.material-context-label {
    margin-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.material-context-navigation {
    padding: 0 12px;
}

.material-context-navigation .panel {
    margin-bottom: 10px;
    background: #1f2d3a;
    border-radius: 4px;
    box-shadow: none;
}

.material-context-navigation .panel-sidebar .panel-heading {
    min-height: 42px;
    padding: 12px;
    background: #1d2a36 !important;
    border-color: rgba(255, 255, 255, .06);
}

.material-context-navigation .panel-heading .panel-title {
    color: #d9e0e7 !important;
    font-size: 12px;
}

.material-context-navigation .panel-heading .panel-title:after {
    display: none;
}

.material-context-navigation .panel-sidebar .list-group-item {
    padding: 10px 12px;
    color: #a9b5c2;
    background: #263544;
    border-color: rgba(255, 255, 255, .055);
    font-size: 12px;
}

.material-context-navigation .panel-sidebar .list-group-item:hover,
.material-context-navigation .panel-sidebar .list-group-item:focus,
.material-context-navigation .panel-sidebar .list-group-item.active {
    color: #fff;
    background: #1d2a36;
    border-left-color: var(--material-primary);
}

.material-context-navigation .panel-sidebar .list-group-item.nav-divider {
    display: block;
    min-height: 1px;
    height: 1px;
    margin: 7px 12px;
    padding: 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .1);
    border: 0;
    pointer-events: none;
}

.material-context-navigation .panel-body,
.material-context-navigation .panel-footer {
    color: #b7c0cd;
    background: #263544;
    border-color: rgba(255, 255, 255, .055);
}

.material-sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex: 0 0 52px;
    height: 52px;
    background: #1f2d3a;
    border-top: 1px solid rgba(255, 255, 255, .06);
}

.material-sidebar-footer a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    color: #8fa2b7;
    border-radius: 50%;
}

.material-sidebar-footer a:hover,
.material-sidebar-footer a:focus {
    color: #fff;
    background: rgba(255, 255, 255, .07);
}

.material-topbar {
    position: fixed;
    z-index: 1030;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    padding: 0 20px;
    background: #fff;
    border-bottom: 1px solid #e6ebf0;
    box-shadow: 0 2px 8px rgba(55, 71, 79, .08);
}

.has-material-sidebar .material-topbar {
    left: 260px;
}

.material-topbar-left,
.material-topbar-actions {
    display: flex;
    align-items: center;
    min-width: 0;
    height: 100%;
}

.material-topbar-actions {
    gap: 4px;
    margin-left: auto;
}

.material-sidebar-toggle,
.material-icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    color: #5b6b79;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
}

.material-sidebar-toggle:hover,
.material-sidebar-toggle:focus,
.material-icon-button:hover,
.material-icon-button:focus {
    color: var(--material-primary);
    background: rgba(68, 138, 255, .08);
    text-decoration: none;
}

.material-topbar-title {
    overflow: hidden;
    margin-left: 10px;
    color: var(--material-ink);
    font-size: 17px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.material-topbar-brand {
    display: flex;
    align-items: center;
    color: var(--material-ink);
    font-size: 16px;
    font-weight: 700;
}

.material-topbar-brand:hover,
.material-topbar-brand:focus {
    text-decoration: none;
}

.material-topbar-brand img {
    max-width: 190px;
    max-height: 42px;
}

.material-topbar-brand .material-brand-mark {
    margin-right: 8px;
}

.material-notification-count {
    position: absolute;
    top: 2px;
    right: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    color: #fff;
    background: var(--material-danger);
    border: 2px solid #fff;
    border-radius: 10px;
    font-size: 9px;
    font-weight: 700;
}

.material-account-navigation {
    display: flex;
    align-items: center;
    float: none !important;
    height: 64px;
    margin: 0 0 0 2px;
}

.material-account-navigation > li {
    height: 64px;
}

.material-account-navigation > li > a {
    display: flex;
    align-items: center;
    height: 64px;
    padding: 0 12px;
    color: #5b6b79;
}

.material-account-navigation > li > a:hover,
.material-account-navigation > li > a:focus,
.material-account-navigation > .open > a {
    color: var(--material-primary);
    background: rgba(68, 138, 255, .07);
}

.material-account-navigation .dropdown-menu {
    right: 0;
    left: auto;
    padding: 7px 0;
    border: 0;
    border-radius: var(--material-radius);
    box-shadow: 0 8px 25px rgba(55, 71, 79, .16);
}

.material-popover-list a,
.material-alert-list a {
    display: flex;
    gap: 9px;
    padding: 9px 12px;
}

.material-alert-list {
    min-width: 280px;
    max-width: 360px;
}

.material-alert-list .none {
    padding: 12px;
    color: var(--material-muted);
}

.material-workspace {
    min-height: 100vh;
    padding-top: 64px;
    background: var(--material-canvas);
    transition: margin-left .24s ease;
}

.has-material-sidebar .material-workspace {
    margin-left: 260px;
}

.material-main-body {
    min-height: calc(100vh - 126px);
    padding: 28px 14px 42px;
}

.material-main-body > .container-fluid {
    max-width: 1600px;
    margin: 0 auto;
}

.material-content-surface {
    min-width: 0;
}

.material-footer {
    margin: 0;
    padding: 20px 28px;
    color: #78909c;
    background: #fff;
    border-top: 1px solid var(--material-line);
    text-align: left;
}

.material-footer p {
    margin: 0;
}

.material-sidebar-overlay {
    display: none;
}

.material-sidebar-collapsed .material-sidebar {
    transform: translateX(-100%);
}

.material-sidebar-collapsed.has-material-sidebar .material-topbar {
    left: 0;
}

.material-sidebar-collapsed.has-material-sidebar .material-workspace {
    margin-left: 0;
}

@media (max-width: 991px) {
    .has-material-sidebar .material-topbar {
        left: 0;
    }

    .has-material-sidebar .material-workspace {
        margin-left: 0;
    }

    .material-sidebar {
        transform: translateX(-100%);
    }

    .material-sidebar-open .material-sidebar {
        transform: translateX(0);
    }

    .material-sidebar-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .material-sidebar-open .material-sidebar-overlay {
        position: fixed;
        z-index: 1035;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        background: rgba(22, 34, 45, .58);
        border: 0;
    }

    .material-sidebar-collapsed .material-sidebar {
        transform: translateX(-100%);
    }

    .material-sidebar-open.material-sidebar-collapsed .material-sidebar {
        transform: translateX(0);
    }
}

@media (max-width: 767px) {
    .material-topbar {
        height: 58px;
        padding: 0 9px;
    }

    .material-workspace {
        padding-top: 58px;
    }

    .material-topbar-title {
        max-width: 150px;
        font-size: 14px;
    }

    .material-topbar-actions {
        gap: 0;
    }

    .material-account-navigation {
        height: 58px;
    }

    .material-account-navigation > li {
        height: 58px;
    }

    .material-account-navigation > li > a {
        overflow: hidden;
        width: 40px;
        height: 58px;
        padding: 0 11px;
        white-space: nowrap;
    }

    .material-topbar-action:first-child,
    .material-admin-return {
        display: none;
    }

    .material-main-body {
        padding: 20px 0 34px;
    }

    .material-footer {
        padding: 18px 15px;
        text-align: center;
    }
}

@media print {
    .material-sidebar,
    .material-topbar,
    .material-sidebar-overlay {
        display: none !important;
    }

    .material-workspace,
    .has-material-sidebar .material-workspace {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Preserve the dynamic dashboard status-card colors after component resets. */
.material-content-surface .widget-box-two.card.bg-danger {
    background: #ff5252;
}

.material-content-surface .widget-box-two.card.bg-secondary {
    background: #607d8b;
}

.material-content-surface .widget-box-two.card.bg-info {
    background: #00bcd4;
}

.material-content-surface .widget-box-two.card.bg-success {
    background: #11c15b;
}

.material-content-surface .widget-box-two.card,
.material-content-surface .widget-box-two.card a,
.material-content-surface .widget-box-two.card .stat,
.material-content-surface .widget-box-two.card .title,
.material-content-surface .widget-box-two.card .icon {
    color: #fff;
}

/*
 * Final shell offsets. These intentionally follow the inherited component
 * resets above so the two-row header and corporate footer keep their layout.
 */
.material-workspace {
    padding-top: 112px;
}

.material-corporate-footer {
    margin: 0;
    padding: 0;
    color: #b5c0c9;
    background: #263544;
    border: 0;
    text-align: left;
}

.material-document-page {
    min-height: 100%;
    margin: 0;
    color: var(--material-ink);
    background: var(--material-canvas);
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.material-standalone-header {
    position: fixed;
    z-index: 1030;
    top: 0;
    right: 0;
    left: 0;
    height: 64px;
    background: #fff;
    border-bottom: 1px solid var(--material-line);
    box-shadow: 0 2px 8px rgba(55, 71, 79, .09);
}

.material-standalone-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

.material-standalone-brand {
    display: flex;
    align-items: center;
    min-width: 0;
    gap: 10px;
}

.material-standalone-logo {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.material-standalone-logo img {
    display: block;
    max-width: 205px;
    max-height: 44px;
    width: auto;
}

.material-standalone-actions {
    display: flex;
    align-items: center;
    gap: 5px;
}

.material-standalone-actions a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 38px;
    padding: 8px 12px;
    color: #60717e;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.material-standalone-actions a:hover,
.material-standalone-actions a:focus {
    color: var(--material-primary-dark);
    background: rgba(68, 138, 255, .08);
    text-decoration: none;
}

.material-document-header-spacer {
    height: 112px;
}

.material-document-content {
    display: block;
    padding: 30px 15px 42px;
}

.material-invoice-with-sidebar .material-document-content,
.material-invoice-with-sidebar .material-footer-cta,
.material-invoice-with-sidebar .material-footer {
    margin-left: 260px;
}

.material-sidebar-collapsed.material-invoice-with-sidebar .material-document-content,
.material-sidebar-collapsed.material-invoice-with-sidebar .material-footer-cta,
.material-sidebar-collapsed.material-invoice-with-sidebar .material-footer {
    margin-left: 0;
}

.material-invoice-with-sidebar .material-standalone-header {
    left: 260px;
    transition: left .24s ease;
}

.material-invoice-with-sidebar .material-standalone-logo {
    visibility: hidden;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}

.material-sidebar-collapsed.material-invoice-with-sidebar .material-standalone-header {
    left: 0;
}

.material-sidebar-collapsed.material-invoice-with-sidebar .material-standalone-logo {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
}

.material-invoice-with-sidebar .material-document-content,
.material-invoice-with-sidebar .material-footer-cta,
.material-invoice-with-sidebar .material-footer {
    transition: margin-left .24s ease;
}

@media (max-width: 991px) {
    .material-invoice-with-sidebar .material-standalone-logo {
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .material-invoice-with-sidebar .material-standalone-header,
    .material-invoice-with-sidebar .material-document-content,
    .material-invoice-with-sidebar .material-footer-cta,
    .material-invoice-with-sidebar .material-footer {
        margin-left: 0;
    }

    .material-invoice-with-sidebar .material-standalone-header {
        left: 0;
    }
}

.material-document-page .invoice-container {
    overflow: hidden;
    margin-bottom: 26px;
    background: #fff;
    border: 1px solid var(--material-line);
    border-radius: var(--material-radius);
    box-shadow: var(--material-shadow);
}

@media (max-width: 767px) {
    .material-workspace {
        padding-top: 106px;
    }

    .material-footer.material-corporate-footer {
        padding: 0;
        text-align: left;
    }

    .material-standalone-header {
        height: 58px;
    }

    .material-standalone-header-inner {
        padding: 0 12px;
    }

    .material-standalone-logo img {
        max-width: 150px;
        max-height: 38px;
    }

    .material-standalone-actions a {
        width: 38px;
        padding: 8px;
        justify-content: center;
    }

    .material-standalone-actions span {
        display: none;
    }

    .material-document-header-spacer {
        height: 106px;
    }

    .material-document-content {
        padding: 18px 0 30px;
    }
}

@media print {
    .material-workspace,
    .has-material-sidebar .material-workspace {
        padding: 0 !important;
    }

    .material-standalone-header,
    .material-document-header-spacer {
        display: none !important;
    }

    .material-document-content {
        padding: 0 !important;
    }

    .material-document-page .invoice-container {
        border: 0;
        box-shadow: none;
    }
}

/* Homepage cards use an isolated grid so legacy row rules cannot overlap them. */
.template-homepage .material-main-body {
    padding-top: 30px;
}

.material-homepage {
    width: 100%;
    max-width: 1460px;
    margin: 0 auto;
}

.material-home-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 26px;
}

.material-content-surface .card.material-home-card {
    display: flex;
    overflow: hidden;
    min-width: 0;
    min-height: 255px;
    margin: 0;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--material-line);
    border-radius: 7px;
    box-shadow: 0 4px 18px rgba(55, 71, 79, .11);
}

.material-content-surface .material-home-card .material-home-card-heading {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 66px;
    padding: 17px 21px;
    color: #fff;
    background: var(--material-primary) !important;
    border: 0;
    border-radius: 6px 6px 0 0;
    box-shadow: none;
}

.material-content-surface .card.material-home-card-info {
    border-color: #80deea;
}

.material-content-surface .card.material-home-card-success {
    border-color: #81c784;
}

.material-content-surface .card.material-home-card-secondary {
    border-color: #b0bec5;
}

.material-content-surface .card.material-home-card-danger {
    border-color: #ef9a9a;
}

.material-content-surface .card.material-home-card-primary {
    border-color: #90caf9;
}

.material-content-surface .material-home-card-info .material-home-card-heading {
    background: #0097a7 !important;
}

.material-content-surface .material-home-card-success .material-home-card-heading {
    background: #0b9f4c !important;
}

.material-content-surface .material-home-card-secondary .material-home-card-heading {
    background: #526d7a !important;
}

.material-content-surface .material-home-card-danger .material-home-card-heading {
    background: #e84444 !important;
}

.material-content-surface .material-home-card-primary .material-home-card-heading {
    background: var(--material-primary-dark) !important;
}

.material-content-surface .material-home-card-heading h2 {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    color: #fff !important;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
}

.material-home-card-heading h2 > i {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, .9);
}

.material-content-surface .material-home-card-heading h2 a,
.material-content-surface .material-home-card-heading h2 a:hover,
.material-content-surface .material-home-card-heading h2 a:focus,
.material-content-surface .material-home-card-heading h2 span {
    color: #fff !important;
    text-decoration: none;
}

.material-content-surface .material-home-card-heading h2 a:hover,
.material-content-surface .material-home-card-heading h2 a:focus {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.material-content-surface .material-home-card .material-home-card-body {
    display: flex;
    min-width: 0;
    padding: 23px;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
}

.material-content-surface .material-home-card-body p {
    margin: 0;
    color: #607d8b;
    line-height: 1.7;
}

.material-home-card-body form {
    margin-top: 18px;
}

.material-home-card-body .input-group {
    width: 100%;
}

.material-home-card-body .input-group .form-control,
.material-home-card-body .input-group-btn .btn {
    height: 46px;
}

.material-home-card-body .input-group-btn .btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-right: 18px;
    padding-left: 18px;
}

.material-content-surface .material-home-card .material-home-card-footer {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 64px;
    padding: 13px 22px;
    background: #fbfcfd;
    border-top: 1px solid var(--material-line);
}

.material-home-card-footer .material-home-action,
.template-homepage a.btn.bg-color-gold {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 16px;
    color: #fff !important;
    background: var(--material-primary) !important;
    border: 0 !important;
    border-radius: 4px;
    box-shadow: 0 3px 9px rgba(68, 138, 255, .28);
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none !important;
    white-space: normal;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}

.material-home-card-footer .material-home-action:hover,
.material-home-card-footer .material-home-action:focus,
.template-homepage a.btn.bg-color-gold:hover,
.template-homepage a.btn.bg-color-gold:focus {
    color: #fff !important;
    background: var(--material-primary-dark) !important;
    box-shadow: 0 5px 13px rgba(47, 111, 219, .34);
    transform: translateY(-1px);
}

.material-home-card-footer .material-home-action:active,
.template-homepage a.btn.bg-color-gold:active {
    box-shadow: 0 2px 5px rgba(47, 111, 219, .28);
    transform: translateY(0);
}

.material-home-card-footer .material-home-action i {
    flex: 0 0 auto;
    color: #fff;
}

.material-home-search-action {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 112px;
    padding-right: 16px !important;
    padding-left: 16px !important;
    color: #fff !important;
    background: #0b9f4c !important;
    border-color: #0b9f4c !important;
    font-size: 12px;
    font-weight: 700;
}

.material-home-search-action:hover,
.material-home-search-action:focus {
    color: #fff !important;
    background: #087c3b !important;
    border-color: #087c3b !important;
}

.material-home-offer {
    display: block;
    margin: auto;
}

.material-home-offer img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 4px;
}

.material-home-announcements {
    grid-column: 1 / -1;
    min-height: 0;
}

.material-home-announcements .material-home-card-body {
    display: block;
    padding-top: 15px;
    padding-bottom: 15px;
}

.material-home-announcement + .material-home-announcement {
    border-top: 1px solid var(--material-line);
}

.material-home-announcement a {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 11px 4px;
    color: #52616c;
    font-weight: 600;
    line-height: 1.45;
}

.material-home-announcement a i {
    margin-top: 4px;
    color: var(--material-primary);
}

.material-home-announcement a:hover,
.material-home-announcement a:focus {
    color: var(--material-primary-dark);
    text-decoration: none;
}

.material-home-empty {
    padding: 10px 4px;
}

@media (max-width: 767px) {
    .material-home-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }

    .material-home-announcements {
        grid-column: auto;
    }

    .material-content-surface .card.material-home-card {
        min-height: 0;
    }

    .material-content-surface .material-home-card .material-home-card-heading {
        min-height: 60px;
        padding: 15px 17px;
    }

    .material-content-surface .material-home-card-heading h2 {
        font-size: 15px;
    }

    .material-content-surface .material-home-card .material-home-card-body {
        padding: 19px 17px;
    }

    .material-content-surface .material-home-card .material-home-card-footer {
        padding-right: 17px;
        padding-left: 17px;
    }
}

/* WHMCS navigation generated from the primary and secondary navbar objects. */
.material-whmcs-bar {
    position: fixed;
    z-index: 1027;
    top: 64px;
    right: 0;
    left: 0;
    height: 46px;
    color: #fff;
    background: #263544;
    box-shadow: 0 2px 7px rgba(38, 50, 56, .14);
    transition: left .24s ease;
}

.has-material-sidebar .material-whmcs-bar {
    left: 260px;
}

.material-sidebar-collapsed.has-material-sidebar .material-whmcs-bar {
    left: 0;
}

.material-whmcs-bar-inner {
    position: relative;
    max-width: 1600px;
    height: 100%;
    margin: 0 auto;
    padding: 0 18px;
}

.material-whmcs-menu-panel {
    display: flex;
    align-items: stretch;
    height: 100%;
}

.material-whmcs-menu {
    display: flex;
    align-items: stretch;
    float: none !important;
    height: 100%;
    margin: 0;
}

.material-whmcs-account-menu {
    margin-left: auto;
}

.material-whmcs-menu > li {
    position: relative;
    float: none;
    height: 100%;
}

.material-whmcs-menu > li > a {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 46px;
    padding: 0 14px;
    color: rgba(255, 255, 255, .86);
    background: transparent;
    border-bottom: 3px solid transparent;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}

.material-whmcs-menu > li > a:hover,
.material-whmcs-menu > li > a:focus,
.material-whmcs-menu > li.open > a,
.material-whmcs-menu > li.active > a {
    color: #fff;
    background: rgba(255, 255, 255, .08);
    border-bottom-color: var(--material-primary);
}

.material-whmcs-menu > li > a .caret {
    margin-left: 2px;
    border-top-color: currentColor;
    border-bottom-color: currentColor;
}

.material-whmcs-dropdown-caret {
    margin-left: 2px;
    font-size: 9px;
    opacity: .8;
    transition: transform .18s ease;
}

.material-whmcs-menu > li > a.dropdown-toggle::after {
    display: none;
    content: none;
}

.material-whmcs-menu > li.open > a .material-whmcs-dropdown-caret,
.material-whmcs-menu > li > a[aria-expanded="true"] .material-whmcs-dropdown-caret,
.material-whmcs-menu > li.dropdown:hover > a .material-whmcs-dropdown-caret {
    transform: rotate(180deg);
}

.material-whmcs-menu .badge {
    min-width: 18px;
    padding: 3px 5px;
    color: #fff;
    background: var(--material-danger);
    border-radius: 9px;
    font-size: 9px;
}

.material-whmcs-menu .dropdown-menu {
    overflow-x: hidden;
    overflow-y: auto;
    min-width: 230px;
    max-width: 340px;
    max-height: calc(100vh - 174px);
    margin: 0;
    padding: 7px 0;
    background: #fff;
    border: 1px solid var(--material-line);
    border-top: 3px solid var(--material-primary);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 28px rgba(38, 50, 56, .18);
}

@media (min-width: 992px) {
    .material-whmcs-menu > li.dropdown:hover > .dropdown-menu,
    .material-whmcs-menu > li.dropdown:focus-within > .dropdown-menu {
        display: block;
    }

    .material-whmcs-menu > li.dropdown:hover > a,
    .material-whmcs-menu > li.dropdown:focus-within > a {
        color: #fff !important;
        background: rgba(255, 255, 255, .08) !important;
        border-bottom-color: var(--material-primary) !important;
    }

    .material-swapped-whmcs-menu .material-whmcs-menu > li.dropdown:hover > a,
    .material-swapped-whmcs-menu .material-whmcs-menu > li.dropdown:focus-within > a {
        color: var(--material-primary-dark) !important;
        background: rgba(68, 138, 255, .09) !important;
    }
}

.material-whmcs-account-menu .dropdown-menu {
    right: 0;
    left: auto;
}

.material-whmcs-menu .dropdown-menu > li > a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 15px;
    color: #536571;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
}

.material-whmcs-menu .dropdown-menu > li > a:hover,
.material-whmcs-menu .dropdown-menu > li > a:focus,
.material-whmcs-menu .dropdown-menu > li.active > a {
    color: var(--material-primary-dark);
    background: rgba(68, 138, 255, .07);
}

.material-whmcs-menu .dropdown-menu > .material-menu-divider {
    display: block;
    height: 1px;
    margin: 7px 12px;
    overflow: hidden;
    background: var(--material-line);
}

.material-whmcs-mobile-toggle {
    display: none;
}

.material-product-bar {
    top: 110px;
}

.material-workspace {
    padding-top: 158px;
}

.material-document-header-spacer {
    height: 158px;
}

.material-mega-panel,
.material-whmcs-menu .dropdown-menu {
    max-height: calc(100vh - 174px);
}

@media (max-width: 1199px) and (min-width: 992px) {
    .material-whmcs-menu > li > a {
        padding-right: 10px;
        padding-left: 10px;
    }
}

@media (max-width: 991px) {
    .material-whmcs-bar,
    .has-material-sidebar .material-whmcs-bar {
        left: 0;
    }

    .material-whmcs-bar-inner {
        padding: 0;
    }

    .material-whmcs-mobile-toggle {
        display: flex;
        align-items: center;
        width: 100%;
        height: 46px;
        padding: 0 16px;
        color: #fff;
        background: #263544;
        border: 0;
        font: inherit;
        font-size: 13px;
        font-weight: 700;
        text-align: left;
    }

    .material-whmcs-mobile-toggle > span {
        margin-left: 9px;
    }

    .material-whmcs-mobile-caret {
        margin-left: auto;
        font-size: 10px;
        transition: transform .18s ease;
    }

    .material-whmcs-menu-open .material-whmcs-mobile-caret {
        transform: rotate(180deg);
    }

    .material-whmcs-menu-panel {
        position: absolute;
        top: 46px;
        right: 0;
        left: 0;
        display: none;
        overflow-x: hidden;
        overflow-y: auto;
        height: auto;
        max-height: calc(100vh - 158px);
        padding: 6px 0 10px;
        background: #263544;
        box-shadow: 0 14px 28px rgba(38, 50, 56, .24);
    }

    .material-whmcs-menu-open .material-whmcs-menu-panel {
        display: block;
    }

    .material-whmcs-menu {
        display: block;
        height: auto;
    }

    .material-whmcs-account-menu {
        margin: 7px 0 0;
        padding-top: 7px;
        border-top: 1px solid rgba(255, 255, 255, .12);
    }

    .material-whmcs-menu > li {
        float: none;
        width: 100%;
        height: auto;
    }

    .material-whmcs-menu > li > a {
        width: 100%;
        height: 44px;
        padding: 0 18px;
        border: 0;
        border-left: 3px solid transparent;
    }

    .material-whmcs-menu > li > a:hover,
    .material-whmcs-menu > li > a:focus,
    .material-whmcs-menu > li.open > a,
    .material-whmcs-menu > li.active > a {
        border-bottom-color: transparent;
        border-left-color: var(--material-primary);
    }

    .material-whmcs-menu .dropdown-menu,
    .material-whmcs-account-menu .dropdown-menu {
        position: static;
        float: none;
        overflow: visible;
        width: auto;
        min-width: 0;
        max-width: none;
        max-height: none;
        margin: 0 12px 8px;
        padding: 5px 0;
        background: #1f2d39;
        border: 0;
        border-left: 3px solid rgba(68, 138, 255, .55);
        border-radius: 3px;
        box-shadow: none;
    }

    .material-whmcs-menu .dropdown-menu > li > a {
        padding: 10px 15px 10px 22px;
        color: rgba(255, 255, 255, .78);
    }

    .material-whmcs-menu .dropdown-menu > li > a:hover,
    .material-whmcs-menu .dropdown-menu > li > a:focus,
    .material-whmcs-menu .dropdown-menu > li.active > a {
        color: #fff;
        background: rgba(255, 255, 255, .07);
    }

    .material-whmcs-menu .dropdown-menu > .material-menu-divider {
        background: rgba(255, 255, 255, .12);
    }

    .material-product-menu {
        max-height: calc(100vh - 158px);
    }
}

@media (max-width: 767px) {
    .material-whmcs-bar {
        top: 58px;
    }

    .material-product-bar {
        top: 104px;
    }

    .material-workspace {
        padding-top: 152px;
    }

    .material-document-header-spacer {
        height: 152px;
    }

    .material-whmcs-menu-panel,
    .material-product-menu {
        max-height: calc(100vh - 152px);
    }
}

@media print {
    .material-whmcs-bar {
        display: none !important;
    }

    .material-workspace,
    .has-material-sidebar .material-workspace {
        padding: 0 !important;
    }

    .material-document-header-spacer {
        display: none !important;
    }
}

.material-theme-toggle {
    overflow: hidden;
    transition: color .18s ease, background-color .18s ease, transform .18s ease;
}

.material-theme-toggle:hover {
    transform: rotate(8deg);
}

.material-theme-toggle .material-theme-icon-light {
    display: none;
}

html.material-theme-dark .material-theme-toggle .material-theme-icon-dark {
    display: none;
}

html.material-theme-dark .material-theme-toggle .material-theme-icon-light {
    display: inline-block;
}

html.material-theme-dark {
    color-scheme: dark;
    --material-primary: #6ea4ff;
    --material-primary-dark: #94bcff;
    --material-ink: #edf4fa;
    --material-muted: #a9bac8;
    --material-line: #344554;
    --material-canvas: #111820;
    --material-surface: #1c2732;
    --material-shadow: 0 3px 16px rgba(0, 0, 0, .28);
    background: var(--material-canvas);
}

html.material-theme-dark body.material-client-area,
html.material-theme-dark body.material-document-page,
html.material-theme-dark .material-workspace {
    color: var(--material-ink);
    background: var(--material-canvas);
}

html.material-theme-dark .material-topbar,
html.material-theme-dark .material-product-bar,
html.material-theme-dark .material-standalone-header,
html.material-theme-dark .material-footer,
html.material-theme-dark #main-menu {
    color: var(--material-ink);
    background: var(--material-surface);
    border-color: var(--material-line);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
}

html.material-theme-dark .material-topbar-brand,
html.material-theme-dark .material-topbar-title,
html.material-theme-dark .material-sidebar-toggle,
html.material-theme-dark .material-icon-button,
html.material-theme-dark .material-product-link,
html.material-theme-dark .material-product-utility-link,
html.material-theme-dark .material-standalone-actions a {
    color: var(--material-ink);
}

html.material-theme-dark .material-sidebar-toggle:hover,
html.material-theme-dark .material-sidebar-toggle:focus,
html.material-theme-dark .material-icon-button:hover,
html.material-theme-dark .material-icon-button:focus,
html.material-theme-dark .material-product-link:hover,
html.material-theme-dark .material-product-link:focus,
html.material-theme-dark .material-product-item.open > .material-product-link,
html.material-theme-dark .material-standalone-actions a:hover,
html.material-theme-dark .material-standalone-actions a:focus {
    color: var(--material-primary-dark);
    background: rgba(110, 164, 255, .12);
}

html.material-theme-dark .material-notification-count {
    border-color: var(--material-surface);
}

html.material-theme-dark .material-product-mobile-toggle,
html.material-theme-dark .material-product-menu,
html.material-theme-dark .material-mega-panel,
html.material-theme-dark .material-whmcs-menu .dropdown-menu {
    color: var(--material-ink);
    background: #202d39;
    border-color: var(--material-line);
}

html.material-theme-dark .material-mega-heading strong,
html.material-theme-dark .material-provider-group h3,
html.material-theme-dark .material-mega-links a,
html.material-theme-dark .material-provider-group a,
html.material-theme-dark .material-whmcs-menu .dropdown-menu > li > a {
    color: var(--material-ink);
}

html.material-theme-dark .material-mega-heading small {
    color: var(--material-muted);
}

html.material-theme-dark .material-mega-links a:hover,
html.material-theme-dark .material-mega-links a:focus,
html.material-theme-dark .material-provider-group a:hover,
html.material-theme-dark .material-provider-group a:focus,
html.material-theme-dark .material-whmcs-menu .dropdown-menu > li > a:hover,
html.material-theme-dark .material-whmcs-menu .dropdown-menu > li > a:focus,
html.material-theme-dark .material-whmcs-menu .dropdown-menu > li.active > a {
    color: var(--material-primary-dark);
    background: rgba(110, 164, 255, .12);
}

html.material-theme-dark .material-standalone-logo img {
    filter: brightness(0) invert(1);
}

html.material-theme-dark .material-content-surface {
    color: #c7d3dc;
}

html.material-theme-dark .material-content-surface h1,
html.material-theme-dark .material-content-surface h2,
html.material-theme-dark .material-content-surface h3,
html.material-theme-dark .material-content-surface h4,
html.material-theme-dark .material-content-surface h5,
html.material-theme-dark .material-content-surface h6,
html.material-theme-dark .material-content-surface .card-header .card-title,
html.material-theme-dark .material-content-surface .card-header h3,
html.material-theme-dark .material-content-surface .card-header h4,
html.material-theme-dark .material-content-surface .card-header h5,
html.material-theme-dark .material-content-surface .panel-heading .panel-title {
    color: var(--material-ink) !important;
}

html.material-theme-dark .material-content-surface p,
html.material-theme-dark .material-content-surface .help-block,
html.material-theme-dark .material-content-surface .text-muted,
html.material-theme-dark .material-alert-list .none {
    color: var(--material-muted);
}

html.material-theme-dark .material-content-surface .card,
html.material-theme-dark .material-content-surface .panel,
html.material-theme-dark .material-content-surface .material-surface,
html.material-theme-dark .material-content-surface .table-container,
html.material-theme-dark .material-content-surface .table-responsive,
html.material-theme-dark .material-content-surface .dataTables_wrapper,
html.material-theme-dark .material-document-page .invoice-container,
html.material-theme-dark .logincontainer,
html.material-theme-dark .modal-content,
html.material-theme-dark .popover,
html.material-theme-dark .well,
html.material-theme-dark .list-group-item {
    color: #c7d3dc;
    background: var(--material-surface);
    border-color: var(--material-line);
    box-shadow: var(--material-shadow);
}

html.material-theme-dark .material-content-surface .widget-box-two.card.bg-danger {
    background: #ff5252;
}

html.material-theme-dark .material-content-surface .widget-box-two.card.bg-secondary {
    background: #607d8b;
}

html.material-theme-dark .material-content-surface .widget-box-two.card.bg-info {
    background: #00bcd4;
}

html.material-theme-dark .material-content-surface .widget-box-two.card.bg-success {
    background: #11c15b;
}

html.material-theme-dark .material-content-surface .card-header,
html.material-theme-dark .material-content-surface .panel-heading {
    background: transparent !important;
    border-color: var(--material-line);
    box-shadow: 0 1px 14px rgba(0, 0, 0, .2);
}

html.material-theme-dark .material-content-surface .card-header.bg-primary,
html.material-theme-dark .material-content-surface .panel-heading.bg-primary {
    color: #fff;
    background: #448aff !important;
}

html.material-theme-dark .material-content-surface .card-header.bg-secondary,
html.material-theme-dark .material-content-surface .panel-heading.bg-secondary {
    color: #fff;
    background: #607d8b !important;
}

html.material-theme-dark .material-content-surface .card-header.bg-info,
html.material-theme-dark .material-content-surface .panel-heading.bg-info {
    color: #fff;
    background: #00bcd4 !important;
}

html.material-theme-dark .material-content-surface .card-header.bg-success,
html.material-theme-dark .material-content-surface .panel-heading.bg-success {
    color: #fff;
    background: #11c15b !important;
}

html.material-theme-dark .material-content-surface .card-header.bg-warning,
html.material-theme-dark .material-content-surface .panel-heading.bg-warning {
    color: #3b2b0b;
    background: #ffb64d !important;
}

html.material-theme-dark .material-content-surface .card-header.bg-danger,
html.material-theme-dark .material-content-surface .panel-heading.bg-danger {
    color: #fff;
    background: #ff5252 !important;
}

html.material-theme-dark .material-content-surface .card-header[class*="bg-"] .card-title,
html.material-theme-dark .material-content-surface .card-header[class*="bg-"] h2,
html.material-theme-dark .material-content-surface .card-header[class*="bg-"] h3,
html.material-theme-dark .material-content-surface .card-header[class*="bg-"] h4,
html.material-theme-dark .material-content-surface .card-header[class*="bg-"] h5,
html.material-theme-dark .material-content-surface .panel-heading[class*="bg-"] .panel-title {
    color: inherit !important;
}

html.material-theme-dark .material-content-surface .card-footer,
html.material-theme-dark .material-content-surface .panel-footer,
html.material-theme-dark .popover-title,
html.material-theme-dark .modal-header,
html.material-theme-dark .modal-footer {
    color: var(--material-ink);
    background: #17212b;
    border-color: var(--material-line);
}

html.material-theme-dark .material-content-surface form label,
html.material-theme-dark .material-content-surface .control-label,
html.material-theme-dark .material-content-surface .checkbox label,
html.material-theme-dark .material-content-surface .radio label,
html.material-theme-dark .material-content-surface .checkbox-inline,
html.material-theme-dark .material-content-surface .radio-inline {
    color: #b9c8d3;
}

html.material-theme-dark .material-content-surface form .form-control,
html.material-theme-dark .material-content-surface form select.form-control,
html.material-theme-dark .material-content-surface form textarea.form-control,
html.material-theme-dark .material-content-surface .dataTables_wrapper input,
html.material-theme-dark .material-content-surface .dataTables_wrapper select,
html.material-theme-dark .form-control,
html.material-theme-dark select,
html.material-theme-dark textarea {
    color: var(--material-ink);
    background-color: #17212b;
    border-color: #526474;
}

html.material-theme-dark .material-content-surface form .form-control::placeholder,
html.material-theme-dark .form-control::placeholder,
html.material-theme-dark textarea::placeholder {
    color: #8295a4;
}

html.material-theme-dark .material-content-surface form .form-control[disabled],
html.material-theme-dark .material-content-surface form .form-control[readonly],
html.material-theme-dark .material-content-surface form fieldset[disabled] .form-control {
    color: #8295a4;
    background: #222f3b;
}

html.material-theme-dark .material-content-surface .input-group-addon,
html.material-theme-dark .material-content-surface .input-group-btn > .btn {
    color: #b9c8d3;
    background: #17212b;
    border-color: #526474;
}

html.material-theme-dark .material-content-surface .table {
    color: #c7d3dc;
    background: var(--material-surface);
}

html.material-theme-dark .material-content-surface .table > thead > tr > th,
html.material-theme-dark .material-content-surface .table > tbody > tr > th,
html.material-theme-dark .material-content-surface .table > tbody > tr > td,
html.material-theme-dark .material-content-surface .table > tfoot > tr > th,
html.material-theme-dark .material-content-surface .table > tfoot > tr > td {
    color: #d8e2e9;
    background: transparent;
    border-color: var(--material-line);
}

html.material-theme-dark .material-content-surface .table-striped > tbody > tr:nth-of-type(odd) > td,
html.material-theme-dark .material-content-surface .table-striped > tbody > tr:nth-of-type(odd) > th {
    background: #19242e;
}

html.material-theme-dark .material-content-surface .table-hover > tbody > tr:hover > td,
html.material-theme-dark .material-content-surface .table-hover > tbody > tr:hover > th,
html.material-theme-dark .material-content-surface .table-list > tbody > tr:hover > td {
    background: rgba(110, 164, 255, .1);
}

html.material-theme-dark .material-content-surface .nav-tabs {
    border-color: var(--material-line);
}

html.material-theme-dark .material-content-surface .nav-tabs > li > a {
    color: var(--material-muted);
}

html.material-theme-dark .material-content-surface .nav-tabs > li.active > a,
html.material-theme-dark .material-content-surface .nav-tabs > li.active > a:hover,
html.material-theme-dark .material-content-surface .nav-tabs > li.active > a:focus {
    color: var(--material-primary-dark);
}

html.material-theme-dark .material-content-surface .alert,
html.material-theme-dark .material-content-surface .pagination > li > a,
html.material-theme-dark .material-content-surface .pagination > li > span,
html.material-theme-dark .material-content-surface .dropdown-menu {
    color: #c7d3dc;
    background: #202d39;
    border-color: var(--material-line);
}

html.material-theme-dark .material-content-surface .dropdown-menu > li > a {
    color: #c7d3dc;
}

html.material-theme-dark .material-content-surface .dropdown-menu > li > a:hover,
html.material-theme-dark .material-content-surface .dropdown-menu > li > a:focus {
    color: var(--material-primary-dark);
    background: rgba(110, 164, 255, .1);
}

html.material-theme-dark .material-content-surface code {
    background: #121a22;
}

html.material-theme-dark .material-content-surface .btn-default,
html.material-theme-dark .material-content-surface .btn-link {
    color: var(--material-primary-dark);
    background: #202d39;
    border-color: #455a6b;
}

html.material-theme-dark .material-content-surface .btn-default:hover,
html.material-theme-dark .material-content-surface .btn-default:focus,
html.material-theme-dark .material-content-surface .btn-link:hover,
html.material-theme-dark .material-content-surface .btn-link:focus {
    color: #fff;
    background: #2b3b49;
    border-color: #5d7486;
}

html.material-theme-dark .material-content-surface .material-home-card .material-home-card-body,
html.material-theme-dark .material-content-surface .material-home-card .material-home-card-footer,
html.material-theme-dark .material-home-announcements .announcement-single {
    color: #c7d3dc;
    background: var(--material-surface);
    border-color: var(--material-line);
}

@media (max-width: 991px) {
    html.material-theme-dark .material-mega-panel,
    html.material-theme-dark .material-mega-panel-wide {
        background: #17212b;
    }
}

@media print {
    html.material-theme-dark,
    html.material-theme-dark body.material-client-area,
    html.material-theme-dark body.material-document-page,
    html.material-theme-dark .material-document-page .invoice-container {
        color: #37474f !important;
        background: #fff !important;
    }

    .material-theme-toggle {
        display: none !important;
    }
}

@supports selector(:focus-visible) {
    a:focus:not(:focus-visible),
    button:focus:not(:focus-visible),
    [tabindex]:focus:not(:focus-visible) {
        outline: 0;
        outline-offset: 0;
    }

    a:focus-visible,
    button:focus-visible,
    [tabindex]:focus-visible {
        outline: 3px solid rgba(68, 138, 255, .52);
        outline-offset: 3px;
    }

    .material-sidebar-logo:focus-visible,
    .material-topbar-brand:focus-visible,
    .material-standalone-logo:focus-visible,
    .material-footer-logo:focus-visible {
        border-radius: 4px;
    }
}

.material-content-surface a.btn,
.material-content-surface button.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    gap: 7px;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    white-space: normal;
    vertical-align: middle;
}

.material-content-surface .btn-xs {
    min-height: 28px;
    padding: 4px 9px;
    font-size: 11px;
}

.material-content-surface .btn-sm {
    min-height: 34px;
    padding: 7px 13px;
    font-size: 12px;
}

.material-content-surface .btn-lg {
    min-height: 46px;
    padding: 11px 20px;
    font-size: 16px;
}

.material-content-surface .btn-primary,
.material-content-surface .btn-info,
.material-content-surface .btn-success,
.material-content-surface .btn-danger {
    color: #fff;
}

.material-content-surface .btn-primary,
.material-content-surface .btn-info {
    background: var(--material-primary);
    border-color: var(--material-primary);
}

.material-content-surface .btn-primary:hover,
.material-content-surface .btn-primary:focus,
.material-content-surface .btn-info:hover,
.material-content-surface .btn-info:focus {
    color: #fff;
    background: var(--material-primary-dark);
    border-color: var(--material-primary-dark);
}

.material-content-surface .btn-success:hover,
.material-content-surface .btn-success:focus {
    color: #fff;
    background: #0d9e4a;
    border-color: #0d9e4a;
}

.material-content-surface .btn-danger:hover,
.material-content-surface .btn-danger:focus {
    color: #fff;
    background: #e34646;
    border-color: #e34646;
}

.material-content-surface .btn-warning {
    color: #4a3408;
    background: var(--material-warning);
    border-color: var(--material-warning);
}

.material-content-surface .btn-warning:hover,
.material-content-surface .btn-warning:focus {
    color: #3d2a06;
    background: #f2a43b;
    border-color: #f2a43b;
}

.material-content-surface .btn-default {
    color: var(--material-primary);
    background: #fff;
    border-color: #cbd7e1;
}

.material-content-surface .btn-default:hover,
.material-content-surface .btn-default:focus {
    color: var(--material-primary-dark);
    background: #f2f6ff;
    border-color: #aebfce;
}

.material-client-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.material-content-surface .material-client-panel-header .card-title {
    min-width: 0;
    flex: 1 1 auto;
}

.material-content-surface .material-client-panel-action {
    flex: 0 0 auto;
    color: #fff !important;
    border-color: transparent;
    box-shadow: 0 2px 6px rgba(26, 39, 52, .18);
}

.material-content-surface .material-client-panel-action.bg-color-gold {
    color: #49320a !important;
    background-color: #f0ad4e;
}

.material-content-surface .material-client-panel-action.bg-color-green {
    background-color: #5cb85c;
}

.material-content-surface .material-client-panel-action.bg-color-red {
    background-color: #d9534f;
}

.material-content-surface .material-client-panel-action.bg-color-blue {
    background-color: #3197b5;
}

.material-content-surface .material-client-panel-action.bg-color-orange {
    background-color: #f39c12;
}

.material-content-surface .material-client-panel-action.bg-color-pink {
    background-color: #d85ca9;
}

.material-content-surface .material-client-panel-action.bg-color-purple {
    background-color: #7b4f9d;
}

.material-content-surface .material-client-panel-action.bg-color-lime {
    color: #26320d !important;
    background-color: #8cbf26;
}

.material-content-surface .material-client-panel-action.bg-color-magenta {
    background-color: #d6007f;
}

.material-content-surface .material-client-panel-action.bg-color-teal {
    background-color: #008f8d;
}

.material-content-surface .material-client-panel-action.bg-color-turquoise {
    background-color: #159f85;
}

.material-content-surface .material-client-panel-action.bg-color-emerald {
    background-color: #24ad60;
}

.material-content-surface .material-client-panel-action.bg-color-amethyst {
    background-color: #8e44ad;
}

.material-content-surface .material-client-panel-action.bg-color-wet-asphalt {
    background-color: #34495e;
}

.material-content-surface .material-client-panel-action.bg-color-midnight-blue {
    background-color: #2c3e50;
}

.material-content-surface .material-client-panel-action.bg-color-sun-flower {
    color: #423604 !important;
    background-color: #f1c40f;
}

.material-content-surface .material-client-panel-action.bg-color-pomegranate {
    background-color: #c0392b;
}

.material-content-surface .material-client-panel-action.bg-color-silver {
    color: #263238 !important;
    background-color: #bdc3c7;
}

.material-content-surface .material-client-panel-action.bg-color-asbestos {
    background-color: #687475;
}

.material-content-surface .material-client-panel-action:hover,
.material-content-surface .material-client-panel-action:focus {
    color: #fff;
    border-color: transparent;
    filter: brightness(.9);
    transform: translateY(-1px);
}

html.material-theme-dark .material-content-surface .btn-default:not([class*="bg-color-"]) {
    color: var(--material-primary-dark);
    background: #202d39;
    border-color: #455a6b;
}

html.material-theme-dark .material-content-surface .btn-default:not([class*="bg-color-"]):hover,
html.material-theme-dark .material-content-surface .btn-default:not([class*="bg-color-"]):focus {
    color: #fff;
    background: #2b3b49;
    border-color: #5d7486;
}

@media (max-width: 575px) {
    .material-client-panel-header {
        align-items: stretch;
        flex-direction: column;
    }

    .material-content-surface .material-client-panel-action {
        align-self: flex-start;
    }
}

/* Logged-in client area component alignment. */
.material-content-surface .btn,
.material-content-surface button,
.material-document-page .btn,
#order-standard_cart .btn {
    position: relative;
    overflow: hidden;
}

.material-button-ripple {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    background: rgba(255, 255, 255, .36);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    animation: material-button-ripple .55s ease-out;
}

.material-button-icon {
    display: inline-block;
    flex: 0 0 auto;
    margin-right: 7px;
    line-height: inherit;
    text-align: center;
}

.btn.icon-only .material-button-icon,
.btn .material-button-icon:only-child {
    margin-right: 0;
}

@keyframes material-button-ripple {
    0% { opacity: .55; transform: scale(0); }
    100% { opacity: 0; transform: scale(2.25); }
}

.material-content-surface .btn-group,
.material-content-surface .dataTables_paginate,
.material-content-surface .dataTables_paginate .pagination {
    display: inline-flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 6px;
}

.material-content-surface .btn-group > .btn,
.material-content-surface .dataTables_paginate .pagination > li > a,
.material-content-surface .dataTables_paginate .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    margin: 0;
    line-height: 1.2;
}

.material-content-surface .label.status {
    min-width: 82px;
    padding: 6px 10px;
    color: #fff;
    border: 0;
    border-radius: 14px;
    text-align: center;
    white-space: nowrap;
}

.material-content-surface .status-paid,
.material-content-surface .status-active,
.material-content-surface .status-answered { background: #11c15b !important; }
.material-content-surface .status-unpaid,
.material-content-surface .status-overdue,
.material-content-surface .status-customer-reply { background: #ff5252 !important; }
.material-content-surface .status-pending,
.material-content-surface .status-payment-pending,
.material-content-surface .status-in-progress { color: #443008 !important; background: #ffb64d !important; }
.material-content-surface .status-open { background: #448aff !important; }
.material-content-surface .status-on-hold,
.material-content-surface .status-refunded { background: #00a8b5 !important; }
.material-content-surface .status-cancelled,
.material-content-surface .status-collections,
.material-content-surface .status-closed { background: #607d8b !important; }

.material-admin-return {
    position: fixed !important;
    z-index: 1045;
    top: 50%;
    right: 0;
    width: auto !important;
    min-width: 44px;
    height: 44px !important;
    padding: 0 13px !important;
    color: #fff !important;
    background: #263544 !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-right: 0 !important;
    border-radius: 5px 0 0 5px !important;
    box-shadow: 0 5px 18px rgba(27, 39, 49, .28);
    transform: translateY(-50%);
}

.material-admin-return span {
    max-width: 0;
    overflow: hidden;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    white-space: nowrap;
    transition: max-width .2s ease, margin .2s ease, opacity .2s ease;
}

.material-admin-return:hover span,
.material-admin-return:focus span {
    max-width: 190px;
    margin-left: 8px;
    opacity: 1;
}

.material-provider-group > h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.material-provider-group > h3:focus-visible {
    outline: 2px solid var(--material-primary);
    outline-offset: 3px;
}

.material-provider-caret {
    margin-left: 10px;
    font-size: 10px;
    transition: transform .18s ease;
}

.material-provider-group.is-collapsed > h3 .material-provider-caret {
    transform: rotate(-90deg);
}

.material-provider-group.is-collapsed > a {
    display: none;
}

.material-document-page #fullpage-overlay.w-hidden {
    display: none !important;
    pointer-events: none !important;
}

.material-document-page .invoice-container {
    position: relative;
    z-index: 1;
    max-width: 1140px;
    padding: 30px;
    background: #fff;
    border-radius: 7px;
    box-shadow: 0 3px 18px rgba(38, 50, 56, .12);
}

.material-document-page .invoice-status > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    padding: 9px 16px;
    color: #fff;
    border-radius: 18px;
    font-weight: 700;
}

.material-document-page .invoice-status .paid { background: #11c15b; }
.material-document-page .invoice-status .unpaid { background: #ff5252; }
.material-document-page .invoice-status .draft,
.material-document-page .invoice-status .payment-pending { background: #ffb64d; }
.material-document-page .invoice-status .refunded { background: #00a8b5; }
.material-document-page .invoice-status .cancelled,
.material-document-page .invoice-status .collections { background: #607d8b; }

.material-document-page .material-invoice-actions {
    display: inline-flex;
    align-items: stretch;
    gap: 8px;
    margin: 22px 0 14px;
}

.material-document-page .material-invoice-actions > .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 40px;
    margin: 0;
    padding: 9px 16px;
    overflow: hidden;
    color: var(--material-primary);
    background: #fff;
    border: 1px solid #cbd7e1;
    border-radius: 4px !important;
    box-shadow: 0 2px 6px rgba(38, 50, 56, .10);
    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}

.material-document-page .material-invoice-actions > .btn:hover,
.material-document-page .material-invoice-actions > .btn:focus {
    color: #fff;
    background: var(--material-primary);
    border-color: var(--material-primary);
    box-shadow: 0 4px 10px rgba(68, 138, 255, .24);
    outline: 0;
    transform: translateY(-1px);
}

.material-document-page .material-invoice-actions > .btn i {
    width: 14px;
    text-align: center;
}

html.material-theme-dark .material-document-page .material-invoice-actions > .btn {
    color: #94bcff;
    background: #202d39;
    border-color: #455a6b;
}

html.material-theme-dark .material-document-page .material-invoice-actions > .btn:hover,
html.material-theme-dark .material-document-page .material-invoice-actions > .btn:focus {
    color: #fff;
    background: #448aff;
    border-color: #448aff;
}

html.material-theme-dark .material-document-page .invoice-container {
    color: #d8e2e9 !important;
    background: #1c2732 !important;
    border-color: #344554;
}

html.material-theme-dark .material-document-page .invoice-container h1,
html.material-theme-dark .material-document-page .invoice-container h2,
html.material-theme-dark .material-document-page .invoice-container h3,
html.material-theme-dark .material-document-page .invoice-container h4,
html.material-theme-dark .material-document-page .invoice-container h5,
html.material-theme-dark .material-document-page .invoice-container h6,
html.material-theme-dark .material-document-page .invoice-container strong,
html.material-theme-dark .material-document-page .invoice-container address,
html.material-theme-dark .material-document-page .invoice-container .small-text {
    color: #edf4fa !important;
}

html.material-theme-dark .material-document-page .invoice-container hr {
    border-color: #344554;
}

html.material-theme-dark .material-document-page .invoice-container .card,
html.material-theme-dark .material-document-page .invoice-container .table-responsive,
html.material-theme-dark .material-document-page .transactions-container {
    color: #d8e2e9;
    background: #1c2732 !important;
    border-color: #344554;
}

html.material-theme-dark .material-document-page .invoice-container .card-header {
    color: #edf4fa !important;
    background: #202d39 !important;
    border-color: #344554;
}

html.material-theme-dark .material-document-page .invoice-container .card-header .card-title,
html.material-theme-dark .material-document-page .invoice-container .card-header strong {
    color: #edf4fa !important;
}

html.material-theme-dark .material-document-page .invoice-container .table {
    color: #d8e2e9 !important;
    background: #1c2732 !important;
}

html.material-theme-dark .material-document-page .invoice-container .table thead th,
html.material-theme-dark .material-document-page .invoice-container .table thead td,
html.material-theme-dark .material-document-page .invoice-container .table tbody th,
html.material-theme-dark .material-document-page .invoice-container .table tbody td,
html.material-theme-dark .material-document-page .invoice-container .table tfoot th,
html.material-theme-dark .material-document-page .invoice-container .table tfoot td {
    color: #d8e2e9 !important;
    background: transparent !important;
    border-color: #344554 !important;
}

html.material-theme-dark .material-document-page .invoice-container .table .total-row {
    color: #edf4fa !important;
    background: #202d39 !important;
}

html.material-theme-dark .material-document-page .invoice-container .form-control,
html.material-theme-dark .material-document-page .invoice-container .custom-select,
html.material-theme-dark .material-document-page .invoice-container select {
    color: #edf4fa !important;
    background: #17212b !important;
    border-color: #526474 !important;
}

html.material-theme-dark .material-document-page .invoice-container a:not(.btn) {
    color: #94bcff;
}

html.material-theme-dark .material-document-page .invoice-container a:not(.btn):hover,
html.material-theme-dark .material-document-page .invoice-container a:not(.btn):focus {
    color: #b7d1ff;
}

.material-content-surface .announcements > .announcement {
    overflow: hidden;
    margin-bottom: 22px;
    padding: 0 0 22px;
    border-bottom: 1px solid var(--material-line);
}

.material-announcements {
    color: var(--material-ink);
}

.material-announcements-heading {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding: 22px 24px;
    color: #fff;
    background: linear-gradient(135deg, #263544, #34495e);
    border-radius: 7px;
    box-shadow: 0 5px 18px rgba(38, 50, 56, .16);
}

.material-announcements-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: #fff;
    background: var(--material-primary);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(68, 138, 255, .28);
    font-size: 18px;
}

.material-announcements-heading h1 {
    margin: 0;
    color: #fff !important;
    font-size: 23px;
    font-weight: 700;
}

.material-announcements-heading p {
    margin: 5px 0 0;
    color: rgba(255, 255, 255, .72) !important;
}

.material-content-surface .material-announcement-list {
    display: grid;
    gap: 18px;
}

.material-content-surface .material-announcement-list > .material-announcement-card {
    position: relative;
    overflow: hidden;
    margin: 0;
    padding: 0;
    background: var(--material-surface);
    border: 1px solid var(--material-line);
    border-radius: 7px;
    box-shadow: 0 3px 14px rgba(38, 50, 56, .09);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.material-content-surface .material-announcement-list > .material-announcement-card:hover {
    border-color: rgba(68, 138, 255, .45);
    box-shadow: 0 8px 22px rgba(38, 50, 56, .13);
    transform: translateY(-2px);
}

.material-announcement-card-accent {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--material-primary), var(--material-info));
}

.material-announcement-card-body {
    padding: 22px 24px 21px 27px;
}

.material-content-surface .material-announcement-card h2 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 10px;
    padding: 0;
    color: var(--material-ink);
    background: transparent;
    font-size: 19px;
    line-height: 1.4;
}

.material-content-surface .material-announcement-card h2 a:not(.btn) {
    color: var(--material-ink);
}

.material-content-surface .material-announcement-card h2 a:not(.btn):hover,
.material-content-surface .material-announcement-card h2 a:not(.btn):focus {
    color: var(--material-primary);
    text-decoration: none;
}

.material-announcement-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    color: var(--material-muted);
    font-size: 12px;
}

.material-announcement-meta i {
    margin-right: 5px;
    color: var(--material-primary);
}

.material-announcement-summary {
    margin-bottom: 17px;
    color: #52616c;
    line-height: 1.7;
}

.material-announcement-summary > :last-child {
    margin-bottom: 0;
}

.material-content-surface .material-announcement-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.material-content-surface .material-announcement-read-more i {
    margin: 0;
    transition: transform .18s ease;
}

.material-content-surface .material-announcement-read-more:hover i,
.material-content-surface .material-announcement-read-more:focus i {
    transform: translateX(3px);
}

.material-announcements-pagination {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

html.material-theme-dark .material-content-surface .material-announcement-list > .material-announcement-card {
    background: #1c2732;
    border-color: #344554;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
}

html.material-theme-dark .material-content-surface .material-announcement-card h2,
html.material-theme-dark .material-content-surface .material-announcement-card h2 a:not(.btn) {
    color: #edf4fa !important;
}

html.material-theme-dark .material-announcement-summary {
    color: #c7d3dc;
}

html.material-theme-dark .material-announcement-meta {
    color: #a9bac8;
}

@media (max-width: 767px) {
    .material-announcements-heading {
        align-items: flex-start;
        padding: 19px 17px;
    }

    .material-announcements-heading h1 {
        font-size: 20px;
    }

    .material-announcement-card-body {
        padding: 19px 17px 18px 21px;
    }

    .material-content-surface .material-announcement-card h2 {
        font-size: 17px;
    }
}

.material-content-surface .announcements > .announcement h1 {
    margin: 0 -20px 16px;
    padding: 15px 20px;
    color: #fff;
    background: linear-gradient(135deg, #263544, #34495e);
    font-size: 20px;
}

.material-content-surface .announcements > .announcement h1 a {
    color: inherit;
}

@media (max-width: 767px) {
    .material-admin-return span {
        display: none;
    }

    .material-document-page .invoice-container {
        padding: 18px 14px;
        border-radius: 0;
    }

    .material-document-page .material-invoice-actions {
        display: flex;
        float: none !important;
        width: 100%;
    }

    .material-document-page .material-invoice-actions > .btn {
        flex: 1 1 0;
    }
}

/* Logged-in navigation uses the custom menu in the dark bar and WHMCS in the light bar. */
.material-swapped-product-menu .material-product-link {
    color: rgba(255, 255, 255, .88);
}

.material-swapped-product-menu .material-product-link:hover,
.material-swapped-product-menu .material-product-link:focus,
.material-swapped-product-menu .material-product-item.open > .material-product-link {
    color: #fff;
    background: rgba(255, 255, 255, .08);
}

.material-swapped-whmcs-menu {
    color: var(--material-ink);
    background: #fff;
    border-bottom: 1px solid var(--material-line);
}

.material-swapped-whmcs-menu .material-whmcs-menu > li > a {
    color: #536571;
}

.material-swapped-whmcs-menu .material-whmcs-menu > li > a:hover,
.material-swapped-whmcs-menu .material-whmcs-menu > li > a:focus,
.material-swapped-whmcs-menu .material-whmcs-menu > li.open > a,
.material-swapped-whmcs-menu .material-whmcs-menu > li.active > a {
    color: var(--material-primary-dark);
    background: rgba(68, 138, 255, .07);
}

@media (max-width: 991px) {
    .material-swapped-product-menu .material-product-mobile-toggle {
        color: #fff;
        background: #263544;
    }

    .material-swapped-whmcs-menu .material-whmcs-mobile-toggle {
        color: var(--material-ink);
        background: #fff;
        border-bottom: 1px solid var(--material-line);
    }

    .material-swapped-whmcs-menu .material-whmcs-menu-panel {
        color: var(--material-ink);
        background: #fff;
    }

    .material-swapped-whmcs-menu .material-whmcs-menu > li > a {
        color: #536571;
    }
}

.material-ticket-submit {
    padding: 26px;
    color: var(--material-ink);
    background: var(--material-surface);
    border: 1px solid var(--material-line);
    border-radius: 7px;
    box-shadow: 0 3px 18px rgba(38, 50, 56, .10);
}

.material-ticket-submit-heading {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--material-line);
}

.material-ticket-submit-heading h2 {
    margin: 0 0 6px;
    color: var(--material-ink);
    font-size: 22px;
    font-weight: 700;
}

.material-ticket-submit-heading p {
    margin: 0;
    color: var(--material-muted);
    line-height: 1.55;
}

.material-ticket-submit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    color: #fff;
    background: linear-gradient(135deg, var(--material-primary), #00bcd4);
    border-radius: 50%;
    box-shadow: 0 5px 14px rgba(68, 138, 255, .24);
}

.material-ticket-department-grid {
    display: flex;
    flex-wrap: wrap;
    row-gap: 18px;
}

.material-ticket-department-card {
    display: flex;
    align-items: center;
    gap: 15px;
    height: 100%;
    min-height: 112px;
    padding: 20px;
    color: var(--material-ink);
    background: #f8fafc;
    border: 1px solid var(--material-line);
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(38, 50, 56, .06);
    text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.material-ticket-department-card:hover,
.material-ticket-department-card:focus {
    color: var(--material-ink);
    border-color: var(--material-primary);
    box-shadow: 0 7px 18px rgba(68, 138, 255, .15);
    outline: 0;
    text-decoration: none;
    transform: translateY(-2px);
}

.material-ticket-department-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    color: var(--material-primary);
    background: rgba(68, 138, 255, .10);
    border-radius: 50%;
}

.material-ticket-department-copy {
    display: flex;
    min-width: 0;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 6px;
}

.material-ticket-department-copy strong {
    color: var(--material-primary);
    font-size: 15px;
}

.material-ticket-department-copy > span {
    color: var(--material-muted);
    font-size: 13px;
    line-height: 1.5;
}

.material-ticket-department-arrow {
    color: var(--material-muted);
    font-size: 12px;
    transition: color .18s ease, transform .18s ease;
}

.material-ticket-department-card:hover .material-ticket-department-arrow,
.material-ticket-department-card:focus .material-ticket-department-arrow {
    color: var(--material-primary);
    transform: translateX(3px);
}

html.material-theme-dark .material-ticket-submit {
    color: #c7d3dc;
    background: #1c2732;
    border-color: #344554;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .28);
}

html.material-theme-dark .material-ticket-submit-heading {
    border-bottom-color: #344554;
}

html.material-theme-dark .material-ticket-submit-heading h2,
html.material-theme-dark .material-ticket-department-card {
    color: #edf4fa;
}

html.material-theme-dark .material-ticket-submit-heading p,
html.material-theme-dark .material-ticket-department-copy > span,
html.material-theme-dark .material-ticket-department-arrow {
    color: #a9bac8;
}

html.material-theme-dark .material-ticket-department-card {
    background: #202d39;
    border-color: #344554;
    box-shadow: 0 2px 9px rgba(0, 0, 0, .18);
}

html.material-theme-dark .material-ticket-department-card:hover,
html.material-theme-dark .material-ticket-department-card:focus {
    color: #edf4fa;
    background: #253543;
    border-color: #6ea4ff;
}

html.material-theme-dark .material-ticket-department-icon {
    color: #94bcff;
    background: rgba(110, 164, 255, .14);
}

html.material-theme-dark .material-ticket-department-copy strong {
    color: #94bcff;
}

.template-supportticketsubmit-steptwo .material-content-surface > form {
    padding: 26px;
    color: var(--material-ink);
    background: var(--material-surface);
    border: 1px solid var(--material-line);
    border-radius: 7px;
    box-shadow: 0 3px 18px rgba(38, 50, 56, .10);
}

.template-supportticketsubmit-steptwo .material-content-surface > form label {
    color: var(--material-ink);
}

.template-supportticketsubmit-steptwo .ticket-attachments-message {
    margin-top: 10px;
}

html.material-theme-dark .template-supportticketsubmit-steptwo .material-content-surface > form {
    color: #c7d3dc;
    background: #1c2732;
    border-color: #344554;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .28);
}

html.material-theme-dark .template-supportticketsubmit-steptwo .material-content-surface > form label {
    color: #edf4fa;
}

.template-supportticketsubmit-steptwo .md-editor,
.template-viewticket .md-editor {
    overflow: hidden;
    color: #37474f;
    background: #fff;
    border: 1px solid #cbd7e1;
    border-radius: 5px;
}

.template-supportticketsubmit-steptwo .md-editor > .md-header,
.template-viewticket .md-editor > .md-header {
    color: #37474f;
    background: #f5f7fa;
    border-bottom: 1px solid #dfe7ee;
}

.template-supportticketsubmit-steptwo .md-editor textarea,
.template-supportticketsubmit-steptwo .md-editor .md-input,
.template-viewticket .md-editor textarea,
.template-viewticket .md-editor .md-input {
    color: #263238 !important;
    background: #fff !important;
    caret-color: #263238;
    -webkit-text-fill-color: #263238;
}

.template-supportticketsubmit-steptwo .md-editor textarea::placeholder,
.template-supportticketsubmit-steptwo .md-editor .md-input::placeholder,
.template-viewticket .md-editor textarea::placeholder,
.template-viewticket .md-editor .md-input::placeholder {
    color: #78909c;
    opacity: 1;
}

.template-supportticketsubmit-steptwo .md-editor > .md-preview,
.template-viewticket .md-editor > .md-preview {
    color: #263238;
    background: #fff;
}

.template-supportticketsubmit-steptwo .md-editor > .md-footer,
.template-viewticket .md-editor > .md-footer {
    color: #607d8b;
    background: #f5f7fa;
    border-top: 1px solid #dfe7ee;
}

html.material-theme-dark .template-supportticketsubmit-steptwo .md-editor,
html.material-theme-dark .template-viewticket .md-editor {
    color: #edf4fa;
    background: #17212b;
    border-color: #455a6b;
}

html.material-theme-dark .template-supportticketsubmit-steptwo .md-editor > .md-header,
html.material-theme-dark .template-viewticket .md-editor > .md-header {
    color: #edf4fa;
    background: #202d39;
    border-bottom-color: #455a6b;
}

html.material-theme-dark .template-supportticketsubmit-steptwo .md-editor textarea,
html.material-theme-dark .template-supportticketsubmit-steptwo .md-editor .md-input,
html.material-theme-dark .template-viewticket .md-editor textarea,
html.material-theme-dark .template-viewticket .md-editor .md-input {
    color: #edf4fa !important;
    background: #17212b !important;
    caret-color: #94bcff;
    -webkit-text-fill-color: #edf4fa;
}

html.material-theme-dark .template-supportticketsubmit-steptwo .md-editor textarea::placeholder,
html.material-theme-dark .template-supportticketsubmit-steptwo .md-editor .md-input::placeholder,
html.material-theme-dark .template-viewticket .md-editor textarea::placeholder,
html.material-theme-dark .template-viewticket .md-editor .md-input::placeholder {
    color: #91a5b5;
}

html.material-theme-dark .template-supportticketsubmit-steptwo .md-editor > .md-preview,
html.material-theme-dark .template-viewticket .md-editor > .md-preview {
    color: #edf4fa;
    background: #17212b;
}

html.material-theme-dark .template-supportticketsubmit-steptwo .md-editor > .md-footer,
html.material-theme-dark .template-viewticket .md-editor > .md-footer {
    color: #a9bac8;
    background: #202d39;
    border-top-color: #455a6b;
}

@media (max-width: 767px) {
    .material-ticket-submit {
        padding: 20px 16px;
    }

    .material-ticket-submit-heading {
        gap: 12px;
    }

    .material-ticket-submit-heading h2 {
        font-size: 19px;
    }

    .template-supportticketsubmit-steptwo .material-content-surface > form {
        padding: 20px 16px;
    }

    .material-content-surface .material-responsive-table,
    .material-content-surface .material-responsive-table tbody,
    .material-content-surface .material-responsive-table tr,
    .material-content-surface .material-responsive-table td {
        display: block;
        width: 100%;
    }

    .material-content-surface .material-responsive-table thead {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
    }

    .material-content-surface .material-responsive-table tbody tr {
        overflow: hidden;
        margin-bottom: 14px;
        background: var(--material-surface);
        border: 1px solid var(--material-line);
        border-radius: 6px;
        box-shadow: 0 2px 10px rgba(38, 50, 56, .08);
    }

    .material-content-surface .material-responsive-table tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        min-height: 46px;
        padding: 11px 14px;
        text-align: right !important;
        white-space: normal;
    }

    .material-content-surface .material-responsive-table tbody td::before {
        flex: 0 0 42%;
        color: var(--material-muted);
        content: attr(data-material-label);
        font-weight: 700;
        text-align: left;
    }

    .material-content-surface .material-responsive-table tbody td[colspan]::before {
        display: none;
    }
}
/* Accessibility and shared interaction refinements */
:root {
    --material-focus: #0b63ce;
    --material-focus-ring: rgba(11, 99, 206, .34);
}

html.material-theme-dark {
    --material-focus: #8db8ff;
    --material-focus-ring: rgba(141, 184, 255, .42);
}

.material-client-area a:focus-visible,
.material-client-area button:focus-visible,
.material-client-area input:focus-visible,
.material-client-area select:focus-visible,
.material-client-area textarea:focus-visible,
.material-document-page a:focus-visible,
.material-document-page button:focus-visible,
.material-document-page input:focus-visible,
.material-document-page select:focus-visible,
.material-document-page textarea:focus-visible {
    outline: 3px solid var(--material-focus) !important;
    outline-offset: 3px;
    box-shadow: 0 0 0 5px var(--material-focus-ring) !important;
}

.material-client-area .text-muted,
.material-client-area small,
.material-client-area .help-block {
    color: #566874 !important;
}

html.material-theme-dark .material-client-area .text-muted,
html.material-theme-dark .material-client-area small,
html.material-theme-dark .material-client-area .help-block {
    color: #b3c2cd !important;
}

.material-theme-selector {
    position: relative;
}

.material-theme-menu {
    position: absolute;
    z-index: 2100;
    top: calc(100% + 10px);
    right: 0;
    width: 168px;
    padding: 7px;
    background: #fff;
    border: 1px solid #d8e1e8;
    border-radius: 7px;
    box-shadow: 0 12px 34px rgba(24, 39, 52, .18);
}

.material-theme-menu[hidden] {
    display: none !important;
}

.material-theme-menu button {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px;
    padding: 8px 11px;
    color: #334754;
    background: transparent;
    border: 0;
    border-radius: 5px;
    gap: 10px;
    text-align: left;
}

.material-theme-menu button:hover,
.material-theme-menu button:focus,
.material-theme-menu button[aria-checked="true"] {
    color: #174f9b;
    background: #edf4ff;
}

.material-theme-menu button[aria-checked="true"]::after {
    margin-left: auto;
    color: #1769d2;
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

html.material-theme-dark .material-theme-menu {
    background: #1d2a35;
    border-color: #465b6c;
}

html.material-theme-dark .material-theme-menu button {
    color: #dce6ed;
}

html.material-theme-dark .material-theme-menu button:hover,
html.material-theme-dark .material-theme-menu button:focus,
html.material-theme-dark .material-theme-menu button[aria-checked="true"] {
    color: #fff;
    background: #293b4a;
}

.material-toast-region {
    position: fixed;
    z-index: 3000;
    top: 82px;
    right: 20px;
    display: grid;
    width: min(380px, calc(100vw - 32px));
    gap: 10px;
    pointer-events: none;
}

.material-toast {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding: 13px 14px;
    color: #263944;
    background: #fff;
    border: 1px solid #dbe4ea;
    border-left: 5px solid #2878d4;
    border-radius: 6px;
    box-shadow: 0 12px 30px rgba(23, 38, 51, .2);
    gap: 11px;
    opacity: 0;
    pointer-events: auto;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}

.material-toast.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.material-toast-success { border-left-color: #087f3d; }
.material-toast-error { border-left-color: #c62828; }
.material-toast-warning { border-left-color: #b45f00; }
.material-toast > button {
    width: 32px;
    height: 32px;
    padding: 0;
    color: inherit;
    background: transparent;
    border: 0;
    border-radius: 50%;
}

html.material-theme-dark .material-toast {
    color: #eef5f9;
    background: #1d2a35;
    border-color: #4b6070;
}

.material-search-open {
    overflow: hidden;
}

.material-search-dialog {
    position: fixed;
    z-index: 2900;
    inset: 0;
}

.material-search-dialog[hidden] {
    display: none !important;
}

.material-search-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 18, 28, .72);
    border: 0;
}

.material-search-panel {
    position: relative;
    width: min(760px, calc(100vw - 32px));
    margin: min(12vh, 100px) auto 0;
    padding: 28px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .34);
}

.material-search-panel > header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
    gap: 20px;
}

.material-search-eyebrow {
    color: #1769d2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.material-search-panel h2 {
    margin: 4px 0 0;
    color: #263944;
    font-size: clamp(22px, 4vw, 30px);
}

.material-search-panel label {
    display: block;
    margin-bottom: 7px;
    color: #425866;
    font-size: 13px;
    font-weight: 600;
}

.material-search-input {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding-left: 15px;
    border: 2px solid #b8c7d2;
    border-radius: 7px;
    gap: 10px;
}

.material-search-input:focus-within {
    border-color: var(--material-focus);
    box-shadow: 0 0 0 4px var(--material-focus-ring);
}

.material-search-input input {
    width: 100%;
    min-height: 50px;
    color: #263944;
    background: transparent;
    border: 0;
    outline: 0;
}

.material-search-input .btn {
    min-height: 50px;
    border-radius: 0 5px 5px 0;
}

.material-search-shortcuts {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    gap: 8px;
}

.material-search-shortcuts a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 8px 12px;
    color: #24578f;
    background: #f3f7fb;
    border: 1px solid #d8e3ec;
    border-radius: 5px;
    gap: 8px;
}

html.material-theme-dark .material-search-panel {
    color: #dbe6ed;
    background: #17232d;
}

html.material-theme-dark .material-search-panel h2,
html.material-theme-dark .material-search-panel label,
html.material-theme-dark .material-search-input input {
    color: #eef5f9;
}

html.material-theme-dark .material-search-input {
    border-color: #506677;
}

html.material-theme-dark .material-search-shortcuts a {
    color: #b5d1ff;
    background: #21313e;
    border-color: #465b6c;
}

.material-standard-page-header {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 78px;
    margin: 0 0 24px;
    padding: 16px 20px;
    background: #fff;
    border-left: 4px solid #448aff;
    border-radius: 6px;
    box-shadow: 0 3px 16px rgba(42, 58, 70, .1);
}

.material-standard-page-header h1 {
    display: flex;
    align-items: center;
    margin: 0;
    color: #263944;
    font-size: clamp(24px, 3vw, 34px);
    gap: 13px;
}

.material-page-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: #1769d2;
    background: #eaf2ff;
    border-radius: 50%;
    font-size: 18px;
}

html.material-theme-dark .material-standard-page-header {
    background: #1b2935;
}

html.material-theme-dark .material-standard-page-header h1 {
    color: #f0f6fa;
}

html.material-theme-dark .material-page-heading-icon {
    color: #a9c8ff;
    background: #263b4c;
}

.material-status-dashboard {
    margin-bottom: 24px;
}

.material-invoice-reference {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.material-invoice-reference h3 {
    margin: 0;
}

.material-copy-button {
    width: 38px;
    height: 38px;
    color: #245f9e;
    background: #edf4ff;
    border: 1px solid #cbdcf1;
    border-radius: 50%;
}

html.material-theme-dark .material-copy-button {
    color: #b5d1ff;
    background: #263b4c;
    border-color: #4d6373;
}

.material-status-dashboard > .row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    gap: 14px;
}

.material-status-dashboard > .row::before,
.material-status-dashboard > .row::after {
    display: none;
    content: none;
}

.material-status-dashboard .material-status-card {
    width: auto;
    min-height: 124px;
    margin: 0;
    padding: 0;
    border: 0;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
}

.material-status-dashboard .material-status-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(30, 48, 61, .2);
}

.material-status-dashboard .is-services { background: #9c2f3b !important; }
.material-status-dashboard .is-domains { background: #455a64 !important; }
.material-status-dashboard .is-tickets { background: #087b8c !important; }
.material-status-dashboard .is-invoices { background: #087f3d !important; }

@media (max-width: 991px) {
    .material-status-dashboard > .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .material-content-surface .material-responsive-table:not(.material-no-card-table),
    .material-document-content .material-responsive-table:not(.material-no-card-table),
    .material-content-surface .material-responsive-table:not(.material-no-card-table) tbody,
    .material-document-content .material-responsive-table:not(.material-no-card-table) tbody,
    .material-content-surface .material-responsive-table:not(.material-no-card-table) tr,
    .material-document-content .material-responsive-table:not(.material-no-card-table) tr,
    .material-content-surface .material-responsive-table:not(.material-no-card-table) td,
    .material-document-content .material-responsive-table:not(.material-no-card-table) td {
        display: block;
        width: 100%;
    }

    .material-content-surface .material-responsive-table:not(.material-no-card-table) thead,
    .material-document-content .material-responsive-table:not(.material-no-card-table) thead {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
    }

    .material-content-surface .material-responsive-table:not(.material-no-card-table) tbody tr,
    .material-document-content .material-responsive-table:not(.material-no-card-table) tbody tr {
        margin-bottom: 14px;
        padding: 8px 14px;
        background: #fff;
        border: 1px solid #dce5eb;
        border-radius: 7px;
        box-shadow: 0 3px 12px rgba(38, 57, 68, .08);
    }

    .material-content-surface .material-responsive-table:not(.material-no-card-table) tbody td,
    .material-document-content .material-responsive-table:not(.material-no-card-table) tbody td {
        display: grid;
        grid-template-columns: minmax(110px, 40%) minmax(0, 1fr);
        padding: 10px 0 !important;
        border: 0 !important;
        border-bottom: 1px solid #e6edf2 !important;
        gap: 12px;
        text-align: right;
    }

    .material-content-surface .material-responsive-table:not(.material-no-card-table) tbody td:last-child,
    .material-document-content .material-responsive-table:not(.material-no-card-table) tbody td:last-child {
        border-bottom: 0 !important;
    }

    .material-content-surface .material-responsive-table tbody td::before,
    .material-document-content .material-responsive-table tbody td::before {
        color: #526774;
        content: attr(data-material-label);
        font-weight: 700;
        text-align: left;
    }

    html.material-theme-dark .material-content-surface .material-responsive-table tbody tr,
    html.material-theme-dark .material-document-content .material-responsive-table tbody tr {
        background: #1b2935;
        border-color: #405463;
    }

    html.material-theme-dark .material-content-surface .material-responsive-table tbody td,
    html.material-theme-dark .material-document-content .material-responsive-table tbody td {
        border-bottom-color: #344957 !important;
    }

    html.material-theme-dark .material-content-surface .material-responsive-table tbody td::before,
    html.material-theme-dark .material-document-content .material-responsive-table tbody td::before {
        color: #b9c9d3;
    }

    .material-search-panel {
        margin-top: 24px;
        padding: 20px;
    }

    .material-search-input {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .material-search-input .btn {
        grid-column: 1 / -1;
        margin: 0 -2px -2px -17px;
        border-radius: 0 0 5px 5px;
    }
}

@media (max-width: 479px) {
    .material-status-dashboard > .row {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto !important;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }

    .material-button-ripple {
        display: none !important;
    }
}