@media (min-width:750px) {
    .buttonchat {
        box-shadow: 0 0 5px #000;
        transition: all 0.3s ease;
        z-index: 998;
        position: fixed;
        right: 12%;
        bottom: 10%;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        color: white;
        background-color: var(--dcc-rabbit, #f7a1cf);
        border: none;
    }

    .buttonchat>chtip {
        transition: all 0.3s ease;
        font-size: 36px;
    }

    .buttonchatL {
        box-shadow: 0 0 5px #000;
        transition: all 0.3s ease;
        z-index: 997;
        position: fixed;
        right: 12%;
        bottom: 10%;
        width: 50px;
        height: 25px;
        border-radius: 10% 75%;
        color: white;
        background-color: var(--dcc-rabbit, #f7a1cf);
        border: none;
        transform: translateX(-34.5px) translateY(-75px) rotate(70deg);
    }

    .buttonchatL>chtipL {
        transition: all 0.3s ease;
        font-size: 10px;
    }

    .buttonchatR {
        box-shadow: 0 0 5px #000;
        transition: all 0.3s ease;
        z-index: 996;
        position: fixed;
        right: 12%;
        bottom: 10%;
        width: 50px;
        height: 25px;
        border-radius: 75% 10%;
        color: white;
        background-color: var(--dcc-rabbit, #f7a1cf);
        border: none;
        transform: translateX(10px) translateY(-75px) rotate(-70deg);
    }

    .buttonchatR>chtipR {
        transition: all 0.3s ease;
        font-size: 10px;
    }

    @ media(any-hover:hover) {
        .buttonchat: hover {
            box-shadow: 0 0 8px #000;
            transition: all 0.3s ease;
            transform: scale(1.1);
        }

        .buttonchat:hover>chtip {
            transition: all 0.3s ease;
            display: none;
        }

        .buttonchat:hover:after {
            transition: all 0.3s ease;
            font-weight: bold;
            -webkit-text-stroke: 1px #754d63;
            content: "Chat!";
        }

        .buttonchatL:hover {
            box-shadow: 0 0 8px #000;
            transition: all 0.3s ease;
            transform: translateX(-31.5px) translateY(-75px) rotate(77deg);
        }

        .buttonchatL:hover>chtipL {
            transition: all 0.3s ease;
            display: none;
        }

        .buttonchatL:hover:after {
            transition: all 0.3s ease;
            font-weight: bold;
            -webkit-text-stroke: 1px #754d63;
            content: "Disk!";
        }

        .buttonchatR:hover {
            box-shadow: 0 0 8px #000;
            transition: all 0.3s ease;
            transform: translateX(7px) translateY(-75px) rotate(-77deg);
        }

        .buttonchatR:hover>chtipR {
            transition: all 0.3s ease;
            display: none;
        }

        .buttonchatR:hover:after {
            transition: all 0.3s ease;
            font-weight: bold;
            -webkit-text-stroke: 1px #754d63;
            content: "Wiki!";
        }
    }

}

@media (max-width:749.98px) {
    .buttonchat {
        box-shadow: 0 0 5px #000;
        transition: all 0.3s ease;
        z-index: 998;
        position: fixed;
        right: 12%;
        bottom: 10%;
        width: calc(~"6.7vw + 25px");
        height: calc(~"6.7vw + 25px");
        border-radius: 50%;
        color: white;
        background-color: var(--dcc-rabbit, #f7a1cf);
        border: none;
    }

    .buttonchat>chtip {
        transition: all 0.3s ease;
        font-size: calc(~"3.2vw + 12px");
    }

    .buttonchatL {
        box-shadow: 0 0 5px #000;
        transition: all 0.3s ease;
        z-index: 997;
        position: fixed;
        right: 12%;
        bottom: 10%;
        width: calc(~"4.44vw + 16.67px");
        height: calc(~"2.22vw + 8.33px");
        border-radius: 10% 75%;
        color: white;
        background-color: var(--dcc-rabbit, #f7a1cf);
        border: none;
        transform: translateX(calc(~"-3.07vw - 11.5px")) translateY(calc(~"-6.7vw - 25px")) rotate(70deg);
    }

    .buttonchatL>chtipL {
        display: inline-block;
        transform: translateY(calc(~"-3px + 0.2vw"));
        transition: all 0.3s ease;
        font-size: calc(~"0.89vw + 3.33px");
    }

    .buttonchatR {
        box-shadow: 0 0 5px #000;
        transition: all 0.3s ease;
        z-index: 996;
        position: fixed;
        right: 12%;
        bottom: 10%;
        width: calc(~"4.44vw + 16.67px");
        height: calc(~"2.22vw + 8.33px");
        border-radius: 75% 10%;
        color: white;
        background-color: var(--dcc-rabbit, #f7a1cf);
        border: none;
        transform: translateX(calc(~"0.89vw + 3.33px")) translateY(calc(~"-6.7vw - 25px")) rotate(-70deg);
    }

    .buttonchatR>chtipR {
        display: inline-block;
        transform: translateY(calc(~"-3px + 0.2vw"));
        transition: all 0.3s ease;
        font-size: calc(~"0.89vw + 3.33px");
    }

    @ media(any-hover:hover) {
        .buttonchat: hover {
            box-shadow: 0 0 8px #000;
            transition: all 0.3s ease;
            transform: scale(1.1);
        }

        .buttonchat:hover>chtip {
            transition: all 0.3s ease;
            display: none;
        }

        .buttonchat:hover:after {
            display: inline-block;
            transition: all 0.3s ease;
            font-weight: bold;
            font-size: calc(~"2.22vw + 8.33px");
            -webkit-text-stroke: 1px #754d63;
            content: "Chat!";
            transform: translateX(calc(~"-1px + 0.1vw")) translateY(calc(~"-3px + 0.2vw"));
        }

        .buttonchatL:hover {
            box-shadow: 0 0 8px #000;
            transition: all 0.3s ease;
            transform: translateX(calc(~"-2.8vw - 10.5px")) translateY(calc(~"-6.7vw - 25px")) rotate(77deg);
        }

        .buttonchatL:hover>chtipL {
            transition: all 0.3s ease;
            display: none;
        }

        .buttonchatL:hover:after {
            transition: all 0.3s ease;
            font-weight: bold;
            font-size: calc(~"1.42vw + 5.33px");
            -webkit-text-stroke: 1px #754d63;
            content: "Disk!";
        }

        .buttonchatR:hover {
            box-shadow: 0 0 8px #000;
            transition: all 0.3s ease;
            transform: translateX(calc(~"0.62vw + 2.33px")) translateY(calc(~"-6.7vw - 25px")) rotate(-77deg);
        }

        .buttonchatR:hover>chtipR {
            transition: all 0.3s ease;
            display: none;
        }

        .buttonchatR:hover:after {
            transition: all 0.3s ease;
            font-weight: bold;
            font-size: calc(~"1.42vw + 5.33px");
            -webkit-text-stroke: 1px #754d63;
            content: "Wiki!";
        }
    }

}

.rabbit-top-face {
    position: absolute;
    transform: translate(-125%, 15%);
}

.rabbit-top-face,
.rabbit-norm-face {
    transition: all 0.3s ease;
}

.DiscussionListItem-main mark {
    background: #FFFF66 !important;
    color: #f44336 !important;
}

@media (max-width:767.98px) {

    .buttonchat,
    .buttonchatL,
    .buttonchatR {
        display: none;
    }

    .DiscussionPage-nav>ul>li {
        margin: 15px auto;
    }

    .DiscussionPage-nav>ul {
        margin: auto calc(~"5% - 15px");
        justify-content: center;
        display: flex;
    }

    .DiscussionHero .TagsLabel .TagLabel.colored,
    .DiscussionHero .TagsLabel .TagLabel--colored {
        margin: 10px 5px 0 0;
    }

    .DiscussionHero-items>.item-who-read {
        display: none;
    }

    .Post-header>ul>.item-edited {
        display: none;
    }

    .Post-footer>ul>.item-liked>.Post-likedBy {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

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

    .DiscussionListItem-main {
        padding: 8px 0;
    }

    .Hero .container {
        padding-top: 12px;
        padding-bottom: 5px;
    }

    .PostStream>.TypingUsersContainer {
        margin-top: 25px;
    }

    .TypingUsersContainer-active>.TypingUsers {
        max-width: 73px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .TypingUsersContainer-active>.TypingUsers>i {
        display: none;
    }

    .item-lastDiscussionViewers {
        display: none !important;
    }

    div .App-content {
        padding-bottom: 0px;
    }

    footer {
        padding-bottom: var(--mobile-tab-height);
    }

    .Post footer {
        padding-bottom: 20px;
    }

    .IndexPage-nav .SubscriptionButton {
        right: 38px !important;
        padding-top: 10px;
    }

    .item-forum-checkin-1 {
        right: 80px !important;
    }

    .AfruxWidgets-topWidgetSection,
    .AfruxWidgets-bottomWidgetSection {
        margin-top: 15px !important;
    }
}

@media (min-width:768px) {
    .App-header .Button--icon {
        background: transparent;
    }

    .Dropdown-menu>.item-filter-toolbar {
        display: none;
    }

    .Post-header>ul>li.item-isBestAnswer {
        margin-top: 0px !important;
        position: absolute;
        right: 10px;
        transform: translateY(-2px);
    }

    .DiscussionPage-stream .TypingUsersContainer {
        background: transparent;
        transform: translateY(5px);
    }

    aside .item-discussion-views {
        display: none;
    }
}

@media (max-width:991.98px) {
    li.item-forum-checkin {
        margin-bottom: 0 !important;
    }
}

@media (max-width:1439.98px) {
    .Post-footer .item-bestAnswerPost {
        margin-bottom: 25px;
    }
}

@media (min-width:768px) and (max-width:991.98px) {
    .Search-input input {
        width: 30px;
        max-width: 75px;

        &: :placeholder {
            opacity: 0;
        }
    }

    .Search.focused .Search-results,
    .Search.focused input {
        width: 75px;
    }

    .Search.focused {
        margin-left: auto
    }

    .Header-controls>*>.LinksButton,
    .ButtonGroup>.Button.Button--link {
        .LinksButton-title {
            display: none
        }
    }

    .Post .Post-footer:has(.item-liked),
    .Post-footer:has(.item-replies) {
        margin-bottom: 20px !important
    }



}

@media (min-width:992px) and (max-width:1099.98px) {
    .Search-input input {
        width: 120px;
        max-width: 120px;

        &: :placeholder {
            opacity: 0;
        }
    }

    .Search.focused .Search-results,
    .Search.focused input {
        width: 120px;
    }

    .Search.focused {
        margin-left: auto
    }

}

@media (min-width:1100px) and (max-width:1439.98px) {
    .Search-input input {
        width: 150px;
        max-width: 150px;
    }

    .Search.focused .Search-results,
    .Search.focused input {
        width: 150px
    }

    .Search.focused {
        margin-left: auto
    }
}

@media (min-width:1440px) {
    .Search-input input {
        width: 325px;
        max-width: 400px;
    }

    .Search.focused .Search-results,
    .Search.focused input {
        width: 400px
    }

    .Search.focused {
        margin-left: auto
    }

    .IndexPage .DiscussionListItem-info>.item-tags,
    .UserPage .DiscussionListItem-info>.item-tags {
        max-width: 250px !important;
        -webkit-mask-image: linear-gradient(to right, #000 240px, rgba(0, 0, 0, 0) 250px) !important;
    }

    .IndexPage .DiscussionListItem-info>.item-tags:hover,
    .UserPage .DiscussionListItem-info>.item-tags:hover {
        max-width: 400px !important;
        -webkit-mask-image: none !important;
    }

    .IndexPage .DiscussionListItem-title,
    .UserPage .DiscussionListItem-title {
        margin-right: 255px !important;
    }
}

@screen-desktop-hd-max: (@screen-desktop-hhd - 1);

@screen-desktop-hhd: 1440px;

@desktop-hd: ~"(min-width: @{screen-desktop-hd}) and (max-width: @{screen-desktop-hd-max})";

@desktop-hhd: ~"(min-width: @{screen-desktop-hhd})";

:root {
    --screen-desktop-hhd: 1440px;
}

@media (min-width: 1440px) and (max-width: 2160px) {
    .container {
        width: 1440px
    }
}

@media (min-width: 2160px) {
    .container {
        width: 1600px
    }
}

.item-like .Button:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 14px;
    content: '\f164';
    vertical-align: -1px;
    margin-right: 4px;
}

.item-reply .Button--link:before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 600;
    font-size: 15px;
    content: '\f3e5';
    margin-right: 4px;
    vertical-align: -2px;
}

@media (min-width:999.98px) {}

@media (min-width:1400px) {
    .TagSelectionModal-form {
        display: table;
        width: 100%;
    }

    .TagSelectionModal-form-input {
        display: table-cell;
        width: 100%;
        vertical-align: top;
    }

    .TagSelectionModal-form-submit {
        display: table-cell;
        padding-left: 15px
    }
}

.item-bestAnswer {
    button {
        background-color: transparent;
        color: #936c83;
        font-weight: normal;
        margin: 0px 0px !important;
        padding-left: 13px;
        padding-right: 13px;
    }

    button:hover {
        background-color: transparent;
        color: #f7a1cf
    }

    button:active {
        background-color: transparent;
        color: #f7a1cf
    }

    .Button:before {
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        font-size: 15px;
        content: '\f5c0';
        margin-right: 4px;
        vertical-align: -2px;
    }
}

.Post {
    .item-who-read-unread {
        button {
            i {
                position: relative;
                left: 2px;
            }

            span {
                display: none
            }

            width: 36px;
            text-align: center;
            padding: 8px 0;
            background: transparent;
            border-radius: 18px;
        }

        button:hover {
            background-color: #181015
        }

        button:active {
            background-color: #090608
        }

        position:relative;
        bottom:-3px;
        left:-6px;
    }
}

.Alert--success {
    -webkit-animation: fade-out 6s ease-in-out 0s 1 alternate forwards;
    animation: fade-out 6s ease-in-out 0s 1 alternate forwards;
}

.Alert--alert,
.Alert--undefined {
    -webkit-animation: fade-half 6s ease-in-out 0s 1 alternate forwards;
    animation: fade-half 6s ease-in-out 0s 1 alternate forwards;
}

.Alert--error {
    -webkit-animation: fade-loop 1.5s ease-in-out 0s infinite alternate forwards;
}

@keyframes fade-out {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes fade-half {
    0% {
        opacity: 1;
    }

    66% {
        opacity: 1;
    }

    100% {
        opacity: 0.67;
    }
}

@keyframes fade-loop {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0.5;
    }
}

.item-moreTags {
    span: before {
        position: absolute;
        color: #936c83;
        font-family: 'Font Awesome 5 Free';
        font-weight: 600;
        font-size: 15px;
        content: '\f141';
        transform: translateX(-30px);
    }
}

@media (min-height:100px) and (max-height:1000px) and (min-width:992px) {
    .IndexPage-nav .item-nav {
        max-height: calc(~"100vh - 190px") !important;
        height: calc(~"100vh - 190px") !important;
    }
}

@media (min-width:992px) {

    .IndexPage-nav .item-newDiscussion {
        margin-bottom: 10px !important;
    }

    .sideNav .Dropdown--select .Dropdown-menu {
        margin-top: 10px !important;
    }
}

.Settings-account {
    .item-username-request {

        display: none;
    }
}

.NotificationsDropdown-unread {
    z-index: 3;
}

.DiscussionList-loadMore>.Button {
    width: 90%;
    --button-color: var(--button-primary-color);
    --button-bg: var(--button-primary-bg);
    --button-bg-hover: var(--button-primary-bg-hover);
    --button-bg-active: var(--button-primary-bg-active);
    --button-bg-disabled: var(--button-primary-bg-disabled);
    font-weight: bold;
    padding-left: 20px;
    padding-right: 20px
}

.Post-body a {
    transition: all 0.3s ease-in-out;
}

.Post-body a:hover,
.Post-body a:focus,
.Post-body a:active {
    border-color: var(--control-bg);
    transition: all 0.15s ease-in-out;
    color: var(--heading-color);
}

.dplayer-video-wrap .dplayer-video-current {
    border-radius: 5px;
}

.dplayer-video-wrap {
    background: var(--control-bg-shaded) !important;
    border-radius: 5px;
}

.dplayer-controller-mask {
    border-radius: 5px;
}

.Post-body img,
.Post-body iframe {
    border-radius: 5px;
}

.Button--flat {
    transition: all 0.15s ease-in-out;
}

.ButtonGroup .Button+.tooltip+.Button {
    margin-left: 1px;
}

.item-nightmode>.Button {
    padding: 8px 11px;
}

.sideNav>ul>.item-nav {
    scrollbar-width: auto !important;
}

.Afrux-NewsWidget-line {
    white-space: nowrap;
    overflow: hidden;
}

.item-filter-toolbar>.Button--filter-toolbar {
    text-align: left;
}

.TypingUsersContainer {
    padding: 8.25px 13px !important;
}

.item-nightmode .Button .Button-label {
    margin-left: 7px;
}

.Post-header>ul>li {
    display: inline-block;
}

.OriginalPosterBadge {
    position: relative;
    top: -1px;
    background: var(--button-bg);
    border-radius: 50px;
    padding: 5px 10px;
}

.OriginalPosterBadge:hover {
    background-color: var(--button-bg-hover);
}

.OriginalPosterBadge:active {
    background-color: var(--button-bg-active);
}

.MobileTab-items>li>a>.Button-icon,
.MobileTab-items>li>div>button>.Avatar,
.MobileTab-items>li>.Button>i {
    filter: drop-shadow(0 0 5px var(--fade-link-color));
}

.MobileTab-items>ul>li>a.hasIcon,
.MobileTab-items>li>.Button,
.MobileTab-items>li>.Dropdown>.Button {
    color: var(--link-color) !important;
}

.Button--link:hover {
    color: #f7a1cf;
}

.Post-body a {
    border-bottom: none;
}

.Post .Post-body {
    width: 100%;
    display: inline-block;

    :is(p, h1, h2, h3, h4, h5, h6, li): not(:has(span, div, audio, video, iframe)) {
        width: fit-content;
        max-width: 100%;
    }

    >*:has(span, div, audio, video, iframe) {
        width: 100%;
    }
}

.Post .Post-actions {
    display: inline-block;
}

.Post .Post-footer:has(.item-liked),
.Post-footer:has(.item-replies) {
    display: block;
    height: auto;
    margin-bottom: 0;
}

.Post .Post-footer:not(:has(.item-liked)):not(:has(.item-replies)):not(:has(.item-warnings>*>*)) {
    display: none;
}

.Post .Post-actions {
    position: absolute;
    right: 1em;
    bottom: 0.4em;
}

.Post .Post-body>p:last-child {
    margin-bottom: 0;

    &: not(:has(img, span, div, audio, video, iframe)) {
        display: inline-block;
    }
}

.Synopsis-excerpt>* {
    margin: 0;

    &: is(.dplayer-container) {
        display: none;
    }

    &:is(img) {
        display: -webkit-inline-box;
    }

    &:not(img) {
        display: -webkit-box;
    }

    &:nth-child(-n+1) {
        -webkit-line-clamp: 2;
    }

    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow:ellipsis;
    overflow: hidden;
    vertical-align: top;
}

.Synopsis-excerpt>*:not(:has(*)) {
    display: -webkit-box;
}

.Synopsis-excerpt img {
    max-height: 100px !important;
    height: 100px;
    max-width: 250px !important;
    object-fit: cover !important;
}

.Synopsis-excerpt code {
    display: none !important;
}

.Synopsis-excerpt>*>*>*>* {
    display: none;
}

.TypingUsersContainer .TypingUsers .icon {
    font-size: 14px !important;
}

.TagCategory.SubCategory .TagCategory-content .TagCategory-icon .CategoryIcon {
    color: #fff !important;
}

.Synopsis-excerpt :is(h1, h2, figure) {
    display: none;
}

.Synopsis-excerpt [data-s9e-mediaembed] {
    display: none !important;
}

span[data-s9e-mediaembed="music163"]>span,
span[data-s9e-mediaembed="music163"]>span>iframe {
    height: 85px !important;
    padding-bottom: 0 !important;
}

.dplayer-controller {
    width: auto !important;
}

.dplayer-container {
    max-width: 400px;
}

.Synopsis-excerpt span[data-s9e-mediaembed="googledrive"]>span,
.Synopsis-excerpt span[data-s9e-mediaembed="googledrive"]>span>iframe {
    height: 200px !important;
    padding-bottom: 0 !important;
    max-width: 320px !important;
}

/*

.Synopsis-excerpt>*:is(h1,h2,h3,h4,h5,h6,p):nth-child(n+4){
display:none !important;
}



.Synopsis-excerpt > p > :nth-child(n+4) {
    display: none !important;
}

.Synopsis-excerpt > :nth-child(n+4) {
    display: none !important;
}
*/

.Synopsis-excerpt :is(audio, iframe),
.Synopsis-excerpt p:has(audio, iframe) {
    display: none;
}

.item-lastDiscussionViewers {
    padding-top: 36px;
}

a .item-discussion-views {
    min-width: 50px;
    width: auto;
}

.Post-body img[title][alt] {
    max-height: 200px;
}

p:has(> a:only-child > img[title][alt]) {
    display: -webkit-inline-box;
    margin-right: 5px;
}

p:has(> img[title][alt]:only-child) {
    display: -webkit-inline-box;
    margin-right: 5px;
}

.Post-actions-placeholder {
    width: 18em !important;
    height: calc(~"1em + 6px");
    float: right;
    display: inline-block;
}

.item-replies {
    pointer-events: none;
}

.item-replies>* {
    pointer-events: all;
}

.Post-header:has(li.item-isBestAnswer) {
    background: linear-gradient(90deg, rgba(88, 164, 0, 0.46), transparent);
    border-radius: 3px 0 0 3px;

    .OriginalPosterBadge,
    .OriginalPosterBadge: hover,
    .OriginalPosterBadge:active {
        background: transparent;
    }
}

.item-lastUser-content>div>p {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100px;
}

.Post-footer>ul {
    display: inline-block;
    width: fit-content;
}

.Post-body code {
    padding: 0.3em;
    display: inline-block;
}

button.LinksButton--label {
    color: var(--header-colored-control-color) !important
}

.ReplyPlaceholder {
    margin-top: 25px !important;
}

.DiscussionReferencedPost,
.DiscussionRenamedPost .Post-actions {
    bottom: 2em;
}

body {
    overflow-y: auto;
}

:root {
    --link-color: #f7a1cf;
}