#conversejs.theme-darkbeet {
    --green: #25DB77;
    --orange: #E19823;
    --light-blue: #4E9CFE;
    --pink: #BD23E1;
    //--beet: #2E1520;
    --beet: #360101;
    --beet-green: rgb(25, 68, 71);
    --beet-light-green: #8EB726;
    --beet-orig: #50162D;
    --blue: #4E9CFE;
    --darkest-grey: #232323;
    --red: #d33b2b;
    --dark-link-color: #3a3a3a; // $dark-blue
    --occupants-background-color: #333;
    --form-background: #3b3b3b;


    --global-background-color: var(--darkest-grey); // dark blue
    --redder-orange: var(--beet);
    --primary-color: var(--beet-orig);
    --primary-color-dark: var(--beet);
    --highlight-color-darker: var(--beet-light-green);
    --highlight-color: var(--beet);
    --headline-head-color: var(--beet-green);
    --text-color: #c5c5c5;
    --text-color-lighten-15-percent: #e9e9e9; // lighten(#666, 15%)
    --message-text-color: var(--text-color);
    --text-controlbox-color: #d9d9d9;
    --message-receipt-color: var(--darkest-grey);
    --link-color: var(--beet-light-green);
    --error-color: var(--danger-color-dark);
    
    --chat-textarea-color: var(--font-hover-head-color);
    --chat-textarea-background-color: #2c2c2c;
    --chat-content-background-color: #2c2c2c;
    
    --controlbox-heading-top-margin: 0.75em;
    --inline-action-margin: 0.75em;
    
    --chat-head-color: var(--beet-green);
    --chat-head-color-dark: #b9b9ac;
    --chat-head-color-darker: #e8e8e3;
    --chat-correcting-color: var(--beet);
   
    --chatbox-border-radius: 0px;
    --controlbox-head-color-lighten-45-percent: #0e0e0e; // lighten($light-blue, 45%)
    --controlbox-pane-background-color: var(--darkest-grey);
    
    --font-head-color: #777;
    --font-hover-head-color: #c5c5c5;
    --chatroom-width: 100%;
    --chatroom-correcting-color: var(--beet); // lighten($red, 30%)
    
    --font-size-tiny: 10px;
    --font-size-small: 12px;
    --font-size-occupants: 100%;
    --font-size: 14px;
    --font-size-large: 16px;
    --font-size-huge: 20px;
    
    --chat-separator-border-bottom: 2px solid var(--beet);
    --chatroom-separator-border-bottom: 2px solid var(--beet);
    --message-background-color: #303030;
    --message-input-border-top: 4px solid var(--beet);
    --message-mention-color: #404040;
    --message-mention-self-color: #AB3131;
    --message-separator-background-color: #2E1520;
    
    //--occupants-background-color: var(--darkest-grey);
    
    --embedded-emoji-picker-height: 200px;
    --avatar-border-radius: 50%;
    
    --fullpage-emoji-picker-height: 200px;
   
    --overlayed-emoji-picker-height: 100px;
    
        
    --list-toggle-color: #818479; // $gray-color
    --list-toggle-hover-color: #585B51; // $dark-gray-color
    --list-toggle-font-weight: normal;
    --list-item-action-color: #e3eef3; // lighten($lightest-blue, 25%)
    --list-item-link-color: inherit;
    --list-item-link-hover-color: var(--list-item-action-color);
    --list-item-open-color: var(--chat-content-background-color);
    --list-item-open-hover-color: var(--beet);
    --list-dot-circle-color: #f6dec1; // lighten($orange, 25%)
    //--form-background: #3b3b3b;
    
    //--occupants-background-color: #333;

    ::-webkit-scrollbar {
        width: 5px;
        height: 5px;
        background-color: var(--darkest-grey);
        }
        ::-webkit-scrollbar-track-piece  {
        background-color: var(--darkest-grey);
        }
        ::-webkit-scrollbar-thumb:vertical {
        height: 15px;
        background-color: var(--occupants-background-color);
        }
        .scroller {
            width: 300px;
            height: 100px;
            overflow-y: scroll;
            scrollbar-color: var(--occupants-background-color) var(--darkest-grey);
          }
        scrollbar-color: var(--occupants-background-color) var(--darkest-grey);
        scrollbar-width: thin;


    
    
    
    
    //bookmarks.scss
    #controlbox {
        .bookmarks-toggle, .bookmarks-toggle .fa {
            color: var(--chatroom-head-bg-color-dark) !important;
            &:hover {
                color: var(--orange) !important;
            }
        }
    }
    //_chatbox.scss
    .chatbox {
        .chatroom {
            .sendXMPPMessage {
                background-color: var(--message-background-color);
            }
        }
            .new-msgs-indicator {
                position: relative;
                width: 100%;
                cursor: pointer;
                padding: 0.5em;
                font-size: 0.9em;
                text-align: center;
                z-index: 20;
                white-space: nowrap;
                margin-bottom: 0.25em;
        }
    
        .sendXMPPMessage {
            .chat-textarea {
                color: var(--chat-textarea-color);
                background-color: var(--chat-textarea-background-color);
                resize: none;
                margin-top: 1px;
                padding-left: 7px;
                &:active, &:focus {
                    outline-color: unset !important;
                    outline: unset !important;
                }
                &.spoiler {
                    height: 42px;
                }
                &.correcting {
                    background-color: var(--chat-textarea-background-color);
                }
            }
        }
    }
    //_chatrooms.scss
    .chatroom {
        .sendXMPPMessage {
            background-color: var(--message-background-color);
        }
        .chat-textarea {
            color: var(--chat-textarea-color);
            background-color: var(--chat-textarea-background-color);
            resize: none;
            margin-top: 1px;
            padding-left: 7px;
            &.correcting {
                background-color: var(--chat-textarea-background-color);
                margin-bottom: -3px;
                border-width: 2px;
                border-style: dotted;
                border-color: var(--red);
            }
            .chat-textarea {
                &:active, &:focus{
                   outline-color: red !important;
                }
            }
        }
        .sendXMPPMessage {
            .chat-textarea {
            }
        }
        .box-flyout {
            .chatroom-body {
                .chat-info {
                    color: var(--red);
                }
            }
            .chatroom-body {
                .occupants {
                    border-left: unset;
                }
                .chatroom-form-container {
                    background-color: var(--dark-link-color);
                }
                .chatroom-form {
                    background-color: var(--dark-link-color);
                }
            }
            .occupants {
              flex: 0 0 0;
            }
        }
    }
    //_controlbox.scss
    #controlbox {
        .open-rooms-toggle, .open-rooms-toggle .fa {
            color: var(--chatroom-head-bg-color-dark) !important;
            &:hover {
                color: var(--orange) !important;
            }
        }
        .controlbox-section {
            .controlbox-heading--groupchats {
                color: var(--orange);
            }
        }
        .controlbox-pane {
            dd {
                background-color: var(--beet);
            }
        }
        .controlbox-panes {
            border-right: unset;
        }
    }
    //_core.scss
    .avatar {
        border-radius: var(--avatar-border-radius);
        border: none;
        background-color: unset;
        //object-fit: fill;
        //background-size: cover;
    }
    .dropdown-menu {
        color: var(--text-color);
        background-color: var(--darkest-grey);
        &:active, &.selected {
            color: var(--text-color-lighten-15-percent) !important;
            background-color: var(--occupants-background-color);
        }
    }
    .dropdown-item {
        color: var(--text-color);
        &:active, &.selected {
            color: var(--text-color-lighten-15-percent) !important;
            background-color: var(--occupants-background-color)
        }
        &:hover {
            background-color: var(--occupants-background-color)
        }
    }
    ::-webkit-scrollbar-thumb {
        background: var(--list-item-action-color);
        border-radius: 10px;
    }
    ::-webkit-scrollbar-track {
        background: var(--beet); 
    }
    //_emoji.scss
    .chatbox {
        img.emoji {
            height: 1.2em;
            width: 1.2em;
            margin: 0 .05em 0 .1em;
            vertical-align: -0.1em;
        }

        .sendXMPPMessage {
            .toggle-smiley {
                a.toggle-smiley {
                    padding: 0;
                }
            }
        }

        converse-emoji-dropdown {
            display: inline-block;
            .dropdown-menu {
                padding: 0;
            }
        }

        converse-emoji-picker {
            width: 100%;
            padding-top: 0;
            padding-bottom: 0;
            background-color: var(--occupants-background-color);
            overflow-y: hidden;
            background: var(--occupants-background-color);
            .emoji-picker__lists {
                height: 8em;
                overflow-y: auto;
                .emoji-category__heading {
                    clear: both;
                    color: var(--subdued-color);
                    cursor: auto;
                    display: block;
                    font-size: var(--font-size);
                    margin: 0;
                    padding: 0.75em 0 0 0.5em;
                }

                .emoji-lists__container {
                    overflow-x: hidden;
                }

                .emoji-picker {
                    li {
                        float: left;
                    }
                }
                display: flex;
                flex-direction: column;
            }
            .emoji-skintone-picker {
                display: flex;
                label {
                    margin: 0;
                    padding: 0 0.5em;
                    white-space: nowrap;
                    font-size: var(--font-size-small);
                    color: var(--heading-color);
                }
                ul {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    li {
                        padding: 0 0.25em;
                    }
                }
                padding: 0.5em 0;
                background-color: var(--occupants-background-color);
                width: auto;
                font-size: var(--font-size);
            }
            .emoji-picker {
                background-color: var(--occupants-background-color);
                padding: 0.5em 0 0 0.5em;
                &:last-child {
                    padding-bottom: 0.5em;
                }
                li {
                    display: inline-block;
                    height: calc(var(--font-size-huge) * 1.5);
                    width: calc(var(--font-size-huge) * 1.5);
                    overflow: hidden;
                    margin-left: 0;
                    list-style: none;
                    position: relative;
                    &.insert-emoji {
                        padding: 0 0.2em;
                        height: auto;
                        width: auto;
                        margin: 0;
                        display: block;
                        text-align: center;
                        &.selected a {
                            background-color: var(--occupants-background-color);
                        }
                        img {
                            margin: 0 auto;
                            height: var(--font-size-huge);
                            width: var(--font-size-huge);
                            display: inline-block;
                            vertical-align: baseline;
                        }
                        a {
                            padding: 3px;
                            display: inline-block;
                            font-size: var(--font-size-huge);
                            line-height: calc(var(--font-size-huge) * 1.5);
                            height: calc(var(--font-size-huge) * 1.5);
                            width: calc(var(--font-size-huge) * 1.5);
                            overflow: hidden;
                            &:hover {
                                background-color: var(--occupants-background-color);
                            }
                        }
                    }
                }
            }
            .emoji-picker__header {
                display: flex;
                flex-direction: column;
                padding: 0.1em 0;
                background-color: var(--occupants-background-color);
                .emoji-search {
                    width: auto;
                    margin: 0.25em;
                    height: 2em;
                    font-size: var(--font-size-small);
                }
                ul {
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;

                    .emoji-category {
                        padding: 0.25em 0;
                        font-size: var(--font-size-huge);
                        &.picked {
                            background-color: var(--occupants-background-color);
                            border: 1px var(--chat-head-color) solid;
                            border-bottom: none;
                        }
                        &.selected a, &:hover a {
                            background-color: var(--occupants-background-color);
                        }
                        a {
                            padding: 0.25em;
                            display: inline-block;
                        }
                        img {
                            height: var(--font-size-huge);
                            width: var(--font-size-huge);
                        }
                    }
                }
            }
        }
    }

    .chatroom {
        converse-emoji-picker {
            background-color: var(--occupants-background-color);
            background: white;
            .emoji-skintone-picker {
                background-color: var(--occupants-background-color);
            }
            .emoji-picker__header {
                background-color: var(--occupants-background-color);
                ul {
                    .emoji-category {
                        &.picked {
                            border: 1px var(--chatroom-head-bg-color) solid;
                            border-bottom: none;
                        }
                    }
                }
            }
        }
    }

    //_lists.scss
    .items-list {
        .list-item {
            &:hover {
                color: var(--text-color);
                background-color: var(--beet);
                .fa, .far, .fas {
                    opacity: 1;
                }
            }
            &.open {
                border-left: 4px solid var(--red);
                background-color: var(--list-item-open-color);
                &:hover {
                    color: var(--text-color);
                    background-color: var(--list-item-open-hover-color) !important;
                }
            }
        }
        .list-item-badge {
            color: var(--text-color);
            float: right;
            text-align: center;
            width: 22px;
            background-color: var(--red);
            border-radius: 50%;
            padding: .5em;
            font-size: var(--font-size-small);
        }
    }
    // _messages.scss

        .message {
            .mention {
                font-weight: bold;
                border-width: 0px;
                border-radius: .25rem;
                background-color: var(--message-mention-color);
                color: var(--text-color-lighten-15-percent);
                padding: 0.25em;
            }
            .mention--self {
                background: var(--message-mention-self-color);
            }
            &.correcting {
                &.groupchat  {
                    background-color: unset;
                    border-style: dotted;
                    border-radius: 1em;
                    border-color: var(--red);
                    border-width: .2em;
        
                }
                &:not(.groupchat) {
                    background-color: unset;
                    border-style: solid;
                    border-radius: 1em;
                    border-color: var(--red);
                }
            }
            .chat-msg__heading {
                .chat-msg__author {
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    color: var(--orange);
                    font-family: var(--heading-font);
                    font-size: 115%;
                    font-weight: bold;
                    padding-bottom: 1px; // Hack to avoid cutting of text on the button
                }
            }
            &.chat-msg {
                &.chat-msg--followup {
                    &.chat-msg--with-avatar .chat-msg__content {
                        margin-left: 1rem;
                        margin-top: .5rem;
                }
            }
          }
        }
        .chat-msg__content {
            margin-left: 1rem;
        }
        .chat-msg__text {
            display: inline;
            color: var(--message-text-color);
            padding: unset;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-word;
            line-height: 1em;
        }
        .chat-msg__message {
            display: inline-flex;
            flex-direction: column;
            width: unset;
            overflow-wrap: break-word;
        }
        .chat-msg__avatar {
            height: var(--message-avatar-height);
            width: var(--message-avatar-width);
            display: block;
            margin-left: auto;
            margin-right: auto;
            background-size: cover;
        }
        .message {
            .mention {
                font-weight: bold;
            }
            .mention--self {
                font-weight: normal;
            }
            &.date-separator {
                height: 2em;
                margin: 0;
                position: relative;
                text-align: center;
                z-index: 0;
                .separator {
                    border-top: 0px;
                    border-bottom: var(--global-background-color);
                    border-style: solid;
                }
                .separator-text {
                    background: var(--global-background-color);
                    bottom: 1px; // Offset needed due to .separator border size
                    color: var(--chatbox-separator-text);
                    display: inline-block;
                    line-height: 2em;
                    padding: 0 1em;
                    position: relative;
                    z-index: 5;
                    border-style: solid;
                    border-radius: 2em;
                    border-width: 0px;
                }
            }
            &.separator {
                .separator-text {
                    background: var(--beet);
                    color: var(--chatroom-head-color);
                    border-radius: 2em;
                }
            }
        }
        .chat-image {
            border-radius: 2em;
            max-height: 25em;
            transition: 0.5s;
            border: 0px;
            margin-left: 5em;
            margin-top: 2em;
            &:hover {
                filter: grayscale(1) ;
            }
        }
        .img-thumbnail {
            background-color: unset;
        }
        .message.chat-msg {
            .chat-msg__media {
                margin-top: 0.25rem;
                word-break: break-all;
                a {
                    word-wrap: break-word;
                }
                audio {
                    width: 50%;
                    background-color: unset;
                    color: var(--beet);
                }
            }
        }
    //_modal.scss
    #converse-modals {
        .modal-header {
            background-color: var(--beet);
            border-bottom: none;
            .close {
                color: white;
                background-color: var(--red);
            }
        }
        .modal-body {
            background-color: var(--chat-content-background-color);
        }
        .form-control {
            color: white;
            background-color: var(--darkest-grey);
            border: 1px solid var(--darkest-grey);
        }
        .modal-content {
            background-color: var(--darkest-grey);
        }
        .modal-footer {
            border-top: none;
        }
        .list-group-item {
            background-color: var(--darkest-grey);
        }
    }
    //_roster.scss
    #converse-roster {
        .roster-contacts {
            .current-xmpp-contact {
                .chat-status {
                    vertical-align: middle;
                    font-size: 1em;
                    margin-right: 0;
                    margin-left: -0.8em;
                    margin-bottom: -1.5em;
                    border-radius: 50%;
                    border: 2px solid var(--occupants-background-color);
                }
            }
            .roster-group {
                .group-toggle, .group-toggle .fa {
                    color: var(--beet-light-green) !important;
                    &:hover {
                        color: var(--beet-green) !important;
                    }
                }
                li {
                   .open-chat {
                        .msgs-indicator {
                            float: right;
                            color: white;
                            text-align: center;
                            width: 22px;
                            background-color: var(--red);
                            border-radius: 50%;
                            padding: 0.5em;
                            font-size: var(--font-size-small);
                        }
                    }
                    .open-chat {
                        &:hover {
                            background-color: var(--beet);
                        }
                    }
                }
            }
        }
    }
    //_toolbar.scss
    .chat-toolbar {
        converse-chat-toolbar {
            background-color: var(--chat-content-background-color);
            box-sizing: border-box;
            color: var(--text-color);
            display: flex;
            justify-content: space-between;
            margin: 0;
            width: 100%;

            .fa, .fa:hover,
            .far, .far:hover,
            .fas, .fas:hover {
                color: var(--font-head-color);
                font-size: var(--font-size-huge);
                svg {
                    fill: var(--text-color);
                }
            }
            .unencrypted a,
            .unencrypted {
                color: var(--text-color);
                .toolbar-menu {
                    a {
                        color: var(--link-color);
                    }
                }
            }
        }

        .toolbar-buttons {
            width: 100%;
            display: inline-block;

            .message-limit {
                padding: 0.5em;
                font-weight: bold;
            }
        }

        button {
            margin: .2em;
            padding-bottom: 0.25em;
            border: 1px transparent solid;
            background-color: transparent;

            &:disabled .fa {
                color: grey;
                &:hover {
                    color: grey;
                }
                svg, svg:hover {
                    fill: grey;
                }
            }
            &.send-button {
                padding-top: 0.2em;
                padding-bottom: 0.2em;
                margin: 0;
                margin-top: -1px;
            }
        }

        .unverified a,
        .unverified {
            color: #cf5300;
        }
        .private a,
        .private {
            color: #4b7003;
        }
        li {
            cursor: pointer;
            display: inline-block;
            list-style: none;
            padding: 0 0.5em;
            &:hover {
                cursor: pointer;
            }
            .toolbar-menu {
                background-color: var(--chat-content-background-color);
                bottom: 1.7rem;
                box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
                height: auto;
                margin-bottom: 0;
                min-width: 21rem;
                position: absolute;
                right: 0;
                top: auto;
                z-index: $zindex-dropdown;

                &.otr-menu {
                    left: -6em;
                    min-width: 15rem;

                    &.show {
                        display: flex;
                        flex-direction: column;
                    }
                }

                a {
                    color: var(--link-color);
                }
            }
            &.toggle-otr {
                ul {
                    z-index: 99;
                    li {
                        &:hover {
                            background-color: var(--highlight-color);
                        }
                        display: block;
                        padding: 7px;
                        a {
                            display: block;
                        }
                    }
                }
            }
        }
    }

    .chatbox {
        .new-msgs-indicator {
            color: var(--chatroom-head-color);
        }

        converse-chat-toolbar {
            border-top: var(chatbox-message-input-border-top);
            color: var(--text-color);
            background-color: var(--chat-content-background-color);
            .fas, .fas:hover,
            .far, .far:hover,
            .fa, .fa:hover {
                color: var(--dark-link-color);
            }
            button {
                &:focus {
                    outline-color: unset !important;
                    color: var(--red);
                }
            }
        }
    }

    .chatroom {
        converse-chat-toolbar {
            border-top: var(--chatroom-message-input-border-top);
            color: var(--text-color);
            .fas, .fas:hover,
            .far, .far:hover,
            .fa, .fa:hover {
                color: var(--dark-link-color);
                font-size: var(--font-size-huge);
                svg {
                    fill: var(--text-color);
                }
            }
            button {
                &:focus {
                    outline-color: unset !important;
                }
            }
        }
    }
    //_autocomplete.scss
    .suggestion-box {
       background-color: var(--occupants-background-color);
        .suggestion-box__results,
        > ul {
            &:before {
                content: "";
                position: absolute;
                top: -.43em;
                left: 1em;
                width: 0; height: 0;
                padding: .4em;
                background: var(--red);
                border: inherit;
                border-right: 0;
                border-bottom: 0;
                -webkit-transform: rotate(45deg);
                transform: rotate(45deg);
                z-index: -1;
            }
            position: absolute;
            left: 0;;
            right: 0;
            z-index: 2;
            min-width: 100%;
            box-sizing: border-box;
            list-style: none;
            padding: 0;
            border-radius: .3em;
            margin: .2em 0 0;
            background: rgba(37, 36, 36, 0.9);
            border: 1px solid rgba(0,0,0,.3);
            box-shadow: .05em .2em .6em rgba(0,0,0,.1);
            text-shadow: none;

            > li {
                text-overflow: ellipsis;
                overflow-x: hidden;
                position: relative;
                cursor: pointer;
                padding: 1em;
            }
        }
    }
}
 
