/* ITM Component */
.itmlist {
    display: grid;
    gap: 5px;
}

.itmbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}

.itmimg {
    display: block;
}

.itmcontent {
    /* Add styles if needed */
}

/* Server Component */
.server {
    --server-bg-color: rgb(20, 119, 12); /* Default green for online */
    --server-border-color: rgba(155, 255, 160, 0.3);
    --server-box-shadow-color: rgba(160, 255, 152, 0.35);
    --server-color: rgb(138, 218, 94);

    opacity: 1;
    background-color: var(--server-bg-color);
    border-radius: 1.25rem;
    min-height: 2.375rem;
    box-sizing: border-box;
    padding: 0.375rem 0.5rem 0.375rem 1rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.server[data-server-status="off"] {
    --server-bg-color: red;
    --server-border-color: rgba(255, 100, 100, 0.3);
    --server-box-shadow-color: rgba(255, 100, 100, 0.35);
    --server-color: rgb(255, 200, 200);
}

.server__name {
    color: rgb(255, 255, 255);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.server__status {
    min-height: 1.625rem;
    background-color: var(--server-bg-color);
    border: 0.125rem solid var(--server-border-color);
    border-radius: 1rem;
    box-shadow: inset 0 0 0.375rem 0 var(--server-box-shadow-color);
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 3rem;
    padding: 0.3125rem 0.625rem;
    color: var(--server-color);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* Servers List */
.servers-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

@media (min-width: 1200px) {
    .servers-list {
        position: absolute;
        right: 20px;
        top: calc(100% + 10px);
    }
}
@media (min-width: 1540px) {
    .servers-list {
        position: static;
    }
}