#chatbox {
    color: #818479;
    font-size: 12px;
    z-index: 30;

    &.chat-floating {
        position: fixed;
        right: 10px;
        direction: ltr;
        display: block;
        width: auto;
        bottom: 0;
    }
    &.chat-docked {
    }

    select, input {
        height: 2rem;
        font-size: 12px;
    }

    a {
        text-decoration: none;
        color: #2A9D8F;
        text-shadow: none;
    }

    .toggle-controlbox {
        background-color: #2196F3;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        color: white;
        float: right;
        height: 100%;
        margin: 0 .5em;
        padding: 10px 16px 0;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: bold;
    }

    .chatbox {
        width: 350px;
        float: right;
    }

    .flyout {
        height: 350px;
        background-color: #fff;
        box-shadow: 1px 3px 5px 3px rgba(0,0,0,.4);
        min-height: 225px;
        min-width: 200px;
        width: 350px;
        z-index: 1;
        border-radius: 4px;
        bottom: 6px;
        right: 5px;
        position: absolute;
    }

    .docked {
        background-color: #fff;
        box-shadow: 1px 3px 5px 3px rgba(0,0,0,.4);
        min-width: 200px;
        z-index: 1;
    }

    .chatbox-title {
        padding: 8px 5px;
        font-size: 12px;
        font-weight: bold;
        border-bottom: 1px solid grey;
        color: white;
        text-transform: uppercase;
    }

    .chatbox-close {
        position: absolute;
        color: white;
        /* top: 1rem; */
        top: 4px;
        right: 10px;
        font-size: 1.25em;
        line-height: 1;
        cursor: pointer;
    }

    .chatbox-content {
        > .grid-content {
            padding: 3px 13px 3px 10px;
        }
    }

    .chatbox-settings {
        cursor: pointer;
        position: absolute;
        right: 35px;
        top: 4px;
    }

    .chatbox-pin {
        cursor: pointer;
        position: absolute;
        right: 60px;
        top: 4px;

        >span.rotate > svg {
            transform: rotate3d(0, 0, 1, 90deg);
        }
    }

    .settings-title {
        padding-bottom: 8px;
    }

    .chat-text {
        overflow-wrap: break-word;
    }
}