body {
    background-color: var(--body-background-color);
    z-index: 1;
}

@media (max-width: 575px) {
    body:after {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        opacity: 0;
        transition: var(--transition-duration) ease all;
        background-color: var(--body-blur-background-color);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
        z-index: 0;
    }

    body.backdrop-filter:after {
        visibility: visible;
        opacity: 1;
    }
}

path {
    transition: var(--transition-duration) ease all;
}

a {
    text-decoration: none;
    color: var(--body-color-neutral);
    transition: var(--transition-duration) ease all;
}

:focus-visible {
    outline: none;
}

a:hover {
    color: var(--body-color);
}

a:active {
    opacity: .5;
}

.content {
    margin-top: 146px;
}

@media (min-width: 576px) {
    .jumbotron {
        margin-left: 9px;
        margin-right: 9px;
    }
}

img {
    max-width: 100%;
}

.jumbotron {
    border-radius: var(--border-radius-lg);
    padding-top: 50px;
    padding-bottom: 50px;
    background-color: var(--jumbotron-background-color);
    margin-bottom: 50px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

@media (min-width: 1200px) {
    .jumbotron {
        padding-top: 130px;
        padding-bottom: 130px;
    }
}

.jumbotron:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
    bottom: 0;
    width: 35%;
    max-width: 640px;
    background: radial-gradient(75.49% 94.83% at 0% 50%, rgba(151, 71, 255, 0.25) 0%, rgba(151, 71, 255, 0) 100%);
}

body.light-theme .jumbotron:after {
    background-image: url("/themes/modstock/assets/images/icons/jumbotron-background-icon-light.svg");
}

body.dark-theme .jumbotron:after {
    background-image: url("/themes/modstock/assets/images/icons/jumbotron-background-icon-dark.svg");
}

.jumbotron:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    bottom: 0;
    width: 35%;
    max-width: 640px;
    background-size: cover;
    background-repeat: no-repeat;
}

.card {
    background-color: var(--card-background-color);
    box-shadow: var(--card-shadow);
    border-radius: var(--border-radius-lg);
    border-width: var(--card-border-width);
}

.card-body {
    padding: var(--card-padding-sm);
}

.video-demo {
    border: 0;
    outline: none;
    border-radius: 0;
    height: 100%;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: -1;
}

@media (min-width: 576px) {
    .card:not(.card-sm) .card-body {
        padding: var(--card-padding);
    }
}

.btn {
    border: var(--btn-border-width) solid transparent;
    transition: var(--transition-duration) ease all;
    font-size: 16px;
    line-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10.5px 20px;
    color: var(--body-color);
}

.btn-back {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--btn-neutral-color);
    transition: var(--transition-duration) color, opacity;
    cursor: pointer;
}

.btn-back:hover {
    opacity: .75;
}

.btn-back:active {
    opacity: .5;
}

.btn-transparent {
    background-color: transparent;
    border-color: transparent;
    color: var(--body-color);
}

.btn-transparent:hover {
    background-color: var(--btn-neutral-background-color);
}

.btn-transparent:active {
    opacity: .5;
    background-color: var(--btn-neutral-background-color);
    border-color: transparent !important;
}

.btn-icon-only {
    padding: 11px;
}

@media (max-width: 575px) {
    .btn-sm-icon-only {
        padding: 11px;
    }
}

.btn-pill {
    border-radius: 999px;
}

.btn-primary {
    color: white !important;
    background-color: #0066FE;
    border-color: #0066FE;
}

.btn-lg {
    padding: 20.5px 20px;
    border-radius: 20px;
}

.btn-md {
    padding: 16px 25px;
    border-radius: 20px;
}

.btn-accent {
    background-color: var(--color-accent) !important;
    color: #FFF !important;
    border-color: var(--color-accent) !important;
}

.btn-accent:hover {
    background-color: var(--color-accent-hover) !important;
    border-color: var(--color-accent-hover) !important;
}

.btn-accent:active {
    background-color: var(--color-accent-active) !important;
    border-color: var(--color-accent-active) !important;
}

.btn-default {
    border-color: var(--btn-default-border-color) !important;
    background-color: var(--btn-default-background-color);
    color: var(--body-color-inverse);
}

.btn-default:hover, .btn-default:active {
    opacity: .75;
    background-color: var(--btn-default-background-color) !important;
    color: var(--body-color-inverse) !important;
}

.btn-default:hover path, .btn-default:active path {
    stroke: var(--body-color-inverse);
}

.btn-default:active {
    opacity: .5;
}


.btn-outline-default {
    border-color: var(--btn-default-border-color) !important;
    background-color: transparent;
}

.btn-outline-default:hover, .btn-outline-default:active {
    background-color: var(--btn-default-background-color) !important;
    color: var(--body-color-inverse) !important;
}

.btn-outline-default:hover path, .btn-outline-default:active path {
    stroke: var(--body-color-inverse);
}

.btn-outline-default:active {
    opacity: .5;
}

.btn-outline-neutral {
    border-color: var(--btn-outline-neutral-border-color) !important;
    background-color: transparent;
    color: var(--btn-neutral-color);
}

.btn-outline-neutral:hover, .btn-outline-neutral:active {
    background-color: var(--btn-neutral-background-color) !important;
    color: var(--body-color) !important;
    border-color: transparent !important;
}

.btn-outline-neutral:active {
    opacity: .5;
}

.btn-neutral {
    border-color: var(--btn-neutral-border-color) !important;
    background-color: var(--btn-neutral-background-color);
    color: var(--btn-neutral-color);
}

.btn-neutral:hover, .btn-neutral:active {
    background-color: var(--btn-default-background-color) !important;
    color: var(--body-color-inverse) !important;
}

.btn-neutral:hover path[stroke], .btn-neutral:active path[stroke] {
    stroke: var(--body-color-inverse);
}

.btn-neutral:hover path[fill], .btn-neutral:active path[fill] {
    fill: var(--body-color-inverse);
}

.btn-neutral:hover, .btn-neutral:active {
    background-color: var(--btn-default-background-color) !important;
    color: var(--body-color-inverse) !important;
}

.btn-neutral:active {
    opacity: .5;
}

.btn-social {
    border-radius: 15px;
    padding: 10px 12px;
    background-color: rgba(255, 255, 255, .1);
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, .75);
    transition: var(--transition-duration) ease all;
    border-color: transparent !important;
}

.btn-social:hover {
    color: white;
    opacity: .75;
    background-color: rgba(255, 255, 255, .1);
}

.btn-social:active {
    opacity: .5 !important;
    color: white !important;
    background-color: rgba(255, 255, 255, .1) !important;
}

.hagi-vagi-wrapper {
    position: relative;
    width: 100%;
}

.hagi-vagi-decor {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.hagi-vagi {
    width: 100%;
    aspect-ratio: 424 / 343;
}

.search-card {
    z-index: 1;
}

.searchpane-decor {
    position: absolute;
    top: 0;
    right: 0;
    z-index: -1;
}

.form-control {
    background-color: var(--btn-neutral-background-color);
    font-size: 16px;
    line-height: 19px;
    border-radius: 20px;
    padding: 10px 18px;
    border: 1px solid transparent;
    transition: var(--transition-duration) ease all;
}

.form-control-transparent {
    background-color: transparent;
    border-color: var(--form-control-border-color);
}

.form-control.form-control-invert {
    background-color: var(--form-control-background-color);
    border-color: var(--form-control-border-color);
}

.form-control::placeholder {
    color: var(--form-control-color-placeholder);
    font-size: 16px;
    line-height: 19px;
}

.form-control-lg {
    padding: var(--form-control-lg-padding-y) var(--form-control-lg-padding-x);
}

.form-control-wrapper {
    position: relative;
    z-index: 1;
}

.form-control-wrapper .form-control-icon {
    position: absolute;
    top: 50%;
    left: 18px;
    transform: translateY(-50%);
    line-height: 0;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    z-index: 2;
}

.form-control-wrapper .form-control-icon + .form-control {
    padding-left: 42px;
}

.form-control:hover {
    box-shadow: none;
    outline: none;
    border-color: var(--btn-neutral-background-color);
    background: var(--body-color-inverse);
}

.form-control:active {
    box-shadow: none;
    outline: none;
}

.form-control:focus {
    box-shadow: none;
    outline: none;
    border-color: var(--color-accent);
    background: var(--body-color-inverse);
}



.radio-tabs {
    display: flex;
    align-items: center;
    gap: 24px;
    height: 32px;
}

.tab {
    color: var(--body-color-neutral);
    transition: var(--transition-duration) ease all;
    position: relative;
    font-size: clamp(16px, calc(16px + .333vw), 20px);
    line-height: clamp(19px, calc(19px + .333vw), 23px);
    cursor: pointer;
    font-weight: 500;
}

.tab:hover, .tab.active, input:checked + label > .tab {
    color: var(--body-color);
}

.tab:after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    background-color: transparent;
    transition: var(--transition-duration) ease all;
    width: 100%;
    height: 2px;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
    cursor: default;
}

.tab.active:after, input:checked + label > .tab:after {
    background-color: var(--color-accent);
}

.mod-card {
    border: 1px solid var(--form-control-border-color);
    border-radius: 24px;
}

.mod-card .card-head {
    padding: 2px;
}

h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    color: var(--body-color);
    transition: var(--transition-duration) ease color;
}

.mod-card .resource-cover {
    --background-color: var(--resource-cover-background-color);

    transition: var(--transition-duration) ease background-color;
    width: 100%;
    min-height: 155px;
    border-radius: 22px;
    object-fit: cover;
    aspect-ratio: 2 / 1;
    background-color: var(--background-color);
    position: relative;
    z-index: 0;
    overflow: hidden;
}

.mod-card .resource-cover-lg {
    aspect-ratio: 4 / 1;
    min-height: 210px;
}

.resource-card .resource-cover-mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: var(--resource-cover-background-color);
    opacity: .50;
}

.resource-logo {
    transition: var(--transition-duration) ease background-color;
    width: 58px;
    height: 58px;
    object-fit: cover;
    border-radius: 12px;
    border: 4px solid var(--card-background-color);
    background-color: var(--resource-cover-background-color);
    position: absolute;
    bottom: -25px;
    left: 19px;
    image-rendering: pixelated;
}

.resource-logo-block {
    image-rendering: pixelated;
    display: block;
    position: relative;
    bottom: initial;
    left: initial;
}

.mod-card .card-body {
    padding: 31px 22px 20px;
}

.mod-card-lg .card-body {
    padding: 62px 20px 20px !important;
}

.skin-card-lg .card-head {
    padding: 30px 30px 0 30px;
}

.skin-card-lg .card-body {
    padding: 30px;
}

.author-card-lg .card-body {
    padding: 30px;
}

.resource-logo-lg {
    image-rendering: pixelated;
    border: 6px solid var(--card-background-color);

    bottom: -38px;
    left: 14px;
    border-radius: 18px;
    width: 86px;
    height: 86px;
}

@media (min-width: 576px) {
    .mod-card-lg .card-body {
        padding: 62px 30px 30px;
    }

    .resource-logo-lg {
        border: 8px solid var(--card-background-color);
        bottom: -50px;
        left: 22px;
        border-radius: 24px;
        width: 116px;
        height: 116px;
    }
}

.fake-content {
    content: '';
    position: relative;
    display: block;
    overflow: hidden;
    transition: .2s ease all;
    background: var(--fake-content-background);
    border-radius: 10px;
    isolation: isolate;
}
.fake-content:after {
    background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(hsl(213deg 13% 23%)), color-stop(50%, transparent));
    background: var(--fake-content-gradient);
    transition: .2s ease all;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    -webkit-animation: fake-content 1s linear infinite;
    animation: fake-content 1s linear infinite;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    content: '';
}
@-webkit-keyframes fake-content {
    to {
        -webkit-transform:translateX(100%);
        transform:translateX(100%)
    }
}

@keyframes fake-content {
    to {
        -webkit-transform:translateX(100%);
        transform:translateX(100%)
    }
}

.horizontal-scroll-gradient {
    position: relative;
}

.horizontal-scrolling {
    flex-wrap: nowrap;
}

.horizontal-scroll-gradient > .horizontal-scrolling {
    padding-right: 22px;
}

.horizontal-scroll-gradient:after {
    content: '';
    background: var(--horizontal-scroll-gradient-background);
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    width: 22px;
}

@media (min-width: 1200px) {
    .horizontal-scroll-lg-nogradient:after {
        display: none;
    }
}

.text-accent, .text-accent-hover:hover {
    color: var(--color-accent) !important;
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--body-color-neutral);
    --bs-breadcrumb-item-active-color: var(--body-color);
    --bs-breadcrumb-item-padding-x: 12px;
}

.badge {
    padding: 2px 6px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    background-color: var(--badge-default-background-color);
    color: var(--badge-default-color);
    transition: var(--transition-duration) ease all;
}

.badge-thin {
    gap: 3px;
}

.badge-lg {
    padding: 10.5px 20px;
    font-size: 16px;
    line-height: 19px;
}

.badge:before {
    content: '';
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: var(--badge-default-color);
    transition: var(--transition-duration) ease background-color;
}

.badge.no-dot:before {
    display: none;
}

.badge.developer:before, .badge.moderator:before, .badge.admin:before {
    content: '';
    width: 18px;
    height: 18px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: transparent;
    border-radius: 0;
}

body.light-theme .badge.developer:before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.9996C8.73693 16.9996 8.47842 16.931 8.25 16.8005L3 13.7945C2.53575 13.529 2.25 13.0385 2.25 12.5068V6.49326C2.25 5.96226 2.53575 5.47101 3 5.20476L8.25 2.19876C8.47842 2.06827 8.73693 1.99963 9 1.99963C9.26307 1.99963 9.52158 2.06827 9.75 2.19876L15 5.20476C15.2274 5.33428 15.4165 5.5216 15.5482 5.74774C15.6799 5.97388 15.7495 6.23081 15.75 6.49251V12.506C15.75 13.037 15.4643 13.5283 15 13.7945L9.75 16.8005C9.52158 16.931 9.26307 16.9996 9 16.9996ZM9 16.9996V9.50001M9 9.50001L15.5475 5.72001M9 9.50001L2.4525 5.72001' stroke='black' stroke-opacity='0.5' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.dark-theme .badge.developer:before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.9996C8.73693 16.9996 8.47842 16.931 8.25 16.8005L3 13.7945C2.53575 13.529 2.25 13.0385 2.25 12.5068V6.49326C2.25 5.96226 2.53575 5.47101 3 5.20476L8.25 2.19876C8.47842 2.06827 8.73693 1.99963 9 1.99963C9.26307 1.99963 9.52158 2.06827 9.75 2.19876L15 5.20476C15.2274 5.33428 15.4165 5.5216 15.5482 5.74774C15.6799 5.97388 15.7495 6.23081 15.75 6.49251V12.506C15.75 13.037 15.4643 13.5283 15 13.7945L9.75 16.8005C9.52158 16.931 9.26307 16.9996 9 16.9996ZM9 16.9996V9.50001M9 9.50001L15.5475 5.72001M9 9.50001L2.4525 5.72001' stroke='white' stroke-opacity='0.5' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

body.light-theme .badge.moderator:before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.56116 8L3.02391 13.5635C2.87708 13.7092 2.76054 13.8825 2.68102 14.0735C2.60149 14.2645 2.56055 14.4693 2.56055 14.6761C2.56055 14.883 2.60149 15.0878 2.68102 15.2788C2.76054 15.4697 2.87708 15.643 3.02391 15.7888C3.32044 16.0837 3.72167 16.2493 4.13991 16.2493C4.55815 16.2493 4.95938 16.0837 5.25591 15.7888L10.8112 10.25M13.5914 11.9698L15.5309 10.0303C15.6715 9.8896 15.7505 9.69887 15.7505 9.5C15.7505 9.30113 15.6715 9.1104 15.5309 8.96975L9.84141 3.28025C9.70076 3.13965 9.51003 3.06066 9.31116 3.06066C9.11228 3.06066 8.92155 3.13965 8.78091 3.28025L6.84141 5.21975C6.70081 5.3604 6.62182 5.55113 6.62182 5.75C6.62182 5.94887 6.70081 6.13961 6.84141 6.28025L12.5309 11.9698C12.6716 12.1104 12.8623 12.1893 13.0612 12.1893C13.26 12.1893 13.4508 12.1104 13.5914 11.9698Z' stroke='black' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

body.dark-theme .badge.moderator:before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8.56116 8L3.02391 13.5635C2.87708 13.7092 2.76054 13.8825 2.68102 14.0735C2.60149 14.2645 2.56055 14.4693 2.56055 14.6761C2.56055 14.883 2.60149 15.0878 2.68102 15.2788C2.76054 15.4697 2.87708 15.643 3.02391 15.7888C3.32044 16.0837 3.72167 16.2493 4.13991 16.2493C4.55815 16.2493 4.95938 16.0837 5.25591 15.7888L10.8112 10.25M13.5914 11.9698L15.5309 10.0303C15.6715 9.8896 15.7505 9.69887 15.7505 9.5C15.7505 9.30113 15.6715 9.1104 15.5309 8.96975L9.84141 3.28025C9.70076 3.13965 9.51003 3.06066 9.31116 3.06066C9.11228 3.06066 8.92155 3.13965 8.78091 3.28025L6.84141 5.21975C6.70081 5.3604 6.62182 5.55113 6.62182 5.75C6.62182 5.94887 6.70081 6.13961 6.84141 6.28025L12.5309 11.9698C12.6716 12.1104 12.8623 12.1893 13.0612 12.1893C13.26 12.1893 13.4508 12.1104 13.5914 11.9698Z' stroke='white' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

body.light-theme .badge.admin:before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.1716 14.6586C11.4956 14.6589 10.438 14.1567 8.99883 13.1518C7.56046 14.1571 6.50288 14.6595 5.82609 14.6591C4.73571 14.6591 4.63671 13.3531 5.5291 10.741C1.77357 8.1386 2.20056 6.83738 6.81007 6.83738H6.85567C7.56966 4.71854 8.28445 3.65913 9.00003 3.65913C9.71402 3.65913 10.4288 4.71854 11.1444 6.83738H11.19C15.7999 6.83738 16.2265 8.13841 12.4698 10.7405C13.3618 13.3533 13.2624 14.6593 12.1716 14.6586Z' stroke='black' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

body.dark-theme .badge.admin:before {
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.1716 14.6586C11.4956 14.6589 10.438 14.1567 8.99883 13.1518C7.56046 14.1571 6.50288 14.6595 5.82609 14.6591C4.73571 14.6591 4.63671 13.3531 5.5291 10.741C1.77357 8.1386 2.20056 6.83738 6.81007 6.83738H6.85567C7.56966 4.71854 8.28445 3.65913 9.00003 3.65913C9.71402 3.65913 10.4288 4.71854 11.1444 6.83738H11.19C15.7999 6.83738 16.2265 8.13841 12.4698 10.7405C13.3618 13.3533 13.2624 14.6593 12.1716 14.6586Z' stroke='white' stroke-opacity='0.5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.badge.default {
    background-color: var(--body-color-inverse);
    color: var(--body-color);
}
.badge.default:before {
    background-color: var(--body-color);
}

.badge.success {
    background-color: var(--badge-success-background-color);
    color: var(--badge-success-color);
}
.badge.success:before {
    background-color: var(--badge-success-color);
}

.badge.danger {
    background-color: var(--badge-danger-background-color);
    color: var(--badge-danger-color);
}
.badge.danger:before {
    background-color: var(--badge-danger-color);
}

.badge.info {
    background-color: var(--badge-info-background-color);
    color: var(--badge-info-color);
}
.badge.info:before {
    background-color: var(--badge-info-color);
}

.badge.primary {
    background-color: var(--badge-primary-background-color);
    color: var(--badge-info-color);
}
.badge.primary:before {
    background-color: var(--badge-primary-color);
}

.badge.warning {
    background-color: var(--badge-warning-background-color);
    color: var(--badge-warning-color);
}
.badge.warning:before {
    background-color: var(--badge-warning-color);
}

.mark-stars {
    line-height: 0;
    position: relative;
    width: 98px;
    height: 18px;
    background-position: left;
    background-size: cover;
    background-repeat: no-repeat;
}

body.light-theme .mark-stars {
    background-image: url("data:image/svg+xml,%3Csvg width='98' height='18' viewBox='0 0 98 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.66696 1.16957C9.54062 0.913571 9.27989 0.751495 8.9944 0.751495C8.70892 0.751495 8.44819 0.913571 8.32185 1.16957L6.18193 5.50558L1.39733 6.199C1.11466 6.23997 0.879794 6.43794 0.791575 6.7096C0.703355 6.98126 0.777098 7.27945 0.981771 7.47868L4.44898 10.8537L3.63145 15.6194C3.58318 15.9008 3.69885 16.1852 3.92982 16.353C4.16078 16.5208 4.46698 16.5429 4.71968 16.4101L8.99926 14.16L13.2685 16.4098C13.5212 16.5429 13.8276 16.521 14.0587 16.3532C14.2899 16.1854 14.4056 15.9009 14.3574 15.6194L13.5398 10.8537L17.007 7.47868C17.2117 7.27945 17.2855 6.98126 17.1972 6.7096C17.109 6.43794 16.8741 6.23997 16.5915 6.199L11.8069 5.50558L9.66696 1.16957Z' fill='%23E5E5E5'/%3E%3Cpath d='M29.667 1.16957C29.5406 0.913571 29.2799 0.751495 28.9944 0.751495C28.7089 0.751495 28.4482 0.913571 28.3219 1.16957L26.1819 5.50558L21.3973 6.199C21.1147 6.23997 20.8798 6.43794 20.7916 6.7096C20.7034 6.98126 20.7771 7.27945 20.9818 7.47868L24.449 10.8537L23.6315 15.6194C23.5832 15.9008 23.6989 16.1852 23.9298 16.353C24.1608 16.5208 24.467 16.5429 24.7197 16.4101L28.9993 14.16L33.2685 16.4098C33.5212 16.5429 33.8276 16.521 34.0587 16.3532C34.2899 16.1854 34.4056 15.9009 34.3574 15.6194L33.5398 10.8537L37.007 7.47868C37.2117 7.27945 37.2855 6.98126 37.1972 6.7096C37.109 6.43794 36.8741 6.23997 36.5915 6.199L31.8069 5.50558L29.667 1.16957Z' fill='%23E5E5E5'/%3E%3Cpath d='M49.667 1.16957C49.5406 0.913571 49.2799 0.751495 48.9944 0.751495C48.7089 0.751495 48.4482 0.913571 48.3219 1.16957L46.1819 5.50558L41.3973 6.199C41.1147 6.23997 40.8798 6.43794 40.7916 6.7096C40.7034 6.98126 40.7771 7.27945 40.9818 7.47868L44.449 10.8537L43.6315 15.6194C43.5832 15.9008 43.6989 16.1852 43.9298 16.353C44.1608 16.5208 44.467 16.5429 44.7197 16.4101L48.9993 14.16L53.2685 16.4098C53.5212 16.5429 53.8276 16.521 54.0587 16.3532C54.2899 16.1854 54.4056 15.9009 54.3574 15.6194L53.5398 10.8537L57.007 7.47868C57.2117 7.27945 57.2855 6.98126 57.1972 6.7096C57.109 6.43794 56.8741 6.23997 56.5915 6.199L51.8069 5.50558L49.667 1.16957Z' fill='%23E5E5E5'/%3E%3Cpath d='M69.667 1.16957C69.5406 0.913571 69.2799 0.751495 68.9944 0.751495C68.7089 0.751495 68.4482 0.913571 68.3219 1.16957L66.1819 5.50558L61.3973 6.199C61.1147 6.23997 60.8798 6.43794 60.7916 6.7096C60.7034 6.98126 60.7771 7.27945 60.9818 7.47868L64.449 10.8537L63.6315 15.6194C63.5832 15.9008 63.6989 16.1852 63.9298 16.353C64.1608 16.5208 64.467 16.5429 64.7197 16.4101L68.9993 14.16L73.2685 16.4098C73.5212 16.5429 73.8276 16.521 74.0587 16.3532C74.2899 16.1854 74.4056 15.9009 74.3574 15.6194L73.5398 10.8537L77.007 7.47868C77.2117 7.27945 77.2855 6.98126 77.1972 6.7096C77.109 6.43794 76.8741 6.23997 76.5915 6.199L71.8069 5.50558L69.667 1.16957Z' fill='%23E5E5E5'/%3E%3Cpath d='M89.667 1.16957C89.5406 0.913571 89.2799 0.751495 88.9944 0.751495C88.7089 0.751495 88.4482 0.913571 88.3219 1.16957L86.1819 5.50558L81.3973 6.199C81.1147 6.23997 80.8798 6.43794 80.7916 6.7096C80.7034 6.98126 80.7771 7.27945 80.9818 7.47868L84.449 10.8537L83.6315 15.6194C83.5832 15.9008 83.6989 16.1852 83.9298 16.353C84.1608 16.5208 84.467 16.5429 84.7197 16.4101L88.9993 14.16L93.2685 16.4098C93.5212 16.5429 93.8276 16.521 94.0587 16.3532C94.2899 16.1854 94.4056 15.9009 94.3574 15.6194L93.5398 10.8537L97.007 7.47868C97.2117 7.27945 97.2855 6.98126 97.1972 6.7096C97.109 6.43794 96.8741 6.23997 96.5915 6.199L91.8069 5.50558L89.667 1.16957Z' fill='%23E5E5E5'/%3E%3C/svg%3E%0A");
}

body.dark-theme .mark-stars {
    background-image: url("data:image/svg+xml,%3Csvg width='98' height='18' viewBox='0 0 98 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.66696 1.16957C9.54062 0.913571 9.27989 0.751495 8.9944 0.751495C8.70892 0.751495 8.44819 0.913571 8.32185 1.16957L6.18193 5.50558L1.39733 6.199C1.11466 6.23997 0.879794 6.43794 0.791575 6.7096C0.703355 6.98126 0.777098 7.27945 0.981771 7.47868L4.44898 10.8537L3.63145 15.6194C3.58318 15.9008 3.69885 16.1852 3.92982 16.353C4.16078 16.5208 4.46698 16.5429 4.71968 16.4101L8.99926 14.16L13.2685 16.4098C13.5212 16.5429 13.8276 16.521 14.0587 16.3532C14.2899 16.1854 14.4056 15.9009 14.3574 15.6194L13.5398 10.8537L17.007 7.47868C17.2117 7.27945 17.2855 6.98126 17.1972 6.7096C17.109 6.43794 16.8741 6.23997 16.5915 6.199L11.8069 5.50558L9.66696 1.16957Z' fill='%23585858'/%3E%3Cpath d='M29.667 1.16957C29.5406 0.913571 29.2799 0.751495 28.9944 0.751495C28.7089 0.751495 28.4482 0.913571 28.3219 1.16957L26.1819 5.50558L21.3973 6.199C21.1147 6.23997 20.8798 6.43794 20.7916 6.7096C20.7034 6.98126 20.7771 7.27945 20.9818 7.47868L24.449 10.8537L23.6315 15.6194C23.5832 15.9008 23.6989 16.1852 23.9298 16.353C24.1608 16.5208 24.467 16.5429 24.7197 16.4101L28.9993 14.16L33.2685 16.4098C33.5212 16.5429 33.8276 16.521 34.0587 16.3532C34.2899 16.1854 34.4056 15.9009 34.3574 15.6194L33.5398 10.8537L37.007 7.47868C37.2117 7.27945 37.2855 6.98126 37.1972 6.7096C37.109 6.43794 36.8741 6.23997 36.5915 6.199L31.8069 5.50558L29.667 1.16957Z' fill='%23585858'/%3E%3Cpath d='M49.667 1.16957C49.5406 0.913571 49.2799 0.751495 48.9944 0.751495C48.7089 0.751495 48.4482 0.913571 48.3219 1.16957L46.1819 5.50558L41.3973 6.199C41.1147 6.23997 40.8798 6.43794 40.7916 6.7096C40.7034 6.98126 40.7771 7.27945 40.9818 7.47868L44.449 10.8537L43.6315 15.6194C43.5832 15.9008 43.6989 16.1852 43.9298 16.353C44.1608 16.5208 44.467 16.5429 44.7197 16.4101L48.9993 14.16L53.2685 16.4098C53.5212 16.5429 53.8276 16.521 54.0587 16.3532C54.2899 16.1854 54.4056 15.9009 54.3574 15.6194L53.5398 10.8537L57.007 7.47868C57.2117 7.27945 57.2855 6.98126 57.1972 6.7096C57.109 6.43794 56.8741 6.23997 56.5915 6.199L51.8069 5.50558L49.667 1.16957Z' fill='%23585858'/%3E%3Cpath d='M69.667 1.16957C69.5406 0.913571 69.2799 0.751495 68.9944 0.751495C68.7089 0.751495 68.4482 0.913571 68.3219 1.16957L66.1819 5.50558L61.3973 6.199C61.1147 6.23997 60.8798 6.43794 60.7916 6.7096C60.7034 6.98126 60.7771 7.27945 60.9818 7.47868L64.449 10.8537L63.6315 15.6194C63.5832 15.9008 63.6989 16.1852 63.9298 16.353C64.1608 16.5208 64.467 16.5429 64.7197 16.4101L68.9993 14.16L73.2685 16.4098C73.5212 16.5429 73.8276 16.521 74.0587 16.3532C74.2899 16.1854 74.4056 15.9009 74.3574 15.6194L73.5398 10.8537L77.007 7.47868C77.2117 7.27945 77.2855 6.98126 77.1972 6.7096C77.109 6.43794 76.8741 6.23997 76.5915 6.199L71.8069 5.50558L69.667 1.16957Z' fill='%23585858'/%3E%3Cpath d='M89.667 1.16957C89.5406 0.913571 89.2799 0.751495 88.9944 0.751495C88.7089 0.751495 88.4482 0.913571 88.3219 1.16957L86.1819 5.50558L81.3973 6.199C81.1147 6.23997 80.8798 6.43794 80.7916 6.7096C80.7034 6.98126 80.7771 7.27945 80.9818 7.47868L84.449 10.8537L83.6315 15.6194C83.5832 15.9008 83.6989 16.1852 83.9298 16.353C84.1608 16.5208 84.467 16.5429 84.7197 16.4101L88.9993 14.16L93.2685 16.4098C93.5212 16.5429 93.8276 16.521 94.0587 16.3532C94.2899 16.1854 94.4056 15.9009 94.3574 15.6194L93.5398 10.8537L97.007 7.47868C97.2117 7.27945 97.2855 6.98126 97.1972 6.7096C97.109 6.43794 96.8741 6.23997 96.5915 6.199L91.8069 5.50558L89.667 1.16957Z' fill='%23585858'/%3E%3C/svg%3E%0A");
}

.mark-stars-active {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: left;
    background-size: cover;
    background-image: url("data:image/svg+xml,%3Csvg width='98' height='18' viewBox='0 0 98 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.66696 1.16957C9.54062 0.913571 9.27989 0.751495 8.9944 0.751495C8.70892 0.751495 8.44819 0.913571 8.32185 1.16957L6.18193 5.50558L1.39733 6.199C1.11466 6.23997 0.879794 6.43794 0.791575 6.7096C0.703355 6.98126 0.777098 7.27945 0.981771 7.47868L4.44898 10.8537L3.63145 15.6194C3.58318 15.9008 3.69885 16.1852 3.92982 16.353C4.16078 16.5208 4.46698 16.5429 4.71968 16.4101L8.99926 14.16L13.2685 16.4098C13.5212 16.5429 13.8276 16.521 14.0587 16.3532C14.2899 16.1854 14.4056 15.9009 14.3574 15.6194L13.5398 10.8537L17.007 7.47868C17.2117 7.27945 17.2855 6.98126 17.1972 6.7096C17.109 6.43794 16.8741 6.23997 16.5915 6.199L11.8069 5.50558L9.66696 1.16957Z' fill='%239747FF'/%3E%3Cpath d='M29.667 1.16957C29.5406 0.913571 29.2799 0.751495 28.9944 0.751495C28.7089 0.751495 28.4482 0.913571 28.3219 1.16957L26.1819 5.50558L21.3973 6.199C21.1147 6.23997 20.8798 6.43794 20.7916 6.7096C20.7034 6.98126 20.7771 7.27945 20.9818 7.47868L24.449 10.8537L23.6315 15.6194C23.5832 15.9008 23.6989 16.1852 23.9298 16.353C24.1608 16.5208 24.467 16.5429 24.7197 16.4101L28.9993 14.16L33.2685 16.4098C33.5212 16.5429 33.8276 16.521 34.0587 16.3532C34.2899 16.1854 34.4056 15.9009 34.3574 15.6194L33.5398 10.8537L37.007 7.47868C37.2117 7.27945 37.2855 6.98126 37.1972 6.7096C37.109 6.43794 36.8741 6.23997 36.5915 6.199L31.8069 5.50558L29.667 1.16957Z' fill='%239747FF'/%3E%3Cpath d='M49.667 1.16957C49.5406 0.913571 49.2799 0.751495 48.9944 0.751495C48.7089 0.751495 48.4482 0.913571 48.3219 1.16957L46.1819 5.50558L41.3973 6.199C41.1147 6.23997 40.8798 6.43794 40.7916 6.7096C40.7034 6.98126 40.7771 7.27945 40.9818 7.47868L44.449 10.8537L43.6315 15.6194C43.5832 15.9008 43.6989 16.1852 43.9298 16.353C44.1608 16.5208 44.467 16.5429 44.7197 16.4101L48.9993 14.16L53.2685 16.4098C53.5212 16.5429 53.8276 16.521 54.0587 16.3532C54.2899 16.1854 54.4056 15.9009 54.3574 15.6194L53.5398 10.8537L57.007 7.47868C57.2117 7.27945 57.2855 6.98126 57.1972 6.7096C57.109 6.43794 56.8741 6.23997 56.5915 6.199L51.8069 5.50558L49.667 1.16957Z' fill='%239747FF'/%3E%3Cpath d='M69.667 1.16957C69.5406 0.913571 69.2799 0.751495 68.9944 0.751495C68.7089 0.751495 68.4482 0.913571 68.3219 1.16957L66.1819 5.50558L61.3973 6.199C61.1147 6.23997 60.8798 6.43794 60.7916 6.7096C60.7034 6.98126 60.7771 7.27945 60.9818 7.47868L64.449 10.8537L63.6315 15.6194C63.5832 15.9008 63.6989 16.1852 63.9298 16.353C64.1608 16.5208 64.467 16.5429 64.7197 16.4101L68.9993 14.16L73.2685 16.4098C73.5212 16.5429 73.8276 16.521 74.0587 16.3532C74.2899 16.1854 74.4056 15.9009 74.3574 15.6194L73.5398 10.8537L77.007 7.47868C77.2117 7.27945 77.2855 6.98126 77.1972 6.7096C77.109 6.43794 76.8741 6.23997 76.5915 6.199L71.8069 5.50558L69.667 1.16957Z' fill='%239747FF'/%3E%3Cpath d='M89.667 1.16957C89.5406 0.913571 89.2799 0.751495 88.9944 0.751495C88.7089 0.751495 88.4482 0.913571 88.3219 1.16957L86.1819 5.50558L81.3973 6.199C81.1147 6.23997 80.8798 6.43794 80.7916 6.7096C80.7034 6.98126 80.7771 7.27945 80.9818 7.47868L84.449 10.8537L83.6315 15.6194C83.5832 15.9008 83.6989 16.1852 83.9298 16.353C84.1608 16.5208 84.467 16.5429 84.7197 16.4101L88.9993 14.16L93.2685 16.4098C93.5212 16.5429 93.8276 16.521 94.0587 16.3532C94.2899 16.1854 94.4056 15.9009 94.3574 15.6194L93.5398 10.8537L97.007 7.47868C97.2117 7.27945 97.2855 6.98126 97.1972 6.7096C97.109 6.43794 96.8741 6.23997 96.5915 6.199L91.8069 5.50558L89.667 1.16957Z' fill='%239747FF'/%3E%3C/svg%3E%0A");
}

.small-card {
    border-radius: 20px;
    border: 1px solid var(--form-control-border-color);
    box-shadow: none;
}

.small-card .card-body {
    padding: 10px !important;
}

.author-card img, .file-card img, .review-user-avatar {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 16px;
    background-color: var(--resource-cover-background-color);
}

.inline-nav {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--card-background-color);
    transition: var(--transition-duration) ease background-color;
    padding: 5px;
    border-radius: 24px;
    width: 100%;
    box-shadow: var(--card-shadow);
}

.inline-nav .inline-nav-item {
    display: flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    padding: 10.5px 20px;
    color: var(--btn-neutral-color);
    font-size: 16px;
    line-height: normal;
    border: 1px solid var(--form-control-border-color);
    transition: var(--transition-duration) ease all;
}

.inline-nav .inline-nav-item.active {
    border-color: var(--color-accent);
}

.btn.active {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: white !important;
}

.btn:not([class*="btn-outline-"]).active path[stroke] {
    stroke: white;
}

.btn:not([class*="btn-outline-"]).active path[fill] {
    fill: white;
}

.btn-outline-neutral.active {
    background-color: transparent !important;
    color: var(--body-color) !important;
}

.pagination {
    padding: 5px;
    display: flex;
    align-items: center;
    background-color: var(--card-background-color);
    transition: var(--transition-duration) ease background-color;
    border-radius: 24px;
}

.pagination .pagination-item + .pagination-item {
    margin-left: 6px;
}

.pagination .pagination-prev-item {
    margin-right: 12px;
}

.pagination .pagination-next-item {
    margin-left: 12px;
}

.pagination .pagination-item.active {
    background-color: var(--color-accent) !important;
    color: white !important;
}

.grecaptcha-badge {
    display: none !important;
}

.gallery-card {
    position: relative;
    overflow: hidden;
    border: 0;
    background-color: var(--resource-cover-background-color);
    cursor: pointer;
    aspect-ratio: 394 / 279;

    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    transition: var(--transition-duration) ease background-size;
}

.gallery-card:hover {
    background-size: 110%;
}

.gallery-card:active {
    background-size: 105%;
}

.gallery-card.has-description:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 87px;
    background: var(--background-gradient-vertical);
}

.gallery-card .gallery-item-description {
    display: flex;
    flex-direction: column;
    gap: 6px;

    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 1;
}

.swiper-carousel-mods img {
    width: 65px;
    height: 65px;
}

.fancybox__caption {
    text-align: center;
}

.resource-skin-render-wrapper {
    display: flex;
    user-select: none;
    pointer-events: none;
}

@media (min-width: 576px) {
    .resource-skin-render-wrapper {
        display: flex;
        user-select: auto;
        pointer-events: auto;
    }
}

.resource-skin-render {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.skin-card {
    overflow: hidden;
    isolation: isolate;
}

.hover-scale {
    transition: var(--transition-duration) ease all;
}
.hover-scale:hover {
    transform: scale(1.1);
}
.hover-scale:active {
    transform: scale(1.05);
}

.skin-card .card-body {
    padding: 13px;
}

.skin-card .skin-preview {
    margin-left: auto;
    margin-right: auto;
    aspect-ratio: 1/1;
    margin-top: 24px;
    transform: scale(1.4);
}

.skin-card .skin-render {
    transition: var(--transition-duration) ease all;
    margin-bottom: -68px;
    margin-top: -41px;
    background-repeat: no-repeat;
    background-size: 100%;
    aspect-ratio: 5 / 8;
    background-position: center;
}

.skin-card .skin-actions {
    border-radius: 20px;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--blured-background-color);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    padding: 10px;
    transition: var(--transition-duration) ease opacity;
}

.skin-card:hover .skin-render {
    background-size: 103.5%;
}

.skin-card:hover .skin-actions {
    opacity: 1;
}

hr {
    margin-top: var(--hr-gutter-y);
    margin-bottom: var(--hr-gutter-y);
    border-top: 1px solid var(--hr-border-color);
}

.selector-wrapper {
    display: block;
    position: relative;
}

.selector-wrapper .btn-selector {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: space-between;
    padding: 6px 10px 6px 6px;
    height: 40px;
    max-width: 300px;
    width: 100%;
    color: var(--body-color-neutral) !important;
}

.dropdown-arrow {
    transition: var(--transition-duration) ease transform;
}

[data-bs-toggle="dropdown"].show .dropdown-arrow {
    transform: rotate(-180deg);
}

[data-bs-toggle="dropdown"].show .dropdown-arrow path[stroke] {
    stroke: var(--body-color);
}

.dropdown-animate:not([data-bs-toggle="hover"]) .dropdown-menu.show {
    animation: show-dropdown var(--transition-duration) ease forwards;
    pointer-events: auto;
}

.selector-wrapper .dropdown-menu {
    width: 100%;
    max-width: 271px;
    top: 3px !important;
    border-radius: 24px;
    border-color: var(--btn-outline-neutral-border-color);
    box-shadow: var(--dropdown-menu-box-shadow);
    padding: 3px;
    transition: var(--transition-duration) ease all;
    background-color: var(--selector-dropdown-menu-background-color);
}

.selector-wrapper .selector-values {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    gap: 3px;
    overflow-x: auto;
    max-width: calc(100% - 30px);
    scrollbar-width: none;
}

.selector-values:not(.has-values) {
    padding: 5px 10px;
}

.selector-wrapper .selector-values::-webkit-scrollbar {
    display: none;
}

.selector-wrapper .selector-values .selector-value {
    padding: 5px 10px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    gap: 3px;
    justify-content: center;
    color: var(--body-color);
    font-size: 16px;
    line-height: 19px;
    border: 1px solid var(--btn-outline-neutral-border-color);
    transition: var(--transition-duration) ease all;
}

.selector-wrapper .selector-values .selector-value svg {
    flex-shrink: 0;
}

.selector-wrapper .selector-items {
    display: flex;
    flex-direction: column;
    gap: 3px;
    list-style: none;
    margin-bottom: 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
 }

.selector-wrapper .selector-items .selector-item {
    cursor: pointer;
    padding: 11px 16px;
    position: relative;
    color: var(--body-color-neutral);
    font-size: 16px;
    line-height: 19px;
    border-radius: 20px;
    transition: var(--transition-duration) ease all;
    border: 1px solid transparent;
}

.selector-wrapper .selector-items .selector-item.selector-item-sm {
    padding: 7px 7px;
}

.selector-wrapper .selector-items .selector-item:after {
    content: '';
    position: absolute;
    width: 18px;
    height: 19px;
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
    transition: var(--transition-duration) ease opacity;
    opacity: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='19' viewBox='0 0 18 19' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_173_2331)'%3E%3Ccircle cx='9' cy='9.5' r='9' fill='%239747FF'/%3E%3Cpath d='M4 8.75L7.84615 12.5L14 6.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_173_2331'%3E%3Crect width='18' height='18' fill='white' transform='translate(0 0.5)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A");
}

.selector-wrapper .selector-items .selector-item:hover {
    border-color: var(--body-color-neutral);
    color: var(--body-color);
}

.selector-wrapper .selector-items .selector-item:active {
    opacity: .5;
}

.selector-wrapper .selector-items .selector-input:checked + .selector-item {
    border-color: var(--color-accent);
    color: var(--body-color);
}

.selector-wrapper .selector-items .selector-input:checked + .selector-item:after {
    opacity: 1;
}

@keyframes show-dropdown {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes hide-dropdown {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

.badge-selector {
    padding: 7px 8px;
    display: flex;
    align-items: center;
    gap: 3px;
    border-radius: 20px;
    background: var(--btn-neutral-background-color);
    transition: var(--transition-duration) ease all;
    color: var(--body-color-neutral);
    font-size: 14px;
    line-height: 17px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.badge-selector:active {
    opacity: .5;
}

input:checked + label > .badge-selector {
    background: var(--color-accent);
    color: white;
}

input:checked + label > .badge-selector path[stroke] {
    stroke: white;
}
input:checked + label > .badge-selector path[fill] {
    fill: white;
}

.collapse-arrow {
    transition: var(--transition-duration) ease all;
}

:not(.collapsed)[data-bs-toggle="collapse"] .collapse-arrow {
    transform: rotate(-180deg);
}

.form-check {
    margin-bottom: 0;
    min-height: auto;
}

.form-check-input {
    --bs-form-check-bg: var(--btn-neutral-background-color);

    width: 20px;
    height: 20px;
    border-radius: 8px !important;
    border: 1px solid transparent;
    transition: var(--transition-duration) ease all;
}

.form-check .form-check-input {
    margin-left: -30px;
    margin-top: -1px;
}

.form-check {
    padding-left: 30px;
}

label {
    display: block;
}

.blob-input-preview {
    display: flex;
    align-items: center;
    gap: 6px;
}

.blob-input-preview img {
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display: block;
}

.blob-input-preview span {
    color: var(--btn-close-color);
    transition: var(--transition-duration) ease color;
}

.blob-input-preview div {
    display: none;
    cursor: pointer;
}

.blob-input-preview:hover div {
    display: block;
}

.blob-input-preview:hover img {
    display: none;
}

.blob-input-preview div:hover path {
    stroke: var(--body-color);
}

.form-check-label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 14px;
    line-height: 17px;
    color: var(--body-color);
    transition: var(--transition-duration) ease all;
}

.form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.form-check-input:focus {
    box-shadow: none;
}

.form-check-input:checked[type="checkbox"] {
    --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='20' height='20' rx='8' fill='%239747FF'/%3E%3Cpath d='M5.5 10.0634L8.28787 12.9103C8.40503 13.0299 8.59497 13.0299 8.71213 12.9103L14.5 7' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
}

.form-check-input:hover {
    filter: none;
    background-color: var(--btn-outline-neutral-border-color);
}

.form-check-input:active {
    filter: none;
    border-color: var(--color-accent);
}

.form-check-input:checked:hover {
    filter: none;
    opacity: .75;
    background-color: var(--color-accent);
}

.form-check-input:checked:active {
    filter: none;
    opacity: .5;
    background-color: var(--color-accent);
}

.resource-styling-switch {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    background-color: var(--btn-neutral-background-color);
    border-radius: 20px;
    border: 1px solid transparent;
}

.resource-styling-switch .resource-styling-switch-item {
    padding: 8px;
    border-radius: 50%;
    line-height: 0;
    background-color: transparent;
    opacity: .5;
    transition: var(--transition-duration) ease all;
    cursor: pointer;
}

.resource-styling-switch .resource-styling-switch-item:hover {
    opacity: 1;
}

.resource-styling-switch .resource-styling-switch-item:active {
    opacity: .75;
}

.resource-styling-switch .resource-styling-switch-item.active {
    opacity: 1;
    background-color: var(--color-accent);
}

.resource-styling-switch .resource-styling-switch-item.active [stroke] {
    stroke: white;
}

.resource-logo-md {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 12px;
    image-rendering: pixelated;
    background-color: var(--resource-cover-background-color);
}

.resource-logo-xs {
    width: 30px;
    height: 30px;
    object-fit: cover;
    user-select: none;
    border-radius: 12px;
    image-rendering: pixelated;
    background-color: var(--resource-cover-background-color);
}

.resource-logo-sm {
    width: 50px;
    height: 50px;
    object-fit: cover;
    user-select: none;
    border-radius: 16px;
    image-rendering: pixelated;
    background-color: var(--resource-cover-background-color);
}

.sidebar-filters-toggler {
    transition: var(--transition-duration) ease all;
}

.sidebar-filters-hidden {
    transform: rotate(180deg);
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    transition: var(--transition-duration) ease all;
    background-color: var(--header-background-color);
    border-bottom: 1px solid var(--header-border-bottom-color);
    box-shadow: var(--card-shadow);
    padding: 21px 0;
    z-index: 9999;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
}

.logo img {
    width: 33px;
    height: 33px;
}

.header-nav {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
}

.header-nav li > div > a {
    transition: var(--transition-duration) ease all;
    cursor: pointer;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--btn-neutral-color) !important;
    font-size: 15px;
    line-height: 17px;
}

.header-nav .dropdown-menu {
    width: 805px;
    max-width: 100vw;
    left: 0 !important;
    padding: 20px;
    border-radius: 24px;
    border-color: var(--form-control-border-color);
    background-color: var(--body-background-color);
    top: 31px !important;
    box-shadow: var(--dropdown-menu-box-shadow);
}

.category-card {
    position: relative;
    z-index: 1;
    border: 0;
    aspect-ratio: 247 / 145;
    overflow: hidden;
    cursor: pointer;
    transition: var(--transition-duration) ease all;
}

.category-card-big {
    aspect-ratio: 52 / 43;
}

.category-card img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    width: 97.17%;
    object-fit: cover;
    object-position: right bottom;
    transition: var(--transition-duration) ease all;
}

.category-card-big img {
    width: 87.82%;
}

.category-card:hover img {
    transform: scale(1.1) rotate(3deg);
}

.category-card:active img {
    transform: scale(1.05) rotate(1deg);
}

.category-card .card-body {
    padding: 15px !important;
}

.resource-description h1 {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--resource-description-h1-border-bottom-color);
}

.resource-description h2 {
    font-size: clamp(20px, calc(20px + .167vw), 22px);
    line-height: clamp(24px, calc(24px + .167vw), 26px);
}

.resource-description h3 {
    font-size: clamp(19px, calc(19px + .167vw), 21px);
    line-height: clamp(23px, calc(23px + .167vw), 25px);
}

.resource-description h4 {
    font-size: clamp(18px, calc(18px + .167vw), 20px);
    line-height: clamp(22px, calc(22px + .167vw), 24px);
}

.resource-description h5 {
    font-size: clamp(18px, calc(18px + .083vw), 19px);
    line-height: clamp(22px, calc(22px + .083vw), 23px);
}

.resource-description h6 {
    font-size: 18px;
    line-height: 22px;
}

.resource-description h1,
.resource-description h2,
.resource-description h3,
.resource-description h4,
.resource-description h5,
.resource-description h6 {
    margin-bottom: 24px;
    font-weight: 500;
}

.resource-description * + h1 {
    margin-top: 48px;
}

.resource-description * + h2,
.resource-description * + h3 {
    margin-top: 36px;
}

.resource-description * + h4,
.resource-description * + h5,
.resource-description * + h6 {
    margin-top: 12px;
}

.resource-description p {
    color: var(--body-color-muted);
    margin-bottom: 12px;
}

.resource-description ul {
    color: var(--body-color-muted);
    transition: var(--transition-duration) ease color;
    font-size: clamp(14px, calc(14px + 0.333vw), 18px);
    line-height: clamp(18px, calc(18px + 0.333vw), 24px);
    margin-bottom: 24px;
}

.resource-description a {
    color: #4887CB;
    text-decoration: underline;
    transition: var(--transition-duration);
    font-size: clamp(14px, calc(14px + 0.333vw), 18px);
    line-height: clamp(18px, calc(18px + 0.333vw), 24px);
}

.resource-description a:hover {
    color: #0066FE;
}

.resource-description img {
    height: auto;
}

.resource-description iframe, .resource-description video, .resource-description img {
    border-radius: 20px;
}

.resource-description * {
    max-width: 100%;
}

.resource-description strong,
.resource-description b {
    font-weight: 600;
}

.resource-description > :first-child {
    margin-block-start: 0;
}

.resource-description > :last-child {
    margin-block-end: 0;
}

.resource-description hr {
    display: none;
}

.oc-flash-message {
    z-index: 9999999999;
}

.review-progress-bar {
    height: 3px !important;
    border-radius: 6px;
    width: 100%;
    min-width: 150px;
    background-color: var(--progress-background-color);
    transition: .2s ease all;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.review-progress-bar .review-progress-bar-progress {
    background-color: rgb(255, 153, 0);
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    width: 0;
    transition: .2s ease all;
    border-radius: 6px;
}

.mark-selectable {
    display: flex;
    align-items: center;
    flex-flow: row-reverse;
}

.mark-selectable svg {
    cursor: pointer;
}

.mark-selectable-item path {
    transition: none;
}

.mark-selectable-item:hover path , .mark-selectable-item.active path,
.mark-selectable-item:hover ~ .mark-selectable-item path, .mark-selectable-item.active ~ .mark-selectable-item path,
.mark-selectable-item-input:checked ~ .mark-selectable-item path,
.mark-selectable-item-input:checked + .mark-selectable-item path {
    fill: #FF9900;
    fill-opacity: 1;
}

[data-validate-for] {
    color: rgb(255, 77, 77);
    font-size: 14px;
    line-height: 17px;
    margin-top: 4px;
}

.resource-review:not(.resource-review-reply) + .resource-review:not(.resource-review-reply) {
    margin-top: 48px;
}

.resource-review.resource-review-reply + .resource-review.resource-review-reply {
    margin-top: 4px;
}

.resource-review:not(.resource-review-reply) + .resource-review.resource-review-reply {
    margin-top: 14px;
}

@media (min-width: 768px) {
    .resource-review.resource-review-reply {
        margin-left: 52px;
    }
}

.resource-review .review-text {
    margin-bottom: 16px;
    color: var(--body-color);
    cursor: pointer;
    width: fit-content;
}

.resource-review {
    padding: 10px;
    transition: .2s ease all;
    border-radius: 24px;
}

.resource-review:hover, .resource-review:has(.answer-form.active) {
    background-color: var(--body-background-color);
}

.resource-review .answer-form {
    display: none;
    margin-top: 12px;
}

.resource-review .answer-form.active {
    display: block;
}

.resource-review .review-mark-actions {
    padding: 6px 8px;
    border-radius: 999px;
    background-color: rgba(137, 182, 193, .1);
    display: flex;
    align-items: center;
    gap: 10px;
}

.resource-review .review-mark-actions.disabled {
    cursor: not-allowed;
}

.resource-review .review-mark-actions:not(.disabled) .review-mark-action {
    cursor: pointer;
}

.resource-review .review-mark-actions:not(.disabled) .review-mark-action:hover path {
    stroke-opacity: 1;
}

.auth-wrapper {
    flex-shrink: 0;
    cursor: pointer;
}

.auth-offer {
    border-radius: 46px;
    position: relative;
    overflow: hidden;
    max-width: 372px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    z-index: 1;
}

.auth-offer .card-body {
    padding: 30px;
}

.auth-offer:before,
.auth-offer:after {
    content: '';
    position: absolute;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
}

.auth-offer:after {
    background-image: url("data:image/svg+xml,%3Csvg width='159' height='121' viewBox='0 0 159 121' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='54.5' cy='104.5' r='104.5' fill='url(%23paint0_radial_2644_53913)'/%3E%3Cdefs%3E%3CradialGradient id='paint0_radial_2644_53913' cx='0' cy='0' r='1' gradientUnits='userSpaceOnUse' gradientTransform='translate(54.5 104.5) rotate(90) scale(104.5)'%3E%3Cstop stop-color='%23FFBE3D' stop-opacity='0.25'/%3E%3Cstop offset='0.57' stop-color='%23FFBE3D' stop-opacity='0.17'/%3E%3Cstop offset='1' stop-color='%23FFBE3D' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3C/svg%3E%0A");
    width: 159px;
    height: 121px;
    bottom: 0;
    left: 0;
}

.auth-offer:before {
    top: 0;
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='147' height='274' viewBox='0 0 147 274' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.25' d='M155.498 45.8256C159.521 43.5029 164.478 43.5029 168.501 45.8256L216.059 73.2829C220.082 75.6056 222.56 79.8981 222.56 84.5435V139.458C222.56 144.103 220.082 148.396 216.059 150.719L168.501 178.176C164.478 180.499 159.521 180.499 155.498 178.176L107.941 150.719C103.918 148.396 101.44 144.103 101.44 139.458V84.5435C101.44 79.8981 103.918 75.6056 107.941 73.2829L155.498 45.8256Z' stroke='%23FFBE3D' stroke-width='8.10002'/%3E%3Cpath opacity='0.1' d='M154.637 -4.29451C159.061 -6.8528 164.514 -6.8528 168.938 -4.29451L258.768 47.6589C263.182 50.2115 265.9 54.9233 265.9 60.0218V163.98C265.9 169.078 263.182 173.79 258.768 176.343L168.938 228.296C164.514 230.854 159.061 230.854 154.637 228.296L64.8067 176.343C60.3932 173.79 57.6751 169.078 57.6751 163.98V60.0218C57.6751 54.9233 60.3932 50.2115 64.8067 47.6589L154.637 -4.29451Z' stroke='%23FFBE3D' stroke-width='5.54212'/%3E%3Cpath opacity='0.03' d='M153.999 -43.7742C158.817 -46.5597 164.756 -46.5597 169.575 -43.7742L292.634 27.3675C297.444 30.1483 300.406 35.2828 300.406 40.8389V183.161C300.406 188.717 297.444 193.852 292.634 196.633L169.575 267.774C164.756 270.56 158.817 270.56 153.999 267.774L30.94 196.633C26.1299 193.852 23.1674 188.717 23.1674 183.161V40.8389C23.1674 35.2828 26.1299 30.1483 30.94 27.3675L153.999 -43.7742Z' stroke='%23FFBE3D' stroke-width='2.98422'/%3E%3C/svg%3E%0A");
    width: 147px;
    height: 274px;
}

.easyid-btn {
    border: 1px solid black;
    background: black;
    font-size: 15px;
    display: flex;
    padding: 13px 16px;
    align-items: center;
    text-align: center;
    color: white !important;
    gap: 15px;
    justify-content: center;
    border-radius: 999px;
    transition: .2s ease all;
}

.easyid-btn:hover {
    opacity: .75;
}

.easyid-btn:active {
    opacity: .5;
}

.form-no-auth {
    position: relative;
    border-radius: 24px;
}

.form-no-auth:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
    background: rgba(255, 255, 255, .35);
}

.form-no-auth .auth-offer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.dragscroll {
    cursor: grab;
}

.dragscroll:active {
    cursor: grabbing;
}

.inline-action-buttons {
    padding: 3px;
    border-radius: 22px;
    background: var(--btn-neutral-background-color);
    transition: var(--transition-duration) ease background;
    display: flex;
    align-items: center;
    gap: 3px;
}

.inline-action-buttons > * {
    border-radius: 20px;
}

.resource-skin-render-actions {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.author-stat-card {
    border-radius: 12px;
    border: 1px solid var(--btn-outline-neutral-border-color);
    transition: var(--transition-duration) ease all;
}

.author-stat-card .card-body {
    padding: 7px 10px !important;
}

img {
    user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    pointer-events: none;
}

.font-family-wavefont.author-stat-chart {
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 7%;
    horiz-align: center;
    vertical-align: middle;
    font-weight: 500;
    color: var(--body-color);
    transition: var(--transition-duration) ease all;
}

#download-ads {
    margin-top: 96px;
}

.footer {
    padding: 0;
    background: transparent;
    z-index: 5;
    position: relative;
    margin-top: 160px;
}

.footer-main {
    background: var(--footer-main-background-color);
    transition: var(--transition-duration) ease all;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    padding: 24px 0;
}

@media (min-width: 576px) {
    .footer {
        margin-top: 256px;
    }

    .footer-main {
        padding: 30px 0;
        margin-left: 15px;
        margin-right: 15px;
        border-top-left-radius: 36px;
        border-top-right-radius: 36px;
    }
}

@media (min-width: 1200px) {
    .footer-main {
        padding: 48px 0;
        margin-left: 24px;
        margin-right: 24px;
    }
}

.selectable {
    cursor: pointer;
    transition: var(--transition-duration) ease all;
}

.game-version-card {
    height: calc(100% - 12px);
    margin-bottom: 12px;
    border-radius: 20px;
    border: 1px solid var(--card-border-color);
    box-shadow: none;
}

.game-version-card .card-body {
    padding: 20px !important;
}

.game-version-card-big .card-body {
    padding: 20px 15px !important;
    text-align: center;
}

input[type="radio"]:checked ~ label .selectable {
    border-color: var(--color-accent) !important;
}

.selectable:before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='18' viewBox='0 0 19 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='9.66602' cy='9' r='9' fill='%239747FF'/%3E%3Cpath d='M5.16602 9L8.29645 12.5L14.166 5.5' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
    top: 10px;
    right: 10px;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-duration) ease opacity;
}

input[type="radio"]:checked ~ label .selectable:before {
    opacity: 1;
    visibility: visible;
}

.chart-card {
    border-radius: 20px;
    box-shadow: none;
    background-color: var(--btn-neutral-background-color);
}

.chart-card .card-body {
    padding: 20px !important;
}

table {
    width: 100%;
}

table thead {
    border-bottom: 1px solid var(--hr-border-color);
}

table th {
    padding: 0 18px 18px 0;
    font-size: 16px;
    color: var(--btn-neutral-color);
    font-weight: 400;
    gap: 6px;
    transition: var(--transition-duration) ease all;
}

table th:last-child {
    padding-right: 0;
}

table.sortable th {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    cursor: pointer;
}

.table-responsive table {
    white-space: nowrap;
}

table td {
    padding: 9px 18px;
}

table td:first-child {
    padding-left: 0;
    padding-top: 18px;
}

table td:last-child {
    padding-right: 0;
    padding-bottom: 0;
}

table.sortable.sticky thead th {
    position: sticky;
    top: 155px;
    z-index: 1;
}

table.sortable th[aria-sort] {
    font-weight: 500;
    color: var(--body-color);
}

table.sortable th[aria-sort] svg {
    visibility: visible;
    vertical-align: sub;
}

table.sortable th[aria-sort="ascending"] svg {
    transform: rotate(-180deg);
}

.show-when {
    display: none;
}

table.sortable th:not[aria-sort] .show-when.desc {
    display: inline-block;
}

table.sortable th[aria-sort="ascending"] .show-when.asc {
    display: inline-block;
}

table.sortable th[aria-sort="descending"] .show-when.desc {
    display: inline-block;
}

.rating-scale-bar {
    --rating-max: 5;

    display: flex;
    align-items: center;
    gap: 0;
    position: relative;
    width: 100%;
}

.rating-scale-bar:not(.without-rating):after {
    content: '';
    width: 14px;
    height: 14px;
    cursor: pointer;
    border-radius: 50%;
    border: 2px solid var(--card-background-color);
    transition: var(--transition-duration) ease all;
    position: absolute;
    z-index: 1;
    left: calc(var(--rating) / var(--rating-max) * 100%);
    top: 50%;
    transform: translateY(-50%) translateX(-7px);
}

.rating-scale-bar.without-rating .rating-scale-item {
    width: 100%;
    background-color: var(--rating-scale-item-without-rating-background-color);
}

.rating-scale-bar.success:after {
    background-color: var(--color-success);
}
.rating-scale-bar.warning:after {
    background-color: var(--color-warning);
}
.rating-scale-bar.danger:after {
    background-color: var(--color-danger);
}

.rating-scale-item {
    cursor: pointer;
    border-radius: 13px;
    height: 8px;
    border: 1px solid var(--card-background-color);
    transition: var(--transition-duration) ease all;
}

.rating-scale-item:hover {
    transform: scale(1.25);
}

.rating-scale-bar:has(.rating-scale-item.active:hover):after {
    transform: translateY(-50%) translateX(-7px) scale(1.25);
}

.rating-scale-item.danger {
    background-color: var(--color-danger);
    width: 30%;
}
.rating-scale-item.warning {
    background-color: var(--color-warning);
    width: 50%;
}
.rating-scale-item.success {
    background-color: var(--color-success);
    width: 20%;
}

.tab-cards {
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 3px;
    transition: var(--transition-duration) ease all;
    background-color: var(--card-background-color);
    border-radius: 24px;
    flex-wrap: wrap;
}

.tab-personage-category-card {
    transition: var(--transition-duration) ease all;
    background-color: transparent;
    border-radius: 21px;
    min-height: 117px;
    aspect-ratio: 287/117;
    padding: 15px 20px;
    opacity: .5;
    position: relative;
    width: 100%;
}

.tab-personage-category-card.active {
    opacity: 1;
    background-color: var(--tab-personage-item-background-color);
}

.tab-personage-category-card > img {
    position: absolute;
    bottom: 0;
    right: 6px;
}

.tab-personage-category-card:not(.active):hover {
    opacity: .75;
    background-color: var(--tab-personage-item-background-color);
}

.tab-personage-category-card:not(.active):active {
    opacity: .5;
    background-color: var(--tab-personage-item-background-color);
}

@media (min-width: 768px) {
    .tab-personage-category-card {
        width: auto;
    }
}

.header-search-wrapper .header-search-results-wrapper {
    --max-height: calc(100vh - 22px);

    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    border-radius: 30px;
    padding: 74px 20px 20px;
    visibility: hidden;
    opacity: 0;
    transition: var(--transition-duration) ease opacity;
    max-height: var(--max-height);
    min-height: 540px;
    overflow: hidden;
}

.header-search-results-wrapper .header-search-results {
    max-height: calc(100vh - 116px);
    overflow-y: auto;
}

.header-search-results-wrapper:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 22px;
    background: linear-gradient(180deg,rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

.header-search-wrapper .header-search-results-wrapper:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--body-blur-background-color);
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-duration) ease all;
}

.header-search-wrapper > .form-control:focus ~ .header-search-results-wrapper {
    opacity: 1 !important;
    visibility: visible;
    background: var(--card-background-color);
}

.header-search-wrapper > .form-control:focus ~ .header-search-results-wrapper:before {
    opacity: 1 !important;
    visibility: visible;
}

.header-search-wrapper > .form-control {
    z-index: 1;
    position: relative;
}

.oc-progress-bar {
    background: #9747FF !important;
    z-index: 99999;
}

.modal {
    --bs-modal-border-radius: 40px;
    --bs-modal-padding: 30px;
    --bs-modal-width: 648px;

    z-index: 99999;
}

.modal .modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    padding: 11px;
    margin: 0;
    border: 1px solid var(--btn-close-border-color);
    transition: .2s ease all;
    outline: none;
    background: transparent;
    border-radius: 50%;
    line-height: 0 !important;
    opacity: 1;
    z-index: 1;
}

.modal-backdrop {
    z-index: 99998;
}

.modal .modal-close:hover {
    --btn-close-color: var(--body-color);
    --btn-close-border-color: var(--body-color);
}

.modal .modal-close:active {
    opacity: .5;
}