/* 550px or less (mobile) */
@media (max-width: 1190px) {
    .page-column-small {
        width: 100%;
    }
}

/* more than 550px (tablet + desktop) */
@media (min-width: 1191px) {
    .page-column-small {
        width: 350px;
    }
}



.header-container.content-bounds.content-bounds-wide {
    position: fixed;
    top: 0;
    z-index: 100;
    margin: 0;
}

.page-content {
    margin-top: 50px;
}

.widget-type-rss .widget-content ul:has(.thumbnail-container.rss-detailed-thumbnail)
.thumbnail-container.rss-detailed-thumbnail svg {
    display: none;
}

.rss-detailed-description.text-truncate-2-lines.margin-top-10 {
    overflow: hidden;
    text-overflow: unset;
    display: inline;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: normal;
}

.cards-horizontal.carousel-items-container:has(.card.widget-content-frame.thumbnail-parent svg)
.card.widget-content-frame.thumbnail-parent svg {
    display: none;
}

.text-truncate-3-lines {
    overflow: visible;
    text-overflow: unset;
    display: inline;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: normal;
}


.forum-post-list-thumbnail {
    height: 7rem;
    width: 10.5rem;
}

.thumbnail {
    opacity: 1 !important;
    filter: none;
}

h1 {
    color: var(--color-primary);
    font-size: 1.5rem;
}

.full-width img {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
}

.flex.thumbnail-parent {
    overflow: hidden;
}

.big-font p {
    font-size: 1.5rem;
    color: var(--color-primary);
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
html,* {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;     /* Firefox */
}


/*css classes*/
.small-media .card {
    width: 150px;
}

/*--------------------*/
/*vertical-list rss css-class */
.vertical-list .list .flex.thumbnail-parent {
    display: block;
}

.vertical-list .list .flex.thumbnail-parent
.thumbnail-container.rss-detailed-thumbnail img {
    width: 100%;
    height: 150px;
}

/*vertical-list video css-class */
.vertical-list .list .flex.thumbnail-parent
.video-horizontal-list-thumbnail.thumbnail {
    width: 100%;
    height: 150px;
}

.vertical-list .list .flex.thumbnail-parent .min-width-0 {
    width: 100%;
    overflow: hidden;
}

.vertical-list .list .flex.thumbnail-parent
.min-width-0 a {
    overflow: hidden;
    text-overflow: unset;
    display: inline;
    -webkit-line-clamp: unset;
    -webkit-box-orient: unset;
    white-space: normal;
}


/*--------------------*/
.long-margin {
    margin-top: 200px;
}

/*--------------------*/
.big-thumbnail {
    height: 400px;
    width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row));
}

.big-thumbnail .cards-horizontal {
    --cards-per-row: 4.5;
}

.big-thumbnail .rss-card-image {
    height: 300px;
}

.big-thumbnail .card {
    width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row));
}


/*--------------------*/
/*load image animation*/
/*--------------------*/
.load-image {
    opacity: 0;
    animation: fadeIn 2s ease forwards;
    animation-delay: 1s;
    min-height: 400px;
    background: var(--color-background);
}

@keyframes fadeIn {
    to {
        opacity: 1;
    }
}


/*progress*/

.progress-wrap {
    /*display: flex;*/
    align-items: center;
    gap: 14px;
    width: 100%;
    font-family: system-ui, sans-serif;
}

.progress-bar {
    position: relative;
    height: 30px;
    width: 100%;
    flex: 1;
    /*background: #0f172a;*/
    background: var(--color-text-subdue);
    border-radius: 999px;
    border-color: transparent;
    overflow: hidden;
}

/* animated fill */
.fill {
    height: 100%;
    width: var(--value);
    transform-origin: left;
    transform: scaleX(0);
    /*background: linear-gradient(90deg, #22c55e, #38bdf8);*/
    background: linear-gradient(90deg, var(--color-text-highlight), var(--color-primary));
    border-radius: inherit;
    /*box-shadow:*/
    /*        0 0 10px rgba(56, 189, 248, 0.7),*/
    /*        0 0 20px rgba(34, 197, 94, 0.6);*/
    box-shadow: 0 0 10px var(--color-negative),
    0 0 20px var(--color-positive);
    animation: grow 1.6s ease-out forwards;
    animation-delay: 1s;
}

/* progress dot */
.dot {
    position: absolute;
    top: 50%;
    left: var(--value);
    transform: translate(-50%, -50%) scale(0);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #020617;
    border: 2px solid #38bdf8;
    box-shadow: 0 0 8px rgba(56, 189, 248, 0.9),
    0 0 14px rgba(34, 197, 94, 0.7);
    animation: pop 0.4s ease-out forwards;
    animation-delay: 1.4s;
}

/* percentage */
.percent {
    min-width: 52px;
    font-weight: 800;
    font-size: 20px;
    /*background: linear-gradient(90deg, #22c55e, #38bdf8);*/
    background: linear-gradient(90deg, var(--color-positive), var(--color-negative));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* animations */
@keyframes grow {
    to {
        transform: scaleX(1);
    }
}

@keyframes pop {
    to {
        transform: translate(-50%, -50%) scale(1);
    }
}