:root {
    --main-color: #EE7662; // #21ba45;
    --secondary-color: #8986A2; //#F18D78;
    --neutral-color: #CCC;
    --menu-background-color: white;
    --background-color: white;
    --current-message-font-color: #19272D;
    --current-message-username-font-color: black;
    --speaker-commands-color: #DB222A;
    --comment-message-color: #19272D;
    --information-title-color: #776749;
    --menu-main-color: var(--neutral-color, #CCC);
    --menu-selected-color: var(--main-color, #0F75D4);
    --menu-hover-color: var(--main-color, #0F75D4);
    --menu-logout-color: var(--secondary-color, #F18D78);
    --menu-logout-hover-color: var(--neutral-color, #CCC);
    --username-color: var(--main-color, #0F75D4);
    --button-color: var(--main-color, #0F75D4);
    --button-hover-color: var(--neutral-color, #CCC);
    --button-disabled-color: var(--neutral-color, #CCC);
    --common-hover-color: var(--neutral-color, #CCC);
    --like-color: var(--main-color, #0F75D4);
    --like-hover-color: var(--neutral-color, #F18D78);
    --new-comment-button-color: var(--main-color, #0F75D4);
    --new-comment-button-hover-color: var(--neutral-color, #F18D78);
    --sound-notification-active-color: var(--main-color, #0F75D4);
}

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

#threads {
    max-width: 600px;
    min-width: 100px;
    border-radius: 5px;
    background-color: var(--background-color);
    padding: 5px 5px 0 5px;
}

.wrapper {
    font: normal 12px/normal 'roboto', 'lucida grande', tahoma, verdana, arial, sans-serif;
}

.content-wrapper {
}

#content-box {
    width: 100%;
    background: #fff;
    overflow: auto;
    font-size: larger;
    height: 500px;
}

#current-box {
    width: 100%;
/ / background: #f7f7ff;
}

#current-message {
    min-height: 20px;
    overflow-y: scroll;
    padding: 12px;
    color: var(--current-message-font-color);
    font-size: 18px;
    font-weight: bold;
    background: var(--main-color);
    text-align: center;
}

.empty-current {
    opacity: 0.5;
}

#current-message .current-username {
    color: var(--current-message-username-font-color);
    font-size: 14px;
    font-weight: normal;
    text-align: left;
}

.cent-percent {
        width: 100%;
}

#user-login button.close {
    display: none;
}

#speaker-commands {
    background: var(--main-color);
}

#speaker-commands .prev-current {
    margin-left: 12px;
}

.row-next-current {
    margin-right: 0 !important;
}

#speaker-commands {
    padding-bottom: 5px;
}

#speaker-commands .next-current a {
    color: var(--speaker-commands-color);
}

#speaker-commands .next-current:hover {
    transform: scale(1.2);
    cursor: pointer;
}

#speaker-commands .prev-current a {
    color: var(--speaker-commands-color);
}

#speaker-commands a:hover {
    color: #CCC;
}

.archivedcomment-promote {
    color: var(--speaker-commands-color);
}

.archivedcomment-promote:hover {
    color: var(--menu-main-color);
}

.thread {
    width: 97%;
    display: inline-block;
    height: 300px;
    background: #fff;
    box-shadow: inset 0 0 2px #00000017;
    overflow: auto;
    padding: 10px;
}

.comment-line {
    font-weight: normal;
}

.comment-line a {
    color: #212529;
    border-bottom: 1px dashed #BBB;
}

.comment-message {
    color: var(--comment-message-color);
}

.comment-line a:hover {
    color: #777;
    border-bottom: 0;
}

.comment-username {
    color: var(--username-color);
}

.comment-date {
    color: #ccc;
    font-size: smaller;
}

.comment-like {
    flex: 0 0 30px;
    text-align: center;
    transform-origin: top;
}

.comment-like:hover {
    transform: scale(1.2);
    cursor: pointer;
}

.comment-like a {
    color: var(--like-color);
}

.unmoderated-input-div {
    flex-grow: 1;
}

.comment-like a:hover {
    color: var(--like-hover-color);
}

.comment-like-static {
    flex: 0 0 30px;
    text-align: center;
    transform-origin: top;
    color: #CCC;
}

.system-line {
    padding: 10px 0 5px;
}

.system-connect {
    color: #19272D;
}

.system-disconnect {
    color: #BBB;
}

.system-message {
    color: #CCC;
}
#unmoderated-answerdiv {
    padding: 5px 0 0 0;
    border-top: 1px solid #CCC;
}

#new-comment {
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: var(--new-comment-button-color);
    color: white;
    cursor: pointer;
    padding: 10px 15px 10px 15px;
    border-radius: 50px;
}

#a-new-comment {
    color: white;
    text-decoration: none;
    outline-style:none;
}

#new-comment:hover {
    color: var(--new-comment-button-hover-color);
    text-decoration: none;
    outline-style: none;
    transform: scale(1.05);
}

#sound-notification {
    padding-top: 8px;
}

#sound-notification.active a {
    color: var(--sound-notification-active-color) !important;
}

#sound-notification:not(.active) a {
    color: #CCC !important;
}

#sound-notification.active a:hover {
    color: #CCC !important;
}

#sound-notification:not(.active) a:hover {
    color: var(--main-color) !important;
}

/* bootstrap button override */
.btn-primary {
    color: #fff;
    background-color: var(--button-color);
    border-color: var(--button-color)
}

.btn-primary:hover {
    color: #fff;
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-color);
}

.btn-primary.focus, .btn-primary:focus {
}

.btn-primary.disabled, .btn-primary:disabled {
    color: #fff;
    background-color: var(--button-disabled-color);
    border-color: var(--button-disabled-color)
}

.btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--button-color);
    border-color: var(--button-color)
}

#toast-container {
    width: 100%;
}

/* toastr override */
.toast-top-full-width {
     top: 60px !important;
}

/* menu */

#menu {
    width: 100%;
    table-layout: fixed;
    background-color: var(--menu-background-color);
    border-bottom: #CCC;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    display: flex;
}

.menuitem {
    height: 50px;
    padding-top: 10px;
    flex-grow: 1;
}

.menuitem a {
    color: var(--menu-main-color);
}

.menuitem a#disconnect {
    color: var(--menu-logout-color);
}

.menuitem a#disconnect:hover {
    color: var(--menu-logout-hover-color);
}

.menuitem:not(.selected) :hover i {
    transform: scale(1.2);
}

.menuitem:not(.selected):not(#menu-disconnect) :hover i {
    color: var(--menu-hover-color);
    transform: scale(1.2);
}

.menuitem.selected {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: var(--menu-selected-color);
}

.menuitem.selected a {
    color: var(--menu-selected-color);
}

.chat-help {
    font-size: 12px;
}

.help-img {
    text-align: center;
}

.help-img img {
    max-width: 100%;
}

/* information & error pages */

.information-error {
    font: normal 14px/normal 'roboto', 'lucida grande', tahoma, verdana, arial, sans-serif !important;
    color: var(--main-color);
    text-align: center;
}

.information-error h2 {
    font-weight: bold;
    font-size: 1.4rem;
    color: var(--information-title-color);
    padding: 13px 0 80px;
}

#powered-u {
    position: absolute;
    padding-left: 10px;
    bottom: 0;
    left: 0;
}

#powered-m {
    position: absolute;
    padding-right: 10px;
    bottom: 0;
    right: 0;
}

.powered-by {
    font-size: 9px;
    color: #bdbdbd;
}

.powered-by a {
    color: #797979;
}