.add_server_block {
    display: flex;
    flex-direction: row;
    gap: 16px;
    width: 100%;
}

.add_server_category,
.add_server_img {
    padding: 16px;
    border-radius: 4px;
    border: 1px solid #E4E4E4;
}

body.dark .add_server_category,
body.dark .add_server_img {
    border: 1px solid #242424;
}

.add_server_category {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.add_server_img {
    width: 380px;
}

.add_server_images {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.add_server_title {
    color: #171717;
    font-family: "HelveticaNeue-Bold";
    font-size: 24px;
    line-height: 100%;
}

body.dark .add_server_title {
    color: #F2F2F2;
}

.add_server_bub {
    border-radius: 100px;
    display: flex;
    padding: 8px 16px;
    justify-content: center;
    align-items: center;
    font-family: "HelveticaNeue-Medium";
    font-size: 14px;
    line-height: normal;
    background: #e6e4e4;
    color: #171717;
}

body.dark .add_server_bub {
    color: #F2F2F2;
    background: #242424;
}

.add_server_info {
    display: flex;
    flex-direction: row;
    gap: 8px;
    padding: 8px 0 16px;
}

.add_server_title_block {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.add_server_view {
    cursor: pointer;
    border-radius: 4.8px;
    border: 0.8px solid #E4E4E4;
    width: 32px;
    height: 32px;
    padding: 5px;
}

body.dark .add_server_view {
    border: 0.8px solid #242424;
}

.add_server_view svg path {
    stroke: #171717;
}

body.dark .add_server_view svg path {
    stroke: #F2F2F2;
}

.add_server_button {
    border-radius: 6px;
    border: 1px solid #E4E4E4;
    padding: 8px 12px;
    color: #171717;
    font-family: "HelveticaNeue-Medium";
    font-size: 14px;
    line-height: normal;
    text-align: center;
    cursor: pointer;
    min-width: 200px;
    transition: all 0.3s ease;
}

body.dark .add_server_button {
    color: #F2F2F2;
    border: 1px solid #242424;
    background: inherit;
}

body.dark .add_server_button:hover {
    background: #242424;
    border: 1px solid #242424;
}

.add_server_button:hover {
    background: #e6e4e4;
    border: 1px solid #e6e4e4;
}

body.dark .add_server_button_busy {
    background: #291515;
    color: #F00;
    border: 1px solid #291515;
}

.add_server_button_busy {
    background: #ff000014;
    color: #FF0000;
    border: 1px solid #ff000000;
}

.add_server_row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    width: 100%;
}

.add_server_rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.add_server_position {
    display: flex;
    width: 60px;
    min-width: 60px;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    background: #E4E4E4;
    color: #171717;
    font-family: 'HelveticaNeue-Medium';
    font-size: 14px;
    line-height: normal;
}

body.dark .add_server_position {
    background: #242424;
    color: #F2F2F2;
}

.add_server_name {
    display: flex;
    flex-direction: row;
    gap: 8px;
    border-radius: 6px;
    font-family: 'HelveticaNeue-Bold';
    font-size: 16px;
    line-height: 100%;
    height: 32px;
    align-items: center;
    padding: 4px 8px 4px 4px;
    width: 100%;
}

.server_name_Top {
    background: #FF0000;
    color: #FFFFFF;
}

.server_name_S {
    background: #FFD117;
    color: #080808;
}

.server_name_A {
    color: #004B91;
    background: #DBEEFF;
}

body.dark .server_name_A {
    color: #88C5FF;
    background: #212121;
}

.server_name_B {
    color: #171717;
    background: #F0F0F0;
}

body.dark .server_name_B {
    color: #F2F2F2;
    background: #212121;
}

.add_sever_icon {
    display: flex;
    width: 32px;
    height: 24px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 4px;
}

.server_name_Top .add_sever_icon {
    border: 1px solid #F00;
    background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, #FFF 100%);
}

.server_name_S .add_sever_icon {
    border: 1px solid #FE9A16;
    background: radial-gradient(50% 50% at 50% 50%, #362312 0%, #130C06 100%);
}

.server_name_A .add_sever_icon {
    border: 1px solid rgba(143, 216, 255, 0.64);
    background: radial-gradient(50% 50% at 50% 50%, #404040 0%, #131313 100%);
}

.server_name_B .add_sever_icon {
    border: 1px solid rgba(132, 132, 132, 0.32);
    background: radial-gradient(50% 50% at 50% 50%, #404040 0%, #131313 100%);
}

.add_sever_icon::after {
    content: '';
    position: absolute;
    z-index: 1;
}

.server_name_Top .add_sever_icon::after {
    background: url(../images/icon_top.svg) center / contain no-repeat;
    width: 18px;
    height: 15px;
}

.server_name_S .add_sever_icon::after {
    background: url(../images/icon_s.svg) center / contain no-repeat;
    height: 13px;
    width: 9px;
}

.server_name_A .add_sever_icon::after {
    background: url(../images/icon_a.svg) center / contain no-repeat;
    height: 13px;
    width: 11px;
}

.server_name_B .add_sever_icon::after {
    background: url(../images/icon_b.svg) center / contain no-repeat;
    height: 13px;
    width: 9px;
}

.position {
    margin-left: auto;
    font-family: 'HelveticaNeue-Medium';
}

@media (max-width: 1100px) {

    .add_server_block {
        flex-direction: column;
    }

    .add_server_images {
        flex-direction: row;
    }

    .add_server_img {
        width: 100%;
    }
}

@media (max-width: 670px) {

    .add_server_name {
        font-size: 14px;
        line-height: 100%;
    }

    .add_server_images {
        flex-direction: column;
        gap: 64px;
    }

    body.dark .add_server_img,
    .add_server_img,
    body.dark .add_server_category,
    .add_server_category {
        border: none;
        padding: 0;
    }

    .add_server_block {
        gap: 64px;
    }

    .add_server_row {
        flex-wrap: wrap;
    }

    .add_server_row .add_server_button {
        flex: 1 0 0;
    }
}