Styling Wysiwyg Editor

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/css/bootstrap-material-design.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.5.9/js/material.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.1/summernote.min.js"></script>
<div class="container">
  <ul id="choiceList" class="list-unstyled">
    <li>
      <div class="form-group is-empty" style="margin-top:0;">
        <div class="input-group margin-bottom-sm" style="width:100%;">
         <div class="option-editor">
         <input type="text" class="form-control col-md-12" value="" data-id="gg7nrp39" data-index="0" onchange="onAnswerChoiceChange(this);">         
         </div>
         <span class="input-group-addon"><i style="padding-right:0px;">remove</i></span>         
        </div>
        <span class="material-input"></span>
      </div>
    </li>
    
    <li>
      <div class="form-group is-empty" style="margin-top:0;">
        <div class="input-group margin-bottom-sm" style="width:100%;">
         <div class="option-editor">
         <input type="text" class="form-control col-md-12" value="" data-id="gg7nrp39" data-index="0" onchange="onAnswerChoiceChange(this);">         
         </div>
         <span class="input-group-addon"><i style="padding-right:0px;">remove</i></span>         
        </div>
        <span class="material-input"></span>
      </div>
    </li>
    
    <li>
      <div class="form-group is-empty" style="margin-top:0;">
        <div class="input-group margin-bottom-sm"...

CSS

#summernote-container .note-toolbar.panel-heading {
  opacity: 0;
  animation: fadeIn .8s .8s both;
}

JavaScript

$(document).ready(function() {
  $(function() {
    $.material.init();
  });

  var optionEditors = $('.option-editor');
  for (var i=0; i<optionEditors.length; i++) {
    $(optionEditors[i]).summernote({
      airMode: true,
      popover: {
        air: [
          ['font', ['bold', 'underline', 'clear']]
        ]
      }
    });
  }
});