.panel:has(comments-section) .sort-toggle {
    background: #0003;
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 90px;
    gap: 5px;
    cursor: pointer;
    justify-content: flex-end;
}
.panel:has(comments-section) .sort-toggle svg {
    height: 20px;
}
comments-section {
    width: 100%;
}


.comment-outer {
    margin-top: 25px;
}
.comment-outer.replies-opened {
    margin-bottom: 30px;
}
.comment-outer.replies-opened .view-replies svg {
    transform: rotate(-180deg) translateY(1px);
}

.comment-outer .comment-replies {
    opacity: 0;
    max-height: 0px;
    pointer-events: none;
    transition: all 0.2s ease;
}
@keyframes open {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
}
.comment-outer.replies-opened .comment-replies {
    max-height: var(--reply-height);
    opacity: 1;
    animation: open 0.3s ease;
    pointer-events: all;
}
.comment-reply {
    padding-top: 8px;
    padding-left: 12px;
}
.comment-inner {
    position: relative;
}
.comment-inner.pinned:after, .comment-inner.pinned:before {
    content: "";
    position: absolute;
    --offset: -12px;
    border-radius: var(--border-radius);
    top: var(--offset);
    left: var(--offset);
    width: calc(100% + (var(--offset)*(-2)));
    height: calc(100% + 20px);
    pointer-events: none;
}
.comment-inner.pinned:before {
    border: 1px solid var(--col-sat-3);
    mask-image: linear-gradient(to bottom right, #fff, #fff0 50%);
}
.comment-inner.pinned:after {
    background: color-mix(in srgb, var(--col-sat-1) 20%, transparent);
    box-shadow: 0px 0px 40px inset var(--col-sat-2);
    z-index: -1;
    mask-image: linear-gradient(-20deg, #fff0 40%, #fff);
}
.comment .name {
    display: flex;
    align-items: center;
}
.comment .name .pin {
    margin-left: auto;
    transform: rotate(45deg);
}
.comment .name .pin, .comment .name .pin * {
    height: 20px;
    width: 20px;
    stroke-width: 1px;
}
.comment .name > div {
    display: flex;
    align-items: center;
}
.comment .name > div .role-badge {
    margin-left: 5px;
}
.comment .name h1 {
    font-size: 22px;
    font-weight: 600;
    margin-left: 10px;
}
.comment .name h3 {
    font-weight: 300;
    margin-left: 10px;
}
.comment .name > img {
    height: 32px;
    border-radius: 200px;

}
.comment .content {
    margin-top: 6px;
    font-size: 16px;
}
.comment .content,
.comment .content p {
    font-weight: 300 !important;
}
.comment .content * {
    display: inline;
}

.comment .content img {
    width: 60%;
}
.comment .comment-toolbar .right {
    margin-left: auto;
}
.comment .comment-toolbar {
    margin-top: 5px;
    display: flex;
    align-items: center;
    margin-left: -8px;
    margin-right: -8px;
}
.comment .comment-toolbar > * {
    display: flex;
    gap: 2px;
    align-items: center;
    opacity: 0.6;

    padding: 5px;
    padding-right: 12px;
    padding-left: 11px;

    margin-left: -3px;
    border-radius: 900px;
}


.comment .comment-toolbar > .view-replies {
    padding-left: 5px;
    opacity: 1;
}
.comment .comment-toolbar > *:not(.view-replies) svg {
    margin-right: 3px;
}
.comment .comment-toolbar .view-replies svg {
    transition: all 0.2s ease;
}

.comment .comment-toolbar > *:hover {
    background: #fff2;
}

.comment .comment-toolbar svg {
    width: 20px;
}

.comment .content, .comment .content * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word;
}
.comment-input {
    display: flex;
    align-items: stretch;
    border-radius: 25px;
    overflow: hidden;
}
.comment-input .input {
    border-radius: 0px;
    margin-right: 2px;
    resize: vertical;
    background: #0004;
}
.comment-input .button {
    display: flex;
    align-items: center;
    border-radius: 0px;
    padding-left: 12px;
    padding-right: 16px;
    background-color: var(--col-sat-1);
}
.comment-input .button svg {
    width: 20px;
    height: 20px;
}

.comment-input textarea {
    flex: 1;
    min-height: 44px;
}

.comment .comment-toolbar > *.active {
    background: #fff1;
    opacity: 1;
}
.comment .comment-toolbar > *.active svg {
    fill: white;
}
.graph-outer {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
    cursor: grab;
    user-select: none;
    background: var(--col-d2);
    border-radius: var(--border-radius);
    border: 1px solid var(--col-l3);
    svg {
        z-index: 24;
        position: relative;
    }
}

.graph-outer.dragging {
    cursor: grabbing;
}

.graph-inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
}

/* sticky y axis — sits above graph-inner, never pans */
.graph-y-axis {
    position: absolute;
    top: 0;
    left: 0;
    height: 300px;
    width: 44px; /* matches PAD_L */
    pointer-events: none;
    z-index: 2;
    background: color-mix(in srgb, var(--col-d1) 20%, transparent);
}

.graph-tooltip {
    position: absolute;
    display: none;
    pointer-events: none;
    background: color-mix(in srgb, var(--col-l2) 50%, transparent);

    border: 1px solid color-mix(in srgb, var(--col-l3) 50%, transparent);
    border-radius: calc(var(--border-radius) / 2);
    backdrop-filter: blur(3px);
    padding: 6px 10px;
    color: var(--col-text-l1);
    font-size: 13px;
    z-index: 10;
    white-space: nowrap;
    bottom: 10px;
    right: 10px;
    text-align: right;
    min-width: 200px;
}

.graph-tooltip.visible {
    display: block;
}

.graph-x-axis {
    position: absolute;
    height: 20px;
    overflow: hidden;
    margin-top: 4px;
    bottom: 0;
    width: 100%;
}

.graph-x-axis-inner {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    z-index: 9;
}

.graph-x-label {
    position: absolute;
    font-size: 11px;
    color: var(--col-text-l2);
    transform: translateX(-50%);
    white-space: nowrap;
}

.graph-grid-line {
    stroke: var(--col-d0);
    stroke-width: 0.5;
}

.graph-y-label {
    font-size: 10px;
    fill: var(--col-text-l3);
}

.graph-line {
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    fill: none;
}

.graph-event-marker {
    position: absolute;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
}

.graph-event-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(to bottom, var(--col-text-l2), #fff2);
    opacity: 0.2;

    &.hovered {
        opacity: 1;
        z-index: 92;
        box-shadow: 0px 0px 0px 1px #fff5;
    }
}

.graph-event-dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--col-text-l2);
    transform: translate(-50%, 0);
}

.graph-event-label {
    position: absolute;
    top: 12px;
    left: 0;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--col-text-l2);
    white-space: nowrap;
    padding: 2px 6px;
    background: var(--col-l2);
    border: 1px solid var(--col-l3);
    border-radius: calc(var(--border-radius) / 2);
    z-index: 999;
}


.graph-crosshair {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 3;
}

.graph-crosshair.visible {
    display: block;
}

.graph-crosshair-line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: var(--col-text-l3);
    opacity: 0.5;
    z-index: 2;
    transform: translateX(0px);
}

.graph-crosshair-dot {
    position: absolute;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--col-text-l1);
    border: 2px solid var(--col-d1);
    transform: translate(-50%, -50%);

    z-index: 3;

    stroke: #fff3;
    stroke-width: 0.5;
}


.graph-event-label {
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.graph-event-marker.label-visible .graph-event-label {
    opacity: 1;
}
star-rating {
    --size: 1;
    display: inline-block;
    margin-left: calc(2px * var(--size));
    transform: translateY(1px);
}
star-rating > div {
    display: flex;
    align-items: center;
    font-weight: 600;
    position: relative;
    padding: 0px calc(5px * var(--size));
}
star-rating > div svg {
    stroke-width: calc(3px * var(--size));
    height: calc(16px * var(--size)) !important;
    width: calc(16px * var(--size)) !important;;
    border-radius: calc(12px * var(--size));
    margin-right: calc(2px * var(--size));
}

star-rating > div:after {
    border-radius: 20px;
    background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--background) 20%, transparent),
    color-mix(in srgb, var(--background) 70%, transparent)
    );
    content: "";
    position: absolute;
    width: 100%;

    bottom: -1px;
    top: -1px;
    left: 0;
    z-index: -1;
}

.solution-note {
    margin-top: 3px;
    margin-bottom: 6px;
    padding: 4px 0px;
    padding-left: 10px;
    display: flex;
    position: relative;
}
.solution-note p {
    font-size: 15px !important;
    font-weight: 400;
}
.solution-note star-rating {
    --size: 0.8 !important;;
}
.solution-note > svg {
    min-height: 20px;
    min-width: 20px;
    max-height: 20px;
    max-width: 20px;
    margin-right: 6px;
}
.solution-note:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    border-radius: 0px;
    height: 100%;
    background: var(--background);
    border-radius: 12px;
}

body {
    overflow: hidden !important;
    --hue: 324 !important;
}

.medals__page {
    --maxheight: calc(100vh - var(--navbar-height));
    height: 100%;
    max-height: var(--maxheight);
    display: flex;
}
@keyframes slide {
    0% {
        opacity: 0;
        transform: translateX(-50px);
    }
}
.medals__medal-section {
    width: 100%;
    padding-top: 10px;
    border-radius: var(--border-radius);
    margin-bottom: 20px;
}
.medals__medal-section h1 {
    font-weight: 400;
    font-size: 22px;
    margin-left: 20px;
}
.medals__medal-gamemodesection {
    padding: 20px;
    margin-top: 10px;
    border-radius: var(--border-radius);
    background: linear-gradient(-200deg,
    color-mix(in srgb, var(--col-sat-2) 20%, transparent),
    color-mix(in srgb, var(--col-sat-1) 5%, transparent) 70%) !important;

    animation: slide 0.4s ease;
    animation-fill-mode: both;
}


.medals__medal-gamemodesection > h2 {
    font-size: 22px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    line-height: 1;
    gap: 8px;
}
.medals__medal-gamemodesection > h2 i {
    color: var(--col-sat-2);
    font-size: 30px;
}
.medals__medal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.2rem, 1fr));
    grid-auto-rows: 1fr;
    width: 100%;
    grid-gap: 8px 14px;
    margin-top: 20px;
}

.medals__medal-button {
    aspect-ratio: 110/118;
    width: 60px;
    height: auto;
    transition: all 0.05s ease-out;
}
.medals__medal-button.active {
    z-index: 2;
    filter: drop-shadow(2px 2px 5px #0004) drop-shadow(0px 0px 15px #fffa) drop-shadow(0px 0px 5px white) brightness(1.2);
}
.medals__medal-button:hover {
    transform: scale(1.05);
}
.medals__medal-button:active {
    transform: scale(0.95) translateY(2px);
}
.medals__medal-button img {
    object-fit: contain;
    width: 100%;
}

.medals__page {
    display: flex;
}

.medals__page .sidebar {
    padding: 30px;
    padding-top: 0px;
    flex: 2;
    overflow-y: scroll;
}
.medals__page .sidebar-md-toolbar {
    padding-bottom: 10px;
    padding-top: 30px;
    display: flex;
    background: linear-gradient(to bottom,
    var(--col-base) 65%,
    color-mix(in srgb, var(--col-base) 0%, transparent));
    filter: drop-shadow(0px 0px 15px var(--col-base));
    gap: 6px;
    position: sticky;
    top: 0;
    z-index: 9;
}
.medals__page .sidebar-md-toolbar .input-container {
    display: flex;
    flex: 1;
    align-items: stretch;
    position: relative;
}
.medals__page .sidebar-md-toolbar .input-container > svg {
    position: absolute;
    top: calc(50% - 0.5px);
    height: 20px;
    width: 20px;
    left: 12px;
    transform: translateY(-50%);
}
.medals__page .sidebar-md-toolbar .input-container > button {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    right: 7px;
    background: var(--col-l1);
    top: 50%;
    transform: translateY(-50%);
    height: 29px;
    width: 29px;
    border-radius: 22px;
}
.medals__page .sidebar-md-toolbar .input-container > button svg {
    height: 18px;
    width: 18px;
}
.medals__page .sidebar-md-toolbar input {
    background: var(--col-l4);
    padding-left: 40px;
}

.medals__page > .main {
    flex: 5.4;
    position: relative;
    background: transparent;
    overflow-y: scroll;
}
.medals__page > .main .main-inner {
    margin: 20px;
    margin-left: 0;
    min-height: calc(100vh - var(--navbar-height));
    position: relative;
}

.medals__page > .main .main-inner > * {
    transition: all 0.2s ease;
}
.medals__page > .main .main-inner .homepage {
    padding: 16px;
    background: linear-gradient(to bottom right, #ff66aa22, #fff0, #fff0, #fff0);
    border-radius: 20px;
    height: 100%;
    z-index: 92;
    position: relative;
    .hp-navbar {
        display: flex;
        align-items: center;
        gap: 20px;
        padding: 16px 24px;
        h1 {
            font-size: 40px;
            font-weight: 300;
        }
    }

    .homepage-panel {
        display: flex;
        flex-direction: column;
        padding: 16px;
        border-radius: 20px;
        margin-top: 20px;
        background: var(--col-l2);
        border: 1px solid var(--col-l4);
        >h1 {
            color: #ff66aa;
            font-weight: 300;
            font-size: 40px;
            padding: 6px 16px;
        }
        .recommendations-grid:not(.not-enough) {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(500px, 1fr));
            margin-top: 12px;
            gap: 16px;
            .medal-suggestion {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                padding: 16px;
                border-radius: 12px;
                background: linear-gradient(to bottom right, var(--col-l2), var(--col-sat-1));
                transition: all 0.2s ease;
                cursor: pointer;
                position: relative;
                overflow: hidden;
                height: 300px;
                &:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: linear-gradient(to bottom, var(--col-sat-1), var(--col-sat-2));
                    z-index: 1;
                    opacity: 0;
                    transition: opacity 0.2s ease;
                }
                &:hover {

                    transform: translateY(-2px);
                    box-shadow: 0 0 10px var(--col-sat-1);
                    &:before {
                        opacity: 0.4;
                        filter: saturate(5);
                    }
                }
                * {

                    z-index: 2;
                }
                >.markdown {
                    margin-top: auto;
                }
                >.info {
                    align-items: center;
                    display: flex;
                    gap: 16px;

                    img {
                        height: 90px;
                    }
                    h1 {
                        font-size: 26px;
                    }
                    h2 {
                        font-size: 18px;
                        font-weight: 300;
                    }
                    h3 {
                        font-size: 16px;
                        font-weight: 300;
                    }
                }
            }
        }
        .recommendations-grid.not-enough {
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            text-align: center;
            flex-direction: column;
            svg {
                height: 60px;
                width: auto;
            }
        }
        .medals-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
            gap: 16px;
            margin-top: 20px;
            .medal-card {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                padding: 20px;
                background: var(--col-l3);
                border-radius: 12px;
                text-align: center;
                color: inherit;
                h1 {
                    font-size: 23px;
                    font-weight: 800;
                }
                h2 {
                    font-size: 16px;
                    font-weight: 500;
                }
                img {
                    height: 80px;
                    margin-bottom: 8px;
                }
                position: relative;
                &:before {
                    content: "";
                    position: absolute;
                    bottom: -3px;
                    left: 20%;
                    right: 20%;
                    height: 6px;
                    background: linear-gradient(to right, var(--col-sat-1), var(--col-sat-2));
                    border-radius: 0 0 12px 12px;
                    transition: all 0.2s ease;
                }
                transition: all 0.2s ease;
                &:hover {
                    background: var(--col-l5);
                    &:before {
                        left: 0;
                        right: 0;
                        bottom: 0;
                        height: 20px;
                    }
                    padding-bottom: 30px;
                }
                &:active {
                    transform: translateY(2px);
                    background: var(--col-l6);
                }
                min-height: 220px;
            }
        }
    }
}


.medals__page > .main .main-inner ._hidden {
    opacity: 0;
    top: 0;
    width: 100%;
    transform: translateY(20px);
    transform-origin: top right;
    position: absolute;
    pointer-events: none;
}

.medals__page > .main .main-inner .homepage img {
    height: 60px;
}

.medals__page > .main .main-footer {
    padding-top: 15px;
    padding-right: 40px;
    padding-left: 20px;
    padding-bottom: 25px;
}
.medals__page .main .scrollable {
    display: flex;
    padding: 20px;
    max-height: 100%;
    align-items: flex-start;
}

.medals__page .main .bg-outer {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
}
.medals__page .main .bg {
    content: "";
    --col: #fff6;
    --col-trans: #fff0;
    border-radius: 16px;


    transition: background 1s ease;
    background: var(--col-sat-1);
    mask-image:
            radial-gradient(53.34% 95.55% at 82.05% 90.78%, var(--col) 0%, var(--col-trans) 100%),
            radial-gradient(106.54% 106.54% at 95.06% 100%, var(--col) 0%, var(--col-trans) 120%);
    position: sticky;
    pointer-events: none;
    top: 0;
    left: 0;
    min-height: calc(100vh - var(--navbar-height));
    border-radius: 16px;
}
.medals__page .main .panel {
    background: color-mix(in srgb, var(--col-d1) 20%, transparent);
    border: 1px solid #fff1;
}

.medals__page .main-left {
    flex: 3;
    margin-right: 20px;
}

.medals__page .main-right {
    flex: 2;

    flex-grow: 2.5;
    flex-shrink: 1; /* Prevent shrinking if necessary */
    flex-basis: 0; /* Adjust this to control initial size */
}
.medals__unsaved {
    position: absolute;
    bottom: 0;
    left: 0;
    width: calc(100% - 20px);
    border-radius: 200px;
    margin: 10px;
    text-align: center;
    padding: 12px;
    background: #b23737;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    border: 2px solid #f00;
}

#medal_beatmaps {
    width: 100%;
    display: grid;
    grid-gap: 16px;
    grid-template-columns: 1fr;
}
#medal_beatmaps.large {
    grid-template-columns: 1fr;
}
.beatmap {
    border-radius: 12px;
    background: linear-gradient(to bottom, color-mix(in srgb, var(--col-d2) 80%, transparent), color-mix(in srgb, var(--col-l2) 40%, transparent)), var(--bg);
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    background-position: center !important;
    background-size: cover !important;
}
#medal_beatmaps.large .beatmap {
    background: linear-gradient(to bottom, #fff0 20%, color-mix(in srgb, var(--col-d2) 80%, transparent) 70%), var(--bg);

}
.beatmap:has(.top:hover) {
    filter: brightness(1.2);
}
.beatmap .top {
    color: inherit;
    width: 100%;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: center;
}

#medal_beatmaps.large .beatmap .top {
    padding-top: 140px;
}


.beatmap .top > div,
.beatmap .bottom {
    display: flex;
    align-items: center;
}

.beatmap .top > div {

    justify-content: space-between;
}
.beatmap .top > div > *:last-child {
    text-align: right;

}

.beatmap .pill-button {
    padding: 3px 16px;
    background: var(--col-l5);
}
.beatmap .pill-button.dark {
    background: var(--col-d1);
    padding: 3px 8px;
    display: flex;
    align-content: center;
    margin-left: 5px;
}
.beatmap .vote-button:before {
    content: "+";
}

.beatmap .top,
.beatmap .bottom {
    padding: 15px 17px;
}
.beatmap .bottom {
    padding: 6px 17px;
    backdrop-filter: blur(8px);
    background-color: color-mix(in srgb, var(--col-l2) 80%, transparent);
}
.beatmap .top > div, .beatmap .bottom {
    display: flex;
    align-items: center;
}

.beatmap .top h1 {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
}
.beatmap .top h3 {
    font-weight: 300;
    font-size: 17px;
}
.beatmap {
    overflow: hidden;
}
.beatmap .bottom h4 {
    margin-right: auto;
    font-weight: 400;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    padding-right: 8px;
    padding-top: 5px;
    padding-bottom: 5px;
    cursor: pointer;
}
.beatmap .bottom h4.expanded {
    white-space: inherit;
}

.medal__extra-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    --sat: 1.5;
    > .fab {
        width: 100%;
    }
    > div {
        background: color-mix(in srgb, var(--col-l2) 50%, transparent);
        padding: 14px;
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid color-mix(in srgb, var(--col-l6) 50%, transparent);
        .graph-outer {
            height: 150px;
            .graph-tooltip {
                flex-direction: row !important;
                h1 {
                    font-size: 18px;
                }
            }
        }
        h3 {
            font-size: 20px;
            font-weight: 300;
            margin-bottom: 3px;
        }
        h1 {
            font-size: 24px;
            font-weight: 500;
        }
        > * {
            color: inherit;
            display: flex;
            align-items: center;
            gap: 6px;
            width: 100%;
            img {
                height: 50px;
                border-radius: 10px;
            }
            h2 {
                margin-left: auto;
                font-size: 18px;
                font-weight: 200;
            }
        }
        &:has(*.header) {
            padding: 0px;
            .header, .inner {
                padding: 14px;
            }
            .header {
                background: color-mix(in srgb, var(--col-l4) 50%, transparent);

            }
            .inner:has(*.graph-outer) {
                padding: 0px;
                display: flex;
                flex-direction: column;
                align-items: stretch;
                justify-content: stretch;
                .graph-outer {
                    border: transparent;
                    width: 100%;
                    border-radius: 0px;
                    background: transparent;
                }
            }
        }
    }
}

.medal__info {
    padding: 0px;
}
.medal__info > * {
    padding: var(--padding);
    border-radius: var(--border-radius);
}
.medal__info-solution {
    width: 100%;
}
.medal__info-solution ul {
    margin: 4px 0px;
    margin-left: 16px;
}
.medal__info-solution table {
    border-collapse: collapse;
    margin: 10px 0;
    font-size: 0.9em;
    min-width: 400px;
}
.medal__info-solution table tr {
    background-color: var(--col-l5);
    color: #ffffff;
    text-align: left;
}
.medal__info-solution table th,
.medal__info-solution table td {
    padding: 10px 12px;
    padding-right: 20px;
}
.medal__info-solution table tbody tr:nth-of-type(even) {
    background-color: var(--col-l6);
}
.medal__info-solution table tbody tr:first-child {
    background-color: var(--col-sat-1);
}



.medal__info-solution .md-toolbar {
    display: flex;
    align-items: flex-end;
    margin-top: 20px;
}
.medal__info-solution .md-toolbar #support {
    display: flex;
    margin-left: auto;
    margin-top: 5px;
}
.medal__info-solution .md-toolbar #support > div {
    display: flex;
    align-items: center;
    padding: 3px 8px;
    background: #fff1;
    border-radius: 100px;
    margin-left: 5px;
}
.medal__info-solution .md-toolbar #support > div p {
    font-size: 15px;
}

.medal__info-solution .md-toolbar #support > div.unsupported {
    opacity: 0.5;
    outline: 1px solid #dd4a68;
}
.medal__info-solution .md-toolbar #support > div.unsupported svg {
    stroke: #ff234f;
}
.medal__info-solution .md-toolbar #support > div > div {
    height: 18px;
    width: 18px;
    margin-right: 3px;
}
.medal__info-solution .md-toolbar #support > div svg {
    height: 18px;
    width: 18px;
}
.medal__info-upper {
    display: flex;
    align-items: center;
    width: 100%;
}
.medal__info-text {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: var(--padding);
    line-height: 1.1 !important;
}
.medal__info-text h1 {
    font-size: 26px;
    font-weight: 600;
}
.medal__info-text h2 {
    font-size: 21px;
    font-weight: 300;
}

.medal__info-text h3 {
    font-size: 17px;
    margin-top: 3px;
    font-weight: 300;
    font-style: italic;
    opacity: 0.6;
}
.medal__info-upper {
    position: relative;
    overflow: hidden;
}
.medal__info-upper > img {
    height: 100px;
    margin: 10px 0px;
}
.medal__info-upper:before {
    content: "";
    --col: #fff6;
    --col-trans: #fff0;
    border-radius: calc(var(--border-radius) - 1px); /* for border. ghrhdsgmgd */


    transition: background 1s ease;
    background: var(--col-sat-1);
    mask-image:
            radial-gradient(53.34% 95.55% at 82.05% 70.78%, var(--col) 0%, var(--col-trans) 100%),
            radial-gradient(106.54% 106.54% at 95.06% 100%, var(--col) 0%, var(--col-trans) 120%);
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.medal__info-solution h1 {
    font-size: 28px;
    font-weight: 300;
    margin-bottom: 4px;
}
/*.medal__info-solution div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 17px !important;
    font-weight: 400;
    line-height: 1.2;
}*/
.medal__info-solution p {
    font-size: 18px;
}
.medal__info-solution div i {
    font-weight: 300;
}


#mods {
    display: flex;
    align-items: center;
    margin-top: 8px;
}
.mod-pill {
    display: flex;
    background: #fff;
    border-radius: 90px;
    padding: 2px 11px;
    margin-right: 5px;
    font-weight: 900;
    color: #000d;
}
.mod-pill.difficultyreduction {
    background: #A8FD56;
}
.mod-pill.difficultyincrease {
    background: #FE6465;
}
.mod-pill.conversion {
    background: #8C65FF;
}
.mod-pill.fun {
    background: #FE65AB;
}
.mod-pill.automation {
    background: #65CCFF;
}

.mod-pill p {
    font-size: 17px;
}

@media (max-width: 1100px) {
    .medals__page .main .scrollable {
        flex-direction: column;
    }
    .medals__page .main-left {
        margin-right: 0px;
        width: 100%;
    }
    .main-right {
        width: 100%;
    }
}
@media (min-width: 800px) {
    /*desktop*/
}
@media (max-width: 800px) {
    #medal_beatmaps {
        grid-template-columns: 1fr !important;
    }
    .medals__page .sidebar {
        height: var(--maxheight);
        position: absolute;
        z-index: 99;
        width: 100%;

        transform: translateX(-100%);
        opacity: 0;

        transition: all 0.5s ease;
    }
    .medals__page .main {
        margin: 0px;


        transform: translateX(0px);
        opacity: 1;

        transition: all 0.5s ease;
    }



    .medals__page.home .sidebar {
        transform: translateX(0px);
        opacity: 1;
    }
    .medals__page.home .main {
        transform: translateX(100%);
        opacity: 0;
    }
    .medals__page > .main .main-inner {
        margin: 0px;
    }
}
.sidebar__no-results {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.sidebar__no-results img {
    height: 250px;
    margin: 40px 0px;
    margin-bottom: -30px;
}
.sidebar__no-results h1 {
    font-weight: 300;
    font-style: italic;
    opacity: 0.8;
}

.filter-obtained .medals__medal-button.obtained {
    opacity: 0.5;
    filter: grayscale(1);
}
.filter-obtained .medals__medal-button.obtained:hover {
    filter: grayscale(0.5);
}
.filter-obtained .medals__medal-button.obtained.active {
    filter: grayscale(0.5) drop-shadow(0px 0px 20px #fffa) drop-shadow(0px 0px 5px #fffa);
    opacity: 0.7;
    transform: scale(1.1);
}
.filter-obtained .medals__medal-button.hidden {
    display: none !important;
    opacity: 0;
}
#medal_beatmaps .pack {
    padding: 16px;
    border-radius: 16px;
    display: flex;

    --sat: 1 !important;

    background: linear-gradient(-200deg,
    color-mix(in srgb, var(--col-sat-2) 20%, transparent),
    color-mix(in srgb, var(--col-sat-1) 5%, transparent) 70%) !important;


    align-items: center;
}
#medal_beatmaps .pack > i {
    font-size: 30px;
    margin-right: 15px;
}
#medal_beatmaps .pack > div {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: space-between;
}
#medal_beatmaps .pack .main .right {
    display: flex;
    margin-left: AUTO;
}
#medal_beatmaps .pack .main .right a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
}
#medal_beatmaps .pack .main .right a svg {
    height: 20px;
}
#medal_beatmaps .pack .main .right a:hover {
    background: var(--col-l5);
}
#medal_beatmaps .pack .main .left h1 {
    font-size: 17px;
    font-weight: 400;
    margin-bottom: 6px;
}
#medal_beatmaps .pack .main .left > div {
    display: flex;
    align-items: center;
}
#medal_beatmaps .pack .main .left > div * {
    font-size: 17px;
    margin-right: 10px;
}

/*# sourceMappingURL=medals.css.map*/