html {
    scroll-behavior: smooth;
    /*overflow-x: hidden;*/
    /*scrollbar-color: #ff0000 #111111;*/
    background-color: #000;
}

::-webkit-scrollbar-thumb {
    background: #ff0000;
}

body {
    color: #fff;
    width: 100% !important;
    cursor:
        url("../media/cursor.webp") 16 16,
        auto;
    background-color: #000;
    margin: 0;
    /*overflow-x: hidden;*/
    /*overflow: hidden;*/
    font-family: "Rajdhani", sans-serif;
}

.responsive-image {
    width: 100%;
    height: auto;
    max-height: 300px;
    max-width: 570px;
}

.sponsor-image {
    transition: box-shadow 0.3s ease;
}

.sponsor-image:hover {
    box-shadow: 0 0 25px #35A3F1 !important;
}

body.loaded {
    /*max-height: unset;*/
}

*,
*:after,
*:before {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
    border: 0 none;
    position: relative;
    outline: none;
}

/* ------ Snowflakes animation ------ */

/* .snow {
    --snow-pattern-size: 150px;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 0;
    opacity: 1;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.3%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st1' cx='5' cy='8' r='1'/%3E%3Ccircle class='st1' cx='38' cy='3' r='1'/%3E%3Ccircle class='st1' cx='12' cy='4' r='1'/%3E%3Ccircle class='st1' cx='16' cy='16' r='1'/%3E%3Ccircle class='st1' cx='47' cy='46' r='1'/%3E%3Ccircle class='st1' cx='32' cy='10' r='1'/%3E%3Ccircle class='st1' cx='3' cy='46' r='1'/%3E%3Ccircle class='st1' cx='45' cy='13' r='1'/%3E%3Ccircle class='st1' cx='10' cy='28' r='1'/%3E%3Ccircle class='st1' cx='22' cy='35' r='1'/%3E%3Ccircle class='st1' cx='3' cy='21' r='1'/%3E%3Ccircle class='st1' cx='26' cy='20' r='1'/%3E%3Ccircle class='st1' cx='30' cy='45' r='1'/%3E%3Ccircle class='st1' cx='15' cy='45' r='1'/%3E%3Ccircle class='st1' cx='34' cy='36' r='1'/%3E%3Ccircle class='st1' cx='41' cy='32' r='1'/%3E%3C/svg%3E");
    background-position: 0px 0px;
    background-size: var(--snow-pattern-size);
    animation: snowflakes-down 2s linear infinite, snowflakes-inline 6s cubic-bezier(.5,-.5,.5,.5) infinite;
    pointer-events: none;
}

.snow div {
    --snow-pattern-size: 75px;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 50 50' style='enable-background:new 0 0 50 50%3B' xml:space='preserve'%3E%3Cstyle type='text/css'%3E.st1%7Bopacity:0.7%3Bfill:%23FFFFFF%3B%7D.st3%7Bopacity:0.1%3Bfill:%23FFFFFF%3B%7D%3C/style%3E%3Ccircle class='st3' cx='4' cy='14' r='1'/%3E%3Ccircle class='st3' cx='43' cy='3' r='1'/%3E%3Ccircle class='st3' cx='31' cy='30' r='2'/%3E%3Ccircle class='st3' cx='19' cy='23' r='1'/%3E%3Ccircle class='st3' cx='37' cy='22' r='1'/%3E%3Ccircle class='st3' cx='43' cy='16' r='1'/%3E%3Ccircle class='st3' cx='8' cy='45' r='1'/%3E%3Ccircle class='st3' cx='29' cy='39' r='1'/%3E%3Ccircle class='st3' cx='13' cy='37' r='1'/%3E%3Ccircle class='st3' cx='47' cy='32' r='1'/%3E%3Ccircle class='st3' cx='15' cy='4' r='2'/%3E%3Ccircle class='st3' cx='9' cy='27' r='1'/%3E%3Ccircle class='st3' cx='30' cy='9' r='1'/%3E%3Ccircle class='st3' cx='25' cy='15' r='1'/%3E%3Ccircle class='st3' cx='21' cy='45' r='2'/%3E%3Ccircle class='st3' cx='42' cy='45' r='1'/%3E%3C/svg%3E");
    background-position: 0px 0px;
    background-size: var(--snow-pattern-size);
    animation: snowflakes-down 2s linear infinite, snowflakes-inline 14s cubic-bezier(.5,-.5,.5,.5) infinite;
    pointer-events: none;
    opacity: 0.8;
}

@keyframes snowflakes-down {
    0% {
        background-position-y: 0;
    }

    25% {
        background-position-y: calc(var(--snow-pattern-size) / 4);
    }

    50% {
        background-position-y: calc(var(--snow-pattern-size) / 2);
    }

    75% {
        background-position-y: calc(var(--snow-pattern-size) * 3 / 4);
    }

    100% {
        background-position-y: var(--snow-pattern-size);
    }
}

@keyframes snowflakes-inline {
    0% {
        background-position-x: 0;
    }

    50% {
        background-position-x: calc(var(--snow-pattern-size) / 2);
    }

    100% {
        background-position-x: 0;
    }
} */

.snowflake {
    color: #fff;
    font-size: 1em;
    font-family: Arial;
    text-shadow: 0 0 1px #000;
}

@-webkit-keyframes snowflakes-fall {
    0% {
        top: -10%;
    }

    100% {
        top: 100%;
    }
}

@-webkit-keyframes snowflakes-shake {
    0% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }

    50% {
        -webkit-transform: translateX(80px);
        transform: translateX(80px);
    }

    100% {
        -webkit-transform: translateX(0px);
        transform: translateX(0px);
    }
}

@keyframes snowflakes-fall {
    0% {
        top: -10%;
    }

    100% {
        top: 100%;
    }
}

@keyframes snowflakes-shake {
    0% {
        transform: translateX(0px);
    }

    50% {
        transform: translateX(80px);
    }

    100% {
        transform: translateX(0px);
    }
}

.snowflake {
    position: fixed;
    top: -10%;
    z-index: 100;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    pointer-events: none;
    -webkit-animation-name: snowflakes-fall, snowflakes-shake;
    -webkit-animation-duration: 10s, 3s;
    -webkit-animation-timing-function: linear, ease-in-out;
    -webkit-animation-iteration-count: infinite, infinite;
    -webkit-animation-play-state: running, running;
    animation-name: snowflakes-fall, snowflakes-shake;
    animation-duration: 10s, 3s;
    animation-timing-function: linear, ease-in-out;
    animation-iteration-count: infinite, infinite;
    animation-play-state: running, running;
}

.snowflake:nth-of-type(0) {
    --snow-left: 76%;
    --snow-delay: 4s, 7s;
}

.snowflake:nth-of-type(1) {
    --snow-left: 23%;
    --snow-delay: 8s, 3s;
}

.snowflake:nth-of-type(2) {
    --snow-left: 49%;
    --snow-delay: 1s, 9s;
}

.snowflake:nth-of-type(3) {
    --snow-left: 88%;
    --snow-delay: 6s, 2s;
}

.snowflake:nth-of-type(4) {
    --snow-left: 11%;
    --snow-delay: 0s, 5s;
}

.snowflake:nth-of-type(5) {
    --snow-left: 34%;
    --snow-delay: 9s, 8s;
}

.snowflake:nth-of-type(6) {
    --snow-left: 67%;
    --snow-delay: 3s, 6s;
}

.snowflake:nth-of-type(7) {
    --snow-left: 92%;
    --snow-delay: 2s, 4s;
}

.snowflake:nth-of-type(8) {
    --snow-left: 5%;
    --snow-delay: 7s, 1s;
}

.snowflake:nth-of-type(9) {
    --snow-left: 57%;
    --snow-delay: 5s, 0s;
}

.snowflake:nth-of-type(10) {
    --snow-left: 41%;
    --snow-delay: 3s, 8s;
}

.snowflake:nth-of-type(11) {
    --snow-left: 83%;
    --snow-delay: 10s, 2s;
}

.snowflake:nth-of-type(12) {
    --snow-left: 30%;
    --snow-delay: 6s, 9s;
}

.snowflake:nth-of-type(13) {
    --snow-left: 72%;
    --snow-delay: 4s, 7s;
}

.snowflake:nth-of-type(14) {
    --snow-left: 17%;
    --snow-delay: 1s, 5s;
}

.snowflake:nth-of-type(15) {
    --snow-left: 63%;
    --snow-delay: 8s, 10s;
}

.snowflake:nth-of-type(16) {
    --snow-left: 98%;
    --snow--delay: 2s, 3s;
}

.snowflake:nth-of-type(17) {
    --snow-left: 38%;
    --snow-delay: 0s, 6s;
}

.snowflake:nth-of-type(18) {
    --snow-left: 81%;
    --snow-delay: 9s, 4s;
}

.snowflake:nth-of-type(19) {
    --snow-left: 29%;
    --snow-delay: 7s, 1s;
}

.snowflake:nth-of-type(20) {
    --snow-left: 94%;
    --snow-delay: 5s, 2s;
}

.snowflake:nth-of-type(21) {
    --snow-left: 48%;
    --snow-delay: 10s, 8s;
}

.snowflake:nth-of-type(22) {
    --snow-left: 9%;
    --snow-delay: 6s, 0.3s;
}

.snowflake:nth-of-type(23) {
    --snow-left: 55%;
    --snow-delay: 4s, 9s;
}

.snowflake:nth-of-type(24) {
    --snow-left: 3%;
    --snow-delay: 1s, 7s;
}

.snowflake:nth-of-type(25) {
    --snow-left: 70%;
    --snow-delay: 8s, 0s;
}

.snowflake:nth-of-type(26) {
    --snow-left: 16%;
    --snow-delay: 2s, 10s;
}

.snowflake:nth-of-type(27) {
    --snow-left: 89%;
    --snow-delay: 3s, 5s;
}

.snowflake:nth-of-type(28) {
    --snow-left: 24%;
    --snow-delay: 9s, 6s;
}

.snowflake:nth-of-type(29) {
    --snow-left: 61%;
    --snow-delay: 7s, 4s;
}

.snowflake:nth-child(n) {
    left: var(--snow-left);
    -webkit-animation-delay: var(--snow-delay);
    animation-delay: var(--snow-delay);
}

/* ------ Generic falling (START) ------ */
.generic-falling {
    position: fixed;
    inset: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    z-index: 100;
}

.generic-falling .falling-set {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
}

.generic-falling .falling-set div {
    position: absolute;
    display: block;
    font-size: 16px;

    animation-timing-function: cubic-bezier(0.2, 0.6, 0.4, 1);
    will-change: transform;

    --sway: 70px;
}

@keyframes tumble {
    0% {
        opacity: 0;
        top: -10%;
        transform:
            translateX(0) rotateZ(0deg);
    }

    10% {
        opacity: 1;
        transform:
            translateX(30px) rotateZ(24deg);
    }

    25% {
        transform:
            translateX(30px) rotateZ(60deg);
    }

    50% {
        transform:
            translateX(-30px) rotateZ(0deg);
    }

    75% {
        transform:
            translateX(20px) rotateZ(-60deg);
    }

    100% {
        top: 110%;
        opacity: 0;
        transform:
            translateX(-20px) rotateZ(0deg);
    }
}

@keyframes sway {
    0% {
        margin-left: 0;
    }

    50% {
        margin-left: var(--sway);
    }

    100% {
        margin-left: 0;
    }
}

.generic-falling .falling-set div:nth-child(1) {
    left: 12%;
    animation: tumble 14s infinite, sway 6s ease-in-out infinite;
    animation-delay: -6s;
}

.generic-falling .falling-set div:nth-child(2) {
    left: 32%;
    animation: tumble 20s infinite, sway 6s ease-in-out infinite;
    animation-delay: -12s;
}

.generic-falling .falling-set div:nth-child(3) {
    left: 55%;
    animation: tumble 18s infinite, sway 6s ease-in-out infinite;
    animation-delay: -3s;
}

.generic-falling .falling-set div:nth-child(4) {
    left: 5%;
    animation: tumble 16s infinite, sway 6s ease-in-out infinite;
    animation-delay: -9s;
}

.generic-falling .falling-set div:nth-child(5) {
    left: 75%;
    animation: tumble 22s infinite, sway 6s ease-in-out infinite;
    animation-delay: -15s;
}

.generic-falling .falling-set div:nth-child(6) {
    left: 90%;
    animation: tumble 19s infinite, sway 6s ease-in-out infinite;
    animation-delay: -4s;
}

.generic-falling .falling-set div:nth-child(7) {
    left: 42%;
    animation: tumble 13s infinite, sway 6s ease-in-out infinite;
    animation-delay: -10s;
}

.generic-falling .falling-set div:nth-child(8) {
    left: 65%;
    animation: tumble 17s infinite, sway 6s ease-in-out infinite;
    animation-delay: -7s;
}

.falling-set2 {
    transform: scale(2) rotateY(180deg);
}


/* ------ Scrollbar (START) ------ */

*::-webkit-scrollbar {
    height: 16px;
    width: 16px;
}

*::-webkit-scrollbar-track {
    border-radius: 0px;
    background-color: #111111;
}

*::-webkit-scrollbar-track:hover {
    background-color: #111111;
}

*::-webkit-scrollbar-track:active {
    background-color: #111111;
}

*::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background-color: #b74141;
    border: 4px solid #111111;
}

*::-webkit-scrollbar-thumb:hover {
    background-color: #812d2d;
}

*::-webkit-scrollbar-thumb:active {
    background-color: #812d2d;
}

.round-scrolltrack *::-webkit-scrollbar-track,
.round-scrolltrack::-webkit-scrollbar-track {
    border-radius: 20px;
}

/* ------ Scrollbar (END) ------ */

a {
    color: #ff0000;
}

a:hover {
    color: #ff0000;
    text-decoration: none;
}

span.main {
    color: #ff0000;
}

span.second {
    color: #ffffff;
    text-shadow: 0px 0px 20px black;
    text-decoration-line: underline;
    text-decoration-color: #ff0000;
    font-weight: bolder;
}

span.thirth {
    color: #ffffff;
    text-shadow: 0px 0px 20px black;
    text-decoration-line: underline;
    font-weight: bolder;
}

.loadlay {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1c1c21;
    transition: opacity 0.3s ease;
}

body.loaded .loadlay {
    display: none;
}

.load-grad {
    position: fixed;
    top: 50%;
    left: 0;
    width: 50%;
    min-width: 400px;
    background: linear-gradient(270deg, #26262d, rgba(38, 38, 45, 0));
    transform: translate(25%, -50%);
}

.load-text {
    padding: 16px;
}

.load-text h2 {
    font-size: 3.75rem;
    font-weight: 700;
}

.load-text h4 {
    opacity: 0.5;
}

.cancel {
    background-color: #ff0000;
    padding-right: 40px;
    padding-left: 40px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.cancel:hover {
    background-color: #cc4f53;
}

.flashing-text {
    position: relative;
}

.flashing-text::before {
    content: attr(data-text);
    position: absolute;
    overflow: hidden;
    color: yellow;
    -webkit-clip-path: inset(0 100% 0 0);
    clip-path: inset(0 100% 0 0);
    animation: flashing-text 1.5s infinite ease;
}

@keyframes flashing-text {
    0% {
        -webkit-clip-path: inset(0 100% 0 0);
        clip-path: inset(0 100% 0 0);
    }

    50% {
        -webkit-clip-path: inset(0 0 0 0%);
        clip-path: inset(0 0 0 0%);
    }

    100% {
        -webkit-clip-path: inset(0 0 0 100%);
        clip-path: inset(0 0 0 100%);
    }
}

/**********************************************************

                        01:   HEADER

**********************************************************/

.hero {
    position: relative;
    background-image: url("../media/header.webp");
    background-position-y: bottom;
    background-position-x: center;
    background-size: cover;
}

.hero:after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, black);
}

.navbar {
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 200;
}

.navbar-brand img {
    height: 68px;
}

.navbar-dark .navbar-nav .nav-link {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.75);
    font-weight: 500;
    transition: all 0.3s ease-in-out;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #ffffff;
}

.nav-btn {
    margin-left: 5px;
    background: linear-gradient(to right, #a03e41, #ff0000, #cc4f53);
    padding: 5px 30px !important;
    color: white !important;
    font-weight: 600;
    border-radius: 4px;
    transform: skewX(-12deg);
    transition: all 0.3s ease-in-out;
}

.nav-btn:hover {
    box-shadow: 0 0 15px #aa0000;
}

.nav-btn:active {
    background: linear-gradient(to right, #a03e41, #aa0000, #cc4f53);
}

.hero .hero-text {
    padding: 15rem 0;
    z-index: 99;
}

.hero.page .hero-text {
    padding: 5rem 0;
}

.hero .text-group h1 {
    color: #fff;
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
}

@media screen and (min-width: 576px) {
    .hero .skew {
        transform: skewX(-12deg);
    }

    .hero .stat-box .stat-inner {
        transform: skewX(12deg);
    }
}

.stat-box {
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid black;
    padding: 10px;
    border-radius: 8px;
}

.hero .stat-box h2 {
    margin-bottom: 0;
}

.hero .stat-box h4 {
    font-weight: 700;
}

.scroll {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 20px;
    z-index: 99;
}

/**********************************************************

                    02:   About

**********************************************************/

#about {
    margin-top: 2rem;
}

.about-text h1 {
    font-size: 45px;
    font-weight: 500;
}

.about-text p {
    font-weight: 300;
    font-size: 20px;
    opacity: 0.75;
}

#about img {
    width: 75%;
}

/**********************************************************

                      03:   Features

**********************************************************/
button:focus {
    box-shadow: none !important;
}

/**********************************************************

                      04:   Servers

**********************************************************/

.servers {
    background-color: #111111;
    border-radius: 8px;
}

.bx-main {
    border-left: 1px solid #ff0000;
    border-right: 1px solid #ff0000;
}

.bl-main {
    border-left: 1px solid #ff0000;
}

.bt-main {
    border-top: 1px solid #ff0000;
}

.sv-card {
    padding: 30px;
}

.sv-btn {
    display: block;
    width: 100%;
    height: 2.5rem;
    background-color: #2e3034;
    border-radius: 8px;
}

/* Leaderboard buttons and tabs: one style, dark when inactive, site color when active, no white edges */
.sv-progress-btn,
.sv-progress-btn-active {
    justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    outline: none;
    box-shadow: none;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Solid (opaque) backgrounds on purpose: on a semi-transparent background Chrome on Windows
   drops ClearType and the button text looks blurry */
.sv-progress-btn {
    color: white;
    background: #121518;
    border-color: rgba(255, 255, 255, 0.08);
}

.sv-progress-btn:hover {
    color: white;
    background: #231314;
    border-color: rgba(255, 58, 58, 0.45);
    box-shadow: 0 0 12px rgba(255, 58, 58, 0.15);
}

.sv-progress-btn-active,
.sv-progress-btn-active:hover,
.sv-progress-btn-active:focus,
.sv-progress-btn-active:active {
    color: white;
    background: linear-gradient(to right, #6b2a2c, #b74141, #833436);
    border-color: transparent;
}

.sv-progress-btn-active:hover {
    box-shadow: 0 0 14px rgba(255, 58, 58, 0.35);
}

.sv-progress-btn:focus,
.sv-progress-btn-active:focus {
    box-shadow: none;
}

.sv-progress-btn:focus-visible,
.sv-progress-btn-active:focus-visible {
    outline: 2px solid #ff3a3a;
    outline-offset: 2px;
}

.sv-progress {
    background: linear-gradient(to right, #a03e41, #ff0000, #cc4f53);
    height: 100%;
    font-size: 18px;
    font-weight: 600;
    color: white;
    justify-content: center;
    border-radius: 8px;
    max-width: 100%;
    transition: box-shadow 0.3s ease;
}

.sv-btn:hover .sv-progress {
    box-shadow: 0 0 15px #aa0000;
}

.sv-btn:active .sv-progress {
    background: linear-gradient(to right, #a03e41, #aa0000, #cc4f53);
}

.carousel-control-prev-icon {
    background-image: url(../media/prev.webp);
}

.carousel-control-next-icon {
    background-image: url(../media/next.webp);
}

/**********************************************************

                      05:   CTA

**********************************************************/

#cta {
    position: relative;
    background-image: url(../media/div.webp);
    background-position-y: top;
    background-position-x: center;
    background-size: inherit;
    padding: 5rem;
    margin: 5rem 0;
}

#cta:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, black, transparent, black);
}

#cta h1 {
    font-size: 45px;
    text-transform: uppercase;
}

#cta .nav-btn {
    font-size: 25px;
}

.sv-card i {
    font-size: 8px;
}

/**********************************************************

                      06:   CTASP

**********************************************************/

#ctasp {
    position: relative;
    /*background-image: url(../media/sponsor.gif);*/
    /*background-position-y: top;*/
    /*background-position-x: center;*/
    /*background-size: contain;*/
    /*padding: 4.5rem;*/
    margin: 5rem 0;
}

#ctasp:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, black, transparent, black);
}

#ctasp h1 {
    font-size: 45px;
    text-transform: uppercase;
}

#ctasp .nav-btn {
    font-size: 25px;
}

/**********************************************************

                      05:   Leaderboard

**********************************************************/

#profile img {
    height: 100px;
    border-radius: 8px;
}

.profile-text {
    background-color: #111111;
    border-radius: 8px;
    padding: 15px;
    border-bottom: 1px solid #ff0000;
}

.table-dark {
    color: #fff;
    background-color: #111;
    border-radius: 8px;
    overflow: hidden;
}

table.table-dark td,
table.table-dark th {
    background-color: #242121;
}

table.table-dark thead th:first-of-type,
table.table-dark td:first-of-type {
    padding-left: 20px;
}

table.table-dark thead th:last-of-type,
table.table-dark td:last-of-type {
    padding-right: 20px;
}

.table td,
.table th {
    border-top: none;
}

.table-dark td,
.table-dark th,
.table-dark thead th {
    border-color: #b74141;
}

.page-link {
    color: #fff;
    background-color: #111;
    border: 1px solid #111;
}

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #ff0000;
    border-color: #ff0000;
}

.page-item.disabled .page-link {
    background-color: #1d1d1d;
    border-color: #1d1d1d;
}

.has-search .form-control {
    padding-left: 2.375rem;
}

.has-search .form-control-feedback {
    position: absolute;
    z-index: 2;
    display: block;
    width: 2.375rem;
    height: 2.375rem;
    line-height: 2.375rem;
    text-align: center;
    pointer-events: none;
    color: #aaa;
}

.form-control {
    color: #fff;
    background-color: #111;
    border: 1px solid #ff0000;
    border-radius: 8px;
}

.form-control:focus {
    color: #fff;
    background-color: #1d1d1d;
    border-color: #ff0000;
    outline: 0;
    box-shadow: none;
}

.nav-pills {
    background-color: #111;
    border-radius: 8px;
}

.nav-pills .nav-link {
    border-radius: 8px;
    font-weight: 800;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: #fff;
    background: linear-gradient(to right, #a03e41, #ff0000, #cc4f53);
}

iframe,
.yt-preview {
    width: 860px;
    height: 420px;
}

/* YouTube: preview picture + play button (Index.razor); the player (~1 MB) loads on click (App.razor) */
.yt-preview {
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding: 0;
    border: 0;
    overflow: hidden;
    background: #000;
    cursor: pointer;
    vertical-align: middle;
}

.yt-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.yt-preview svg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
}

.yt-preview .yt-play-bg {
    fill: #212121;
    fill-opacity: 0.8;
    transition: fill 0.2s, fill-opacity 0.2s;
}

.yt-preview:hover .yt-play-bg,
.yt-preview:focus-visible .yt-play-bg {
    fill: #f00;
    fill-opacity: 1;
}

/**********************************************************

                        05:   Footer

**********************************************************/

footer {
    background-color: #111111;
    border-top: 1px solid #ff0000;
}

footer ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

footer ul li a {
    font-weight: 500;
    font-size: 20px;
    color: rgba(255, 255, 255, 0.75);
    transition: all 0.3s ease-in-out;
    text-decoration: none !important;
}

footer .copyright {
    border-top: 1px solid #ff0000;
    padding: 0.5rem;
    font-size: 20px;
    font-weight: 500;
}

@media only screen and (max-width: 767px) {
    .bx-main {
        border-left: none;
        border-right: none;
    }

    .servers .col-md-4 {
        border-top: 1px solid #ff0000;
    }

    .servers .col-md-4:first-child {
        border-top: none;
    }

    .servers-2 .col-md-6 {
        border-left: none;
    }

    .servers-2 .col-md-6:not(:first-child) {
        border-top: 1px solid #ff0000;
    }

    .mobile-hide {
        display: none;
    }

    .mobile-text-center {
        text-align: center;
    }

    #cta h1 {
        font-size: 32px;
    }

    iframe,
    .yt-preview {
        width: 360px;
        height: 220px;
    }
}

/**********************************************************

                        06:   Checkbox

**********************************************************/

.checkbox.style-e {
    display: inline-block;
    position: relative;
    padding-left: 50px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checkbox.style-e input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

.checkbox.style-e input:checked~.checkbox__checkmark {
    background-color: #ff0000;
}

.checkbox.style-e input:checked~.checkbox__checkmark:after {
    left: calc(100% - var(--_mark-offset));
    transform: translate(-100%, -50%);
}

.checkbox.style-e:hover input~.checkbox__checkmark {
    background-color: rgba(37, 37, 37, 0.5);
}

.checkbox.style-e:hover input:checked~.checkbox__checkmark {
    background: linear-gradient(to right, #a03e41, #ff0000, #cc4f53);
}

.checkbox.style-e .checkbox__checkmark {
    position: absolute;
    top: 12px;
    left: 0;
    height: 22px;
    width: 40px;
    /*background-color: #eee;*/
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid red;
    transition: background-color 0.25s ease;
    border-radius: 8px;
}

.checkbox.style-e .checkbox__checkmark:after {
    --_mark-offset: 2px;
    content: "";
    position: absolute;
    left: var(--_mark-offset);
    transform: translate(0, -50%);
    top: 50%;
    height: calc(100% - 2 * var(--_mark-offset));
    aspect-ratio: 1;
    display: block;
    background-color: #fff;
    border-radius: calc(8px - var(--_mark-offset));
    transition:
        left 0.25s ease,
        transform 0.25s ease;
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.7);
}

.checkbox.style-e .checkbox__body {
    color: #333;
    line-height: 1.4;
    font-size: 16px;
    transition: color 0.25s ease;
}

/**********************************************************

                07:   Blazor Tabs Components

**********************************************************/

.bl-tabs {
    display: flex;
    gap: 6px 10px;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bl-tab {
    padding: 6px 20px;
    cursor: pointer;
    border-radius: 8px;
    color: white;
    outline: none;
    box-shadow: none;
    background: linear-gradient(to right, #00000077, #000000, #00000077);
}

.bl-tab.bl-active {
    background: linear-gradient(to right,
            rgba(160, 62, 65, 0.65),
            #b74141,
            rgba(204, 79, 83, 0.65));
    border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.bl-tab-content {
    display: none;
}

.bl-tab-content.bl-show {
    display: block;
}