.addtech-container {
    width: 440px;
    height: 100%;
}

.border {
    border-radius: var(--px-16);
    padding: var(--px-16);
    background: var(--theme-mode-bs-400);
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--px-12);
}

.head-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--px-16) var(--px-24);
    color: var(--qs-txt-solid);
    font: normal normal 700 var(--s-20);
}

.head-content_close {
    font-size: 28px;
}

.body-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: var(--px-12);
}

.body-append-techs {
    width: 100%;
    height: 100%;
    display: grid;
    overflow: hidden auto;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--gap-img-mini) var(--px-10);
    justify-items: center;
    align-items: start;
    grid-auto-rows: min-content;
    padding-top: var(--gap-img-mini);
}

.body-content::-webkit-scrollbar {
    width: 2px;
    background: #f1f1f1;
}

.body-content_tech-card {
    display: flex;
    user-select: none;
    position: relative;
    touch-action: none;
    width: var(--px-120);
    max-height: var(--px-44);
    flex-direction: column;
    align-items: center;
}

    .body-content_tech-card.active {
    }

    .body-content_tech-card .tech-card_logo {
        position: relative;
        height: var(--px-80);
        width: var(--px-80);
        margin: auto;
        border-radius: var(--px-80);
    }

    .body-content_tech-card .tech-card_text {
        min-height: var(--px-44);
        width: 100%;
        max-height: var(--px-44);
        gap: 0;
        z-index: 10 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column;
        height: var(--px-44);
        justify-content: center;
        align-items: center;
        border-radius: var(--px-8);
        border: 2px solid var(--theme-mode-border-light);
        box-shadow: 0 1px 2px #00000040;
        font: normal normal 600 var(--s-14);
        color: var(--theme-mode-text-white);
        background: var(--theme-mode-bs-300);
    }

.tech-card_logo.techs-photo img,
.tech-card_logo.techs-photo .track-img-error-box {
    height: var(--img-mini) !important;
    width: var(--img-mini) !important;
    position: absolute;
    top: calc(-1* var(--pad-img-mini));
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid var(--theme-mode-bs-200);
    box-shadow: var(--shadow-5);
    outline: 1px solid var(--theme-mode-border);
    display: flex;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    border-radius: var(--px-50);
    color: var(--theme-mode-text);
    font: normal normal 700 var(--s-22);
    background: var(--theme-mode-bs-200);
}

.body-content .grid-3 {
    width: 100%;
    grid-column: span 3;
    grid-template-columns: auto;
    box-shadow: var(--shadow-1);
}

.border-tech {
    height: 100%;
    display: flex;
    gap: var(--px-12);
    flex-direction: column;
    border-radius: var(--px-16);
    background: var(--theme-mode-bs-300);
}