@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    src: url("../fonts/Roboto/Roboto700-1.woff2") format("woff2");
}

@font-face {
    font-display: swap;
    font-family: Roboto;
    font-style: normal;
    font-weight: 900;
    src: url("../fonts/Roboto/Roboto900-1.woff2") format("woff2");
}

body.cs-exact {
    background: #0d1119 !important;
    color: #b8c2d3 !important;
    font-family: Roboto, Arial, sans-serif !important;
}

body.cs-exact .premium-renew-modal__wrapper,
body.cs-exact .modal__overlay.modalShowing_false,
body.cs-exact .cookie,
body.cs-exact [class*="Cookie"],
body.cs-exact .modal-cookie {
    display: none !important;
}

body.cs-exact .modal__overlay.modalShowing_true {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

body.cs-exact header {
    left: 246px !important;
    width: calc(100% - 246px) !important;
    height: 70px !important;
    padding: 0 30px 0 0 !important;
    background: #0f131b !important;
}

body.cs-exact header #socials {
    align-items: center !important;
    display: flex !important;
    flex: 0 1 auto !important;
    flex-wrap: nowrap !important;
    gap: 24px !important;
    height: 70px !important;
    justify-content: normal !important;
    left: 1% !important;
    margin: 0 !important;
    max-width: none !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto !important;
}

body.cs-exact header #socials .jCxQhZ,
body.cs-exact header #socials .biOWje {
    flex: 0 1 auto !important;
    margin: 0 !important;
    position: relative !important;
    transform: none !important;
}

body.cs-exact header .login-btn {
    align-items: center !important;
    border-radius: 6px !important;
    display: flex !important;
    font-family: Roboto, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    height: 33px !important;
    line-height: 14px !important;
    min-width: auto !important;
    padding: 0 10px !important;
    text-transform: uppercase !important;
}

body.cs-exact header .login-btn .login-img,
body.cs-exact header .login-btn img {
    display: block !important;
    height: 13px !important;
    margin-left: 7px !important;
    width: 13px !important;
}

body.cs-exact main,
body.cs-exact #main,
body.cs-exact main#main.unauth,
body.cs-exact main.unauth {
    margin-left: 246px !important;
    padding-top: 70px !important;
    width: calc(100% - 248px) !important;
    min-height: 100vh !important;
    overflow: hidden auto !important;
    background: #0d1119 !important;
}

body.cs-exact #routerpages {
    padding: 0 !important;
}

body.cs-exact #page-servers {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

body.cs-exact #nav-servers {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 4px !important;
    height: auto !important;
    justify-content: center !important;
    margin: 0 1% !important;
    overflow: visible !important;
    padding: 0 !important;
    width: auto !important;
    white-space: normal !important;
}

body.cs-exact #nav-servers a {
    align-items: normal !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 0 !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    color: #aecce4 !important;
    display: block !important;
    flex: 0 1 auto !important;
    font-family: "Roboto Condensed", sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    height: 40px !important;
    justify-content: normal !important;
    letter-spacing: 1px !important;
    line-height: 41px !important;
    min-width: auto !important;
    padding: 0 16px !important;
    text-transform: uppercase !important;
    width: auto !important;
}

body.cs-exact #nav-servers a.dbuZaI {
    align-items: center !important;
    background: transparent !important;
    border: 2px solid rgba(255, 255, 255, .05) !important;
    display: flex !important;
    flex: 0 1 auto !important;
    gap: 8px !important;
    justify-content: normal !important;
    letter-spacing: 1px !important;
    min-width: auto !important;
    padding: 0 16px !important;
    text-transform: uppercase !important;
}

body.cs-exact #nav-servers a.dbuZaI svg {
    height: 20px !important;
    width: 21px !important;
}

body.cs-exact #nav-servers .nav-servers-button-setting {
    align-items: center !important;
    border: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex: 0 0 44px !important;
    height: 40px !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    max-width: 44px !important;
    min-width: 44px !important;
    opacity: 1 !important;
    padding: 0 !important;
    position: relative !important;
    transform: none !important;
    visibility: visible !important;
    width: 44px !important;
}

body.cs-exact #nav-servers > div[aria-expanded] {
    align-items: center !important;
    display: flex !important;
    flex: 0 0 44px !important;
    height: 40px !important;
    justify-content: center !important;
    margin: 0 !important;
    max-width: 44px !important;
    min-width: 44px !important;
    overflow: visible !important;
    padding: 0 !important;
    position: relative !important;
    width: 44px !important;
}

body.cs-exact #nav-servers .nav-servers-button-setting-img {
    display: block !important;
    height: 20px !important;
    margin: 0 !important;
    object-fit: contain !important;
    position: static !important;
    transform: none !important;
    vertical-align: middle !important;
    width: 20px !important;
}

body.cs-exact #nav-servers .dPPvVO {
    flex: 0 0 1px !important;
    height: 40px !important;
    margin: 0 !important;
    width: 1px !important;
}

body.cs-exact #page-servers-home.grid,
body.cs-exact #page-servers-home.grid.modes {
    display: grid !important;
    gap: 14.39px !important;
    grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)) !important;
    height: auto !important;
    margin: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    width: auto !important;
}

body.cs-exact #page-servers-home > img,
body.cs-exact #page-servers-home > .bRAedZ,
body.cs-exact #page-servers-home > a.cGvFlP {
    border-radius: 12px !important;
    box-sizing: border-box !important;
    flex: initial !important;
    height: 300px !important;
    min-height: 300px !important;
    outline: 0 !important;
    overflow: hidden !important;
    transition: .3s !important;
    width: 100% !important;
}

body.cs-exact #page-servers-home > a.cGvFlP .big.m,
body.cs-exact #page-servers-home > a.cGvFlP .eYUCfB {
    border-radius: 12px 0 !important;
    height: 300px !important;
    min-height: 300px !important;
    outline: 0 !important;
    overflow: hidden !important;
    transition: .3s !important;
    width: 100% !important;
}

body.cs-exact #page-servers-home > a.cGvFlP .eYUCfB img,
body.cs-exact #page-servers-home > a.cGvFlP .eYUCfB video {
    border-radius: 12px !important;
    height: 320px !important;
    object-fit: cover !important;
    width: 100% !important;
}

body.cs-exact #page-servers-home > img {
    object-fit: fill !important;
}

body.cs-exact #page-servers-home .bRAedZ .slick-track {
    transform: translate3d(var(--cs-exact-pro-slider-x, -348px), 0, 0) !important;
    transition: transform .5s ease !important;
}

body.cs-exact aside.hOREHH .sidebar-reference-link img {
    filter: brightness(0) saturate(100%) invert(39%) sepia(17%) saturate(1161%) hue-rotate(190deg) brightness(91%) contrast(87%) !important;
    opacity: 1 !important;
}

body.cs-exact aside.hOREHH .sidebar-reference-link .genshin-attention {
    bottom: 6px !important;
    left: 22px !important;
    right: auto !important;
}

body.cs-exact aside.hOREHH .eimXke,
body.cs-exact aside.hOREHH .sc-cazxqj,
body.cs-exact aside.hOREHH button[aria-label="Cologne Major 2026"],
body.cs-exact aside.hOREHH .sidebar-bottom > :not(:last-child) {
    display: none !important;
}

body.cs-exact aside.hOREHH .sidebar-bottom {
    margin-top: auto !important;
}

@media (max-width: 1000px) {
    body.cs-exact header {
        left: 0 !important;
        width: 100% !important;
    }

    body.cs-exact main,
    body.cs-exact #main,
    body.cs-exact main#main.unauth,
    body.cs-exact main.unauth {
        margin-left: 0 !important;
        width: 100% !important;
    }
}