/*
* Icons
*/
i[class^="ico_"] {
    display: inline-block;
    width: 24px;
    height: 24px;
    vertical-align: top;
    background-color: var(--white-3);
}

.ico_18 {
    width: 18px !important;
    height: 18px !important;
    mask-size: 18px !important;
}

.ico_link {
    width: 18px !important;
    height: 18px !important;
    mask-size: 18px !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4.222 19.778a4.983 4.983 0 0 0 3.535 1.462 4.986 4.986 0 0 0 3.536-1.462l2.828-2.829-1.414-1.414-2.828 2.829a3.007 3.007 0 0 1-4.243 0 3.005 3.005 0 0 1 0-4.243l2.829-2.828-1.414-1.414-2.829 2.828a5.006 5.006 0 0 0 0 7.071zm15.556-8.485a5.008 5.008 0 0 0 0-7.071 5.006 5.006 0 0 0-7.071 0L9.879 7.051l1.414 1.414 2.828-2.829a3.007 3.007 0 0 1 4.243 0 3.005 3.005 0 0 1 0 4.243l-2.829 2.828 1.414 1.414 2.829-2.828z'%3E%3C/path%3E%3Cpath d='m8.464 16.95-1.415-1.414 8.487-8.486 1.414 1.415z'%3E%3C/path%3E%3C/svg%3E");
}

.ico_menu {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6h16v2H4zm0 5h16v2H4zm0 5h16v2H4z'%3E%3C/path%3E%3C/svg%3E");
}

.ico_home {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' %3E%3Cpath d='m21.743 12.331-9-10c-.379-.422-1.107-.422-1.486 0l-9 10a.998.998 0 0 0-.17 1.076c.16.361.518.593.913.593h2v7a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-4h4v4a1 1 0 0 0 1 1h3a1 1 0 0 0 1-1v-7h2a.998.998 0 0 0 .743-1.669z'%3E%3C/path%3E%3C/svg%3E");
}

.ico_video {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' %3E%3Cpath d='M4 8H2v12a2 2 0 0 0 2 2h12v-2H4z'%3E%3C/path%3E%3Cpath d='M20 2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2zm-9 12V6l7 4z'%3E%3C/path%3E%3C/svg%3E");
}

.ico_clip {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' %3E%3Cpath d='M20 3H4c-1.103 0-2 .897-2 2v14c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V5c0-1.103-.897-2-2-2zm.001 6c-.001 0-.001 0 0 0h-.465l-2.667-4H20l.001 4zM15.5 15 10 18v-6l5.5 3zm-.964-6-2.667-4h2.596l2.667 4h-2.596zm-2.404 0H9.536L6.869 5h2.596l2.667 4zM4 5h.465l2.667 4H4V5z'%3E%3C/path%3E%3C/svg%3E");
}

.ico_author {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' %3E%3Cpath d='M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h17z'%3E%3C/path%3E%3C/svg%3E");
}

.ico_category {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' %3E%3Cpath d='M17.867 2.504c-.355-.624-1.381-.623-1.736 0l-3.999 7A1 1 0 0 0 13 11h8a1.001 1.001 0 0 0 .868-1.496l-4.001-7zM3 22h7a1 1 0 0 0 1-1v-7a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1zm14.5-9c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5z'%3E%3C/path%3E%3C/svg%3E");
}

.ico_collection {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' %3E%3Cpath d='M19 10H5c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h14c1.103 0 2-.897 2-2v-8c0-1.103-.897-2-2-2zM5 6h14v2H5zm2-4h10v2H7z'%3E%3C/path%3E%3C/svg%3E");
}

.ico_search {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M480 272C480 317.9 465.1 360.3 440 394.7L566.6 521.4C579.1 533.9 579.1 554.2 566.6 566.7C554.1 579.2 533.8 579.2 521.3 566.7L394.7 440C360.3 465.1 317.9 480 272 480C157.1 480 64 386.9 64 272C64 157.1 157.1 64 272 64C386.9 64 480 157.1 480 272zM272 416C351.5 416 416 351.5 416 272C416 192.5 351.5 128 272 128C192.5 128 128 192.5 128 272C128 351.5 192.5 416 272 416z'/%3E%3C/svg%3E");
}

.ico_user {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' %3E%3Cpath d='M7.5 6.5C7.5 8.981 9.519 11 12 11s4.5-2.019 4.5-4.5S14.481 2 12 2 7.5 4.019 7.5 6.5zM20 21h1v-1c0-3.859-3.141-7-7-7h-4c-3.86 0-7 3.141-7 7v1h17z'%3E%3C/path%3E%3C/svg%3E");
}

.ico_download {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' %3E%3Cpath d='M19 9h-4V3H9v6H5l7 8zM4 19h16v2H4z'%3E%3C/path%3E%3C/svg%3E");
}


/*
* Covers
*/
.covers {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 32px 24px;
    list-style: none;
}

@media (max-width: 600px) {
    .covers {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 24px 16px;
    }
}

.cover {
    position: relative;
}

.cover_preview {
    position: relative;
    user-select: none;
    overflow: hidden;
}

.cover_preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--black-2);
    border-radius: 4px;
}

.cover_preview img[src$=".svg"] {
    object-fit: contain;
}

.cover_loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #de1212;
    border-radius: 2px;
    animation: increaseWidth 1s ease-out;
    pointer-events: none;
}

@keyframes increaseWidth {
    0% {
        width: 0;
    }
    100% {
        width: 100%;
    }
}

.cover_teaser {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    vertical-align: top;
    border-radius: 4px;
    pointer-events: none;
}

.cover_duration {
    position: absolute;
    z-index: 1;
    bottom: 8px;
    right: 8px;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    background: #00000899;
    border-radius: 2px;
    pointer-events: none;
}

.cover_title a {
    display: block;
    max-width: 100%;
    justify-self: start;
    padding-top: 12px;
    color: var(--white-1);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.cover:hover a {
    color: var(--accent);
}


/*
* Link list
*/
.link_list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 16px;
    list-style: none;
}

@media (max-width: 600px) {
    .link_list {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

.link_list a {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 16px;
    color: var(--white-1);
    background: var(--black-3);
    border-radius: 4px;
}

@media (max-width: 600px) {
    .link_list a {
        padding: 8px 12px;
    }
}

.link_list a:hover {
    color: var(--accent);
    text-decoration: none;
}

.link_list a span:first-child {
    flex: 1;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
}

.link_list a span:last-child {
    flex-shrink: 0;
}


/*
* Category map
*/
.video_map {
    list-style: none;
    font-size: 14px;
}

.video_map_item {
    display: flex;
    justify-content: flex-start;
    padding: 6px 8px;
}

.video_map_header {
    font-weight: 600;
}

.video_map_item:nth-child(odd) {
    background: var(--black-3);
}

.video_map_item > * {
    width: 100px;
    text-align: center;
}

.video_map_title {
    flex: 1;
    text-align: left;
}


/*
* Collections
*/
.collections {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 32px 24px;
    list-style: none;
}

@media (max-width: 600px) {
    .collections {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 24px 16px;
    }
}

.collection {
    position: relative;
}

.collection_preview {
    position: relative;
    user-select: none;
    overflow: hidden;
}

.collection_preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16/9;
    object-fit: cover;
    background: var(--black-2);
    border-radius: 4px;
}

.collection_preview img[src$=".svg"] {
    object-fit: contain;
}

.collection_count {
    position: absolute;
    z-index: 1;
    bottom: 8px;
    right: 8px;
    padding: 2px 4px;
    font-size: 12px;
    font-weight: 500;
    color: #ffffff;
    background: #00000899;
    border-radius: 2px;
    pointer-events: none;
}

.collection_title a {
    display: block;
    max-width: 100%;
    justify-self: start;
    padding-top: 12px;
    color: var(--white-1);
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none;
}

.collection:hover a {
    color: var(--accent);
}


/*
* Clips
*/
.clips {
    display: grid;
    grid-template-columns: minmax(0, 600px);
    justify-content: center;
    gap: 48px 0;
    list-style: none;
}

.clip {
    position: relative;
    display: flex;
    justify-content: stretch;
    flex-direction: column;
    background: var(--black-2);
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 8, 0.8);
}

.clip_video {
    width: 100%;
    height: 100%;
    max-height: 60vh;
    display: block;
    vertical-align: top;
    background: var(--black-2);
}

.v-vlite {
    --vlite-colorPrimary: var(--accent) !important;
    aspect-ratio: auto !important;
}

.v-fullscreenButtonDisplay .clip_video {
    max-height: none; !important;
}

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

.clip_title {
    color: var(--white-5);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
}

.clip_title a {
    color: var(--white-1);
    text-decoration: none;
}

.clip_title a:hover {
    color: var(--accent);
}

.clip_description {
    line-height: 1.5;
    font-size: 14px;
    color: var(--white-5);
}