@charset "UTF-8";
/* SCSS */
/* SCSS */
/* ===== Usage ===== */
:root {
    /*========== Colors ==========*/
    --clr-primary: #851c3b;
    --clr-on-primary: #b57788;
    --clr-primary-2: #3a0a31;
    --clr-on-primary-2: #ccc;
    --clr-secondary: #e6073d;
    --clr-on-secondary: #fff;
    --clr-secondary-2: #ffcc66;
    --clr-secondary-3: #fdec5d;
    --clr-on-secondary-2: #13181b;
    --clr-body: #f5f5f5;
    --clr-on-body: #1c1c1c;
    --clr-surface: #ffffff;
    --clr-on-surface: #222;
    --clr-neutral: gray;
    --clr-danger: #c62828;
    --clr-success: #7db70d;
    --clr-info: #09f;
    --clr-warning: #fc6c11;
    --clr-link: #0875d5;
    --clr-post: #ffffff;
    --clr-neutral-5: #1e252a;
    --clr-neutral-10: #283339;
    --clr-neutral-20: #3d4d57;
    --clr-neutral-30: #526875;
    --clr-neutral-40: #678293;
    --clr-neutral-50: #849ba9;
    --clr-neutral-60: #a2b3be;
    --clr-neutral-70: #c0ccd3;
    --clr-neutral-75: #cfd8dd;
    --clr-neutral-80: #dee4e8;
    --clr-neutral-85: #edf0f2;
    --clr-neutral-90: #fcfdfd;
    --clr-neutral-95: white;
    --clr-black: #222;
    --clr-white: #f9f9f9;
    --clr-always-white: #fff;
    --clr-always-black: #000;
    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --font-size: 1rem;
    --font-size-sm: 0.875rem;
    --font-size-xs: 0.75rem;
    --font-size-xxs: 0.5rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-xxl: 1.5rem;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.75rem;
    --font-size-h4: 1.5rem;
    --font-size-h5: 1.25rem;
    --font-size-h6: 1rem;
    /* https://matthewjamestaylor.com/responsive-padding#magic-formula */
    --rs-spacing: calc(8px + 1.5625vw);
    /*========== Font Family ==========*/
    --font-family-1: Open Sans, Arial, Helvetica, sans-serif;
    --font-family-2: Oswald, Arial, Helvetica, sans-serif;
    --font-family-3: Poppins, Arial, Helvetica, sans-serif;
    --beginner-color: DarkOliveGreen;
    --explorer-color: OliveDrab;
    --navigator-color: ForestGreen;
    --voyager-color: MediumSeaGreen;
    --dazzler-color: Teal;
    --rocker-color: #21b8ca;
    --sparkler-color: DodgerBlue;
    --stunner-color: #6f00ff;
    --trailblazer-color: #6751eb;
    --achiever-color: #563399;
    --elite-color: #610082;
    --master-color: DarkViolet;
    --legend-color: MediumOrchid;
    --icon-color: #a500a5;
    --titan-color: MediumVioletRed;
    --coolbie-color: DeepPink;
    --cool-viewbie-color: #ee6f89;
    --viewbie-color: #e84263;
    --moderator-color: Crimson;
    --channel-moderator-color: OrangeRed;
    --global-moderator-color: #f28c28;
    --admin-color: #ffac1c;
    --staff-color: DimGray;
    --alumni-color: DarkSlateGray;
}

html {
    /* Box sizing rules */
    box-sizing: border-box;
    font-size: 16px;
    /* Prevent font size inflation - Andy Bell*/
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
}

*,
*::before,
*::after {
    box-sizing: inherit; /* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
    margin: 0;
    padding: 0;
    scrollbar-color: rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2);
    scrollbar-width: thin;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

/* Set core root defaults */
html:focus-within {
    scroll-behavior: smooth;
}

/* Set core body defaults */
body {
    min-height: 100vh;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased; /* 4. Improve text rendering */
    overflow-x: hidden;
}

/* Body text (cleaner spacing) */
body,
p {
    line-height: 1.7;
    letter-spacing: 0.1px;
}

/* Set shorter line heights on headings and interactive elements */
button,
input,
label {
    line-height: 1.1;
}

/* Headings (slightly tighter) */
h1,
h2,
h3,
h4 {
    line-height: 1.3;
    letter-spacing: -0.25px;
}

/*
  7. Avoid text overflows
*/
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role=list],
ol[role=list] {
    list-style: none;
    padding: 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
    -webkit-text-decoration-skip: ink;
    text-decoration-skip-ink: auto;
    color: currentColor;
}

a {
    text-decoration: none;
    cursor: pointer;
    color: var(--clr-on-body);
}

    a:hover {
        text-decoration: underline;
    }

/* Make images easier to work with */
/* Improve media defaults */
img,
picture,
video,
canvas {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

svg {
    max-width: 100%;
    max-height: 40px;
    vertical-align: middle;
}

button,
fieldset,
input,
legend,
select,
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

input,
select,
textarea {
    border: 1px solid var(--clr-black);
    background-color: var(--clr-white);
    border-radius: 0.25rem;
    resize: none;
}

    input[type=text],
    input[type=email],
    input[type=datetime-local],
    select,
    textarea {
        font: 1rem/1.5 sans-serif;
        display: block;
        box-sizing: border-box;
        padding: 0 0.25rem;
        cursor: text;
        border: 1px solid var(--clr-neutral-60);
    }

        input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=datetime-local]::-moz-placeholder, select::-moz-placeholder, textarea::-moz-placeholder {
            color: var(--clr-neutral-50);
            font-size: 14px;
        }

        input[type=text]::placeholder,
        input[type=email]::placeholder,
        input[type=datetime-local]::placeholder,
        select::placeholder,
        textarea::placeholder {
            color: var(--clr-neutral-50);
            font-size: 14px;
        }

textarea {
    height: 100%;
    min-height: 7.5rem;
}

button,
input,
select,
textarea {
    font: inherit;
    font-size: 100%;
    box-sizing: border-box;
}

select {
    background: url("/assets/svg/arrow-drop-down.svg") no-repeat center right 0;
    background-color: var(--clr-white);
    cursor: pointer;
    padding-right: 1.25rem;
    -webkit-appearance: none; /* Remove default styling on iOS */
    -moz-appearance: none; /* Remove default styling on Firefox */
    appearance: none; /* Remove default styling on modern browsers */
}

input[type=radio],
input[type=checkbox] {
    height: 1rem;
    width: 1rem;
    vertical-align: middle;
    cursor: pointer;
}

input[type=radio] {
    border-radius: 50%;
}

    input[type=radio]:checked {
        background-image: radial-gradient(var(--clr-secondary) 40%, transparent calc(40% + 1px));
    }

input[type=checkbox]:checked {
    background: url("/assets/svg/check.svg") no-repeat center/75% auto;
}

input[type=button],
input[type=submit],
input[type=reset] {
    cursor: pointer;
}

    input[type=button]:hover,
    input[type=submit]:hover,
    input[type=reset]:hover {
        text-decoration: underline;
        scale: 1.02;
    }

input::-moz-placeholder, textarea::-moz-placeholder {
    opacity: 1; /* Firefox */
    color: var(--clr-neutral-30);
}

input::placeholder,
textarea::placeholder {
    opacity: 1; /* Firefox */
    color: var(--clr-neutral-30);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--clr-white);
}

button {
    cursor: pointer;
}

    button:focus {
        outline: none;
    }

textarea {
    field-sizing: content;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
    scroll-margin-block: 5ex;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
    html:focus-within {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

:root {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 16px;
}

body {
    background-color: var(--clr-body);
    color: var(--clr-on-body);
    font-family: "Open Sans", sans-serif;
}

.js-guest-content,
.js-user-content,
.js-admin-content,
.js-moderator-content {
    display: none;
}

.hidden,
[hidden] {
    display: none !important;
}

.show {
    display: block !important;
    z-index: 9 !important;
}

.hide {
    display: none !important;
}

.visible {
    visibility: visible;
}

.invisible {
    visibility: hidden;
}

@media only screen and (min-width: 768px) {
    .md-above-hidden {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) {
    .mobile-only {
        display: none !important;
    }
}

@media only screen and (max-width: 767.98px) {
    .tablet-desktop-only {
        display: none !important;
    }
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .tablet-only {
        display: none !important;
    }
}

@media only screen and (max-width: 991.98px) {
    .desktop-only {
        display: none !important;
    }
}

.flex-center {
    display: flex;
    align-items: center;
    justify-items: center;
}

.flex-no-shrink {
    flex-shrink: 0;
}

.grid-center {
    display: grid;
    place-content: center;
}

.test-border {
    border: 1px solid var(--clr-black);
}

.font-fluid {
    font-size: calc(16px + 0.9vw);
}

.bg-secondary {
    background-color: var(--clr-secondary-2);
}

.heading-1 {
    font-family: "Oswald", Arial, Helvetica, sans-serif;
}

.adBanner {
    text-align: center;
    margin: auto;
}

.invert-effect {
    filter: invert(100%);
}

.table-border {
    border-collapse: collapse;
}

    .table-border th,
    .table-border td {
        border: 1px solid var(--clr-neutral-15);
    }

.no-padding {
    padding: 0;
}

.flex-layout {
    display: flex;
}

.flex-layout--grow {
    flex: 1;
}

@media only screen and (max-width: 575.98px) {
    .mobile-breakout {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
    }
}

.snaps-inline {
    scroll-snap-type: inline mandatory;
    scroll-padding-inline: 0.5rem;
}

    .snaps-inline > * {
        scroll-snap-align: start;
    }

.flex-flow {
    display: flex;
    flex-direction: column;
}

.flex-flow--grow {
    flex: 1;
}

/* Avatar Across the Site */
.avatar {
    border-radius: 50%;
}

.avatar-xs {
    border-radius: 50%;
    width: 35px;
}

.avatar-sm {
    border-radius: 50%;
    width: 50px;
}

.avatar-md {
    border-radius: 50%;
    width: 100px;
}

.avatar-lg {
    border-radius: 50%;
    width: 150px;
}

.avatar-xl {
    border-radius: 50%;
    width: 200px;
}

.my {
    margin-top: 1rem !important;
}

.my-25 {
    margin-top: 0.25rem !important;
}

.my-50 {
    margin-top: 0.5rem !important;
}

.my-75 {
    margin-top: 0.75rem !important;
}

.my-125 {
    margin-top: 1.25rem !important;
}

.my-150 {
    margin-top: 1.5rem !important;
}

.my-200 {
    margin-top: 2rem !important;
}

.my-250 {
    margin-top: 2.5rem !important;
}

.my-300 {
    margin-top: 3rem !important;
}

/*
Loader https://projects.lukehaas.me/css-loaders/
*/
.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid var(--clr-neutral);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.container {
    max-width: 1168px;
    width: 100%;
    margin: 0 auto;
    padding-right: 0.5rem;
    padding-left: 0.5rem;
}

@media only screen and (min-width: 768px) {
    .container {
        padding-right: 0.75rem;
        padding-left: 0.75rem;
    }
}

@media only screen and (min-width: 992px) {
    .container {
        padding-right: 1rem;
        padding-left: 1rem;
    }
}

.js-dropdown-flex-link,
.js-dropdown-link {
    cursor: pointer;
}

.js-dropdown-rotate {
    transition: transform 0.3s ease;
}

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

.no-btop {
    border-top: 0 !important;
}

.no-bbottom {
    border-bottom: 0 !important;
}

.blinking-dot {
    width: 0.75rem;
    height: 0.75rem;
    background-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    /* Add some space between the dot and the text */
    animation: pulse 1s infinite alternate;
}

.blinking-dot-sm {
    width: 0.5rem;
    height: 0.5rem;
    background-color: currentColor;
    border-radius: 50%;
    display: inline-block;
    /* Add some space between the dot and the text */
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.5);
    }
}

.flex {
    display: flex !important;
}

.grid {
    display: grid !important;
}

.bold-text {
    font-weight: 600;
}

@media only screen and (max-width: 1167.98px) {
    .surface-bg {
        background: var(--clr-surface);
    }
}

.flex-space-between {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
}

    .flex-space-between .flex-left,
    .flex-space-between .flex-right {
        display: flex;
        align-items: center;
    }

.live__dot, .live__dot-lg {
    align-self: flex-start;
    display: inline-flex;
    gap: 0.25rem;
    align-items: center;
    font-weight: 600;
    font-family: var(--font-family-1);
    text-transform: uppercase;
}

    .live__dot p, .live__dot-lg p {
        margin-bottom: 0 !important;
    }

.live__dot {
    gap: 0.25rem;
}

.live__dot-lg {
    gap: 0.5rem;
    padding-bottom: 1rem;
}

.live2 {
    border-radius: 0.75rem;
    padding: 0.25rem 0.5rem;
    font-size: 10px;
    color: var(--clr-always-white);
    background: var(--clr-secondary);
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    text-transform: uppercase;
    gap: 0.25rem;
}

.arrow-equal,
.ico-sm ico-arrow-up,
.arrow-down {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

    .arrow-equal > svg,
    .ico-sm ico-arrow-up > svg,
    .arrow-down > svg {
        fill: currentColor;
    }

    .arrow-equal > svg {
        color: var(--clr-secondary-2);
    }

    .ico-sm ico-arrow-up > svg {
        color: var(--clr-success);
    }

    .arrow-down > svg {
        color: var(--clr-secondary);
    }

#divTopicsByType {
    min-height: 600px;
}

.if-shield {
    width: 1rem;
    height: 1rem;
    -o-object-fit: cover;
    object-fit: cover;
    margin-bottom: 4px;
}

.entity {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.entity__tag {
    display: flex;
    gap: 0.25rem;
    background: var(--clr-neutral-85);
    border: 1px solid var(--clr-neutral-70);
    border-radius: 20px;
    padding-right: 10px;
}

    .entity__tag:hover {
        text-decoration: underline;
    }

.entity__image {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.entity__name {
    align-self: center;
    padding: 0 4px;
    margin: 0 !important;
}

.top__contributors {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
}

.top__contributors-container {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
}

.top__contributors-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.top__contributors-image {
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 50%;
    width: 72px;
}

@media only screen and (min-width: 576px) {
    .top__contributors-image {
        width: 92px;
    }
}

.top__contributors-image img {
    width: 100%;
    border-radius: 50%;
}

.top__contributors-count {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--clr-secondary);
    color: var(--clr-on-secondary);
}

.top__contributors-name {
    font-weight: 600;
    text-align: center;
}

.jump {
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-70);
    border-radius: 0.5rem;
    overflow: hidden;
    width: 100%;
}

.jump__title {
    background: var(--clr-neutral-75);
    font-size: 1rem;
    font-weight: 600;
    padding: 0.75rem;
}

.jump__position {
    display: flex;
    width: 1.5rem;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.jump__wrapper {
    font-size: 13px;
    display: flex;
    flex-direction: column;
}

.jump__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border-top: 1px solid var(--clr-neutral-80);
}

    .jump__item:first-child {
        border-top: none;
    }

    .jump__item:hover {
        text-decoration: none;
    }

.jump__footer {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 0.5rem;
    border-top: 1px solid var(--clr-neutral-80);
}

.jump__user {
    display: flex;
    flex-direction: column;
}

.jump__image {
    width: 35px;
    height: 35px;
    border-radius: 50%;
}

.jump__username {
    color: var(--clr-secondary);
    font-weight: 600;
}

.jump__rank {
    color: var(--clr-neutral-50);
    font-size: 12px;
}

.jump__posts {
    color: var(--clr-always-white);
    margin-left: auto;
    background: var(--clr-neutral-50);
    padding: 2px 0.5rem;
    border-radius: 1rem;
}

.jump__score {
    color: var(--clr-neutral-60);
    margin-left: auto;
    font-size: 1rem;
}

.jump .sidebar__btn {
    margin: 0.5rem 0;
    align-self: center;
}

.section__title {
    font-family: var(--font-family-2);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 1.125rem;
    grid-column: 1;
}

.section__head {
    text-transform: uppercase;
    font-family: var(--font-family-2);
    font-size: 1.5rem;
    font-weight: 400;
    grid-column: 1;
}

.section__header {
    background: var(--clr-neutral-90);
    border-top: 1px solid var(--clr-neutral-70);
    border-bottom: 1px solid var(--clr-neutral-70);
}

.section__header-wrapper {
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    -moz-column-gap: 1rem;
    column-gap: 1rem;
}

@media only screen and (min-width: 576px) {
    .section__header-wrapper {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
    }
}

.section__pill {
    grid-column: 2;
    grid-row: 1/-1;
    order: 0;
}

.section__caption {
    font-weight: 400;
    grid-column: 1;
    font-size: 14px;
}

.section__wrapper {
    padding: 1rem;
    border-bottom: 1px solid var(--clr-neutral-70);
    margin-bottom: 1rem;
}

.share__wrapper .svg-wrapper {
    width: 28px;
    height: 28px;
    padding: 0.125rem;
}

.gap-25 {
    gap: 0.25rem;
}

.gap-50 {
    gap: 0.5rem;
}

.gap-75 {
    gap: 0.75rem;
}

.gap-100 {
    gap: 1rem;
}

.pos-relative {
    position: relative;
}

.shadow-1 {
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
}

.clr-secondary {
    color: var(--clr-secondary);
}

    .clr-secondary svg {
        fill: currentColor;
    }

.mw-728 {
    max-width: 744px;
}

.column-span {
    grid-column: 1/-1;
}

@media only screen and (min-width: 768px) {
    .sticky-top {
        position: sticky !important;
        top: 0;
    }
}

.forum__action-item {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    border-radius: 2rem;
    padding: 0.5rem;
    justify-content: space-evenly;
    font-size: 13px;
    color: var(--clr-always-white);
}

    .forum__action-item p {
        padding: 0 0.5rem;
        text-transform: uppercase;
    }

    .forum__action-item:hover {
        filter: drop-shadow(1px 2px 4px rgba(0, 0, 0, 0.3));
        scale: 1.02;
    }

.forum__action-new-topic {
    background: #0078c5;
}

.forum__action-new-poll {
    background: #e30285;
}

.forum__action-reply {
    background: var(--clr-success);
}

.forum__action-view {
    background: var(--clr-neutral-50);
}

.forum__action-edit {
    background: #b45dd2;
}

.forum__action-report {
    background: var(--clr-secondary);
}

.forum__action-share {
    margin-left: auto;
}

.forum__action > * .svg-wrapper {
    display: none;
    width: 1rem;
    height: 1rem;
    padding: 0.25rem;
    border-radius: 50%;
    color: var(--clr-always-white);
}

    .forum__action > * .svg-wrapper > svg {
        fill: currentColor;
    }

.forum__action .topic__options .svg-wrapper {
    color: var(--clr-neutral-30);
}

.forum__action .topic__options > * {
    width: 100%;
    height: 100%;
    display: flex;
}

.forum__action-left {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

@media only screen and (min-width: 768px) {
    .forum__action > * .svg-wrapper {
        width: 2rem;
        height: 2rem;
        padding: 0.5rem;
        display: flex;
        background: rgba(17, 17, 17, 0.2745098039);
        border-radius: 50%;
    }
}

#js-overlay {
    z-index: 2 !important;
    background: rgba(0, 0, 0, 0.3);
    -webkit-backdrop-filter: blur(1px);
    backdrop-filter: blur(1px);
}

.topic__options {
    border: 1px solid var(--clr-neutral-50);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    padding: 0;
    color: var(--clr-neutral-30);
    fill: currentColor;
}

.topic__options-list {
    z-index: 9;
    position: absolute;
    top: 2rem;
    right: 0.75rem;
    display: none;
    flex-direction: column;
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-70);
    border-radius: 0.25rem;
    overflow: hidden;
}

    .topic__options-list .active {
        background: var(--clr-neutral-85);
        color: var(--clr-secondary);
        font-weight: 600;
    }

        .topic__options-list .active span {
            color: var(--clr-secondary);
        }

.topic__options-container {
    position: relative;
}

    .topic__options-container > .svg-wrapper {
        padding: 6px;
    }

.topic__options-item {
    display: grid;
    grid-template-columns: auto 1fr;
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
    align-items: center;
    color: var(--clr-black);
    padding: 0.25rem 0.75rem;
    border-top: 1px solid var(--clr-neutral-80);
    font-size: 14px;
    font-weight: 600;
    flex-direction: column;
    text-wrap: nowrap;
    text-transform: capitalize;
}

    .topic__options-item .svg-wrapper {
        grid-column: 1;
        grid-row: span 2;
        width: 32px;
        height: 32px;
        padding: 0.25rem;
        border: 0 !important;
    }

    .topic__options-item > span {
        font-size: 10px;
        font-weight: 400;
        color: var(--clr-neutral-30);
        display: block;
        width: 100%;
        word-wrap: wrap;
        grid-row: 2;
        grid-column: 2;
    }

    .topic__options-item:first-child {
        border-top: none;
    }

    .topic__options-item:hover {
        cursor: pointer;
        text-decoration: underline;
        background: var(--clr-neutral-85);
        color: var(--clr-black);
    }

        .topic__options-item:hover span {
            color: var(--clr-black);
        }

.team {
    font-size: 11px;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    max-width: 110px;
    text-align: center;
}

.team__captain {
    position: absolute;
    bottom: -0.75rem;
    left: calc(50% - 24px);
    text-align: center;
    text-wrap: nowrap;
    font-size: 11px;
    padding: 0 0.25rem;
    color: var(--clr-white);
    background: var(--clr-warning);
    border-radius: 0.25rem;
}

.team__leader {
    background: rgba(255, 255, 255, 0.6);
    color: black;
    border-radius: 0.125rem;
    font-size: 10px;
}

.flair__item {
    display: inline-flex;
    font-size: 12px;
    color: var(--clr-always-white);
    background: var(--clr-secondary);
    text-wrap: nowrap;
    padding: 0.125rem 0.5rem;
    border-radius: 0.75rem;
    align-self: flex-start;
    margin: 0 0.25rem;
}

.new-topic {
    background: #09f;
}

    .new-topic:hover {
        background: rgb(0, 137.7, 229.5);
    }

.new-topic__wrapper {
    background: rgb(0, 107.1, 178.5);
}

.new-poll {
    background: #e30285;
}

    .new-poll:hover {
        background: rgb(176.4454148472, 1.5545851528, 103.3799126638);
    }

.new-poll__wrapper {
    background: rgb(151.1681222707, 1.3318777293, 88.5698689956);
}

.bg-body {
    background: var(--clr-body) !important;
}

.scrolldiv {
    position: relative;
}

    .scrolldiv > * {
        position: sticky;
        top: 0;
    }

@media only screen and (min-width: 992px) {
    .scrolldiv {
        height: 1000px;
    }
}

@media only screen and (min-width: 1168px) {
    .guidelines {
        max-width: 350px;
    }
}

.guidelines__wrapper {
    border: 1px solid var(--clr-neutral-80);
    background: var(--clr-surface);
    color: var(--clr-neutral-30);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    font-size: 13px;
}

    .guidelines__wrapper > ul {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        margin-left: 0;
        margin-right: 0;
        padding-left: 2rem;
        list-style: none;
    }

    .guidelines__wrapper li {
        position: relative;
    }

        .guidelines__wrapper li:before {
            content: "➔";
            position: absolute;
            left: -2rem;
        }

        .guidelines__wrapper li span {
            font-weight: 600;
        }

    .guidelines__wrapper > h4 {
        font-size: 1rem;
    }

.search__bar {
    display: flex;
    gap: 0.5rem;
    grid-column: 2;
    grid-row: 1;
}

.search__button {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: var(--clr-always-white);
    background: var(--clr-secondary);
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    cursor: pointer;
    margin: 0 !important;
    transition: all 0.1s ease-in;
}

    .search__button:hover {
        background: rgb(205.253164557, 6.246835443, 54.4367088608);
    }

.search__area {
    width: 100%;
    font-size: 0.75rem;
    border: 1px solid var(--clr-neutral-70);
}

.author__name1 {
    color: var(--admin-color) !important;
    font-weight: 600;
}

.author__name3 {
    color: var(--global-moderator-color) !important;
    font-weight: 600;
}

.author__name4 {
    color: var(--beginner-color) !important;
    font-weight: 600;
}

.author__name5 {
    color: var(--explorer-color) !important;
    font-weight: 600;
}

.author__name6 {
    color: var(--navigator-color) !important;
    font-weight: 600;
}

.author__name8 {
    color: var(--coolbie-color) !important;
    font-weight: 600;
}

.author__name9 {
    color: var(--cool-viewbie-color) !important;
    font-weight: 600;
}

.author__name10 {
    color: var(--voyager-color) !important;
    font-weight: 600;
}

.author__name11 {
    color: var(--moderator-color) !important;
    font-weight: 600;
}

.author__name12 {
    color: var(--viewbie-color) !important;
    font-weight: 600;
}

.author__name13 {
    color: var(--dazzler-color) !important;
    font-weight: 600;
}

.author__name14 {
    color: var(--rocker-color) !important;
    font-weight: 600;
}

.author__name15 {
    color: var(--videobie-color) !important;
    font-weight: 600;
}

.author__name16 {
    color: var(--channel-moderator-color) !important;
    font-weight: 600;
}

.author__name21 {
    color: var(--sparkler-color) !important;
    font-weight: 600;
}

.author__name22 {
    color: var(--stunner-color) !important;
    font-weight: 600;
}

.author__name23 {
    color: var(--trailblazer-color) !important;
    font-weight: 600;
}

.author__name24 {
    color: var(--achiever-color) !important;
    font-weight: 600;
}

.author__name25 {
    color: var(--staff-color) !important;
    font-weight: 600;
}

.author__name26 {
    color: var(--elite-color) !important;
    font-weight: 600;
}

.author__name27 {
    color: var(--master-color) !important;
    font-weight: 600;
}

.author__name28 {
    color: var(--legend-color) !important;
    font-weight: 600;
}

.author__name29 {
    color: var(--icon-color) !important;
    font-weight: 600;
}

.author__name30 {
    color: var(--titan-color) !important;
    font-weight: 600;
}

.author__group {
    display: flex;
    gap: 0.5rem;
    align-items: baseline;
    text-wrap: nowrap;
}

@media only screen and (max-width: 767.98px) {
    .author__group {
        align-items: center;
        justify-content: stretch;
    }
}

.author__group-number {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-size: 10px;
    border-radius: 3px;
    padding: 0px 3px;
    cursor: pointer;
}

.author__group-1 {
    border: 1px solid var(--admin-color) !important;
    color: var(--admin-color) !important;
    font-weight: 600;
}

.author__group-3 {
    border: 1px solid var(--global-moderator-color) !important;
    color: var(--global-moderator-color) !important;
    font-weight: 600;
}

.author__group-4 {
    border: 1px solid var(--beginner-color) !important;
    color: var(--beginner-color) !important;
    font-weight: 600;
}

.author__group-5 {
    border: 1px solid var(--explorer-color) !important;
    color: var(--explorer-color) !important;
    font-weight: 600;
}

.author__group-6 {
    border: 1px solid var(--navigator-color) !important;
    color: var(--navigator-color) !important;
    font-weight: 600;
}

.author__group-8 {
    border: 1px solid var(--coolbie-color) !important;
    color: var(--coolbie-color) !important;
    font-weight: 600;
}

.author__group-9 {
    border: 1px solid var(--cool-viewbie-color) !important;
    color: var(--cool-viewbie-color) !important;
    font-weight: 600;
}

.author__group-10 {
    border: 1px solid var(--voyager-color) !important;
    color: var(--voyager-color) !important;
    font-weight: 600;
}

.author__group-11 {
    border: 1px solid var(--moderator-color) !important;
    color: var(--moderator-color) !important;
    font-weight: 600;
}

.author__group-12 {
    border: 1px solid var(--viewbie-color) !important;
    color: var(--viewbie-color) !important;
    font-weight: 600;
}

.author__group-13 {
    border: 1px solid var(--dazzler-color) !important;
    color: var(--dazzler-color) !important;
    font-weight: 600;
}

.author__group-14 {
    border: 1px solid var(--rocker-color) !important;
    color: var(--rocker-color) !important;
    font-weight: 600;
}

.author__group-15 {
    border: 1px solid var(--videobie-color) !important;
    color: var(--videobie-color) !important;
    font-weight: 600;
}

.author__group-16 {
    border: 1px solid var(--channel-moderator-color) !important;
    color: var(--channel-moderator-color) !important;
    font-weight: 600;
}

.author__group-17 {
    border: 1px solid var(--alumni-color) !important;
    color: var(--alumni-color) !important;
    font-weight: 600;
}

.author__group-21 {
    border: 1px solid var(--sparkler-color) !important;
    color: var(--sparkler-color) !important;
    font-weight: 600;
}

.author__group-22 {
    border: 1px solid var(--stunner-color) !important;
    color: var(--stunner-color) !important;
    font-weight: 600;
}

.author__group-23 {
    border: 1px solid var(--trailblazer-color) !important;
    color: var(--trailblazer-color) !important;
    font-weight: 600;
}

.author__group-24 {
    border: 1px solid var(--achiever-color) !important;
    color: var(--achiever-color) !important;
    font-weight: 600;
}

.author__group-25 {
    border: 1px solid var(--staff-color) !important;
    color: var(--staff-color) !important;
    font-weight: 600;
}

.author__group-26 {
    border: 1px solid var(--elite-color) !important;
    color: var(--elite-color) !important;
    font-weight: 600;
}

.author__group-27 {
    border: 1px solid var(--master-color) !important;
    color: var(--master-color) !important;
    font-weight: 600;
}

.author__group-28 {
    border: 1px solid var(--legend-color) !important;
    color: var(--legend-color) !important;
    font-weight: 600;
}

.author__group-29 {
    border: 1px solid var(--icon-color) !important;
    color: var(--icon-color) !important;
    font-weight: 600;
}

.author__group-30 {
    border: 1px solid var(--titan-color) !important;
    color: var(--titan-color) !important;
    font-weight: 600;
}

.star-0, .star-1, .star-2, .star-3, .star-4, .star-5 {
    display: inline-block;
    background: url("https://www.indiaforums.com/content/img/rateemoji25.png") no-repeat;
    overflow: hidden;
    text-indent: -9999px;
    text-align: left;
    vertical-align: middle;
    width: 25px;
    height: 25px;
}

.star-0 {
    background-position: -10px -10px;
}

.star-1 {
    background-position: -55px -10px;
}

.star-2 {
    background-position: -10px -55px;
}

.star-3 {
    background-position: -55px -55px;
}

.star-4 {
    background-position: -100px -10px;
}

.star-5 {
    background-position: -100px -55px;
}

.svg-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

    .svg-wrapper svg {
        fill: currentColor;
    }

.common__overlay {
    position: fixed;
    padding: 1rem;
    display: none;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9;
}

.editpost__content {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 600px;
    z-index: 9 !important;
    background: var(--clr-surface);
}

.editpost__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--clr-neutral-70);
    padding: 1rem;
}

.editpost__svg {
    display: flex;
    align-items: center;
    height: 28px;
    width: 28px;
    padding: 0.5rem;
    cursor: pointer;
}

.editpost__main {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.editpost__container form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.buddies {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--clr-surface);
    max-width: 600px;
    border-radius: 0.5rem;
}

.buddies__overlay {
    position: fixed;
    padding: 0.5rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9 !important;
}

@media only screen and (min-width: 576px) {
    .buddies__overlay {
        padding: 1rem;
    }
}

.buddies__header {
    display: grid;
    grid-template-columns: 1fr auto;
    padding: 0.75rem;
    align-items: center;
    gap: 0.75rem;
    row-gap: 0.125rem;
    border-bottom: 1px solid var(--clr-neutral-70);
}

    .buddies__header > * {
        grid-column: 1;
    }

    .buddies__header p {
        font-size: 12px;
    }

    .buddies__header .svg-wrapper {
        margin-left: auto;
        width: 24px;
        height: 24px;
        padding: 0.25rem;
        grid-column: 2;
        grid-row: 1/span 2;
    }

.buddies__main {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    max-height: 50vh;
    overflow-y: auto;
}

.buddies__item {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    padding: 0.25rem 0.25rem;
    border-bottom: 1px solid var(--clr-neutral-70);
}

    .buddies__item:last-child {
        border-bottom: 0;
    }

    .buddies__item input[type=checkbox] {
        width: 1rem;
        height: 1rem;
    }

@media only screen and (min-width: 360px) {
    .buddies__item {
        padding: 0.25rem 0.5rem;
    }
}

.buddies .author__wrapper {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: 1fr !important;
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
    align-items: center;
    padding: 0.25rem 0.5rem;
}

    .buddies .author__wrapper .badge {
        grid-row: span 2;
    }

@media only screen and (max-width: 359.98px) {
    .buddies .author__wrapper .badge {
        display: none;
    }
}

.buddies .author__image {
    aspect-ratio: 1/1;
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

@media only screen and (min-width: 576px) {
    .buddies .author__image {
        width: 60px;
        height: 60px;
    }
}

.buddies__footer {
    padding: 0.5rem 1rem;
    align-self: start;
}

.buddies__tag {
    cursor: pointer;
}

.quickjump {
    margin: 1rem 0;
    border-top: 1px solid var(--clr-neutral-70);
    border-bottom: 1px solid var(--clr-neutral-70);
    padding: 1rem;
}

.quickjump__container {
    padding: 0.5rem 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
}

@media only screen and (min-width: 576px) {
    .quickjump__container {
        flex-direction: row;
        justify-content: space-between;
    }

        .quickjump__container > * {
            text-overflow: ellipsis;
            overflow: hidden;
            min-width: 50px;
        }

            .quickjump__container > *:focus {
                border-color: #66afe9;
                outline: 0;
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
            }

            .quickjump__container > *:first-child {
                flex: 1;
            }

            .quickjump__container > *:nth-child(2) {
                flex: 1;
            }
}

.author {
    border-bottom: 1px solid var(--clr-neutral-80);
}

.author__wrapper {
    display: flex;
    gap: 0.5rem;
}

    .author__wrapper > *:first-child {
        grid-column: 1;
        grid-row: span 2;
    }

.author__name {
    font-size: 14px;
    font-weight: 600;
}

.author__info {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 0.25rem;
    grid-column: 2;
    grid-row: span 2;
}

.author__username {
    font-size: 14px;
}

.author__posted {
    font-size: 12px;
    font-weight: 600;
    color: var(--clr-neutral-50);
}

.author__image {
    width: 50px;
    height: 50px;
    border-radius: 50%;
}

.author__image-wrapper {
    position: relative;
    flex-shrink: 0;
}

@media only screen and (min-width: 360px) {
    .author__image {
        width: 60px;
        height: 60px;
    }
}

@media only screen and (min-width: 768px) {
    .author__image {
        width: 100px;
        height: 100px;
    }
}

.author__badges {
    margin-left: auto;
    font-size: 0.75rem;
}

.author__group {
    text-transform: capitalize;
}

.author__group, .author__streak {
    font-size: 0.75rem;
}

.celeb-top-5 {
    display: grid;
    grid-auto-flow: column;
    overflow-x: auto;
    overflow-y: hidden;
    gap: 0.5rem;
}

@media only screen and (min-width: 768px) {
    .celeb-top-5 {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
}

@media only screen and (min-width: 992px) {
    .celeb-top-5 {
        overflow: hidden;
        gap: 1rem;
    }
}

.celeb-top {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.celeb-top__image {
    width: 150px;
    height: 150px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.celeb-top__image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.celeb-top__image-rank {
    background: var(--clr-secondary);
    color: var(--clr-on-secondary);
    position: absolute;
    top: 0.25rem;
    left: calc(50% - 70px);
    font-family: var(--font-family-2);
}

.celeb-top__item {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--clr-neutral-70);
    text-transform: uppercase;
}

    .celeb-top__item:last-child {
        border-bottom: 0;
    }

    .celeb-top__item > span {
        margin-left: auto;
    }

.celeb-top__pill {
    align-self: center;
}

.celeb-column {
    min-width: 275px;
    background: var(--clr-surface);
    padding: 0.75rem;
    padding-right: 0.75rem;
    border: 1px solid var(--clr-neutral-70);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

@media only screen and (min-width: 768px) {
    .celeb-column {
        min-width: 0;
    }
}

.celeb-column .section__title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--clr-neutral-70);
    font-size: 1.25rem;
}

.celeb-column:last-child {
    border-right: 1px solid var(--clr-neutral-70);
}

.shows__wrapper {
    display: flex;
    flex-direction: column;
    padding: 1rem 1.25rem;
    padding-bottom: 1rem;
    gap: 1rem;
    background: linear-gradient(to top, #380a2f, #9d183c);
}

    .shows__wrapper .section__title {
        color: var(--clr-always-white);
    }

@media only screen and (min-width: 1168px) {
    .shows__wrapper {
        border-radius: 1rem;
        margin: 0 0.75rem;
    }
}

.shows__button {
    position: absolute;
    top: calc(50% - 18px);
    width: 36px;
    height: 36px;
    padding: 0.5rem;
    background: var(--clr-secondary);
    color: var(--clr-always-white);
    opacity: 0.8;
    border-radius: 50%;
}

.shows__button-left {
    left: -0.75rem;
    transform: rotate(90deg);
}

.shows__button-right {
    right: -0.75rem;
    transform: rotate(270deg);
}

.shows__carousel {
    display: flex;
    gap: 1rem;
    align-items: stretch;
    overflow-x: auto;
    scrollbar-width: none; /* For Firefox */
    -webkit-scrollbar: none;
}

    .shows__carousel::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
    }

.shows__carousel-container {
    position: relative;
}

.shows__item {
    display: flex;
    flex-direction: column;
    width: 275px;
    background: var(--clr-surface);
    padding: 0.75rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
}

.shows__content {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}

.shows__ranking {
    display: flex;
    justify-content: space-between;
    text-transform: capitalize;
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--clr-neutral-80);
    font-size: 13px;
}

    .shows__ranking:last-child {
        margin-bottom: 1rem;
    }

.shows__rank {
    flex-shrink: 0;
}

.shows__btn {
    margin-top: auto;
    align-self: center;
}

.shows__image {
    width: 220px;
    align-self: center;
}

.parent::after {
    content: " ";
    width: 20px;
    height: 20px;
    background: url("https://www.indiaforums.com/content/img/asidemoreicon.png") no-repeat;
    position: absolute;
    top: 50%;
    right: -10px;
    z-index: 1;
    transform: translateY(-50%);
}

.homepage {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.homepage__gallery {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.homepage__latest {
    display: flex;
    flex-direction: column;
}

.homepage__section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media only screen and (min-width: 576px) {
    .homepage__section {
        width: -webkit-fill-available;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.homepage__description {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: space-between;
    align-items: start;
    font-size: 14px;
}

    .homepage__description .featured {
        order: 2;
    }

.homepage__headbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    row-gap: 0.25rem;
    width: 100%;
    flex-wrap: wrap;
}

    .homepage__headbar .section__title,
    .homepage__headbar .section__subtitle {
        margin-right: auto;
    }

.homepage__title {
    text-transform: uppercase;
    font-family: "Oswald", sans-serif;
    font-weight: 400;
    grid-column: 1;
}

.homepage__caption {
    order: 1;
    width: 100%;
    width: 100%;
}

.homepage__movies {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .homepage__movies .category__container {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

.homepage__category1 {
    grid-template-columns: repeat(1, 1fr);
}

.homepage__category2 {
    grid-template-columns: repeat(2, 1fr);
}

.homepage__category3 {
    grid-template-columns: repeat(3, 1fr);
}

.homepage__category4 {
    grid-template-columns: repeat(4, 1fr);
}

.homepage__category {
    display: flex;
    flex-wrap: wrap;
}

    .homepage__category .parent {
        position: relative;
    }

    .homepage__category .active {
        border-bottom: 3px solid var(--clr-secondary);
    }

.homepage__category-item {
    text-transform: uppercase;
    font-size: 14px;
    text-align: center;
    min-width: 100px;
    padding: 0.5rem 0.75rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    background: var(--clr-surface);
    border-right: 1px solid var(--clr-neutral-80);
    border-bottom: 1px solid var(--clr-neutral-80);
}

    .homepage__category-item:hover {
        color: var(--clr-secondary);
    }

    .homepage__category-item:nth-child(1), .homepage__category-item:nth-child(2), .homepage__category-item:nth-child(3), .homepage__category-item:nth-child(4) {
        border-top: 1px solid var(--clr-neutral-80);
    }

    .homepage__category-item:nth-child(4), .homepage__category-item:nth-child(5), .homepage__category-item:first-child {
        border-left: 1px solid var(--clr-neutral-80);
    }

@media only screen and (min-width: 576px) {
    .homepage__category-item {
        border-top: 1px solid var(--clr-neutral-80);
    }

        .homepage__category-item:nth-child(4n), .homepage__category-item:nth-child(5n) {
            border-left: none;
        }
}

.homepage__btn {
    font-size: 14px;
    text-transform: uppercase;
    background: var(--clr-secondary);
    color: var(--clr-on-secondary);
}

.homepage .movie-page__top-latest {
    padding: 0.5rem 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(1, 1fr);
}

@media only screen and (min-width: 576px) {
    .homepage .movie-page__top-latest {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 768px) {
    .homepage .movie-page__top-latest {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media only screen and (min-width: 992px) {
    .homepage .movie-page__top-latest {
        padding: 0 !important;
    }
}

.frequent__forums {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    row-gap: 0.25rem;
}

@media only screen and (min-width: 576px) {
    .frequent__forums {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media only screen and (min-width: 768px) {
    .frequent__forums {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media only screen and (min-width: 992px) {
    .frequent__forums {
        grid-template-columns: repeat(8, 1fr);
    }
}

.frequent__item {
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    background: url("https://www.indiaforums.com/content/img/feature_forum_bg.png") no-repeat;
    background-size: cover;
    padding: 0.75rem;
    text-transform: uppercase;
    color: var(--clr-always-white);
    border-radius: 0.25rem;
    font-family: var(--font-family-2);
    font-size: 13px;
}

.tvnews,
.tvshows,
.homepage__gallery,
.latestvids {
    padding: 1rem 0;
}

.tvnews__wrapper,
.tvshows__wrapper,
.homepage__gallery__wrapper,
.latestvids__wrapper {
    width: 100%;
}

@media only screen and (min-width: 576px) {
    .homepage__gallery .galleries__main,
    .homepage__gallery .webstories__main {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media only screen and (min-width: 768px) {
    .homepage__gallery .galleries__main,
    .homepage__gallery .webstories__main {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tvnews__container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
}

    .tvnews__container .homepage__btn {
        align-self: center;
    }

.tvnews__wrapper {
    display: flex;
    gap: 0.75rem;
    flex-direction: column;
}

.tvnews__image {
    grid-row: 1;
    grid-column: 1;
}

    .tvnews__image img {
        aspect-ratio: 4/3;
        -o-object-fit: cover;
        object-fit: cover;
    }

@media only screen and (min-width: 576px) {
    .tvnews__image img {
        aspect-ratio: 16/9;
        border-top-right-radius: 0.5rem;
        border-top-left-radius: 0.5rem;
    }
}

.tvnews__content {
    display: flex;
    flex-direction: column;
    grid-row: 1;
    grid-column: 2;
    padding: 0 0.25rem;
}

@media only screen and (min-width: 576px) {
    .tvnews__content {
        gap: 0.25rem;
        padding: 0.5rem;
        flex: 1;
    }
}

.tvnews__category, .tvnews__attribute {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.tvnews__category {
    margin-right: 0.5rem;
}

.tvnews__category-lifestyle {
    color: #b75e06;
}

.tvnews__category-sports {
    color: #018482;
}

.tvnews__category-tv {
    color: #4169fb;
}

.tvnews__category-movies {
    color: #d100ce;
}

.tvnews__category-digital {
    color: #38854e;
}

.tvnews__attribute-upcoming {
    color: var(--clr-info);
}

.tvnews__attribute-show-update {
    color: var(--clr-warning);
}

.tvnews__attribute-review {
    color: var(--clr-success);
}

.tvnews__attribute-breaking {
    color: var(--clr-secondary);
}

.tvnews__attribute-exclusive {
    color: var(--clr-secondary-2);
}

.tvnews__attribute-opinion {
    color: var(--clr-danger);
}

.tvnews__item {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 0.5rem;
    font-size: 14px;
    padding: 0.5rem;
    border: 1px solid var(--clr-neutral-80);
    border-radius: 0.25rem;
    background: var(--clr-surface);
}

@media only screen and (min-width: 576px) {
    .tvnews__item {
        border-radius: 0.5rem;
        padding: 0;
        overflow: hidden;
        gap: 0;
    }
}

.tvnews__item-title {
    grid-column: span 2;
    font-weight: 600;
}

.tvnews__item-btn {
    text-align: right;
}

.tvnews__item-posted {
    font-weight: 600;
    font-size: 12px;
    color: var(--clr-neutral-30);
}

.tvnews__item .flex-space-between {
    margin-top: auto;
}

@media only screen and (min-width: 992px) {
    .tvnews__item-sm {
        display: grid !important;
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid var(--clr-neutral-70);
        padding-bottom: 0.5rem;
    }

        .tvnews__item-sm .tvnews__image img {
            aspect-ratio: 4/3;
            -o-object-fit: cover;
            object-fit: cover;
            border-radius: 0 !important;
        }

        .tvnews__item-sm .tvnews__content {
            padding: 0 0.5rem;
            gap: 0;
        }
}

@media only screen and (max-width: 575.98px) {
    .tvnews__item-lg {
        display: flex;
        flex-direction: column;
        border: 1px solid var(--clr-neutral-70);
        border-radius: 0.5rem;
        padding-bottom: 0;
        overflow: hidden;
        gap: 0;
    }

        .tvnews__item-lg .tvnews__content {
            padding: 0.5rem;
            gap: 0;
        }
}

.gallery {
    padding: 0 !important;
}

.tvshows {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tvshows__wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex-shrink: 0;
}

.tvshows__image {
    width: 33%;
    border-radius: 0.25rem;
}

@media only screen and (min-width: 576px) {
    .tvshows__image {
        width: 100%;
        border-radius: 0.5rem;
    }
}

.tvshows__item {
    display: flex;
    gap: 0.5rem;
    font-size: 14px;
    background: var(--clr-surface);
    padding: 0.5rem;
    border: 1px solid var(--clr-neutral-80);
    border-radius: 0.5rem;
}

@media only screen and (min-width: 576px) {
    .tvshows__item {
        border-radius: 0;
        padding: 0;
        overflow: hidden;
        gap: 0.25rem;
        border: 0;
        background: none;
    }
}

.tvshows__title {
    grid-column: span 2;
    font-weight: 600;
}

@media only screen and (min-width: 576px) {
    .tvnews__wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .tvnews__ad-banner {
        grid-column: 1/-1; /* span full width */
    }

    .tvshows__wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
        align-items: start;
    }

    .tvnews__item {
        display: flex;
        flex-direction: column;
    }

    .tvnews__image img {
        width: 100%;
    }

    .tvshows__item {
        flex-direction: column;
    }

    .tvshows__image img {
        width: 100%;
    }
}

@media only screen and (min-width: 768px) {
    .tvnews__wrapper {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 0.5rem;
    }
}

@media only screen and (min-width: 576px) {
    .tvnews__wrapper,
    .tvshows__wrapper {
        gap: 1rem;
    }

    .tvnews__image {
        width: 100%;
    }
}

@media only screen and (min-width: 992px) {
    .sidebar {
        justify-content: flex-start;
    }
}

.gallery {
    width: 100%;
}

.gallery--wrapper {
    gap: 1rem;
}

.galleries__main {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.galleries__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.galleries__title {
    font-size: 14px;
}

.movie-page__top {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.movie-page__top-image {
    display: flex;
}

    .movie-page__top-image > * {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.movie-page__top-content {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--clr-secondary);
    color: var(--clr-on-secondary);
    padding: 0.5rem;
}

.movie-page__top-title {
    font-size: 1.125rem;
}

.movie-page__top-rating {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--clr-primary);
    color: var(--clr-on-secondary);
    padding: 0.5rem;
}

@media only screen and (min-width: 576px) {
    .movie-page__top {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .movie-page__top-image {
        grid-column: 1;
        grid-row: 1;
    }

    .movie-page__top-content {
        grid-column: 2;
        grid-row: 1;
    }

    .movie-page__top-rating {
        grid-column: 1/span 2;
    }
}

@media only screen and (min-width: 768px) {
    .movie-page__top {
        display: grid;
        grid-template-columns: 250px 1fr 1fr;
    }

    .movie-page__top-image {
        grid-column: 1;
        grid-row: 1;
    }

    .movie-page__top-content {
        grid-column: 2;
        grid-row: 1;
        padding: 1rem;
    }

    .movie-page__top-rating {
        grid-column: 3;
        padding: 1rem;
    }
}

.movie-page__top-latest {
    display: flex;
    flex-direction: column;
}

@media only screen and (min-width: 768px) {
    .movie-page__top-latest {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
    }
}

.movie-page__top-latest .active {
    background: var(--clr-secondary);
    color: var(--clr-on-secondary);
}

    .movie-page__top-latest .active .movie-page__main-item-language {
        color: var(--clr-on-secondary);
    }

    .movie-page__top-latest .active .tag-item,
    .movie-page__top-latest .active .genre-item {
        color: var(--clr-on-secondary);
        border: 1px solid var(--clr-on-secondary);
        background: var(--clr-secondary);
    }

    .movie-page__top-latest .active:hover {
        background: var(--clr-secondary);
        color: var(--clr-on-secondary) !important;
    }

        .movie-page__top-latest .active:hover .movie-page__top-item-name {
            color: var(--clr-on-secondary);
        }

.movie-page__top-item {
    display: flex;
    gap: 0.5rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-70);
    font-size: 14px;
}

    .movie-page__top-item:hover .movie-page__top-item-name {
        color: var(--clr-secondary);
    }

.movie-page__top-item-image {
    width: 100px;
    aspect-ratio: 2/3;
}

.movie-page__top-item-content {
    display: flex;
    flex-direction: column;
    padding: 0.25rem;
    font-weight: 600;
    gap: 0.5rem;
}

.movie-page__top-item-rating {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 0.125rem;
}

    .movie-page__top-item-rating > div {
        scale: 1.1;
    }

.movie-page__main {
    display: flex;
    margin: 1rem 0;
    gap: 1rem;
    flex-direction: column;
}

    .movie-page__main .active {
        background: var(--clr-secondary);
        color: var(--clr-on-secondary);
    }

        .movie-page__main .active .movie-page__main-item-language {
            color: var(--clr-on-secondary);
        }

        .movie-page__main .active .tag-item,
        .movie-page__main .active .genre-item {
            color: var(--clr-on-secondary);
            border: 1px solid var(--clr-on-secondary);
            background: var(--clr-secondary);
        }

        .movie-page__main .active:hover {
            background: var(--clr-secondary);
            color: var(--clr-on-secondary);
        }

.movie-page__main-item {
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-70);
}

    .movie-page__main-item:hover .movie-page__top-item-name {
        color: var(--clr-secondary);
    }

.movie-page__main-item-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
    font-weight: 600;
}

.movie-page__main-item-rating {
    display: flex;
    gap: 0.5rem;
}

.movie-page__container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.75rem;
}

@media only screen and (min-width: 360px) {
    .movie-page__container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media only screen and (min-width: 576px) {
    .movie-page__container {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }
}

.genre,
.tag {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.genre-item,
.tag-item {
    display: flex;
    align-items: baseline;
    color: var(--clr-black);
    border: 1px solid var(--clr-neutral-70);
    font-size: 11px;
}

.genre-item {
    border-radius: 0.25rem;
    padding: 0.125rem 0.25rem;
}

.tag__item {
    display: flex;
    align-items: center;
    background: var(--clr-neutral-85);
    border: 1px solid var(--clr-neutral-70);
    padding: 0.25rem;
    border-radius: 1rem;
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

    .tag__item:hover {
        text-decoration: none !important;
        transform: scale(1.025);
        box-shadow: 1px 1px 2px var(--clr-neutral-70);
    }

.tag__user {
    font-size: 12px;
    color: var(--clr-black);
    padding: 0 0.5rem;
    pointer-events: none;
}

.tag__photo {
    height: 20px;
    width: 20px;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
    pointer-events: none;
}

.tag__hidden {
    display: none;
}

.tag__more {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--clr-neutral-85);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 10px;
    cursor: pointer;
    color: var(--clr-black);
    border: 1px solid var(--clr-neutral-70);
    transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out;
}

    .tag__more:hover {
        transform: scale(1.025);
        box-shadow: 1px 1px 2px var(--clr-neutral-70);
    }

.online {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
}

.online-top {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid var(--clr-neutral-70);
}

.online-bottom {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem 0;
}

.online-group {
    font-size: 14px;
    padding: 0 0.25rem;
    border-radius: 0.25rem;
    color: var(--clr-always-white);
}

.online-members__list {
    display: flex;
    flex-wrap: wrap;
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
    font-size: 14px;
}

    .online-members__list > a {
        font-weight: 600;
        color: var(--clr-neutral-30);
    }

        .online-members__list > a:after {
            content: ",";
        }

        .online-members__list > a:last-child::after {
            content: "";
        }

.online-members__ladder {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.25rem;
}

    .online-members__ladder:hover {
        text-decoration: none;
    }

.role-loggedin .js-guest-content,
.role-guest .js-user-content,
.role-guest .js-moderator-content,
.role-guest .js-admin-content {
    display: none;
}

.role-admin .js-admin-content,
.role-moderator .js-moderator-content,
.role-loggedin .js-user-content,
.role-guest .js-guest-content {
    display: block;
}

    .role-admin .js-admin-content.js-flex,
    .role-moderator .js-moderator-content.js-flex,
    .role-loggedin .js-user-content.js-flex,
    .role-guest .js-guest-content.js-flex {
        display: flex;
    }

    .role-admin .js-admin-content.js-grid,
    .role-moderator .js-moderator-content.js-grid,
    .role-loggedin .js-user-content.js-grid,
    .role-guest .js-guest-content.js-grid {
        display: grid;
    }

.js-timestamp {
    cursor: pointer;
}

#js-floating {
    display: none;
    width: -moz-max-content;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--clr-always-black);
    color: var(--clr-always-white);
    padding: 5px;
    border-radius: 4px;
    font-size: 90%;
}

.js-tooltip {
    cursor: pointer;
}

.js-arrow {
    position: absolute;
    background: black;
    width: 8px;
    height: 8px;
    transform: rotate(45deg);
}

.js-user {
    cursor: pointer;
}

#js-hovercard {
    display: none;
    width: -moz-max-content;
    width: max-content;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 4px;
    font-size: 90%;
}

.hovercard__user .js-arrow {
    z-index: 1;
    background: var(--clr-neutral-70);
}

.hovercard__user .js-content {
    z-index: 10000003;
    position: relative;
}

.timestamp__tooltip .js-arrow {
    z-index: 1;
    background: var(--clr-always-black);
}

.warning {
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    max-width: 600px;
    width: 100%;
    border-radius: 0.5rem;
}

.warning__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9 !important;
}

.warning__header {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 0.75rem;
    border-bottom: 1px solid var(--clr-neutral-70);
}

    .warning__header .svg-wrapper {
        margin-left: auto;
        width: 24px;
        height: 24px;
        padding: 0.25rem;
    }

.warning__svg {
    cursor: pointer;
}

.warning__content {
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 1rem;
    gap: 1rem;
    max-height: 50vh;
    overflow-y: auto;
}

.warning__anonymous {
    display: flex;
    align-items: start;
    gap: 0.5rem;
}

    .warning__anonymous > input {
        height: 1rem;
        width: 1rem;
    }

.warning__action {
    display: flex;
    align-items: center;
    gap: 1rem;
}

    .warning__action .svg-wrapper {
        cursor: pointer;
        flex-shrink: 0;
        height: 28px;
        width: 28px;
        padding: 0.25rem;
        background: var(--clr-secondary);
        border-radius: 50%;
    }

        .warning__action .svg-wrapper svg {
            fill: currentColor;
            color: var(--clr-white);
        }

.warning__bar {
    display: flex;
    width: 84px;
    height: 10px;
    border: 1px solid var(--clr-neutral-70);
}

.warning__level {
    flex: 1;
    height: 100%;
    border-right: 1px solid var(--clr-neutral-70);
}

    .warning__level:last-child {
        border-right: 0;
    }

.warning__note {
    width: 100%;
}

.warning__history .ico-sm ico-arrow-up svg {
    color: var(--clr-secondary) !important;
}

.warning__history .arrow-down svg {
    color: var(--clr-success) !important;
}

.warning table {
    border: 1px solid #e6e6e6;
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
}

.warning thead {
    background: var(--clr-neutral-80);
}

.warning tbody a {
    color: #0078c5;
    cursor: pointer;
}

    .warning tbody a:hover {
        text-decoration: underline;
    }

.warning tbody label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .warning tbody label > input {
        flex-shrink: 0;
        height: 1rem;
        width: 1rem;
    }

.warning td,
.warning th {
    padding: 0.5rem;
    border: 1px solid var(--clr-neutral-70);
}

.adWideMin {
    min-height: 280px;
}

@media only screen and (min-width: 768px) {
    .adWideMin {
        min-height: 120px;
    }
}

.adWideMinSmall {
    min-height: 120px;
}

.adBoxMin {
    min-height: 280px;
}

.hibernation {
    background: #b3e0dc;
}

    .hibernation p {
        padding: 0.25rem;
        font-size: 13px;
        text-align: center;
    }

        .hibernation p > a {
            font-weight: 600;
            color: var(--clr-secondary);
        }

            .hibernation p > a:hover {
                text-decoration: underline;
            }

.hibernation__overlay {
    position: fixed;
    padding: 1rem;
    display: none;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9;
}

.hibernation__content {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    width: 100%;
    gap: 2rem;
    max-width: 600px;
    z-index: 9 !important;
    background: var(--clr-surface);
    padding: 2rem;
}

.hibernation__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.hibernation__image {
    display: flex;
    justify-content: center;
}

    .hibernation__image > * {
        width: 150px;
        height: 150px;
    }

.active-user {
    position: relative;
    border: 2px solid var(--clr-success);
    border-radius: 50%;
}

    .active-user::before {
        content: "";
        position: absolute;
        top: 80%;
        left: 80%;
        width: 15%;
        height: 15%;
        border-radius: 50%;
        background: var(--clr-success);
        border: 1px solid var(--clr-white);
        z-index: 1;
    }

#google_translate_element {
    margin: 0 auto;
}

.category__filter {
    display: flex;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

    .category__filter::-webkit-scrollbar {
        display: none;
    }

    .category__filter .active {
        border: 1px solid var(--clr-secondary);
        background: var(--clr-surface);
        color: var(--clr-secondary);
    }

.category__filter-item {
    font-size: 14px;
    border-radius: 0.25rem;
    border: 1px solid var(--clr-neutral-70);
    padding: 0 0.5rem;
    flex-shrink: 0;
}

.myForum-image {
    border-radius: 50%;
}

.no-padding {
    padding: 0 !important;
}

.go-to-top {
    position: fixed;
    bottom: 100px;
    right: 0;
    padding: 0.5rem;
    background: var(--clr-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--clr-always-white);
    z-index: 1;
    text-transform: uppercase;
    font-size: 10px;
    opacity: 0.5;
    transition: all 0.3s ease-in-out;
}

    .go-to-top:hover {
        text-decoration: none;
        opacity: 1 !important;
    }

    .go-to-top .svg-wrapper {
        width: 24px;
        height: 24px;
        padding: 0.25rem;
        transform: rotate(180deg);
    }

.goog-te-gadget {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.goog-te-combo {
    width: 200px;
}

/* Google Translate: suppress the browser-injected banner, hover feedback popup
   ("Rate this translation…"), and text-highlight that otherwise float over the page. */
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget-icon,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}

body {
    top: 0 !important;
}

.x-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding-bottom: 4px;
}

    .x-scroll:active {
        cursor: grabbing;
    }

.message-mods {
    font-weight: 600;
    background: var(--clr-neutral-80);
    text-transform: capitalize;
}

.greyBG {
    background: var(--clr-neutral-85);
}

@media only screen and (min-width: 992px) {
    .greyBG {
        border-radius: 0.5rem;
    }
}

.progress-circle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: conic-gradient(var(--percentage-color) calc(var(--percentage) * 1%), var(--clr-neutral-70) calc(var(--percentage) * 1%));
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.25rem;
    scale: 1 !important;
}

.inner-circle {
    position: absolute;
    width: 80%;
    height: 80%;
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-85);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    color: var(--clr-black);
    scale: 1 !important;
    font-family: var(--font-family-2);
}

#divTopicsByType {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.notification-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2 !important;
    display: none;
    justify-content: center;
    align-items: end;
    padding: 7rem 1rem;
}

@media only screen and (min-width: 576px) {
    .notification-overlay {
        padding: 5rem 1.5rem;
        align-items: start;
        display: none;
    }
}

.notification-overlay-content {
    display: flex;
    flex-direction: column;
    text-align: left;
    align-items: end;
    gap: 0.75rem;
    background: var(--clr-surface);
    padding: 1rem;
    border: 1px solid var(--clr-neutral-60);
    max-width: 600px;
    border-radius: 0.5rem;
}

    .notification-overlay-content p {
        font-size: 13px;
        align-self: stretch;
        margin-top: -0.5rem;
    }

@media only screen and (min-width: 576px) {
    .notification-overlay-content {
        margin-left: auto;
    }
}

.notification-overlay-ios {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2 !important;
    display: none;
    justify-content: center;
    align-items: end;
    padding: 1rem 2rem;
}

.notification-overlay-content-ios {
    flex-direction: column;
    gap: 0.25rem;
    text-align: left;
    position: relative;
    background: var(--clr-surface);
    padding: 0.5rem;
    border: 1px solid var(--clr-neutral-60);
    max-width: 450px;
}

    .notification-overlay-content-ios .svg-wrapper {
        width: 20px;
        height: 20px;
        padding: 0.25rem;
    }

.notification-overlay-content-ios-caret {
    position: absolute;
    bottom: -10px;
    left: calc(50% - 5px);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--clr-white); /* Change the color to match your design */
}

.notification-title {
    font-size: 1rem !important;
    font-weight: 600;
}

.notification-checkbox__container {
    display: flex;
    gap: 0.5rem;
}

    .notification-checkbox__container label {
        text-transform: capitalize;
        font-size: 14px;
    }

        .notification-checkbox__container label:hover {
            cursor: pointer;
        }

.user-progress {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}

    .user-progress:hover {
        text-decoration: none;
    }

.user-progress-current, .user-progress-next, .user-progress-caption {
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    padding: 0.25rem;
}

.user-progress-current {
    text-align: left;
}

.user-progress-next {
    text-align: right;
}

.user-progress-caption {
    grid-column: span 2;
    text-align: center;
    padding-top: 0.25rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
}

    .user-progress-caption a {
        font-size: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--clr-neutral-80);
        width: 1rem;
        height: 1rem;
        border-radius: 50%;
    }

.user-progress-bar {
    border-radius: 1rem;
    overflow: hidden;
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    width: 100%;
    height: 25px;
    justify-items: right;
    border: 1px solid var(--clr-white);
    position: relative;
}

.user-progress-bar-1, .user-progress-bar-2, .user-progress-bar-3, .user-progress-bar-4, .user-progress-bar-5 {
    background: transparent;
    width: 100%;
    border-right: 1px solid var(--clr-white);
    z-index: 1;
    color: var(--clr-white);
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .user-progress-bar-1:last-child, .user-progress-bar-2:last-child, .user-progress-bar-3:last-child, .user-progress-bar-4:last-child, .user-progress-bar-5:last-child {
        border-right: 0;
    }

.user-progress-bar-filled {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0;
    background: var(--clr-neutral-70) !important;
}

.reaction__overlay {
    position: fixed;
    padding: 1rem;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.3);
    z-index: 9;
}

.reaction__container {
    border-radius: 0.5rem;
    width: 100%;
    max-width: 600px;
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    background: var(--clr-surface);
}

.reaction__header {
    gap: 1rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--clr-neutral-70);
}

.reaction__tabs {
    display: flex;
    overflow-x: auto;
}

    .reaction__tabs input {
        display: none;
    }

@media only screen and (min-width: 768px) {
    .reaction__tabs {
        overflow-x: hidden;
    }
}

.reaction__radio:checked + .reaction__tab {
    color: var(--clr-secondary);
    border-bottom: 3px solid var(--clr-secondary);
}

.reaction__tab {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.25rem;
    text-transform: uppercase;
    padding: 0.25rem 0.5rem;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}

.reaction__svg .svg-wrapper {
    width: 24px;
    height: 24px;
    padding: 0.25rem;
}

.reaction__content {
    max-height: 50vh;
    overflow-y: auto;
}

    .reaction__content .author__wrapper {
        display: grid;
        grid-template-columns: auto 1fr auto;
        grid-template-rows: 1fr !important;
        -moz-column-gap: 0.5rem;
        column-gap: 0.5rem;
        align-items: center;
        padding: 0.25rem 0.5rem;
        border-bottom: 1px solid var(--clr-neutral-70);
    }

        .reaction__content .author__wrapper:last-child {
            border-bottom: 0;
        }

    .reaction__content .author__name {
        color: var(--clr-info);
        font-size: 15px;
    }

    .reaction__content .author__username {
        font-size: 14px;
    }

    .reaction__content .author__image {
        border-radius: 50%;
        width: 60px;
        height: 60px;
    }

    .reaction__content .author__image-wrapper {
        grid-column: 1;
        position: relative;
    }

    .reaction__content .author__info {
        display: flex;
        flex-direction: column;
        grid-column: 2;
    }

    .reaction__content .author__badges {
        margin-left: auto;
        font-size: 0.75rem;
    }

    .reaction__content .author__group, .reaction__content .author__streak {
        font-size: 0.75rem;
    }

    .reaction__content > * {
        display: none;
        flex-direction: column;
    }

        .reaction__content > *:first-child {
            display: flex;
        }

.reaction__reaction {
    position: absolute;
    bottom: -2px;
    right: -2px;
}

.topic__filter {
    position: relative;
    display: inline-block;
    width: 200px;
}

.topic__filter-option {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem;
    font-size: 13px;
}

.topic__filter-content .top-nav__item {
    padding-right: 0.5rem !important;
}

.topic__filter-color {
    background: var(--clr-black);
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.topic__filter-button {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--clr-black);
    padding: 0.25rem;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
}

    .topic__filter-button::after {
        content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="down-icon" viewBox="0 0 512 298.04"><path fill-rule="nonzero" d="M12.08 70.78c-16.17-16.24-16.09-42.54.15-58.7 16.25-16.17 42.54-16.09 58.71.15L256 197.76 441.06 12.23c16.17-16.24 42.46-16.32 58.71-.15 16.24 16.16 16.32 42.46.15 58.7L285.27 285.96c-16.24 16.17-42.54 16.09-58.7-.15L12.08 70.78z"/></svg>');
        width: 1rem;
        height: 1rem;
        position: absolute;
        top: 0.75rem;
        scale: 0.5;
        right: 0.5rem;
        transform: translateY(-50%);
    }

.topic__filter-content {
    display: none;
    position: absolute;
    width: 100%;
    top: 2rem;
    right: 0;
    background-color: var(--clr-surface);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.5);
    z-index: 1;
    list-style-type: none;
    max-height: 50vh;
    overflow: auto;
}

    .topic__filter-content a:hover {
        background-color: var(--clr-neutral-80);
    }

#poll-section {
    display: none;
}

.required-input::after {
    content: "Required";
    font-style: italic;
    font-size: 11px;
    color: var(--clr-danger);
    width: 80%;
}

.addmedia {
    display: block;
    margin: 0 auto !important;
}

.addmedia-giphy:after {
    content: "via Giphy";
    display: block;
    padding-bottom: 0.75rem;
    font-size: 12px;
    text-align: center;
}

.addmedia-tenor:after {
    content: url("/assets/img/via_tenor_logo_grey.png"); /* Replace with your image URL */
    display: block;
    padding-bottom: 0.75rem;
    text-align: center;
}

.addmedia-unsplash, .addmedia-indiaforums {
    display: block;
    padding-bottom: 0.75rem;
    font-size: 12px;
    text-align: center;
}

.image-item {
    cursor: pointer;
}

.forum-scroller__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--clr-secondary);
    border-radius: 50%;
    flex-shrink: 0;
    color: var(--clr-secondary);
    background-color: var(--clr-white);
    transition: all 0.3s ease-in-out;
    padding: 0.325rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    pointer-events: auto;
}

    .forum-scroller__btn:hover {
        scale: 1.1;
        opacity: 1;
    }

.forum-scroller__btn-left {
    left: 0.5rem;
}

    .forum-scroller__btn-left svg {
        transform: rotate(90deg);
    }

.forum-scroller__btn-right {
    right: 0.5rem;
}

    .forum-scroller__btn-right svg {
        transform: rotate(-90deg);
    }

.forum-scroller__btn-left-wrapper, .forum-scroller__btn-right-wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

    .forum-scroller__btn-left-wrapper::before, .forum-scroller__btn-right-wrapper::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100%;
        pointer-events: none;
    }

.forum-scroller__btn-left-wrapper {
    left: 0;
}

    .forum-scroller__btn-left-wrapper::before {
        left: 0;
        background: linear-gradient(to right, var(--clr-body), rgba(255, 255, 255, 0));
    }

.forum-scroller__btn-right-wrapper {
    right: 0;
}

    .forum-scroller__btn-right-wrapper::before {
        right: 0;
        background: linear-gradient(to left, var(--clr-body), rgba(255, 255, 255, 0));
    }

.forum-scroller__container {
    display: flex;
    gap: 1rem;
    padding: 0.5rem;
    background-color: var(--clr-white);
    border: 1px solid var(--clr-neutral-70);
    scrollbar-width: none;
    position: relative;
    margin-top: 1rem;
}

    .forum-scroller__container .tvnews__item {
        min-width: 200px;
        max-width: 240px;
    }

    .forum-scroller__container .quiz-item {
        min-width: 240px;
        max-width: 250px;
    }

    .forum-scroller__container:before {
        position: absolute;
        font-size: 12px;
        font-weight: 600;
        color: var(--clr-black);
        background: var(--clr-neutral-80);
        border: 1px solid var(--clr-neutral-70);
        border-bottom: 0;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        padding: 0.25rem 0.75rem;
        top: -27px;
        left: -1px;
        z-index: 1;
    }

.forum-scroller__wrapper {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .forum-scroller__wrapper::-webkit-scrollbar {
        display: none;
    }

.forum-scroller__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
    min-width: 200px;
    max-width: 240px;
}

.forum-scroller__image {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    -o-object-fit: cover;
    object-fit: cover;
}

.forum-scroller__title {
    font-size: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quiz-item {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    overflow: hidden;
    border: 1px solid var(--clr-neutral-70);
    background: var(--clr-surface);
}

.quiz-item__category {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--clr-secondary);
}

    .quiz-item__category:after {
        content: "•";
        margin-left: 0.5rem;
        color: var(--clr-secondary);
    }

.quiz-item__type {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
}

.quiz-item__personality {
    color: var(--clr-info);
}

.quiz-item__trivia {
    color: var(--clr-warning);
}

.quiz-item__quiz {
    color: var(--clr-success);
}

.quiz-item .author__wrapper {
    align-items: center;
}

.quiz-item .author__image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.quiz-item .author__image-wrapper {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
}

.quiz-item .author__name {
    font-size: 12px;
}

.quiz-item__img img {
    aspect-ratio: 4/3;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: all 0.5s ease-in-out;
}

.quiz-item__title {
    font-size: 1rem;
    font-weight: 600;
}

.quiz-item__description {
    font-size: 12px;
    color: var(--clr-neutral-20);
}

.quiz-item__content {
    display: flex;
    flex-direction: column;
    padding: 0.5rem;
    flex: 1;
    gap: 0.25rem;
}

.quiz-item__stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    row-gap: 0.25rem;
    align-items: center;
    padding-top: 0.25rem;
}

.quiz-item__stats-item {
    display: flex;
    font-size: 12px;
}

    .quiz-item__stats-item svg {
        margin-right: 0.5rem;
        width: 0.75rem;
        height: 0.75rem;
        color: var(--clr-neutral-60);
    }

.quiz-item__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quiz-item-lg {
    position: relative;
    border-radius: 0.5rem;
    overflow: hidden;
}

    .quiz-item-lg:hover .quiz-item__img img {
        transform: scale(1.2);
    }

    .quiz-item-lg .quiz-item__content {
        position: absolute;
        bottom: 0;
        width: 100%;
        color: var(--clr-white);
        height: 100%;
        gap: 0;
        padding: 0.5rem;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.01));
    }

    .quiz-item-lg .quiz-item__title {
        font-size: 14px;
        margin-top: auto;
    }

    .quiz-item-lg .quiz-item__description {
        font-size: 12px;
        color: var(--clr-neutral-70);
    }

    .quiz-item-lg .quiz-item__stats-item {
        font-size: 10px;
    }

.trending-topics:before {
    content: "Trending Topics";
}

.related-news:before {
    content: "Related News";
}

.categories {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    overflow-x: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

    .categories::-webkit-scrollbar {
        display: none;
    }

.categories-item {
    font-size: 12px;
    border-radius: 0.25rem;
    border: 1px solid var(--clr-neutral-70);
    flex-shrink: 0;
    padding: 0 0.5rem;
    transition: all 0.3s ease-in;
}

    .categories-item:hover {
        background: var(--clr-neutral-85);
        text-decoration: none;
        scale: 1.075;
    }

    .categories-item.active {
        color: var(--clr-secondary) !important;
        border-color: var(--clr-secondary) !important;
    }

.blink {
    animation: blink 1s infinite;
}

@keyframes blink {
    0% {
        opacity: 0.75;
        scale: 0.95;
    }

    50% {
        opacity: 1;
        scale: 1;
    }

    100% {
        opacity: 0.75;
        scale: 0.95;
    }
}

.webstories-item {
    display: flex;
    flex-direction: column;
    position: relative;
    border: 1px solid var(--clr-neutral-70);
    background: var(--clr-surface);
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.11);
    margin-bottom: 0.25rem;
}

.webstories-item-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem;
}

.webstories-item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    gap: 0.5rem;
    color: var(--clr-neutral-50);
    font-size: 12px;
}

.webstories-item-image {
    overflow: hidden;
}

    .webstories-item-image img {
        aspect-ratio: 3/4;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.webstories-item-date {
    font-size: 12px;
    color: var(--clr-neutral-50);
}

.webstories-item-title {
    font-size: 14px;
    font-weight: 600;
}

.webstories-icon {
    position: absolute;
    top: 0.75rem;
    right: 0.25rem;
    height: 2rem;
    width: 2rem;
    padding: 0.5rem;
    color: var(--clr-always-white);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.05) 50%, transparent 75%);
}

.webstories-count {
    display: flex;
    gap: 0.25rem;
    position: absolute;
    width: 100%;
    top: 0.325rem;
    padding: 0 0.325rem;
}

.webstories-count-item {
    height: 2px;
    flex: 1;
    background: var(--clr-always-white);
}

.external {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    overflow: hidden;
    margin: auto;
    box-shadow: 0 3px 5px 3px var(--clr-neutral-85);
    text-decoration: none !important;
}

.external__wrapper {
    padding: 1rem 2rem;
}

.external__content {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    color: var(--clr-neutral-40);
}

.external__title {
    color: var(--clr-secondary);
}

.external__source {
    font-size: 14px;
}

.ip {
    display: flex;
    flex-direction: column;
    background: var(--clr-surface);
    max-width: 600px;
    width: 100%;
    max-height: 75vh;
    border-radius: 0.5rem;
    position: relative;
}

.ip__btn {
    color: #0078c5;
    cursor: pointer;
}

.ip__overlay {
    position: fixed;
    padding: 1rem;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9 !important;
    padding: 1rem;
}

.ip__header {
    display: flex;
    align-items: center;
    padding: 1rem;
    gap: 0.75rem;
    border-bottom: 1px solid var(--clr-neutral-70);
    border-top-left-radius: 0.5rem;
    border-top-right-radius: 0.5rem;
    position: sticky;
    top: 0;
    background: var(--clr-surface);
}

    .ip__header .svg-wrapper {
        margin-left: auto;
        width: 24px;
        height: 24px;
        padding: 0.25rem;
        cursor: pointer;
    }

.ip__main {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 0.75rem 1rem;
    padding-bottom: 0.25rem;
    gap: 1rem;
}

    .ip__main table {
        border: 1px solid #e6e6e6;
        border-collapse: collapse;
        width: 100%;
        font-size: 14px;
    }

    .ip__main thead {
        background: var(--clr-neutral-80);
    }

    .ip__main tbody a {
        font-size: 14px;
        color: #0078c5;
        cursor: pointer;
    }

        .ip__main tbody a:hover {
            text-decoration: underline;
        }

    .ip__main td,
    .ip__main th {
        text-align: center;
        padding: 0.5rem;
        border: 1px solid var(--clr-neutral-70);
    }

.ip__footer {
    font-size: 13px;
    padding: 0.5rem 1rem;
}

.ip__members {
    font-size: 13px;
}

    .ip__members tr > td:first-child {
        text-align: left;
        text-wrap: nowrap;
    }

.whatsapp-channel {
    background-color: #e7f7ec;
    padding: 1rem !important;
    border: 2px solid #25d366 !important;
    margin-top: 1rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.whatsapp-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.channel-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .channel-text h2 {
        margin: 0;
        color: #075e54;
        font-size: 1.25rem;
    }

    .channel-text p {
        color: var(--clr-always-black);
        font-size: 14px;
    }

.join-button {
    align-self: start;
    background-color: #25d366;
    color: white !important;
    padding: 0.25rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 14px;
    transition: background-color 0.3s;
}

    .join-button:hover {
        background-color: #1da955;
    }

.channel-widget {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: center;
    border-radius: 0.5rem;
}

.channel-widget__title {
    font-size: 1.25rem;
    font-weight: 600;
}

.channel-widget__grid {
    display: grid;
    gap: 0.5rem;
    justify-items: center;
    grid-template-columns: repeat(1, 1fr);
}

@media only screen and (min-width: 360px) {
    .channel-widget__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (min-width: 768px) {
    .channel-widget__grid {
        gap: 0.75rem;
        grid-template-columns: repeat(3, 1fr);
    }
}

.channel-widget__card {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    border: 1px solid var(--clr-neutral-80);
    background: var(--clr-surface);
    border-radius: 0.5rem;
    padding: 0.25rem;
    transition: 0.2s ease-in-out;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    text-align: left;
    width: 100%;
}

    .channel-widget__card:hover {
        text-decoration: none;
        transform: translateY(-2px);
        border-color: var(--clr-neutral-70);
    }

.channel-widget__card--youtube:hover {
    border-left: 0.25rem solid var(--clr-danger);
}

.channel-widget__card--pinterest:hover {
    border-left: 0.25rem solid var(--clr-danger);
}

.channel-widget__card--facebook:hover {
    border-left: 0.25rem solid var(--clr-info);
}

.channel-widget__card--instagram:hover {
    border-left: 0.25rem solid var(--clr-secondary);
}

.channel-widget__card--twitter:hover {
    border-left: 0.25rem solid var(--clr-always-black);
}

.channel-widget__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

@media only screen and (min-width: 576px) {
    .channel-widget__icon {
        width: 44px;
        height: 44px;
    }
}

.channel-widget__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.channel-widget__platform {
    font-size: 12px;
    font-weight: 500;
}

@media only screen and (min-width: 576px) {
    .channel-widget__platform {
        font-size: 14px;
    }
}

.channel-widget__count {
    font-size: 10px;
    color: var(--clr-neutral-30);
}

@media only screen and (min-width: 576px) {
    .channel-widget__count {
        font-size: 12px;
    }
}

.layout {
    display: flex;
    flex-direction: column;
    width: 100%;
}

@media only screen and (min-width: 1440px) {
    .layout {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        position: relative;
        align-items: start;
    }

    .layout-nav {
        position: sticky;
        top: 0;
        grid-column: 1;
        height: 100vh;
    }

    .layout-content {
        grid-column: 2;
    }
}

.layout-aside-main {
    display: flex;
    flex-direction: column;
}

    .layout-aside-main .layout-main {
        display: flex;
        flex-direction: column;
        order: 1;
    }

    .layout-aside-main .layout-aside {
        order: 2;
    }

@media only screen and (min-width: 768px) {
    .layout-aside-main {
        display: grid;
        grid-template-columns: 180px 1fr;
    }

        .layout-aside-main .layout-aside {
            grid-column: 1;
            grid-row: 1;
        }

        .layout-aside-main .layout-main {
            grid-column: 2;
            grid-row: 1;
        }
}

.layout-main-sidebar {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

    .layout-main-sidebar .layout-main {
        order: 1;
    }

    .layout-main-sidebar .layout-sidebar {
        order: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }

        .layout-main-sidebar .layout-sidebar > * {
            width: 100%;
        }

@media only screen and (min-width: 768px) {
    .layout-main-sidebar {
        margin-top: 0.75rem;
        margin-bottom: 0.75rem;
    }
}

@media only screen and (min-width: 992px) {
    .layout-main-sidebar {
        margin-top: 1rem;
        margin-bottom: 1rem;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 336px;
    }

        .layout-main-sidebar.contact-us-layout {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .layout-main-sidebar .layout-main {
            grid-column: 1;
            grid-row: 1;
            max-width: 100%;
            width: 100%;
        }

        .layout-main-sidebar .layout-sidebar {
            grid-column: 2;
            grid-row: 1;
        }
}

.main-aside-sidebar {
    display: flex;
    flex-direction: column;
}

    .main-aside-sidebar .layout-main {
        order: 1;
    }

    .main-aside-sidebar .layout-sidebar {
        order: 2;
    }

    .main-aside-sidebar .layout-aside {
        order: 3;
    }

@media only screen and (min-width: 768px) {
    .main-aside-sidebar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 52px;
    }

        .main-aside-sidebar .layout-main {
            grid-column: 1;
            grid-row: 1;
        }

        .main-aside-sidebar .layout-aside {
            grid-column: 2;
            grid-row: 1;
        }

        .main-aside-sidebar .layout-sidebar {
            grid-column: span 2;
            grid-row: 2;
        }
}

@media only screen and (min-width: 992px) {
    .main-aside-sidebar {
        grid-template-columns: minmax(0, 1fr) 52px 316px;
    }

        .main-aside-sidebar .layout-main {
            grid-column: 1;
            grid-row: 1;
        }

        .main-aside-sidebar .layout-aside {
            grid-column: 2;
            grid-row: 1;
        }

        .main-aside-sidebar .layout-sidebar {
            grid-column: 3;
            grid-row: 1;
        }
}

@media only screen and (min-width: 1168px) {
    .main-aside-sidebar {
        grid-template-columns: minmax(0, 1fr) 52px 316px;
    }
}

.aside-main-sidebar {
    display: flex;
    flex-direction: column;
}

    .aside-main-sidebar .layout-main {
        order: 1;
    }

    .aside-main-sidebar .layout-aside {
        order: 2;
    }

    .aside-main-sidebar .layout-sidebar {
        order: 3;
    }

@media only screen and (min-width: 768px) {
    .aside-main-sidebar {
        display: grid;
        grid-template-columns: 140px 1fr;
    }

        .aside-main-sidebar .layout-aside {
            grid-column: 1;
            grid-row: span 2;
        }

        .aside-main-sidebar .layout-main {
            grid-column: 2;
            grid-row: 1;
        }

        .aside-main-sidebar .layout-sidebar {
            grid-column: 2;
            grid-row: 2;
        }
}

@media only screen and (min-width: 1168px) {
    .aside-main-sidebar {
        grid-template-columns: 140px minmax(0, 1fr) 316px;
    }

        .aside-main-sidebar .layout-aside {
            grid-column: 1;
            grid-row: 1;
        }

        .aside-main-sidebar .layout-main {
            grid-column: 2;
            grid-row: 1;
        }

        .aside-main-sidebar .layout-sidebar {
            margin-right: 16px;
            grid-column: 3;
            grid-row: 1;
        }
}

.ico-clock:before {
    content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11 12.4142V5H13V11.5858L16.7071 15.2929L15.2929 16.7071L11 12.4142ZM12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21ZM12 23C18.0751 23 23 18.0751 23 12C23 5.92487 18.0751 1 12 1C5.92487 1 1 5.92487 1 12C1 18.0751 5.92487 23 12 23Z' fill='%23999'/%3E%3C/svg%3E%0A");
    margin-right: 0.25rem;
}

.ico-up:before {
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 30 32'%3E%3Ctitle%3Eup-big%3C/title%3E%3Cpath d='M28.768 17.344q0 0.896-0.672 1.6l-1.312 1.344q-0.704 0.672-1.632 0.672-0.96 0-1.6-0.672l-5.28-5.248v12.576q0 0.928-0.64 1.504t-1.632 0.608h-2.272q-0.96 0-1.632-0.608t-0.672-1.504v-12.576l-5.248 5.248q-0.64 0.672-1.6 0.672t-1.6-0.672l-1.344-1.344q-0.672-0.672-0.672-1.6 0-0.96 0.672-1.632l11.616-11.616q0.64-0.672 1.6-0.672t1.632 0.672l11.616 11.616q0.672 0.704 0.672 1.632z' fill='%23090' %3E%3C/path%3E%3C/svg%3E");
    padding: 0.25rem;
}

.ico-down:before {
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 32' fill='none'%3E%3Cpath d='M28.768 14.848q0 0.96-0.672 1.6l-11.616 11.648q-0.704 0.672-1.632 0.672t-1.6-0.672l-11.616-11.648q-0.672-0.64-0.672-1.6 0-0.928 0.672-1.632l1.312-1.312q0.704-0.672 1.632-0.672t1.6 0.672l5.248 5.248v-12.576q0-0.928 0.672-1.6t1.632-0.704h2.272q0.928 0 1.6 0.704t0.672 1.6v12.576l5.28-5.248q0.64-0.672 1.6-0.672 0.928 0 1.632 0.672l1.312 1.312q0.672 0.704 0.672 1.632z' fill='%23c00'%3E%3C/path%3E%3C/svg%3E");
    padding: 0.25rem;
}

.ico-equal:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' d='M3.72 3.72a.75.75 0 011.06 1.06L2.56 7h10.88l-2.22-2.22a.75.75 0 011.06-1.06l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06l2.22-2.22H2.56l2.22 2.22a.75.75 0 11-1.06 1.06l-3.5-3.5a.75.75 0 010-1.06l3.5-3.5z' fill='%23FFCC33'%3E%3C/path%3E%3C/svg%3E");
    padding: 0.25rem;
}

.ico-comment:before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 50 50"><path d="M 25 4.0703125 C 12.368265 4.0703125 2.0703125 12.921644 2.0703125 24 C 2.0703125 30.432481 5.5907163 36.030749 11.003906 39.6875 C 10.995106 39.903125 11.010706 40.250912 10.728516 41.294922 C 10.378462 42.590119 9.6725023 44.413033 8.2382812 46.46875 L 7.21875 47.929688 L 9 47.929688 C 15.17102 47.929688 18.741544 43.907595 19.294922 43.261719 C 21.134317 43.693171 23.024914 43.929686 25 43.929688 C 37.631735 43.929688 47.929688 35.078356 47.929688 24 C 47.929688 12.921644 37.631735 4.0703125 25 4.0703125 z M 25 5.9296875 C 36.768265 5.9296875 46.070312 14.078356 46.070312 24 C 46.070312 33.921644 36.768265 42.070312 25 42.070312 C 22.959016 42.070312 21.040073 41.87506 19.236328 41.400391 L 18.654297 41.248047 L 18.277344 41.714844 C 18.277344 41.714844 15.390792 44.972581 10.78125 45.757812 C 11.617979 44.248964 12.233683 42.844161 12.521484 41.779297 C 12.921431 40.299494 12.929687 39.300781 12.929688 39.300781 L 12.929688 38.789062 L 12.5 38.515625 C 7.2214165 35.156526 3.9296875 29.955741 3.9296875 24 C 3.9296875 14.078356 13.231735 5.9296875 25 5.9296875 z"></path></svg>');
    margin: 0 4px;
}

.ico-xs:before {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 0.25rem 0 0;
    vertical-align: -3px;
}

.ico-sm:before {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -3px;
}

.ico-md:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: -5px;
}

.ico-like:before {
    content: "";
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 32"><title>thumbs-up</title><path fill="red" d="M4.576 24q0-0.48-0.352-0.8t-0.8-0.352-0.8 0.352-0.352 0.8 0.352 0.8 0.8 0.352 0.8-0.352 0.352-0.8zM25.152 13.728q0-0.928-0.704-1.6t-1.6-0.704h-6.272q0-1.024 0.864-2.848t0.832-2.848q0-1.76-0.544-2.592t-2.304-0.864q-0.448 0.48-0.672 1.536t-0.544 2.24-1.056 1.952q-0.416 0.416-1.376 1.632-0.064 0.096-0.416 0.512t-0.576 0.736-0.608 0.768-0.704 0.8-0.704 0.608-0.704 0.48-0.64 0.192h-0.576v11.424h0.576q0.224 0 0.576 0.032t0.576 0.128 0.672 0.192 0.64 0.224 0.64 0.192 0.512 0.192q3.776 1.312 6.112 1.312h2.144q3.424 0 3.424-2.976 0-0.48-0.064-0.992 0.512-0.288 0.832-0.96t0.32-1.312-0.32-1.216q0.928-0.896 0.928-2.144 0-0.448-0.16-0.992t-0.448-0.832q0.576-0.032 0.96-0.832t0.384-1.44zM27.424 13.696q0 1.6-0.864 2.912 0.16 0.576 0.16 1.216 0 1.376-0.672 2.592 0.032 0.384 0.032 0.768 0 1.792-1.056 3.168 0 2.496-1.536 3.936t-4.032 1.44h-2.304q-1.728 0-3.392-0.416t-3.872-1.152q-2.080-0.736-2.464-0.736h-5.152q-0.928 0-1.6-0.672t-0.672-1.6v-11.424q0-0.96 0.672-1.632t1.6-0.672h4.896q0.64-0.416 2.464-2.752 1.024-1.344 1.92-2.304 0.416-0.448 0.608-1.536t0.544-2.24 1.12-1.92q0.704-0.672 1.6-0.672 1.504 0 2.688 0.576t1.824 1.824 0.64 3.328q0 1.632-0.864 3.424h3.136q1.856 0 3.232 1.344t1.344 3.2z"></path></svg>');
    background-repeat: no-repeat;
}

.ico-lg:before {
    display: inline-block;
    width: 28px;
    height: 28px;
    margin: 0 auto;
    vertical-align: middle;
}

.ico-xl:before {
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto;
}

.ico-secondary {
    fill: var(--clr-secondary);
}

.ico-arrow-up::before {
    content: url('data:image/svg+xml,<svg id="ico-sm ico-arrow-up" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 12l4-4 4 4" stroke="green" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" /></svg>');
}

.ico-arrow-down:before {
    content: url('data:image/svg+xml,<svg id="arrow-down" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 12l4 4 4-4" stroke="red" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" /></svg>');
}

.ico-arrow-equal::before {
    content: url('data:image/svg+xml,<svg id="arrow-equal" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 12h12m-9 3l-3-3 3-3m6 6l3-3-3-3" stroke="gold" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" fill="none" /></svg>');
}

.light-mode-logo {
    display: block;
}

.dark-mode-logo {
    display: none;
}

:root.dark-theme {
    --clr-primary: #6b162f;
    --clr-on-primary: #9b6578;
    --clr-primary-2: #2e0826;
    --clr-on-primary-2: #c9c9c9;
    --clr-secondary: #eb003f;
    --clr-on-secondary: #fff;
    --clr-secondary-2: #d9a84f;
    --clr-secondary-3: #d7c54b;
    --clr-on-secondary-2: #ddd;
    --clr-neutral: #868e96;
    --clr-danger: #a32222;
    --clr-success: #6a9a0b;
    --clr-info: #0088dd;
    --clr-warning: #d75d0f;
    --clr-link: #7eaaff;
    --clr-post: #1a1a1a;
    --clr-body: #1a1a1a;
    --clr-on-body: #f0f0f0;
    --clr-surface: #222222;
    --clr-on-surface: #e6e6e6;
    --clr-neutral-5: #fafafa;
    --clr-neutral-10: #f0f0f0;
    --clr-neutral-20: #e0e0e0;
    --clr-neutral-30: #d0d0d0;
    --clr-neutral-40: #b0b0b0;
    --clr-neutral-50: #909090;
    --clr-neutral-60: #707070;
    --clr-neutral-70: #505050;
    --clr-neutral-75: #404040;
    --clr-neutral-80: #303030;
    --clr-neutral-85: #252525;
    --clr-neutral-90: #1a1a1a;
    --clr-neutral-95: #121212;
    --clr-black: #f0f0f0;
    --clr-white: #1c1c1c;
    --clr-always-white: #fff;
    --clr-always-black: #000;
}

.dark-theme {
    /* Dark theme specific overrides */
    /* Dark mode scrollbar customization */
    scrollbar-color: #505050 var(--clr-surface);
    scrollbar-width: thin;
}

    .dark-theme .breadCrumb__wrapper {
        background-color: #252525;
    }

    .dark-theme .topic-card__filter-button:after,
    .dark-theme .topic__filter-button::after {
        filter: invert(1);
    }

    .dark-theme select,
    .dark-theme select:disabled {
        background: url("/assets/svg/arrow-drop-down-dark.svg") no-repeat center right 0;
        background-color: var(--clr-white);
    }

    .dark-theme .top-bar {
        background: var(--clr-neutral-70) !important;
    }

    .dark-theme .top-bar__link {
        color: var(--clr-always-white) !important;
    }

    .dark-theme .footer {
        background: var(--clr-neutral-70) !important;
    }

    .dark-theme input[type=text],
    .dark-theme input[type=email],
    .dark-theme select,
    .dark-theme textarea,
    .dark-theme .simditor-wrapper,
    .dark-theme .simditor-toolbar {
        background-color: #252525;
        border-color: #505050;
        color: #e0e0e0;
    }

    .dark-theme input[type=datetime-local] {
        background: #fff;
        filter: invert(0.9);
    }

    .dark-theme .topic__options-list {
        background: #252525;
        border-color: #505050;
    }

    .dark-theme .dropdown__row--unread {
        background-color: #252525;
    }

    .dark-theme .team {
        filter: saturate(0.75);
    }

    .dark-theme img {
        filter: saturate(0.75);
    }

    .dark-theme .light-mode-logo {
        display: none;
    }

    .dark-theme .dark-mode-logo {
        display: block;
    }

    .dark-theme .go-to-top {
        background: var(--clr-neutral-70);
    }

    .dark-theme .forum__locked::before {
        filter: invert(1);
    }

    .dark-theme .table__blueBgHeading, .dark-theme .table__violetBgHeading {
        filter: saturate(0.75);
    }

    .dark-theme::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    .dark-theme::-webkit-scrollbar-track {
        background: var(--clr-surface);
    }

    .dark-theme::-webkit-scrollbar-thumb {
        background-color: #505050;
        border: 3px solid var(--clr-surface);
        border-radius: 10px;
    }

html.dark-theme::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

html.dark-theme::-webkit-scrollbar-track {
    background: var(--clr-surface);
}

html.dark-theme::-webkit-scrollbar-thumb {
    background-color: #505050;
    border: 3px solid var(--clr-surface);
    border-radius: 10px;
}

html.dark-theme {
    scrollbar-color: #505050 var(--clr-surface);
    scrollbar-width: thin;
}

.red-accent .top-bar,
.red-accent .footer {
    background-color: var(--clr-secondary) !important;
}

.blue-accent .top-bar,
.blue-accent .footer {
    background-color: var(--clr-info) !important;
}

.green-accent .top-bar,
.green-accent .footer {
    background-color: var(--clr-success) !important;
}

.top-bar {
    background-color: var(--clr-primary-2);
    display: flex;
    align-items: center;
    /* Small Mobile phones */
    /* Tablets  */
    /* Desktop and Above */
}

.top-bar__wrapper {
    display: flex;
    flex: 1;
    justify-content: space-between;
    padding: 4px 2px;
    position: relative;
    flex-shrink: 0;
}

    .top-bar__wrapper > * {
        display: flex;
        flex-shrink: 0;
        gap: 0.25rem;
        align-items: center;
    }

.top-bar__center {
    flex: 1;
    max-width: 1000px;
}

.top-bar__right {
    width: 140px;
    margin-left: 2px;
}

.top-bar__user, .top-bar__guest {
    gap: 0.25rem;
    justify-content: center;
    width: 100%;
}

.top-bar__item {
    position: relative;
    display: flex;
}

.top-bar__link {
    padding: 0.5rem;
    color: #b57788;
    position: relative;
    cursor: pointer;
}

.top-bar__logo {
    width: 120px;
    height: 28px;
}

.top-bar__icon {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

    .top-bar__icon:hover {
        color: #fff;
    }

.top-bar-search {
    position: relative;
    display: none;
    width: 100%;
    padding-left: 2px;
    padding-right: 0.5rem;
}

.top-bar-search__form {
    flex: 1;
    display: flex;
    gap: 0.5rem;
}

.top-bar-search__query {
    flex: 1;
}

.top-bar-search__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 10px;
    width: 95%;
    background: var(--clr-white);
    border: 1px solid var(--clr-neutral-60);
    border-radius: 5px;
    padding: 12px 0;
    z-index: 10;
}

.top-bar-search__query:focus + .top-bar-search__dropdown {
    display: block;
}

.top-bar-search__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .top-bar-search__list li a {
        display: block;
        padding: 8px 12px;
        font-size: 15px;
        color: var(--clr-on-surface);
        text-decoration: none;
        border-radius: 5px;
    }

        .top-bar-search__list li a:hover {
            background: var(--clr-neutral-60);
        }

@media only screen and (max-width: 575.98px) {
    .top-bar-search__query {
        width: 100px;
    }
}

@media only screen and (max-width: 767.98px) {
    .top-bar-search--visible {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        inset: 0;
        z-index: 100;
        background-color: var(--clr-primary-2);
    }
}

@media only screen and (min-width: 768px) {
    .top-bar-search {
        padding: 0.25rem;
    }
}

.top-bar__user-image {
    width: 28px;
    height: auto;
    aspect-ratio: 1/1;
}

@media only screen and (max-width: 359.98px) {
    .top-bar__logo {
        /*This simple crops the logo image to just show the logo part */
        width: 37px;
        height: 28px;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: 0 0;
        object-position: 0 0;
    }
}

@media only screen and (min-width: 768px) {
    .top-bar {
        background: var(--clr-primary) url("/assets/img/topbar-background2.jpg") no-repeat;
        background-size: cover;
        background-position: center;
    }

    .top-bar__logo {
        width: 180px;
        height: auto;
        padding: 0.5rem;
    }

    .top-bar__right {
        width: 164px;
    }

    .top-bar__user, .top-bar__guest {
        gap: 0.25rem;
    }

    .top-bar__icon {
        width: 36px;
        height: 36px;
        fill: currentColor;
    }

    .top-bar__user-image {
        width: 36px;
        height: 36px;
        aspect-ratio: 1/1;
    }

    .top-bar-search {
        display: flex;
    }
}

@media only screen and (min-width: 992px) {
    .top-bar__wrapper {
        gap: 1rem;
    }

    .top-bar__logo {
        width: 240px;
        height: auto;
    }

    .top-bar__icon {
        width: 42px;
        height: 42px;
        fill: currentColor;
    }

    .top-bar__user-image {
        width: 42px;
        height: 42px;
        aspect-ratio: 1/1;
    }

    .top-bar__right {
        width: 190px;
    }

    .top-bar__user, .top-bar__guest {
        gap: 0.5rem;
    }
}

.top-bar .dropdown__content {
    display: none;
    position: absolute;
    right: 4px;
    top: calc(100% + 4px);
    width: 260px;
    background-color: var(--clr-surface);
    color: var(--clr-on-surface);
    z-index: 10;
    border: 1px solid var(--clr-neutral);
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.top-bar .dropdown__container {
    display: flex;
    flex-direction: column;
    min-height: 390px;
    max-height: 70vh;
}

.top-bar .dropdown__loader {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 350px;
}

.top-bar .dropdown__dialogue {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 0.5rem;
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-70);
    border-radius: 0.5rem;
    gap: 0.5rem;
}

    .top-bar .dropdown__dialogue h4,
    .top-bar .dropdown__dialogue p {
        grid-column: span 2;
    }

    .top-bar .dropdown__dialogue p {
        font-size: 14px;
    }

    .top-bar .dropdown__dialogue button {
        font-size: 14px;
        text-transform: capitalize;
        font-weight: 600;
    }

.top-bar .dropdown__header {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    justify-content: space-between;
    align-items: center;
    font-size: var(--font-size-sm);
    border-bottom: 1px solid var(--clr-neutral-70);
}

    .top-bar .dropdown__header .svg-wrapper {
        width: 24px;
        height: 24px;
        padding: 0.25rem;
        color: var(--clr-neutral-20);
    }

.top-bar .dropdown__title {
    font-weight: 600;
    font-size: var(--font-size);
}

.top-bar .dropdown__actions {
    display: flex;
    justify-content: end;
    align-items: center;
    padding: 0.5rem;
    gap: 0.25rem;
    font-size: 14px;
    font-weight: 600;
    background: var(--clr-surface);
    border-bottom: 1px solid var(--clr-neutral-70);
}

.top-bar .dropdown__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--clr-body);
    overflow-y: auto;
}

    .top-bar .dropdown__body .capsule {
        background: rgba(0, 0, 0, 0.1);
    }

.top-bar .dropdown__footer {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    justify-content: space-around;
    border-top: 1px solid var(--clr-neutral-70);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.top-bar .dropdown__viewall {
    width: 100%;
    background: var(--clr-neutral-80);
}

.top-bar .dropdown__row {
    padding: 0.5rem;
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    justify-content: space-between;
    border-bottom: 1px solid var(--clr-neutral-70);
    color: var(--clr-neutral-10);
    font-weight: 500;
}

    .top-bar .dropdown__row:hover {
        background: var(--clr-neutral-85);
    }

    .top-bar .dropdown__row .username {
        font-weight: 600;
        font-size: var(--font-size-sm);
        color: var(--clr-black);
    }

    .top-bar .dropdown__row .datetime {
        font-size: var(--font-size-xs);
        color: var(--clr-neutral);
    }

    .top-bar .dropdown__row .message {
        font-size: var(--font-size-sm);
        color: var(--clr-neutral-10);
    }

.top-bar .dropdown__row--unread {
    background-color: var(--clr-neutral-80);
}

.top-bar .dropdown__row--center {
    justify-self: center;
}

.top-bar .dropdown__row .avatar-sm {
    flex-shrink: 0;
    flex-grow: 0;
}

.top-bar .dropdown__row:last-child {
    border-bottom: 0;
}

.top-bar .dropdown__count {
    background: rgba(0, 0, 0, 0.1);
}

.top-bar .dropdown__col {
    flex: 1;
    display: flex;
    align-content: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.25rem;
    font-weight: 400;
    width: 100%;
    flex-basis: 100%;
}

@media only screen and (min-width: 360px) {
    .top-bar .dropdown__content:before {
        content: "";
        position: absolute;
        border-color: var(--clr-neutral);
        border: solid transparent;
        border-bottom-color: var(--clr-surface);
        border-width: 6px;
        margin-left: -10px;
        top: -11px;
        right: 11px;
        z-index: 1;
    }

    .top-bar .dropdown__content:after {
        content: "";
        position: absolute;
        right: 12px;
        top: -11px;
        width: 0;
        height: 0;
        border: solid transparent;
        border-width: 5px;
        border-bottom-color: var(--clr-neutral);
        z-index: 0;
    }
}

@media only screen and (min-width: 576px) {
    .top-bar .dropdown__content {
        width: 300px;
        min-height: 300px;
    }

        .top-bar .dropdown__content:before {
            right: 11px;
        }

        .top-bar .dropdown__content:after {
            right: 12px;
        }
}

@media only screen and (min-width: 768px) {
    .top-bar .dropdown__content:before {
        right: 19px;
    }

    .top-bar .dropdown__content:after {
        right: 20px;
    }
}

/* NAVIGATION */
.top-nav {
    display: none;
    position: fixed;
    top: 0;
    width: 100%;
    max-width: 272px;
    border-right: 1px solid var(--clr-neutral-70);
    height: 100vh;
    overflow-y: auto;
    background-color: var(--clr-body);
    color: var(--clr-on-surface);
    z-index: 10000002 !important;
    padding: 0.25rem 0.5rem;
    border-bottom: 1px solid var(--clr-neutral-15);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

@media only screen and (max-width: 1439.98px) {
    .top-nav {
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

        .top-nav.nav-visible {
            transform: translateX(0);
            display: flex;
            flex-direction: column;
        }

        .top-nav.nav-hiding {
            transform: translateX(-100%);
        }
}

@media only screen and (min-width: 1440px) {
    .top-nav.show {
        display: flex;
        flex-direction: column;
    }
}

.top-nav__menu {
    display: flex;
    text-transform: capitalize;
    flex-direction: column;
    padding: 0;
}

    .top-nav__menu a {
        text-decoration: none;
        color: var(--clr-on-surface);
        display: block;
    }

        .top-nav__menu a .svg-wrapper {
            width: 28px;
            height: 28px;
        }

.top-nav__section {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--clr-neutral-70);
}

    .top-nav__section:last-child {
        border-bottom: 0;
    }

    .top-nav__section > .svg-wrapper {
        width: 24px;
        height: 24px;
        padding: 0.325rem;
        margin-left: auto;
        background: var(--clr-neutral-85);
        border-radius: 50%;
        color: var(--clr-neutral-20);
        border: 1px solid var(--clr-neutral-50);
    }

.top-nav__section-title {
    display: inline-flex;
    max-width: calc(100% - 30px);
    align-items: center;
    justify-content: space-between;
    text-transform: uppercase;
    color: var(--clr-neutral-10);
    padding-left: 1rem;
}

.top-nav__theme label {
    padding-left: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
    width: 100%;
}

.top-nav-logo {
    flex-wrap: nowrap;
    padding: 0;
    align-items: center;
}

@media only screen and (min-width: 1440px) {
    .top-nav-logo {
        display: none;
    }
}

.top-nav-logo .top-bar__icon {
    transition: all 0.3s ease;
}

    .top-nav-logo .top-bar__icon:hover {
        color: #b57788;
        fill: currentColor;
        scale: 1.1;
    }

.top-nav-logo .top-bar__logo {
    width: 100%;
}

@media only screen and (max-width: 575.98px) {
    .top-nav-logo .top-bar__logo {
        width: 120px;
        height: 28px;
    }
}

.top-nav-translate {
    min-height: 90px;
    background: var(--clr-neutral-80);
}

.top-nav__more {
    align-self: start;
}

    .top-nav__more:hover {
        background: var(--clr-neutral-80);
    }

.top-nav__new:after {
    content: "New";
    font-size: 10px;
    font-weight: 600;
    margin-left: 0.25rem;
    color: var(--clr-secondary);
    animation: blink 2s infinite;
    text-transform: uppercase;
}

@keyframes blink {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.top-nav__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    padding: 0.25rem 0.75rem;
    padding-right: 0 !important;
}

    .top-nav__item > a {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }

    .top-nav__item .svg-wrapper {
        width: 20px;
        height: 20px;
        padding: 0.25rem;
    }

.top-nav__item-wrapper {
    display: none;
    flex-direction: column;
    width: 100%;
}

    .top-nav__item-wrapper .top-nav__item {
        font-weight: 400;
    }

.top-nav__subitem {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    width: 100%;
    grid-column: span 2;
}

.top-nav__subitem-wrapper {
    grid-column: span 2;
    display: none;
    flex-direction: column;
    margin-left: 0.75rem;
    font-weight: 400;
}

    .top-nav__subitem-wrapper > * {
        border-left: 1px solid var(--clr-neutral-70);
        padding: 0.5rem 0.75rem;
    }

.top-nav .share {
    display: flex;
    align-self: center;
    flex-direction: column;
    gap: 0.5rem;
}

@media only screen and (min-width: 1440px) {
    .top-nav {
        display: flex;
        flex-direction: column;
        position: sticky;
        top: 0;
        width: 260px;
        max-height: 100vh;
        overflow-y: auto;
        z-index: 0;
    }
}

.top-nav__filler {
    height: 120px;
}

.top-nav__accent {
    display: flex;
    gap: 0.5rem;
    padding-left: 1rem;
}

.top-nav__accent-item {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--clr-neutral-80);
    cursor: pointer;
    position: relative;
}

    .top-nav__accent-item.active::after {
        content: "✓";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1rem;
        color: var(--clr-always-white);
    }

.top-nav__accent #redAccent {
    background: var(--clr-secondary);
}

.top-nav__accent #blueAccent {
    background: var(--clr-info);
}

.top-nav__accent #greenAccent {
    background: var(--clr-success);
}

.theme-toggle {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.theme-toggle__switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.theme-toggle__input {
    opacity: 0;
    width: 0;
    height: 0;
}

.theme-toggle__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--clr-neutral-70);
    transition: 0.4s;
    border-radius: 24px;
}

    .theme-toggle__slider:before {
        position: absolute;
        content: "";
        height: 16px;
        width: 16px;
        left: 4px;
        bottom: 4px;
        background-color: var(--clr-white);
        transition: 0.4s;
        border-radius: 50%;
    }

.theme-toggle__input:checked + .theme-toggle__slider {
    background-color: var(--clr-secondary);
}

    .theme-toggle__input:checked + .theme-toggle__slider:before {
        transform: translateX(26px);
    }

.overlay {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}

@media only screen and (min-width: 768px) and (max-width: 991.98px) {
    .search__type {
        max-width: 90px;
    }
}
/* Tablets  */
@media only screen and (min-width: 768px) {
    #js-search-hide,
    #js-search-show {
        display: none;
    }
}

@media only screen and (max-width: 1439.98px) {
    .heading-sticky {
        position: sticky;
        top: 0;
        transition: top 0.05s ease;
        width: 100%;
        z-index: 100;
    }
}

.nav-up {
    top: -52px !important;
}

@media only screen and (min-width: 768px) {
    .nav-up {
        top: -62px !important;
    }
}

@media only screen and (min-width: 992px) {
    .nav-up {
        top: -76px !important;
    }
}

.footer {
    background-color: var(--clr-primary-2);
    color: var(--clr-on-primary-2);
    padding: 1rem;
}

.footer__container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.footer__caption {
    color: var(--clr-always-white);
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer__disclaimer {
    color: var(--clr-always-white);
}

.footer__quick-links a, .footer__popular-channels a {
    color: var(--clr-on-primary-2);
}

.share__wrapper {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}

.share__icon {
    width: 28px;
    height: 28px;
}

@media only screen and (min-width: 576px) {
    .footer__container {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: repeat(3, auto);
    }

    .footer__social {
        grid-row: 2;
    }

    .footer__quick-links, .footer__popular-channels {
        grid-row: span 2;
    }

    .footer__disclaimer {
        grid-column: span 3;
        grid-row: 3;
    }
}

.feed {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-bottom: 1rem;
}

.feed__title {
    font-size: 20px;
}

.feed__wrapper {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.feed__item {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.feed__item-title, .feed__item-body, .feed__item-publisher, .feed__item-btn {
    padding: 0.25rem;
}

.feed__item-image {
    align-self: flex-start;
    width: 100%;
    height: auto;
    -o-object-fit: cover;
    object-fit: cover;
}

.feed__item-title {
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.feed__item-body {
    color: #4e4e4e;
}

.feed__item-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.feed__item-publisher {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--clr-neutral-50);
}

.feed__item-btn {
    font-weight: 600;
    font-size: 12px;
    border: 1px solid #1b72ea;
    margin: 0;
    color: #1b72ea;
    border-radius: 0.25rem;
}

.feed__item .image-container {
    width: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
}

.feed__item .content-container {
    display: flex;
    flex-direction: column;
}

.feed__item--skeleton {
    pointer-events: none;
    gap: 0.5rem;
}

    .feed__item--skeleton .skeleton-text,
    .feed__item--skeleton .skeleton-image,
    .feed__item--skeleton .skeleton-button {
        background: var(--clr-neutral-80);
        position: relative;
        overflow: hidden;
        border-radius: 4px;
    }

        .feed__item--skeleton .skeleton-text::after,
        .feed__item--skeleton .skeleton-image::after,
        .feed__item--skeleton .skeleton-button::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100%);
            transform: translateX(-100%);
            animation: shimmer 4s infinite;
        }

    .feed__item--skeleton .skeleton-text {
        height: 1rem;
        margin-bottom: 0.5rem;
        width: 100%;
    }

    .feed__item--skeleton .skeleton-image {
        width: 100%;
        aspect-ratio: 16/9;
        border-radius: 0.5rem;
    }

    .feed__item--skeleton .skeleton-button {
        height: 1.5rem;
        width: 5rem;
        border-radius: 0.25rem;
        border: 0;
    }

@keyframes shimmer {
    100% {
        transform: translateX(100%);
    }
}

@media only screen and (min-width: 360px) and (max-width: 575.98px) {
    .feed__wrapper {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        row-gap: 1.25rem;
    }

    .feed__item {
        grid-column: span 1;
    }

    .feed__item-title {
        font-size: 14px;
    }

    .feed__item:nth-child(5n-4), .feed__item--skeleton:nth-child(9n+1) {
        grid-column: span 2;
    }
}

@media only screen and (min-width: 576px) {
    .feed__wrapper {
        gap: 1rem;
        row-gap: 2rem;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
    }

    .feed__item {
        grid-column: span 2;
    }

        .feed__item:nth-child(5n-4), .feed__item:nth-child(5n-3), .feed__item--skeleton:nth-child(9n+1), .feed__item--skeleton:nth-child(9n+2) {
            grid-column: span 3;
        }
}

@media only screen and (min-width: 1168px) {
    .feed__item-image {
        transition: all 0.25s ease-in-out;
    }

        .feed__item-image:hover {
            scale: 1.1;
        }

    .feed__item-image,
    .feed__item .skeleton-text,
    .feed__item .skeleton-image,
    .feed__item .skeleton-button {
        will-change: transform;
        backface-visibility: hidden;
    }
}

.btn-xs {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
    text-align: center;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
}

.btn-sm {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.btn-md {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.btn-lg {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.btn-xl {
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
}

.btn-primary {
    color: var(--clr-always-white);
    background-color: var(--clr-primary);
    text-transform: uppercase;
}

    .btn-primary:hover {
        background-color: #5b1328;
    }

.btn-surface {
    color: var(--clr-always-black);
    background-color: var(--clr-surface);
    text-transform: uppercase;
}

    .btn-surface:hover {
        background-color: #dee4e8;
    }

.btn-secondary {
    color: var(--clr-always-white);
    background-color: var(--clr-secondary);
    text-transform: uppercase;
}

    .btn-secondary:hover {
        background-color: #b50530;
    }

.btn-warning {
    color: var(--clr-always-white);
    background-color: var(--clr-warning);
    text-transform: uppercase;
}

    .btn-warning:hover {
        background-color: #d75503;
    }

.btn-secondary-2 {
    color: #13181b;
    background-color: var(--clr-secondary-2);
    text-transform: uppercase;
}

.btn-secondary-2-secondary:hover {
    background-color: #ffbb33;
}

.btn-info {
    color: var(--clr-always-white);
    background-color: var(--clr-info);
    text-transform: uppercase;
}

    .btn-info:hover {
        background-color: #007acc;
    }

.btn-success {
    color: var(--clr-always-white);
    background-color: var(--clr-success);
    text-transform: uppercase;
}

    .btn-success:hover {
        background-color: #5c870a;
    }

.btn-danger {
    color: var(--clr-always-white);
    background-color: var(--clr-danger);
    text-transform: uppercase;
}

    .btn-danger:hover {
        background-color: #9c1f1f;
    }

.btn-outline-primary {
    background-color: transparent;
    color: var(--clr-primary);
    border: 1px solid var(--clr-primary);
    text-transform: uppercase;
}

    .btn-outline-primary:hover {
        background-color: var(--clr-primary);
        color: var(--clr-always-white);
    }

.btn-outline-secondary {
    background-color: transparent;
    color: var(--clr-secondary);
    border: 1px solid var(--clr-secondary);
    text-transform: uppercase;
}

    .btn-outline-secondary:hover {
        background-color: var(--clr-secondary);
        color: var(--clr-always-white);
    }

.btn-outline-success {
    background-color: transparent;
    color: var(--clr-success);
    border: 1px solid var(--clr-success);
    text-transform: uppercase;
}

    .btn-outline-success:hover {
        background-color: var(--clr-success);
        color: var(--clr-always-white);
    }

.btn-outline-warning {
    background-color: transparent;
    color: var(--clr-warning);
    border: 1px solid var(--clr-warning);
    text-transform: uppercase;
}

    .btn-outline-warning:hover {
        background-color: var(--clr-warning);
        color: var(--clr-always-white);
    }

.btn-outline-danger {
    background-color: transparent;
    color: var(--clr-danger);
    border: 1px solid var(--clr-danger);
    text-transform: uppercase;
}

    .btn-outline-danger:hover {
        background-color: var(--clr-danger);
        color: var(--clr-always-white);
    }

.btn-outline-surface {
    background-color: transparent;
    color: var(--clr-neutral-40);
    border: 1px solid var(--clr-neutral-40);
    text-transform: uppercase;
}

    .btn-outline-surface:hover {
        background-color: var(--clr-neutral-40);
        color: var(--clr-white);
    }

.badge2 {
    font-size: 10px;
    font-weight: 400;
    background-color: var(--clr-secondary);
    color: var(--clr-on-secondary);
    border-radius: 2px;
    padding: 1px 3px;
    top: 4px;
    right: 4px;
    line-height: 100%;
    position: absolute;
    cursor: pointer;
}

@media only screen and (min-width: 768px) {
    .badge2 {
        font-size: 11px;
        border-radius: 4px;
    }
}

.capsule {
    border-radius: 0.75rem;
    padding: 0.25rem 0.5rem;
    vertical-align: middle;
    line-height: 1;
}

.breadCrumb {
    vertical-align: middle;
    padding: 0.5rem;
    list-style: none;
    background: var(--clr-neutral-90);
    border-bottom: 1px solid var(--clr-neutral-80);
}

    .breadCrumb span {
        font-size: 13px;
    }

    .breadCrumb ol {
        display: inline-block;
        padding: 0 0.5rem;
    }

    .breadCrumb li {
        list-style: none;
        vertical-align: baseline;
        display: inline-block;
        font-size: 13px;
        padding: 0;
        margin: 0;
        font-weight: 500;
    }

        .breadCrumb li:not(:last-of-type)::after {
            padding: 2px 2px 2px 4px;
            color: var(--clr-black);
            content: ">";
        }

    .breadCrumb a:hover {
        cursor: pointer;
        text-decoration: underline;
    }

.breadCrumb__wrapper {
    background-color: #eee;
}

.active {
    color: var(--clr-secondary);
    font-weight: 400;
}

@media only screen and (max-width: 767.98px) {
    .breadCrumb .container > span {
        display: none;
    }
}

.comment {
    padding: 8px;
    font-family: system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .comment:not(:first-child) {
        border-top: 1px solid var(--clr-neutral-80);
    }

@media only screen and (min-width: 576px) {
    .comment {
        padding: 12px;
    }
}

.comment-container {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--clr-neutral-80);
    background: var(--clr-surface);
    border-radius: 8px;
    max-width: 728px;
    margin: 0 auto;
    width: 100%;
}

    .comment-container .section__title {
        padding: 0 1rem 1rem;
    }

.comment-load-more {
    align-self: center;
    margin-bottom: 1rem;
}

.comment__body {
    display: flex;
    position: relative;
}

.comment-thread {
    width: 2px;
    height: calc(100% - 16px);
    background-color: var(--clr-neutral-60);
    margin-right: 12px;
    border-radius: 2px;
    position: absolute;
    left: 12px;
    top: 32px;
}

@media only screen and (min-width: 576px) {
    .comment-thread {
        left: 16px;
        top: 40px;
    }
}

.comment__left {
    flex: 0 0 auto;
    margin-right: 8px;
}

@media only screen and (min-width: 576px) {
    .comment__left {
        margin-right: 12px;
    }
}

.comment__photo {
    border-radius: 50%;
}

.comment__photo-wrapper {
    position: relative;
    width: 28px;
    height: 28px;
}

@media only screen and (min-width: 576px) {
    .comment__photo-wrapper {
        width: 36px;
        height: 36px;
    }
}

.comment__photo-wrapper .banned:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--clr-neutral-50);
}

.comment-go-back {
    display: flex;
    gap: 4px;
    align-items: center;
    color: var(--clr-info);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .comment-go-back:hover {
        scale: 1.05;
    }

    .comment-go-back:before {
        content: "←";
        margin-bottom: 0.125rem;
    }

.comment-go-back-container {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    border-top: 1px solid var(--clr-neutral-80);
}

.comment__right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.comment__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.comment__user-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

    .comment__user-info .comment__username {
        font-size: 13px;
        color: var(--clr-neutral-30);
    }

@media only screen and (min-width: 576px) {
    .comment__user-info .comment__username {
        font-size: 14px;
    }
}

.comment__user-info .comment__name {
    font-size: 14px;
    font-weight: 600;
    color: var(--clr-secondary);
}

@media only screen and (min-width: 576px) {
    .comment__user-info .comment__name {
        font-size: 16px;
    }
}

.comment__user-info .comment__date {
    color: var(--clr-neutral-40);
    font-size: 12px;
}

    .comment__user-info .comment__date:before {
        content: "•";
        margin-right: 8px;
        color: var(--clr-neutral-60);
    }

@media only screen and (min-width: 576px) {
    .comment__user-info .comment__date {
        font-size: 14px;
    }
}

.comment__menu {
    position: relative;
    min-width: 16px;
}

.comment__menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(90deg);
    cursor: pointer;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    padding-bottom: 0.125rem;
    padding-right: 0.125rem;
}

    .comment__menu-toggle:hover {
        background: var(--clr-neutral-80);
    }

.comment__menu-options {
    flex-direction: column;
    position: absolute;
    top: 16px;
    right: 8px;
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-80);
    border-radius: 4px;
    min-width: 100px;
    z-index: 3;
}

.comment__menu-options-item {
    font-size: 14px;
    padding: 4px 8px;
    cursor: pointer;
}

    .comment__menu-options-item:hover {
        background-color: var(--clr-neutral-80);
    }

.comment__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 16px;
    font-size: 14px;
}

@media only screen and (min-width: 576px) {
    .comment__content {
        font-size: 16px;
    }
}

.comment__content-banned {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--clr-neutral-85);
    border-radius: 8px;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comment__url-link {
    color: var(--clr-link);
    text-decoration: none;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

    .comment__url-link:hover {
        text-decoration: underline;
    }

.comment__image {
    border-radius: 4px;
    max-height: 500px;
    align-self: start;
}

.comment__footer {
    display: flex;
    align-items: center;
    font-size: 14px;
    gap: 12px;
}

    .comment__footer .comment__button {
        background: transparent;
        border: none;
        color: var(--clr-info);
        cursor: pointer;
        padding: 0;
    }

    .comment__footer .comment__button--share {
        margin-left: auto;
    }

    .comment__footer .comment__button:hover {
        text-decoration: underline;
    }

    .comment__footer .svg-wrapper {
        height: 1.5rem;
        width: 1.5rem;
        padding: 0.25rem;
        color: var(--clr-on-body);
    }

.comment__toggle-replies {
    display: flex;
    gap: 8px;
    align-items: center;
    background: transparent;
    border: none;
    color: var(--clr-info);
    cursor: pointer;
    padding: 0;
    font-size: 14px;
}

    .comment__toggle-replies:hover {
        text-decoration: underline;
    }

    .comment__toggle-replies .svg-wrapper {
        height: 16px;
        width: 16px;
        padding: 3px;
        color: var(--clr-neutral-30);
        border: 1px solid var(--clr-neutral-80);
        border-radius: 50%;
    }

.comment__toggle-replies-container {
    border-left: 2px solid var(--clr-surface);
    margin-left: -2px;
    display: flex;
    align-items: center;
    gap: 4px;
}

    .comment__toggle-replies-container::before {
        content: "";
        box-sizing: border-box;
        height: 20px;
        border: 0;
        border-color: var(--clr-neutral-60);
        border-style: solid;
        border-bottom-width: 2px;
        width: 24px;
        border-left-width: 2px;
        border-bottom-left-radius: 16px;
        margin-left: -2px;
        margin-bottom: 16px;
    }

.comment__toggle-replies--hide {
    position: absolute;
    top: -24px;
    left: 0;
    transform: translateX(-50%);
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-80);
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

    .comment__toggle-replies--hide:before {
        content: "";
        width: 8px;
        background: var(--clr-neutral-60);
        height: 2px;
        border-radius: 4px;
        margin: auto;
    }

.comment__replies {
    display: flex;
    flex-direction: column;
    margin-left: 12px;
    border-left: 2px solid var(--clr-neutral-60);
    gap: 8px;
    position: relative;
    width: 100%;
    max-width: calc(100% - 16px);
}

@media only screen and (min-width: 576px) {
    .comment__replies {
        margin-left: 16px;
    }
}

.comment__replies .comment {
    padding: 0;
    border-top: 0;
}

.comment__last {
    border-left: 2px solid var(--clr-surface);
}

    .comment__last:before {
        margin-left: -2px;
    }

.comment__reply {
    display: flex;
    gap: 8px;
    background: transparent;
    position: relative;
    margin-left: -2px;
}

    .comment__reply.comment {
        padding-left: 24px !important;
    }

    .comment__reply:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        height: 16px;
        border: 0;
        border-color: var(--clr-neutral-60);
        border-style: solid;
        border-bottom-width: 2px;
        width: 24px;
        border-left-width: 2px;
        border-bottom-left-radius: 16px;
    }

@media only screen and (min-width: 576px) {
    .comment__reply:before {
        height: 20px;
    }
}

.comment__reply-body {
    flex: 1;
}

    .comment__reply-body .comment__body--reply {
        display: flex;
    }

.comment__reply .comment__replies {
    margin-left: 0.75rem;
}

@media only screen and (min-width: 576px) {
    .comment__reply .comment__replies {
        margin-left: 1rem;
    }
}

.comment-skeleton {
    padding: 8px;
    font-family: system-ui, sans-serif;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .comment-skeleton.comment__last {
        margin-left: -2px;
    }

.comment-skeleton__body {
    display: flex;
    position: relative;
}

.comment-skeleton__left {
    flex: 0 0 auto;
    margin-right: 8px;
}

@media only screen and (min-width: 576px) {
    .comment-skeleton__left {
        margin-right: 12px;
    }
}

.comment-skeleton__left .comment-skeleton__photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--clr-neutral-80);
}

@media only screen and (min-width: 576px) {
    .comment-skeleton__left .comment-skeleton__photo {
        width: 36px;
        height: 36px;
    }
}

.comment-skeleton__right {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.comment-skeleton__header {
    display: flex;
    justify-content: space-between;
    gap: 16px;
}

.comment-skeleton__user-info {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

.comment-skeleton__name, .comment-skeleton__username {
    height: 14px;
    background-color: var(--clr-neutral-80);
    border-radius: 4px;
}

@media only screen and (min-width: 576px) {
    .comment-skeleton__name, .comment-skeleton__username {
        height: 16px;
    }
}

.comment-skeleton__name {
    width: 80px;
}

.comment-skeleton__username {
    width: 100px;
}

.comment-skeleton__date {
    width: 80px;
    height: 12px;
    background-color: var(--clr-neutral-80);
    border-radius: 4px;
}

@media only screen and (min-width: 576px) {
    .comment-skeleton__date {
        height: 14px;
    }
}

.comment-skeleton__content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.comment-skeleton__text {
    height: 14px;
    background-color: var(--clr-neutral-80);
    border-radius: 4px;
}

@media only screen and (min-width: 576px) {
    .comment-skeleton__text {
        height: 16px;
    }
}

.comment-skeleton__text:first-child {
    width: 100%;
}

.comment-skeleton__text:nth-child(2) {
    width: 70%;
}

.comment-skeleton__footer {
    display: flex;
    align-items: center;
    gap: 12px;
}

.comment-skeleton__action {
    width: 40px;
    height: 14px;
    background-color: var(--clr-neutral-80);
    border-radius: 4px;
}

.report-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.report-overlay__content {
    background-color: var(--clr-surface);
    border-radius: 8px;
    width: 100%;
    max-width: 500px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: slideUp 0.3s ease-out;
}

    .report-overlay__content h3 {
        padding: 1rem;
        font-size: 20px;
        color: var(--clr-secondary);
        font-weight: 600;
        border-bottom: 1px solid var(--clr-neutral-80);
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

        .report-overlay__content h3 .report-overlay__close {
            width: 24px;
            height: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            font-size: 24px;
            color: var(--clr-on-body);
            font-weight: 700;
            transition: all 0.3s ease;
        }

            .report-overlay__content h3 .report-overlay__close:hover {
                scale: 1.25;
            }

    .report-overlay__content label {
        padding: 0 1rem;
        font-weight: 500;
        font-size: 14px;
    }

.report-overlay__select {
    padding: 0.5rem;
    border: 1px solid var(--clr-neutral-70);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--clr-surface);
    color: var(--clr-neutral-10);
    outline: none;
    margin: 0 1rem;
}

.report-overlay__textarea {
    margin: 0 1rem;
    min-height: 120px;
    padding: 0.5rem;
    border: 1px solid var(--clr-neutral-70);
    border-radius: 4px;
    font-size: 14px;
    background-color: var(--clr-surface);
    color: var(--clr-neutral-10);
    resize: vertical;
    outline: none;
    resize: none;
}

.report-overlay__actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 0 1rem 1rem;
}

    .report-overlay__actions button {
        min-width: 80px;
    }

        .report-overlay__actions button.btn-secondary {
            background-color: var(--clr-neutral-80);
            color: var(--clr-neutral-20);
        }

            .report-overlay__actions button.btn-secondary:hover {
                background-color: var(--clr-neutral-70);
            }

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.login-register-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.login-register-overlay__content {
    background-color: var(--clr-surface);
    border-radius: 8px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
    overflow: hidden;
}

.login-register-overlay__header {
    padding: 1rem;
    border-bottom: 1px solid var(--clr-neutral-80);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-register-overlay__title {
    margin: 0;
}

.login-register-overlay__close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    background: transparent;
    border: none;
    color: var(--clr-on-body);
    font-weight: 700;
    transition: all 0.3s ease;
    padding: 0;
    line-height: 1;
}

    .login-register-overlay__close:hover {
        transform: scale(1.25);
    }

.login-register-overlay__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-register-overlay__message {
    font-size: 16px;
    color: var(--clr-neutral-20);
    margin: 0;
    text-align: center;
}

.login-register-overlay__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.login-register-overlay__button {
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    min-width: 100px;
}

.login-register-overlay__button--primary {
    background-color: var(--clr-primary);
    color: var(--clr-on-primary);
}

    .login-register-overlay__button--primary:hover {
        background-color: var(--clr-primary-dark);
    }

.login-register-overlay__button--secondary {
    background-color: var(--clr-neutral-80);
    color: var(--clr-neutral-20);
}

    .login-register-overlay__button--secondary:hover {
        background-color: var(--clr-neutral-70);
    }

.comments-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1rem;
    margin-bottom: 1rem;
}

    .comments-header .section__title {
        padding: 0;
        margin: 0;
    }

.comment-sorting {
    display: flex;
    align-items: center;
}

    .comment-sorting label {
        margin-right: 8px;
        font-size: 14px;
    }

    .comment-sorting .comment-sort-dropdown {
        padding: 4px 8px;
        border: 1px solid var(--clr-neutral-70);
        border-radius: 4px;
        font-size: 14px;
        background-color: var(--clr-surface);
        color: var(--clr-neutral-10);
    }

.comment__button--share {
    position: relative;
}

.comment-share-menu {
    position: absolute;
    display: flex;
    align-items: center;
    border-radius: 20px;
    background: var(--clr-body);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
    padding: 5px;
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s;
    z-index: 10;
    white-space: nowrap;
}

    .comment-share-menu.active {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
        visibility: visible;
    }

.comment-share-option {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 3px;
    cursor: pointer;
    border: none;
    background: none;
    transition: background-color 0.2s;
}

    .comment-share-option:hover {
        transform: translateY(-2px);
    }

    .comment-share-option .svg-wrapper {
        width: 24px;
        height: 24px;
        padding: 0;
    }

.comment-share-whatsapp .svg-wrapper {
    color: #25d366;
}

.comment-share-facebook .svg-wrapper {
    color: #1877f2;
}

.comment-share-twitter .svg-wrapper {
    color: #1da1f2;
}

.comment-share-copy .svg-wrapper {
    color: #6c757d;
}

.copy-success-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background-color: #333;
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    opacity: 0;
    z-index: 9999;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

    .copy-success-message.show {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

.comment-post {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid var(--clr-neutral-70);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--clr-neutral-70);
}

    .comment-post:first-child {
        border-top: none;
    }

.comment-post__wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment-post__login {
    display: flex;
    flex-direction: column;
}

.comment-post__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment-post__header {
    display: flex;
    align-items: start;
    gap: 0.25rem;
    position: relative;
}

@media only screen and (min-width: 576px) {
    .comment-post__header {
        gap: 1rem;
    }
}

.comment-post__arrow {
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.5rem;
}

@media only screen and (min-width: 576px) {
    .comment-post__arrow {
        width: 1rem;
        height: 1rem;
        margin-top: 0.5rem;
    }
}

.comment-post__arrow svg {
    transform: rotate(270deg);
}

.comment-post__submit {
    margin-top: 0.5rem;
    font-size: 14px;
    margin-left: auto;
    padding: 0.25rem 1rem;
    border: 0;
    background: #5cb85c;
    color: var(--clr-always-white);
    border-radius: 1rem;
}

.comment-post__box {
    border-color: var(--clr-neutral-60);
    width: 100%;
}

.comment-post__content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

    .comment-post__content a,
    .comment-post__content p {
        word-break: break-word;
    }

    .comment-post__content img {
        border-radius: 0.5rem;
    }

.comment-post__unanswered {
    font-size: 14px;
    font-weight: 500;
    align-self: start;
}

.comment-post__replies {
    display: none;
    flex-direction: column;
    border-left: 1px solid var(--clr-neutral-80);
    padding-left: 0.5rem;
    margin-left: 0.5rem;
}

    .comment-post__replies.comment-container {
        background: none;
        padding: 0;
        margin: 0;
    }

.comment-post__show-replies {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--clr-neutral-20);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
}

    .comment-post__show-replies .svg-wrapper,
    .comment-post__show-replies .svg-wrapper svg {
        width: 1.5rem;
        height: 1.5rem;
    }

    .comment-post__show-replies:hover {
        color: var(--clr-secondary);
    }

.comment-post:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.comment-post__user {
    display: flex;
    gap: 0.5rem;
}

.comment-post__footer {
    position: relative;
    display: flex;
    font-size: 12px;
}

.comment-post__actions {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 0.5rem;
}

    .comment-post__actions .flex {
        align-items: center;
        gap: 0.5rem;
    }

    .comment-post__actions .reactions__hovermenu {
        top: -1.75rem;
    }

    .comment-post__actions > * {
        color: var(--clr-secondary);
    }

    .comment-post__actions svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
    }

.comment-post__like {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    cursor: pointer;
    padding: 0.125rem 0.5rem 0.125rem 0.25rem;
}

    .comment-post__like:hover {
        background: var(--clr-neutral-85);
        border-radius: 1rem;
    }

.comment-post__dislike {
    display: flex;
    gap: 0.25rem;
    align-items: center;
    cursor: pointer;
    padding: 0.125rem 0.5rem 0.125rem 0.25rem;
}

    .comment-post__dislike:hover {
        background: var(--clr-neutral-85);
        border-radius: 1rem;
    }

.comment-post__posted {
    color: #8e8e8e;
    font-size: 12px;
}

    .comment-post__posted svg {
        width: 14px;
        height: 14px;
        fill: currentColor;
    }

.comment-post__reply {
    border: 1px solid var(--clr-success);
    color: var(--clr-success);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

.comment-post-icon {
    margin-right: 4px;
}

.comment-post .comment-post__reply-form {
    display: none;
}

.login__action {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
    padding: 1rem 0;
    font-size: 15px;
    font-weight: 600;
}

.login__login, .login__register {
    text-transform: uppercase;
    color: var(--clr-always-white);
    text-align: center;
    width: 45%;
    padding: 0.25rem;
    border-radius: 1.5rem;
}

.login__login {
    background: var(--clr-secondary);
}

.login__divider {
    background: var(--clr-neutral-70);
    padding: 0.25rem;
    border-radius: 16px;
}

.login__register {
    background: var(--clr-primary);
}

.replies__item {
    padding: 0.5rem;
    border-top: 1px solid var(--clr-neutral-80);
}

    .replies__item:first-child {
        border-top: none;
    }

.options {
    cursor: pointer;
    background: var(--clr-neutral-80);
    border-radius: 50%;
    padding: 0.25rem 0.5rem;
    width: 2rem;
    height: 2rem;
    text-align: center;
    margin-left: auto;
    flex-shrink: 0;
}

@media only screen and (min-width: 576px) {
    .options {
        margin-left: 0;
    }
}

.options__link {
    font-weight: 700;
    color: var(--clr-secondary);
}

.options__list {
    z-index: 200;
    position: absolute;
    top: 2.5rem;
    right: 0.5rem;
    display: none;
    font-size: 14px;
    flex-direction: column;
    background: var(--clr-neutral-80);
    border: 1px solid var(--clr-neutral-80);
    border-radius: 5px;
    overflow: hidden;
}

.options__item {
    cursor: pointer;
    padding: 0.25rem 1rem;
    color: var(--clr-secondary);
    border-bottom: 1px solid var(--clr-neutral-70);
}

    .options__item:last-child {
        border-bottom: none;
    }

    .options__item:hover {
        text-decoration: underline;
        background: var(--clr-secondary);
        color: var(--clr-always-white);
    }

.ico-thumbs-up:before {
    content: "";
    fill: currentColor;
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 32"><title>thumbs-up</title><path fill="var(--clr-success, green)" d="M4.576 24q0-0.48-0.352-0.8t-0.8-0.352-0.8 0.352-0.352 0.8 0.352 0.8 0.8 0.352 0.8-0.352 0.352-0.8zM25.152 13.728q0-0.928-0.704-1.6t-1.6-0.704h-6.272q0-1.024 0.864-2.848t0.832-2.848q0-1.76-0.544-2.592t-2.304-0.864q-0.448 0.48-0.672 1.536t-0.544 2.24-1.056 1.952q-0.416 0.416-1.376 1.632-0.064 0.096-0.416 0.512t-0.576 0.736-0.608 0.768-0.704 0.8-0.704 0.608-0.704 0.48-0.64 0.192h-0.576v11.424h0.576q0.224 0 0.576 0.032t0.576 0.128 0.672 0.192 0.64 0.224 0.64 0.192 0.512 0.192q3.776 1.312 6.112 1.312h2.144q3.424 0 3.424-2.976 0-0.48-0.064-0.992 0.512-0.288 0.832-0.96t0.32-1.312-0.32-1.216q0.928-0.896 0.928-2.144 0-0.448-0.16-0.992t-0.448-0.832q0.576-0.032 0.96-0.832t0.384-1.44zM27.424 13.696q0 1.6-0.864 2.912 0.16 0.576 0.16 1.216 0 1.376-0.672 2.592 0.032 0.384 0.032 0.768 0 1.792-1.056 3.168 0 2.496-1.536 3.936t-4.032 1.44h-2.304q-1.728 0-3.392-0.416t-3.872-1.152q-2.080-0.736-2.464-0.736h-5.152q-0.928 0-1.6-0.672t-0.672-1.6v-11.424q0-0.96 0.672-1.632t1.6-0.672h4.896q0.64-0.416 2.464-2.752 1.024-1.344 1.92-2.304 0.416-0.448 0.608-1.536t0.544-2.24 1.12-1.92q0.704-0.672 1.6-0.672 1.504 0 2.688 0.576t1.824 1.824 0.64 3.328q0 1.632-0.864 3.424h3.136q1.856 0 3.232 1.344t1.344 3.2z"></path></svg>');
    background-repeat: no-repeat;
    margin-right: 0;
    margin-left: 0.25rem;
}

.ico-thumbs-down:before {
    content: "";
    fill: currentColor;
    background-image: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 32" ><title>thumbs-down</title><path fill="var(--clr-danger, red)" d="M4.576 8q0-0.48-0.352-0.8t-0.8-0.352-0.8 0.352-0.352 0.8 0.352 0.8 0.8 0.352 0.8-0.352 0.352-0.8zM25.152 18.272q0-0.608-0.384-1.44t-0.96-0.832q0.256-0.32 0.448-0.864t0.16-0.992q0-1.216-0.928-2.112 0.32-0.544 0.32-1.216t-0.32-1.312-0.832-0.96q0.064-0.512 0.064-0.992 0-1.504-0.864-2.24t-2.432-0.736h-2.272q-2.336 0-6.112 1.312-0.096 0.032-0.512 0.16t-0.64 0.224-0.64 0.224-0.672 0.192-0.576 0.128-0.576 0.032h-0.576v11.424h0.576q0.288 0 0.64 0.16t0.704 0.48 0.704 0.64 0.704 0.8 0.608 0.768 0.576 0.704 0.416 0.544q0.96 1.216 1.376 1.632 0.736 0.768 1.056 1.952t0.544 2.24 0.672 1.536q1.728 0 2.304-0.864t0.544-2.592q0-1.056-0.832-2.848t-0.864-2.848h6.272q0.896 0 1.6-0.704t0.704-1.6zM27.424 18.304q0 1.824-1.344 3.2t-3.232 1.344h-3.136q0.864 1.76 0.864 3.424 0 2.112-0.64 3.328-0.608 1.248-1.824 1.824t-2.688 0.576q-0.896 0-1.6-0.672-0.608-0.576-0.96-1.44t-0.448-1.632-0.32-1.504-0.544-1.152q-0.864-0.896-1.92-2.272-1.824-2.336-2.464-2.752h-4.896q-0.928 0-1.6-0.672t-0.672-1.632v-11.424q0-0.928 0.672-1.6t1.6-0.672h5.152q0.384 0 2.464-0.736 2.304-0.768 4-1.152t3.552-0.416h2.016q2.496 0 4.032 1.408t1.536 3.872v0.096q1.056 1.376 1.056 3.168 0 0.384-0.032 0.768 0.672 1.216 0.672 2.56 0 0.672-0.16 1.248 0.864 1.312 0.864 2.912z" ></path></svg >');
    background-repeat: no-repeat;
    margin-right: 0;
    margin-left: 0.25rem;
}

.user {
    align-items: center;
    position: relative;
}

.user__image {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    -o-object-fit: cover;
    object-fit: cover;
}

.user__image-wrapper {
    position: relative;
    flex-shrink: 0;
}

.user__name {
    font-size: 13px;
    font-weight: 600;
    color: #f0c;
}

.user__country {
    color: #f0c;
}

.user__info {
    display: flex;
    flex-direction: column;
    -moz-column-gap: 0.5rem;
    column-gap: 0.5rem;
    font-size: 12px;
    flex-shrink: 1;
}

.user__badges {
    margin-left: auto;
}

@media only screen and (max-width: 575.98px) {
    .user__badges {
        display: none !important;
    }
}

.badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
}

.badge__item {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    aspect-ratio: 1/1;
    -o-object-fit: cover;
    object-fit: cover;
    cursor: pointer;
}

.badge__more {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--clr-secondary);
    color: var(--clr-secondary);
    border-radius: 50%;
    font-size: 10px;
    flex-shrink: 0;
}

.banned {
    border-radius: 50%;
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: rgba(124, 124, 124, 0.6980392157);
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

@media only screen and (min-width: 576px) {
    .user__image {
        width: 60px;
        height: 60px;
    }

    .user__name {
        font-size: 14px;
    }

    .user__username {
        font-size: 0.75rem;
    }

    .user__country {
        font-size: 1rem;
    }
}

.comment-post__footer {
    font-size: 14px;
}

.wall-post {
    border-left: 2px solid var(--clr-neutral-60) !important;
}

.slambook-post {
    border-left-width: 2px !important;
    border-left-color: red !important;
}

    .slambook-post .comment-post__content {
        padding-left: 1.25rem;
        position: relative;
    }

        .slambook-post .comment-post__content p.question {
            font-weight: 600;
        }

            .slambook-post .comment-post__content p.question:before {
                content: "Q:";
                position: absolute;
                left: -1px;
            }

        .slambook-post .comment-post__content p.answer:before {
            content: "A:";
            position: absolute;
            left: -1px;
        }

.testimonial-post {
    border-left-width: 2px !important;
    border-left-color: var(--clr-info) !important;
}

    .testimonial-post .comment-post__content {
        padding: 0 2rem 1rem;
        position: relative;
    }

        .testimonial-post .comment-post__content p {
            font-style: italic;
        }

        .testimonial-post .comment-post__content:before, .testimonial-post .comment-post__content::after {
            content: "❝";
            position: absolute;
            font-size: 2.5rem;
            color: var(--clr-secondary);
            line-height: 1;
        }

        .testimonial-post .comment-post__content:before {
            top: -0.5rem;
            left: 0;
        }

        .testimonial-post .comment-post__content::after {
            bottom: 0;
            right: 0;
            transform: rotate(180deg);
        }

.profile__form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border-radius: 0.25rem;
    border: 1px solid var(--clr-neutral-80);
    background: var(--clr-surface);
    padding: 0.75rem;
    width: 100%;
    margin: 0 auto;
}

.profile__form-container, .profile__form-actions {
    display: flex;
    justify-content: space-evenly;
    gap: 0.5rem;
    width: 100%;
}

.profile__form-container--login {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 1rem 1rem;
}

.profile__form-container--login-description {
    color: var(--clr-neutral-30);
}

    .profile__form-container--login-description a {
        color: var(--clr-link);
    }

.profile__form-input {
    width: 100%;
}

.profile__form-image {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

    .profile__form-image img {
        width: 100%;
        border-radius: 50%;
    }

.profile__form-actions {
    gap: 0.5rem;
}

.profile__form-item {
    display: flex;
    align-items: center;
    font-size: 14px;
}

    .profile__form-item .svg-wrapper {
        width: 24px;
        height: 24px;
        padding: 0.25rem;
        color: var(--clr-neutral-30);
    }

.profile__wall-content {
    display: flex;
    flex-direction: column;
    border-radius: 0.5rem;
    width: 100%;
    max-width: 600px;
    z-index: 9 !important;
    background: var(--clr-surface);
}

.profile__wall-url {
    width: 100%;
    border-radius: 0.25rem;
    border-color: var(--clr-neutral-80) !important;
}

.profile__wall-url-container {
    display: none;
}

.profile__wall-img, .profile__wall-upload {
    width: 100%;
    border-radius: 0.5rem;
    border-color: var(--clr-neutral-80) !important;
}

.profile__wall-img-container, .profile__wall-upload-container {
    display: none;
    position: relative;
    align-self: center;
}

.profile__wall-img-close, .profile__wall-upload-close {
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--clr-neutral-30);
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-80);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    font-weight: 600;
}

.profile__wall-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .profile__wall-form textarea {
        padding: 0.5rem;
        border: 1px solid var(--clr-neutral-80);
        background: var(--clr-neutral-90);
        border-radius: 0.5rem;
        font-size: 14px;
        min-height: 100px;
        width: 100%;
        resize: none;
        overflow: hidden;
    }

        .profile__wall-form textarea::-moz-placeholder {
            color: var(--clr-neutral-50);
        }

        .profile__wall-form textarea::placeholder {
            color: var(--clr-neutral-50);
        }

.profile__wall-form-group {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: space-between;
}

.profile__wall-form-actions {
    position: relative;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 14px;
    border: 1px solid var(--clr-neutral-80);
    background: var(--clr-neutral-90);
    border-radius: 0.75rem;
    padding: 0.5rem;
}

    .profile__wall-form-actions p {
        font-weight: 500;
        margin-right: auto;
        color: var(--clr-neutral-30);
    }

    .profile__wall-form-actions .svg-wrapper {
        width: 28px;
        height: 28px;
        padding: 0.25rem;
    }

.profile__wall-form .profile__wall__image-upload {
    display: none;
    border-color: var(--clr-neutral-80);
}

.profile__wall-svg {
    display: flex;
    align-items: center;
    height: 28px;
    width: 28px;
    padding: 0.5rem;
    cursor: pointer;
}

.profile__wall-main {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile__wall-container form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.profile__wall-buddies-container {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
}

@media only screen and (min-width: 576px) {
    .profile__wall-buddies-container {
        flex-direction: row;
        align-items: center;
    }
}

.profile__wall-buddies-container .choices,
.profile__wall-buddies-container input {
    flex: 1;
}

.profile__wall-buddies-container input {
    padding: 0.125rem 0.25rem;
}

.profile__wall-buddies-choices {
    margin-bottom: 0;
    flex: 1;
}

.login-register-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

.login-register-overlay__content {
    background-color: var(--clr-surface);
    border-radius: 8px;
    width: 100%;
    max-width: 450px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
    overflow: hidden;
}

.login-register-overlay__header {
    padding: 1rem;
    border-bottom: 1px solid var(--clr-neutral-80);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-register-overlay__title {
    margin: 0;
}

.login-register-overlay__close {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 24px;
    background: transparent;
    border: none;
    color: var(--clr-on-body);
    font-weight: 700;
    transition: all 0.3s ease;
    padding: 0;
    line-height: 1;
}

    .login-register-overlay__close:hover {
        transform: scale(1.25);
    }

.login-register-overlay__body {
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.login-register-overlay__message {
    font-size: 16px;
    color: var(--clr-neutral-20);
    margin: 0;
    text-align: center;
}

.login-register-overlay__actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

.login-register-overlay__button {
    padding: 0.5rem 1.5rem;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    text-align: center;
    transition: all 0.2s ease;
    min-width: 100px;
}

.login-register-overlay__button--primary {
    background-color: var(--clr-primary);
    color: var(--clr-on-primary);
}

    .login-register-overlay__button--primary:hover {
        background-color: var(--clr-primary-dark);
    }

.login-register-overlay__button--secondary {
    background-color: var(--clr-neutral-80);
    color: var(--clr-neutral-20);
}

    .login-register-overlay__button--secondary:hover {
        background-color: var(--clr-neutral-70);
    }

.pagination {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-size: 14px;
}

    .pagination > * {
        display: flex;
        flex-direction: row;
        gap: 0.25rem;
        align-items: center;
    }

.pagination-center {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
    justify-self: center;
    justify-content: center;
    vertical-align: middle;
}

    .pagination-center > input {
        font-size: 14px;
        color: var(--clr-secondary);
        background: var(--clr-surface);
        cursor: text;
    }

    .pagination-center p {
        font-size: 12px;
        margin-bottom: 0.25rem;
    }

.pagination__text {
    display: none;
}

.pagination-left {
    grid-column: 1;
    justify-self: left;
    position: relative;
}

    .pagination-left > :first-child:before {
        content: "";
        width: 3px;
        height: 0.75rem;
        background: var(--clr-secondary);
        position: absolute;
        left: 0.5rem;
        top: 11px;
    }

@media only screen and (max-width: 359.98px) {
    .pagination-left > :first-child:before {
        left: 0.25rem;
        top: 10px;
    }
}

@media only screen and (min-width: 768px) {
    .pagination-left > :first-child:before {
        top: 10px;
    }
}

.pagination-left .pagination__item > svg {
    transform: rotate(90deg);
}

.pagination-left .pagination__item:hover {
    cursor: pointer;
    background: var(--clr-secondary);
    border: 1px solid var(--clr-neutral-70);
    color: var(--clr-always-white);
}

    .pagination-left .pagination__item:hover:before {
        background: var(--clr-on-secondary);
    }

.pagination-right {
    grid-column: 3;
    justify-self: right;
    position: relative;
}

    .pagination-right > :last-child:before {
        content: "";
        width: 3px;
        height: 0.75rem;
        background: var(--clr-secondary);
        position: absolute;
        right: 0.5rem;
        top: 11px;
    }

@media only screen and (max-width: 359.98px) {
    .pagination-right > :last-child:before {
        right: 0.25rem;
        top: 10px;
    }
}

@media only screen and (min-width: 768px) {
    .pagination-right > :last-child:before {
        top: 10px;
    }
}

.pagination-right .pagination__item > svg {
    transform: rotate(270deg);
}

.pagination-right .pagination__item:hover {
    cursor: pointer;
    background: var(--clr-secondary);
    border: 1px solid var(--clr-neutral-70);
    color: white;
}

    .pagination-right .pagination__item:hover:before {
        background: var(--clr-on-secondary);
    }

.pagination__item {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    color: var(--clr-secondary);
    background: var(--clr-surface);
    border: 1px solid var(--clr-secondary);
    flex-wrap: nowrap;
    flex-shrink: 0;
    padding: 0.5rem;
    border-radius: 50%;
}

@media only screen and (max-width: 359.98px) {
    .pagination__item {
        padding: 0.25rem;
    }
}

.pagination__item i {
    font-size: 12px;
}

.pagination__item svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.pagination-no {
    width: 2rem;
    height: 1.5rem;
    padding: 0 0.5rem;
    border-radius: 0.25rem;
    text-align: center;
    vertical-align: middle;
    justify-content: center;
    color: var(--clr-neutral-20);
    border: 0;
    background: none;
    border: 1px solid var(--clr-neutral-70);
}

    .pagination-no:hover {
        cursor: default;
    }

.pagination-go {
    background: var(--clr-secondary);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.1s ease-in;
}

    .pagination-go:hover {
        background: rgb(205.253164557, 6.246835443, 54.4367088608);
    }

@media only screen and (min-width: 360px) {
    .pagination-no {
        width: 2.5rem;
        height: 2rem;
    }
}

@media only screen and (min-width: 768px) {
    .pagination__item {
        padding: 0.25rem 0.5rem;
        border-radius: 1rem;
    }

    .pagination-no {
        padding: 0 0.5rem;
        border-radius: 0.25rem;
    }

    .pagination-go {
        padding: 0.25rem 0.5rem;
        border-radius: 0.25rem;
    }

    .pagination__text {
        display: block;
    }
}

.pagination2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
    font-size: 14px;
}

    .pagination2 > * {
        display: flex;
        flex-direction: row;
        gap: 0.25rem;
        align-items: center;
    }

.pagination2-center {
    grid-column: 2;
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}

    .pagination2-center .pagination2__item {
        border-radius: 0;
        padding: 0.25rem 0.5rem;
        font-size: 12px;
        border: 1px solid var(--clr-neutral-70);
        border-radius: 0.125rem;
    }

    .pagination2-center .active {
        background: var(--clr-secondary);
        color: var(--clr-on-secondary);
        border: 1px solid var(--clr-secondary);
    }

.pagination2__text {
    display: none;
}

.pagination2-left {
    grid-column: 1;
    justify-self: left;
}

    .pagination2-left .pagination2__item > svg {
        transform: rotate(90deg);
    }

.pagination2-right {
    grid-column: 3;
    justify-self: right;
}

    .pagination2-right .pagination2__item > svg {
        transform: rotate(270deg);
    }

.pagination2__item {
    display: flex;
    gap: 0.25rem;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    color: var(--clr-secondary);
    background: var(--clr-surface);
    border: 1px solid var(--clr-secondary);
    flex-wrap: nowrap;
    flex-shrink: 0;
    padding: 0.5rem;
    border-radius: 50%;
}

@media only screen and (max-width: 359.98px) {
    .pagination2__item {
        padding: 0.25rem;
    }
}

.pagination2__item i {
    font-size: 12px;
}

.pagination2__item svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
}

.pagination2__item:hover {
    cursor: pointer;
    background: var(--clr-secondary);
    border: 1px solid var(--clr-neutral-70);
    color: white;
}

@media only screen and (min-width: 768px) {
    .pagination2__item {
        padding: 0.25rem 0.5rem;
        border-radius: 1rem;
    }

    .pagination2__text {
        display: block;
    }
}

.featured {
    margin: 0.75rem 0;
}

.featured__layout {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: start;
}

.featured__item {
    display: flex;
    gap: 0.25rem;
    align-items: start;
    border-radius: 0.5rem;
    overflow: hidden;
    background: var(--clr-surface);
    flex-direction: row;
}

    .featured__item:first-child {
        flex-direction: column;
    }

        .featured__item:first-child .featured__image-container {
            width: 100%;
        }

        .featured__item:first-child .featured__image {
            width: 100%;
            aspect-ratio: 16/9;
        }

.featured__image-container {
    width: 33%;
}

.featured__image {
    -o-object-fit: cover;
    object-fit: cover;
    aspect-ratio: 4/3;
}

.featured__caption {
    font-size: 14px;
    font-weight: 600;
    padding: 0.25rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.featured__description {
    display: none;
}

@media only screen and (max-width: 359.98px) {
    .featured__caption {
        font-size: 13px;
    }
}

@media only screen and (min-width: 576px) {
    .featured__layout {
        display: grid;
        align-items: stretch;
        gap: 0.75rem;
    }

    .featured__item {
        flex-direction: column;
    }

    .featured__image-container {
        width: 100%;
    }

    .featured__image {
        width: 100%;
        aspect-ratio: 16/9;
    }

    .featured__caption {
        padding: 0.25rem 0.5rem;
        align-self: flex-start;
    }
}

@media only screen and (min-width: 576px) and (max-width: 991.98px) {
    .featured__layout {
        grid-template-columns: repeat(6, 1fr);
    }

    .featured__item:first-child, .featured__item:nth-child(2) {
        grid-column: span 3;
    }

    .featured__item {
        grid-column: span 2;
    }
}

@media only screen and (min-width: 992px) {
    .featured__layout {
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    .featured__item {
        gap: 0;
    }

        .featured__item:first-child {
            grid-column: span 2;
            grid-row: span 2;
            gap: 0.25rem;
        }

            .featured__item:first-child .featured__caption {
                flex: 0 1 auto;
                padding: 0 0.5rem;
                font-size: 1rem;
                font-weight: 700;
            }

            .featured__item:first-child .featured__description {
                display: block;
                padding: 0 0.5rem;
                flex: 1;
                font-size: 14px;
                overflow: hidden;
            }
}

.play-button {
    position: relative;
    display: inline-block; /* Optional, depends on layout */
}

    /* The circular background */
    .play-button::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 48px;
        height: 48px;
        background-color: rgba(0, 0, 0, 0.5);
        border-radius: 50%;
        z-index: 1;
        border: 1px solid var(--clr-neutral-60); /* Optional, for better visibility */
    }

    /* The play triangle icon */
    .play-button::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-40%, -50%);
        width: 0;
        height: 0;
        border-left: 12px solid white;
        border-top: 8px solid transparent;
        border-bottom: 8px solid transparent;
        z-index: 2;
    }

.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}

    .embed-responsive::before {
        display: block;
        content: "";
    }

    .embed-responsive.embed-responsive-16by9::before {
        padding-top: 56.25%; /* 16:9 aspect ratio */
    }

    .embed-responsive .embed-responsive-item,
    .embed-responsive iframe,
    .embed-responsive embed,
    .embed-responsive object,
    .embed-responsive video {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 0;
    }

.gpt-slot {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

    .gpt-slot.promoted::before {
        content: "PROMOTED";
        font-size: 11px;
        display: inline-block;
    }

    .gpt-slot.advertisement::before {
        content: "ADVERTISEMENT";
        font-size: 11px;
        display: inline-block;
    }

    .gpt-slot.sponsored::before {
        content: "SPONSORED";
        font-size: 11px;
        display: inline-block;
    }

.gpt-slot__wrapper {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-self: stretch;
    justify-content: space-evenly;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
}

@media only screen and (min-width: 768px) {
    .gpt-slot__wrapper {
        flex-direction: row;
    }
}

.pill-sm {
    border-radius: 0.75rem;
    padding: 0.125rem 0.5rem;
    vertical-align: middle;
    text-align: center;
    font-size: 11px;
    cursor: pointer;
    font-weight: 600;
}

.pill-md {
    border-radius: 1rem;
    padding: 0.25rem 0.75rem;
    vertical-align: middle;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
}

.pill-lg {
    border-radius: 1.75rem;
    padding: 0.75rem 1.75rem;
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
    cursor: pointer;
    font-weight: 600;
}

.pill-primary {
    color: var(--clr-always-white);
    background-color: var(--clr-primary);
    text-transform: uppercase;
}

    .pill-primary:hover {
        background-color: #5b1328;
    }

.pill-surface {
    color: var(--clr-always-white);
    background-color: var(--clr-neutral-60);
    text-transform: uppercase;
}

    .pill-surface:hover {
        background-color: var(--clr-neutral-70);
    }

.pill-secondary {
    color: var(--clr-always-white);
    background-color: var(--clr-secondary);
    text-transform: uppercase;
}

    .pill-secondary:hover {
        background-color: #b50530;
    }

.pill-secondary-2 {
    color: var(--clr-always-white);
    background-color: var(--clr-secondary-2);
    text-transform: uppercase;
}

    .pill-secondary-2:hover {
        background-color: #e59504;
    }

.pill-warning {
    color: var(--clr-always-white);
    background-color: var(--clr-warning);
    text-transform: uppercase;
}

    .pill-warning:hover {
        background-color: #d75503;
    }

.pill-info {
    color: var(--clr-always-white);
    background-color: var(--clr-info);
    text-transform: uppercase;
}

    .pill-info:hover {
        background-color: #007acc;
    }

.pill-success {
    color: var(--clr-always-white);
    background-color: var(--clr-success);
    text-transform: uppercase;
}

    .pill-success:hover {
        background-color: #5c870a;
    }

.pill-danger {
    color: var(--clr-always-white);
    background-color: var(--clr-danger);
    text-transform: uppercase;
}

    .pill-danger:hover {
        background-color: #9c1f1f;
    }

.pill-outline-primary {
    background-color: transparent;
    color: var(--clr-primary);
    border: 1px solid var(--clr-primary);
    text-transform: uppercase;
}

    .pill-outline-primary:hover {
        background-color: var(--clr-primary);
        color: var(--clr-always-white);
    }

.pill-outline-secondary {
    background-color: transparent;
    color: var(--clr-secondary);
    border: 1px solid var(--clr-secondary);
    text-transform: uppercase;
}

    .pill-outline-secondary:hover {
        background-color: var(--clr-secondary);
        color: var(--clr-always-white);
    }

.pill-outline-success {
    background-color: transparent;
    color: var(--clr-success);
    border: 1px solid var(--clr-success);
    text-transform: uppercase;
}

    .pill-outline-success:hover {
        background-color: var(--clr-success);
        color: var(--clr-always-white);
    }

.pill-outline-info {
    background-color: transparent;
    color: var(--clr-info);
    border: 1px solid var(--clr-info);
    text-transform: uppercase;
}

    .pill-outline-info:hover {
        background-color: var(--clr-info);
        color: var(--clr-always-white);
    }

.pill-outline-warning {
    background-color: transparent;
    color: var(--clr-warning);
    border: 1px solid var(--clr-warning);
    text-transform: uppercase;
}

    .pill-outline-warning:hover {
        background-color: var(--clr-warning);
        color: var(--clr-always-white);
    }

.pill-outline-danger {
    background-color: transparent;
    color: var(--clr-danger);
    border: 1px solid var(--clr-danger);
    text-transform: uppercase;
}

    .pill-outline-danger:hover {
        background-color: var(--clr-danger);
        color: var(--clr-always-white);
    }

.pill-outline-surface {
    background-color: transparent;
    color: var(--clr-neutral-40);
    border: 1px solid var(--clr-neutral-40);
    text-transform: uppercase;
}

    .pill-outline-surface:hover {
        background-color: var(--clr-neutral-40);
        color: var(--clr-white);
    }

.poll {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid var(--clr-neutral-70);
    padding: 0 0.75rem;
    padding-top: 1rem;
    border-radius: 0.5rem;
    width: 100%;
    margin: 1rem auto;
}

.poll__wrapper {
    margin-top: 0.5rem;
}

.poll__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem 0;
    border-top: 1px solid var(--clr-neutral-70);
}

.poll__content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.poll__option {
    display: flex;
    overflow: hidden;
}

    .poll__option input[type=radio]:checked + label,
    .poll__option label:hover {
        color: var(--clr-secondary);
        border: 1px solid var(--clr-secondary);
        cursor: pointer;
    }

        .poll__option input[type=radio]:checked + label .option__order,
        .poll__option label:hover .option__order {
            background: var(--clr-secondary);
            color: var(--clr-on-secondary);
            border: 1px solid var(--clr-secondary);
        }

        .poll__option input[type=radio]:checked + label .option__percent,
        .poll__option label:hover .option__percent {
            color: var(--clr-secondary);
        }

        .poll__option input[type=radio]:checked + label::before {
            color: var(--clr-secondary);
        }

    .poll__option > input {
        display: none;
    }

.poll__footer {
    display: flex;
    flex-direction: column;
}

.poll__votecount {
    text-transform: capitalize;
    color: var(--clr-neutral-30);
    font-size: 1rem;
}

.poll__remark {
    font-size: 12px;
    color: var(--clr-secondary);
    font-weight: 600;
}

.poll-result {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin: 1rem 0;
    background: var(--clr-surface);
    border-radius: 0.5rem;
    border: 1px solid var(--clr-neutral-70);
    padding: 1rem 0.5rem;
    position: relative;
    box-shadow: 0 2px 8px var(--clr-neutral-80);
}

@media only screen and (min-width: 360px) {
    .poll-result {
        padding: 1.5rem 1rem;
    }
}

.poll-result > * {
    grid-column: span 2;
}

.poll-result__question {
    grid-column: 2;
    font-size: 1rem;
    font-weight: 600;
}

.poll-result__head {
    position: absolute;
    top: 0;
    left: 1rem;
    transform: translateY(-50%);
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-50);
    border-radius: 0.5rem;
    padding: 0.25rem 0.75rem;
    color: var(--clr-neutral-50);
    font-size: 14px;
    font-weight: 600;
    align-self: start;
}

.poll-result__options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

@media only screen and (min-width: 360px) {
    .poll-result__options {
        gap: 1rem;
    }
}

.poll-result__option {
    display: flex;
    padding-bottom: 0.5rem;
    align-items: center;
    border-bottom: 1px solid var(--clr-neutral-70);
}

    .poll-result__option:first-child {
        border-top: 1px solid var(--clr-neutral-70);
        padding-top: 0.5rem;
    }

@media only screen and (min-width: 360px) {
    .poll-result__option:first-child {
        padding-top: 1rem;
    }
}

@media only screen and (min-width: 360px) {
    .poll-result__option {
        gap: 0.25rem;
        padding-bottom: 1rem;
    }
}

.poll-result__option--selected {
    color: var(--clr-secondary);
}

    .poll-result__option--selected .poll-result__option-votes {
        color: var(--clr-secondary);
    }

.poll-result__option-image {
    flex: 1;
    aspect-ratio: 3/2;
    min-width: 100px;
    border-radius: 0.25rem;
    overflow: hidden;
    align-self: start;
}

    .poll-result__option-image img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.poll-result__option-content {
    flex: 3;
    display: flex;
    gap: 0.5rem;
    flex-direction: column;
    padding: 0 0.5rem;
}

.poll-result__option-text {
    font-size: 14px;
    font-weight: 600;
}

@media only screen and (min-width: 576px) {
    .poll-result__option-text {
        font-size: 16px;
    }
}

.poll-result__option-votes {
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
    color: var(--clr-neutral-50);
}

.poll-result__option-bar {
    position: relative;
    background: var(--clr-neutral-85);
    border-radius: 0.5rem;
    height: 1.25rem;
}

@media only screen and (min-width: 576px) {
    .poll-result__option-bar {
        height: 1.5rem;
    }
}

.poll-result__option-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    opacity: 0.9;
    background: rgb(182, 244, 146);
    border-radius: 0.5rem;
}

.poll-result__option-bar::before {
    content: attr(data-value);
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    color: var(--clr-black);
    font-size: 12px;
    z-index: 1;
}

.poll-result__option-bar::after {
    content: attr(data-percent);
    position: absolute;
    top: 50%;
    left: 0.5rem;
    transform: translateY(-50%);
    color: var(--clr-black);
    font-size: 12px;
}

.poll-result__total-votes {
    font-size: 14px;
    font-weight: 600;
    margin-top: -0.5rem;
    margin-bottom: -0.25rem;
}

.poll__btn {
    position: relative;
    margin-bottom: 0.75rem;
}

    .poll__btn:after {
        content: "Result is shown after you submit your vote.";
        position: absolute;
        top: 100%;
        left: 0;
        color: var(--clr-neutral-30);
        font-size: 12px;
        font-weight: 600;
        text-transform: none;
    }

.poll__btn--disabled {
    background: var(--clr-secondary);
    color: var(--clr-secondary);
}

    .poll__btn--disabled:hover {
        cursor: not-allowed;
        background: var(--clr-secondary);
        color: var(--clr-secondary);
    }

    .poll__btn--disabled::before {
        content: "";
        position: absolute;
        width: 1.5rem;
        height: 1.5rem;
        border: 3px solid transparent;
        border-radius: 50%;
        border-top: 3px solid var(--clr-always-white);
        border-bottom: 3px solid var(--clr-always-white);
        animation: spin 2s linear infinite;
    }

.option {
    position: relative;
}

.option__label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    position: relative;
    padding: 0.5rem;
    background: var(--clr-neutral-85);
    border: 1px solid var(--clr-neutral-70);
    border-radius: 0.5rem;
    overflow: hidden;
}

.option__title {
    order: 2;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25rem;
}

.option__order {
    flex-shrink: 0;
    z-index: 10;
    font-weight: 600;
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-50);
}

.option__percent {
    order: 3;
    color: var(--clr-neutral-50);
    font-weight: 600;
    font-size: 14px;
    line-height: 1rem;
    margin-left: auto;
}

.option__bg {
    height: 100%;
    left: 0;
    background: var(--clr-neutral-60);
    position: absolute;
    opacity: 0.2;
}

.circle {
    border-radius: 50%;
}

/* Size classes */
.circle-xs {
    width: 20px;
    height: 20px;
    font-size: 10px;
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    border-radius: 50%; /* Make it a circle */
    overflow: hidden; /* Hide overflow if content exceeds circle */
}

.circle-sm {
    width: 26px;
    height: 26px;
    font-size: 14px;
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    border-radius: 50%; /* Make it a circle */
    overflow: hidden; /* Hide overflow if content exceeds circle */
}

.circle-md {
    width: 36px;
    height: 36px;
    font-size: 16px;
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    border-radius: 50%; /* Make it a circle */
    overflow: hidden; /* Hide overflow if content exceeds circle */
}

.circle-lg {
    width: 48px;
    height: 48px;
    font-size: 18px;
    display: flex; /* Use flexbox */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    border-radius: 50%; /* Make it a circle */
    overflow: hidden; /* Hide overflow if content exceeds circle */
}

.reactions {
    display: flex;
    flex-direction: column;
}

.reactions__container {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    height: 250px;
    gap: 0.5rem;
    padding: 0.25rem;
}

.reactions__item {
    display: flex;
    justify-content: end;
    flex-direction: column;
    text-align: center;
}

.reactions__bar {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: end;
    align-items: center;
    margin-top: 25px;
}

.reactions__count {
    display: block;
    margin-top: -20px;
    font-size: 12px;
}

.reactions__graph {
    background: var(--clr-success);
    width: 100%;
    height: 0%;
    transition: all 1s ease;
}

.reactions__emoji {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 0.25rem;
    background: var(--clr-neutral-85);
    border: 1px solid var(--clr-neutral-80);
    aspect-ratio: 1/1;
}

.reactions__emoji--voted {
    cursor: not-allowed;
    border: 1px solid var(--clr-neutral-60);
    background: var(--clr-neutral-60);
    color: var(--clr-neutral-80);
}

.reactions__emoji:hover,
.reactions .voted:hover {
    cursor: pointer;
    border: 1px solid var(--clr-secondary);
    color: var(--clr-secondary);
}

@media only screen and (min-width: 768px) {
    .reactions__emoji > img {
        width: 44px;
        height: 44px;
    }
}

.reactions__text {
    text-transform: uppercase;
    font-size: 10px;
}

.reactions .voted {
    border: 1px solid var(--clr-secondary-2);
    background: #f8de81;
}

@media screen and (max-width: 420px) {
    .reactions__text {
        display: none;
    }
}

@media only screen and (min-width: 576px) {
    .reactions__text {
        font-size: 12px;
    }
}

.news {
    display: flex;
    flex-direction: column;
    align-items: start;
    font-size: 14px;
}

.news__wrapper {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 0.5rem;
}

.news__item {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

    .news__item img {
        width: 100px;
        aspect-ratio: 4/3;
        -o-object-fit: cover;
        object-fit: cover;
    }

    .news__item p {
        line-height: 17px;
        font-size: 14px;
    }

.news__btn {
    margin-top: 1rem;
    align-self: center;
}

.content-nav {
    border-bottom: 1px solid var(--clr-neutral-70);
    border-top: 1px solid var(--clr-neutral-70);
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.11);
    background: var(--clr-neutral-90);
    margin-bottom: 0.5rem;
}

.content-nav__wrapper {
    overflow-x: auto;
    display: flex;
    border-left: 1px solid var(--clr-neutral-80);
    border-right: 1px solid var(--clr-neutral-80);
}

    .content-nav__wrapper .active {
        background: var(--clr-surface);
        color: var(--clr-secondary);
        border-bottom: 3px solid var(--clr-secondary);
    }

        .content-nav__wrapper .active .content-nav__title {
            color: var(--clr-secondary);
        }

        .content-nav__wrapper .active:hover {
            color: var(--clr-secondary);
        }

            .content-nav__wrapper .active:hover .content-nav__itemcount {
                color: var(--clr-secondary);
            }

        .content-nav__wrapper .active .content-nav__itemcount {
            color: var(--clr-secondary);
            border: 1px solid var(--clr-secondary);
            background: var(--clr-surface);
        }

.content-nav__title {
    font-size: 13px;
    text-transform: uppercase;
    text-wrap: nowrap;
}

.content-nav__item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-right: 1px solid var(--clr-neutral-80);
    color: var(--clr-neutral-20);
}

    .content-nav__item:last-child {
        border-right: 0;
    }

.content-nav__item-content {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    gap: 0.5rem;
    padding: 0.75rem;
    color: inherit;
    font-size: 14px;
}

    .content-nav__item-content > .flex {
        align-items: center;
        gap: 0.25rem;
    }

    .content-nav__item-content:last-child {
        border-right: 0;
    }

    .content-nav__item-content > svg {
        display: none;
        width: 22px;
        height: 22px;
        fill: currentColor;
    }

.content-nav__item:hover {
    color: var(--clr-neutral-20);
    background: var(--clr-neutral-90);
}

    .content-nav__item:hover > .content-nav__itemcount {
        color: var(--clr-neutral-20);
    }

.content-nav__item .svg-wrapper {
    width: 28px;
    height: 100%;
    padding: 0.5rem;
}

    .content-nav__item .svg-wrapper:hover {
        background: var(--clr-neutral-80);
    }

.content-nav__options {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.content-nav__options-menu {
    /* updated styling for dropdown using fixed positioning */
    position: fixed;
    background: var(--clr-surface);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    width: 150px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

    .content-nav__options-menu.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(5px);
        color: var(--clr-black);
        border-bottom: 0;
        display: flex;
        flex-direction: column;
        z-index: 9;
        overflow: hidden;
    }

.content-nav__options-item {
    padding: 0.125rem 0.5rem;
    font-size: 14px;
    color: var(--clr-neutral-20);
    text-align: left;
    cursor: pointer;
}

    .content-nav__options-item:hover {
        background: var(--clr-neutral-80);
        color: var(--clr-neutral-20);
    }

.content-nav__itemcount {
    font-size: 10px;
    border: 1px solid var(--clr-neutral-50);
    padding: 0.125rem 0.25rem;
    border-radius: 1rem;
}

@media only screen and (min-width: 768px) {
    .content-nav__item-content {
        padding: 0.75rem;
        flex-direction: column;
    }

    .content-nav__item svg {
        display: block;
    }

    .content-nav__itemcount {
        position: absolute;
        top: 0.25rem;
        left: 55%;
        background: var(--clr-surface);
    }
}

.galleries {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.galleries__wrapper {
    gap: 1rem;
}

.galleries__container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.galleries__main {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.galleries__description {
    padding-bottom: 1rem;
}

.galleries__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.galleries__image img {
    aspect-ratio: 3/4;
    width: 100%;
    border-radius: 0.75rem;
    -o-object-fit: cover;
    object-fit: cover;
    min-height: 100px;
}

.galleries__content {
    background: var(--clr-surface);
    width: 90%;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    margin-top: -1rem;
    border-top: 3px solid var(--clr-secondary);
    position: relative;
}

.galleries__title {
    font-weight: 600;
}

.galleries__posted {
    font-size: 13px;
    color: var(--clr-neutral);
}

.galleries__count {
    position: absolute;
    top: -3rem;
    right: 0;
    font-size: 14px;
    color: var(--clr-always-white);
    font-family: var(--font-family-2);
    background: var(--clr-secondary);
}

.galleries__sidebar {
    position: relative;
}

.galleries__sidebar-wrapper {
    position: sticky;
    top: 0.5rem;
}

.galleries__list {
    padding: 1rem 0;
    list-style-position: inside;
}

.galleries__list-item {
    text-decoration: underline;
    padding: 0.25rem 0;
}

.galleries__list-item, .galleries__list-itemname {
    color: var(--clr-link);
}

    .galleries__list-item:hover, .galleries__list-itemname:hover {
        color: var(--clr-secondary);
        cursor: pointer;
    }

        .galleries__list-item:hover > *, .galleries__list-itemname:hover > * {
            color: var(--clr-secondary);
            font-weight: 600;
        }

@media only screen and (min-width: 576px) {
    .galleries__main {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

@media only screen and (min-width: 768px) {
    .galleries__main {
        grid-template-columns: repeat(3, 1fr);
    }
}

.stars {
    display: inline-block;
    width: auto;
    position: relative;
    font-size: 28px;
    border-radius: 5px;
    margin: 5px;
    /* 1/2 a star */
    /* 1 star */
    /* 1 & 1/2 stars */
    /* etc. */
}

    .stars:before {
        content: "★★★★★";
        position: absolute;
        overflow: hidden;
        z-index: 1;
        left: 0px;
        top: 0px;
        /* everything below here is optional. */
        color: var(--clr-secondary);
        font-weight: 400;
    }

    .stars:after {
        content: "☆☆☆☆☆";
        position: relative;
        font-weight: 400;
        color: var(--clr-neutral-70);
    }

    .stars:not([data-percent]):before, .stars[data-percent="0"]:before {
        display: none;
    }

    .stars[data-percent="10"]:before {
        width: 10%;
    }

    .stars[data-percent="20"]:before {
        width: 20%;
    }

    .stars[data-percent="30"]:before {
        width: 30%;
    }

    .stars[data-percent="40"]:before {
        width: 40%;
    }

    .stars[data-percent="50"]:before {
        width: 50%;
    }

    .stars[data-percent="60"]:before {
        width: 60%;
    }

    .stars[data-percent="70"]:before {
        width: 70%;
    }

    .stars[data-percent="80"]:before {
        width: 80%;
    }

    .stars[data-percent="90"]:before {
        width: 90%;
    }

    .stars[data-percent="100"]:before {
        width: 100%;
    }

.chaska {
    background: var(--clr-primary);
    padding: 1rem;
    border-radius: 0.25rem;
    display: flex;
    flex-direction: column;
    color: var(--clr-always-white);
    gap: 0.5rem;
}

.chaska__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--clr-neutral-70);
}

.chaska__title {
    font-weight: 600;
}

.chaska__stats {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
}

.chaska__item {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chaska__stat {
    display: flex;
    align-items: center;
    justify-content: center;
}

.chaska__updated {
    text-align: center;
    font-size: 12px;
}

.chaska__rate {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.chaska__minus {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1rem;
    width: 1rem;
}

    .chaska__minus svg {
        fill: currentColor;
        color: var(--clr-neutral-70);
    }

.chaska__ratestatus {
    font-size: 12px;
    color: var(--clr-neutral-50);
    border-radius: 0.75rem;
    align-self: center;
}

.chaska__button {
    align-self: center;
}

.stars {
    display: flex;
    width: auto;
    position: relative;
    font-size: 22px;
    line-height: 22px;
    border-radius: 5px;
    margin: 5px;
}

.stars-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stars:before {
    content: "★★★★★";
    position: absolute;
    overflow: hidden;
    z-index: 1;
    left: 0px;
    top: 0px;
    color: var(--clr-secondary-2);
}

.stars:after {
    content: "★★★★★";
    position: relative;
    color: #fff;
}

.stars.rate:after {
    position: absolute;
    left: 0px;
}

.stars.rate > A {
    color: transparent;
    text-decoration: none;
    position: relative;
    z-index: 2;
}

.stars.rate:hover:before,
.stars.rate:hover:after {
    display: none;
}

.stars.rate:hover > A {
    color: var(--clr-secondary-2);
}

    .stars.rate:hover > A:hover {
        color: var(--clr-secondary-2);
    }

.stars.rate > A:hover ~ A {
    color: #fff;
    text-shadow: none;
}

.stars:not([data-percent]):before,
.stars[data-percent="0"]:before {
    display: none;
}

/* 1/2 a star */
.stars[data-percent="10"]:before {
    width: 10%;
}

/* 1 star */
.stars[data-percent="20"]:before {
    width: 20%;
}

/* 1 & 1/2 stars */
.stars[data-percent="30"]:before {
    width: 30%;
}

/* etc. */
.stars[data-percent="40"]:before {
    width: 40%;
}

.stars[data-percent="50"]:before {
    width: 50%;
}

.stars[data-percent="60"]:before {
    width: 60%;
}

.stars[data-percent="70"]:before {
    width: 70%;
}

.stars[data-percent="80"]:before {
    width: 80%;
}

.stars[data-percent="90"]:before {
    width: 90%;
}

.stars[data-percent="100"]:before {
    width: 100%;
}

.table {
    border: 1px solid var(--clr-neutral-80);
    border-collapse: collapse;
    width: 100%;
    font-size: 14px;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

    .table thead th {
        background-color: var(--clr-neutral-80);
        font-weight: 600;
        text-transform: uppercase;
    }

@media only screen and (min-width: 576px) {
    .table thead th {
        padding: 0.75rem;
    }
}

.table thead .table__name > span:before {
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='blue' stroke-width='1.5' viewBox='0 0 24 30'%3E%3Cpath d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8v1.6h19.2v-1.6c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
}

.table thead .table__description > span:before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%236a9a0b' viewBox='0 0 24 24'%3E%3Cpath d='M4 2h14l4 4v16a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2zm0 2v18h16V8h-5V3.5L4 4zm7 10h5v2h-5v-2zm0-4h5v2h-5V10z'/%3E%3C/svg%3E");
}

.table thead .table__action > span:before {
    content: url("data:image/svg+xml,%3Csvg fill='%23000000' viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2C11.355 2 10 3.355 10 5v11.813l-.656-.688-.25-.219c-1.152-1.152-3.035-1.152-4.188 0s-1.152 3.035 0 4.188v.031l8.188 8.094.063.031.031.063C14.535 29.324 16.254 30 18.188 30h1.719C24.441 30 28.094 26.348 28.094 21.813V14c0-1.645-1.355-3-3-3-.426 0-.82.117-1.188.281C23.578 9.98 22.395 9 21 9c-.766 0-1.469.301-2 .781C18.469 9.301 17.766 9 17 9c-.352 0-.684.074-1 .188V5c0-1.645-1.355-3-3-3zm0 2c.555 0 1 .445 1 1v11h2v-4c0-.555.445-1 1-1s1 .445 1 1v4h2v-4c0-.555.445-1 1-1s1 .445 1 1v4h2.094V14c0-.555.445-1 1-1s1 .445 1 1v7.813c0 3.465-2.723 6.188-6.188 6.188h-1.719c-1.465 0-2.73-.523-3.781-1.312L6.313 18.688c-.445-.445-.445-.93 0-1.375s.93-.445 1.375 0L12 21.625V5c0-.555.445-1 1-1z' fill='%230077b6'/%3E%3C/svg%3E");
}

.table thead .table__topic > span:before {
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23e89107' viewBox='0 0 27 32'%3E%3Ctitle%3Edoc-text%3C/title%3E%3Cpath d='M26.208 6.784q0.512 0.512 0.864 1.344t0.352 1.6v20.544q0 0.736-0.48 1.216t-1.216 0.512h-24q-0.736 0-1.216-0.512t-0.512-1.216v-28.544q0-0.736 0.512-1.216t1.216-0.512h16q0.704 0 1.568 0.352t1.344 0.864zM18.272 2.432v6.72h6.72q-0.16-0.544-0.384-0.736l-5.6-5.6q-0.192-0.224-0.736-0.384zM25.152 29.728v-18.304h-7.424q-0.736 0-1.216-0.512t-0.512-1.184v-7.456h-13.728v27.456h22.88zM6.848 14.272q0-0.224 0.16-0.384t0.416-0.16h12.576q0.256 0 0.416 0.16t0.16 0.384v1.152q0 0.256-0.16 0.416t-0.416 0.16h-12.576q-0.256 0-0.416-0.16t-0.16-0.416v-1.152zM20 18.272q0.256 0 0.416 0.16t0.16 0.416v1.152q0 0.256-0.16 0.416t-0.416 0.16h-12.576q-0.256 0-0.416-0.16t-0.16-0.416v-1.152q0-0.256 0.16-0.416t0.416-0.16h12.576zM20 22.848q0.256 0 0.416 0.16t0.16 0.416v1.152q0 0.256-0.16 0.416t-0.416 0.16h-12.576q-0.256 0-0.416-0.16t-0.16-0.416v-1.152q0-0.256 0.16-0.416t0.416-0.16h12.576z'%3E%3C/path%3E%3C/svg%3E");
}

.table thead .table__author {
    position: relative;
}

    .table thead .table__author > span:before {
        content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%2344b69c' viewBox='0 0 27 32'%3E%3Cpath d='M6.496 27.424l1.6-1.632-4.192-4.192-1.632 1.632v1.92h2.304v2.272h1.92zM15.808 10.848q0-0.384-0.384-0.384-0.16 0-0.288 0.128l-9.696 9.664q-0.128 0.128-0.128 0.32 0 0.384 0.416 0.384 0.16 0 0.288-0.128l9.696-9.664q0.096-0.128 0.096-0.32zM14.848 7.424l7.424 7.424-14.848 14.88h-7.424v-7.456zM27.040 9.152q0 0.928-0.64 1.6l-2.976 2.976-7.424-7.456 2.976-2.944q0.64-0.672 1.6-0.672 0.928 0 1.632 0.672l4.192 4.192q0.64 0.704 0.64 1.632z'%3E%3C/path%3E%3C/svg%3E ");
    }

.table thead .table__development {
    position: relative;
}

    .table thead .table__development > span:before {
        content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%2344b69c' viewBox='0 0 27 32'%3E%3Cpath d='M6.496 27.424l1.6-1.632-4.192-4.192-1.632 1.632v1.92h2.304v2.272h1.92zM15.808 10.848q0-0.384-0.384-0.384-0.16 0-0.288 0.128l-9.696 9.664q-0.128 0.128-0.128 0.32 0 0.384 0.416 0.384 0.16 0 0.288-0.128l9.696-9.664q0.096-0.128 0.096-0.32zM14.848 7.424l7.424 7.424-14.848 14.88h-7.424v-7.456zM27.040 9.152q0 0.928-0.64 1.6l-2.976 2.976-7.424-7.456 2.976-2.944q0.64-0.672 1.6-0.672 0.928 0 1.632 0.672l4.192 4.192q0.64 0.704 0.64 1.632z'%3E%3C/path%3E%3C/svg%3E ");
    }

.table thead .table__replies > span:before {
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23e80844' viewBox='0 0 23 32'%3E%3Cpath d='M22.496 22.368v1.184q0 1.504-1.024 2.592t-2.496 1.056h-1.024l-4.64 4.8v-4.8h-9.44q-1.44 0-2.464-1.056t-1.024-2.592v-1.184h22.112zM22.496 16.544v4.576h-22.112v-4.576h22.112zM22.496 10.688v4.576h-22.112v-4.576h22.112zM22.496 8.192v1.184h-22.112v-1.184q0-1.504 1.024-2.56t2.464-1.056h15.104q1.44 0 2.496 1.056t1.024 2.56z'%3E%3C/path%3E%3C/svg%3E ");
}

.table thead .table__views > span:before {
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%2323a3cd' viewBox='0 0 32 32'%3E%3Cpath d='M29.728 17.152q-2.72-4.224-6.816-6.304 1.088 1.856 1.088 4 0 3.296-2.336 5.664t-5.664 2.336-5.664-2.336-2.336-5.664q0-2.144 1.088-4-4.096 2.080-6.816 6.304 2.4 3.648 5.984 5.824t7.744 2.176 7.776-2.176 5.952-5.824zM16.864 10.272q0-0.352-0.256-0.608t-0.608-0.224q-2.24 0-3.84 1.6t-1.6 3.808q0 0.352 0.256 0.608t0.608 0.256 0.608-0.256 0.256-0.608q0-1.536 1.088-2.624t2.624-1.088q0.352 0 0.608-0.256t0.256-0.608zM32 17.152q0 0.608-0.352 1.216-2.496 4.128-6.72 6.592t-8.928 2.464-8.928-2.464-6.72-6.592q-0.352-0.608-0.352-1.216t0.352-1.248q2.496-4.096 6.72-6.56t8.928-2.496 8.928 2.496 6.72 6.56q0.352 0.64 0.352 1.248z'%3E%3C/path%3E%3C/svg%3E ");
}

.table thead .table__reply {
    position: relative;
}

    .table thead .table__reply > span:before {
        content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%238ca70b' viewBox='0 0 27 32'%3E%3Ctitle%3Eclock%3C/title%3E%3Cpath d='M16 9.728v8q0 0.224-0.16 0.384t-0.416 0.16h-5.696q-0.256 0-0.416-0.16t-0.16-0.384v-1.152q0-0.256 0.16-0.416t0.416-0.16h4v-6.272q0-0.256 0.16-0.416t0.384-0.16h1.152q0.256 0 0.416 0.16t0.16 0.416zM23.424 16q0-2.656-1.312-4.864t-3.52-3.552-4.864-1.312-4.896 1.312-3.52 3.552-1.312 4.864 1.312 4.864 3.52 3.552 4.896 1.312 4.864-1.312 3.52-3.552 1.312-4.864zM27.424 16q0 3.744-1.824 6.88t-4.992 4.992-6.88 1.856-6.912-1.856-4.96-4.992-1.856-6.88 1.856-6.88 4.96-4.992 6.912-1.856 6.88 1.856 4.992 4.992 1.824 6.88z'%3E%3C/path%3E%3C/svg%3E ");
    }

.table thead .table__question {
    position: relative;
}

    .table thead .table__question > span:before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Ccircle cx='256' cy='256' r='256' fill='none' stroke='%230099ff' stroke-width='16'/%3E%3Cpath fill='blue' stroke='%230099ff' stroke-width='16' d='M256 336c-13.255 0-24 10.745-24 24s10.745 24 24 24 24-10.745 24-24-10.745-24-24-24zm0-208c-49.626 0-88 38.374-88 88h48c0-22.091 17.909-40 40-40s40 17.909 40 40c0 19.798-14.69 30.453-27.844 41.057C252.478 265.18 240 274.398 240 296h48c0-10.334 7.147-16.104 17.11-24.057C325.337 255.345 344 235.798 344 216c0-49.626-38.374-88-88-88z'/%3E%3C/svg%3E");
    }

.table thead .table__votes {
    position: relative;
}

    .table thead .table__votes > span:before {
        content: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1'  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 120 100' style='enable-background:new 0 0 122.88 104.19 ' xml:space='preserve' fill='green'%3E%3Cg%3E%3Cpath d='M62.63,6.25c0.56-2.85,2.03-4.68,4.04-5.61c1.63-0.76,3.54-0.83,5.52-0.31c1.72,0.45,3.53,1.37,5.26,2.69c4.69,3.57,9.08,10.3,9.64,18.71c0.17,2.59,0.12,5.35-0.12,8.29c-0.16,1.94-0.41,3.98-0.75,6.1h19.95l0.09,0.01c3.24,0.13,6.38,0.92,9.03,2.3c2.29,1.2,4.22,2.84,5.56,4.88c1.38,2.1,2.13,4.6,2.02,7.46c-0.08,2.12-0.65,4.42-1.81,6.87c0.66,2.76,0.97,5.72,0.54,8.32c-0.36,2.21-1.22,4.17-2.76,5.63c0.08,3.65-0.41,6.71-1.39,9.36c-1.01,2.72-2.52,4.98-4.46,6.98c-0.17,1.75-0.45,3.42-0.89,4.98c-0.55,1.96-1.36,3.76-2.49,5.35c-3.4,4.8-6.12,4.69-10.43,4.51c-0.6-0.02-1.24-0.05-2.24-0.05l-39.03,0c-3.51,0-6.27-0.51-8.79-1.77c-2.49-1.25-4.62-3.17-6.89-6.01l-0.58-1.66V47.78l1.98-0.53c5.03-1.36,8.99-5.66,12.07-10.81c3.16-5.3,5.38-11.5,6.9-16.51V6.76L62.63,6.25zM4,43.02h29.08c2.2,0,4,1.8,4,4v53.17c0,2.2-1.8,4-4,4l-29.08,0c-2.2,0-4-1.8-4-4V47.02C0,44.82,1.8,43.02,4,43.02zM68.9,5.48c-0.43,0.2-0.78,0.7-0.99,1.56V20.3l-0.12,0.76c-1.61,5.37-4.01,12.17-7.55,18.1c-3.33,5.57-7.65,10.36-13.27,12.57v40.61c1.54,1.83,2.96,3.07,4.52,3.85c1.72,0.86,3.74,1.2,6.42,1.2l39.03,0c0.7,0,1.6,0.04,2.45,0.07c2.56,0.1,4.17,0.17,5.9-2.27c0.75-1.06,1.3-2.31,1.69-3.71c0.42-1.49,0.67-3.15,0.79-4.92l0.82-1.75c1.72-1.63,3.03-3.46,3.87-5.71c0.86-2.32,1.23-5.11,1.02-8.61l-0.09-1.58l1.34-0.83c0.92-0.57,1.42-1.65,1.63-2.97c0.34-2.1-0.02-4.67-0.67-7.06l0.21-1.93c1.08-2.07,1.6-3.92,1.67-5.54c0.06-1.68-0.37-3.14-1.17-4.35c-0.84-1.27-2.07-2.31-3.56-3.09c-1.92-1.01-4.24-1.59-6.66-1.69v0.01l-26.32,0l0.59-3.15c0.57-3.05,0.98-5.96,1.22-8.72c0.23-2.7,0.27-5.21,0.12-7.49c-0.45-6.72-3.89-12.04-7.56-14.83c-1.17-0.89-2.33-1.5-3.38-1.77C70.04,5.27,69.38,5.26,68.9,5.48z'/%3E%3C/g%3E%3C/svg%3E");
    }

.table thead .table__edit {
    position: relative;
}

    .table thead .table__edit > span:before {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 112.04'%3E%3Cpath fill='blue' fill-rule='evenodd' d='M109.28 19.61l12.21 9.88a3.77 3.77 0 01.56 5.29l-5.46 6.75-18.06-14.6 5.47-6.76a3.79 3.79 0 015.29-.56zM21.07 30.81a3.18 3.18 0 010-6.36H74.12a3.18 3.18 0 010 6.36zM9.49 0h76.22a9.53 9.53 0 019.49 9.49v5.63l-4.48 5.53a9.81 9.81 0 00-1.18 1.85c-.24.19-.48.4-.71.62V9.49a3.14 3.14 0 00-3.12-3.13H9.49A3.14 3.14 0 006.36 9.49v93.06a3.16 3.16 0 00.92 2.21 3.11 3.11 0 002.21.92h76.22a3.12 3.12 0 003.12-3.13V88.2l1.91-.81a10 10 0 004.34-3.13v18.43a9.54 9.54 0 01-9.49 9.49H9.49A9.51 9.51 0 010 102.55V9.49A9.53 9.53 0 019.49 0zM21.07 87.6a3.19 3.19 0 010-6.37H56.19a37.1 37.1 0 00-.3 6.37zm0-18.93a3.19 3.19 0 010-6.37H59.22v.27l-1.05 6.1zm0-18.93a3.18 3.18 0 010-6.36H72.44l-5.11 6.36zM87.25 78l-12.82 5.47c-9.35 3.47-8.93 5.43-8-3.85L69.24 63.4l26.56-33 18 14.6L87.27 78zm-14.94-12.11l11.86 9.59-8.42 3.6c-6.6 2.83-6.42 4.23-5.27-2.53l1.83-10.66z'/%3E%3C/svg%3E");
    }

.table tr {
    background: var(--clr-neutral-85);
}

    .table tr a:hover {
        text-decoration: underline;
    }

    .table tr:nth-child(2n) {
        background: var(--clr-surface);
    }

.table td,
.table th {
    border: 1px solid var(--clr-neutral-70);
    text-align: center;
    padding: 0.5rem 0.25rem;
}

@media only screen and (min-width: 576px) {
    .table td,
    .table th {
        padding: 0.5rem;
    }
}

.table th {
    padding-top: 0.75rem;
}

.table__topic, .table__author, .table__views, .table__replies, .table__reply, .table__development {
    position: relative;
}

    .table__topic > span, .table__author > span, .table__views > span, .table__replies > span, .table__reply > span, .table__development > span {
        font-size: 12px;
    }

    .table__topic span:before, .table__author span:before, .table__views span:before, .table__replies span:before, .table__reply span:before, .table__development span:before {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        margin: auto;
        margin-bottom: 0.5rem;
    }

.table__name, .table__question, .table__action, .table__edit, .table__votes, .table__description {
    position: relative;
}

    .table__name > span, .table__question > span, .table__action > span, .table__edit > span, .table__votes > span, .table__description > span {
        font-size: 15px;
    }

    .table__name span:before, .table__question span:before, .table__action span:before, .table__edit span:before, .table__votes span:before, .table__description span:before {
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        margin: auto;
    }

.table__reply-wrapper {
    display: flex;
    flex-direction: column;
    text-wrap: nowrap;
    font-size: 12px;
}

.table__reply-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    justify-content: center;
}

.table__content {
    display: flex;
    flex-direction: row;
    gap: 0.25rem;
}

.table__arrow {
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25rem;
    height: 1.25rem;
    padding: 0.25rem;
}

.table__info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    justify-content: space-evenly;
    position: relative;
    padding-bottom: 10px;
    width: 100%;
}

.table__image {
    width: 37px;
    height: 37px;
    -o-object-fit: none;
    object-fit: none;
    flex-shrink: 0;
}

.table__image-1 {
    -o-object-position: 0 -9px;
    object-position: 0 -9px;
}

.table__image-2 {
    -o-object-position: 0 -52px;
    object-position: 0 -52px;
}

.table__image-3 {
    -o-object-position: 0 -95px;
    object-position: 0 -95px;
}

.table__image-4 {
    -o-object-position: 0 -137px;
    object-position: 0 -137px;
}

.table__image-5 {
    -o-object-position: 0 -179px;
    object-position: 0 -179px;
}

.table__image-6 {
    -o-object-position: 0 -222px;
    object-position: 0 -222px;
}

.table__image-7 {
    -o-object-position: 0 -264px;
    object-position: 0 -264px;
}

.table__image-8 {
    -o-object-position: 0 -306px;
    object-position: 0 -306px;
}

.table__image-9 {
    -o-object-position: 0 -348px;
    object-position: 0 -348px;
}

.table__image-10 {
    -o-object-position: 0 -391px;
    object-position: 0 -391px;
}

.table__image-11 {
    -o-object-position: 0 -434px;
    object-position: 0 -434px;
}

.table__image-12 {
    -o-object-position: 0 -474px;
    object-position: 0 -474px;
}

.table__image-13 {
    -o-object-position: 0 -518px;
    object-position: 0 -518px;
}

.table__image-14 {
    -o-object-position: 0 -559px;
    object-position: 0 -559px;
}

.table__image-15 {
    -o-object-position: 0 -602px;
    object-position: 0 -602px;
}

.table__image-16 {
    -o-object-position: 0 -644px;
    object-position: 0 -644px;
}

.table__image-17 {
    -o-object-position: 0 -687px;
    object-position: 0 -687px;
}

.table__image-18 {
    -o-object-position: 0 -730px;
    object-position: 0 -730px;
}

.table__image-19 {
    -o-object-position: 0 -774px;
    object-position: 0 -774px;
}

.table__image-20 {
    -o-object-position: 0 -817px;
    object-position: 0 -817px;
}

.table__image-21 {
    -o-object-position: 0 -858px;
    object-position: 0 -858px;
}

.table__image-22 {
    -o-object-position: 0 -902px;
    object-position: 0 -902px;
}

.table__image-23 {
    -o-object-position: 0 -944px;
    object-position: 0 -944px;
}

.table__image-24 {
    -o-object-position: 0 -987px;
    object-position: 0 -987px;
}

.table__adbanner > * {
    padding: 1rem 0px;
}

.table__caption {
    font-size: 14px;
    font-weight: 600;
    text-align: start;
    color: var(--clr-link);
    word-break: break-word;
}

.table__pages {
    display: flex;
    align-items: center;
    border: 1px solid var(--clr-neutral-70);
    color: var(--clr-neutral-30);
    padding: 0 0.25rem;
}

.table__pages-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    font-size: 10px;
}

.table__hideafter {
    display: none;
    align-items: center;
}

.table__authorname {
    color: var(--clr-link);
}

    .table__authorname:hover {
        text-decoration: underline;
    }

.table__replied {
    font-size: 12px;
}

.table__lastpost {
    color: var(--clr-link);
    font-weight: 600;
}

    .table__lastpost:hover {
        text-decoration: underline;
    }

.table__description {
    text-align: left;
}

.table__blueBgHeading {
    position: relative;
    border: 1px solid var(--clr-neutral-80);
    color: var(--clr-always-white);
    font-weight: 600;
    text-align: start !important;
    background: #00baff url("https://www.indiaforums.com/content/img/forumtopictblbluebgheading.jpg") right top no-repeat !important;
}

.table__violetBgHeading {
    position: relative;
    border: 1px solid var(--clr-neutral-80);
    color: var(--clr-always-white);
    font-weight: 600;
    text-align: start !important;
    background: #b45dd2 url("https://www.indiaforums.com/content/img/forumtopictblvioletbgheading.jpg") right top no-repeat;
}

.table__unauthorized {
    padding: 0 !important;
}

.table__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.table__tag {
    font-size: 11px;
    background: var(--clr-neutral-90);
    color: var(--clr-black);
    border: 1px solid var(--clr-neutral-50);
    padding: 0.125rem 0.5rem;
    border-radius: 0.375rem;
}

.table__checkbox {
    margin-top: 10px;
    flex-shrink: 0;
    width: 1rem !important;
    height: 1rem !important;
}

.table__login {
    display: grid;
    grid-template-columns: 1fr 24px;
    font-weight: 400;
    justify-items: center;
    gap: 0.5rem;
    align-items: center;
}

@media only screen and (min-width: 576px) {
    .table__login {
        display: flex;
    }
}

.table__login-wrapper {
    background: #1cbbb4;
    padding: 0.75rem !important;
}

.table__login-content {
    color: var(--clr-always-white);
    display: flex;
    align-items: center;
}

.table__login-svg {
    grid-column: 2;
    grid-row: 1/span 2;
    width: 18px;
    height: 18px;
    padding: 0.25rem;
    flex-shrink: 0;
}

    .table__login-svg svg {
        fill: currentColor;
    }

.table__login-action {
    flex-shrink: 0;
    grid-column: 1;
    padding: 0;
    max-width: 180px;
    justify-content: center;
}

@media only screen and (min-width: 576px) {
    .table__login-action {
        width: 100%;
        max-width: 240px;
        justify-content: end;
        margin-left: auto;
    }
}

.table__login-action > * {
    width: -moz-fit-content;
    width: fit-content;
    padding: 0.25rem 0.75rem;
    font-size: 12px;
    border-radius: 0.25rem;
}

.table__toggle-posts {
    position: absolute;
    bottom: 2px;
    right: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: transparent;
    cursor: pointer;
    transition: color 0.2s ease;
    z-index: 2;
}

    .table__toggle-posts .svg-wrapper {
        width: 0.75rem;
        height: 0.75rem;
        transition: transform 0.3s ease;
    }

.table__posts-container {
    width: 100%;
    padding: 0;
    border-top: 1px solid var(--clr-neutral-80);
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    transition: all 0.3s ease-in-out, visibility 0s linear 0.3s;
    margin-top: 8px;
}

    .table__posts-container.expanded {
        padding: 12px 0 20px;
        max-height: 100%;
        opacity: 1;
        visibility: visible;
        transition: all 0.3s ease-in-out, visibility 0s linear;
    }

.table__posts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.table__post-id {
    font-weight: 600;
    color: var(--clr-link);
    border: 1px solid var(--clr-neutral-80);
    border-radius: 0.25rem;
    padding: 0.25rem 0.5rem;
    font-size: 12px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

    .table__post-id:hover {
        background-color: var(--clr-neutral-80);
        text-decoration: none;
    }

.table__posts-more {
    border: 1px solid var(--clr-neutral-80);
    height: 28px;
    width: 28px;
    font-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--clr-link);
    font-weight: 600;
    cursor: pointer;
}

    .table__posts-more:hover {
        background-color: var(--clr-neutral-80);
    }

.category-table__title {
    font-size: 1rem;
    text-align: left;
    font-weight: 600;
}

.category-table__meta {
    display: flex;
    gap: 3px;
    padding-left: 0.5rem;
    flex-wrap: wrap;
    font-weight: 600;
}

.category-table__btn .svg-wrapper {
    background: var(--clr-secondary);
    color: var(--clr-always-white);
    padding: 0.5rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.category-table__date {
    color: var(--clr-info);
}

.category-table__status {
    color: var(--clr-secondary);
}

.category-table__access {
    color: var(--clr-info);
}

.category-table__cell--action {
    display: flex;
    gap: 0.5rem;
}

.forum-table__report {
    background: var(--clr-danger);
    color: var(--clr-always-white);
}

.forum-table__trash {
    background: var(--clr-warning);
    color: var(--clr-always-white);
}

.forum-table__info {
    background: var(--clr-info);
    color: var(--clr-always-white);
}

.forum-table__btn .svg-wrapper {
    padding: 0.5rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.pending-ques {
    font-weight: 500;
}

.pending-ques__question-text {
    color: var(--clr-link);
    font-size: 1rem;
}

.pending-ques__meta {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
}

.pending-ques__date-value {
    color: var(--clr-info);
}

.pending-ques__category-link {
    background-color: var(--clr-neutral-80);
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
}

.moderator-table__title {
    text-align: left;
    font-size: 1rem;
}

.hide__item {
    display: inline-block;
    display: flex;
    vertical-align: middle;
    align-items: end;
    font-size: 12px;
}

.hide__author {
    color: var(--clr-link);
}

    .hide__author:before {
        width: 1.25rem;
        height: 1.25rem;
        margin: 0 !important;
        padding: 4px;
        margin-bottom: 2px;
        content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%2344b69c' viewBox='0 0 27 32'%3E%3Cpath d='M6.496 27.424l1.6-1.632-4.192-4.192-1.632 1.632v1.92h2.304v2.272h1.92zM15.808 10.848q0-0.384-0.384-0.384-0.16 0-0.288 0.128l-9.696 9.664q-0.128 0.128-0.128 0.32 0 0.384 0.416 0.384 0.16 0 0.288-0.128l9.696-9.664q0.096-0.128 0.096-0.32zM14.848 7.424l7.424 7.424-14.848 14.88h-7.424v-7.456zM27.040 9.152q0 0.928-0.64 1.6l-2.976 2.976-7.424-7.456 2.976-2.944q0.64-0.672 1.6-0.672 0.928 0 1.632 0.672l4.192 4.192q0.64 0.704 0.64 1.632z'%3E%3C/path%3E%3C/svg%3E ");
    }

.hide__name:before {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 !important;
    padding: 6px;
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23e80844' viewBox='0 0 23 32'%3E%3Cpath d='M22.496 22.368v1.184q0 1.504-1.024 2.592t-2.496 1.056h-1.024l-4.64 4.8v-4.8h-9.44q-1.44 0-2.464-1.056t-1.024-2.592v-1.184h22.112zM22.496 16.544v4.576h-22.112v-4.576h22.112zM22.496 10.688v4.576h-22.112v-4.576h22.112zM22.496 8.192v1.184h-22.112v-1.184q0-1.504 1.024-2.56t2.464-1.056h15.104q1.44 0 2.496 1.056t1.024 2.56z'%3E%3C/path%3E%3C/svg%3E ");
}

.hide__replies:before {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 !important;
    padding: 6px;
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23e80844' viewBox='0 0 23 32'%3E%3Cpath d='M22.496 22.368v1.184q0 1.504-1.024 2.592t-2.496 1.056h-1.024l-4.64 4.8v-4.8h-9.44q-1.44 0-2.464-1.056t-1.024-2.592v-1.184h22.112zM22.496 16.544v4.576h-22.112v-4.576h22.112zM22.496 10.688v4.576h-22.112v-4.576h22.112zM22.496 8.192v1.184h-22.112v-1.184q0-1.504 1.024-2.56t2.464-1.056h15.104q1.44 0 2.496 1.056t1.024 2.56z'%3E%3C/path%3E%3C/svg%3E ");
}

.hide__views:before {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0 !important;
    padding: 6px;
    content: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%2323a3cd' viewBox='0 0 32 32'%3E%3Cpath d='M29.728 17.152q-2.72-4.224-6.816-6.304 1.088 1.856 1.088 4 0 3.296-2.336 5.664t-5.664 2.336-5.664-2.336-2.336-5.664q0-2.144 1.088-4-4.096 2.080-6.816 6.304 2.4 3.648 5.984 5.824t7.744 2.176 7.776-2.176 5.952-5.824zM16.864 10.272q0-0.352-0.256-0.608t-0.608-0.224q-2.24 0-3.84 1.6t-1.6 3.808q0 0.352 0.256 0.608t0.608 0.256 0.608-0.256 0.256-0.608q0-1.536 1.088-2.624t2.624-1.088q0.352 0 0.608-0.256t0.256-0.608zM32 17.152q0 0.608-0.352 1.216-2.496 4.128-6.72 6.592t-8.928 2.464-8.928-2.464-6.72-6.592q-0.352-0.608-0.352-1.216t0.352-1.248q2.496-4.096 6.72-6.56t8.928-2.496 8.928 2.496 6.72 6.56q0.352 0.64 0.352 1.248z'%3E%3C/path%3E%3C/svg%3E ");
}

.unauthorized {
    display: flex;
    padding: 1.5rem;
    gap: 1.5rem;
    flex-direction: column;
    align-items: center;
    background: var(--clr-surface);
}

.unauthorized__lock svg {
    width: 100px;
    height: 100px;
    max-height: 100%;
    fill: currentColor;
    color: var(--clr-neutral-50);
}

.unauthorized__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    width: 100%;
}

.unauthorized__head {
    font-size: 1.25rem;
    color: var(--clr-secondary);
}

.unauthorized__caption {
    font-size: 1rem;
}

@media only screen and (max-width: 767.98px) {
    .table__author, .table__replies, .table__views {
        display: none;
    }

    .table__hideafter {
        display: flex;
    }
}

@media only screen and (max-width: 575.98px) {
    .table__image {
        scale: 0.75;
    }
}

@media only screen and (max-width: 359.98px) {
    .table__content {
        display: flex;
        flex-direction: column;
        align-items: start;
    }

    .table__image {
        display: none;
    }
}

.action-tab {
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem;
    background: var(--clr-neutral-85);
    font-size: 14px;
    width: 100%;
}

    .action-tab .active {
        margin-bottom: -1px;
        color: var(--clr-secondary);
        font-weight: 600;
        background: var(--clr-surface);
        border: 1px solid var(--clr-neutral-70);
        border-bottom: 0;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
    }

@media only screen and (min-width: 576px) {
    .action-tab {
        padding: 0 2rem;
        font-size: 18px;
    }
}

.action-tab__item {
    padding: 0.25rem 0.5rem;
    text-align: center;
    margin-top: 0.5rem;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

@media only screen and (min-width: 360px) {
    .action-tab__item {
        width: 100%;
    }
}

@media only screen and (min-width: 576px) {
    .action-tab__item {
        font-size: 20px;
        padding: 0.75rem 1rem;
    }
}

.action-tab__item:hover {
    color: var(--clr-secondary);
}

.action-tab-2 {
    display: flex;
    background: var(--clr-surface);
    border: 1px solid var(--clr-neutral-70);
    width: 100%;
}

    .action-tab-2 .active {
        position: relative;
        color: var(--clr-on-secondary);
        background: var(--clr-secondary);
        border: 1px solid var(--clr-neutral-70);
        border-bottom: 0;
    }

        .action-tab-2 .active:hover {
            color: var(--clr-on-secondary) !important;
        }

        .action-tab-2 .active:after {
            content: "";
            position: absolute;
            bottom: -0.5rem;
            left: calc(50% - 0.5rem);
            border-style: solid;
            border-width: 0.5rem 0.5rem 0 0.5rem;
            border-color: var(--clr-secondary) transparent transparent transparent;
        }

.action-tab-2__item {
    width: 100%;
    margin-top: 0;
    font-size: 14px;
    border-right: 1px solid var(--clr-neutral-70);
    padding: 0.25rem 0.5rem;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

    .action-tab-2__item:last-child {
        border-right: 0;
    }

@media only screen and (min-width: 360px) {
    .action-tab-2__item {
        font-size: 13px;
        width: 100%;
    }
}

@media only screen and (min-width: 576px) {
    .action-tab-2__item {
        font-size: 1rem;
        padding: 0.5rem 1rem;
    }
}

.action-tab-2__item:hover {
    color: var(--clr-secondary);
}

.js-image-upload,
.image-cropper,
.js-video-upload,
.js-media-upload {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    background: var(--clr-surface);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    padding: 1rem;
    font-family: Arial, sans-serif;
    max-width: 600px;
    width: 100%;
}

.js-image-upload__tabs,
.image-cropper__tabs,
.js-video-upload__tabs,
.js-media-upload__tabs {
    display: flex;
    border-bottom: 1px solid var(--clr-neutral-70);
}

.js-image-upload__tab,
.image-cropper__tab,
.js-video-upload__tab,
.js-media-upload__tab {
    padding: 0.25rem 1rem;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    color: var(--clr-black);
}

.js-image-upload__tab--active,
.image-cropper__tab--active,
.js-video-upload__tab--active,
.js-media-upload__tab--active {
    font-weight: 600;
    border-bottom: 2px solid var(--clr-secondary);
    color: var(--clr-secondary);
}

.js-image-upload__content,
.image-cropper__content,
.js-video-upload__content,
.js-media-upload__content {
    display: none;
}

.js-image-upload__content--active,
.image-cropper__content--active,
.js-video-upload__content--active,
.js-media-upload__content--active {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.js-image-upload__wrapper,
.image-cropper__wrapper,
.js-video-upload__wrapper,
.js-media-upload__wrapper {
    position: fixed;
    top: 50vh;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(1px); /* Adds the blurry background effect */
    -webkit-backdrop-filter: blur(1px); /* For Safari support */
    width: 100%;
    height: 100vh;
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9;
}

@media only screen and (min-width: 576px) {
    .js-image-upload__wrapper,
    .image-cropper__wrapper,
    .js-video-upload__wrapper,
    .js-media-upload__wrapper {
        padding: 2rem;
    }
}

.js-image-upload__header,
.image-cropper__header,
.js-video-upload__header,
.js-media-upload__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.js-image-upload__title,
.image-cropper__title,
.js-video-upload__title,
.js-media-upload__title {
    margin: 0;
    font-size: 1.2em;
}

.js-image-upload__close-button,
.image-cropper__close-button,
.js-video-upload__close-button,
.js-media-upload__close-button {
    font-size: 1.5em;
    line-height: 1;
    cursor: pointer;
    color: var(--clr-neutral-30);
}

.js-image-upload__button,
.image-cropper__button,
.js-video-upload__button,
.js-media-upload__button {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.5rem;
    align-items: center;
    padding: 1rem;
    background: var(--clr-surface);
    color: var(--clr-neutral-40);
    border: 1px solid var(--clr-neutral-60);
    border-radius: 0.5rem;
    overflow: hidden;
}

.js-image-upload__search,
.image-cropper__search,
.js-video-upload__search,
.js-media-upload__search {
    display: flex;
    gap: 0.5rem;
}

.js-image-upload__search-input,
.image-cropper__search-input,
.js-video-upload__search-input,
.js-media-upload__search-input {
    width: 100%;
    padding: 8px;
    border-radius: 4px;
}

.js-image-upload__search-button,
.image-cropper__search-button,
.js-video-upload__search-button,
.js-media-upload__search-button {
    color: var(--clr-secondary);
    border: 1px solid var(--clr-secondary);
    padding: 0.25rem 0.5rem;
    font-size: 14px;
    font-weight: 500;
    border-radius: 0.25rem;
}

    .js-image-upload__search-button:hover,
    .image-cropper__search-button:hover,
    .js-video-upload__search-button:hover,
    .js-media-upload__search-button:hover {
        background: var(--clr-secondary);
        color: var(--clr-white);
    }

.js-image-upload__video-grid, .js-image-upload__image-grid,
.image-cropper__video-grid,
.image-cropper__image-grid,
.js-video-upload__video-grid,
.js-video-upload__image-grid,
.js-media-upload__video-grid,
.js-media-upload__image-grid {
    display: flex;
    gap: 10px;
    max-height: 60vh;
    overflow-y: auto;
}

.js-image-upload__video-column, .js-image-upload__image-column,
.image-cropper__video-column,
.image-cropper__image-column,
.js-video-upload__video-column,
.js-video-upload__image-column,
.js-media-upload__video-column,
.js-media-upload__image-column {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 10px;
}

@media only screen and (min-width: 768px) {
    .js-image-upload__video-column, .js-image-upload__image-column,
    .image-cropper__video-column,
    .image-cropper__image-column,
    .js-video-upload__video-column,
    .js-video-upload__image-column,
    .js-media-upload__video-column,
    .js-media-upload__image-column {
        width: 50%;
    }
}

.js-image-upload__image,
.image-cropper__image,
.js-video-upload__image,
.js-media-upload__image {
    aspect-ratio: 1/1;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 4px;
}

.js-image-upload__upload-section,
.image-cropper__upload-section,
.js-video-upload__upload-section,
.js-media-upload__upload-section {
    cursor: pointer;
    text-align: center;
    padding: 20px;
    border: 2px dashed var(--clr-neutral-70);
    border-radius: 8px;
}

.js-image-upload__upload-icon,
.image-cropper__upload-icon,
.js-video-upload__upload-icon,
.js-media-upload__upload-icon {
    color: var(--clr-neutral-50);
    margin-bottom: 10px;
}

.js-image-upload__upload-link,
.image-cropper__upload-link,
.js-video-upload__upload-link,
.js-media-upload__upload-link {
    color: var(--clr-info);
    text-decoration: none;
    cursor: pointer;
}

.js-image-upload__cancel-button,
.image-cropper__cancel-button,
.js-video-upload__cancel-button,
.js-media-upload__cancel-button {
    display: block;
    padding: 8px 20px;
    color: var(--clr-secondary);
    background: none;
    border: 1px solid var(--clr-secondary);
    border-radius: 4px;
    cursor: pointer;
}

.js-image-upload__save-button,
.image-cropper__save-button,
.js-video-upload__save-button,
.js-media-upload__save-button {
    display: block;
    padding: 8px 20px;
    color: var(--clr-secondary);
    background: none;
    border: 1px solid var(--clr-secondary);
    border-radius: 4px;
    cursor: pointer;
}

.js-image-upload__container,
.image-cropper__container,
.js-video-upload__container,
.js-media-upload__container {
    max-height: 50vh;
}

.js-image-upload__uploaded,
.image-cropper__uploaded,
.js-video-upload__uploaded,
.js-media-upload__uploaded {
    padding: 0 !important;
    position: relative;
}

    .js-image-upload__uploaded .svg-wrapper,
    .image-cropper__uploaded .svg-wrapper,
    .js-video-upload__uploaded .svg-wrapper,
    .js-media-upload__uploaded .svg-wrapper {
        position: absolute;
        bottom: 0.5rem;
        right: 0.5rem;
        width: 2rem;
        height: 2rem;
        padding: 0.5rem;
        color: var(--clr-secondary);
        background: var(--clr-always-white);
        border: 1px solid var(--clr-secondary);
        border-radius: 50%;
    }

    .js-image-upload__uploaded img,
    .image-cropper__uploaded img,
    .js-video-upload__uploaded img,
    .js-media-upload__uploaded img {
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.video-upload__item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    flex-shrink: 0;
}

.video-upload__thumbnail {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background-color: #f0f0f0;
    overflow: hidden;
}

.video-upload__static-image {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    transition: opacity 0.3s ease;
}

.video-upload__preview-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.video-upload__preview-video {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.video-upload__play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

    .video-upload__play-icon svg {
        fill: white;
    }

.video-upload__title {
    margin-top: 8px;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.video-upload__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

.video-upload__grid-column {
    flex: 1 0 calc(50% - 15px);
}

@media (max-width: 576px) {
    .video-upload__grid-column {
        flex: 1 0 100%;
    }
}

.video-upload__button--uploaded {
    position: relative;
    padding: 0 !important;
}

    .video-upload__button--uploaded video {
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
    }

.video-upload__wrapper {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.video-upload__upload-section {
    padding: 20px;
    border: 2px dashed #ccc;
    border-radius: 8px;
    text-align: center;
    margin-bottom: 20px;
    cursor: pointer;
}

    .video-upload__upload-section:hover {
        border-color: #999;
    }

.video-upload__search {
    display: flex;
    margin-bottom: 15px;
}

    .video-upload__search input {
        flex: 1;
        padding: 8px;
        border: 1px solid #ccc;
        border-radius: 4px 0 0 4px;
    }

    .video-upload__search button {
        padding: 8px 12px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 0 4px 4px 0;
        cursor: pointer;
    }

        .video-upload__search button:hover {
            background-color: #0069d9;
        }

.video-upload__delete-icon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: var(--clr-white);
    color: var(--clr-secondary);
    border: 1px solid var(--clr-secondary);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
}

    .video-upload__delete-icon svg {
        width: 16px;
        height: 16px;
    }

.hovercard {
    background-color: var(--clr-surface);
    border: 1px solid var(--clr-neutral-70);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-width: 310px;
    width: 100%;
    word-wrap: break-word;
}

@media only screen and (min-width: 360px) {
    .hovercard {
        max-width: 360px;
    }
}

.hovercard-header {
    position: relative;
    display: flex;
    flex-direction: column;
}

.hovercard-header-content {
    display: flex;
    gap: 0.5rem;
    padding: 0.25rem 0.5rem 0;
}

.hovercard-link {
    font-size: 12px;
    font-weight: 500;
    color: var(--clr-link);
    text-decoration: none;
    cursor: pointer;
    align-self: start;
}

    .hovercard-link:hover {
        text-decoration: underline;
    }

.hovercard-banner {
    width: 100%;
    aspect-ratio: 3/1;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hovercard-banner-img {
    max-width: 360px;
    aspect-ratio: 3/1;
    -o-object-fit: cover;
    object-fit: cover;
}

.hovercard-profile-photo {
    margin-top: -2rem;
    border: 1px solid var(--clr-neutral-85);
    border-radius: 50%;
    width: 90px;
    height: 90px;
    overflow: hidden;
    background-color: var(--color-white);
}

.hovercard-profile-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    border-radius: 50%;
}

.hovercard-profile-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0.25rem;
}

    .hovercard-profile-content .flex {
        align-items: center;
        gap: 0.5rem;
    }

    .hovercard-profile-content .flex-space-between {
        justify-content: space-between;
        gap: 0.5rem;
    }

.hovercard-profile-name {
    font-weight: 600;
    color: var(--clr-neutral-10);
}

.hovercard-profile-username {
    font-size: 14px;
    color: var(--clr-neutral-20);
}

.hovercard-profile-pronouns {
    font-size: 10px;
    font-weight: 500;
    color: var(--clr-neutral-20);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid var(--clr-neutral-50);
}

.hovercard-profile-group {
    font-size: 12px;
    font-weight: 500;
}

.hovercard-profile-group-number {
    font-size: 10px;
    font-weight: 500;
    color: var(--clr-neutral-20);
    padding: 0.125rem 0.25rem;
    border-radius: 0.25rem;
    border: 1px solid var(--clr-neutral-50);
}

.hovercard-profile-description {
    font-size: 12px;
    color: var(--clr-neutral-30);
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hovercard-body {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0 0.5rem 0.5rem;
    width: 100%;
}

.hovercard-stats {
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
}

.hovercard-stats-item {
    text-align: center;
    font-size: 12px;
}

.hovercard-stats-item-title {
    font-weight: 500;
    text-transform: capitalize;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--clr-neutral-20);
}

.hovercard-stats-item-value {
    font-weight: 600;
    color: var(--clr-neutral-20);
    white-space: nowrap;
}

.hovercard-avatar-title {
    font-size: 12px;
    color: var(--clr-neutral-20);
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--clr-neutral-80);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.hovercard-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.hovercard-warning-bars {
    display: flex;
    gap: 3px;
    height: 0.5rem;
    width: 100%;
}

.hovercard-warning-bar {
    flex: 1;
    height: 100%;
    border-radius: 2px;
    background: var(--clr-neutral-80);
    transition: all 0.3s ease;
}

    .hovercard-warning-bar.active:nth-child(1) {
        background: #ff4136;
    }

    .hovercard-warning-bar.active:nth-child(2) {
        background: #ff5a36;
    }

    .hovercard-warning-bar.active:nth-child(3) {
        background: #a13030;
    }

    .hovercard-warning-bar.active:nth-child(4) {
        background: #8a2626;
    }

    .hovercard-warning-bar.active:nth-child(5) {
        background: #5d1919;
    }

.hovercard-warning-decrease, .hovercard-warning-increase {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--clr-neutral-70);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.hovercard-warning-decrease {
    background-color: var(--clr-neutral-90);
    color: var(--clr-neutral-20);
    padding-bottom: 4px;
}

    .hovercard-warning-decrease:hover {
        background-color: var(--clr-success);
        color: var(--clr-always-white);
    }

.hovercard-warning-increase {
    background-color: var(--clr-neutral-90);
    color: var(--clr-neutral-20);
}

    .hovercard-warning-increase:hover {
        background-color: var(--clr-danger);
        color: var(--clr-always-white);
    }

.hovercard-badges {
    display: flex;
    gap: 0.25rem;
    padding: 0.5rem 0.25rem;
    border-bottom: 1px solid var(--clr-neutral-80);
    border-top: 1px solid var(--clr-neutral-80);
}

@media only screen and (min-width: 360px) {
    .hovercard-badges {
        gap: 0.5rem;
        padding: 0.5rem;
    }
}

.hovercard-badges-item {
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}

    .hovercard-badges-item:hover {
        transform: translateY(-3px);
    }

.hovercard-badges-image {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.hovercard-badges-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: var(--clr-secondary);
    color: var(--clr-always-white);
    font-weight: 500;
    font-size: 12px;
}

.hovercard-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
    padding: 0.25rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--clr-neutral-80);
}

    .hovercard-actions .flex {
        gap: 0.5rem;
    }

    .hovercard-actions .trash-topic {
        height: 2rem;
        width: 2rem;
        padding: 0.5rem;
        border: 1px solid var(--clr-neutral-70);
        border-radius: 50%;
    }

.hovercard-ban {
    flex: 1;
}

.js-arrow {
    position: absolute;
    width: 15px;
    height: 15px;
    transform: rotate(45deg);
    background-color: var(--color-white);
    box-shadow: -3px -3px 5px rgba(0, 0, 0, 0.05);
    z-index: -1;
}

.nav-menu {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
}

.nav-menu__wrapper {
    border-bottom: 1px solid var(--clr-neutral-80);
    background: var(--clr-neutral-80);
    padding: 0.25rem;
}

.nav-menu__item {
    padding: 0.25rem 0.75rem;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: 0.25rem;
}

    .nav-menu__item:hover {
        background-color: var(--clr-neutral-90);
    }

    .nav-menu__item.new {
        position: relative;
        padding-right: 2rem;
    }

        .nav-menu__item.new:after {
            content: "New";
            font-size: 10px;
            font-weight: 600;
            color: var(--clr-secondary);
            position: absolute;
            top: 0;
            right: 0.25rem;
        }

.trending-section {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-family-1, Arial, sans-serif);
    overflow: hidden;
    margin-top: 0.5rem;
}

    .trending-section .trending-label {
        background-color: var(--clr-secondary);
        color: var(--clr-on-secondary);
        font-weight: 600;
        font-size: 13px;
        white-space: nowrap;
        clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
        border-radius: 4px;
        padding: 0 0.75rem;
    }

    .trending-section .trending-items-wrapper {
        display: flex;
        flex: 1;
        overflow-x: auto;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

        .trending-section .trending-items-wrapper::-webkit-scrollbar {
            display: none;
        }

        .trending-section .trending-items-wrapper .trending-items {
            display: flex;
            flex-wrap: nowrap;
            gap: 0.5rem;
            align-items: center;
        }

            .trending-section .trending-items-wrapper .trending-items .trending-item {
                flex: 0 0 auto;
                white-space: nowrap;
                font-size: 13px;
                border-radius: 0.25rem;
                border: 1px solid var(--clr-neutral-70);
                background-color: var(--clr-neutral-90);
                color: var(--clr-on-surface);
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 0 0.75rem;
                font-weight: 600;
            }

@media only screen and (max-width: 575.98px) {
    .trending-nav {
        display: none;
    }
}

@media only screen and (min-width: 768px) {
    .trending-items-wrapper {
        display: block;
    }

    .trending-nav {
        color: var(--clr-secondary);
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 13px;
        cursor: pointer;
        padding: 0 1rem;
        transition: background 0.2s;
        background-color: var(--clr-neutral-70);
    }

        .trending-nav:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
}