/**
 * Toolbar side panel main container element.
 */
.use-new-toolbox #sideToolbarContainer {
    background-color: $newToolbarBackgroundColor;

    /**
     * Make the sidebar flush with the top of the toolbar. Take the size of
     * the toolbar and subtract from 100%.
     */
    height: calc(100% - #{$newToolbarSizeWithPadding});
    left: 0;

    .side-toolbar-close {
        background: gray;
        border: 3px solid rgba(255, 255, 255, 0.1);
        border-radius: 100%;
        color: white;
        cursor:pointer;
        height: 10px;
        line-height: 10px;
        padding: 4px;
        position: absolute;
        right: 5px;
        text-align: center;
        top: 5px;
        width: 10px;
        z-index: 1;
    }

    #chatconversation {
        top: 15px;
    }
}
#sideToolbarContainer {
    background-color: $sideToolbarContainerBg;
    height: 100%;
    left: $defaultToolbarSize;
    max-width: $sidebarWidth;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 0;
    z-index: $sideToolbarContainerZ;

    /**
     * Labels inside the side panel.
     */
    label {
        color: $baseLight;
    }

    /**
     * Form elements and blocks.
     */
    input,
    a,
    .sideToolbarBlock,
    .form-control {
        display: block;
        margin-top: 15px;
        margin-left: 10%;
        width: 80%;
    }

    /**
     * Specify styling of elements inside a block.
     */
    .sideToolbarBlock {
        input, a {
            margin-left: 0;
            margin-top: 5px;
            width: 100%;
        }
    }

    /**
     * Inner container, for example settings or profile.
     */
    .sideToolbarContainer__inner {
        display: none;
        height: 100%;
        width: $sidebarWidth;
        position: absolute;
        box-sizing: border-box;
        color: #FFF;

        .input-control {
            border: 0;
        }

        /**
         * Titles and subtitles of inner containers.
         */
        div.title {
            margin: 24px 0 11px;
        }

        /**
         * Main title size.
         */
        div.title {
            color: $toolbarTitleColor;
            text-align: center;
            font-size: $toolbarTitleFontSize;
        }

        /**
         * First element after a title.
         */
        .first {
            margin-top: 0 !important;
        }
    }
}