.select-container {
    display: flex;
    align-items: center;
    gap: 8px;
}

.arrow-right {
    width: 20px;
    height: 20px;

    mask: url("/ssr-static/icons/arrow-down.svg") no-repeat;
    mask-size: contain;
    -webkit-mask: url("/ssr-static/icons/arrow-down.svg") no-repeat;
    -webkit-mask-size: contain;

    transform: rotate(-90deg);

    background-color: var(--surface-brand);
}

.page-container .breadcrumbs-container {
    margin-top: 40px;
    margin-bottom: 24px;
}

.category:not(.first) {
    border-top: 1px solid var(--surface-line);
}

.order-card-container:first-child {
    margin-top: 40px;
}

@media (max-width: 768px) {
    .select-container > :first-child {
        display: none !important;
    }

    .order-card-container:last-child .order-card {
        margin-bottom: 0;
    }

    .page-container .breadcrumbs-container {
        margin: 16px 16px 24px;
    }

    .order-card-container {
        margin: 0 16px;
        width: calc(100% - 32px);
    }
}

.networks-container {
    display: flex;
    align-content: center;

    border-bottom: 1px solid var(--surface-border);
}

.networks-container > div {
    max-width: 1264px;
    margin: 0 auto;
}

.networks-container .networks-wrapper {
    display: flex;
    padding: 0 24px;
}

.networks-container .networks-wrapper .tabs-wrapper {
    display: flex;
    position: relative;
    gap: 30px;
    max-width: 100%;
}

.networks-container .networks-wrapper .tabs-wrapper .tab {
    padding: 23px 0px;
    cursor: pointer;
    font-size: 14px;
    position: relative;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    transition: opacity 200ms ease-in-out;
    color: var(--text-main);

    flex-shrink: 0;
}

.networks-container .networks-wrapper .tabs-wrapper > .tab.active::after {
    position: absolute;
    content: "";
    width: 100%;
    bottom: 0px;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: 2px 2px 0px 0px;
    background: var(--surface-brand);
    transition: opacity 200ms ease-in-out;
}

.more-content .tab.active .main-text {
    color: var(--surface-brand)
}

.networks-container .networks-wrapper .tabs-wrapper .tab .tab-container {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.networks-container .networks-wrapper .tabs-wrapper .tab .tab-container img {
    width: 24px;
    height: 24px;
    margin-right: 5px;
    margin-bottom: 0;
}

.more-container {
    display: flex;
    align-items: center;

    cursor: pointer;

    margin-left: 24px;
}

.more-relative {
    position: relative;
    z-index: 1;
}

.more-content {
    position: absolute;

    min-width: fit-content;
    top: 100%;

    z-index: 999;

    padding: 16px 24px;

    border-radius: 12px;
    border: 1px solid var(--surface-border);
    background: var(--surface-background);

    max-height: 300px;
    overflow-y: scroll;

    opacity: 0;
    visibility: hidden;

    transition: opacity 250ms ease-in-out;
}

.more-relative:hover .more-content {
    opacity: 1;
    visibility: visible;
}

.more-container > div {
    width: 24px;
    height: 24px;
    margin-right: 5px;

    background: url(/ssr-static/images/more.svg) no-repeat;
    background-size: contain;
}

.more-content .tab-container .main-text {
    word-break: keep-all;
    min-width: max-content;
}

.top-content-container {
    padding-top: 48px;
    width: 100%;
}

@media (max-width: 768px) {
    .networks-container {
        overflow: hidden;
    }

    .top-content-container {
        padding-top: 0;
    }

    .networks-container .networks-wrapper .tabs-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
    }
}