<div wcpt-model-key="[container] .wcpt-header.wcpt-navigation">

  <!-- margin-bottom -->
  <div class="wcpt-editor-option-row">
    <label>Gap from table</label>
    <input type="text" wcpt-model-key="margin-bottom" style="width: 100% !important;" />
  </div>

  <!-- row_gap -->
  <div class="wcpt-editor-option-row">
    <label>Gap between rows</label>
    <input type="text" wcpt-model-key="row_gap" />
  </div>

  <!-- font-size -->
  <div class="wcpt-editor-option-row">
    <label>Font size</label>
    <input type="text" wcpt-model-key="font-size" />
  </div>

  <!-- line-height -->
  <div class="wcpt-editor-option-row">
    <label>Line height</label>
    <input type="text" wcpt-model-key="line-height" placeholder="1.2em">
  </div>

  <!-- font color -->
  <div class="wcpt-editor-option-row">
    <label>Font color</label>
    <input type="text" wcpt-model-key="color" placeholder="#000" class="wcpt-color-picker">
  </div>

  <!-- font-weight -->
  <div class="wcpt-editor-option-row">
    <label>Font weight</label>
    <select wcpt-model-key="font-weight">
      <option value=""></option>    
      <option value="normal">Normal</option>
      <option value="bold">Bold</option>
      <option value="light">Light</option>
      <option value="100">100</option>
      <option value="200">200</option>
      <option value="300">300</option>
      <option value="400">400</option>
      <option value="500">500</option>
      <option value="600">600</option>
      <option value="700">700</option>
      <option value="800">800</option>
      <option value="900">900</option>
    </select>
  </div>

  <!-- font-family -->
  <div class="wcpt-editor-option-row">
    <label>Font family</label>
    <input type="text" wcpt-model-key="font-family" />
  </div>

  <!-- background color -->
  <div class="wcpt-editor-option-row">
    <label>Background color</label>
    <input type="text" wcpt-model-key="background-color" class="wcpt-color-picker">
  </div>

  <!-- border -->
  <div class="wcpt-editor-option-row wcpt-borders-style">
    <label>Border</label>
    <input type="text" wcpt-model-key="border-width" placeholder="width">
    <select wcpt-model-key="border-style">
      <option value="solid">Solid</option>
      <option value="dashed">Dashed</option>
      <option value="dotted">Dotted</option>
      <option value="none">None</option>
    </select>
    <input type="text" wcpt-model-key="border-color" class="wcpt-color-picker" placeholder="color">
  </div>

  <!-- border-radius -->
  <div class="wcpt-editor-option-row">
    <label>Border radius</label>
    <input type="text" wcpt-model-key="border-radius" >
  </div>

  <!-- padding -->
  <div class="wcpt-editor-option-row">
    <label>Padding</label>
    <input type="text" wcpt-model-key="padding-top" placeholder="top">
    <input type="text" wcpt-model-key="padding-right" placeholder="right">
    <input type="text" wcpt-model-key="padding-bottom" placeholder="bottom">
    <input type="text" wcpt-model-key="padding-left" placeholder="left">
  </div>

</div>

<!-- Dropdown Heading -->
<div wcpt-model-key="[container] .wcpt-header.wcpt-navigation .wcpt-dropdown.wcpt-filter > .wcpt-filter-heading">

  <div class="wcpt-editor-option-row wcpt-separation-heading">
    Dropdown heading
  </div>

  <!-- font-size -->
  <div class="wcpt-editor-option-row">
    <label>Font size</label>
    <input type="text" wcpt-model-key="font-size" />
  </div>

  <!-- font-weight -->
  <div class="wcpt-editor-option-row">
    <label>Font weight</label>
    <select wcpt-model-key="font-weight">
      <option value="normal">Normal</option>
      <option value="bold">Bold</option>
      <option value="200">Light</option>
    </select>
  </div>

  <!-- font color -->
  <div class="wcpt-editor-option-row">
    <label>Font color</label>
    <input type="text" wcpt-model-key="color" placeholder="#000" class="wcpt-color-picker">
  </div>

  <!-- font color on hover -->
  <div class="wcpt-editor-option-row">
    <label>Font color: hover</label>
    <input type="text" wcpt-model-key="color:hover" placeholder="#000" class="wcpt-color-picker">
  </div>

  <!-- font color when active -->
  <div class="wcpt-editor-option-row">
    <label>Font color: active</label>
    <input type="text" wcpt-model-key="color:active" placeholder="#000" class="wcpt-color-picker">
  </div>

  <!-- background color -->
  <div class="wcpt-editor-option-row">
    <label>Background color</label>
    <input type="text" wcpt-model-key="background-color" class="wcpt-color-picker">
  </div>

  <!-- background color on hover -->
  <div class="wcpt-editor-option-row">
    <label>Background color: hover</label>
    <input type="text" wcpt-model-key="background-color:hover" class="wcpt-color-picker">
  </div>

  <!-- background color when active -->
  <div class="wcpt-editor-option-row">
    <label>Background color: active</label>
    <input type="text" wcpt-model-key="background-color:active" class="wcpt-color-picker">
  </div>

  <!-- border color -->
  <div class="wcpt-editor-option-row">
    <label>Border color</label>
    <input type="text" wcpt-model-key="border-color" class="wcpt-color-picker">
  </div>

  <!-- border color on hover -->
  <div class="wcpt-editor-option-row">
    <label>Border color: hover</label>
    <input type="text" wcpt-model-key="border-color:hover" class="wcpt-color-picker">
  </div>

  <!-- border color when active -->
  <div class="wcpt-editor-option-row">
    <label>Border color: active</label>
    <input type="text" wcpt-model-key="border-color:active" class="wcpt-color-picker">
  </div>

  <!-- border radius -->
  <div class="wcpt-editor-option-row">
    <label>Border radius</label>
    <input type="text" wcpt-model-key="border-radius" />
  </div>

  <!-- padding -->
  <div class="wcpt-editor-option-row">
    <label>Padding</label>
    <input type="text" wcpt-model-key="padding-top" placeholder="top">
    <input type="text" wcpt-model-key="padding-right" placeholder="right">
    <input type="text" wcpt-model-key="padding-bottom" placeholder="bottom">
    <input type="text" wcpt-model-key="padding-left" placeholder="left">
  </div>

  <!-- margin -->
  <div class="wcpt-editor-option-row">
    <label>Margin</label>
    <input type="text" wcpt-model-key="margin-top" placeholder="top">
    <input type="text" wcpt-model-key="margin-right" placeholder="right">
    <input type="text" wcpt-model-key="margin-bottom" placeholder="bottom">
    <input type="text" wcpt-model-key="margin-left" placeholder="left">
  </div>

</div>

<!-- Dropdown Menu -->
<div wcpt-model-key="[container] .wcpt-header.wcpt-navigation .wcpt-dropdown.wcpt-filter > .wcpt-dropdown-menu">

  <div class="wcpt-editor-option-row wcpt-separation-heading">
    Dropdown menu
  </div>

  <!-- font-size -->
  <div class="wcpt-editor-option-row">
    <label>Font size</label>
    <input type="text" wcpt-model-key="font-size" />
  </div>

  <!-- font-weight -->
  <div class="wcpt-editor-option-row">
    <label>Font weight</label>
    <select wcpt-model-key="font-weight">
      <option value=""></option>    
      <option value="normal">Normal</option>
      <option value="bold">Bold</option>
      <option value="light">Light</option>
      <option value="100">100</option>
      <option value="200">200</option>
      <option value="300">300</option>
      <option value="400">400</option>
      <option value="500">500</option>
      <option value="600">600</option>
      <option value="700">700</option>
      <option value="800">800</option>
      <option value="900">900</option>
    </select>
  </div>

  <!-- font color -->
  <div class="wcpt-editor-option-row">
    <label>Font color</label>
    <input type="text" wcpt-model-key="color" placeholder="#000" class="wcpt-color-picker">
  </div>

  <!-- background color -->
  <div class="wcpt-editor-option-row">
    <label>Background color</label>
    <input type="text" wcpt-model-key="background-color" class="wcpt-color-picker">
  </div>

  <!-- border color -->
  <div class="wcpt-editor-option-row">
    <label>Border color</label>
    <input type="text" wcpt-model-key="border-color" class="wcpt-color-picker">
  </div>

  <!-- border radius -->
  <div class="wcpt-editor-option-row">
    <label>Border radius</label>
    <input type="text" wcpt-model-key="border-radius" />
  </div>

  <!-- width -->
  <div class="wcpt-editor-option-row">
    <label>Width</label>
    <input type="text" wcpt-model-key="width" />
  </div>

  <!-- max-height -->
  <div class="wcpt-editor-option-row">
    <label>Max height</label>
    <input type="text" wcpt-model-key="max-height" />
  </div>

  <!-- padding -->
  <div class="wcpt-editor-option-row">
    <label>Padding</label>
    <input type="text" wcpt-model-key="padding-top" placeholder="top">
    <input type="text" wcpt-model-key="padding-right" placeholder="right">
    <input type="text" wcpt-model-key="padding-bottom" placeholder="bottom">
    <input type="text" wcpt-model-key="padding-left" placeholder="left">
  </div>

  <!-- margin -->
  <div class="wcpt-editor-option-row">
    <label>Margin</label>
    <input type="text" wcpt-model-key="margin-top" placeholder="top">
    <input type="text" wcpt-model-key="margin-right" placeholder="right">
    <input type="text" wcpt-model-key="margin-bottom" placeholder="bottom">
    <input type="text" wcpt-model-key="margin-left" placeholder="left">
  </div>

</div>

<!-- Dropdown Search -->
<div wcpt-model-key="[container] .wcpt-header.wcpt-navigation .wcpt-dropdown.wcpt-filter > .wcpt-dropdown-menu .wcpt-search-filter-options">

  <div class="wcpt-editor-option-row wcpt-separation-heading">
    Dropdown search
  </div>

  <!-- font-size -->
  <div class="wcpt-editor-option-row">
    <label>Font size</label>
    <input type="text" wcpt-model-key="font-size" />
  </div>

  <!-- background color -->
  <div class="wcpt-editor-option-row">
    <label>Background color</label>
    <input type="text" wcpt-model-key="background-color" class="wcpt-color-picker">
  </div>

  <!-- height -->
  <div class="wcpt-editor-option-row">
    <label>Height</label>
    <input type="text" wcpt-model-key="height" />
  </div>

  <!-- border -->
  <div class="wcpt-editor-option-row wcpt-borders-style">
    <label>Border</label>
    <input type="text" wcpt-model-key="border-width" placeholder="width">
    <select wcpt-model-key="border-style">
      <option value="solid">Solid</option>
      <option value="dashed">Dashed</option>
      <option value="dotted">Dotted</option>
      <option value="none">None</option>
    </select>
    <input type="text" wcpt-model-key="border-color" class="wcpt-color-picker" placeholder="color">
  </div>

  <!-- border radius -->
  <div class="wcpt-editor-option-row">
    <label>Border radius</label>
    <input type="text" wcpt-model-key="border-radius" />
  </div>

  <!-- padding -->
  <div class="wcpt-editor-option-row">
    <label>Padding</label>
    <input type="text" wcpt-model-key="padding-top" placeholder="top">
    <input type="text" wcpt-model-key="padding-right" placeholder="right">
    <input type="text" wcpt-model-key="padding-bottom" placeholder="bottom">
    <input type="text" wcpt-model-key="padding-left" placeholder="left">
  </div>

  <!-- margin -->
  <div class="wcpt-editor-option-row">
    <label>Margin</label>
    <input type="text" wcpt-model-key="margin-top" placeholder="top" class="wcpt-width--50-percent">
    <input type="text" wcpt-model-key="margin-bottom" placeholder="bottom" class="wcpt-width--50-percent">
  </div>

</div>

<!-- Row heading -->
<div wcpt-model-key="[container] .wcpt-header.wcpt-navigation .wcpt-options-row.wcpt-filter > .wcpt-filter-heading">

  <div class="wcpt-editor-option-row wcpt-separation-heading">
    Row heading
  </div>

  <!-- font-size -->
  <div class="wcpt-editor-option-row">
    <label>Font size</label>
    <input type="text" wcpt-model-key="font-size" />
  </div>

  <!-- font-weight -->
  <div class="wcpt-editor-option-row">
    <label>Font weight</label>
    <select wcpt-model-key="font-weight">
      <option value="normal">Normal</option>
      <option value="bold">Bold</option>
      <option value="200">Light</option>
    </select>
  </div>

  <!-- font color -->
  <div class="wcpt-editor-option-row">
    <label>Font color</label>
    <input type="text" wcpt-model-key="color" placeholder="#000" class="wcpt-color-picker">
  </div>

  <!-- padding -->
  <div class="wcpt-editor-option-row">
    <label>Padding</label>
    <input type="text" wcpt-model-key="padding-top" placeholder="top">
    <input type="text" wcpt-model-key="padding-right" placeholder="right">
    <input type="text" wcpt-model-key="padding-bottom" placeholder="bottom">
    <input type="text" wcpt-model-key="padding-left" placeholder="left">
  </div>

  <!-- margin -->
  <div class="wcpt-editor-option-row">
    <label>Margin</label>
    <input type="text" wcpt-model-key="margin-top" placeholder="top">
    <input type="text" wcpt-model-key="margin-right" placeholder="right">
    <input type="text" wcpt-model-key="margin-bottom" placeholder="bottom">
    <input type="text" wcpt-model-key="margin-left" placeholder="left">
  </div>

</div>

<!-- Row options -->
<div wcpt-model-key="[container] .wcpt-header.wcpt-navigation .wcpt-options-row.wcpt-filter > .wcpt-options > .wcpt-option">

  <div class="wcpt-editor-option-row wcpt-separation-heading">
    Row options
  </div>

  <!-- font-size -->
  <div class="wcpt-editor-option-row">
    <label>Font size</label>
    <input type="text" wcpt-model-key="font-size" />
  </div>

  <!-- font-weight -->
  <div class="wcpt-editor-option-row">
    <label>Font weight</label>
    <select wcpt-model-key="font-weight">
      <option value=""></option>    
      <option value="normal">Normal</option>
      <option value="bold">Bold</option>
      <option value="light">Light</option>
      <option value="100">100</option>
      <option value="200">200</option>
      <option value="300">300</option>
      <option value="400">400</option>
      <option value="500">500</option>
      <option value="600">600</option>
      <option value="700">700</option>
      <option value="800">800</option>
      <option value="900">900</option>
    </select>
  </div>

  <!-- font color -->
  <div class="wcpt-editor-option-row">
    <label>Font color</label>
    <input type="text" wcpt-model-key="color" placeholder="#000" class="wcpt-color-picker">
  </div>

  <!-- font color:hover -->
  <div class="wcpt-editor-option-row">
    <label>Font color: hover </label>
    <input type="text" wcpt-model-key="color:hover" placeholder="#000" class="wcpt-color-picker">
  </div>

  <!-- font color:selected -->
  <div class="wcpt-editor-option-row">
    <label>Font color: selected </label>
    <input type="text" wcpt-model-key="color:selected" placeholder="#000" class="wcpt-color-picker">
  </div>

  <!-- background color -->
  <div class="wcpt-editor-option-row">
    <label>Background color</label>
    <input type="text" wcpt-model-key="background-color" class="wcpt-color-picker">
  </div>

  <!-- background color:hover -->
  <div class="wcpt-editor-option-row">
    <label>Bg color: hover</label>
    <input type="text" wcpt-model-key="background-color:hover" class="wcpt-color-picker">
  </div>

  <!-- background color:selected -->
  <div class="wcpt-editor-option-row">
    <label>Bg color: selected</label>
    <input type="text" wcpt-model-key="background-color:selected" class="wcpt-color-picker">
  </div>

  <!-- border color -->
  <div class="wcpt-editor-option-row">
    <label>Border: color</label>
    <input type="text" wcpt-model-key="border-color" class="wcpt-color-picker">
  </div>

  <!-- border color:hover -->
  <div class="wcpt-editor-option-row">
    <label>Border color: hover</label>
    <input type="text" wcpt-model-key="border-color:hover" class="wcpt-color-picker">
  </div>

  <!-- border color:selected -->
  <div class="wcpt-editor-option-row">
    <label>Border color: selected</label>
    <input type="text" wcpt-model-key="border-color:selected" class="wcpt-color-picker">
  </div>

  <!-- border radius -->
  <div class="wcpt-editor-option-row">
    <label>Border radius</label>
    <input type="text" wcpt-model-key="border-radius" />
  </div>

  <!-- width -->
  <div class="wcpt-editor-option-row">
    <label>Width</label>
    <input type="text" wcpt-model-key="width" />
  </div>

  <!-- padding -->
  <div class="wcpt-editor-option-row">
    <label>Padding</label>
    <input type="text" wcpt-model-key="padding-top" placeholder="top">
    <input type="text" wcpt-model-key="padding-right" placeholder="right">
    <input type="text" wcpt-model-key="padding-bottom" placeholder="bottom">
    <input type="text" wcpt-model-key="padding-left" placeholder="left">
  </div>

  <!-- margin -->
  <div class="wcpt-editor-option-row">
    <label>Margin</label>
    <input type="text" wcpt-model-key="margin-top" placeholder="top">
    <input type="text" wcpt-model-key="margin-right" placeholder="right">
    <input type="text" wcpt-model-key="margin-bottom" placeholder="bottom">
    <input type="text" wcpt-model-key="margin-left" placeholder="left">
  </div>

</div>