/* Country Flag Emoji https://github.com/twitter/twemoji#license */
@font-face {
font-family: "Country Flags";
unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
src: url("/files/fonts/country_flags.woff2") format("woff2");
font-display: swap;
}
* {
font-family: "Country Flags", var(--font-primary);
box-sizing: border-box;
}
.icon {
display: inline-block;
width: 1.2em;
height: 1.2em;
vertical-align: -4px;
}
body.light-mode {
--color-000: hsl(0, 0%, 0%);
--color-333: hsl(0, 0%, 20%);
--color-555: hsl(0, 0%, 33%);
--color-999: hsl(0, 0%, 60%);
--color-eee: hsl(0, 0%, 93%);
--color-fff: hsl(0, 0%, 100%);
--color-e60000: hsl(0, 100%, 45%);
--color-00b300: hsl(144, 100%, 35%);
--color-2196f3: hsl(208, 87%, 44%);
--success-bg: hsl(145, 85%, 90%);
--success-text: hsl(145, 60%, 20%);
--success-border: hsl(145, 70%, 45%);
--warning-bg: hsl(40, 90%, 85%);
--warning-text: hsl(30, 75%, 25%);
--warning-border: hsl(30, 80%, 50%);
--error-bg: hsl(0, 85%, 90%);
--error-text: hsl(0, 65%, 20%);
--error-border: hsl(0, 70%, 50%);
--calendar-picker-indicator: invert(0);
}
body.dark-mode {
--color-000: hsl(0, 0%, 100%);
--color-333: hsl(0, 0%, 93%);
--color-555: hsl(0, 0%, 100%);
--color-999: hsl(0, 0%, 40%);
--color-eee: hsl(0, 0%, 20%);
--color-fff: hsl(210, 5%, 14%);
--color-e60000: hsl(0, 100%, 45%);
--color-00b300: hsl(144, 100%, 35%);
--color-2196f3: hsl(207, 89%, 53%);
--success-bg: hsl(145, 60%, 20%);
--success-text: hsl(145, 85%, 90%);
--success-border: hsl(145, 70%, 40%);
--warning-bg: hsl(30, 60%, 20%);
--warning-text: hsl(40, 90%, 85%);
--warning-border: hsl(40, 80%, 50%);
--error-bg: hsl(0, 60%, 20%);
--error-text: hsl(0, 85%, 90%);
--error-border: hsl(0, 70%, 50%);
--calendar-picker-indicator: invert(1);
}
[dir="ltr"] {
--direction: ltr;
--start-direction: left;
--end-direction: right;
--text-align: left;
--category-menu-open: -300px;
--slider-transform: 26px;
--arrow-direction: rotate(180deg);
--arrow-direction-icon: rotate(0deg);
--arrow-rotated-category: rotate(270deg);
--sa1-padding: 10px;
}
[dir="rtl"] {
--direction: rtl;
--start-direction: right;
--end-direction: left;
--text-align: right;
--category-menu-open: 100%;
--slider-transform: -26px;
--arrow-direction: none;
--arrow-direction-icon: rotate(180deg);
--arrow-rotated-category: rotateZ(-90deg);
--sa1-padding: 0;
}
* {
scroll-margin-top: 100px;
overscroll-behavior: contain;
scroll-behavior: smooth;
}
:is(button, a):focus-visible {
outline: 3px solid var(--color-000);
border-radius: 3px;
}
body {
color: var(--color-000);
background: var(--color-fff);
margin: 0;
direction: var(--direction);
}
iframe {
width: 100%;
aspect-ratio: 16 / 9;
border: none;
}
a,
button,
input,
select,
textarea {
text-decoration: none;
background: none;
padding: 0;
outline: 0;
border: none;
}
input:autofill {
border: 1px solid var(--color-555);
box-shadow: 0 0 0px 1000px white inset;
}
textarea {
field-sizing: content;
}
a,button, input[type=checkbox] {
cursor: pointer;
user-select: none;
}
label {
user-select: none;
}
[data-placeholder]:empty:before {
content: attr(data-placeholder);
color: var(--color-555);
cursor: text;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
b {
margin: 0;
line-height: 1.5;
overflow-wrap: break-word;
hyphens: auto;
}
img:not(#bmc-wbtn img, .LogoNavigation) {
background: var(--color-eee);
color: transparent;
}
.maintenance {
background: var(--color-eee);
color: var(--color-333);
max-width: 1100px;
margin: 10px auto;
padding: 10px;
border-radius: 5px;
}
.display_none {
display: none !important;
}
.display_block {
display: block !important;
}
.center {
display: flex;
justify-content: center;
align-items: center;
}
[data-style-mt] { margin-top: attr(data-style-mt px, 0); }
[data-style-mb] { margin-bottom: attr(data-style-mb px, 0); }
[data-style-ms] { margin-inline-start: attr(data-style-ms px, 0); }
[data-style-me] { margin-inline-end: attr(data-style-me px, 0); }

.title_account {
text-align: center;
margin: 25px auto 0 auto;
}
.container_account {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 2fr));
gap: 20px;
max-width: 1132px;
margin: 0 auto;
padding: 32px 16px;
}
.container_account.single-row {
grid-template-columns: 1fr;
}
.section_account {
background: var(--color-fff);
color: var(--color-333);
border-radius: 12px;
border: solid 1px var(--color-eee);
padding: 24px;
transition: all 0.3s ease;
}
.section_account h2 {
font-size: 1.25rem;
color: var(--color-333);
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 5px;
}
.section_account h2 .icon {
color: var(--color-555);
font-size: 1.25rem;
}
.info_item_account {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--color-eee);
}
.card_account {
background: var(--color-eee);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
transition: all 0.3s ease;
}
.card_account a {
text-decoration: none;
color: var(--color-333);
font-weight: 600;
font-size: 1rem;
display: block;
margin-bottom: 8px;
}
.card_account p {
color: var(--color-555);
font-size: 0.875rem;
display: flex;
align-items: center;
gap: 8px;
}
.card_account p .icon {
color: var(--color-555);
font-size: 0.75rem;
}

.action_links_wrapper {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}
.action_links_wrapper {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.action_link_account {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    margin-top: 0;
    padding: 8px 16px;
    border-radius: 6px;
    background: var(--color-eee);
    color: var(--color-333);
    transition: all 0.3s ease;
}

.action_link_account:hover {
    background: var(--color-333);
    color: var(--color-eee);
}

.action_link_account .icon {
    transform: var(--arrow-direction-icon);
}
@media (max-width: 768px) {
    .action_links_wrapper {
        flex-direction: column;
    }
    
    .action_link_account {
        width: 100%;
        justify-content: center;
    }
}
.profile-link-minimal {
color: var(--color-2196f3);
text-decoration: underline;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 0;
background: none;
border: none;
font-size: 1em;
transition: color 0.2s;
}
.profile-link-minimal .icon {
font-size: 1em;
margin-inline-end: 2px;
}
.profile-link-minimal:hover {
color: var(--color-000);
text-decoration: underline;
}
.badge_account {
background: var(--color-555);
color: var(--color-fff);
padding: 2px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
inset-inline-end: auto;
}
.card_content_account {
border-bottom: 1px solid var(--color-999);
margin-bottom: 5px;
padding-bottom: 5px;
}
@media (max-width: 768px) {
.container_account {
grid-template-columns: 1fr;
padding: 16px;
}
.section_account {
padding: 20px;
}
}
.settings-container {
max-width: 800px;
margin: 0 auto;
padding: 2rem;
color: var(--color-333);
}
.settings-header {
margin-bottom: 2rem;
}
.settings-header h1 {
text-align: center;
font-size: 1.6rem;
}
/* Avatar Section */
.avatar-container {
display: flex;
justify-content: center;
margin-bottom: 2rem;
}
/* Social Links */
.input-with-icon {
position: relative;
}
.input-with-icon .icon {
position: absolute;
inset-inline-start: 0.8rem;
top: 66%;
transform: translateY(-50%);
}
.input-with-icon input {
padding-inline-start: 2.5rem !important;
}
/* Security Section */
.security-item {
padding: 1rem;
background: var(--color-eee);
border-radius: 6px;
margin-bottom: 1rem;
}
.passkey-status {
display: flex;
align-items: center;
gap: 0.5rem;
}
.passkey-status button {
margin-inline-start: auto;
}
.passkey-status .icon {
font-size: 1.6rem;
}
button[disabled] {
cursor: not-allowed;
pointer-events: none;
}
button.loading {
position: relative;
}
button.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 1em;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: spinner 0.6s linear infinite;
transform: translate(-50%, -50%);
}
@keyframes spinner {
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.npuni-btn-group {
display: flex;
flex-direction: row;
gap: 10px;
justify-content: flex-end;
}
.npuni-btn {
display: inline-block;
padding: 7px 12px;
border-radius: 7px;
background: var(--color-fff);
color: var(--color-000);
text-align: center;
transition: .2s;
position: relative;
&:not(.filled):hover:not(:disabled):not(.disabled) {
background: var(--color-eee);
color: var(--color-000);
}
&.filled {
background: var(--color-000);
color: var(--color-fff);
&:hover:not(:disabled):not(.disabled) {
opacity: 0.8;
}
&.loading {
color: transparent !important;
pointer-events: none;
&::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
border: 2px solid var(--color-fff);
border-top-color: currentColor;
border-radius: 50%;
transform: translate(-50%, -50%);
animation: spinner .7s linear infinite;
}
&[disabled], &.disabled {
background: var(--color-000) !important;
color: transparent !important;
pointer-events: none;
}
}
}
&[disabled], &.disabled {
background: var(--color-eee) !important;
color: var(--color-999) !important;
cursor: not-allowed;
pointer-events: none;
}
}
.connections-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1rem;
margin-top: 1rem;
}
.connection-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
background: var(--color-eee);
border-radius: 6px;
}
.connection-item.connected .button-outline {
color: var(--color-e60000);
}
.connection-item .button-outline {
color: var(--color-00b300);
}
.connection-item .button-outline {
margin-inline-start: auto;
}
.connections-grid .connection-item a {
color: var(--color-333);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
display: flex;
align-items: center;
gap: 12px;
}

.connections-grid .connection-item a:hover {
color: var(--color-2196f3);
}

.connections-grid .connection-item-2 {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

.connection-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
object-fit: cover;
background: var(--color-eee);
flex-shrink: 0;
}
.category-color-circle {
width: 40px;
height: 40px;
border-radius: 50%;
}
.no-followed-message {
color: var(--color-999);
font-style: italic;
padding: 1rem;
text-align: center;
background: var(--color-eee);
border-radius: 6px;
margin: 1rem 0;
}
/* Preferences Section */
.appearance-options {
margin-bottom: 1.5rem;
}
.theme-selector {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}
.theme-selector label {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 6px;
cursor: pointer;
border: 1px solid var(--color-eee);
}
.theme-selector input[type="radio"] {
display: none;
}
.theme-selector input[type="radio"]:checked + label {
background: var(--color-2196f3);
color: var(--color-fff);
}
/* Action Buttons */
.settings-actions {
margin-bottom: 2rem;
}
.settings-actions.center {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
@media (max-width: 768px) {
.settings-actions.center {
flex-direction: column;
width: 100%;
}
.settings-actions.center button {
width: 100%;
margin-bottom: 10px;
}
.settings-actions.center button:last-child {
margin-bottom: 0;
}
}
.danger-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.follow-btn {
vertical-align: 4px;
margin-inline-start: 10px;
padding: 5px 10px;
border-radius: 5px;
border: 1px solid var(--color-2196f3);
color: var(--color-2196f3);
font-weight: bold;
transition: all 0.3s ease;
}
.follow-btn:hover {
background: var(--color-2196f3);
color: #fff;
}
.follow-btn[data-action="unfollow"] {
background: var(--color-2196f3);
color: #fff;
}
.LA18:hover,
.TopNavigationBtn:hover,
.headline_buttons .button:hover,
.NavigationTB,
.TopNavigationBtn {
color: var(--color-333);
}
.LA13,
.LA20,
.LA7 {
font-weight: 700;
}
.AsideImg,
.LA10 {
object-fit: cover;
}
.SCButtonNavigation {
position: relative;
}
.DropDownNavigation {
display: none;
position: absolute;
top: 100%;
inset-inline-end: 0;
width: max-content;
max-width: 100vw;
background: var(--color-fff);
overflow: auto;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
z-index: 1;
text-align: var(--text-align);
border-radius: 10px;
}
.DropDownNavigation a,
.DropDownNavigation button {
display: block;
color: var(--color-555);
padding: 10px 15px;
font-size: 16px;
width: 100%;
text-align: var(--text-align);
transition: 0.3s;
}
.DropDownNavigation a {
border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.DropDownNavigation a:hover,
.DropDownNavigation button:hover {
color: var(--color-333);
background: var(--color-eee);
}
.DropDownNavigation .icon {
color: var(--color-555);
font-size: 16px;
}
.CategoryMenu,
.OverlayMenu {
position: fixed;
height: 100%;
}
.AvatarNavigation {
width: 23px;
height: auto;
border-radius: 50%;
vertical-align: -0.5em;
}
.DateTimeNavigation {
text-align: center;
max-width: 1000px;
margin: 0 auto;
padding: 3px 0;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
}
.NavigationTB,
.TopNavigation {
max-width: 1100px;
display: flex;
text-align: center;
}
.NavigationTB {
margin: 0 auto;
padding: 7px 0;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--color-000);
}
.MSSIForm {
margin-top: 80px;
}
.LA9,
.MSSForm,
.MSSInput {
border-bottom: 1px solid var(--color-eee);
}
.TopNavigation {
margin: 0 auto;
align-items: center;
justify-content: space-between;
}
.ButtonsContainer,
.LA17 {
display: flex;
column-gap: 10px;
}
.TopNavigation .ButtonNavigation {
display: inline-block;
color: var(--color-000);
font-size: 20px;
}
.LogoNavigation {
width: auto;
height: 45px;
background: transparent;
}
.MainNavigation {
display: flex;
justify-content: flex-start;
align-items: center;
max-width: 1100px;
margin: 0 auto;
overflow-x: scroll;
white-space: nowrap;
scroll-behavior: smooth;
gap: 15px;
}
.MainNavigation::-webkit-scrollbar {
height: 5px;
background: var(--color-fff);
border-radius: 25px;
}
.MainNavigation::-webkit-scrollbar-thumb {
background: var(--color-999);
border-radius: 25px;
cursor: pointer;
}
.MainNavigation::-webkit-scrollbar-thumb:hover {
background: var(--color-999);
}
.LinkNavigation {
margin: 3px 0;
font-size: 18px;
color: var(--color-000);
}
.ArticleTopicsLink:hover,
.AsideTitleNews:hover,
.LA13:hover,
.LA6:hover,
.LinkNavigation:hover,
.bread_crumbs_link:hover,
.byline_link:hover {
text-decoration: underline;
}
.header {
position: sticky;
top: 0px;
width: 100%;
height: auto;
z-index: 100;
background: var(--color-fff);
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
padding: 5px 10px 10px 10px;
}
.header2 {
width: 100%;
height: auto;
background: var(--color-fff);
padding: 0 10px;
}
.OverlayMenu {
opacity: 0;
transition: opacity 0.2s ease-in-out;
z-index: 102;
inset-inline-end: 0;
top: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
pointer-events: none;
}
.Arrow,
.CategoryMenu {
transition: transform 0.3s ease-in-out;
}
.OverlayMenu.open {
opacity: 1;
pointer-events: all;
}
.CategoryMenu {
z-index: 103;
inset-inline-start: 0;
top: 0;
width: 280px;
max-width: 100%;
background: var(--color-fff);
color: var(--color-000);
overflow: auto;
transform: translateX(var(--category-menu-open));
}
.LA2,
.LA9.LA15 .LA11 {
width: 100%;
}
.CategoryMenu.open {
transform: translateX(0);
}
.CloseMenu {
margin: 20px 20px 0;
font-size: 35px;
color: var(--color-000);
}
.ThemeToggleMenu {
position: absolute;
top: 20px;
inset-inline-end: 20px;
}
.ThemeToggleMenu button {
font-size: 32px;
color: var(--color-333);
transition: transform 0.3s ease;
}
.ThemeToggleMenu button:hover {
transform: rotate(30deg);
}
.ThemeToggleMenu .icon {
transition: transform 0.5s ease, opacity 0.3s ease;
}
.ThemeToggleMenu button:active .icon {
transform: scale(0.8) rotate(180deg);
opacity: 0.5;
}
.CategoryItem {
display: flex;
justify-content: space-between;
align-items: center;
padding: 5px 20px;
}
.CategoryList {
font-size: 18px;
}
.CategoryList a,
.SubCategoryList a,
.SubSubCategoryList a {
color: inherit;
transition: background 0.3s ease-in-out;
}
.SubCategoryList a {
margin-inline-start: 10px;
}
.MainCategory:hover,
.SubSubCategory:hover {
transition: 0.3s;
background: var(--color-eee);
}
.MainCategory ul,
.SubCategory ul {
max-height: 0;
overflow: hidden;
padding-inline-start: 0;
}
.MainCategory ul.open,
.SubCategory ul.open {
max-height: 100%;
}
.CategoryList,
.SubCategoryList,
.SubSubCategoryList {
list-style: none;
padding: 0;
}
.Arrow {
color: var(--color-000);
display: inline-block;
padding: 5px;
transform: var(--arrow-direction);
}
.ArticleTopics,
.LA1,
.LA12,
.LA9 {
display: flex;
}
.Arrow.rotated {
transform: var(--arrow-rotated-category);
}
.SocialButtonsContainer {
text-align: center;
margin: 10px 10px 40px;
border-top: 1px solid var(--color-000);
}
.SocialButtonsh3 {
margin: 15px 0;
font-size: 1.3em;
font-weight: 700;
}
.SocialButtons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
}
.SocialButtonsa {
font-size: 20px;
color: var(--color-555);
cursor: pointer;
transition: 0.3s;
}
.SocialButtonsa:hover {
color: var(--color-2196f3);
}
.ArticleTopics {
margin: 15px 0 50px;
flex-wrap: wrap;
gap: 10px;
}
.ArticleTopicsLink {
font-size: 16px;
background: var(--color-eee);
color: var(--color-000);
padding: 5px 10px;
}
.like_article_title {
text-align: center;
font-size: 1.4rem;
font-weight: 600;
color: var(--color-333);
margin: 2rem 0;
position: relative;
}
.like_article_title::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: var(--color-2196f3);
margin: 10px auto 0;
border-radius: 2px;
}
.like_article_wrapper {
display: flex;
justify-content: center;
gap: 1.5rem;
margin: 1rem 0 3rem;
padding: 1.5rem;
}
.like_article {
display: flex;
align-items: center;
justify-content: center;
padding: 7px 10px;
border: 2px solid var(--color-eee);
background: var(--color-fff);
color: var(--color-555);
border-radius: 10px;
transition: all 0.2s ease;
}
.like_article .icon {
font-size: 20px;
color: var(--color-555);
transition: all 0.2s ease;
}
.like_article span {
font-size: 16px;
color: var(--color-555);
padding-inline-start: 5px;
}
.like_article:hover:first-child {
border-color: var(--color-00b300);
}
.like_article:hover:last-child {
border-color: var(--color-e60000);
}
.like_article:hover .icon {
transform: scale(1.1);
}
.like_article:hover:first-child .icon {
color: var(--color-00b300);
}
.like_article:hover:last-child .icon {
color: var(--color-e60000);
}
.like_article_active:first-child {
border-color: var(--color-00b300);
}
.like_article_active:first-child .icon {
color: var(--color-00b300);
}
.like_article_active:last-child {
border-color: var(--color-e60000);
}
.like_article_active:last-child .icon {
color: var(--color-e60000);
}
.im1 {
max-width: 1130px;
margin: 0 auto 30px auto;
padding: 0 15px;
}
.im2 {
margin: 15px 0 20px 0;
padding-bottom: 3px;
border-bottom: 2px solid var(--color-000);
display: flex;
align-items: center;
color: var(--color-555);
}
.im3 {
margin-inline-start: 5px;
transform: var(--arrow-direction);
}
.im4 {
margin-inline-end: auto;
font-size: 1.5em;
font-weight: bold;
line-height: 1.2;
}
.im5 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 10px;
}
.im6 {
grid-column: 1 / span 2;
color: var(--color-555);
}
.im7 {
width: 100%;
height: auto;
}
.im8 {
font-size: 30px;
line-height: 1.3;
}
.im9 {
font-size: 18px;
line-height: 1.3;
}
.im10 {
color: var(--color-555);
font-size: 18px;
font-weight: 600;
line-height: 1.3;
grid-column: span 1;
margin-bottom: 10px;
}
.im11 {
width: 100%;
height: auto;
}
.im12 {
color: var(--color-555);
font-weight: 700;
}
.im13 {
margin-top: 10px;
width: 100%;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 10px;
}
.im14 {
width: 100%;
vertical-align: top;
line-height: initial;
}
.im15 {
width: 100%;
height: auto;
}
.LA1 {
flex-wrap: wrap;
justify-content: center;
}
.LA2 {
max-width: 700px;
padding: 15px 10px;
}
.LAS2 {
max-width: 1120px;
padding: 15px 10px;
}
.flex-grid-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-grid-2 > * {
  flex: 1 1 calc(50% - 10px);
  box-sizing: border-box;
}
.column-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex: 1 1 calc(50% - 10px);
}

@media (max-width: 768px) {
  .flex-grid-2 > * {
    flex: 1 1 100%;
  }
}

.LA9.LA15 {
flex-direction: column;
}
.LA9.LA15 .LA10 {
width: 100%;
height: auto;
}
.LA9.LA15 .LA11 {
margin: 10px 0 0 0;
}
.LA9 {
padding: 10px 0;
}
.LA7 {
border-bottom: 1px solid var(--color-eee);
color: var(--color-555);
font-size: 30px;
padding-top: 10px;
padding-bottom: 5px;
}
.LA13,
.LA14 {
color: var(--color-333);
}
.LA13 {
font-size: 18px;
}
.LA12 {
align-items: center;
font-size: 12px;
color: var(--color-555);
}
.LA23 {
flex-grow: 1;
}
.LA12 .SavingArticleButton {
font-size: 16px;
color: var(--color-555);
}
.LA10 {
width: 270px;
height: 152px;
}
.AsideContent,
.LA11 {
margin: 0 10px 0 8px;
width: 70%;
}
.LA3,
.LA4 {
margin: 0;
padding: 0;
}
.LA4 {
list-style-type: none;
}
.LA5 {
display: inline-block;
}
.LA5:not(:last-child)::after {
content: ">";
margin: 0 0.5rem;
color: var(--color-333);
}
.LA6 {
text-decoration: none;
color: var(--color-333);
}
.LA18 {
color: var(--color-555);
font-size: 16px;
}
.LA16 {
display: flex;
align-items: flex-start;
width: 100%;
padding: 10px 0 15px;
}
.LA19 {
display: inline-block;
}
.LA19 {
width: 80px;
height: auto;
border-radius: 50%;
margin-inline-end: 10px;
}
.MSSButton,
.MSSSelect {
padding: 5px;
border-radius: 25px;
}
.LA20 {
color: var(--color-555);
font-size: 25px;
}
.LA21 {
margin-bottom: 5px;
}
.LA22,
.byline_link {
color: var(--color-555);
}
.infinite-scroll-spinner {
text-align: center;
padding: 20px;
color: var(--color-555);
}

.infinite-scroll-spinner p {
margin-top: 10px;
}
.category-header {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.follow-category-btn {
background: none;
}
.follow-category-btn svg {
width: 36px;
height: 36px;
color: var(--color-555);
}

.followers-grid,
.following-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}

.user-card {
background: var(--color-fff);
border: 1px solid var(--color-eee);
border-radius: 12px;
padding: 20px;
display: flex;
flex-direction: column;
transition: all 0.3s ease;
position: relative;
}

.user-card:hover {
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
transform: translateY(-2px);
}

.user-card-link {
display: flex;
align-items: flex-start;
gap: 15px;
text-decoration: none;
color: inherit;
margin-bottom: 15px;
}

.user-card-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}

.user-card-info {
flex: 1;
min-width: 0;
}

.user-card-name {
font-size: 16px;
font-weight: 700;
color: var(--color-333);
margin: 0 0 2px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

.user-card-username {
font-size: 14px;
color: var(--color-555);
margin: 0 0 8px 0;
}

.user-card-bio {
font-size: 14px;
color: var(--color-555);
line-height: 1.4;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}

.user-card-action {
align-self: center;
margin-top: auto;
}

.user-card .follow-btn {
width: 100%;
text-align: center;
padding: 8px 16px;
font-size: 14px;
margin: 0;
}

@media (max-width: 768px) {
.followers-grid,
.following-grid {
grid-template-columns: 1fr;
gap: 15px;
}

.user-card {
padding: 15px;
}

.user-card-avatar {
width: 50px;
height: 50px;
}
}
.LineWithText {
display: flex;
align-items: center;
text-align: center;
margin-bottom: 18px;
column-gap: 10px;
font-size: 15px;
}
.Line {
flex-grow: 1;
height: 1px;
background: var(--color-999);
}
.social_login_button {
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 100%;
margin: 10px 0;
padding: 8px;
border: 1px solid var(--color-000);
border-radius: 6px;
background: var(--color-fff);
color: var(--color-000);
font-size: 16px;
transition: 0.3s;
}
.social_login_button:hover {
background: var(--color-eee);
}
.social_login_button .img {
position: absolute;
top: 50%;
inset-inline-start: 15px;
transform: translateY(-50%);
background: transparent;
height: 20px;
width: 20px;
object-fit: cover;
}
.MSSForm {
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 5px;
}
.MSSContainer {
display: flex;
align-items: center;
width: 100%;
}
.MSSInput {
color: var(--color-000);
flex-grow: 1;
padding: 5px;
font-size: 20px;
transition: 0.3s;
}
.MSSInput:focus,
.MSSInput:hover {
border-bottom: 1px solid var(--color-333);
}
.MSSButton {
height: 35px;
width: 35px;
font-size: 15px;
background: var(--color-000);
color: var(--color-fff);
margin-inline-end: 5px;
}
.MSSCSelect,
.MSSNF {
display: flex;
margin: 15px 0;
}
.MSSCSelect {
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 10px;
width: 100%;
}
.MSSSelect {
background: var(--color-eee);
color: var(--color-000);
flex-basis: auto;
min-width: 200px;
cursor: pointer;
font-size: 16px;
border: 1px solid var(--color-eee);
transition: 0.3s;
}
.MSSSelect:focus,
.MSSSelect:hover {
border: 1px solid var(--color-333);
}
.MSSNF {
justify-content: center;
font-size: 20px;
}
.Article,
.ArticleAside {
display: inline-block;
vertical-align: top;
}
.ArticleMain {
max-width: 1100px;
margin: 0 auto;
position: relative;
}
.help_window.is-active,
.help_window_overlay {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.Article {
width: 64%;
margin: 0 auto 10px;
padding: 0 10px;
color: var(--color-555);
transition: 0.3s;
}
.ArticleAside {
padding: 50px 0 0;
width: 35%;
}
.AsideNews {
display: flex;
padding: 10px 0;
}
.AsideNews:not(:last-child) {
border-bottom: 1px solid var(--color-eee);
}
.AsideTitle {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-555);
font-size: 23px;
font-weight: 700;
padding-bottom: 5px;
border-bottom: 1px solid var(--color-555);
}
.fz1 {
font-size: 1.2em;
}
.green {
color: var(--color-00b300);
}
.red {
color: var(--color-e60000);
}
.AsideTitleH2 {
color: var(--color-555);
font-size: 23px;
font-weight: 700;
}
.AsideTitleNews {
margin: 0 8px 0 0;
color: var(--color-333);
font-size: 1em;
font-weight: 700;
}
.AsideCardDate {
display: flex;
font-size: 12px;
color: var(--color-555);
margin: 0 8px 0 0;
}
.AsideImg {
width: 120px;
height: 90px;
}
.help_window {
display: none;
}
.help_window_overlay {
width: 100%;
z-index: 101;
opacity: 0;
transition: opacity 0.2s;
will-change: opacity;
background: var(--color-000);
}
.help_window_header {
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid var(--color-eee);
font-size: 16px;
}
.help_window_close {
font-size: 25px;
color: var(--color-000);
}
.help_window_wrapper {
width: 100%;
z-index: 102;
overflow: auto;
opacity: 0;
max-width: 540px;
max-height: 95vh;
transition: transform 0.2s, opacity 0.2s;
will-change: transform;
background: var(--color-fff);
display: flex;
flex-direction: column;
transform: translateY(5%);
box-shadow: 0 2px 6px var(--color-999);
border-radius: 5px;
margin: 20px;
}
.help_window_content {
position: relative;
overflow-x: hidden;
overflow-y: auto;
height: 100%;
flex-grow: 1;
padding: 0.5rem 1.5rem 1rem;
}
.help_window_content h3 {
font-size: 18px;
margin: 0;
}
.help_window_content p {
margin: 0.5rem 0;
}
.help_window.is-active {
display: flex;
justify-content: center;
align-items: center;
z-index: 102;
}
.FontSize,
.FontSizeSliderIcon {
display: flex;
align-items: center;
}
.help_window.is-visible .help_window_wrapper {
opacity: 1;
transform: translateY(0);
}
.help_window.is-visible .help_window_overlay {
opacity: 0.5;
}
.FontSize {
width: 100%;
margin: 15px 0 30px;
}
.FontSizeSlider {
appearance: none;
width: 100%;
height: 7px;
margin: 0 10px;
border-radius: 5px;
background: var(--color-999);
opacity: 0.7;
transition: opacity 0.2s;
}
.FontSizeSlider::-webkit-slider-thumb {
appearance: none;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--color-2196f3);
cursor: pointer;
}
.NinetyPercentContainer {
width: 90%;
margin: 15px auto;
}
/* flash carousel */
.flash_wrapper {
direction: ltr;
max-width: 1100px;
width: 100%;
position: relative;
background: var(--color-eee);
padding: 15px;
overflow: hidden;
}
.flash_icon {
top: 50%;
height: 30px;
width: 30px;
cursor: pointer;
font-size: 1.20rem;
position: absolute;
text-align: center;
line-height: 30px;
background: var(--color-fff);
color: var(--color-333);
border-radius: 50%;
box-shadow: 0 3px 6px rgba(0,0,0,0.23);
transform: translateY(-50%);
transition: transform 0.1s linear;
z-index: 5;
}
.flash_icon:active {
transform: translateY(-50%) scale(0.85);
}
.flash_icon:first-child {
inset-inline-start: 5px;
}
.flash_icon:last-child {
inset-inline-end: 5px;
}
.flash_carousel {
display: flex;
overflow-x: auto;
scroll-behavior: smooth;
scrollbar-width: none;
gap: 16px;
padding: 5px 0;
}
.flash_carousel::-webkit-scrollbar {
display: none;
}
.flash_carousel.flash_no_transition {
scroll-behavior: auto;
}
.flash_carousel.flash_dragging {
scroll-behavior: auto;
cursor: grab;
}
.flash_carousel.flash_dragging .flash_card {
user-select: none;
pointer-events: none;
}
.flash_card {
flex: 0 0 calc((100% / 3) - 12px);
cursor: pointer;
font-weight: 600;
background: var(--color-fff);
padding: 10px 20px 15px 20px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
transition: transform 0.2s;
}
.flash_card:hover {
transform: translateY(-2px);
}
.flash_time {
display: block;
padding: 5px 0;
font-size: 14px;
font-weight: 500;
color: var(--color-555);
}
@media screen and (max-width: 900px) {
.flash_card {
flex: 0 0 calc((100% / 2) - 10px);
}
}
@media screen and (max-width: 600px) {
.flash_card {
flex: 0 0 100%;
}
}
/* Breaking expansion */
.breaking_wrapper {
user-select: none;
background: var(--color-eee);
margin: 10px 0 50px 0;
padding: 10px;
display: flex;
flex-direction: column;
gap: 10px;
}
.breaking_layer {
cursor: pointer;
font-weight: 600;
background: var(--color-fff);
padding: 13px 20px;
border-radius: 5px;
display: flex;
flex-direction: column;
}
.breaking_time {
padding: 4px 0;
font-size: 14px;
font-weight: 500;
color: var(--color-555);
}
.breaking_wrapper_icon {
display: flex;
justify-content: flex-end;
}
.breaking_icon {
color: var(--color-000);
border-radius: 25px;
}
.breaking_content {
font-weight: 400;
max-height: 0;
overflow: hidden;
}
.breaking_title {
margin: 0 0 15px 0;
max-height: 200px;
}
.breaking_layer.breaking_active .breaking_content {
max-height: none;
transition: max-height 0.5s ease-in-out;
}
.breaking_layer.breaking_active .breaking_icon .icon {
transform: rotate(180deg);
transition: transform 0.3s ease;
}
.breaking_icon .icon {
transition: transform 0.3s ease;
}
/* Buttons */
.button_container {
display: flex;
justify-content: space-between;
gap: 10px;
}
.button_white::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
border-radius: 50%;
border: 3px solid var(--color-333);
border-top-color: transparent;
transform: translate(-50%, -50%);
opacity: 0;
transition: 0.3s;
}
.button_white {
display: inline-block;
border: 1px solid var(--color-000);
background: var(--color-fff);
color: var(--color-000);
position: relative;
width: 100%;
text-align: center;
font-size: 16px;
margin: 5px 0;
padding: 6px;
border-radius: 6px;
transition: 0.3s;
}
.button_white:hover {
background: var(--color-eee);
}
.button_white[disabled] {
cursor: not-allowed;
}
.button_black {
display: inline-block;
border: 1px solid var(--color-000);
background: var(--color-000);
color: var(--color-fff);
position: relative;
width: 100%;
text-align: center;
font-size: 16px;
margin: 10px 0;
padding: 8px;
border-radius: 6px;
transition: 0.3s;
}
.button_black:hover {
opacity: 0.8;
}
.button_black[disabled] {
cursor: not-allowed;
}
.button_black::before, .button-primary::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
border-radius: 50%;
border: 3px solid var(--color-fff);
border-top-color: transparent;
transform: translate(-50%, -50%);
opacity: 0;
transition: 0.3s;
}
.button_load {
color: transparent;
}
.button_load::before {
animation: button_load 0.6s linear infinite;
opacity: 1;
}
@keyframes button_load {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.bread_crumbs_container {
padding: 23px 0 7px;
font-size: 18px;
}
.bread_crumbs_link {
color: var(--color-555);
font-size: 18px;
}
.article_sponsored {
font-size: 16px;
font-weight: 600;
background: var(--color-eee);
color: var(--color-00b300);
border-radius: 5px;
margin-inline-start: 10px;
padding: 2px 5px;
}
.article_title {
font-size: 35px;
font-weight: 700;
line-height: 140%;
color: var(--color-000);
margin: 0 0 10px;
}
.article_subtitle {
font-size: 20px;
font-weight: 500;
line-height: 120%;
color: var(--color-000);
margin-bottom: 10px;
}
.headline_footer {
display: flex;
align-items: center;
margin-bottom: 15px;
padding: 5px 0;
font-size: 14px;
color: var(--color-555);
}
.byline_image {
width: 30px;
height: 30px;
margin-inline-end: 5px;
border-radius: 100%;
}
.headline_buttons {
margin-inline-start: auto;
}
.headline_buttons .button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--color-555);
font-size: 18px;
margin: 5px;
padding: 0;
transition: 0.3s;
}
.sa1 {
position: fixed;
bottom: 20px;
inset-inline-start: 20px;
z-index: 999;
}
.sa2 {
visibility: hidden;
min-width: 140px;
max-width: 100%;
background: var(--color-333);
color: var(--color-fff);
padding: 10px;
margin-top: 10px;
font-size: 16px;
opacity: 0;
border-radius: 10px;
}
.sa3 {
animation: 3.5s forwards sa3;
visibility: visible;
}
@keyframes sa3 {
0% {
opacity: 0;
transform: translateY(100px);
}
20%,
80% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
transform: translateY(100px);
}
}
.sl1 {
display: none;
position: fixed;
z-index: 101;
width: 100%;
height: 100%;
inset-inline-end: 0;
top: 0;
overflow: auto;
background: var(--color-fff);
transition: opacity 0.5s;
}
.sl2 {
position: relative;
margin: 20px auto auto;
padding: 0 10px;
max-width: 800px;
animation-name: sla;
animation-duration: 0.4s;
}
@keyframes sla {
from {
top: -300px;
opacity: 0;
}
to {
top: 0;
opacity: 1;
}
}
.sl3 {
display: block;
margin-top: 20px;
margin-inline-end: auto;
background: none;
color: var(--color-000);
font-size: 30px;
transition: 0.3s;
}
.sl4 {
margin-bottom: 35px;
}
.popular-searches-section {
margin: 20px 0;
}
.popular-searches-heading {
font-size: 16px;
color: var(--color-333);
margin-bottom: 10px;
font-weight: 500;
}
.popular-searches-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 8px 0;
}
.popular-search-tag {
display: inline-flex;
align-items: center;
padding: 6px 12px;
background-color: var(--color-eee);
color: var(--color-333);
border-radius: 16px;
font-size: 14px;
text-decoration: none;
transition: all 0.3s ease;
}
.popular-search-tag:hover, 
.popular-search-tag:focus {
background-color: var(--color-2196f3);
color: var(--color-fff);
}
.error_page {
display: flex;
align-items: center;
justify-content: center;
}
.error_page .error_page_content {
max-width: 600px;
text-align: center;
}
.error_page_content h2.error_page_header {
font-size: 1000%;
line-height: 1em;
position: relative;
margin: 0;
}
.error_page_content h2.error_page_header:after {
position: absolute;
content: attr(data-text);
top: 0;
left: 0;
right: 0;
background: var(--color-2196f3);
background-clip: text;
color: transparent;
}
.error_page_title {
margin: 0 0 20px;
text-transform: uppercase;
color: var(--color-000);
font-size: 2em;
max-width: 600px;
position: relative;
}
.error_page_subtitle {
font-size: 1em;
color: var(--color-000);
margin: 0;
}
.error_page_buttons {
margin: 25px 0;
display: inline-flex;
}
.error_page_buttons a {
display: inline-block;
margin: 0 10px;
text-decoration: none;
border: 2px solid var(--color-2196f3);
color: var(--color-2196f3);
font-weight: 400;
font-size: 18px;
padding: 3px 10px;
border-radius: 50px;
transition: color 0.3s, background 0.3s, outline-color 0.3s;
}
.error_page_buttons .active {
background: var(--color-2196f3);
color: var(--color-fff);
}
.error_page_buttons a:focus,
.error_page_buttons a:hover {
background: var(--color-2196f3);
color: var(--color-fff);
}
[aria-label][data-tooltip] {
position: relative;
}
[aria-label][data-tooltip]:before {
position: absolute;
z-index: 10;
content: attr(aria-label);
white-space: nowrap;
max-width: 200px;
border-radius: 5px;
background: var(--color-555);
color: var(--color-fff);
padding: 0.3em 0.7em;
font-size: 12px;
font-weight: 400;
line-height: 1.4;
visibility: hidden;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
[aria-label][data-tooltip]:hover:before {
visibility: visible;
opacity: 1;
}
[aria-label][data-tooltip="top"]:before {
transform: translateY(-10px);
bottom: 100%;
}
[aria-label][data-tooltip="bottom"]:before {
transform: translateY(100%);
top: 60%;
}
[aria-label][data-tooltip="right"]:before {
transform: translateX(10px);
left: 100%;
}
[aria-label][data-tooltip="left"]:before {
transform: translateX(-10px);
right: 100%;
}
.dl1 {
max-width: 90%;
background: var(--color-fff);
color: var(--color-333);
padding: 20px;
border-radius: 10px;
border: none;
box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
scale 0.5s cubic-bezier(0.4, 0, 0.2, 1),
overlay 0.5s allow-discrete,
display 0.5s allow-discrete;
opacity: 0;
scale: 0;
will-change: transform, opacity;
overflow: hidden;
display: flex;
flex-direction: column;
max-height: 90vh;
}
.dl1::backdrop {
transition: display 0.5s allow-discrete,
overlay 0.5s allow-discrete,
background-color 0.5s cubic-bezier(0.4, 0, 0.2, 1);
background-color: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
will-change: background-color, backdrop-filter;
}
.dl1[open] {
opacity: 1;
scale: 1;
}
.dl1[open]::backdrop {
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(2px);
}
@starting-style {
.dl1[open] {
opacity: 0;
scale: 0;
}
.dl1[open]::backdrop {
background-color: rgba(0, 0, 0, 0);
backdrop-filter: blur(0px);
}
}
.dl2 {
font-size: 16px;
font-weight: 700;
margin-bottom: 10px;
}
.dl3 {
margin-bottom: 25px;
}



.dl7 {
display: block;
cursor: pointer;
user-select: none;
}
.dl8 {
appearance: none;
background: var(--color-fff);
font: inherit;
color: var(--color-000);
padding: 8px;
border: 0.1em solid var(--color-000);
border-radius: 50%;
transform: translateY(0.2em);
position: relative;
}
.dl8::before {
display: none;
content: "";
padding: 6px;
border-radius: 50%;
transform: scale(0);
transition: 120ms transform ease-in-out;
box-shadow: inset 1em 1em var(--color-000);
background: var(--color-000);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.dl8:checked::before {
display: block;
}
.ca1 {
margin: 15px 0 50px 0;
}
.ca2 {
display: flex;
align-items: flex-start;
width: 100%;
padding: 10px 0;
transition: 0.3s;
}
.ca3 {
border-radius: 50%;
width: 40px;
height: 40px;
}
.ca4 {
margin-inline-start: 10px;
width: 100%;
}
.ca5 {
display: flex;
width: 100%;
color: var(--color-555);
font-size: 13px;
font-weight: 700;
}
.ca6 {
margin-inline-start: 5px;
color: var(--color-555);
font-size: 12px;
font-weight: 500;
}
.ca7 {
position: relative;
margin-inline-start: auto;
}
.ca7:hover {
display: block;
}
.ca8 {
display: inline-block;
margin: 0 3px 0 0;
padding: 8px;
font-size: 16px;
color: var(--color-555);
}
.ca8:hover {
background: var(--color-eee);
border-radius: 50%;
}
.ca8 .icon {
pointer-events: none;
}
.ca9 {
display: none;
position: absolute;
top: 100%;
inset-inline-end: 0;
background: var(--color-fff);
min-width: 110px;
border-radius: 15px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
padding: 8px 0;
z-index: 1;
}
.ca10 {
color: var(--color-555);
padding: 8px 10px;
width: 100%;
font-weight: 300;
text-align: var(--text-align);
}
.ca10:hover {
background: var(--color-eee);
}
.ca11 {
font-size: 16px;
margin-inline-end: 5px;
}
.ca12 {
color: var(--color-555);
font-size: 0.9em;
font-weight: 400;
margin-inline-end: 15px;
}
.ca13 {
margin-top: 10px;
padding: 8px;
font-size: 16px;
color: var(--color-555);
border-radius: 50%;
}
.ca13:hover {
background: var(--color-eee);
}
.ca14 {
margin: 10px 0;
margin-inline-start: 1px;
margin-inline-end: 3px;
font-size: 12px;
}
.ca15 {
margin-top: 10px;
padding: 6px 8px;
font-size: 12px;
color: var(--color-555);
border-radius: 25px;
}
.ca15:hover {
background: var(--color-eee);
}
.ca16 {
margin-inline-end: 3px;
}
.ca17 {
border-radius: 50%;
width: 24px;
height: 24px;
}
.ca18 {
color: var(--color-2196f3);
}
.ca39 {
padding: 1px 3px;
background: var(--color-eee);
color: var(--color-555);
border-radius: 5px;
}
.ca19 {
position: relative;
display: flex;
align-items: flex-start;
gap: 10px;
}
.ca20 {
width: 40px;
height: 40px;
border-radius: 50%;
order: 1;
flex-shrink: 0;
margin-top: 10px;
}
.ca21 {
border-bottom: 1px solid var(--color-eee);
color: var(--color-000);
margin: 20px 0 0 0;
padding: 5px 0;
width: 100%;
font-size: 14px;
resize: none;
overflow: hidden;
order: 2;
flex-grow: 1;
}
.ca21:focus {
border-bottom-color: var(--color-000);
transition: border-color 0.3s ease;
}

.ca25 {
margin: 10px 0 30px 0;
}
[data-editor-comments] {
border-bottom: 1px solid var(--color-eee);
color: var(--color-000);
margin: 20px 0 0 0;
padding: 5px 0;
width: 100%;
font-size: 14px;
min-height: 20px;
outline: none;
}
[data-editor-comments]:focus {
border-bottom-color: var(--color-000);
transition: border-color 0.3s ease;
}
.comment-toolbar {
position: absolute;
inset-inline-start: 50px;
z-index: 1;
display: flex;
gap: 5px;
background: var(--color-fff);
border: 1px solid var(--color-eee);
border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.15);
padding: 5px;
}
.comment-toolbar-button {
padding: 5px;
border-radius: 3px;
color: var(--color-555);
}
.comment-toolbar-button:hover, .comment-toolbar-button-active {
background: var(--color-eee);
}
.insert_emojis_button {
position: absolute;
top: 0;
inset-inline-end: 0;
margin: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 5px;
margin-inline-end: 8px;
font-size: 20px;
color: var(--color-555);
border-radius: 50%;
}
.insert_emojis_button:hover {
background: var(--color-eee);
}
.emoji_popup {
position: absolute;
z-index: 1;
margin-top: 50px;
inset-inline-end: 10px;
background: var(--color-fff);
border: 1px solid var(--color-eee);
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
max-width: 300px;
max-height: 450px;
padding: 10px;
}
.emoji_categories {
display: flex;
flex-wrap: wrap;
gap: 3px;
padding-bottom: 3px;
margin-bottom: 10px;
border-bottom: 1px solid var(--color-eee);
}
.emoji_category {
background: var(--color-fff);
color: var(--color-333);
border-radius: 25px;
width: 35px;
height: 35px;
font-size: 1rem;
transition: .2s;
}
.emoji_category .icon {
pointer-events: none;
}
.emoji_category:hover {
background: var(--color-eee);
}
.emoji_category_active {
background: var(--color-eee);
color: var(--color-000);
}
.emoji_grid {
display: flex;
flex-direction: column;
gap: 10px;
overflow-y: auto;
max-height: 250px;
padding-bottom: 5px;
padding-inline-end: 5px;
}
.emoji_section_title {
font-size: 1rem;
font-weight: 500;
}
.emoji_container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(30px, 1fr));
gap: 5px;
}
.emoji_button {
font-size: 1.5rem;
transition: 0.2s;
}
.emoji_button:hover {
transform: scale(1.3);
}
.ca26 {
border-bottom: 1px solid var(--color-eee);
color: var(--color-000);
padding: 5px 0;
width: 100%;
font-size: 14px;
resize: none;
overflow: hidden;
order: 2;
flex-grow: 1;
}
.ca26:focus {
border-bottom-color: var(--color-000);
transition: border-color 0.3s ease;
}

.ca31 {
position: relative;
display: flex;
flex-direction: row-reverse;
}
.ca32 {
font-size: 15px;
color: var(--color-555);
}
.ca33 {
display: none;
position: absolute;
top: 100%;
inset-inline-end: 0;
background: var(--color-fff);
min-width: 110px;
border-radius: 15px;
box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.1);
padding: 10px 0;
z-index: 1;
font-size: 16px;
}
.ca34 {
color: var(--color-555);
padding: 5px 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
font-weight: 500;
font-size: 14px;
}
.ca34:hover {
background: var(--color-eee);
}
.ca35 {
background: var(--color-eee);
}
.ca35:hover {
background: var(--color-eee);
}
.ca36 {
color: var(--color-555);
font-size: 12px;
font-weight: 500;
}
.ca37 {
color: var(--color-555);
font-size: 13px;
font-weight: 700;
}
.ca38 {
margin-inline-start: 45px;
}
.sn1 {
position:absolute;
inset-inline-end:0;
top:110%;
background:var(--color-fff);
color:var(--color-333);
overflow:hidden;
height:50vh;
box-shadow:0 5px 16px rgba(0,0,0,0.2);
z-index:101;
border-radius:15px;
width:450px;
visibility:hidden;
}
.sn1[popover-open] {
visibility:visible;
}
@media screen and (max-width:480px) {
.sn1 {
position:fixed;
top:50px;
inset-inline-end:2.5%;
inset-inline-start:2.5%;
width:95%;
}
}
.sn2 {
overflow-y: auto;
height: calc(50vh - 40px);
}
.sn2::-webkit-scrollbar {
width: 8px;
}
.sn2::-webkit-scrollbar-thumb {
background: var(--color-999);
}
.sn2::-webkit-scrollbar-thumb:hover {
background: var(--color-999);
}
.sn3 {
display: flex;
align-items: center;
padding: 5px;
background: var(--color-fff);
max-width: 100%;
}
.sn3:hover {
background: var(--color-eee);
}
.sn4 {
width: 48px;
height: 48px;
margin: 10px 5px;
border-radius: 50px;
}
.sn5 {
flex: 1;
display: flex;
flex-direction: column;
text-align: var(--text-align);
}
.sn6 {
color: var(--color-000);
font-size: 14px;
margin-bottom: 5px;
overflow-wrap: anywhere;
}
.sn7 {
font-size: 12px;
color: var(--color-555);
}
.sn8 {
object-fit: cover;
width: 86px;
height: 48px;
margin: 10px;
border-radius: 5px;
}
.sn9 {
position: absolute;
top: 2px;
margin-inline-start: -11px;
background: red;
border-radius: 50%;
border: 0.8px solid var(--color-fff);
width: 10px;
height: 10px;
display: none;
}
.sn10 {
display: inline-block;
}
.sn11 {
opacity: 0;
background: var(--color-2196f3);
border-radius: 50%;
width: 5px;
height: 5px;
}
.sn12 {
opacity: 1;
}
.sn13 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 45vh;
margin: 0 auto;
padding: 0 10px;
max-width: 280px;
}
.sn14 {
margin-bottom: 20px;
font-size: 80px;
color: var(--color-333);
}
.sn15 {
font-size: 16px;
font-weight: 600;
}
.sn16 {
font-size: 13px;
}
.sn17 {
display: flex;
align-items: center;
padding: 10px 15px;
border-bottom: 1px solid var(--color-eee);
}
.sn18 {
margin-inline-start: auto;
color: var(--color-333);
font-size: 20px;
}
.sn19 {
margin: 10px 0;
width: 38px;
height: 38px;
border: 3px solid var(--color-333);
border-bottom-color: transparent;
border-radius: 50%;
display: inline-block;
animation: sn20 1s linear infinite;
}
@keyframes sn20 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.ContainerAvatar {
position: relative;
max-width: 100px;
margin: 0 auto 20px auto;
}
.ContainerAvatar .AvatarPreview {
width: 100px;
height: 100px;
position: relative;
border-radius: 100%;
overflow: hidden;
border: 1px solid var(--color-eee);
}
.ContainerAvatar .AvatarPreview>img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.ContainerAvatar .AvatarEdit {
position: absolute;
z-index: 1;
margin-inline-start: -2px;
bottom: 6px;
}
.ContainerAvatar .AvatarEdit input {
display: none;
}
.ContainerAvatar .AvatarEdit input+label {
display: inline-block;
width: 28px;
height: 28px;
border-radius: 50%;
border: 1px solid var(--color-555);
background: var(--color-fff);
color: var(--color-555);
cursor: pointer;
}
.ContainerAvatar .AvatarEdit input+label:hover {
border: 1px solid var(--color-555);
background: var(--color-555);
color: var(--color-fff);
}
.AddAvatarbutton {
position: absolute;
top: 43%;
left: 50%;
transform: translate(-50%, -50%);
}
.switch {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
margin-inline-end: 5px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
inset-inline-end: 0;
inset-inline-start: 0;
bottom: 0;
background: var(--color-999);
transition: 0.4s;
}
.slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
inset-inline-start: 4px;
bottom: 4px;
background: var(--color-fff);
transition: 0.4s;
}
input:checked + .slider {
background: var(--color-2196f3);
}
input:checked + .slider:before {
transform: translateX(var(--slider-transform));
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
.TitleDashboard {
margin: 15px 0;
color: var(--color-555);
font-size: 1.5rem;
text-align: center;
}
@media only screen and (max-width: 768px) {
.sa1 {
position: fixed;
display: flex;
justify-content: center;
z-index: 101;
transform: translateX(-50%);
bottom: 10px;
left: 50%;
padding: 0 var(--sa1-padding);
}
.sa2 {
min-width: 200%;
text-align: center;
}
.im2 {
margin: 15px 0 10px 0;
padding: 5px 0;
border-bottom: 1px solid var(--color-eee);
}
.im5 {
grid-template-columns: 1fr;
}
.im6 {
grid-column: auto;
border-bottom: 1px solid var(--color-eee);
padding-bottom: 5px;
}
.im8 {
font-size: 25px;
line-height: 1.3;
}
.im10 {
display: flex;
grid-column: auto;
border-bottom: 1px solid var(--color-eee);
padding-bottom: 10px;
font-size: 16px;
}
.im11 {
width: 150px;
height: 84px;
margin-inline-end: 10px;
border-radius: 3px;
}
.im13 {
margin-top: 0;
width: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 10px;
}
.im14 {
width: 100%;
display: flex;
grid-column: auto;
border-bottom: 1px solid var(--color-eee);
padding-bottom: 10px;
}
.im15 {
width: 150px;
height: 84px;
margin-inline-end: 10px;
border-radius: 3px;
}
.Article,
.ArticleAside {
padding: 0 10px;
}
.header {
position: sticky;
top: 0;
}
.LA14,
.LA3,
.NavigationTB,
[aria-label][data-tooltip]:before {
display: none;
}
.LogoNavigation {
width: auto;
height: 35px;
}
.MainNavigation {
justify-content: flex-start;
}
.MainNavigation::-webkit-scrollbar {
display: none;
}
.LA9 {
display: flex;
}
.Article,
.ArticleAside {
display: block;
width: 100%;
}
.AsideTitle,
.LA7 {
color: var(--color-000);
font-size: 25px;
font-weight: 700;
}
.LA13 {
color: var(--color-333);
font-size: 16px;
font-weight: 700;
}
.LA13:hover {
text-decoration: none;
}
.LA10 {
width: 150px;
height: 84px;
}
.AsideNewsBlock {
margin-bottom: 60px;
}
.MSSSelect {
flex-basis: 100%;
}
.ArticleMain {
max-width: 1100px;
margin: 0 auto;
position: relative;
}
.Article {
margin: 0 auto 50px;
color: var(--color-555);
transition: 0.3s;
}
.AsideNews {
display: flex;
margin-top: 25px;
}
.AsideCardDate {
display: flex;
font-size: 12px;
color: var(--color-555);
margin: 0 8px 0 0;
}
.AsideImg {
width: 30%;
}
.AsideContent {
margin-inline-start: 20px;
width: 70%;
}
.error_page_content h2.error_page_header {
font-size: 30vw;
}
.sl3 {
margin-top: 25px;
margin-inline-start: 10px;
}
}
@media only screen and (max-width: 480px) {
.im8 {
font-size: 23px;
line-height: 1.3;
}
.im11,
.im15 {
width: 130px;
height: 68.25px;
}
.LA16 {
flex-direction: column;
align-items: center;
text-align: center;
}
.LA19 {
width: 70px;
height: auto;
margin-inline-end: 0;
}
.LA20 {
font-size: 23px;
margin-top: 5px;
}
.LA17 {
display: flex;
justify-content: center;
align-items: center;
}
.article_title {
font-size: 25px;
font-weight: 700;
line-height: 130%;
color: var(--color-000);
margin: 0 0 10px;
}
.article_subtitle {
font-size: 18px;
font-weight: 500;
line-height: 140%;
color: var(--color-555);
margin-bottom: 5px;
}
.headline_buttons {
position: fixed;
bottom: 0;
inset-inline-end: 0;
width: 100%;
display: flex;
justify-content: space-between;
margin: 0;
padding: 10px;
background: var(--color-fff);
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
z-index: 99;
border-top: 1px solid var(--color-eee);
}
.headline_buttons .button {
flex: 1;
margin: 5px;
padding: 0;
}
.error_page_content .error_page_buttons a {
margin: 0 7px;
padding: 5px 10px;
font-size: 5vw;
}
.error_page_buttons a:focus,
.error_page_buttons a:hover {
outline-width: 1px;
}
.error_page_title {
font-size: 8vw;
}
.error_page_subtitle {
font-size: 0.9em;
}
.design_for_recommended_titles {
padding: 6px 10px 3px;
width: 150px;
font-size: 18px;
}
}
@media only screen and (max-width: 320px) {
.LA9 {
flex-direction: column;
}
.LA10 {
width: 100%;
height: auto;
}
.LA11 {
margin: 10px 0 0 0;
width: 100%;
}
}
.delete-account-container {
max-width: 600px;
margin: 2rem auto;
padding: 2rem;
padding: 1.5rem;
border-radius: 1rem;
border: 1px solid var(--color-999);
}
.delete-account-header {
margin-bottom: 2rem;
text-align: center;
}
.delete-account-header h1 {
color: var(--color-333);
font-size: 1.7rem;
margin-bottom: 1rem;
}
.delete-account-warning {
background: rgba(230, 0, 0, 0.1);
border-left: 4px solid var(--color-e60000);
padding: 1.5rem;
margin-bottom: 2rem;
border-radius: 4px;
}
.stats-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.stat-item {
background: var(--color-eee);
padding: 1rem;
border-radius: 6px;
text-align: center;
}
.stat-value {
font-size: 1.5rem;
color: var(--color-333);
margin-bottom: 0.5rem;
}
.stat-label {
color: var(--color-555);
font-size: 0.875rem;
}
.button-container {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.delete-account-container .button-primary {
flex: 1;
}
.button-delete:hover {
background: #cc0000;
}
.button-cancel {
background: var(--color-fff);
color: var(--color-333);
padding: 0.75rem 1.5rem;
border: 1px solid var(--color-eee);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s;
flex: 1;
text-align: center;
text-decoration: none;
}
.button-cancel:hover {
background: var(--color-eee);
}
@media (max-width: 768px) {
.delete-account-container {
margin: 1rem;
padding: 1rem;
}
.stats-container {
grid-template-columns: 1fr;
}
.button-container {
flex-direction: column;
}
}
.level_container {
display: flex;
justify-content: center;
width: 100%;
}
.user_level_section {width: 100%;
max-width: 1100px;
margin: 0 16px;
padding: 32px 16px;
margin-top: 20px;
background: var(--color-fff);
color: var(--color-333);
border-radius: 12px;
border: solid 1px var(--color-eee);
}
.level_header {
display: flex;
align-items: center;
justify-content: space-between;
}
.info_icon {
cursor: pointer;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--color-eee);
color: var(--color-333);
transition: background-color 0.3s;
}
.level_badge {
display: flex;
align-items: center;
margin: 15px 0;
}
.level_icon {
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
position: relative;
margin-inline-end: 15px;
color: white;
}
.level_number {
position: absolute;
bottom: -5px;
right: -5px;
background: var(--color-fff);
color: var(--color-333);
border-radius: 50%;
width: 24px;
height: 24px;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid var(--color-fff);
}
.level_details {
flex: 1;
}
.level_name {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.points_counter {
font-size: 14px;
color: var(--color-666);
margin-bottom: 10px;
}
.level_progress_container {
height: 8px;
background-color: var(--color-eee);
border-radius: 4px;
overflow: hidden;
margin-bottom: 5px;
}
.level_progress {
height: 100%;
border-radius: 4px;
transition: width 0.3s ease;
}
.level_progress_text {
font-size: 12px;
color: var(--color-666);
}
.activity_summary {
margin-top: 25px;
}
.activity_summary h3 {
font-size: 16px;
margin-bottom: 15px;
}
.activity_stats {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.activity_stat {
display: flex;
flex-direction: column;
align-items: center;
background-color: var(--color-f9f9f9);
border-radius: 8px;
padding: 15px;
min-width: 70px;
flex: 1;
}
.activity_stat .icon {
font-size: 20px;
margin-bottom: 5px;
color: var(--color-555);
}
.stat_value {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
.stat_label {
font-size: 12px;
color: var(--color-666);
}
/* Modal Styles */
.level_info_content ul {
list-style: none;
padding: 0;
}
.level_info_content li {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 18px;
}
.level_info_content li svg {
margin-inline-end: 8px;
}
@media (max-width: 768px) {
.activity_stats {
grid-template-columns: repeat(2, 1fr);
}
}
.article_navigation {
display: flex;
justify-content: space-between;
margin: 55px 0 35px 0;
gap: 20px;
}
.article_nav_item {
flex: 1;
max-width: 48%;
}
.article_nav_link {
text-decoration: none;
color: var(--color-333);
display: block;
padding: 15px;
border-radius: 12px;
border: 1px solid var(--color-eee);
background: var(--color-fff);
transition: all 0.3s ease;
}
.article_nav_link:hover {
border-color: var(--color-999);
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.article_nav_placeholder {
padding: 15px;
border-radius: 12px;
border: 1px solid var(--color-eee);
background: var(--color-fff);
opacity: 0.5;
}
.article_nav_arrow {
display: flex;
align-items: center;
margin-bottom: 10px;
font-size: 14px;
color: var(--color-555);
}
.prev_article .article_nav_arrow {
justify-content: flex-start;
}
.next_article .article_nav_arrow {
justify-content: flex-end;
}
.article_nav_content {
display: flex;
align-items: center;
}
.prev_article .article_nav_content {
flex-direction: row;
}
.next_article .article_nav_content {
flex-direction: row-reverse;
}
.article_nav_title {
font-weight: 500;
font-size: 16px;
margin: 0 10px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.article_nav_content img {
border-radius: 8px;
object-fit: cover;
}
.nav_disabled {
opacity: 0.5;
}
@media (max-width: 768px) {
.article_navigation {
flex-direction: column;
}
.article_nav_item {
max-width: 100%;
}
}
.cookie-consent {
position: fixed;
bottom: 20px;
left: 20px;
right: 20px;
max-width: 1100px;
margin: 0 auto;
padding: 15px 20px;
background-color: var(--color-fff);
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
z-index: 9999;
display: flex;
flex-direction: column;
transform: translateY(100px);
opacity: 0;
visibility: hidden;
transition: transform 0.4s ease, opacity 0.4s ease, visibility 0s linear 0.4s;
border: 1px solid var(--color-eee);
}
.cookie-consent.show {
transform: translateY(0);
opacity: 1;
visibility: visible;
transition: transform 0.4s ease, opacity 0.4s ease, visibility 0s linear;
}
.cookie-consent-content {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.cookie-consent-text {
flex: 1;
padding-right: 20px;
}
.cookie-consent-text h3 {
margin: 0 0 8px 0;
font-size: 16px;
color: var(--color-333);
}
.cookie-consent-text p {
margin: 0;
font-size: 14px;
color: var(--color-555);
line-height: 1.5;
}
.cookie-consent-actions {
display: flex;
flex-direction: row;
gap: 10px;
}
.cookie-btn {
padding: 8px 16px;
border-radius: 4px;
font-size: 14px;
transition: background-color 0.2s ease, transform 0.1s ease;
}
.cookie-btn:active {
transform: translateY(1px);
}
.cookie-btn-accept-all {
background-color: var(--color-2196f3);
color: var(--color-fff);
}
.cookie-btn-accept-all:hover {
background-color: #0b7ddb;
}
.cookie-btn-accept-necessary {
background-color: var(--color-eee);
color: var(--color-333);
}
.cookie-btn-accept-necessary:hover {
background-color: #ddd;
}
.cookie-btn-customize {
background-color: transparent;
color: var(--color-555);
border: 1px solid var(--color-999);
}
.cookie-btn-customize:hover {
background-color: var(--color-eee);
}
.cookie-consent-details {
display: none;
padding-top: 15px;
border-top: 1px solid var(--color-eee);
}
.cookie-consent-details.show {
display: block;
}
.cookie-types {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 15px;
}
.cookie-type {
padding: 10px;
border-radius: 4px;
background-color: var(--color-eee);
}
.cookie-type-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 8px;
}
.cookie-type-title {
font-weight: 600;
font-size: 14px;
color: var(--color-333);
}
.cookie-type-necessary {
font-size: 12px;
padding: 2px 6px;
background-color: var(--success-bg);
color: var(--success-text);
border-radius: 10px;
}
.cookie-type-toggle {
display: flex;
align-items: center;
}
.cookie-type-description {
font-size: 13px;
color: var(--color-555);
line-height: 1.4;
}
/* Toggle switch styling */
.cookie-toggle {
position: relative;
display: inline-block;
width: 40px;
height: 20px;
}
.cookie-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.cookie-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-999);
transition: .4s;
border-radius: 20px;
}
.cookie-toggle-slider:before {
position: absolute;
content: "";
height: 16px;
width: 16px;
left: 2px;
bottom: 2px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .cookie-toggle-slider {
background-color: var(--color-2196f3);
}
input:checked + .cookie-toggle-slider:before {
transform: translateX(20px);
}
input:disabled + .cookie-toggle-slider {
background-color: var(--success-border);
cursor: not-allowed;
}
@media (max-width: 768px) {
.cookie-consent {
bottom: 0;
left: 0;
right: 0;
border-radius: 8px 8px 0 0;
max-width: 100%;
}
.cookie-consent-content {
flex-direction: column;
align-items: flex-start;
}
.cookie-consent-text {
padding-right: 0;
margin-bottom: 15px;
width: 100%;
}
.cookie-consent-actions {
width: 100%;
flex-wrap: wrap;
}
.cookie-btn {
flex: 1;
text-align: center;
white-space: nowrap;
}
}
.sidebar-container {
position: fixed;
top: 150px;
width: 250px;
z-index: 90;
pointer-events: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
}
.sidebar-container.left {
left: 10px;
}
.sidebar-container.right {
right: 10px;
}
.sidebar-ad {
width: 100%;
pointer-events: auto;
transition: all 0.3s ease;
}
.ad-sidebar {
max-width: 250px;
margin: 0;
background: transparent;
padding: 0;
}
.ad-sidebar img {
max-width: 100%;
border-radius: 5px;
}
.header {
z-index: 100;
}
.ad-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
z-index: 25;
display: flex;
flex-direction: column;
}
.video-ad-header {
position: absolute;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
background: linear-gradient(to bottom, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
z-index: 2;
}
.ad-sponsor-label {
color: #fff;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
gap: 5px;
}
.ad-sponsor-label .icon {
color: #FFCC00;
}
.video-ad-link {
color: #FFCC00;
font-size: 14px;
text-decoration: none;
padding: 4px 8px;
border: 1px solid #FFCC00;
border-radius: 4px;
transition: all 0.2s;
}
.video-ad-link:hover {
background-color: #FFCC00;
color: #000;
}
.ad-skip-container {
position: absolute;
bottom: 60px;
right: 15px;
z-index: 2;
}
.ad-skip-button {
background-color: rgba(0, 0, 0, 0.7);
color: #fff;
border: none;
border-radius: 4px;
padding: 8px 16px;
font-size: 14px;
cursor: pointer;
display: flex;
align-items: center;
transition: all 0.2s;
}
.ad-skip-button:not(.disabled):hover {
background-color: rgba(0, 0, 0, 0.9);
}
.ad-skip-button.disabled {
cursor: not-allowed;
opacity: 0.7;
}
.ad-skip-countdown {
display: inline-block;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
background-color: #FFCC00;
color: #000;
border-radius: 50%;
margin-right: 8px;
font-weight: bold;
}
.ad-content {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.ad-content video,
.ad-content img {
max-width: 100%;
max-height: 100%;
width: 100%;
height: 100%;
object-fit: contain;
}
.ad-progress-container {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background-color: #555;
z-index: 2;
}
.ad-progress-bar {
height: 100%;
width: 0;
background-color: #FFCC00;
transition: width 0.1s linear;
}
[dir="rtl"] .ad-skip-container {
right: auto;
left: 15px;
}
[dir="rtl"] .ad-skip-countdown {
margin-right: 0;
margin-left: 8px;
}
@media (max-width: 550px) {
.video-ad-header {
padding: 5px 10px;
}
.ad-sponsor-label {
font-size: 12px;
}
.video-ad-link {
font-size: 12px;
padding: 3px 6px;
}
.ad-skip-container {
bottom: 40px;
right: 10px;
}
.ad-skip-button {
padding: 6px 12px;
font-size: 12px;
}
.ad-skip-countdown {
width: 18px;
height: 18px;
line-height: 18px;
font-size: 12px;
}
}
@media (max-width: 1600px) {
.sidebar-container {
display: none;
}
}
/* Ad banner styling */
.ad-banner {
width: 100%;
text-align: center;
overflow: hidden;
margin: 20px 0;
background: var(--color-eee);
border-radius: 5px;
padding: 10px 0;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.ad-banner img, .ad-banner video {
max-width: 100%;
}
.ad-banner::before {
content: attr(data-ad-label);
position: absolute;
top: 0;
right: 0;
background: var(--color-999);
color: var(--color-fff);
font-size: 10px;
padding: 2px 5px;
border-radius: 0 0 0 5px;
}
.ad-header {
margin: 20px auto 10px auto;
max-width: 1100px;
}
.popup-ad {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.popup-ad.active {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.popup-ad-content {
position: relative;
max-width: 600px;
width: 90%;
max-height: 90vh;
background-color: var(--color-fff);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
animation: popup-appear 0.5s forwards;
}
@keyframes popup-appear {
from {
transform: scale(0.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.popup-ad-close {
position: absolute;
top: 10px;
right: 10px;
background: rgba(0, 0, 0, 0.1);
color: var(--color-333);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
z-index: 5;
}
.popup-ad-close:hover {
background: rgba(0, 0, 0, 0.3);
color: var(--color-fff);
}
.popup-ad-body {
text-align: center;
overflow: auto;
max-height: 90vh;
}
.popup-ad-body img, .popup-ad-body video {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
[dir="rtl"] .popup-ad-close {
right: auto;
left: 10px;
}
@media (max-width: 768px) {
.popup-ad-content {
width: 95%;
}
}.interstitial-ad {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.interstitial-ad.active {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.interstitial-ad-content {
position: relative;
max-width: 800px;
width: 90%;
background-color: var(--color-fff);
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
animation: interstitial-appear 0.5s forwards;
}
@keyframes interstitial-appear {
from {
transform: scale(0.9);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.interstitial-ad-close {
position: absolute;
top: 10px;
right: 10px;
background: var(--color-333);
color: var(--color-fff);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s;
z-index: 5;
}
.interstitial-ad-close:hover {
background: var(--color-fff);
color: var(--color-333);
}
.interstitial-ad-timer {
position: absolute;
top: 10px;
right: 10px;
background: var(--color-333);
color: var(--color-fff);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
z-index: 5;
}
.interstitial-ad-body {
text-align: center;
overflow: auto;
max-height: 90vh;
}
.interstitial-ad-body img, .interstitial-ad-body video {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
[dir="rtl"] .interstitial-ad-close,
[dir="rtl"] .interstitial-ad-timer {
right: auto;
left: 10px;
}
@media (max-width: 768px) {
.interstitial-ad-content {
width: 95%;
}
}
.ad-floating {
position: fixed;
bottom: 50px;
right: 0;
width: 100%;
height: auto;
max-height: 250px;
background: var(--color-fff);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 99;
overflow: hidden;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.3s ease, opacity 0.3s ease;
}
.ad-sidebar {
max-width: 300px;
margin: 0 0 20px 0;
}
.ad-in-article {
margin: 20px 0;
}
.ad-before-comments {
margin: 30px 0;
}
.ad-between-articles,
.ad-between-results {
max-width: 650px;
margin: 15px auto;
}
.ad-footer {
margin: 30px auto 0 auto;
max-width: 1100px;
}
.ad-category-header,
.ad-author-header,
.ad-search-header {
max-width: 650px;
margin: 10px auto 20px auto;
}
.ad-mid-page {
max-width: 1000px;
margin: 20px auto;
}
.ad-category-divider {
max-width: 1000px;
margin: 10px auto 20px auto;
}
/* Sticky sidebar ad for article pages */
.sticky {
position: sticky;
top: 100px;
}
/* Responsive adjustments */
@media only screen and (max-width: 768px) {
.ad-banner {
margin: 15px 0;
}
.ad-sidebar {
max-width: 100%;
}
.sticky {
position: static;
}
}
.site-footer {
background-color: var(--color-eee);
color: var(--color-333);
padding: 40px 0 20px;
margin-top: 50px;
}
body:has(.ad-floating) .site-footer {
padding: 40px 0 90px;
}
.footer-container {
max-width: 1100px;
margin: 0 auto;
padding: 0 15px;
}
.footer-top {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 30px;
}
.footer-logo {
margin-bottom: 20px;
}
.footer-logo img {
background: transparent;
max-height: 50px;
width: auto;
}
.footer-nav {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.footer-nav-col {
min-width: 160px;
}
.footer-nav-col .footer-title {
font-size: 16px;
margin-bottom: 15px;
color: var(--color-000);
font-weight: 700;
}
.footer-nav-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-nav-col ul li {
margin-bottom: 8px;
}
.footer-nav-col ul li a {
color: var(--color-555);
text-decoration: none;
transition: color 0.3s;
font-size: 14px;
}
.footer-nav-col ul li a:hover {
color: var(--color-2196f3);
text-decoration: underline;
}
.footer-social-links {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.footer-social-link {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--color-fff);
color: var(--color-555);
font-size: 18px;
transition: all 0.3s;
}
.footer-social-link:hover {
background: var(--color-2196f3);
color: var(--color-fff);
transform: translateY(-3px);
}
.footer-bottom {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding-top: 20px;
border-top: 1px solid var(--color-999);
font-size: 14px;
}
.footer-copyright {
margin-bottom: 10px;
}
.footer-links {
display: flex;
gap: 20px;
}
.footer-links a {
color: var(--color-555);
text-decoration: none;
transition: color 0.3s;
}
.footer-links a:hover {
color: var(--color-2196f3);
text-decoration: underline;
}
@media (max-width: 768px) {
.site-footer {
padding: 30px 0 15px;
}
.footer-top {
flex-direction: column;
}
.footer-nav {
gap: 20px;
}
.footer-nav-col {
width: 100%;
margin-bottom: 15px;
}
.footer-bottom {
flex-direction: column;
text-align: center;
}
.footer-copyright {
order: 2;
margin-top: 10px;
}
.footer-links {
order: 1;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 15px;
}
}
.scroll-top {
position: fixed;
bottom: 20px;
inset-inline-end: 20px;
background: var(--color-000);
color: var(--color-eee);
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
transition: all 0.3s ease;
opacity: 0.8;
z-index: 99;
padding: 9px 10px;
font-size: 1.2rem;
}
.scroll-top:hover {
opacity: 1;
box-shadow: 0 6px 16px rgba(0,0,0,0.4);
}
@media (max-width: 480px) {
.scroll-top.article-page {
inset-inline-end: 11px;
bottom: 65px;
}
.footer-nav {
flex-direction: column;
}
.footer-links {
gap: 15px;
}
}
.quote-selection-btn{
position:absolute;
border-inline-start: 3px solid var(--color-999);
border-radius: 10px;
background: var(--color-eee);
color: var(--color-555);
padding:4px 8px;
z-index:1000;
font-size:18px;
}
.remove-quote {
position:absolute;
top:7px;
inset-inline-end:8px;
color:var(--color-333);
font-size:16px;
}
.comment_quote {
position: relative;
margin: 0 0 10px;
padding: 8px 12px 8px 12px;
padding-inline-end: 36px;
border-inline-start: 3px solid var(--color-999);
border-radius: 10px;
background: var(--color-eee);
color: var(--color-555);
font-style: italic;
}
[data-anonymous-trigger] {
cursor: pointer;
border-radius: 50%;
transition: box-shadow .3s, transform .2s;
}
[data-anonymous-trigger]:hover {
transform: scale(1.05);
}
[data-anonymous-trigger].anonymous-active {
box-shadow: 0 0 0 2px var(--color-2196f3);
}
.anonymous-modal {
position: fixed;
z-index: 1;
background: transparent;
display: block;
transition: opacity .2s, transform .2s;
}
.anonymous-modal:not(.display_none) {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.anonymous-modal-content {
background: var(--color-eee);
padding: 12px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
min-width: 180px;
position: relative;
}
.anonymous-modal-content::before {
content: '';
position: absolute;
top: -8px;
inset-inline-start: 25px;
border-width: 0 8px 8px 8px;
border-style: solid;
border-color: transparent transparent var(--color-eee) transparent;
}
.anonymous-options {
display: flex;
flex-direction: column;
gap: 8px;
}
.anonymous-option {
cursor: pointer;
display: flex;
align-items: center;
padding: 8px;
border-radius: 6px;
transition: background-color .2s;
}
.anonymous-option:hover {
background-color: var(--color-fff);
}
.anonymous-option.active {
background-color: var(--color-fff);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
position: relative;
}
.anonymous-option img {
border-radius: 50%;
margin-inline-end: 10px;
width: 36px;
height: 36px;
}
.anonymous-option span {
font-size: 14px;
color: var(--color-333);
}
#disqus_thread, #hyvor-talk-view, #commento {
margin-top: 50px;
}
.article_credits_box {
margin: 2rem 0;
padding: 1.5rem;
border: 1px solid var(--color-eee);
border-radius: 4px;
background-color: var(--color-fff);
}
.article_credits_title {
font-size: 1.3rem;
font-weight: 600;
color: var(--color-333);
margin-bottom: 1rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid var(--color-eee);
}
.author-content-container {
position: relative;
min-height: 300px;
}
.author-view-content {
transition: opacity 0.3s ease;
}
.author-tabs {
display: flex;
border-bottom: 2px solid var(--color-eee);
}
.author-tab {
flex: 1;
text-align: center;
background: none;
border: none;
padding: 12px 20px;
font-size: 16px;
cursor: pointer;
position: relative;
color: var(--color-555);
text-decoration: none;
transition: color 0.2s;
}
.author-tab:hover {
color: var(--color-333);
}
.author-tab.active {
color: var(--color-2196f3);
}
.author-tab.active::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
right: 0;
height: 2px;
background: var(--color-2196f3);
}
.author-comment-card {
background: var(--color-eee);
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
transition: transform 0.2s ease;
}
.author-comment-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.comment-content {
font-size: 15px;
line-height: 1.6;
color: var(--color-333);
margin-bottom: 15px;
}
#GetCommentsByEditor {
margin-top: 20px;
}
.comment-meta {
font-size: 13px;
color: var(--color-555);
display: flex;
align-items: center;
gap: 10px;
}
.comment-meta svg {
width: 16px;
height: 16px;
}
.comment-meta a {
color: var(--color-2196f3);
text-decoration: none;
}
.comment-meta a:hover {
text-decoration: underline;
}
.author-shorts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 2fr));
gap: 20px;
margin-top: 20px;
}
.author-short-item {
background: var(--color-fff);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
transition: all 0.3s ease;
}
.author-short-item:hover {
transform: translateY(-4px);
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}
.short-link {
text-decoration: none;
color: inherit;
display: block;
}
.short-thumbnail {
position: relative;
padding-top: 150%;
overflow: hidden;
}
.short-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
padding: 20px 15px 15px;
}
.short-stats {
display: flex;
gap: 15px;
color: #fff;
font-size: 14px;
}
.short-stats span {
display: flex;
align-items: center;
gap: 5px;
}
.short-stats svg {
width: 18px;
height: 18px;
}
.short-title {
font-size: 16px;
font-weight: 600;
margin: 15px;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.short-date {
font-size: 13px;
color: var(--color-555);
margin: 0 15px 15px;
}
.no-content {
text-align: center;
padding: 40px;
color: var(--color-555);
font-size: 16px;
}
@media (max-width: 768px) {
.author-shorts-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 10px;
}
.short-title {
font-size: 14px;
margin: 10px;
}
.short-stats {
font-size: 12px;
}
}
.short-thumbnail img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 0;
left: 0;
}
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: rgba(0,0,0,0.7);
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
}
.play-button::after {
content: '';
position: absolute;
top: 50%;
left: 55%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-style: solid;
border-width: 12px 0 12px 20px;
border-color: transparent transparent transparent #ffffff;
}
.author-short-item:hover .play-button {
background: rgba(0,0,0,0.9);
transform: translate(-50%, -50%) scale(1.1);
}
.author-info {
padding: 20px;
background: var(--color-fff);
border: 1px solid var(--color-eee);
border-radius: 5px;
}
.author-details {
display: flex;
align-items: center;
}
.author-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
margin-inline-end: 20px;
}
.author-text {
flex: 1;
}
.author-name {
font-weight: bold;
color: var(--color-333);
}
.author-name a {
color: var(--color-333);
text-decoration: none;
}
.author-name a:hover {
text-decoration: underline;
}
.author-bio {
font-size: 14px;
color: var(--color-555);
margin: 10px 0 15px 0;
}
.author-links {
display: flex;
gap: 10px;
}
.author-links a {
color: var(--color-555);
font-size: 16px;
}
.author-links a:hover {
color: var(--color-2196f3);
}
@media (max-width: 768px) {
.author-details {
flex-direction: column;
align-items: center;
}
.author-avatar {
margin-inline-end: 0;
margin-bottom: 10px;
}
}
.weather-widget-container {
position: relative;
display: inline-block;
}
.weather-widget {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 6px;
transition: background 0.3s ease;
cursor: pointer;
}
.weather-widget:hover {
background: rgba(255, 255, 255, 0.2);
}
.weather-icon {
font-size: 20px;
line-height: 1;
}
.weather-city {
font-weight: 500;
font-size: 14px;
}
.weather-temp {
font-weight: 700;
font-size: 16px;
}
.weather-expand-btn {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 2px;
margin-left: 2px;
display: flex;
align-items: center;
transition: transform 0.3s ease;
pointer-events: none;
}
.weather-expand-btn.expanded {
transform: rotate(180deg);
}
.weather-selector-widget-container {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
margin-bottom: 10px;
}
.weather-details-dropdown {
position: absolute;
top: 100%;
left: 0;
margin-top: 6px;
background: var(--color-fff);
border-radius: 6px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.12);
min-width: 220px;
z-index: 1000;
overflow: hidden;
}
.weather-dropdown-inner {
max-height: 240px;
overflow-y: auto;
}
.weather-city-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0;
padding: 8px 12px;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
color: var(--color-333);
}
.weather-city-item:hover {
background: var(--color-eee);
}
.weather-city-item.selected {
background: var(--color-2196f3);
color: var(--color-fff);
}
.weather-city-icon {
font-size: 24px;
min-width: 32px;
text-align: center;
}
.weather-city-name {
flex: 1;
font-weight: 500;
font-size: 14px;
}
.weather-city-temp {
font-weight: 700;
font-size: 16px;
}
.weather-city-main {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.weather-city-link {
position: static;
right: auto;
top: auto;
transform: none;
opacity: 0;
transition: opacity 0.2s ease;
color: inherit;
margin-inline-start: 8px;
}
.weather-city-item:hover .weather-city-link {
opacity: 0.7;
}
.weather-city-item.selected .weather-city-link {
color: var(--color-fff);
opacity: 1;
}
.weather-dropdown-inner::-webkit-scrollbar,
.weather-selector-dropdown-inner::-webkit-scrollbar {
width: 4px;
}
.weather-dropdown-inner::-webkit-scrollbar-track,
.weather-selector-dropdown-inner::-webkit-scrollbar-track {
background: transparent;
}
.weather-dropdown-inner::-webkit-scrollbar-thumb,
.weather-selector-dropdown-inner::-webkit-scrollbar-thumb {
background: #999;
border-radius: 2px;
}
.weather-selector-widget {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: rgba(255,255,255,0.1);
border-radius: 6px;
transition: background 0.3s;
cursor: pointer;
}
.weather-selector-widget:hover {
background: rgba(255,255,255,0.2);
}
.weather-selector-widget .weather-expand-btn {
background: none;
border: none;
color: inherit;
cursor: pointer;
padding: 2px;
margin-left: 2px;
display: flex;
align-items: center;
transition: transform 0.3s;
}
.weather-selector-widget.expanded .weather-expand-btn {
transform: rotate(180deg);
}
.weather-selector-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
margin-top: 6px;
background: var(--color-fff);
border-radius: 6px;
box-shadow: 0 3px 15px rgba(0,0,0,0.12);
min-width: 180px;
max-width: 220px;
z-index: 1000;
overflow: hidden;
}
.weather-selector-dropdown-inner {
max-height: 240px;
overflow-y: auto;
}
.weather-selector-city-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 8px 12px;
color: var(--color-333);
transition: all 0.2s;
border-bottom: 1px solid var(--color-eee);
background: var(--color-fff);
text-decoration: none;
}
.weather-selector-city-item:last-child {
border-bottom: none;
}
.weather-selector-city-item:hover {
background: var(--color-eee);
}
.weather-selector-city-item.selected {
background: var(--color-2196f3);
color: var(--color-fff);
}
.weather-selector-city-main {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.Arrow2 {
transform: var(--arrow-direction);
}
.editor-follow-stats {
display: flex;
gap: 10px;
margin: 5px 0 10px 0;
font-size: 14px;
color: var(--color-555);
}
.author-tab1 {
cursor: pointer;
}
.related-stocks-overview {
margin: 10px 0 20px 0;
overflow: hidden;
}
.stocks-label-inline {
font-weight: 600;
color: var(--color-333);
margin-top: 20px;
font-size: 18px;
}
.tradingview-widget-symbol-overview {
height: 500px;
}
.ad-hide-btn {
position: absolute;
top: 5px;
inset-inline-start: 5px;
background: rgba(0,0,0,0.6);
color: white;
border: none;
width: 20px;
height: 20px;
border-radius: 50%;
cursor: pointer;
font-size: 14px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s;
z-index: 10;
}
.ad-banner:hover .ad-hide-btn {
opacity: 1;
}
.ad-hide-btn:hover {
background: rgba(0,0,0,0.8);
}
.adblock-notice {
background: #f0f0f0;
border: 1px solid #ddd;
padding: 20px;
text-align: center;
border-radius: 4px;
}
.ad-detection-notice {
background: #fff3cd;
border: 1px solid #ffeaba;
color: #856404;
padding: 15px;
border-radius: 4px;
margin: 10px 0;
}
.interstitial-ad-close {
cursor: pointer;
pointer-events: none;
}
.interstitial-ad-close[style*="pointer-events: auto"] {
cursor: pointer;
}





.subscription_status_inline {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    display: inline-block;
    margin-left: 5px;
}

.subscription_status_inline.active {
    background: var(--success-bg);
    color: var(--success-text);
    border: 1px solid var(--success-border);
}

.subscription_status_inline.trialing {
    background: var(--warning-bg);
    color: var(--warning-text);
    border: 1px solid var(--warning-border);
}