:root {
    /* Primary palette - trader-focused emerald + cobalt */
    --color-primary: #10b981;
    --color-primary-hover: #059669;
    --color-primary-soft: rgba(16, 185, 129, 0.08);
    --color-secondary: #3b82f6;
    --color-secondary-hover: #2563eb;
    --color-secondary-soft: rgba(59, 130, 246, 0.08);
    --color-accent-gold: #f59e0b;

    /* Bull / Bear - trading semantic colors */
    --color-bull: #10b981;
    --color-bear: #ef4444;

    /* Backgrounds */
    --color-bg-page: #f1f5f9;
    --color-bg-card: #ffffff;
    --color-bg-muted: #f8fafc;
    --color-bg-navbar: #0b1220;
    --color-bg-navbar-elev: #111a2e;

    /* Text */
    --color-text-primary: #0f172a;
    --color-text-secondary: #64748b;
    --color-text-tertiary: #94a3b8;
    --color-text-inverse: #f8fafc;

    /* Borders */
    --color-border: #e2e8f0;
    --color-border-strong: #cbd5e1;

    /* Status */
    --color-success: #10b981;
    --color-danger: #ef4444;
    --color-warning: #f59e0b;
    --color-info: #3b82f6;

    /* Shadows */
    --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-card-hover: 0 10px 25px -5px rgba(15, 23, 42, 0.1), 0 4px 10px -3px rgba(15, 23, 42, 0.05);
    --shadow-navbar: 0 1px 3px rgba(0, 0, 0, 0.25);
    --shadow-focus: 0 0 0 3px rgba(16, 185, 129, 0.18);

    /* Radii */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-full: 9999px;

    /* Transitions */
    --t-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --t-base: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* =================================================================
   MODERN CLUB.TRADING COMPONENTS (2026 refresh)
   ================================================================= */

/* --- Feed tabs (For You / Following / Analysis / News / Moldova) --- */
.feed-tabs {
    display: flex;
    gap: 4px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 6px;
    margin: 10px 0 14px;
    box-shadow: var(--shadow-card);
    overflow-x: auto;
    scrollbar-width: none;
}
.feed-tabs::-webkit-scrollbar { display: none; }
.feed-tab {
    flex: 1 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border: none;
    background: transparent;
    color: var(--color-text-secondary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: var(--radius-md);
    cursor: pointer;
    white-space: nowrap;
    transition: color var(--t-fast), background var(--t-fast), transform var(--t-fast);
    text-decoration: none;
}
.feed-tab i { font-size: 12px; opacity: 0.85; }
.feed-tab:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-muted);
    text-decoration: none;
}
.feed-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.25);
}
.feed-tab.active i { opacity: 1; color: var(--color-primary); }
.feed-tab .md-flag-img {
    width: 18px;
    height: 13px;
    object-fit: cover;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
    vertical-align: middle;
}
.feed-tab-info {
    display: inline-flex;
    align-items: center;
    margin-left: 2px;
    color: var(--color-text-tertiary);
    font-size: 11px;
    cursor: help;
}
.feed-tab.active .feed-tab-info { color: rgba(255, 255, 255, 0.6); }

/* --- Welcome hero (shown to new users) --- */
.welcome-hero {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #0b1220 0%, #1e293b 55%, #0f766e 100%);
    border-radius: var(--radius-lg);
    padding: 28px 30px;
    margin-top: 10px;
    color: #fff;
    box-shadow: var(--shadow-card-hover);
}
.welcome-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(16, 185, 129, 0.25), transparent 40%),
        radial-gradient(circle at 85% 80%, rgba(59, 130, 246, 0.22), transparent 45%);
    pointer-events: none;
}
.welcome-hero::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 60%;
    background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20400%20200'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient%20id='gG'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0%25'%20stop-color='rgba(16,185,129,0.18)'/%3E%3Cstop%20offset='100%25'%20stop-color='rgba(16,185,129,0)'/%3E%3C/linearGradient%3E%3ClinearGradient%20id='gB'%20x1='0'%20y1='0'%20x2='0'%20y2='1'%3E%3Cstop%20offset='0%25'%20stop-color='rgba(59,130,246,0.12)'/%3E%3Cstop%20offset='100%25'%20stop-color='rgba(59,130,246,0)'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath%20d='M0%20140%20L5%20138%20L10%20141%20L15%20136%20L20%20133%20L25%20135%20L30%20128%20L35%20125%20L40%20120%20L45%20122%20L50%20118%20L55%20124%20L60%20126%20L65%20128%20L70%20130%20L75%20127%20L80%20131%20L85%20129%20L90%20122%20L95%20115%20L100%20108%20L105%20103%20L110%2098%20L115%2095%20L120%2090%20L125%2093%20L130%2096%20L135%2099%20L140%2095%20L145%2098%20L150%20102%20L155%20100%20L160%2097%20L165%20101%20L170%20104%20L175%2099%20L180%2092%20L185%2085%20L190%2078%20L195%2072%20L200%2060%20L205%2063%20L210%2068%20L215%2072%20L220%2075%20L225%2078%20L230%2080%20L235%2076%20L240%2073%20L245%2078%20L250%2082%20L255%2079%20L260%2074%20L265%2068%20L270%2062%20L275%2055%20L280%2048%20L285%2040%20L290%2043%20L295%2047%20L300%2050%20L305%2053%20L310%2055%20L315%2051%20L320%2048%20L325%2052%20L330%2056%20L335%2050%20L340%2044%20L345%2038%20L350%2032%20L355%2028%20L360%2020%20L365%2024%20L370%2028%20L375%2032%20L380%2035%20L385%2030%20L390%2033%20L395%2036%20L400%2035%20L400%20200%20L0%20200%20Z'%20fill='url(%23gG)'/%3E%3Cpath%20d='M0%20140%20L5%20138%20L10%20141%20L15%20136%20L20%20133%20L25%20135%20L30%20128%20L35%20125%20L40%20120%20L45%20122%20L50%20118%20L55%20124%20L60%20126%20L65%20128%20L70%20130%20L75%20127%20L80%20131%20L85%20129%20L90%20122%20L95%20115%20L100%20108%20L105%20103%20L110%2098%20L115%2095%20L120%2090%20L125%2093%20L130%2096%20L135%2099%20L140%2095%20L145%2098%20L150%20102%20L155%20100%20L160%2097%20L165%20101%20L170%20104%20L175%2099%20L180%2092%20L185%2085%20L190%2078%20L195%2072%20L200%2060%20L205%2063%20L210%2068%20L215%2072%20L220%2075%20L225%2078%20L230%2080%20L235%2076%20L240%2073%20L245%2078%20L250%2082%20L255%2079%20L260%2074%20L265%2068%20L270%2062%20L275%2055%20L280%2048%20L285%2040%20L290%2043%20L295%2047%20L300%2050%20L305%2053%20L310%2055%20L315%2051%20L320%2048%20L325%2052%20L330%2056%20L335%2050%20L340%2044%20L345%2038%20L350%2032%20L355%2028%20L360%2020%20L365%2024%20L370%2028%20L375%2032%20L380%2035%20L385%2030%20L390%2033%20L395%2036%20L400%2035'%20stroke='rgba(16,185,129,0.45)'%20stroke-width='1.5'%20fill='none'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3Cpath%20d='M0%20160%20L5%20158%20L10%20162%20L15%20159%20L20%20155%20L25%20157%20L30%20153%20L35%20150%20L40%20148%20L45%20151%20L50%20149%20L55%20153%20L60%20155%20L65%20157%20L70%20156%20L75%20152%20L80%20155%20L85%20153%20L90%20148%20L95%20143%20L100%20138%20L105%20135%20L110%20131%20L115%20128%20L120%20130%20L125%20133%20L130%20136%20L135%20138%20L140%20135%20L145%20137%20L150%20140%20L155%20138%20L160%20135%20L165%20140%20L170%20142%20L175%20138%20L180%20132%20L185%20126%20L190%20120%20L195%20115%20L200%20110%20L205%20113%20L210%20116%20L215%20119%20L220%20122%20L225%20120%20L230%20118%20L235%20115%20L240%20120%20L245%20123%20L250%20118%20L255%20114%20L260%20110%20L265%20106%20L270%20102%20L275%2098%20L280%2095%20L285%2090%20L290%2093%20L295%2096%20L300%20100%20L305%20103%20L310%20101%20L315%2098%20L320%2095%20L325%20100%20L330%20103%20L335%2098%20L340%2093%20L345%2088%20L350%2083%20L355%2078%20L360%2075%20L365%2078%20L370%2082%20L375%2085%20L380%2088%20L385%2084%20L390%2086%20L395%2088%20L400%2085%20L400%20200%20L0%20200%20Z'%20fill='url(%23gB)'/%3E%3Cpath%20d='M0%20160%20L5%20158%20L10%20162%20L15%20159%20L20%20155%20L25%20157%20L30%20153%20L35%20150%20L40%20148%20L45%20151%20L50%20149%20L55%20153%20L60%20155%20L65%20157%20L70%20156%20L75%20152%20L80%20155%20L85%20153%20L90%20148%20L95%20143%20L100%20138%20L105%20135%20L110%20131%20L115%20128%20L120%20130%20L125%20133%20L130%20136%20L135%20138%20L140%20135%20L145%20137%20L150%20140%20L155%20138%20L160%20135%20L165%20140%20L170%20142%20L175%20138%20L180%20132%20L185%20126%20L190%20120%20L195%20115%20L200%20110%20L205%20113%20L210%20116%20L215%20119%20L220%20122%20L225%20120%20L230%20118%20L235%20115%20L240%20120%20L245%20123%20L250%20118%20L255%20114%20L260%20110%20L265%20106%20L270%20102%20L275%2098%20L280%2095%20L285%2090%20L290%2093%20L295%2096%20L300%20100%20L305%20103%20L310%20101%20L315%2098%20L320%2095%20L325%20100%20L330%20103%20L335%2098%20L340%2093%20L345%2088%20L350%2083%20L355%2078%20L360%2075%20L365%2078%20L370%2082%20L375%2085%20L380%2088%20L385%2084%20L390%2086%20L395%2088%20L400%2085'%20stroke='rgba(59,130,246,0.3)'%20stroke-width='1.5'%20fill='none'%20stroke-linejoin='round'%20stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center right;
    opacity: 0.9;
    pointer-events: none;
}
.welcome-hero-inner { position: relative; z-index: 1; max-width: 65%; }
.welcome-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--color-primary);
    background: rgba(16, 185, 129, 0.12);
    padding: 6px 12px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(16, 185, 129, 0.35);
    margin-bottom: 14px;
}
.welcome-hero-kicker::before {
    content: '';
    width: 6px; height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3);
    animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3); }
    50% { box-shadow: 0 0 0 7px rgba(16, 185, 129, 0); }
}
.welcome-hero h2 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}
.welcome-hero p {
    font-size: 14px;
    color: rgba(248, 250, 252, 0.78);
    margin: 0 0 18px;
    line-height: 1.55;
}
.welcome-hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.welcome-hero .btn-primary-emerald {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: var(--color-primary);
    color: #fff;
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.35);
}
.welcome-hero .btn-primary-emerald:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.45);
    text-decoration: none;
    color: #fff;
}
.welcome-hero .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--t-fast);
}
.welcome-hero .btn-ghost:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    text-decoration: none;
}
.welcome-hero-close {
    position: absolute;
    top: 12px; right: 14px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    width: 28px; height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--t-fast);
}
.welcome-hero-close:hover { background: rgba(255, 255, 255, 0.18); }
@media (max-width: 768px) {
    .welcome-hero { padding: 22px 20px; }
    .welcome-hero-inner { max-width: 100%; }
    .welcome-hero::after { opacity: 0.3; }
    .welcome-hero h2 { font-size: 19px; }
}

/* --- Empty states --- */
.empty-state {
    background: var(--color-bg-card);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-lg);
    padding: 40px 24px;
    text-align: center;
    margin-top: 14px;
}
.empty-state-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 22px;
}
.empty-state h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--color-text-primary);
}
.empty-state p {
    color: var(--color-text-secondary);
    font-size: 13px;
    margin: 0 0 18px;
    line-height: 1.55;
}

/* --- Sidebar retention cards (who-to-follow, leaderboard, hot) --- */
.retention-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: 14px;
    overflow: hidden;
}
.retention-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px 10px;
    border-bottom: 1px solid var(--color-border);
}
.retention-card-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--color-text-primary);
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.retention-card-title i {
    color: var(--color-primary);
    font-size: 13px;
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary-soft);
    border-radius: var(--radius-sm);
}
.retention-card-cta {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-secondary);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.retention-card-cta:hover { color: var(--color-secondary-hover); text-decoration: none; }
.retention-card-body { padding: 6px 0; }

/* --- User row (who-to-follow, leaderboard) --- */
.user-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    transition: background var(--t-fast);
}
.user-row:hover { background: var(--color-bg-muted); }
.user-row-avatar {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    background: var(--color-bg-muted);
    border-radius: 50%;
    position: relative;
}
.user-row-avatar > a {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}
.user-row-avatar img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.user-row-rank {
    position: absolute;
    left: -4px; top: -4px;
    width: 18px; height: 18px;
    background: var(--color-accent-gold);
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.user-row-rank.rank-1 { background: #f59e0b; }
.user-row-rank.rank-2 { background: #94a3b8; }
.user-row-rank.rank-3 { background: #b45309; }

/* --- Post header right-side action group --- */
.post-hdr-actions {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    float: right;
    margin-top: -4px;
    padding: 2px;
    border-radius: var(--radius-full);
    background: transparent;
}
.post-hdr-action,
.post-hdr-actions .dropdown > .post_options {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    color: #94a3b8;
    transition: background-color .15s ease, color .15s ease;
}
.post-hdr-action:hover,
.post-hdr-actions .dropdown > .post_options:hover {
    background-color: rgba(148, 163, 184, 0.15);
    text-decoration: none;
    color: #475569;
}
.post-hdr-action .lucide-icon { width: 17px; height: 17px; }
.post-hdr-action .fa { font-size: 15px; line-height: 1; }
.post-hdr-follow { cursor: pointer; }

.post-hdr-actions .dropdown { display: inline-flex; }
.post-hdr-actions .dropdown > .post_options {
    font-size: 18px;
    letter-spacing: 1px;
    float: none;
}
.post-hdr-actions .dropdown > .post_options > span {
    position: static;
    top: 0;
    margin: 0;
    line-height: 1;
    display: inline-block;
}
/* Hide Bootstrap's dropdown caret on post options trigger */
.post_options.dropdown-toggle::after {
    display: none !important;
}
.user-row-main { flex: 1; min-width: 0; }
.user-row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.user-row-name:hover { color: var(--color-primary); text-decoration: none; }
.user-row-meta {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-top: 2px;
}
.user-row-meta .verify-badge { color: var(--color-secondary); }
.follow-btn {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    background: transparent;
    color: var(--color-primary);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all var(--t-fast);
    text-decoration: none;
}
.follow-btn:hover {
    background: var(--color-primary);
    color: #fff;
    text-decoration: none;
}
.follow-btn.is-following {
    background: var(--color-primary-soft);
    border-color: transparent;
}

/* --- Hashtag cloud (modern refresh) --- */
.hashtag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px 4px 4px;
    list-style: none;
    margin: 0;
}
.hashtag-cloud li { display: inline-flex; }
.hashtag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all var(--t-fast);
}
.hashtag-chip::before {
    content: '#';
    color: var(--color-text-tertiary);
    font-weight: 700;
}
.hashtag-chip:hover {
    border-color: var(--color-secondary);
    background: var(--color-secondary-soft);
    color: var(--color-secondary-hover);
    transform: translateY(-1px);
    text-decoration: none;
}
.hashtag-chip.more {
    color: var(--color-primary);
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    cursor: pointer;
}

/* --- Navbar refinements --- */
.navbar nav ul.lft li,
.navbar nav ul.lft li a { vertical-align: middle; }
.navbar .nav-home-link {
    color: var(--color-primary) !important;
    font-weight: 600;
}
.navbar .nav-home-link i,
.navbar .nav-home-link .fa { color: var(--color-primary); }
.navbar-create-post-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--color-primary);
    color: #fff !important;
    border-radius: var(--radius-full);
    font-size: 13px;
    font-weight: 600;
    margin: 0 12px 0 0;
    border: none;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
    transition: all var(--t-fast);
    cursor: pointer;
}
.navbar-create-post-btn:hover {
    background: var(--color-primary-hover);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    text-decoration: none;
    color: #fff !important;
}
@media (max-width: 768px) {
    .navbar-create-post-btn span.cta-label { display: none; }
    .navbar-create-post-btn { padding: 8px 12px; margin: 0 8px 0 0; }
}

/* --- Left sidebar tab labels --- */
.left-sidebar-tabs.with-labels a {
    flex-direction: column;
    gap: 4px;
    padding: 10px 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.left-sidebar-tabs.with-labels a i { font-size: 15px; }
.left-sidebar-tabs.with-labels a span { font-size: 10px; line-height: 1; }

/* --- Analysis post type form (educational, no signals) --- */
.analysis-fields {
    display: none;
    padding: 14px 16px;
    background: linear-gradient(180deg, rgba(16, 185, 129, 0.04), rgba(16, 185, 129, 0));
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}
.analysis-fields.active { display: block; }
.analysis-fields-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-primary);
    margin-bottom: 4px;
}
.analysis-fields-sub {
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin-bottom: 12px;
    line-height: 1.4;
}
.analysis-fields-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}
.analysis-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.analysis-field label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text-secondary);
}
.analysis-field input,
.analysis-field select {
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--color-text-primary);
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.analysis-field input:focus,
.analysis-field select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
.bias-toggle {
    display: flex;
    gap: 6px;
}
.bias-toggle input[type='radio'] { display: none; }
.bias-toggle label {
    flex: 1;
    text-align: center;
    padding: 9px 6px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    transition: all var(--t-fast);
}
.bias-toggle input[value='bull']:checked + label {
    background: rgba(16, 185, 129, 0.1);
    border-color: var(--color-bull);
    color: var(--color-bull);
}
.bias-toggle input[value='bear']:checked + label {
    background: rgba(239, 68, 68, 0.08);
    border-color: var(--color-bear);
    color: var(--color-bear);
}
.bias-toggle input[value='neutral']:checked + label {
    background: var(--color-bg-muted);
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}
.analysis-disclaimer {
    margin-top: 12px;
    padding: 10px 12px;
    background: #fefce8;
    border: 1px solid #fde047;
    border-radius: var(--radius-sm);
    font-size: 11px;
    color: #854d0e;
    line-height: 1.4;
}
.analysis-disclaimer i { color: #ca8a04; margin-right: 4px; }

/* --- Post category indicator (Variant 7: chip + left accent-bar) --- */
:root {
    --cat-1-color: #10b981; /* Analysis - emerald */
    --cat-2-color: #f59e0b; /* Results  - gold    */
    --cat-3-color: #3b82f6; /* Education - blue   */
    --cat-4-color: #ef4444; /* News      - red    */
    --cat-5-color: #64748b; /* Others    - grey   */
    --cat-6-color: #0046ae; /* Moldova   - navy   */

    --cat-1-soft: rgba(16, 185, 129, 0.10);
    --cat-2-soft: rgba(245, 158, 11, 0.10);
    --cat-3-soft: rgba(59, 130, 246, 0.10);
    --cat-4-soft: rgba(239, 68, 68, 0.10);
    --cat-5-soft: rgba(100, 116, 139, 0.10);
    --cat-6-soft: rgba(0, 70, 174, 0.10);
}

.post[data-cat] {
    position: relative;
    overflow: hidden;
}
.post[data-cat]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--color-border-strong);
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    pointer-events: none;
}
.post[data-cat='1']::before { background: var(--cat-1-color); }
.post[data-cat='2']::before { background: var(--cat-2-color); }
.post[data-cat='3']::before { background: var(--cat-3-color); }
.post[data-cat='4']::before { background: var(--cat-4-color); }
.post[data-cat='5']::before { background: var(--cat-5-color); }
.post[data-cat='6']::before { background: linear-gradient(180deg, var(--cat-6-color) 0%, #1e293b 100%); }

.post-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    margin: 4px 0 0 8px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: var(--radius-full);
    text-decoration: none;
    line-height: 1.5;
    border: 1px solid transparent;
    transition: transform var(--t-fast), filter var(--t-fast);
    vertical-align: middle;
    white-space: nowrap;
}
.post-category-chip i { font-size: 10px; opacity: 0.95; }
.post-category-chip:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    text-decoration: none;
}
.post-category-chip.cat-1 { background: var(--cat-1-soft); color: var(--cat-1-color); border-color: rgba(16, 185, 129, 0.25); }
.post-category-chip.cat-2 { background: var(--cat-2-soft); color: #b45309;             border-color: rgba(245, 158, 11, 0.30); }
.post-category-chip.cat-3 { background: var(--cat-3-soft); color: var(--cat-3-color); border-color: rgba(59, 130, 246, 0.25); }
.post-category-chip.cat-4 { background: var(--cat-4-soft); color: var(--cat-4-color); border-color: rgba(239, 68, 68, 0.25); }
.post-category-chip.cat-5 { background: var(--cat-5-soft); color: var(--cat-5-color); border-color: rgba(100, 116, 139, 0.25); }
.post-category-chip.cat-6 {
    background: linear-gradient(135deg, var(--cat-6-color) 0%, #1e293b 100%);
    color: #fff;
    border-color: transparent;
}
.post-category-chip.cat-6 i { color: #fff; }
.post-category-chip .post-cat-flag {
    width: 12px;
    height: 9px;
    object-fit: cover;
    border-radius: 1px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}

/* --- Analysis badges (educational, no signals) --- */
.analysis-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px 0 12px;
    margin: 0;
}
.analysis-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: var(--radius-full);
    background: var(--color-bg-muted);
    color: var(--color-text-secondary);
    border: 1px solid var(--color-border);
    line-height: 1.4;
}
.analysis-badge i { font-size: 10px; opacity: 0.8; }
.analysis-badge.instrument {
    background: #0f172a;
    color: #fff;
    border-color: #0f172a;
    font-family: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;
    letter-spacing: 0.6px;
}
.analysis-badge.instrument i { color: var(--color-primary); opacity: 1; }
.analysis-badge.timeframe {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
    border-color: rgba(59, 130, 246, 0.2);
}
.analysis-badge.method {
    background: rgba(100, 116, 139, 0.08);
    color: var(--color-text-primary);
}
.analysis-badge.bias-bull {
    background: rgba(16, 185, 129, 0.1);
    color: var(--color-bull);
    border-color: rgba(16, 185, 129, 0.3);
}
.analysis-badge.bias-bear {
    background: rgba(239, 68, 68, 0.08);
    color: var(--color-bear);
    border-color: rgba(239, 68, 68, 0.3);
}
.analysis-badge.bias-neutral {
    background: rgba(100, 116, 139, 0.1);
    color: var(--color-text-primary);
    border-color: var(--color-border-strong);
}
.analysis-disclaimer-footer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 7px 12px;
    border-top: 1px dashed var(--color-border);
    font-size: 10px;
    font-style: italic;
    color: var(--color-text-tertiary);
    line-height: 1.4;
    cursor: help;
}
.analysis-disclaimer-footer i { color: var(--color-warning); font-size: 11px; }

/* --- Modern comments UI (clean div-based) --- */
.comment {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    margin: 0 0 10px;
}
.comment.is-reply { border-left: 3px solid var(--color-primary); }

/* Parent reply quote (only inside .comment.is-reply) */
.comment .reply-quote {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 12px;
    margin: 0 0 10px;
    background: var(--color-bg-muted);
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: inherit;
    transition: background var(--t-fast);
}
.comment .reply-quote:hover {
    background: rgba(16, 185, 129, 0.07);
    text-decoration: none;
}
.reply-quote-avatar {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-card);
    box-shadow: 0 0 0 1px var(--color-border);
}
.reply-quote-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.reply-quote-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.reply-quote-author {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-primary);
}
.reply-quote-text {
    font-size: 12px;
    color: var(--color-text-tertiary);
    line-height: 1.35;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.reply-quote-img {
    margin-top: 4px;
    max-width: 80px;
    max-height: 60px;
    border-radius: var(--radius-sm);
}

/* Comment row: avatar + main content */
.comment-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
}
.comment-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--color-border);
    background: var(--color-bg-muted);
}
.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.comment-main {
    flex: 1;
    min-width: 0;
}

/* Header line: author · time · edited · ... options */
.comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 12px;
    line-height: 1.4;
}
.comment-author {
    font-weight: 600;
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: 13px;
}
.comment-author:hover {
    color: var(--color-primary);
    text-decoration: none;
}
.comment-time {
    color: var(--color-text-tertiary);
    font-size: 11px;
}
.comment-edited {
    color: var(--color-text-tertiary);
    font-size: 11px;
    font-style: italic;
}
.comment-edited:empty { display: none; }
.comment-options {
    margin-left: auto;
}
.comment-options-toggle {
    color: var(--color-text-tertiary);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    font-size: 13px;
    transition: background var(--t-fast), color var(--t-fast);
}
.comment-options-toggle::after { display: none; }
.comment-options-toggle:hover {
    color: var(--color-text-primary);
    background: var(--color-bg-muted);
}

/* Bubble */
.comment-bubble {
    display: block;
    margin: 4px 0 0;
    word-break: break-word;
}
.comment-bubble .spanComment {
    display: inline-block;
    background: var(--color-bg-muted);
    color: var(--color-text-primary);
    padding: 8px 12px;
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: none;
    max-width: 100%;
}
.comment-bubble .comment-img {
    display: block;
    max-width: 100%;
    max-height: 280px;
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: 6px;
}

/* Action row — single horizontal flex, never wraps */
.comment-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 6px;
    flex-wrap: nowrap;
}
.comment-action-group {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    flex-wrap: nowrap;
}
.comment-action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--color-text-tertiary);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    cursor: pointer;
    transition: color var(--t-fast);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
}
.comment-action i { font-size: 12px; }
.comment-action:hover { color: var(--color-primary); text-decoration: none; }
.comment-action.liked { color: var(--color-secondary); }
.comment-action.liked:hover { color: var(--color-secondary-hover); }

.comment-meta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-tertiary);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}
.comment-like-count:empty { display: none; }
.comment-like-count i { color: var(--color-secondary); margin-right: 2px; }

/* Edit box */
.comment-edit-box {
    margin-top: 6px;
}
.commentContent_EditBox {
    width: 100%;
    min-height: 60px;
    padding: 10px 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-card);
    color: var(--color-text-primary);
    font-size: 13px;
    resize: vertical;
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.commentContent_EditBox:focus {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}
.comment-edit-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

/* Reply box */
[class^="replyBox_"].comment-reply-box {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-top: 8px;
    position: relative;
}
.comment-reply-box .gcomment_field1 {
    background: transparent;
    border: none;
    width: 100%;
    color: var(--color-text-primary);
    font-size: 13px;
    outline: none;
    resize: vertical;
    min-height: 40px;
    padding: 0;
}
.comment-reply-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    font-size: 13px;
}
.comment-reply-bar .emoticonsBtn,
.comment-reply-bar .comment_image {
    cursor: pointer;
    color: var(--color-text-tertiary);
    transition: color var(--t-fast);
    font-size: 15px;
}
.comment-reply-bar .emoticonsBtn:hover,
.comment-reply-bar .comment_image:hover { color: var(--color-primary); }
.comment-reply-hint {
    margin-left: auto;
    color: var(--color-text-tertiary);
    font-size: 10px;
    font-style: italic;
}

/* Top-level new comment input (used outside .comment-reply-box too) */
.gcomment_field1 {
    background: var(--color-bg-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    font-size: 13px;
    color: var(--color-text-primary);
    transition: border-color var(--t-fast), background var(--t-fast);
}
.gcomment_field1:focus {
    background: var(--color-bg-card);
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

.comment-loading:empty { display: none; }

/* --- Modernized notifications dropdown --- */
.navbar_fetchBox#notifications_box,
.navbar_fetchBox#search_r {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg) !important;
    box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
    overflow: hidden;
    padding: 0 !important;
}
.navbar_fetchBox#notifications_box > div:first-child {
    padding: 14px 18px !important;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--color-text-primary) !important;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border) !important;
}
#notifications_data { padding: 4px 0; }
#notifications_noMore {
    padding: 30px 18px !important;
    color: var(--color-text-tertiary) !important;
    font-size: 13px !important;
    text-align: center;
}

.notify-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--color-text-primary);
    transition: background var(--t-fast);
    border-bottom: 1px solid transparent;
}
.notify-item:hover {
    background: var(--color-bg-muted);
    text-decoration: none;
    color: var(--color-text-primary);
}
.notify-item + .notify-item { border-top: 1px solid var(--color-border); }
.notify-avatar {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--color-bg-muted);
}
.notify-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.notify-content { flex: 1; min-width: 0; }
.notify-text {
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 4px;
    color: var(--color-text-primary);
}
.notify-text strong {
    font-weight: 600;
    color: var(--color-text-primary);
}
.notify-excerpt {
    color: var(--color-text-tertiary);
    font-style: italic;
    word-break: break-word;
}
.notify-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--color-text-tertiary);
    margin: 0;
}
.notify-meta i { font-size: 11px; }

/* "See all" footer of the notifications dropdown (#sqresultItem at the bottom) */
#notifications_box > #sqresultItem {
    background: var(--color-bg-muted) !important;
    border-top: 1px solid var(--color-border) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
#notifications_box > #sqresultItem a {
    display: block;
    padding: 11px;
    color: var(--color-secondary);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
#notifications_box > #sqresultItem a:hover { color: var(--color-secondary-hover); }

/* Notification count badge near the bell icon */
#notificationsCount:not(:empty),
#messagesCount:not(:empty) {
    background: var(--color-bear);
    color: #fff;
    border-radius: var(--radius-full);
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    box-shadow: 0 0 0 2px var(--color-bg-navbar);
    margin-left: -2px !important;
}

/* --- Modernized profile page --- */
.profile-stats-bar {
    background: var(--color-bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
    margin: 0 0 14px;
    padding: 0;
}

/* Avatar in the left sidebar — fix legacy invalid top:-125 and let it sit
   half above its card, overlapping into the cover photo */
.profile_cneterCol .user_info .profile_picture_img {
    position: absolute !important;
    top: -90px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%);
    margin: 0 !important;
    width: 140px !important;
    height: 140px !important;
    border: 4px solid #fff !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.18) !important;
    background: #fff;
    z-index: 2;
}
/* Push the rest of the first sidebar card down so it doesn't sit under the
   avatar — only the FIRST .user_info card needs this */
.profile_cneterCol .user_info:first-child {
    margin-top: 60px !important;
    padding-top: 65px !important;
    text-align: center;
}
.profile_cneterCol .user_info:first-child .profile_picture h3 {
    margin-top: 0 !important;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-primary);
}
@media (max-width: 768px) {
    .profile_cneterCol .user_info .profile_picture_img {
        position: relative !important;
        top: 0 !important;
        margin: 0 auto 12px !important;
        transform: none;
    }
    .profile_cneterCol .user_info:first-child {
        margin-top: 12px !important;
        padding-top: 18px !important;
    }
}
.profile-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
}
.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 18px 12px;
    color: var(--color-text-primary);
    text-decoration: none;
    border-right: 1px solid var(--color-border);
    transition: background var(--t-fast), transform var(--t-fast);
    position: relative;
}
.profile-stat:last-child { border-right: none; }
.profile-stat:hover {
    background: var(--color-bg-muted);
    text-decoration: none;
    color: var(--color-text-primary);
}
.profile-stat::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    height: 3px;
    width: 0;
    background: var(--color-primary);
    border-radius: 2px 2px 0 0;
    transition: width var(--t-fast), left var(--t-fast);
}
.profile-stat:hover::after { width: 40px; left: calc(50% - 20px); }
.profile-stat-icon {
    font-size: 13px;
    color: var(--color-text-tertiary);
    margin-bottom: 4px;
}
.profile-stat:hover .profile-stat-icon { color: var(--color-primary); }
.profile-stat-num {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.1;
    color: var(--color-text-primary);
}
.profile-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--color-text-secondary);
}
@media (max-width: 600px) {
    .profile-stat { padding: 14px 8px; }
    .profile-stat-num { font-size: 19px; }
    .profile-stat-label { font-size: 10px; }
}

/* Modernize legacy .user_info side cards */
.profile_cneterCol .user_info {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: 18px 18px 16px;
    margin: 0 0 14px;
    overflow: visible;
}
.profile_cneterCol .user_info > p {
    color: var(--color-text-primary);
    font-size: 12px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 2px;
}
.profile_cneterCol .user_info hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: 8px 0 12px !important;
}
.profile_cneterCol .user_info table tr td {
    color: var(--color-text-secondary);
}
.profile_cneterCol .user_info_tdi {
    color: var(--color-text-tertiary);
    width: 22px;
}

/* Modernize legacy .user_follow_box rows (followers/following lists) */
.user_follow_box {
    width: 100%;
    background: var(--color-bg-card);
    border-bottom: 1px solid var(--color-border);
    transition: background var(--t-fast);
}
.user_follow_box:hover { background: var(--color-bg-muted); }
.user_follow_box tr td {
    padding: 12px 14px;
    vertical-align: middle;
}
.user_follow_box tr td div img {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px var(--color-border);
}
.user_follow_box_a {
    color: var(--color-text-primary) !important;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
}
.user_follow_box_a:hover {
    color: var(--color-primary) !important;
    text-decoration: none;
}
.user_follow_box_a p { margin: 0; }

/* --- Moldova tag pill --- */
.md-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    background: linear-gradient(135deg, #0046ae 0%, #ffd500 50%, #cc092f 100%);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: var(--radius-full);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* =================================================================
   END MODERN COMPONENTS
   ================================================================= */

@viewport {
  width: device-width ;
  zoom: 1.0 ;
}
*{
    box-sizing: border-box;
}
html, body {
    width:100%;
    height:100%;
    margin:0px;
    padding:0px;
    /* overflow-x: hidden; */
    overflow: auto;
    overflow: initial;

}

body{
    background: var(--color-bg-page);
}

.alertRed{
    color: red;
    margin: 0;
    background: #fff;
    padding: 8px 15px;
    margin-top: 10px;
    border-radius: 2px;
    font-size: 13px;
}
.alertGreen{
    color: #3ec381;
    margin: 0;
    background: #fff;
    padding: 8px 15px;
    margin-top: 10px;
    border-radius: 2px;
    font-size: 13px;
}
.alertBlue{
    color: #2196f3;
    margin: 0;
    background: rgba(33, 150, 243, 0.18);
    padding: 8px 15px;
    margin-top: 10px;
    border-radius: 2px;
    font-size: 13px;
}
.alertYellow{
    color: #ffa700;
    margin: 0;
    background: rgba(255, 155, 0, 0.18);
    padding: 8px 15px;
    margin-top: 10px;
    border-radius: 2px;
    font-size: 13px;
}
.login_signup_bodyMain{
    background: url('../imgs/main.jpg') no-repeat center center;
    background-size: cover;
}
.login_signup_body{
    background: #E9EBEE;
}
.login_signup_main{
    display: flex;
}
.login_signup_sec1{
    width: 100%;
    padding: 5% 3%;
    color: #fff;
    text-shadow: 0px 0px 8px rgba(0, 0, 0, 0.49);
}
.login_signup_sec1 span{
    margin: 5px;
    font-size: 30px;
    width: 35px;
}
.login_signup_sec2{
    width: 100%;
    padding: 5% 3%;
}

.login_signup_navbar{
    padding: 15px;
    background: #111;
    color:var(--color-primary);
    box-shadow: 0px 0px 21px rgba(0, 0, 0, 0.27);
}
.login_signup_navbarLinks{
    color: var(--color-primary);
    text-decoration: none;
    font-size: 16px;
    padding: 15px;
    border-bottom: 2px solid transparent;
    transition: border-bottom 0.3s;
}
.login_signup_navbarLinks:hover,.login_signup_navbarLinks:focus{
    color: #7b7b7b;
    text-decoration: none;
    border-bottom: 2px solid #1376d4;
}
.login_signup_btn1{
    background: transparent;
    font-size: 16px;
    padding: 5px 15px;
    color: var(--color-primary);
    text-decoration: none;
    border:2px solid var(--color-primary);
    border-radius: 4px;
    border-color: var(--color-primary);
}
.login_signup_btn1:hover,.login_signup_btn1:focus{
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-card-hover);
}
.login_signup_btn2{
    background: linear-gradient(320deg,#8910d6,#b52d94);
    padding: 8px 32px;
    color: #fff;
    text-decoration: none;
    outline: none;
    border:none;
    border-radius: 3px;
    box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.0);
    transition: box-shadow 0.3s;
}
.login_signup_btn2:hover,.login_signup_btn2:focus{
    color: #fff;
    text-decoration: none;
    box-shadow: var(--shadow-card-hover);
}
.login_signup_box{
    background: #fff;
    border-radius: 3px;
    max-width: 800px;
    padding: 50px;
    margin: auto;
    margin-top: 2%;
}
.login_signup_box2{
    
    border-radius: 3px;
    max-width: 320px;
    padding: 50px 70px;
    margin: auto;
    margin-top: 2%;
    color: var(--color-primary);
}
.login_signup_box form,.login_signup_box2 form{
    margin: 0;
}
.login_signup_box h4,.login_signup_box2 h4{
    color: #757575;
    font-weight: bold;
    margin: 0;
    margin-bottom: 10px;
    font-size: 16px;
}
.login_signup_textfield{
    width: 100%;
    border: none;
    border-radius: 3px;
    background: rgb(248, 248, 248);
    padding: 8px;
    outline: none;
}
#g_btn{
    background: #4a708e;
    padding: 8px;
    border: none;
    border-radius: 3px;
    color: white;
    width: 100px;
    margin: 8px;
}
.verifyUser{
    cursor: pointer;
    background: white;
    border-radius: 100%;
    padding: 1px 2px;
    margin: 0px 5px;
}
#g_btn:hover{
    background: #3e607b;
}
.post{
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    margin: 16px 0;
    border: 1px solid var(--color-border);
    transition: box-shadow 0.2s ease;
}
.post:hover{
    box-shadow: var(--shadow-card-hover);
}
.postTitle{
    margin: 5px 10px;
    padding: 0px 8px;
    border-radius: 2px;
    color: rgb(80, 94, 113);
    word-break: break-word;
    font-size: 15px;
}
.post_textbox{
    width: 100%;
    height: 95px;
    min-height: 95px;
    resize: none;
    background: #ffffff;
    border: none;
    outline: none;
    font-size: 14.4px;
    padding: 10px;
}
.username_OF_post{
    margin: 12px;
}
.username_OF_postImg{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
}.username_OF_postImg img{
    width: auto;
    height: 100%;
}
.username_OF_postLink{
    color:#000;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}
.username_OF_postLink:hover,.username_OF_postLink:focus{
    color:#000;
    text-decoration: none;
}

.username_OF_postTime{
    color: #999;
    font-size: 11px;
    text-decoration: none;
}
.username_OF_postTime:hover,.username_OF_postTime:focus{
    color: #999;
    text-decoration: underline;
}
.post_content{
    text-align: left;
    margin: 10px;
}
.post_content p{
    overflow: hidden;
    word-break: break-word;
}
.postContent_EditBox, .commentContent_EditBox{
    padding: 10px;
    width:100%;
    margin: 5px 0px;
    outline: none;
    border: 2px solid #ececec;
    border-radius: 2px;
    transition: border-bottom 0.3s, box-shadow 0.3s;
    height: auto;
    resize: none;
    margin-bottom: 10px;
    min-height: 100px;
}
.postContent_EditBox:focus,.commentContent_EditBox:focus{
    border-bottom: 2px solid #2196F3;
}
.post_content img{
    width: auto;
    height: auto;
    width: 100%;
    /* max-height: 400px; */
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
.post_options{
    float: right;
    color: gray;
    text-decoration: none;
}
.post_options:hover,.post_options:focus{
    text-decoration: none;
    color: gray;
}
.post_options span{
    margin: 0px 5px;
    position: relative;
    top: -10px;
    font-size: 17px;
    color: rgba(0, 0, 0, 0.45);
}
.post_like_comment_share{
    margin: 10px;
    text-align: center;

}
.post_like_comment_shareA{
    padding: 0px 10px;
    color: #818181;
    font-size: 18px;
    color:rgba(96, 125, 139, 0.54);
}
.post_like_comment_shareA:hover{
    color:rgba(96, 125, 139, 0.54);
    text-decoration: underline;
}
.post_like_comment_shareA:focus{
    color:rgba(96, 125, 139, 0.54);
}
.post_like_comment_shareA:visited{
    color:rgba(96, 125, 139, 0.54);
}
.post_like_comment_shareA span{
    margin-right: 5px;
}
.postEditBox{
    background: rgba(0, 0, 0, 0.02);
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.19);
}
.comment_box{
    padding: 10px;
    margin: 0;
    background: rgba(226, 230, 238, 0.49);
    border-radius: var(--radius-md);
}
.comment_box p{
    color: gray;
    font-size: 14px;
    border-bottom: 1px solid rgb(213, 213, 213);
}
.user_comment{

}
.user_comment p {
    font-size: 14px;
    color: rgb(99, 99, 99);
    border: none;
    word-break: break-all;
    margin: 0;
    padding: 3px 0px;
}
.spanComment{
    background: white;
    padding: 6px 8px;
    border-radius: var(--radius-md);
    margin-top:4px;
    box-shadow: var(--shadow-card);
    display: -webkit-inline-box;
    display: inline-box;
}
.comment_details{
    padding: 5px 5px 0px 5px;
    margin: 10px 5px 5px 5px;
    border-top: 1px solid #eaeaea;
    text-align: right;
    color: #afafaf;
    font-size: 13px;
}
 .commentOption{
    color: #676767;
    transition: color 0.3s;
    font-size: 13px;
 }
 .commentOption:hover,.commentOption:focus{
    color: rgba(0, 0, 0, 0.54);
 }
.user_comment_img{
    width: 42px;
    height: 42px;
    border-radius: 100%;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.1);
    position: absolute;
    top: -5px;
}
.user_comment_img img{
    width: 42px;
    height: 100%;
}
.comment_field{
    background: transparent;
    border: none;
    width: 100%;
    min-height: 40px;
    resize: none;
    padding: 10px;
    outline: none;
}
.comment_time{
    color: #808080;
    font-size: 11px;
}
.profile_sec1_sec2{
    
}
.profile_cneterCol{
    text-align: left;
}
.profile_cneterCol_2{
    text-align: left;
    /* width: 570px; */
}
.centerCol_2{
    /* width: 570px; */
}
.user_info{
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    margin: 16px 0;
    padding: 15px;
    box-shadow: var(--shadow-card);
    border: 1px solid var(--color-border);
}
.profile_cover{
    background: #ced1d8;
    margin: 0px;
    padding: 0px!important;
    /*width: 870px;
    height: 350px; */
    margin-top: 50px;
    margin-bottom: 0;
    border: 1px solid #f9f9f9;
    position:relative; 
}
.profile_coverActions{
    position: absolute;
    margin: 15px;
}
.profile_picture{
text-align: center;
}
.profile_picture_img{
    width: 160px;
    height: 160px;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.34);
    border: 2px solid #ffffff;
    position: absolute;
    left: 0;
    right: 0;
    top: -125;
    margin: auto;
    background: #fff;
}
@media (max-width: 768px) { .profile_picture_img{top: 0px; position:relative;} }

.profile_picture_img img{
    height: 100%;
}
.profile_picture h3{
    text-align: center;
    color: gray;
}
.user_info{
    overflow: hidden;
}
.user_info p{
    color: gray;
    overflow: hidden;
}
.user_info tr{
    color: gray;
    overflow: hidden;
}
.user_info tr td{
    padding: 3px 2px;
    font-size: 13px;
}
.user_info_tdi{
    padding: 3px 2px;
    font-size: 13px;
    text-align: center;
}
.redAlert_notify_msgs,.redAlert_notify_mssgs{
    color: #ff2a2a;
    padding: 1px 5px;
    border-radius: 15px;
    font-size: 13px;
    background: #fff;
    font-weight:bold;
}
.navbar_search{
    padding: 5px 10px;
    outline: none;
    color: #fff;
    margin: 10px;
    max-width: 155px;
    border-radius: 100px;
    border: none;
    background: #59687c;
    font-size: 14px;
}
/* =============== search bar placeholder color=================*/
.navbar_search::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: #fff;
}
.navbar_search::-moz-placeholder { /* Firefox 19+ */
  color: #fff;
}
.navbar_search:-ms-input-placeholder { /* IE 10+ */
  color: #fff;
}
.navbar_search:-moz-placeholder { /* Firefox 18- */
  color: #fff;
}
/* ============================================================*/
.main_container{
    /*margin: 15px; */
    margin-top: 50px;
}
.centerCol{
    width: 250px;
}
.homeLinks{
    margin: 0px;
    background: var(--color-bg-card);
    border-radius: var(--radius-md);
    width: auto;
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
}
.homeLinks p{
    color: rgba(0, 0, 0, 0.7);
    margin: 0;
    padding: 5px 10px;

}
.homeLinks a p:hover{
    background: rgba(241, 241, 241, 0.54);
}
.homelinksP_borderL:hover{
    border-left: 2px solid var(--color-secondary);
}
.homelinksP_borderL{
    border-left: 2px solid transparent;
}
.homelinksP_borderR:hover{
    border-right: 2px solid #008aff;
}
.homelinksP_borderR{
    border-right: 2px solid transparent;
}
.homeLinks a p span{
    margin: 0px 5px;
    background: #e9ebee;
    padding: 1px 6px;
    border-radius: 2px;
    color: #808080;
    box-shadow: inset 1px 1px 8px rgba(0, 0, 0, 0.1);
}
.homeLinks a{
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
}
.homeLinks a:hover,.homeLinks a:focus{
    color: rgba(0, 0, 0, 0.7);
    text-decoration: none;
}
.homeLinks a p img{
    width: 22px;
    height: 22px;
    margin: 0px 5px;
}
.homeLinks_title{
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    color: black !important;
    padding: 5px !important;
}
.userinfo_homeLinks{
    width: 100px;
    height: 100px;
    overflow: hidden;
    border-radius: 100%;
    margin: auto;
    margin-top: 10px;
}
.userinfo_homeLinks img{
    width: auto;
    height: 100%;
}
ul.tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    height: auto;
}
ul.tab li {
    cursor: pointer;
}
.tablinksActive{
    background: #f3f3f3;
    font-weight: bold;
    color: rgb(71, 131, 179) !important;
}
.tablinks{
    margin: 0;
    padding: 10px;
    color: rgba(0, 0, 0, 0.58);
    border-bottom: 1px solid rgb(236, 236, 236);
    font-size: 16px;
}
.tablinks span{
    margin: 0px 8px;
}
.tablinks:hover,.tablinks:focus{
    background: rgba(0, 0, 0, 0.03);
}
ul.tab li a{
    text-decoration: none;
}
.centerCol_3{
    background: white;
    border-radius: 2px;
    box-shadow: var(--shadow-card);
    margin: 10px 5px;
    width: 300px;
    border-radius: 3px;
}
.Sponsored_Home{

}
.Sponsored_Home p{
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin: 15px;
}
.Sponsored_HomeItem{
    cursor: pointer;
}
.Sponsored_HomeItem p{
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin: 0 15px;
    margin-bottom: 15px;
    padding: 5px 0;
    color: #000;
}
.Sponsored_HomeItemTitle{
    color: #167ac6;
}
.Sponsored_HomeItem a:hover,.Sponsored_HomeItem a:focus{
    color: #000;
    text-decoration: none;
}
.Sponsored_HomeItemImg{
    width: 100%;
    height: 160px;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.08);
}
.Sponsored_HomeItemImg img{
    width: auto;
    height: 100%;
}
.centerCol3Links{
    padding: 0 15px;
    color: #999;
}
ul.tab li a:hover,ul.tab li a:focus{
    text-decoration: none;   
}
.tabcontent {
    margin: 5px;
    background: white;
    border-radius: 3px;
    padding: 15px;
    box-shadow: var(--shadow-card);
    height: auto;
    width: 100%;
}
.settingSpanGrayFont{
    color: #afafaf;
}
#error_msg{
    background: #fff;
    width: 98%;
    padding: 10px;
    border-radius: 2px;
    border: 1px solid #ff564a;
    color: #ff564a;
    font-size: 16px;
    text-align: center;
    margin: 5px;
    border-bottom: 3px solid #ff564a;
}
#success_msg{
    background: #fff;
    width: 98%;
    padding: 10px;
    border-radius: 2px;
    border: 1px solid #32ab61;
    color: #32ab61;
    font-size: 16px;
    text-align: center;
    margin: 5px;
    border-bottom: 3px solid #32ab61;
}
.centerCol_3Home_stick{
    position: fixed;
    bottom: 70px;
}
#error_msg{
    cursor: pointer;
}
#success_msg{
    cursor: pointer;
}
.wpost_tab{
    list-style-type: none;
    margin: 0;
    overflow: hidden;
    height: auto;
    border-top: 1px solid #eee;
    padding: 5px;
}
.myPhotosProfile{

}
.myPhotosProfile p{
    margin: 0;
}
.myPhotosProfile p a{
    color: gray;
    text-decoration: none;
}
.myPhotosProfile p a:hover, .myPhotosProfile p a:focus{
    color: gray;
    text-decoration: underline;
}
.myPhotosProfile p img{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    margin: 5px;
}
.myPhotosProfile div div{
    width: 100%;
    height: 134px;
    overflow: hidden;
    display: inline-block;
    border-radius: 2px;
    background: rgb(255, 255, 255);
    margin: 3px;
}
.myPhotosProfile div a div{
    background: rgb(236, 238, 243);
    color: #ffffff;
    font-size: 30px;
    width: 134px;
    height: 134px;
    overflow: hidden;
    display: inline-block;
    text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.26);
}
.myPhotosProfile div div img{
    width: auto;
    height: 100%;
    border-radius: 3px;
}
.ProfileAllPostP{
    font-weight: bold;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.47);
    margin: 10px;
}
.wpost_tab li{
    cursor: pointer;
}
.wpost_tabcontent{
    display: none;
    padding: 5px;
}
.wpost_tablinks{
    margin: 5px 2px;
   /* padding: 8px 10px; */
    color: gray;
    border: none;
    background: rgba(249, 249, 249, 0.8);
    outline: none;
    border-radius: 20px;
}
.wpost_tablinks:hover, .wpost_tablinks:focus{
    background: #f3f3f3;
}
.change_user_photo{
    font-size: 21px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.change_user_photo button{
    color: #fff;
    background: transparent;
    border: 0;
    transition: color 0.3s;
    width: 100%;
}
.change_user_photo button:hover{
    color: #000000;
}.change_user_photo label{
    display: none;
    color: #fff;
    cursor: pointer;
    transition: color 0.3s;
    position: absolute;
    bottom: 45%;
    left: 0;
    right: 0;
 }
 .change_user_photo form{
    width: 100%;
    height: 100%;
    background: transparent;
    transition: background 0.3s;
 }
 .profile_ppicture:hover .change_user_photo form{
    background: rgba(0, 0, 0, 0.48);
 }
  .profile_ppicture:hover .change_user_photo form label{
    display: block;
 }
.change_user_photo label:hover{
    color: #999;
}

.user_photo_submit{
    background: transparent;
    border: none;
}
.user_follow_box{
    padding: 8px;
    width: 100%;
    display: block;
    background: #ffffff;
}
.user_follow_box tbody{
    width: 100%;
}
.user_follow_box:hover,.user_follow_box:focus{
    background: var(--color-bg-page);
}
.user_follow_box tr td div{
    width: 60px;
    height: 60px;
    border-radius: 100%;
    border: 1px solid rgba(0, 0, 0, 0.07);
    overflow: hidden;
}
.user_follow_box tr td div img{
    width: auto;
    height: 100%;
}
.user_follow_box_a{
    text-decoration: none;
    color: #000000;
}
.user_follow_box_a:hover,.user_follow_box_a:focus{
    text-decoration: none;
    color: #000000;
}
.user_follow_box tr td p{
    margin: 0px 25px;
}
.follow_btn{
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.21);
    color: rgba(72, 72, 72, 0.64);
    padding: 8px 15px;
    border-radius: var(--radius-md);
    transition: background 0.3s,border 0.3s;
    width: 100%;
    outline: none;
    text-decoration: none;
    transition: background 0.3s;
}
.follow_btn:hover,.follow_btn:focus{
    text-decoration: none;
    color: rgba(72, 72, 72, 0.64);
    background: #f6f6f6;
}
.unfollow_btn{
    background: #fff;
    border: 1px solid var(--color-secondary);
    padding: 8px 15px;
    color: var(--color-secondary);
    border-radius: var(--radius-md);
    transition: background 0.3s;
    width: 100%;
    outline: none;
    text-decoration: none;
    transition: background 0.3s;
}
.unfollow_btn:hover,.unfollow_btn:focus{
    text-decoration: none;
    color: var(--color-secondary);
    background: rgba(3, 169, 244, 0.07);
}
.profile_menu{
    background: white;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    margin: 0px;
    /*width: 870px;*/
    color: #302F2F;
    position: relative;
}
.profile_menu_fixed{
    position: fixed;
    top: 50px;
    left: 0px;
    right: 0px;
    width: 100%;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.51);
    animation: appear linear 0.3s;
    animation-iteration-count: 1;
    animation-fill-mode:forwards;
}
.profile_menu_user{
    display: none;
}
.profile_menu_user img{
    width: 38px;
    height: 38px;
    border-radius: 100%;
    margin: 0px 5px;
}
@keyframes appear{
    0% {
        top:0px;
    }
    100% {
        top:50px;
    }
}
.profileMenuItem{
    text-decoration: none;
    padding: 10px;
    margin-left: 0;
    color: #5f5f5f;
    background: #ffffff;
    transition: background 0.3s;
}
.loading_ytv{
    background: url("../imgs/loading_video.gif") center center no-repeat;
    border-radius: 5px;
}
.loading_ytv iframe{
    background: rgba(203, 203, 203, 0.13);
    border: 1px solid #DBDBDB;
    border-radius: 5px;
}
.profileMenuItem:hover,.profileMenuItem:focus{
    background: #fbfbfb;
    color: #302F2F;
}
.profileMenuItem:hover ,.profileMenuItem:focus{
text-decoration: none;
}
.settings{
     /* width: 80%;
    min-width: 800px; */
    text-align: left;
    /* display: inline-flex;
    min-height: 500px; */
}
.settings_textfield{
    width: 100%;
    background: rgba(255, 255, 255, 0.61);
    border: 1px solid #ececec;
    padding: 10px;
    outline: none;
    color: #777;
}
.settings_fieldTitle {
    margin: 5px 0px;
    color: #2196f3;
}
.settings_tf_mergeSpan{
    padding: 15px 5px;
    background: #ececec;
    padding-top: 14px;
}
.settings_fieldTitle span{
    background: rgb(255, 221, 221);
    color: #ff5b5b;
    font-size: 12px;
    padding: 2px 5px;
    margin: 0px 5px;
    border-radius: 1px;
}
.btn_blue{
    background: #3da5ff;
    padding: 8px 20px;
    margin: 5px 0px;
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
    border: none;
}
.btn_blue:hover , .btn_blue:focus{
    background: #3594e6;
    text-decoration: none;
    color: #fff;
}
.dropdown_div_accordion {
    background-color: #ffffff;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
}
.dropdown_div_accordion i{
    float: right;
}
.dropdown_div_accordion.active, .dropdown_div_accordion:hover {
    background-color: rgba(74, 112, 142, 0.08);
}

.dropdown_div_panel {
    padding: 0 18px;
    background-color: rgba(74, 112, 142, 0.04);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-bottom: 1px;
    box-shadow: inset 0px 0px 20px 10px #e5ebef;
}

.dropdown_div_panel.show {
    opacity: 1;
    max-height: 500px;
    padding: 15px;
}
.remaining-content span {
    display:none;
}
#userinfo_title{
    padding: 8px;
    background: rgb(85, 161, 210) none repeat scroll 0% 0%;
    border-radius: 3px;
    color: rgb(255, 255, 255);
    cursor: default;
    margin-bottom: 5px;
}
.acpmnav{
    background: #171717;
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    padding-top: 55px;
    overflow-y: auto;
    width: 200px;
    box-shadow: 0px 0px 10px #C3C3C3;
}
.acpmnav a p{
    margin: 0;
    padding: 8px;
    border-bottom: 1px solid #1e1e1e;
}
.acpmnav a p:hover{
    background: #0f0f0f;
}
.acpmnav a{
    color: #888888;
    text-decoration: none;
}
.acpmnav a:hover{
    color: #fff;
    text-decoration: none;
}
.acpmnav a:focus{
    color: #fff;
    text-decoration: none;
}
.acpmnav p{
    color: #808080;
}
.acpmnav p img{
    width: 72px;
    border: 3px solid #2c2c2c;
    border-radius: 100%;
}
.acpmnav_stage{
    background: white;
    margin: 15px;
    margin-top: 65px;
    width: auto;
    border: 1px solid #c5bebe;
    box-shadow: 0px 0px 10px #C3C3C3;
    padding: 15px;
    min-width: 500px;
    border-radius: 3px;
}
.statistics{
}
.show_status{
    color: #fff;
    padding: 15px;
    margin: 2px;
    text-align: center;
    border-radius: 3px;
    display: inline-block;
    width: 200px;
}
.show_status p{
    cursor: default;
    background: rgba(0, 0, 0, 0.1);
    padding: 5px;
    border-radius: 5px;
}
.show_status span{
    cursor: default;
}
.acp_vusers a{
    color: gray;
    text-decoration: none;
}
.acp_vusers a:hover{
    color: gray;
    text-decoration: none;}
.acp_vusers a:focus{
    color: gray;
    text-decoration: none;}
.acp_vusers p{
    padding: 5px;
}
.acp_vusers p:hover{
    background: rgb(248, 248, 248) none repeat scroll 0% 0%;
}
.acp_vusers img{
    width: 52px;
    height: 52px;
 }
.acp_userinfo img{
    width: 100px;
    height: 100px;
    border-radius: 100%;
    border: 1px solid rgb(177, 177, 177);
    margin: 10px;
}
.acp_userinfo td{
    padding: 5px;
    border: 1px solid #E3E3E3;
    color: #686767;
}
.acp_userinfo tr:hover{
    background: #f9f9f9;
}
.acp_userinfo_edit{
    border: 1px solid #E3E3E3;
    margin-top: 40px;
}
.acp_userinfo_edit h3{
    border-bottom: 1px solid #E3E3E3;
    padding: 20px;
    background: #55a1d2;
    margin: 0;
    color: #fff;
}
.default_flat_btn{
    background: #505e71;
    padding: 10px 20px;
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
    border: none;
    margin: auto;
}
.default_flat_btn:hover,.default_flat_btn:focus{
    background: #465569;
    color: #fff;
    text-decoration: none;
}
.blue_flat_btn{
    background: #3da5ff;
    padding: 10px 20px;
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
    border: none;
    margin: auto;
}
.blue_flat_btn:hover,.blue_flat_btn:focus{
    background: #2b8bde;
    color: #fff;
    text-decoration: none;
}
.green_flat_btn{
    background: #00c365;
    padding: 10px 20px;
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
    border: none;
    margin: auto;
}
.green_flat_btn:hover, .green_flat_btn:focus{
    background: #1cbf70;
    text-decoration: none;
    color: #fff;
}
.red_flat_btn{
    background: #f75151;
    padding: 10px 20px;
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
    border: none;
    margin: auto;
}
.red_flat_btn:hover , .red_flat_btn:focus{
    background: #ce3d3d;
    text-decoration: none;
    color: #fff;
}
.silver_flat_btn{
    background: rgb(233, 235, 238);
    padding: 10px;
    border-radius: 3px;
    color: gray;
    text-decoration: none;
    border: none;
    margin: auto;
}
.silver_flat_btn:hover, .silver_flat_btn:focus{
    background: rgb(216, 219, 224);
    color: gray;
    text-decoration: none;
}
.profile_my_wallet_box{
    padding: 8px 0px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.white_div{
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 8px #DDD;
    border: 1px solid #D9D9D9;
    margin: 15px;
    padding: 15px;
    width: auto;
    max-width: 800px;
}
.white_div p{
    color: gray;
    overflow: hidden;
}
.flat_solid_textfield{
    padding: 6px 10px;
    width: 100%;
    margin: 5px 0px;
    outline: none;
    border: 1px solid #ececec;
    border-radius: 2px;
    transition: border-bottom 0.3s, box-shadow 0.3s;
}
.flat_solid_textfield:focus{
    border-bottom: 1px solid #2196F3;
}
.edit_note_mywallet{
    text-align: center;
    background: rgba(0, 0, 0, 0.04);
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, 0.04);
}
.navbar_fetchBox{
    display: none;
    position: absolute;
    top: 53px;
    background: #ffffff;
    margin: 0px 8px;
    width: 435px;
    height: auto;
    max-height: 600px;
    max-width: 435px;
    border-radius: 2px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.37);
}

 @media (max-width:920px) { .navbar_fetchBox {width: 250px; margin:0px;}}

.fetchNotifications{
    background: #ffffff;
    margin: 0px 8px;
    width: auto;
    height: auto;
    border-radius: 2px;
    overflow: auto;
    max-width: 800px;
    min-width: 400px;
}
.navbar_fetchBox a,.fetchNotifications a{
    text-decoration: none;
}
.navbar_fetchBox a:hover,.navbar_fetchBox a:focus,.fetchNotifications a:hover,.fetchNotifications a:focus{
    text-decoration: none;
}
.navbar_fetchBox p,.fetchNotifications p{
    margin: 0;
    color: rgba(0, 0, 0, 0.88);
    font-size: 16px;
    padding: 5px;
    width: 100%;
}
.navbar_fetchBox span,.fetchNotifications span{
    color: rgba(0, 0, 0, 0.57);
}
#sqresultItem:hover{
    background: rgba(0, 0, 0, 0.03);
}   
.navbar_fetchBoxUser{
    overflow: hidden;
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 100px;
    margin: 8px;
}
.navbar_fetchBoxUser img{
    width: auto;
    height: 100%;
}
/* ################### Scrollbar style [navbar_fetchBoxUser] ################### */
.scrollbar::-webkit-scrollbar{
    height:30px;
    width:10px;
    border-radius: 20px;
    background: transparent;
        transition: all 0.3s ease;
        z-index: 9999;

}
.scrollbar::-webkit-scrollbar:hover{
    background: #c6c7ca;
    width: 10px;
    z-index: 5;
}
.scrollbar::-webkit-scrollbar-thumb{
    background:#a0a0a0;
    border-radius: 20px;
    z-index: 5;
}
/* ################### End Scrollbar style [navbar_fetchBoxUser] ################ */
.notiAlert{
    position: absolute;
    top: 53px;
    background: #f76363;
    color: #fff;
    padding: 10px 15px;
    width: 110px;
    text-align: center;
    border-radius: 100px;
    margin: 5px;
    cursor: default;
}
.small_caps_paragraph{
    margin: 0;
    background: rgba(0, 0, 0, 0.03);
    padding: 5px;
    font-variant: small-caps;
    font-weight: bold;
    color: rgba(0, 0, 0, 0.28);
    font-size: 18px;
}
.hashtagHightlight{
    background: rgba(61, 165, 255, 0.13);
    color: rgba(27,127,204,.8);
    padding: 2px 5px;
    margin: 2px 0px;
    cursor: pointer;
    text-decoration: none;
    line-height: 23px;
}
.hashtagHightlight:hover,.hashtagHightlight:focus{
    text-decoration: none;
    color: rgba(27,127,204,.8);
}
.trendingTitle_CenterCol_3{
    margin: 0px;
    text-transform: uppercase;
    font-weight: bold;
    color: #4c4c4c;

}
.trendingTitle_CenterCol_3 a, .classa a{
    background: #e9ebee;
    /*padding: 3px 15px;*/
    color: gray;
    padding-bottom: 10px;
    padding-top: 4px;
    text-decoration: none;
    font-weight: normal;
    text-transform: none;
    font-variant: all-petite-caps;
    transition: color 0.3s;
    border-radius: 3px 3px 0px 0px;
    width:22%;
    display:inline-block;
    text-align: center;

}
.trendingTitle_CenterCol_3 a:hover,.trendingTitle_CenterCol_3 a:focus{
    color: #555;
    text-decoration: none;
}

.tab_left {
    display:none; 
    text-align: center;}

.TriendingPosts:hover{
    
}
.TriendingPosts td{
    padding: 8px 10px;
}
.TriendingPosts td span{
    color: var(--color-secondary);
    font-size: 22px;
}
.TriendingPosts td a{
    text-decoration: none;
    color: #5a5a5a;
}
.TriendingPosts td a p{
    margin: 0;
    font-size: 13px;
    word-break: break-word;
}
.TriendingPages_link{
    text-decoration: none;
}
.TriendingPages_link:hover,.TriendingPages_link:focus{
    text-decoration: none;
}
.TriendingPages{
    width: 100%;
}
.TriendingPages:hover{
    /* background: rgba(233, 235, 238, 0.49); */
}
.TriendingPages td{
    padding: 6px 10px;
    font-size: 15px;
    word-break: break-word;
    font-weight: bold;
}
.TriendingPages td div{
    overflow: hidden;
    width: 42px;
    height: 42px;
    border-radius: 3px;
}
.TriendingPages td div img{
    width: 100%;
    height: 100%;
}
.WritePostUserI{
    width: 100%;
}
.WritePostUserI td{
    padding: 10px;
}
.WritePostUserI a{
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
.WritePostUserI a:hover,.WritePostUserI a:focus{
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
.loadingPosting{
    display: none;
    margin: 5px;
    background: #e9ebee;
    border-radius: 50px;
}
.loadingPostingP{
    width: 0%;
    background: #3da5ff;
    margin: 0px;
    font-size: 11px;
    text-align: center;
    color: #fff;
    border-radius: 50px;
}
.postNotify{
    background: #fff;
    margin: 0px 5px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}
.postNotify span{
    cursor: pointer;
    color: #fff;
    background: #ddd;
    padding: 4px 5px;
    border-radius: 20px;
    font-size: 11px;
}
.postSavedTable{
    width:100%;
    background: #fff;
    border: 1px solid #D9D9D9;
}
.postSavedTable tr{
    box-shadow: 0px 0px 0px #d0d0d0;
    transition: box-shadow 0.3s;
}
.postSavedTable tr:hover,.postSavedTable tr:focus{
    box-shadow: 0px 0px 20px #d0d0d0;
}
.postSavedTable tr td{
    padding: 10px;
    font-size: 14px;
    border: 1px solid rgb(228, 228, 228);
}
.postSavedTable tr td img{
    width: auto;
    height: 50px;
    max-width: 150px
}
.postSavedTable tr td a{
    color: #000;
    text-decoration: none;
    word-break: break-word;
}
.postSavedTable tr td a:hover,.postSavedTable tr td a:focus{
    color: #000;
    text-decoration: none;
}
.saved_nothingToShow{
    padding: 15px;
    background: #fff;
}
.saved_nothingToShow p{
    margin: 0;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #dadce0;
}
.userLinkComment{
    color:#000;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
}
.userLinkComment:hover,.userLinkComment:focus{
    color:#000;
    text-decoration: none;
}
.userPhotosProfile{
    width: 134px;
    height: 134px;
    overflow: hidden;
    display: inline-block;
    border-radius: 2px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.1);
}
.titleUserPhotosProfile span{
    cursor: default;
    background: #53c357;
    color: #fff;
    padding: 1px 8px;
    border-radius: 2px;
}
.titleUserPhotosProfile{
    background: #e9ebee;
    color: #6f6f6f;
    text-transform: uppercase;
    padding: 8px;
    font-weight: bold;
    border-radius: 2px;
}
.userPhotosProfile img{
    width: auto;
    height: 100%;
    border-radius: 3px; 
}
.aSetup{
    display: flex;
}
.aSetup_item{
    text-align: center;
    margin: auto;
}
.aSetup_item_empty{
    width: 40px;
    height: 40px;
    background: url('../imgs/main_icons/26aa.png') no-repeat center center;
    background-size: 40px;
    margin: auto;
}
.aSetup_item_done{
    width: 40px;
    height: 40px;
    background: url('../imgs/main_icons/2705.png') no-repeat center center;
    background-size: 40px;
    margin: auto;
}
.aSetup_progrDiv{
    margin: 10px 15px;
    background: #e9ebee;
    border-radius: 50px;
}
.aSetup_progrDiv p{
    width: 10%;
    background: #4bd37b;
    margin: 0;
    font-size: 10px;
    text-align: center;
    color: #fff;
    border-radius: 50px;
    height: 10px;
}
/* Legacy .lightboxImg_* rules removed — replaced by GLightbox (see css/lightbox.css). */

.dashboard_box{
    display: flex;
    background: white;
    max-width: 1000px;
    width: auto;
    margin: auto;
    border-radius: 3px;
    box-shadow: var(--shadow-card);
}
.dashboard_box p{
    margin: 0;
}
.dashboard_boxD1{
    width: 300px;
    box-shadow: var(--shadow-card);
}
.dashboard_boxD1 ul{
    margin: 0;
    padding: 0;
    list-style: none;
    border-left: 1px solid rgba(0, 0, 0, 0.06);
    border-right: 1px solid rgba(0, 0, 0, 0.06);
}
.dashboard_boxD1 ul li{
    
}
.dashboard_boxD1 ul li a{
    color: gray;
    text-decoration: none;
}
.dashboard_boxD1 ul li a p{
    padding: 10px 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: #fff;
    transition: background 0.3s;
}
.dashboard_boxD1 ul li a p:hover,.dashboard_boxD1 ul li a p:focus{
    color: gray;
    text-decoration: none;
    background: #f5f6f7;
}
.dashboard_boxD2{
    width: 100%;
    padding: 15px;
}
.dashboard_path{
    color: var(--color-secondary);
    background: rgba(33, 150, 243, 0.1);
    border-radius: 20px;
    padding: 5px 10px;
}
.details{
    background: #2196F3;
    padding: 21px;
    color: #fff;
    margin: 8px;
    width: 100%;
    border-radius: 3px;
    border-bottom: 5px solid rgba(0, 0, 0, 0.14);
    position: relative; 
}
.details span{
    font-size: 62px;
    padding-bottom: 15px;
    color: rgba(0, 0, 0, 0.19);
    position: absolute;
    right: 10%;
    top: 25%;
}
.details h3{
    margin: 10px 0px;
}
.dboard_lActive,.dboard_lActive:hover,.dboard_lActive:focus{
    background: #f3f3f3 !important;
    color: #1a7cc9;
    font-weight: bold;
}
.dashboardField{
    width: 300px;
    background: rgba(255, 255, 255, 0.61);
    border: 1px solid #eeeeee;
    padding: 10px;
    outline: none;
    border-radius: 2px;
    margin: 5px;
}
.dashboard_UsersTable{
    width: 100%;
}
.dashboard_UsersTable:hover,.dashboard_UsersTable:focus{
    background: #eff0f3;
}
.dashboard_UsersTable tr{

}
.dashboard_UsersTable tr td{
    border: 1px solid #f0f0f0;
}
.dashboard_UsersTable tr>td div{
    width: 40px;
    height: 40px;
    overflow: hidden;
    background: #e9ebee;
    margin: auto;
}
.dashboard_UsersTable tr>td div img{
    width: auto;
    height: 100%;
}
.dashboard_UsersTable tr td a{
    color: #8a8a8a;
    text-decoration: none;
}
.dashboard_UsersTable tr td a p{
    padding: 10px;
}
.dashboard_UsersTable tr td a p:hover,.dashboard_UsersTable tr td a p:focus{
    
}
.dashboard_EditDelete{
    background: #2196F3;
    color: #fff !important;
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 15px;
}
.contentBox{
    background: white;
    max-width: 800px;
    width: auto;
    margin: auto;
    border-radius: 2px;
    border: 1px solid #e0e0e0;
}
.sb_caseOpen{
    background: #2196f3;
    color: #fff;
    padding: 2px 9px;
    border-radius: 20px;
}
.sb_caseClosed{
    background: #e9ebee;
    color: #777;
    padding: 2px 9px;
    border-radius: 20px;
}
#viewreport{
    display: flex;
    cursor: pointer;
    border-bottom: 1px solid #ddd;
}
#viewreport:hover,#viewreport:focus{
    background: #f6f7f9;
} 
.reportAP_box{
    width: 100%;
    margin: 0px 15px;
}
.reportAP_box div{
    background: white;
    border-radius: 2px;
    border: 1px solid #e0e0e0;
    padding: 15px;
}
.emoticonsBox{
    display: none;
    background: #ffffff;
    padding: 5px;
    position: absolute;
    top: 50px;
    max-width: 315px;
    box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.18);
    border-radius: 3px;
    z-index: 1;
    border: 1px solid #e2e2e2;
}
.emoticonsBtn{
    cursor: pointer;
    background: transparent;
    padding: 11px;
    color: #cccccc;
    font-size: 18px !important; 
}
.toTopArrow{
    width: 10px;
    height: 10px;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-bottom: 10px solid white;
}
.toBottomArrow{
    width: 10px;
    height: 10px;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid white;
}
.emojiFace{
    cursor: pointer;
    box-shadow: none;
    width: 30px;
    height: 30px;
    padding: 1px 2px;
    border-radius: 3px;
    background: transparent;
}
.emojiFace:hover,.emojiFace:focus{
    background: #efefef;
}
.dashboard_sbFetch{
    width: 100%;
}
.dashboard_sbFetch tr:hover{
    background: #f7f7f7;
}
.dashboard_sbFetch tr td{
    border: 1px solid #eaeaea;
    padding: 8px;
    font-size: 13px;
    color: #5a5a5a;
}
.sbox_r_table tr td{
    padding:4px;
}
.sbox_r_table tr td a{
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
.sbox_r_table tr td a:hover,.sbox_r_table tr td a:focus{
    text-decoration: none;
}
.sbox_r_report{
    background: #f3f3f3;
    padding: 8px;
    border-radius: 20px;
    color: #6b6b6b;
    max-width: 370px;
    font-size: 14px;
}
.userActive{
    width: 20px;
    height: 20px;
    position: absolute;
    z-index: 1;
    border-radius: 20px;
    border: 2px solid #fff;
}
.messages_container{
    margin: 0;
    padding: 0;
    margin-top: 54px;
}
.messages{
    background: #fff;
    display: flex;
    min-width: 700px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 54px;
    min-width: 850px;
}
.messages_col1{
    /*width: 50%;*/
    position: relative;
}
.messages_col2{
    border: 1px solid #d1d4d8;
    border-top: none;
    border-bottom: none;
    /*width: 100%;*/
    position: relative;
}
.messages_col3{
    width: 50%;
}
.mCol1_title{
    padding: 12px;
    border-bottom: 1px solid #d1d4d8;
}
.mCol2_title{
    padding: 15px;
    border-bottom: 1px solid #d1d4d8;
}
.mCol3_title{
    padding: 15px;
    border-bottom: 1px solid #d1d4d8;
}
.m_contacts_search{
    border: none;
    border-radius: 3px;
    background: #f2f2f2;
    padding: 3px 5px;
    outline: none;
    width: 100%;
    font-size: 13px;
}
.m_contacts_user{
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 100%;
}
.m_contacts_user img{
    width: auto;
    height: 100%;
}
.m_contacts_table{
    width: 100%;
}
.m_contacts_table tr{
    cursor: pointer;
}
.m_contacts_table tr:hover{
    background: #f6f6f6;
    color: #000 ; 
}
.m_contacts_table tr td{
    padding: 8px;
}
.m_contacts_table tr td p{
    font-size: 14px;
    margin: 0;
}
.m_userActive{
    width: 13px;
    height: 13px;
    border: 2px solid #fff;
    border-radius: 20px;
    position: absolute;
    bottom: 5px;
}
.mNew_notifi{
    background: red;
    color: #fff;
    padding: 0px 4px;
    padding-top: 3px;
    border-radius: 20px;
}
.m_msgUserImg{
    width: 23px;
    height: 23px;
    overflow: hidden;
    border-radius: 20px;
    border: 1px solid #ccc;
    background: #ccc;
    position: absolute;
    top: 10px;
}
.m_msgUserImg img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.m_msgTable{
    margin:0px;
    width: 100%;
      -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
.m_msgTable tr{

}
.m_msgTable tr td{
    padding: 5px;
    padding-bottom: 3px;
}
.m_msgU1{
    max-width: 80%;
    background: #f6f6f6;
    padding: 8px 10px;
    border-radius: 20px;
    color: #5c5c5c;
    font-size: 14px;
    word-break: break-word;
    display: inline-block;
}
.m_msgU2{
    max-width: 80%;
    background: #2196F3;
    padding: 8px 10px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 14px;
    word-break: break-word;
    display: inline-block;
}
.mCol2_msgs{
    position: absolute;
    top: 51px;
    left: 0;
    right: 0;
    bottom: 40px;
    overflow: auto;
    overflow-x: hidden;
}
.m_sendField{
    border: 1px solid #eaeaea;
    border-left: 0;
    border-right: 0;
    position: relative;
}
.m_sendField textarea{
    width: 100%;
    direction: inherit;
    border: none;
    resize: none;
    outline: none;
    padding: 8px;
    height: 40px;
    padding-right: 38px;
}
.m_sendField_span{
    background: #fff;
    color: gray;
    font-size: 18px !important;
    position: absolute;
    right: 0px;
    padding: 10px;
    cursor: pointer;
}
.m_sendField_box{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.mCol3_userInfo{
    padding-top: 5%;
    padding-bottom: 5%;
}
.mCol3_bio{
    border-top: 1px solid #d1d4d8;
    padding: 15px
}
.mCol3_userInfo_avatar{
    width: 72px;
    height: 72px;
    overflow: hidden;
    margin: auto;
    border-radius: 100%;
    background: rgba(217, 221, 224, 0.55);
}
.mCol3_userInfo_avatar img{
    width: auto;
    height: 100%;
}
.mCol3_userActive{
    background: #4CAF50;
    width: 17px;
    height: 17px;
    border: 3px solid #fff;
    border-radius: 20px;
    position: absolute;
    bottom: 0;
    left: 55%;
}
.mCol3_userProfileLink,.mCol3_userProfileLink:hover,.mCol3_userProfileLink:focus{
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
.selectToChat{
    margin: 15px;
    text-align: center;
    color: grey;
    background: rgba(0, 0, 0, 0.03);
    padding: 8px 0px;
    border-radius: 3px;
}
.m_contacts_title{
    margin: 0;
    color: gray;
    font-variant: all-small-caps;
    padding: 3px 8px;
    font-size: 15px;
}
/* post loading [placeHolder content] */
@keyframes placeHolderShimmer{
    0%{
        background-position: -468px 0
    }
    100%{
        background-position: 468px 0
    }
}

.animated-background {
    animation-duration: 1.3s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: linear-gradient(to right, var(--color-bg-page) 8%, #ffffff 18%, var(--color-bg-page) 33%);
    background-size: 800px 104px;
    height: 96px;
    position: relative;
}
.background-masker {
    background: #fff;
    position: absolute;
}

/* Every thing below this is just positioning */

.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
    top: 0;
    left: 40px;
    right: 0;
    height: 10px;
}

.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
    top: 10px;
    left: 40px;
    height: 8px;
    width: 10px;
}

.background-masker.header-bottom {
    top: 18px;
    height: 6px;
}

.background-masker.subheader-left,
.background-masker.subheader-right {
    top: 24px;
    height: 6px;
}


.background-masker.header-right,
.background-masker.subheader-right {
    width: auto;
    left: 200px;
    right: 0;
}

.background-masker.subheader-right {
    left: 130px;
}

.background-masker.subheader-bottom {
    top: 30px;
    height: 10px;
}

.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
    top: 40px;
    left: 0;
    right: 0;
    height: 6px;
}

.background-masker.content-top {
    height:20px;
}

.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end{
    width: auto;
    left: 380px;
    right: 0;
    top: 60px;
    height: 8px;
}

.background-masker.content-second-line  {
    top: 68px;
}

.background-masker.content-second-end {
    left: 420px;
    top: 74px;
}

.background-masker.content-third-line {
    top: 82px;
}

.background-masker.content-third-end {
    left: 300px;
    top: 88px;
}

@media screen and (max-width: 768px) {
.mySidenav {
  transition: 0.5s;
  display: none;
  width: 100%;
  margin-top:6px;
}

.postare {  background:#f0f4f7;
    font-size:13px;
    padding:10px 10px;
    border-radius:5px 5px 5px 0px;
    color:#8495a3;
    font-weight:600;
    position:relative;
    float:left;
    text-align: left;
    min-width:120px;
    margin-left: 20px;}

.postare .corner
{
    background:url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/245657/bubble-corner.png") 0 0 no-repeat;
    position:absolute;
    width:7px;
    height:7px;
    left:-5px;
    bottom:0;
}







$base-color: #0071f6;

html,
body {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: center;
}

body {
  box-sizing: border-box;

  *,
  *:before,
  *:after {
    box-sizing: inherit;
  }
}

@keyframes introduceBadge {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

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

  50% {
    transform: scale(1.05);
  }

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

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

  50% {
    transform: scale(1.1);
  }

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

.badge {
  animation: introduceBadge 1s linear 0s 1 both;
  background: rgba($base-color, 0.2);
  border-radius: 50%;
  height: 136px;
  perspective: 600px;
  position: relative;
  width: 136px;

  &:before,
  &:after {
    animation: pulseBadge 3s cubic-bezier(0.86, 0, 0.07, 1) 0s infinite both;
    border: 2px dashed $base-color;
    border-radius: inherit;
    bottom: -16px;
    content: "";
    left: -16px;
    opacity: 0.2;
    position: absolute;
    right: -16px;
    top: -16px;
  }

  &:after {
    animation-name: pulseBadge2;
    bottom: -32px;
    left: -32px;
    opacity: 0.1;
    right: -32px;
    top: -32px;
  }
}

@keyframes introduceLabel {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.4) rotateY(-1800deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotateY(20deg);
  }
}

@keyframes rotateLabel {
  0% {
    transform: translate(-50%, -50%) rotateY(20deg);
  }

  50% {
    transform: translate(-50%, -50%) rotateY(-20deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateY(20deg);
  }
}

.badge__label {
  animation: introduceLabel 2s cubic-bezier(0.19, 1, 0.22, 1) 1s 1 both,
    rotateLabel 5s linear 3s infinite;
  color: $base-color;
  font: 900 88px/1 -apple-system, BlinkMacSystemFont;
  left: 50%;
  position: absolute;
  text-align: center;
  text-shadow: 0px 4px 8px rgba($base-color, 0.2);
  top: 50%;
  transform: translate(-50%, -50%);
}