.services-page .services-topbar,
.invoices-page .services-topbar,
.dashboard-overview-page .services-topbar,
.settings-v7-page .services-topbar,
.support-modern-page .services-topbar,
.vps-management-page .services-topbar,
.server-management-page .services-topbar,
.tickets-topbar-page .services-topbar{
    display:grid;
    grid-template-columns:minmax(230px,1fr) minmax(280px,420px) minmax(230px,1fr);
    align-items:center;
    gap:24px;
    min-height:78px;
    width:calc(100% + 10vw);
    margin:-42px -5vw 30px;
    padding:14px 5vw;
    border-bottom:1px solid #e8edf4;
    background:rgba(255,255,255,.94);
    box-shadow:0 5px 18px rgba(36,57,88,.025);
}
.services-topbar-route,.services-topbar-user{display:flex;align-items:center;min-width:0}
.services-topbar-route{gap:10px;color:#8490a3;font-size:13px}
.services-topbar-route .services-topbar-menu{margin-right:17px;color:#2f8cf4;font-size:23px;font-variation-settings:"FILL" 0,"wght" 300,"GRAD" 0,"opsz" 24}
.services-topbar-route>a{color:#6f7c91;font-weight:500;transition:.18s}
.services-topbar-route>a:hover{color:#2f7df4}
.services-topbar-route>span:not(.services-topbar-menu){color:#a8b1bf;font-size:18px}
.services-topbar-route>strong{overflow:hidden;color:#2f7df4;font-size:13px;font-weight:650;text-overflow:ellipsis;white-space:nowrap}
.services-topbar-search{position:relative;display:flex;align-items:center;height:46px;border:1px solid #e1e6ed;border-radius:12px;background:#fff;box-shadow:0 5px 16px rgba(28,53,89,.045);transition:.18s}
.services-topbar-search:focus-within{border-color:#9ec2f6;box-shadow:0 0 0 4px rgba(47,125,244,.08)}
.services-topbar-search>span{position:absolute;top:50%;left:14px;display:grid;place-items:center;height:22px;color:#8390a5;font-size:21px;line-height:1;transform:translateY(-50%)}
.services-topbar-search>input{width:100%;height:100%;padding:0 67px 0 43px;border:0;outline:0;background:transparent;color:#283244;font:500 12px Inter,sans-serif}
.services-topbar-search>input::placeholder{color:#8c97a9}
.services-topbar-search>kbd{position:absolute;top:50%;right:10px;display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:4px 7px;border:0;border-radius:7px;color:#8c96a6;background:#f1f4f8;font:600 10px/1 Inter,sans-serif;box-shadow:none;transform:translateY(-50%)}
.services-topbar-user{justify-content:flex-end;gap:12px}
.services-topbar-account{position:relative;min-width:0}
.services-topbar-account>summary{display:flex;align-items:center;gap:12px;min-width:0;padding:4px;border-radius:12px;list-style:none;cursor:pointer;transition:.18s}
.services-topbar-account>summary::-webkit-details-marker{display:none}
.services-topbar-account>summary:hover,.services-topbar-account[open]>summary{background:#f4f7fb}
.services-topbar-account[open] .services-topbar-settings{color:#2f7df4;background:#eaf2ff;transform:rotate(180deg)}
.services-topbar-account-menu{position:absolute;z-index:120;top:calc(100% + 10px);right:0;width:190px;padding:7px;border:1px solid #e1e7ef;border-radius:12px;background:#fff;box-shadow:0 18px 42px rgba(30,50,80,.14)}
.services-topbar-account-menu a{display:flex;align-items:center;gap:10px;min-height:43px;padding:0 12px;border-radius:9px;color:#354055;font-size:12px;font-weight:600;transition:.18s}
.services-topbar-account-menu a:hover{color:#246edb;background:#edf5ff}
.services-topbar-account-menu a .material-symbols-rounded{color:#2f7df4;font-size:19px;font-variation-settings:"FILL" 0,"wght" 350,"GRAD" 0,"opsz" 20}
.services-topbar-account-menu a.logout{margin-top:3px;border-top:1px solid #edf0f4;border-radius:0 0 9px 9px;color:#cf4657}
.services-topbar-account-menu a.logout:hover{color:#bd3547;background:#fff2f4}
.services-topbar-account-menu a.logout .material-symbols-rounded{color:#d74658}
.services-topbar-notifications{position:relative;display:grid;place-items:center;width:40px;height:40px;border:1px solid #e3eaf3;border-radius:12px;color:#53637b;background:#fff;box-shadow:0 5px 14px rgba(31,56,91,.07);transition:color .18s,background .18s,border-color .18s,box-shadow .18s,transform .18s}
.services-topbar-notifications:hover{color:#2476eb;border-color:#cfe0fb;background:#f4f8ff;box-shadow:0 8px 18px rgba(47,125,244,.13);transform:translateY(-1px)}
.services-topbar-notifications>span{font-size:21px;font-variation-settings:"FILL" 0,"wght" 350,"GRAD" 0,"opsz" 24}
.services-topbar-notifications>b{position:absolute;top:-5px;right:-5px;display:block;box-sizing:border-box;min-width:19px;height:19px;padding:0 4px;border:2px solid #fff;border-radius:99px;color:#fff;background:linear-gradient(145deg,#398cff,#1769df);box-shadow:0 3px 8px rgba(36,118,235,.3);font-family:Inter,sans-serif;font-size:9px;font-weight:700;line-height:15px;text-align:center;text-indent:0}
.services-notification-center{position:relative;flex:0 0 auto}
.services-topbar-notifications{cursor:pointer;font-family:Inter,sans-serif}
.services-topbar-notifications[aria-expanded="true"]{color:#2f7df4;background:#edf5ff}
.services-notification-menu{position:absolute;z-index:160;top:calc(100% + 12px);right:-8px;width:min(390px,calc(100vw - 32px));overflow:hidden;border:1px solid #e0e7f0;border-radius:16px;background:#fff;box-shadow:0 22px 55px rgba(24,45,75,.18)}
.services-notification-menu[hidden]{display:none}
.services-notification-menu>header{display:flex;align-items:center;justify-content:space-between;padding:17px 18px 15px;border-bottom:1px solid #edf1f6}
.services-notification-menu>header>div{display:grid;gap:3px}
.services-notification-menu>header span{color:#1d2738;font:700 15px/1.2 Inter,sans-serif}
.services-notification-menu>header small{color:#8a95a7;font:500 11px/1.3 Inter,sans-serif}
.services-notification-menu>header>b{display:grid;place-items:center;min-width:25px;height:25px;padding:0 7px;border-radius:99px;color:#246fdc;background:#eaf3ff;font:700 10px/1 Inter,sans-serif}
.services-notification-list{max-height:390px;overflow:auto;padding:7px}
.services-notification-item{display:grid;grid-template-columns:42px minmax(0,1fr) 22px;align-items:center;gap:11px;padding:11px;border-radius:11px;color:#354055;transition:.18s}
.services-notification-item:hover{background:#f6f9fd}
.services-notification-item>span:first-child{display:grid;place-items:center;width:42px;height:42px;border-radius:11px;color:#2f7df4;background:#eaf3ff;font-size:21px;font-variation-settings:"FILL" 0,"wght" 350,"GRAD" 0,"opsz" 22}
.services-notification-item.is-invoice>span:first-child{color:#b9780a;background:#fff5df}
.services-notification-item.is-urgent>span:first-child{color:#d54758;background:#fff0f2}
.services-notification-item>span:nth-child(2){display:grid;min-width:0;gap:3px}
.services-notification-item strong{overflow:hidden;color:#273246;font:650 12px/1.25 Inter,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.services-notification-item small{overflow:hidden;color:#657288;font:500 11px/1.3 Inter,sans-serif;text-overflow:ellipsis;white-space:nowrap}
.services-notification-item em{color:#98a2b2;font:500 10px/1.3 Inter,sans-serif;font-style:normal}
.services-notification-item>i{color:#a6b1c1;font-size:19px;font-style:normal}
.services-notification-empty{display:grid;justify-items:center;gap:5px;padding:32px 18px;color:#8995a8;text-align:center}
.services-notification-empty>span{display:grid;place-items:center;width:48px;height:48px;margin-bottom:3px;border-radius:14px;color:#2f7df4;background:#edf5ff;font-size:24px}
.services-notification-empty strong{color:#354055;font:650 12px/1.3 Inter,sans-serif}
.services-notification-empty small{font:500 10px/1.4 Inter,sans-serif}
.services-notification-menu>footer{display:flex;align-items:center;justify-content:flex-end;gap:8px;padding:10px 13px;border-top:1px solid #edf1f6;background:#fafcff}
.services-notification-menu>footer a{padding:8px 10px;border-radius:8px;color:#2f7df4;font:650 11px/1 Inter,sans-serif;transition:.18s}
.services-notification-menu>footer a:hover{background:#eaf3ff}
.services-topbar-avatar{display:grid;place-items:center;flex:0 0 42px;width:42px;height:42px;border-radius:50%;color:#fff;background:linear-gradient(145deg,#2f7df4,#155bd2);font-size:15px;font-weight:700;box-shadow:0 7px 16px rgba(47,125,244,.2)}
.services-topbar-profile{display:grid;min-width:0;gap:2px}
.services-topbar-profile strong{overflow:hidden;max-width:145px;color:#202838;font-size:13px;text-overflow:ellipsis;white-space:nowrap}
.services-topbar-profile small{color:#8c96a7;font-size:10px}
.services-topbar-settings{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#8190a4;font-size:18px;transition:.18s}
.services-topbar-settings:hover{color:#2f7df4;background:#f2f7ff}
.vps-management-page{box-sizing:border-box;min-width:0}
.vps-management-page>.services-topbar{box-sizing:border-box}

/* Keep the management topbar inside its 3vw page gutters. */
.vps-management-page>.services-topbar{
    width:calc(100% + 6vw);
    margin-right:-3vw;
    margin-left:-3vw;
    padding-right:3vw;
    padding-left:3vw;
}
.server-management-page>.services-topbar{
    box-sizing:border-box;
    width:calc(100vw - 300px);
    max-width:calc(100vw - 300px);
    margin-right:0;
    margin-left:calc((100vw - 300px - 100%) / -2);
    padding-right:2.5%;
    padding-left:2.5%;
}
.services-page .premium-service[data-search-hidden="true"]{display:none}
.invoices-page .invoice-search-empty{padding:42px 20px;color:#818b9a;font-size:13px;text-align:center}
.services-page .services-search-empty{display:none;min-height:170px;place-items:center;color:#818b9a;font-size:13px;text-align:center}
.services-page .services-search-empty.is-visible{display:grid}
@media(max-width:1100px){
    .services-page .services-topbar,.invoices-page .services-topbar,.dashboard-overview-page .services-topbar,.settings-v7-page .services-topbar,.support-modern-page .services-topbar,.vps-management-page .services-topbar,.server-management-page .services-topbar,.tickets-topbar-page .services-topbar{grid-template-columns:1fr minmax(260px,360px)}
    .services-topbar-user{display:none}
}
@media(max-width:850px){
    .services-page .services-topbar,.invoices-page .services-topbar,.dashboard-overview-page .services-topbar,.settings-v7-page .services-topbar,.support-modern-page .services-topbar,.vps-management-page .services-topbar,.server-management-page .services-topbar,.tickets-topbar-page .services-topbar{grid-template-columns:1fr;gap:12px;width:calc(100% + 36px);margin:-28px -18px 24px;padding:15px 18px}
    .services-topbar-route .services-topbar-menu{margin-right:5px}
    .services-topbar-search{height:43px}
}
.game-purchase-page .dashboard-main.game-config-topbar-page {
    box-sizing: border-box;
    width: calc(100% - 300px);
    max-width: none;
    min-width: 0;
}

.vps-config-page .dashboard-main.vps-config-topbar-page {
    box-sizing: border-box;
    width: calc(100% - 300px);
    max-width: none;
    min-width: 0;
}

body.vps-config-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.vps-config-page .vps-config-topbar-page > .services-topbar {
    box-sizing: border-box;
    width: calc(100vw - 300px);
    max-width: calc(100vw - 300px);
    margin-right: 0;
    margin-left: calc((100vw - 300px - 100%) / -2);
}

body.game-purchase-page {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.game-purchase-page .game-config-topbar-page > .services-topbar {
    box-sizing: border-box;
    width: calc(100vw - 300px);
    max-width: calc(100vw - 300px);
    margin-right: 0;
    margin-left: calc((100vw - 300px - 100%) / -2);
}

@media(max-width:850px){
    .game-purchase-page .dashboard-main.game-config-topbar-page {
        width: 100%;
    }

    .game-purchase-page .game-config-topbar-page > .services-topbar {
        width: auto;
        max-width: none;
        margin-right: -18px;
        margin-left: -18px;
    }

    .vps-config-page .dashboard-main.vps-config-topbar-page {
        width: 100%;
    }

    .vps-config-page .vps-config-topbar-page > .services-topbar {
        width: auto;
        max-width: none;
        margin-right: -18px;
        margin-left: -18px;
    }
}