.resource-view {
    --card-padding: var(--space-standard);
}

.resource-view-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
    padding-top: 0;
}
.resource-view-head a[rel=author], .resource-view-head a[rel=author]:hover {
    color: var(--url-color);
}
.resource-view-head-date {
    font-weight: bold;
    color: var(--resource-head-date-color);
    margin-right: auto;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    gap: var(--space-tiny);
}

.resource-view-head-avatar {
    padding: var(--card-padding);
    width: 48px;
}
.resource-view-head-avatar img {
    width: 100%;
}

.resource-view-head-logo {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: var(--card-padding);
}

.resource-view-head-content {
    display: flex;
    flex: 9;
    padding-top: 0;
    padding-left: 0 !important;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-items: center;
}
.resource-view-head-content-leading {
    flex-grow: 1;
    margin-bottom: var(--card-padding);
    padding-right: var(--card-padding);
    pointer-events: none;
}
.resource-view-head-content-leading a {
    pointer-events: auto;
}
.resource-view-head-content-heading {
    position: relative;
    z-index: 10;
    font-size: 18px;
    margin: 0;
    margin-bottom: var(--space-small);
    white-space: normal;
    word-break: break-word;
}
.resource-view-head-content-heading h4 {
    font-family: Arial;
}
.resource-view-head-content-heading a {
    color: var(--header-url-color);
}
.resource-view-head-content-heading a:hover {
    text-decoration: none;
    color: var(--resource-head-link-hover-color);
}

.resource-view-head-content-subinfo {
    font-size: 85%;
    width: 100%;
}

.resource-view-head-content-trailing {
    position: relative;
    white-space: nowrap;
    margin-bottom: var(--card-padding);
    padding-right: var(--card-padding);
}
.resource-view-split-content-trailing-link {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.resource-view-head-content-project {
    position: relative;
    white-space: normal;
}

.resource-view-logo {
    display: flex;
    justify-content: center;
    width: 120px;
    margin: 0 auto;
}
.resource-view-logo img {
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 160px;
    border-radius: 3px;
}
.resource-view-logo a {
    display: block;
    max-width: 100%;
    word-break: break-word;
}
.resource-view-logo a img {
    transition: 0.08s ease-out;
    transition-property: filter;
    filter: brightness(1);
}
.resource-view-logo a:hover img, .resource-view-logo a:focus img {
    transition-duration: 0.5s;
    filter: brightness(1.2);
}

.resource-view-body-actions-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--space-standard);
}

.resource-view-body-actions-actions {
    display: flex;
    flex-flow: wrap;
    justify-content: space-between;
    align-items: flex-end;
}
.resource-view-body-actions-actions-tags {
    display: flex;
    flex: 4 4;
    min-width: 50%;
    margin-top: var(--space-small);
}
.resource-view-body-actions-actions-tags .control-tags-list {
    align-self: flex-end;
}
.resource-view-body-actions-actions-tags .control-tags-list .tag-el {
    display: inline-block;
    margin-bottom: 3px;
    word-break: break-word;
}

.resource-view-body-actions-actions-buttons {
    display: flex;
    flex: 1 1;
    justify-content: right;
    margin-top: var(--txt2-block-space);
}
.resource-view-body-actions-actions-buttons .control-button {
    flex: 0 0;
    margin-left: 6px;
}
.resource-view-body-actions-actions-buttons .control-button .btn {
    white-space: nowrap;
}
.resource-view-body-actions-actions-buttons .control-button-voter.i-voted .likes-button {
    color: var(--btn-primary-background-color);
}

.resource-view-body-actions-sub {
    margin-top: var(--space-small);
}

.resource-view-actions {
    gap: var(--space-small);
    flex-flow: row;
    align-items: stretch;
}

.resource-view-editors-choice-button, .resource-view-classification-button {
    height: 100%;
    word-wrap: break-word;
    word-break: break-word;
}

.resource-view-classification-button {
    color: var(--text-muted-color) !important;
}

.resource-view-button-letter {
    text-transform: uppercase;
    font-size: 0;
    display: block;
    max-width: 18px;
    font-weight: bold;
}
.resource-view-button-letter:first-letter {
    font-size: var(--font-size);
}

.resource-view-editors-choice-button {
    margin: 0;
    margin-bottom: var(--space-small);
    margin-right: var(--space-small);
}

.resource-view-latest-comment-info {
    display: inline-block;
    flex-basis: 50%;
    flex-grow: 1;
    text-align: right;
}

.resource-view-footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding-bottom: 0;
}
.resource-view-footer-username > .btn {
    margin-bottom: var(--card-padding);
}

.resource-view-footer-actions {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
    margin-bottom: var(--card-padding);
    white-space: nowrap;
}

.resource-view-split-content {
    display: flex;
}
.resource-view-split-content .resource-view-split-content-leading, .resource-view-split-content .resource-view-split-content-trailing {
    padding-top: var(--space-tiny);
}

.resource-view-split-content-leading {
    flex: 1;
    padding-top: var(--card-padding);
    margin-right: 0;
    align-self: stretch;
    padding-bottom: 0;
}
.resource-view-split-content-leading.desktop-only .resource-view-logo {
    position: sticky;
    top: var(--header-height)2px;
}

.resource-view-split-content-trailing {
    position: relative;
    padding-top: var(--card-padding);
    min-width: 0;
    padding-left: var(--card-padding);
    flex: 4;
    align-self: stretch;
    align-items: start;
}

@media (max-width: 640px), (max-width: 834px) and (orientation: portrait) {
    .layout-root .resource-view-split-content-leading {
        margin-top: 0;
    }
}
.resource-view-project-icon {
    width: auto;
    max-width: 32px;
    height: auto;
    max-height: 16px;
    border-radius: 50%;
    border: 3px solid var(--btn-background-color);
}

.resource-view-unconfirmed-alert {
    margin: 0;
    border: 0;
}

.resource-attributes {
    display: flex;
    flex-direction: column;
    margin-bottom: var(--txt2-block-space);
}

.resource-attributes-element {
    display: flex;
    flex-direction: row;
    margin-left: var(--space-medium);
    flex-wrap: wrap;
}

.resource-attributes-name {
    font-weight: bold;
    margin-right: var(--space-tiny);
    margin-left: -var(--space-medium);
}

.resources-index-controls {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
}
.resources-index-controls > div {
    margin-left: var(--space-tiny);
    margin-right: var(--space-tiny);
    margin-bottom: var(--space-small);
}

.resource-list-search {
    margin-top: var(--space-standard);
}
.resource-list-search form {
    margin-bottom: 0;
}

.resource-list-search, .resource-list-search-input {
    width: 100%;
}

.resource-list-hint-search-by-tag-expression {
    line-height: 30px;
}

.resource-popular-tags {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.resource-popular-tags-more .resource-popular-tag {
    margin-right: 0;
}

.resource-popular-tag {
    margin-right: var(--space-tiny);
    margin-bottom: var(--space-tiny);
    cursor: pointer;
    white-space: nowrap;
}
.resource-popular-tag:hover, .resource-popular-tag:active, .resource-popular-tag:focus {
    background: var(--url-hover-color);
}

.resource-popular-tag-info {
    background-color: var(--btn-primary-background-color);
    cursor: default;
}

.resource-list {
    --card-margin-bottom: var(--space-standard);
}

.resource-list-element .position-left {
    display: none;
}
.resource-list-element .card-body {
    padding-top: 0;
}

.tags-edit-element {
    display: flex;
    justify-content: space-between;
}

.tags-edit-element-part {
    margin: 4px;
    padding: 0 4px;
}

.resource-qa-view-element {
    margin-top: var(--txt2-block-space);
    margin-bottom: -var(--space-small);
}

.resource-form-pagetext {
    height: 400px;
}

.resource-authors-and-projects {
    display: flex;
    align-items: center;
    margin: var(--space-medium) var(--space-medium) var(--space-tiny);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.resource-authors-and-projects a {
    word-break: break-word;
}

.resource-authors-btn {
    background: none;
    border-color: transparent;
    margin-right: var(--space-tiny);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.resource-authors-avatar, .resource-projects .resource-view-project-icon {
    width: 32px;
    height: 32px;
    max-height: 32px;
    max-width: 32px;
    object-fit: cover;
}

.resource-projects .resource-view-project-icon {
    border-radius: 8px;
}

.resource-authors-avatars {
    white-space: nowrap;
    overflow: hidden;
    margin-right: var(--space-tiny);
}

.resource-authors-avatar {
    border-radius: 50%;
    border: 3px solid var(--btn-primary-background-color);
    background: var(--card-body-background);
}

.resource-projects {
    margin-left: var(--space-medium);
}

.steam-widget {
    margin-top: var(--space-decent);
    margin-bottom: var(--space-small);
    text-align: center;
}

#recommender-interest-control-form .noloader, #recommender-interest-control-form .loader {
    min-height: var(--space-large);
}

.resource-recommender-interest-control-item {
    margin-bottom: var(--space-tiny);
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.interest-control-item-el {
    word-wrap: normal;
    word-break: break-word;
    font-weight: bold;
    margin-right: var(--space-tiny);
    margin-bottom: var(--space-small);
}

.interest-control-item-el-shifted {
    margin-left: auto;
}

.interest-control-item-subinfo {
    font-size: 0.75rem;
    width: 100%;
    color: var(--text-muted-color);
}

.interest-control-item-weight-recommended {
    font-weight: bold;
}

.generic-tile-list {
    margin-bottom: var(--space-small);
}

.generic-tile-list-head {
    margin-bottom: var(--space-medium);
    display: flex;
    justify-content: flex-end;
}
.generic-tile-list-head.generic-tile-list-head-start {
    justify-content:flex-start;
}

.generic-tile-list-title .spoiler-opener {
    border-bottom: 0;
}

.generic-tile-list-container {
    overflow-x: auto;
    overflow-y: hidden;
    display: flex;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    max-height: 120px;
    padding-left: 0;
    padding-bottom: var(--space-medium);
    align-items: flex-start;
    align-content: start;
}

.txt2 .generic-tile-list-container {
    align-items: center;
    align-content: normal;
}

.generic-tile-list-container::-webkit-scrollbar {
    height: 8px;
}

.generic-tile-list-container::-webkit-scrollbar-thumb {
    background: var(--text-muted-color);
    border-radius: 3px;
}

:root {
    --generic-tile-list-el-side: 60px;
}

.generic-tile-list-el {
    width: 260px;
    min-width: 260px;
    height: var(--generic-tile-list-el-side);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    padding: 0 var(--space-tiny) 0 0;
    border-radius: 5px;
    overflow: hidden;
    margin-right: var(--space-standard);
}
.generic-tile-list-el.generic-tile-list-el-card {
    background: var(--card-body-background);
}
.generic-tile-list-el .logo {
    width: var(--generic-tile-list-el-side);
    height: var(--generic-tile-list-el-side);
    min-width: var(--generic-tile-list-el-side);
    min-height: var(--generic-tile-list-el-side);
    display: flex;
    align-items: center;
    justify-content: center;
}
.generic-tile-list-el img.logo {
    transition: 0.08s ease-out;
    transition-property: filter;
    filter: brightness(1);
    object-fit: cover;
}
.generic-tile-list-el:hover img.logo, .generic-tile-list-el:focus img.logo {
    transition-duration: 0.5s;
    filter: brightness(1.2);
}
.generic-tile-list-el .caption {
    font-size: 14px !important;
    text-align: start !important;
    word-break: break-word;
    white-space: normal;
}

.generic-tile-title {
    color: var(--text-color);
    white-space: nowrap;
}

.generic-tile-title, .generic-tile-sub {
    text-overflow: ellipsis;
    overflow: hidden;
    width: 100%;
    max-height: 42px;
}

.generic-tile-title.generic-tile-title-multiline {
    white-space: normal;
    max-height: 120px;
}

.generic-tile-logo {
    margin-right: var(--space-small);
    display: flex;
    justify-content: center;
    height: 100%;
}

.generic-tile-list-el .feed-row-text-head {
    text-align: center;
}

.resources-index-controls .navigation-paginator {
    display: flex;
    min-width: 0;
}
.resources-index-controls .navigation-paginator > .btn {
    min-width: 0;
}
.resource-elements-new-resource-buttons {
    display: flex;
    justify-content: flex-end;
    min-width: calc(var(--space-large) * 4);
}
.resource-elements-new-resource-el:first-child {
    margin-right: var(--space-small);
}
.resource-elements-new-resource-buttons.resource-elements-as-menu-navigation {
    margin-bottom: var(--card-margin-bottom);
}
.resource-elements-new-resource-el {
    margin-left: var(--space-small);
}
.resource-elements-as-list-navigation .resource-elements-new-resource-el {
    margin-left: var(--space-tiny);
}

@media (max-width: 640px), (max-width: 834px) and (orientation: portrait) {
    .resource-view-head {
        align-items: flex-start;
    }
    .resource-view-head-content-project {
        text-align: right;
    }
    .resources-index-controls {
        justify-content: center;
        flex-wrap: wrap;
    }
    .resource-popular-tags {
        justify-content: center;
    }
    .resource-popular-tags-more {
        text-align: center;
    }
    .resource-view-logo {
        width: 60px;
    }
    .resource-view-logo img {
        max-width: 60px;
        max-height: 60px;
    }
    .resource-qa-layout {
        overflow-x: auto;
        max-width: 100%;
    }
    .resource-qa-view-element .suggested-answer-box {
        flex-direction: column;
    }
    .resource-qa-view-element .qa-select-answer-box .qa-select-answer-form {
        flex-direction: column;
    }
    .resource-task-view-element {
        float: none !important;
    }
    .tags-edit-element {
        flex-direction: column;
        margin-bottom: 32px;
    }
    .tags-edit-element-part {
        margin: 0;
    }
    .resource-form-pagetext {
        max-height: calc(66vh - var(--header-height));
    }
    .resource-list .generic-tile-list-container, .generic-tile-list-head {
        padding-left: var(--space-standard);
        padding-right: var(--space-standard);
    }
    .resource-elements-as-menu-navigation .resource-elements-new-resource-el {
        flex-grow: 1;
    }
    .resource-elements-new-resource-el {
        margin-left: var(--card-margin-bottom);
    }
    .resource-elements-new-resource-el:first-child {
        margin-left: 0;
    }
}