html.soc-topic-page,
html.soc-topic-page body {
    min-height: 100%;
    background: linear-gradient(155deg, color-mix(in srgb, var(--socsub2) 58%, #879497) 0%, var(--socsub) 86%) !important;
}

html.soc-topic-page #pun_wrap,
html.soc-topic-page #pun,
html.soc-topic-page #pun-viewtopic,
html.soc-topic-page #pun-main {
    background: transparent !important;
    box-shadow: none !important;
}

html.soc-topic-page #pun_wrap,
html.soc-topic-page #pun {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

html.soc-topic-page #pun-viewtopic {
    width: min(684px, calc(100vw - 28px)) !important;
    margin: 0 auto !important;
    padding: 26px 0 0 !important;
}

html.soc-topic-page #html-header,
html.soc-topic-page #pun-title,
html.soc-topic-page #pun-status,
html.soc-topic-page #lower-nav-holder,
html.soc-topic-page #pun-ulinks,
html.soc-topic-page #pun-crumbs1,
html.soc-topic-page #topic-users-in,
html.soc-topic-page #html-footer,
html.soc-topic-page #author-footer,
html.soc-topic-page .postlink,
html.soc-topic-page .pl-email.email,
html.soc-topic-page #pun-navlinks h2,
html.soc-topic-page #navuserlist,
html.soc-topic-page #navsearch {
    display: none !important;
}

html.soc-topic-page #pun-navlinks {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 0 48px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

html.soc-topic-page #pun-navlinks .container {
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html.soc-topic-page #pun-navlinks li {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.soc-topic-page #pun-navlinks li > a {
    display: flex !important;
    align-items: center;
    min-height: 29px;
    padding: 0 15px !important;
    border: 0 !important;
    border-radius: 5px;
    background: var(--socsub) !important;
    color: var(--soctext) !important;
    font: 12px/1 var(--font, Arial, sans-serif) !important;
    text-transform: lowercase;
    text-decoration: none !important;
}

html.soc-topic-page #pun-navlinks li > a:hover {
    color: var(--soctexthover) !important;
    filter: brightness(1.16);
}

html.soc-topic-page #pun-navlinks .soc-nav-tools {
    display: flex !important;
    align-items: center;
    flex: 0 0 auto;
    gap: 8px;
    width: auto !important;
    margin-left: 0 !important;
    position: relative;
}

html.soc-topic-page .header-font-settings {
    position: relative !important;
    inset: auto !important;
    z-index: 80;
    display: block;
    box-sizing: border-box;
}

html.soc-topic-page .header-font-settings__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 150px;
    min-width: 150px;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 5px 9px;
    border: 1px solid var(--stroke-03) !important;
    border-radius: 1px !important;
    background: var(--sub9) !important;
    color: var(--text6) !important;
    box-shadow: 1px 1px 2px var(--shadow);
    font: 600 9px/1 var(--font) !important;
    text-transform: lowercase;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

html.soc-topic-page .header-font-settings__button:hover,
html.soc-topic-page .header-font-settings.is-open .header-font-settings__button {
    border-color: var(--sub10) !important;
    background: var(--sub12) !important;
    color: var(--sub10) !important;
}

html.soc-topic-page .header-font-settings__button:active { transform: translateY(1px); }

html.soc-topic-page .header-font-settings__panel {
    position: absolute !important;
    z-index: 1000;
    top: calc(100% + 9px) !important;
    right: auto !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column;
    gap: 7px;
    box-sizing: border-box;
    width: 185px;
    margin: 0;
    padding: 12px;
    border: 1px solid var(--stroke-03);
    border-radius: 12px;
    background: var(--sub3);
    color: var(--text6);
    box-shadow: 0 8px 18px var(--shadow), inset 0 0 0 1px var(--stroke-03);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
}

html.soc-topic-page .header-font-settings__panel::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 18px;
    width: 10px;
    height: 10px;
    background: var(--sub3);
    transform: rotate(45deg);
}

html.soc-topic-page .header-font-settings__panel[aria-hidden="false"],
html.soc-topic-page .header-font-settings.is-open .header-font-settings__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

html.soc-topic-page .header-font-settings__title {
    display: block;
    margin: 0 0 3px;
    padding: 0 0 7px;
    border-bottom: 1px solid var(--stroke-03);
    color: var(--text9);
    font: 400 15px/1 var(--font-02);
    text-align: left;
    text-transform: lowercase;
}

html.soc-topic-page .header-font-settings__label {
    display: block;
    margin: 0;
    padding: 0;
    color: var(--text6);
    font: 600 8px/1 var(--font);
    letter-spacing: .05em;
    text-align: left;
    text-transform: uppercase;
}

html.soc-topic-page .header-font-settings__select {
    display: block;
    box-sizing: border-box;
    width: 100%;
    height: 27px;
    margin: 0;
    padding: 3px 25px 3px 7px;
    border: 1px solid var(--stroke-03);
    border-radius: 2px;
    background-color: var(--sub8);
    color: var(--text6);
    font: 400 9px/1 var(--font);
    outline: none;
    cursor: pointer;
}

html.soc-topic-page .header-font-settings__size {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 6px;
    width: 100%;
}

html.soc-topic-page .header-font-settings__size-button,
html.soc-topic-page .header-font-settings__value {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 28px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--stroke-03);
    border-radius: 2px;
    background: var(--sub8);
    color: var(--text6);
}

html.soc-topic-page .header-font-settings__size-button {
    width: 28px;
    font: 400 15px/1 var(--font);
    cursor: pointer;
}

html.soc-topic-page .header-font-settings__value {
    width: 100%;
    font: 400 16px/1 var(--font-02);
}

html.soc-topic-page .header-font-settings__reset {
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 24px;
    margin: 2px 0 0;
    padding: 0 7px;
    border: 0;
    border-radius: 12px;
    background: var(--sub6);
    color: var(--text2);
    box-shadow: 2px 2px 3px var(--shadow);
    font: 600 8px/1 var(--font);
    text-transform: lowercase;
    cursor: pointer;
}

html.soc-topic-page #pun-navlinks #theme-switcher.soc-theme-buttons {
    display: inline-flex !important;
    align-items: center;
    flex: 0 0 auto;
    gap: 1px;
    width: 45px !important;
    min-width: 45px !important;
    max-width: 45px !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html.soc-topic-page .soc-theme-buttons li {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html.soc-topic-page .theme-light-button,
html.soc-topic-page .theme-dark-button {
    display: block !important;
    box-sizing: border-box;
    width: 22px !important;
    height: 22px !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none !important;
    cursor: pointer;
    opacity: .55;
    transition: opacity .25s ease, transform .25s ease;
}

html.soc-topic-page .theme-light-button { background-image: var(--light) !important; }
html.soc-topic-page .theme-dark-button { background-image: var(--darkness) !important; }
html.soc-topic-page .soc-theme-buttons .is-active button,
html.soc-topic-page .theme-light-button:hover,
html.soc-topic-page .theme-dark-button:hover { opacity: 1; }

html.soc-topic-page #pun-main {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

html.soc-topic-page .soc-topic-topbar {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100% !important;
    min-height: 34px;
    margin: 0 !important;
    padding: 0 11px !important;
    border: 2px solid var(--socsub1);
    border-radius: 12px 12px 0 0;
    background: var(--socsub2) !important;
    color: var(--soctext2);
    font-size: 10px;
}

html.soc-topic-page .soc-topic-topbar .pagelink {
    float: none !important;
    margin: 0 !important;
}

html.soc-topic-page .soc-topic-topbar a,
html.soc-topic-page .soc-topic-topbar strong {
    color: var(--soctext1) !important;
}

html.soc-topic-page .soc-top-icons {
    display: inline-flex;
    align-items: center;
    gap: 11px;
}

html.soc-topic-page .soc-top-icons i {
    display: block;
    width: 16px;
    height: 16px;
    background: center / contain no-repeat;
}

html.soc-topic-page .soc-top-search { background-image: var(--socmag) !important; }
html.soc-topic-page .soc-top-ellipsis { background-image: var(--socellipsis2) !important; }

html.soc-topic-page .soc-participants {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    min-height: 34px;
    margin: 0 12px -36px;
    padding: 0 11px;
    border: 1px solid var(--socsub1);
    border-radius: 12px;
    background: var(--socsub3);
    color: var(--soctext2);
}

html.soc-topic-page .soc-participant-avatars {
    display: inline-flex;
    align-items: center;
    margin-right: 8px;
}

html.soc-topic-page .soc-participant-avatar {
    display: block;
    width: 20px;
    height: 20px;
    margin-left: -5px;
    overflow: hidden;
    border: 1px solid var(--socsub3);
    border-radius: 50%;
    background: color-mix(in srgb, var(--socsub3), white 35%);
}

html.soc-topic-page .soc-participant-avatar:first-child { margin-left: 0; }
html.soc-topic-page .soc-participant-avatar img { width: 100%; height: 100%; object-fit: cover; }

html.soc-topic-page .soc-participant-names {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    overflow: hidden;
}

html.soc-topic-page .soc-participant-names a {
    color: var(--soctext1) !important;
    font-size: 10px;
    white-space: nowrap;
    text-transform: lowercase;
    font-weight: 600;
}

html.soc-topic-page .soc-participant-names a:hover { color: var(--soctexthover1) !important; }

html.soc-topic-page [id^="topic_t"] {
    box-sizing: border-box;
    width: 100% !important;
    height: min(860px, calc(100vh - 190px));
    min-height: 520px;
    margin: 0px 0 7px !important;
    padding: 74px 15px 32px !important;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--socsub6) transparent;
    border: 2px solid var(--socsub1);
    border-radius: 0 0 12px 12px;
    background: var(--socbg) center / cover no-repeat !important;
}

html.soc-topic-page [id^="topic_t"]::-webkit-scrollbar { width: 7px; }
html.soc-topic-page [id^="topic_t"]::-webkit-scrollbar-thumb { border-radius: 8px; background: var(--socsub6); }

html.soc-topic-page #pun-viewtopic [id^="topic_t"] > .post {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 0 6px !important;
    padding: 0 0 24px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.soc-topic-page #pun-viewtopic [id^="topic_t"] > .post.soc-grouped { margin-top: 0 !important; }
html.soc-topic-page [id^="topic_t"] > .post h3,
html.soc-topic-page [id^="topic_t"] > .post .post-author { display: none !important; }

html.soc-topic-page [id^="topic_t"] > .post > .container,
html.soc-topic-page [id^="topic_t"] > .post .post-body,
html.soc-topic-page [id^="topic_t"] > .post .post-box {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.soc-topic-page [id^="topic_t"] > .post .post-body {
    display: flex !important;
    flex-direction: column;
}

html.soc-topic-page [id^="topic_t"] > .post .post-box {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(52%, 333px) !important;
    padding: 12px !important;
    border: 1px solid var(--socsub1) !important;
    border-radius: 12px !important;
    background: var(--socsub4) !important;
    color: var(--soctext2) !important;
}

html.soc-topic-page .post.soc-other .post-box { align-self: flex-start; }
html.soc-topic-page .post.soc-own .post-box { align-self: flex-end; }

html.soc-topic-page .soc-message-author {
    display: block;
    margin: 0 0 11px;
    color: var(--soctext1) !important;
    font-weight: 700;
    font-size: 9px;
    text-decoration: none !important;
    text-transform: lowercase;
}

html.soc-topic-page .soc-grouped .soc-message-author { display: none; }

html.soc-topic-page .post-content {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid var(--socsub5);
    color: var(--soctext2) !important;
    font-size: 12px !important;
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
}

html.soc-topic-page .post-content p { margin: 0 0 9px !important; color: inherit !important; }
html.soc-topic-page .post-content p:last-child { margin-bottom: 0 !important; }
html.soc-topic-page .post-content img,
html.soc-topic-page .post-content video,
html.soc-topic-page .post-content iframe {
    max-width: 100% !important;
    height: auto !important;
}

html.soc-topic-page .post-content .postimg { max-width: 100% !important; }
html.soc-topic-page .post-content .lastedit { margin-top: 10px !important; opacity: .55; font-size: 9px !important; }

html.soc-topic-page .post-links {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    width: 100% !important;
    min-height: 24px;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html.soc-topic-page .post-links ul {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

html.soc-topic-page .post-links li {
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

html.soc-topic-page #pun-viewtopic .post-links .soc-menu-trigger {
    margin-right: auto !important;
}

html.soc-topic-page .post-links .pl-email.profile,
html.soc-topic-page .post-links .pl-email.pm,
html.soc-topic-page .post-links .pl-email.profile-fields,
html.soc-topic-page .post-links [data-daymare-profile-fields-link] { display: none !important; }

html.soc-topic-page #pun-viewtopic .post-links .pl-delete a,
html.soc-topic-page #pun-viewtopic .post-links .pl-edit a,
html.soc-topic-page #pun-viewtopic .post-links .pl-quote a,
html.soc-topic-page #pun-viewtopic .soc-post-menu-button {
    display: block !important;
    box-sizing: border-box !important;
    width: 14px !important;
    min-width: 14px !important;
    max-width: 14px !important;
    height: 14px !important;
    min-height: 14px !important;
    max-height: 14px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent center / 14px 14px no-repeat !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: 14px 14px !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    white-space: nowrap !important;
    cursor: pointer;
}

html.soc-topic-page #pun-viewtopic .post-links .pl-delete a { background-image: var(--soctrash) !important; }
html.soc-topic-page #pun-viewtopic .post-links .pl-edit a { background-image: var(--socpan) !important; }
html.soc-topic-page #pun-viewtopic .post-links .pl-quote a { background-image: var(--socquote2) !important; }
html.soc-topic-page #pun-viewtopic .soc-post-menu-button { background-image: var(--socellipsis) !important; }
html.soc-topic-page .post-links .acchide { display: none !important; }

html.soc-topic-page .soc-post-menu {
    position: absolute;
    right: 10px;
    bottom: 38px;
    z-index: 30;
    display: none;
    min-width: 155px;
    padding: 7px;
    border: 1px solid var(--socsub1);
    border-radius: 8px;
    background: var(--socsub4);
    box-shadow: 0 8px 22px rgb(0 0 0 / 20%);
    text-transform: lowercase;
}

html.soc-topic-page .soc-post-menu.is-open { display: grid; gap: 3px; }
html.soc-topic-page .soc-post-menu a,
html.soc-topic-page .soc-post-menu button {
    box-sizing: border-box;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--soctext1) !important;
    font: 11px/1.2 var(--font, Arial, sans-serif);
    text-align: left;
    cursor: pointer;
}

html.soc-topic-page .soc-post-menu a:hover,
html.soc-topic-page .soc-post-menu button:hover { background: var(--socsub3); color: var(--soctexthover1) !important; }

html.soc-topic-page .soc-char-count {
    display: none !important;
    position: absolute;
    right: 8px;
    bottom: -23px;
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 0 7px;
    border: 1px solid var(--soctext1);
    border-radius: 7px;
    background: var(--socsub4);
    color: var(--soctext1);
    font-size: 9px;
}

html.soc-topic-page .post.soc-other .soc-char-count { right: auto; left: 0; }

html.soc-topic-page .rait_wrap {
    position: absolute !important;
    right: 0;
    bottom: -24px;
    width: auto !important;
    margin: 0 !important;
}

html.soc-topic-page .post.soc-other .rait_wrap { right: 7px; }
html.soc-topic-page .post.soc-own .rait_wrap { right: auto; left: 0; }

html.soc-topic-page .post-rating {
    width: auto !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.soc-topic-page .punbb .post-rating p.container,
html.soc-topic-page .punbb .post-vote {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    font: 300 7px / 100% var(--font);
    padding: 3px 10px !important;
    margin: 0 !important;
    background: transparent !important;
    align-self: stretch;
    border-radius: 10px;
}

html.soc-topic-page .punbb .post-rating p.container {
    border: 0 !important;
    background: transparent !important;
}

html.soc-topic-page .punbb .post-vote {
    border: 1px solid var(--socsub1) !important;
    background: var(--socsub4) !important;
}

html.soc-topic-page #pun-viewtopic .post-rating a {
    display: inline-flex !important;
    align-items: center;
    min-width: 34px;
    height: 18px;
    padding: 0 6px !important;
    border: 1px solid var(--socsub1);
    border-radius: 10px;
    background: var(--socsub4) !important;
    color: var(--soctext2) !important;
    font: inherit;
}

html.soc-topic-page .soc-voice-note {
    margin: 5px 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.soc-topic-page .dm_social_voice.soc-voice-legacy,
html.soc-editor-page .dm_social_voice.soc-voice-legacy {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.soc-topic-page .dm_social_voice.soc-voice-legacy > .soc-voice-source-time,
html.soc-editor-page .dm_social_voice.soc-voice-legacy > .soc-voice-source-time {
    display: none !important;
}

html.soc-topic-page .soc-voice-note > div:first-child { margin: 0 !important; padding: 0 !important; background: transparent !important; }

html.soc-topic-page #pun-viewtopic .soc-voice-note > div:first-child::before,
html.soc-topic-page #pun-viewtopic .soc-voice-note > div:first-child::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
}

html.soc-topic-page .soc-voice-toggle {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 31px;
    padding: 3px 7px;
    border: 1px solid var(--socsub1);
    border-radius: 7px;
    background: var(--socsub2);
    color: var(--soctext2);
    cursor: pointer;
}

html.soc-topic-page .soc-voice-icon { width: 24px; height: 24px; background: var(--socvoice) center / contain no-repeat; }
html.soc-topic-page .soc-wave { height: 15px; background: var(--socvoice1) left center / auto 15px repeat-x; }
html.soc-topic-page .soc-voice-toggle span { font-size: 9px; }
html.soc-topic-page #pun-viewtopic .soc-voice-note > blockquote {
    display: none !important;
    margin: 9px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.soc-topic-page #pun-viewtopic .soc-voice-note.is-open > blockquote { display: block !important; }

html.soc-topic-page .soc-video-note {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    margin: 4px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.soc-topic-page .soc-video-note img {
    box-sizing: border-box;
    width: min(140px, 72%) !important;
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid var(--socsub1);
    border-radius: 50%;
}

html.soc-topic-page .soc-video-time { margin-bottom: 4px; font-size: 9px; }

html.soc-topic-page .soc-date-separator {
    display: table;
    min-width: 108px;
    margin: 8px auto !important;
    padding: 3px 5px !important;
    border: 1px solid var(--socsub1) !important;
    border-radius: 7px !important;
    background: var(--socsub6) !important;
    color: var(--soctext3) !important;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
}

html.soc-topic-page #pun-viewtopic [id^="topic_t"] > .post.soc-date-post .post-box,
html.soc-topic-page #pun-viewtopic #post-preview .post-box.soc-date-post {
    align-self: center !important;
    width: 100% !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.soc-topic-page .soc-date-post .soc-message-author,
html.soc-topic-page .soc-date-post .post-links,
html.soc-topic-page .soc-date-post .soc-char-count,
html.soc-topic-page .soc-date-post .rait_wrap { display: none !important; }
html.soc-topic-page #pun-viewtopic .soc-date-post .post-content {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.soc-topic-page #pun-viewtopic #post-preview .post-content.soc-date-post {
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.soc-topic-page .soc-reply-card {
    margin: 4px 0 9px !important;
    padding: 6px 8px !important;
    overflow: hidden;
    border: 0 !important;
    border-left: 3px solid var(--soctext1) !important;
    border-radius: 0 5px 5px 0 !important;
    background: var(--socsub3) !important;
}

html.soc-topic-page #pun-viewtopic .post-content .quote-box.soc-reply-card > cite {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--soctext1) !important;
    font-size: 10px !important;
    text-transform: lowercase !important;
}

html.soc-topic-page #pun-viewtopic .post-content .quote-box.soc-reply-card > cite a {
    color: var(--soctext1) !important;
    font-size: inherit !important;
    text-decoration: none !important;
    text-transform: lowercase !important;
    padding: 5px 10px 2px;
}

html.soc-topic-page #pun-viewtopic .post-content .quote-box.soc-reply-card > cite a:hover {
    color: var(--soctexthover1) !important;
}

html.soc-topic-page #pun-viewtopic .post-content .quote-box.soc-reply-card > blockquote {
    max-height: 3em;
    margin: 2px 0 0 !important;
    padding: 5px 10px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

html.soc-topic-page #pun-viewtopic .post-content .quote-box.soc-reply-card p { margin: 0 !important; font-size: 10px !important; line-height: 1.4 !important; }

/* The edit/create preview has no #pun-viewtopic wrapper, so mirror only
   the isolated message widgets inside #post-preview. */
html.soc-editor-page #pun #post-preview .soc-voice-note {
    margin: 5px 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.soc-editor-page #pun #post-preview .soc-voice-note > div:first-child {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

html.soc-editor-page #pun #post-preview .soc-voice-note > div:first-child::before,
html.soc-editor-page #pun #post-preview .soc-voice-note > div:first-child::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: none !important;
    -webkit-mask: none !important;
    mask: none !important;
}

html.soc-editor-page #pun #post-preview .soc-voice-toggle {
    display: grid;
    grid-template-columns: 26px 1fr auto;
    align-items: center;
    gap: 6px;
    width: 100%;
    min-height: 31px;
    padding: 3px 7px;
    border: 1px solid var(--socsub1);
    border-radius: 7px;
    background: var(--socsub2);
    color: var(--soctext2);
    cursor: pointer;
}

html.soc-editor-page #pun #post-preview .soc-voice-icon { width: 24px; height: 24px; background: var(--socvoice) center / contain no-repeat; }
html.soc-editor-page #pun #post-preview .soc-wave { height: 15px; background: var(--socvoice1) left center / auto 15px repeat-x; }
html.soc-editor-page #pun #post-preview .soc-voice-toggle span { font-size: 9px; }
html.soc-editor-page #pun #post-preview .soc-voice-note > blockquote {
    display: none !important;
    margin: 9px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
html.soc-editor-page #pun #post-preview .soc-voice-note.is-open > blockquote { display: block !important; }

html.soc-editor-page #pun #post-preview .soc-video-note {
    display: flex;
    align-items: flex-end;
    gap: 7px;
    margin: 4px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

html.soc-editor-page #pun #post-preview .soc-video-note img {
    box-sizing: border-box;
    width: min(140px, 72%) !important;
    aspect-ratio: 1;
    object-fit: cover;
    border: 2px solid var(--socsub1);
    border-radius: 50%;
}

html.soc-editor-page #pun #post-preview .soc-video-time { margin-bottom: 4px; font-size: 9px; }

html.soc-editor-page #pun #post-preview .soc-date-separator {
    display: table;
    min-width: 108px;
    margin: 8px auto !important;
    padding: 3px 5px !important;
    border: 1px solid var(--socsub1) !important;
    border-radius: 7px !important;
    background: var(--socsub6) !important;
    color: var(--soctext3) !important;
    font-weight: 700;
    font-size: 10px;
    text-align: center;
}

html.soc-editor-page #pun #post-preview .post-box.soc-date-post,
html.soc-editor-page #pun #post-preview .post-content.soc-date-post {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

html.soc-editor-page #pun #post-preview .quote-box.soc-reply-card {
    margin: 4px 0 9px !important;
    padding: 6px 8px !important;
    overflow: hidden;
    border: 0 !important;
    border-left: 3px solid var(--soctext1) !important;
    border-radius: 0 5px 5px 0 !important;
    background: var(--socsub3) !important;
}

html.soc-editor-page #pun #post-preview .quote-box.soc-reply-card > cite {
    display: block !important;
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 3px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--soctext1) !important;
    font-size: 10px !important;
    text-transform: lowercase !important;
}

html.soc-editor-page #pun #post-preview .quote-box.soc-reply-card > cite a {
    padding: 5px 10px 2px;
    color: var(--soctext1) !important;
    font-size: inherit !important;
    text-decoration: none !important;
    text-transform: lowercase !important;
}

html.soc-editor-page #pun #post-preview .quote-box.soc-reply-card > cite a:hover { color: var(--soctexthover1) !important; }
html.soc-editor-page #pun #post-preview .quote-box.soc-reply-card > blockquote {
    max-height: 3em;
    margin: 2px 0 0 !important;
    padding: 5px 10px !important;
    overflow: hidden;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}
html.soc-editor-page #pun #post-preview .quote-box.soc-reply-card p { margin: 0 !important; font-size: 10px !important; line-height: 1.4 !important; }

html.soc-topic-page .soc-service-row {
    display: grid;
    grid-template-columns: minmax(180px, .85fr) minmax(0, 2fr);
    gap: 4px;
    width: 100%;
    margin: 0 0 7px;
    background-color: var(--socsub2);
    border-radius: 12px;
    border: 2px solid var(--socsub1);
}

html.soc-topic-page .soc-service-row #topic-modmenu,
html.soc-topic-page .soc-service-row .linksb {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 20px;
    margin: 0 !important;
    padding: 3px 8px !important;
    border-radius: 4px;
    background: var(--socsub2) !important;
}

html.soc-topic-page .soc-service-row .linksb {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

html.soc-topic-page #pun #pun-viewtopic .soc-service-row .linksb {
    min-height: 20px !important;
    margin: 0 !important;
    padding: 3px 8px !important;
    border-radius: 12px !important;
    background: var(--socsub2) !important;
}

html.soc-topic-page .soc-service-row .postlink { display: none !important; }

html.soc-topic-page #pun-viewtopic .modmenu .container {
    padding: 2px 10px;
    text-align: justify;
    font: 400 10px var(--font) !important;
    margin: 5px 0;
    background: var(--socsub2);
    border-radius: 6px;
}

html.soc-topic-page #pun #pun-viewtopic select,
html.soc-topic-page #pun #pun-viewtopic input {
    padding: 2px 15px !important;
    color: var(--text2) !important;
    background: var(--socsub6) !important;
    font: 400 10px var(--font), Verdana !important;
    box-sizing: border-box !important;
    border-radius: 12px !important;
}

html.soc-topic-page #post-form,
html.soc-editor-page #post-form,
html.soc-editor-page form#post {
    box-sizing: border-box;
    width: 100% !important;
    margin: 0 !important;
    padding: 10px 20px !important;
    border: 2px solid var(--socsub1) !important;
    border-radius: 12px 12px 0 0 !important;
    background: var(--socsub2) !important;
}

html.soc-topic-page #post-form form#post { padding: 0 !important; border: 0 !important; background: transparent !important; }

html.soc-topic-page #form-buttons,
html.soc-editor-page #form-buttons {
    position: relative;
    width: 100% !important;
    min-height: 35px;
    margin: 0 0 5px !important;
    overflow: visible !important;
}

html.soc-topic-page #form-buttons > table,
html.soc-editor-page #form-buttons > table { position: absolute !important; left: -9999px !important; top: 0 !important; }

html.soc-topic-page .soc-editor-toolbar,
html.soc-editor-page .soc-editor-toolbar {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 5px;
    width: 100% !important;
    min-height: 26px;
}

html.soc-topic-page #pun #pun-viewtopic .soc-tool-button,
html.soc-editor-page #pun .soc-tool-button {
    display: block !important;
    flex: 0 0 22px !important;
    box-sizing: border-box !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 26px !important;
    min-height: 26px !important;
    max-height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    box-shadow: none !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    cursor: pointer;
    opacity: .82;
    transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}

html.soc-topic-page #pun #pun-viewtopic .soc-tool-button:hover,
html.soc-editor-page #pun .soc-tool-button:hover {
    border: 0 !important;
    background-color: transparent !important;
    color: transparent !important;
    filter: brightness(1.18) drop-shadow(0 0 3px var(--soctexthover1));
    opacity: 1;
    transform: translateY(-1px);
}
html.soc-topic-page .soc-tool-voice, html.soc-editor-page .soc-tool-voice { background-image: var(--socvoice) !important; }
html.soc-topic-page .soc-tool-web, html.soc-editor-page .soc-tool-web { background-image: var(--socweb) !important; }
html.soc-topic-page .soc-tool-image, html.soc-editor-page .soc-tool-image { background-image: var(--socpict) !important; }
html.soc-topic-page .soc-tool-quote, html.soc-editor-page .soc-tool-quote { background-image: var(--socquote) !important; }
html.soc-topic-page .soc-tool-smile, html.soc-editor-page .soc-tool-smile { background-image: var(--socsmile) !important; }
html.soc-topic-page .soc-tool-date, html.soc-editor-page .soc-tool-date { background-image: var(--socdate, var(--socellipsis2)) !important; }
html.soc-topic-page #pun #pun-viewtopic .soc-tool-more,
html.soc-editor-page #pun .soc-tool-more {
    margin-right: 0 !important;
    margin-left: auto !important;
    background-image: var(--soclip) !important;
}

html.soc-topic-page .hvStickerPackModal,
html.soc-editor-page .hvStickerPackModal {
    padding-top: 32px !important;
}

html.soc-topic-page .hvStickerPackModal .soc-sticker-close,
html.soc-editor-page .hvStickerPackModal .soc-sticker-close {
    position: absolute !important;
    top: 6px !important;
    right: 7px !important;
    z-index: 5;
    display: grid !important;
    place-items: center;
    box-sizing: border-box !important;
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 0 2px !important;
    border: 1px solid var(--socsub1) !important;
    border-radius: 50% !important;
    background: var(--socsub4) !important;
    color: var(--soctext2) !important;
    box-shadow: none !important;
    font: 700 17px/1 Arial, sans-serif !important;
    cursor: pointer;
}

html.soc-topic-page .hvStickerPackModal .soc-sticker-close:hover,
html.soc-editor-page .hvStickerPackModal .soc-sticker-close:hover {
    color: var(--soctexthover1) !important;
    filter: brightness(1.08);
}

html.soc-topic-page .soc-more-menu,
html.soc-editor-page .soc-more-menu {
    position: absolute;
    top: 34px;
    right: 0;
    z-index: 100;
    display: none;
    width: 210px;
    padding: 7px;
    border: 1px solid var(--socsub1);
    border-radius: 8px;
    background: var(--socsub4);
    box-shadow: 0 8px 22px rgb(0 0 0 / 20%);
}

html.soc-topic-page .soc-more-menu.is-open,
html.soc-editor-page .soc-more-menu.is-open { display: grid; gap: 3px; }

html.soc-topic-page .soc-more-menu button,
html.soc-editor-page .soc-more-menu button {
    padding: 7px 9px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: var(--soctext2);
    font: 11px/1.2 var(--font, Arial, sans-serif);
    text-align: left;
    cursor: pointer;
}

html.soc-topic-page .soc-more-menu button:hover,
html.soc-editor-page .soc-more-menu button:hover { background: var(--socsub3); color: var(--soctexthover1); }

html.soc-topic-page #main-reply,
html.soc-editor-page #main-reply {
    box-sizing: border-box;
    width: 100% !important;
    min-height: 120px !important;
    padding: 11px !important;
    border: 1px solid var(--socsub1) !important;
    border-radius: 11px !important;
    background: var(--socsub2) !important;
    color: var(--soctext2) !important;
    box-shadow: none !important;
}

html.soc-topic-page #plng,
html.soc-editor-page #plng {
    position: absolute !important;
    right: 37px;
    top: 8px;
    display: flex !important;
    align-items: center;
    width: auto !important;
    height: 18px !important;
    color: var(--soctext2) !important;
}

html.soc-topic-page .formsubmit,
html.soc-editor-page .formsubmit { margin-top: 12px !important; }

html.soc-topic-page #mask_dialog .hv-mask-field.title,
html.soc-topic-page #mask_dialog .hv-mask-field.signature,
html.soc-topic-page #mask_dialog .hv-mask-field.pafld1,
html.soc-topic-page #mask_dialog .hv-masks-storage,
html.soc-editor-page #mask_dialog .hv-mask-field.title,
html.soc-editor-page #mask_dialog .hv-mask-field.signature,
html.soc-editor-page #mask_dialog .hv-mask-field.pafld1,
html.soc-editor-page #mask_dialog .hv-masks-storage { display: none !important; }

html.soc-topic-page #pun-crumbs2,
html.soc-topic-page #pun-about {
    width: 100% !important;
    margin: 0 !important;
    background: transparent !important;
}

html.soc-topic-page #pun-crumbs2,
html.soc-editor-page #pun-crumbs2 {
    box-sizing: border-box;
    margin: 0 !important;
    border: 2px solid var(--socsub1) !important;
    background: transparent !important;
}

html.soc-topic-page #pun-crumbs2 p.container,
html.soc-editor-page #pun-crumbs2 p.container {
    display: block;
    box-sizing: border-box;
    width: 100%;
    margin: 0 !important;
    padding: 8px 0 !important;
    border: 0 !important;
    background: var(--socsub2) !important;
    font: 600 10px / 1 var(--font);
    text-align: center;
}

html.soc-editor-page body { background: var(--background) !important; }
html.soc-editor-page #pun-main { max-width: 684px; margin-right: auto !important; margin-left: auto !important; }

@media (max-width: 760px) {
    html.soc-topic-page #pun-viewtopic { width: min(100% - 16px, 684px) !important; padding-top: 12px !important; }
    html.soc-topic-page #pun-navlinks { margin-bottom: 25px !important; }
    html.soc-topic-page .soc-nav-tools { width: 100%; justify-content: center; margin: 8px 0 0 !important; }
    html.soc-topic-page [id^="topic_t"] { height: calc(100svh - 125px); min-height: 480px; padding: 70px 9px 28px !important; }
    html.soc-topic-page [id^="topic_t"] > .post .post-box { width: min(88%, 360px) !important; }
    html.soc-topic-page .soc-service-row { grid-template-columns: 1fr; }
    html.soc-topic-page #post-form, html.soc-editor-page #post-form, html.soc-editor-page form#post { padding: 14px 12px !important; }
}

@media (prefers-reduced-motion: reduce) {
    html.soc-topic-page *, html.soc-editor-page * { scroll-behavior: auto !important; transition: none !important; }
}