#online-block {
    position: absolute;
    right: 0;
    left: 0;
    z-index: 10;
    pointer-events: none;
width: 100%;
    margin: 0 auto;
    top: 75px;
    padding: 44px 10px !important;
}

.online-server_block {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.online-server {
    border-radius: 8px !important;
    background: var(--primary-white) !important;
    box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.30), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
    padding: 3px !important;
    width: 255px !important;
    transition: background .2s linear;
    pointer-events: all;
    border: none !important;
}

.online-server_border {
    background: linear-gradient(180deg, #4D4336 0%, #714A27 63.5%, #AA8E75 79%, #5E5548 98.5%);
    border-radius: 6px;
    width: 100%;
    height: 100%;
    padding: 2px;
}

.online-server_body {
    border-radius: 4px;
    background: var(--primary-white);
    padding: 7px 8px;
    position: relative;
}

.online-server_body h5 {
font-family: Colus;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 16.776px; 
text-transform: uppercase;
}

.online-server:nth-child(1) h5 {
    color: #0b7a5c;
}

.online-server:nth-child(3) h5 {
    color: #0957aa;
}

.online-server:nth-child(2) h5 {
    color: #aa0909;
}

.online-server:nth-child(4) h5 {
    color: #9A4EAE;
}

.online-server:nth-child(5) h5 {
    color: #C24275;
}

.online-server:nth-child(6) h5 {
    color: inherit;
}

.online-server:hover {
    background: #EDEDED;
}

.online-server h5 span {
    transition: all 0.3s ease;
}

.online-server:nth-child(1):hover h5 span {
    color: #0b7a5c !important;
}

.online-server:nth-child(3):hover h5 span {
    color: #0957aa !important;
}

.online-server:nth-child(2):hover h5 span {
    color: #aa0909 !important;
}

.online-server:nth-child(4):hover h5 span {
    color: #9A4EAE !important;
}

.online-server:nth-child(5):hover h5 span {
    color: #C24275 !important;
}

.online-server:nth-child(6):hover h5 span {
    color: inherit !important;
}

.online-server h5 {
    display: flex;
    margin-bottom: 0;
    align-items: center;
    gap: 8px;
    height: 20px;
}

.online-server h5 span {
    margin-left: auto;
color: #080808;
font-family: Evolventa Bold;
font-size: 14px;
line-height: 100%; 
text-transform: uppercase;
}

.online-server h5 img {
    align-self: center;
    width: 24px;
    height: 20px;
}

@media (max-width: 1440px) {
    #online-block {
        top: 43px;
    }
}

@media (max-width: 1400px) {

    .online-server {
        border-radius: 6px !important;
        width: 212px !important;
        padding: 2px !important;
    }

    .online-server_body h5 {
        font-size: 14px;
        line-height: 13.947px;
    }

    .online-server h5 span {
        font-size: 13px;
        line-height: 100%;
    }

    .online-server h5 img {
        width: 27px;
        height: 18px;
    }

    .online-server_border {
        border-radius: 4px;
        padding: 1px;
    }

    .online-server_body {
        border-radius: 3px;
        padding: 6px 9px;
    }

    .online-server h5 {
        height: 14px;
    }

    #online-block {
        top: 39px;
        padding: 45px 64px !important;
    }


}

@media (max-width: 640px) {

    .online-server_block {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

    .online-server h5 img {
        width: 23px;
    }

    .online-server h5 {
        gap: 0px;
    }

    .online-server.mb-4 {
        margin-bottom: 6px !important;
    }

    .online-server h5 {
        height: 18px;
    }

    .online-server {
        border-radius: 6px !important;
        width: 82px !important;
        padding: 2px !important;
    }

    #online-block {
        top: 70px;
        right: 0;
        padding: 16px 0 !important;
    }

    .online-server_body h5 {
        font-size: 0;
    }

    .online-server_body h5 img,
    .online-server_body h5 span {
        font-size: 13px;
    }

    .online-server_body {
    border-radius: 3px;
    padding: 4px 4px;
}
}