/*
 * ZOSCLIENT 1.0.3 — visual refinement layer for WHMCS 7.6.0
 * Small UI polish only: hero card, context panels and spacing fixes.
 */

/* ------------------------------------------------------------------
   1) HOME HERO / OVERVIEW
   ------------------------------------------------------------------ */
body.wilo-authenticated .wilo-dashboard .wilo-overview {
    isolation: isolate;
    border-color: rgba(138, 44, 246, .38) !important;
    background:
        linear-gradient(135deg, rgba(138, 44, 246, .10), rgba(138, 44, 246, 0) 34%),
        linear-gradient(145deg, #242126 0%, #1e1d22 100%) !important;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .20), 0 0 0 1px rgba(138, 44, 246, .08) inset !important;
}

body.wilo-authenticated .wilo-dashboard .wilo-overview::before {
    border-top-width: 2px !important;
    border-top-color: rgba(138, 44, 246, .90) !important;
}

body.wilo-authenticated .wilo-dashboard .wilo-overview::after {
    position: absolute;
    inset: 0;
    z-index: 0;
    content: "";
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 20%, rgba(138, 44, 246, .22), transparent 24%),
        radial-gradient(circle at 76% 24%, rgba(138, 44, 246, .16), transparent 19%),
        linear-gradient(110deg, transparent 0%, rgba(255,255,255,.02) 52%, transparent 76%);
    animation: zosHeroGlow 12s ease-in-out infinite alternate;
}

body.wilo-authenticated .wilo-dashboard .wilo-overview-grid {
    opacity: .085 !important;
    background-image:
        linear-gradient(rgba(255, 255, 255, .14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .14) 1px, transparent 1px) !important;
    background-size: 34px 34px !important;
    background-position: 0 0;
    mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .82) 24%, #000 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, rgba(0, 0, 0, .82) 24%, #000 100%) !important;
    animation: zosGridDrift 18s linear infinite;
}

body.wilo-authenticated .wilo-dashboard .wilo-overview-art {
    top: 26px !important;
    right: 44px !important;
    width: min(23%, 250px) !important;
    min-height: 186px;
    color: #b777ff !important;
    opacity: 1 !important;
}

body.wilo-authenticated .wilo-dashboard .wilo-overview-art svg {
    display: none !important;
}

body.wilo-authenticated .wilo-dashboard .wilo-overview-art::before,
body.wilo-authenticated .wilo-dashboard .wilo-overview-art::after {
    position: absolute;
    content: "";
    pointer-events: none;
}

/* Soft animated pulse in the background */
body.wilo-authenticated .wilo-dashboard .wilo-overview-art::before {
    top: 6px;
    right: 18px;
    width: 160px;
    height: 160px;
    border: 1px solid rgba(183, 119, 255, .32);
    border-radius: 50%;
    box-shadow:
        0 0 0 15px rgba(138, 44, 246, .055),
        0 0 0 30px rgba(138, 44, 246, .032),
        inset 0 0 40px rgba(138, 44, 246, .04);
    animation: zosPulseRing 5.2s ease-in-out infinite;
}

/* Replaces the cloud with a cleaner server / control-card motif */
body.wilo-authenticated .wilo-dashboard .wilo-overview-art::after {
    top: 48px;
    right: -4px;
    width: 188px;
    height: 112px;
    border: 1px solid rgba(183, 119, 255, .48);
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(183, 119, 255, .12), rgba(183, 119, 255, .04)),
        linear-gradient(rgba(183, 119, 255, .58), rgba(183, 119, 255, .58)),
        linear-gradient(rgba(183, 119, 255, .58), rgba(183, 119, 255, .58)),
        radial-gradient(circle, rgba(220, 192, 255, .96) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(220, 192, 255, .96) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(220, 192, 255, .96) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(220, 192, 255, .96) 0 2px, transparent 2.6px),
        linear-gradient(90deg, rgba(183, 119, 255, .16), transparent 54%),
        linear-gradient(90deg, rgba(183, 119, 255, .16), transparent 54%);
    background-repeat: no-repeat;
    background-size:
        100% 100%,
        108px 2px,
        108px 2px,
        4px 4px,
        4px 4px,
        4px 4px,
        4px 4px,
        84px 24px,
        84px 24px;
    background-position:
        0 0,
        36px 38px,
        36px 74px,
        147px 37px,
        157px 37px,
        147px 73px,
        157px 73px,
        22px 26px,
        22px 62px;
    box-shadow:
        0 16px 36px rgba(0, 0, 0, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .025);
    transform: perspective(900px) rotateY(-10deg) rotateX(6deg);
    animation: zosHeroFloat 6.4s ease-in-out infinite;
}

/* ------------------------------------------------------------------
   2) BUTTON / SPACING FIXES
   ------------------------------------------------------------------ */
body.wilo-authenticated .btn-group.margin-bottom {
    position: relative;
    z-index: 4;
    display: inline-flex;
    clear: both;
    margin: 16px 0 18px !important;
    vertical-align: top;
}

body.wilo-authenticated .btn-group.margin-bottom .btn {
    min-height: 38px;
}

body.wilo-authenticated .btn-group.margin-bottom.open {
    z-index: 30;
}

body.wilo-authenticated .btn-group.margin-bottom .dropdown-menu {
    margin-top: 8px;
}

body.wilo-authenticated .table-container + .btn-group.margin-bottom {
    margin-top: 18px !important;
}

/* ------------------------------------------------------------------
   3) CONTEXT PANELS / OVERDUE-INVOICE BODY FIX
   ------------------------------------------------------------------ */
body.wilo-authenticated .wilo-context-menu .panel > .panel-body {
    display: block !important;
    width: 100%;
    min-height: 92px;
    padding: 18px 22px !important;
    color: #cfcad7 !important;
    line-height: 1.55;
}

body.wilo-authenticated .wilo-context-menu .panel > .panel-body > :last-child {
    margin-bottom: 0;
}

body.wilo-authenticated .wilo-context-menu .panel > .panel-body p {
    margin: 0;
}

body.wilo-authenticated .wilo-context-menu .panel > .panel-body strong,
body.wilo-authenticated .wilo-context-menu .panel > .panel-body b {
    color: #f5f2fa;
}

/* slightly cleaner label row */
body.wilo-authenticated .wilo-context-menu .wilo-context-menu-label {
    border-color: rgba(255, 255, 255, .08) !important;
    background: linear-gradient(180deg, rgba(138, 44, 246, .04), rgba(138, 44, 246, .02)), #292929 !important;
}

/* ------------------------------------------------------------------
   4) RESPONSIVE ADJUSTMENTS
   ------------------------------------------------------------------ */
@media (max-width: 1199px) {
    body.wilo-authenticated .wilo-dashboard .wilo-overview-art {
        right: 28px !important;
        width: min(25%, 220px) !important;
    }

    body.wilo-authenticated .wilo-dashboard .wilo-overview-art::before {
        width: 138px;
        height: 138px;
    }

    body.wilo-authenticated .wilo-dashboard .wilo-overview-art::after {
        width: 164px;
        height: 100px;
        background-size:
            100% 100%,
            96px 2px,
            96px 2px,
            4px 4px,
            4px 4px,
            4px 4px,
            4px 4px,
            74px 22px,
            74px 22px;
        background-position:
            0 0,
            32px 34px,
            32px 66px,
            129px 33px,
            139px 33px,
            129px 65px,
            139px 65px,
            18px 23px,
            18px 55px;
    }
}

@media (max-width: 991px) {
    body.wilo-authenticated .wilo-dashboard .wilo-overview {
        padding-right: 28px !important;
        padding-left: 28px !important;
    }

    body.wilo-authenticated .wilo-dashboard .wilo-overview-art {
        display: none !important;
    }

    body.wilo-authenticated .btn-group.margin-bottom {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.wilo-authenticated .wilo-dashboard .wilo-overview::after,
    body.wilo-authenticated .wilo-dashboard .wilo-overview-grid,
    body.wilo-authenticated .wilo-dashboard .wilo-overview-art::before,
    body.wilo-authenticated .wilo-dashboard .wilo-overview-art::after {
        animation: none !important;
    }
}

@keyframes zosHeroGlow {
    from {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .9;
    }
    to {
        transform: translate3d(-10px, 4px, 0) scale(1.03);
        opacity: 1;
    }
}

@keyframes zosGridDrift {
    from { background-position: 0 0; }
    to   { background-position: 34px 16px; }
}

@keyframes zosHeroFloat {
    0%, 100% { transform: perspective(900px) rotateY(-10deg) rotateX(6deg) translateY(0); }
    50%      { transform: perspective(900px) rotateY(-8deg) rotateX(4deg) translateY(-7px); }
}

@keyframes zosPulseRing {
    0%, 100% {
        transform: scale(1);
        opacity: .95;
    }
    50% {
        transform: scale(1.04);
        opacity: .72;
    }
}

/* ------------------------------------------------------------------
   5) CLIENT AREA CONTEXT MENU — KEEP IT ON THE LEFT ON DESKTOP
   ------------------------------------------------------------------ */
@media (min-width: 992px) {
    body.wilo-authenticated .wilo-content-container > .row.wilo-has-context-menu {
        display: grid !important;
        grid-template-columns: minmax(280px, 316px) minmax(0, 1fr) !important;
        grid-template-areas:
            "heading heading"
            "menu main" !important;
        align-items: start !important;
        column-gap: 24px !important;
        row-gap: 18px !important;
        margin-right: 0 !important;
        margin-left: 0 !important;
    }

    body.wilo-authenticated .wilo-content-container > .row.wilo-has-context-menu > .wilo-page-heading,
    body.wilo-authenticated .wilo-content-container > .row.wilo-has-context-menu > .main-content > .wilo-page-heading {
        grid-area: heading;
        width: 100%;
        max-width: none;
        margin: 0 0 10px !important;
    }

    body.wilo-authenticated .wilo-content-container > .row.wilo-has-context-menu > .wilo-context-menu {
        grid-area: menu;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
        position: sticky;
        top: calc(var(--wilo-topbar) + 18px);
        align-self: start;
    }

    body.wilo-authenticated .wilo-content-container > .row.wilo-has-context-menu > .main-content {
        grid-area: main;
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        margin: 0 !important;
        padding: 0 !important;
        float: none !important;
    }

    body.wilo-authenticated .wilo-context-menu-content,
    body.wilo-authenticated .wilo-context-primary,
    body.wilo-authenticated .wilo-context-secondary {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
        width: 100% !important;
    }

    body.wilo-authenticated .wilo-context-menu .wilo-context-menu-label {
        width: 100% !important;
        margin: 0 0 12px !important;
        padding: 14px 18px !important;
        align-items: center !important;
        border-radius: 14px !important;
    }

    body.wilo-authenticated .wilo-context-menu .panel,
    body.wilo-authenticated .wilo-context-menu .wilo-context-panel,
    body.wilo-authenticated .wilo-context-menu .panel-sidebar {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ------------------------------------------------------------------
   6) TOP SEARCH — VERTICALLY CENTER THE TEXT / PLACEHOLDER
   ------------------------------------------------------------------ */
body.wilo-body .wilo-command-search {
    min-height: 46px;
}

body.wilo-body .wilo-command-search input {
    display: block;
    height: 44px !important;
    line-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.wilo-body .wilo-command-search input::placeholder {
    line-height: 44px !important;
}

/* ------------------------------------------------------------------
   7) HERO ART REFINEMENT — CLEARER SERVER / CONTROL ILLUSTRATION
   ------------------------------------------------------------------ */
body.wilo-authenticated .wilo-dashboard .wilo-overview-art {
    top: 18px !important;
    right: 28px !important;
    width: min(24%, 268px) !important;
    min-height: 210px;
    opacity: 1 !important;
    filter: drop-shadow(0 18px 40px rgba(0, 0, 0, .18));
}

body.wilo-authenticated .wilo-dashboard .wilo-overview-art::before {
    top: 12px;
    right: 18px;
    width: 188px;
    height: 188px;
    border: 1px solid rgba(183, 119, 255, .18);
    border-radius: 50%;
    background:
        radial-gradient(circle at center, rgba(138, 44, 246, .12) 0 28%, transparent 29% 100%),
        radial-gradient(circle at center, transparent 0 61%, rgba(183, 119, 255, .14) 61.6%, transparent 62.4%),
        radial-gradient(circle at center, transparent 0 77%, rgba(183, 119, 255, .10) 77.6%, transparent 78.3%);
    box-shadow:
        0 0 0 18px rgba(138, 44, 246, .04),
        0 0 42px rgba(138, 44, 246, .10),
        inset 0 0 28px rgba(138, 44, 246, .05);
    animation: zosOrbitPulse 6.5s ease-in-out infinite;
}

body.wilo-authenticated .wilo-dashboard .wilo-overview-art::after {
    top: 44px;
    right: -6px;
    width: 206px;
    height: 122px;
    border: 1px solid rgba(183, 119, 255, .44);
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(183, 119, 255, .13), rgba(183, 119, 255, .04)),
        /* server tray dividers */
        linear-gradient(rgba(183, 119, 255, .20), rgba(183, 119, 255, .20)),
        linear-gradient(rgba(183, 119, 255, .20), rgba(183, 119, 255, .20)),
        /* status dots row 1 */
        radial-gradient(circle, rgba(227, 208, 255, .96) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(227, 208, 255, .96) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(227, 208, 255, .96) 0 2px, transparent 2.6px),
        /* status dots row 2 */
        radial-gradient(circle, rgba(227, 208, 255, .96) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(227, 208, 255, .96) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(227, 208, 255, .96) 0 2px, transparent 2.6px),
        /* status dots row 3 */
        radial-gradient(circle, rgba(227, 208, 255, .96) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(227, 208, 255, .96) 0 2px, transparent 2.6px),
        radial-gradient(circle, rgba(227, 208, 255, .96) 0 2px, transparent 2.6px),
        /* content lines */
        linear-gradient(90deg, rgba(183, 119, 255, .74), rgba(183, 119, 255, .74)),
        linear-gradient(90deg, rgba(183, 119, 255, .42), rgba(183, 119, 255, .42)),
        linear-gradient(90deg, rgba(183, 119, 255, .74), rgba(183, 119, 255, .74)),
        linear-gradient(90deg, rgba(183, 119, 255, .42), rgba(183, 119, 255, .42)),
        linear-gradient(90deg, rgba(183, 119, 255, .74), rgba(183, 119, 255, .74)),
        linear-gradient(90deg, rgba(183, 119, 255, .42), rgba(183, 119, 255, .42));
    background-repeat: no-repeat;
    background-size:
        100% 100%,
        158px 1px,
        158px 1px,
        4px 4px, 4px 4px, 4px 4px,
        4px 4px, 4px 4px, 4px 4px,
        4px 4px, 4px 4px, 4px 4px,
        76px 2px, 48px 2px,
        76px 2px, 48px 2px,
        76px 2px, 48px 2px;
    background-position:
        0 0,
        24px 41px,
        24px 80px,
        163px 29px, 173px 29px, 183px 29px,
        163px 59px, 173px 59px, 183px 59px,
        163px 90px, 173px 90px, 183px 90px,
        22px 26px, 22px 33px,
        22px 56px, 22px 63px,
        22px 87px, 22px 94px;
    box-shadow:
        0 18px 38px rgba(0, 0, 0, .18),
        inset 0 0 0 1px rgba(255, 255, 255, .025),
        0 0 38px rgba(138, 44, 246, .08);
    transform: perspective(1100px) rotateY(-10deg) rotateX(6deg);
    animation: zosServerFloat 6.2s ease-in-out infinite;
}

@media (max-width: 1199px) {
    body.wilo-authenticated .wilo-dashboard .wilo-overview-art {
        right: 18px !important;
        width: min(23%, 228px) !important;
    }

    body.wilo-authenticated .wilo-dashboard .wilo-overview-art::before {
        width: 160px;
        height: 160px;
    }

    body.wilo-authenticated .wilo-dashboard .wilo-overview-art::after {
        width: 178px;
        height: 112px;
        background-size:
            100% 100%,
            136px 1px,
            136px 1px,
            4px 4px, 4px 4px, 4px 4px,
            4px 4px, 4px 4px, 4px 4px,
            4px 4px, 4px 4px, 4px 4px,
            66px 2px, 42px 2px,
            66px 2px, 42px 2px,
            66px 2px, 42px 2px;
        background-position:
            0 0,
            20px 37px,
            20px 74px,
            141px 27px, 151px 27px, 161px 27px,
            141px 55px, 151px 55px, 161px 55px,
            141px 84px, 151px 84px, 161px 84px,
            18px 23px, 18px 30px,
            18px 51px, 18px 58px,
            18px 80px, 18px 87px;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.wilo-authenticated .wilo-dashboard .wilo-overview-art::before,
    body.wilo-authenticated .wilo-dashboard .wilo-overview-art::after {
        animation: none !important;
    }
}

@keyframes zosOrbitPulse {
    0%, 100% {
        transform: scale(1) translate3d(0, 0, 0);
        opacity: .92;
    }
    50% {
        transform: scale(1.035) translate3d(-2px, 2px, 0);
        opacity: .76;
    }
}

@keyframes zosServerFloat {
    0%, 100% {
        transform: perspective(1100px) rotateY(-10deg) rotateX(6deg) translateY(0);
    }
    50% {
        transform: perspective(1100px) rotateY(-8deg) rotateX(5deg) translateY(-8px);
    }
}

/* ==================================================================
   8) GLOBAL CONTRAST PASS — CONSISTENT DARK SURFACES
   ================================================================== */

/* Product/service details: remove the legacy light card from the status area. */
body.wilo-authenticated .product-details .product-status {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    border-radius: 14px !important;
    background: #242424 !important;
    box-shadow: 0 14px 36px rgba(0, 0, 0, .16);
}

body.wilo-authenticated .product-details .product-icon {
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 34px !important;
    border-radius: 0 !important;
    color: #c69aff !important;
    background:
        radial-gradient(circle at 50% 44%, rgba(138, 44, 246, .16), transparent 30%),
        linear-gradient(145deg, #252329 0%, #202020 100%) !important;
}

body.wilo-authenticated .product-details .product-icon .fa-circle {
    color: rgba(138, 44, 246, .13) !important;
}

body.wilo-authenticated .product-details .product-icon .fa-inverse {
    color: #d2b4ff !important;
}

body.wilo-authenticated .product-details .product-status-text {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px !important;
    border-top: 1px solid rgba(255, 255, 255, .08);
    color: #e9e5ee !important;
    background: #202020 !important;
    font-weight: 600;
    letter-spacing: .02em;
}

body.wilo-authenticated .product-details .product-status-active .product-status-text {
    color: #75e3a1 !important;
    border-top-color: rgba(82, 216, 138, .20);
    background: rgba(82, 216, 138, .10) !important;
}

body.wilo-authenticated .product-details .product-status-pending .product-status-text {
    color: #efc66b !important;
    border-top-color: rgba(239, 198, 107, .20);
    background: rgba(239, 198, 107, .09) !important;
}

body.wilo-authenticated .product-details .product-status-suspended .product-status-text {
    color: #86bfff !important;
    border-top-color: rgba(134, 191, 255, .20);
    background: rgba(134, 191, 255, .09) !important;
}

body.wilo-authenticated .product-details .product-status-terminated .product-status-text,
body.wilo-authenticated .product-details .product-status-cancelled .product-status-text,
body.wilo-authenticated .product-details .product-status-fraud .product-status-text {
    color: #ff9292 !important;
    border-top-color: rgba(255, 110, 110, .20);
    background: rgba(255, 110, 110, .08) !important;
}

body.wilo-authenticated .product-details-tab-container,
body.wilo-authenticated .module-client-area {
    color: #efedf2 !important;
    border-color: rgba(255, 255, 255, .10) !important;
    background: #242424 !important;
}

/* Markdown / ticket editor: legacy WHMCS forces pure white with !important. */
body.wilo-authenticated .md-editor,
body.wilo-authenticated div.md-editor.active {
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .11) !important;
    border-radius: 12px !important;
    background: #242424 !important;
    box-shadow: none !important;
}

body.wilo-authenticated .md-editor > .btn-toolbar,
body.wilo-authenticated .md-editor .md-header {
    min-height: 48px;
    padding: 7px 9px;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    background: #292929 !important;
}

body.wilo-authenticated .md-editor > .btn-toolbar .btn,
body.wilo-authenticated .md-editor .md-header .btn {
    min-width: 34px;
    min-height: 34px;
    border-color: rgba(255, 255, 255, .10) !important;
    color: #d5d0dc !important;
    background: #232323 !important;
    box-shadow: none !important;
}

body.wilo-authenticated .md-editor > .btn-toolbar .btn:hover,
body.wilo-authenticated .md-editor > .btn-toolbar .btn:focus,
body.wilo-authenticated .md-editor .md-header .btn:hover,
body.wilo-authenticated .md-editor .md-header .btn:focus {
    color: #c996ff !important;
    border-color: rgba(159, 76, 255, .42) !important;
    background: rgba(138, 44, 246, .10) !important;
}

body.wilo-authenticated .md-editor > textarea.markdown-editor,
body.wilo-authenticated .md-editor > .md-preview,
body.wilo-authenticated .md-editor textarea.form-control.markdown-editor {
    min-height: 220px;
    padding: 16px !important;
    border: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    border-bottom: 1px solid rgba(255, 255, 255, .07) !important;
    color: #efedf2 !important;
    caret-color: #c996ff;
    background: #1f1f1f !important;
    box-shadow: none !important;
}

body.wilo-authenticated .md-editor > .md-preview {
    color: #e9e5ee !important;
}

body.wilo-authenticated .markdown-editor-status,
body.wilo-authenticated .md-editor .md-footer {
    padding: 6px 12px;
    color: #8f8998 !important;
    border-top: 1px solid rgba(255, 255, 255, .07) !important;
    background: #292929 !important;
}

body.wilo-authenticated .md-editor.md-fullscreen-mode,
body.wilo-authenticated .md-editor.md-fullscreen-mode .md-editor {
    background: #1b1b1b !important;
}

/* Native file input: keep the attachment control inside the same palette. */
body.wilo-authenticated input[type="file"],
body.wilo-authenticated #inputAttachments {
    color: #cfcad7 !important;
    border-color: rgba(255, 255, 255, .10) !important;
    background: #1f1f1f !important;
}

body.wilo-authenticated input[type="file"]::file-selector-button {
    margin: -1px 12px -1px -1px;
    padding: 10px 14px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .10);
    color: #f5f3f8;
    background: #292929;
    cursor: pointer;
}

body.wilo-authenticated input[type="file"]::-webkit-file-upload-button {
    margin: -1px 12px -1px -1px;
    padding: 10px 14px;
    border: 0;
    border-right: 1px solid rgba(255, 255, 255, .10);
    color: #f5f3f8;
    background: #292929;
    cursor: pointer;
}