<style type="text/css">
  .output_subarea.rendered_html {
    max-width: 100%;
    padding: 0;
  }
  .pixiedust {
    border: 1px solid #ececec;
    border-radius: 3px;
    margin: 10px 0;
    padding: 10px;
    
    color: #333333;
    font-size: small;
    font-weight: 300;
    letter-spacing: 0.5px;
    line-height: normal;
  }
  .pixiedust .btn-group {
    border-right: 0;
  }
  .pixiedust .display-type-button:not(:first-child) {
    margin-left: 10px !important;
  }
  .pixiedust .btn-default {
    border-radius: 0;
  }
  .pixiedust-toolbar .btn-default.focus,
  .pixiedust-toolbar .btn-default:focus,
  .pixiedust-toolbar .btn-default:hover,
  .pixiedust .chart-button-group .btn-default.focus,
  .pixiedust .chart-button-group .btn-default:focus,
  .pixiedust .chart-button-group .btn-default:hover {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #ffffff;
  }
  .pixiedust .dropdown-menu {
    background-color: #ffffff;
    border-color: rgba(0, 0, 0, 0.15);
    padding: 0;
  }
  .pixiedust .dropdown-menu ul {
    list-style: outside none none;
    margin: 0;
    padding: 0;
  }
  .pixiedust .dropdown-menu li {
    cursor: pointer;
    padding: 8px 12px;
  }
  .pixiedust .dropdown-menu li:hover {
    background-color: #337ab7;
    color: #ffffff;
    cursor: pointer;
  }
  .pixiedust .dropdown-menu li > span {
    display: inline-block;
    margin-left: 10px;
  }
  .pixiedust .btn .fa-chevron-down {
    margin-left: 25px;
  }
  .pixiedust .btn-group.open .dropdown-toggle {
    background-color: #337ab7;
    border-color: #2e6da4;
    color: #ffffff;
  }
  .pixiedust .modal-dialog {
    width: 50vw;
    min-width: 700px;
  }
  .pixiedust .modal-dialog .btn-default:focus,
  .pixiedust .modal-dialog .btn-default:hover {
    background-color: #e6e6e6;
    border-color: #adadad;
  }
  .pixiedust .modal-dialog .btn-primary {
    background-color: #337ab7;
    color: #fff;
    transition: background-color 0.15s ease-out 0s;
  }
  .pixiedust .modal-dialog .btn-primary:focus,
  .pixiedust .modal-dialog .btn-primary:hover {
    background-color: #286090;
    border-color: #204d74;
  }
  .pixiedust .modal-header {
    background-color: #337ab7;
    color: #ffffff;
  }
  .pixiedust .modal-header .close {
    color: #fff;
    opacity: 1;
    text-shadow: none;
  }
  .pixiedust .modal-header .close:hover {
    opacity: 0.5;
  }
  .pixiedust .modal-body {
    padding: 25px;
  }
  .pixiedust .modal-footer .btn {
    min-width: 75px;
  }

  .pixiedust .executionTime {
    color: gray;
  }

  .pixiedust .expandButton {
    background-color: transparent;
    border: 0 none;
    font-size: 15px;
    padding: 0;
    position: relative;
    right: 0;
    text-align: right;
    top: 0;
    width: 100%;
  }
  .pixiedust .expandButton:hover,
  .pixiedust .expandButton:active,
  .pixiedust .expandButton:focus {
    background-color: transparent;
    color: #337ab7;
  }
  .pixiedust .expandButton:not(.collapsed) {
    float: right;
    width: initial;
  }
  .pixiedust .expandButton > i.fa:before {
    content: "\f066";
  }
  .pixiedust .expandButton.collapsed > i.fa:before {
    content: "\f065";
  }
  .pixiedust .expandButton.collapsed:before {
    color: #999999;
    content: "Pixiedust output minimized";
    float: left;
    font-size: 14px;
    font-style: italic;
    font-weight: 300;
  }
  .pixiedust .chart-button-group {
    border-bottom: 1px solid #ececec;
  }
  .pixiedust .rendererOpt {
    margin: 6px 0;
    padding: 6px 0;
  }
  .pixiedust .rendererOpt:first-child {
    margin-top: 0;
    padding-top: 0;
  }
  .pixiedust .rendererOpt.checkbox { padding-left: 20px; }
  .pixiedust .rendererOpt.checkbox label {
    display: inline-block;
    position: relative;
    padding-left: 5px;
  }
  .pixiedust .rendererOpt.checkbox label::before {
    content: "";
    display: inline-block;
    position: absolute;
    width: 17px;
    height: 17px;
    left: 0;
    margin-left: -20px;
    border: 1px solid #cccccc;
    background-color: #fff;
    -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
    transition: border 0.15s ease-in-out, color 0.15s ease-in-out;
  }
  .pixiedust .rendererOpt.checkbox label::after {
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    left: 0;
    top: 0;
    margin-left: -20px;
    padding-left: 2px;
    padding-top: 1px;
  }
  .pixiedust .rendererOpt.checkbox input[type="checkbox"] {
    opacity: 0;
    z-index: 1;
  }
  .pixiedust .rendererOpt.checkbox input[type="checkbox"]:focus + label::before {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }
  .pixiedust .rendererOpt.checkbox input[type="checkbox"]:checked + label::after {
    font-family: 'FontAwesome';
    content: "\f00c";
  }

  .pixiedust .rendererOpt.checkbox.checkbox-inline { margin-top: 0; }

  .pixiedust .rendererOpt.checkbox-primary input[type="checkbox"]:checked + label::before {
    background-color: #337ab7;
    border-color: #337ab7;
  }
  .pixiedust .rendererOpt.checkbox-primary input[type="checkbox"]:checked + label::after {
    color: #fff;
  }
</style>

<div class="pixiedust">
  <button class="btn btn-default btn-sm expandButton" data-toggle="collapse"
          data-target="#pixiedust-output-wrapper-{{this.getPrefix()}}" title="Expand/Collapse Pixiedust output">
    <i class="fa"></i>
  </button>
  <div id="pixiedust-output-wrapper-{{this.getPrefix()}}" class="collapse in">
    {%if numMenu > 1 %}
      <div class="pixiedust-toolbar btn-group" role="group" style="margin-bottom:15px">  
      {%for key, menuInfoList in menuTree|iteritems%}
        {%if menuInfoList|length==1%}
          <a class="btn btn-small btn-default display-type-button" id="menu{{this.getPrefix(menuInfoList[0])}}" title="{{menuInfoList[0]['title']}}">
            <i class="fa {{menuInfoList[0]['icon']}}"></i>
          </a>
          {{this._getMenuHandlerScript(menuInfoList[0])}}
        {%elif menuInfoList|length>1%}
          <div class="btn-group btn-small display-type-button">
            {% set category = this.getCategory(key) %}
            <a class="btn btn-small dropdown-toggle btn-default" data-toggle="dropdown" title="{{category.title}}">
              {% if "icon-class" in category %}
              <i class="fa {{category['icon-class']}}"></i>
              {% elif "icon-path" in category %}
              <img src="{{category['icon-path']|base64dataUri}}" style="max-width:18px;display:inline-block">
              {% endif %}
              <i class="fa fa-chevron-down"></i>
            </a>
            <div class="dropdown-menu" role="menu" style="white-space:nowrap">
              <ul>
              {%for menuInfo in menuInfoList%}
                <li id="menu{{this.getPrefix(menuInfo)}}">
                  {% if "icon-class" in menuInfo or "icon" in menuInfo%}
                  <i class="fa {{menuInfo.get('icon-class', menuInfo.get('icon'))}}"></i>
                  {% elif "icon-path" in menuInfo %}
                  <img src="{{menuInfo['icon-path']|base64dataUri}}" style="max-width:18px;display:inline-block">
                  {% endif %}
                  <span>{{menuInfo['title']}}</span>
                  {{this._getMenuHandlerScript(menuInfo)}}
                </li>
              {%endfor%}
              </ul>
            </div>
          </div>
        {%endif%}
      {%endfor%}
      </div>
    {%endif%}
    <div id="wrapperJS{{this.getPrefix()}}"></div>
    <div id="wrapperHTML{{this.getPrefix()}}" style="min-height:100px"></div>
  </div>
</div>