<div>
    <style>
        @popupContainer {
            font-size: 0.85em;
            background: #F0F0F0;
            margin: 0;
            padding: 0em;
            border: none;
            box-shadow: 0em 0em 1em rgba(0, 0, 0, 0.3);
        }
        @popupContainer button,
        @popupContainer hbox.ButtonGroup {
            box-shadow: none;
        }
        @popupContainer button {
            padding-left: 0.7em;
            padding-right: 0.7em;
        }
        @popupContainer .widget_ComboManager @selectContainer > button {
            padding-right: 0.3em;
        }
        @popupToolbar button {
            border-radius: 0px;
        }
        @popupToolbar button:not(:first-child) {
            border-left: none;
        }
        @popupToolbar .ButtonGroup:not(:last-child) > button:last-child {
            border-right: none;
        }
        @popupToolbar .Row:not(:first-child) button {
            border-top: none;
        }
        @popupToolbar .ButtonGroup > button:hover {
            background: #D9D9D9;
        }
    </style>
    <div anon-id="popupContainer">
         <vbox anon-id="popupToolbar">
            <hbox class="Row">
                <hbox class="ButtonGroup" anon-id="textFormatContainer">
                    <button mode="icon" anon-id="medBoldButton" title="Bold" command="bold" group="TextFormatGroup"><i>format_bold</i></button>
                    <button mode="icon" anon-id="medItalicButton" title="Italic" command="italic" group="TextFormatGroup"><i>format_italic</i></button>
                    <button mode="icon" anon-id="medUnderlineButton" title="Underline" command="underline" group="TextFormatGroup"><i>format_underlined</i></button>
                    <button mode="icon" anon-id="medStrikeButton" title="Strike Through" command="strikeThrough" group="TextFormatGroup"><i>strikethrough_s</i></button>
                </hbox>
                <hbox anon-id="malignContainer" class="ButtonGroup">
                    <button group="AlignRadioGroup" title="Align Left" mode="icon" anon-id="malignLeftCommand" command="justifyleft"><i>format_align_left</i></button>
                    <button group="AlignRadioGroup" title="Align Center" mode="icon" anon-id="malignCenterCommand" command="justifycenter"><i>format_align_center</i></button>
                    <button group="AlignRadioGroup" title="Align Right" mode="icon" anon-id="malignRightCommand" command="justifyright"><i>format_align_right</i></button>
                </hbox>
                <hbox class="ButtonGroup">
                    <button mode="icon" anon-id="medBulletedListButton" title="Unordered List" command="insertunorderedlist"><i>format_list_bulleted</i></button>
                    <button mode="icon" anon-id="medNumberedListButton" title="Toolbar Ourdered" command="insertorderedlist"><i>format_list_numbered</i></button>
                </hbox>
                <hbox class="ButtonGroup">
                    <button mode="icon" anon-id="medIndentButton" title="Indent" command="indent"><i>format_indent_increase</i></button>
                    <button mode="icon" anon-id="medOutdentButton" title="Outdent" command="outdent"><i>format_indent_decrease</i></button>
                </hbox>
                <hbox class="ButtonGroup">
                    <button mode="icon" anon-id="medCleanUpButton" title="Clean Up" command="removeformat"><i>clear</i></button>
                </hbox>
            </hbox>

            <hbox class="Row">
                <hbox class="ButtonGroup" flex="1">
                    <ui:ComboManager anon-id="fontCombo" flex="1"/>
                </hbox>
                <hbox class="ButtonGroup">
                    <ui:ComboManager anon-id="fontSizeCombo" />
                </hbox>
                <hbox class="ButtonGroup">
                    <button mode="icon" anon-id="medIncreaseFontButton" title="Increase Font Size" command="increaseFontSize"><i>format_size</i></button>
                    <button mode="icon" anon-id="medDecreaseFontButton" title="Decrease Font Size" command="decreaseFontSize"><i>text_fields</i></button>
                </hbox>
                <hbox class="ButtonGroup">
                    <button anon-id="mtextColorButton" title="Text Color">
                        <i>format_color_text</i>
                    </button>
                    <button anon-id="mhilightColorButton" title="Highlight color">
                        <i>high_quality</i>
                        <!-- <span anon-id="colorDisplay" class="ColorDisplay"></span> -->
                    </button>
                </hbox>
            </hbox>
            <ui:Popup anon-id="selectorContainer">
                <ui:ColorSelector anon-id="selector" />
            </ui:Popup>
       </vbox>
    </div>
</div>
