.ccm-inline-toolbar {
  font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif !important;
  .box-shadow(0px 0px 6px rgba(200, 200, 200, 0.5));
  .border-radius(3px);
  z-index: @index-level-inline-toolbar;
  margin: 0 !important;
  position: relative;
  padding: 0px !important;
  line-height: 0;
  list-style: none;
  opacity: 0;
  display: table;
  height: 31px;

  &.redactor_toolbar {
    background: transparent;
  }

  > li {
    list-style: none;
    outline: none;
    border-top: 1px solid #c4c4c4;
    border-bottom: 1px solid #c4c4c4;
    padding: 3px 8px 3px 8px;
    display: table-cell;
    border-right: 1px solid #e1e1e1;
    vertical-align: middle;
    font-size: 15px !important;
    background: #fff;
    label {
      font-size: 9px;
      display: inline;
      margin: 0px 0px 8px 0px;
    }

    /* spinner */

    .ui-widget-content {
      border: 0px;
      .border-radius(0px);

      a {
        background: none;
        border: none;
      }
    }

    .ui-spinner {
      top: -1px;
    }

    select, input[type=text] {
      border: 0px;
      font-size: 9px;
      box-shadow: none !important;
      -webkit-appearance: none;
      font-weight: bold;
      padding: 0px;
      margin: 0px;
      line-height: 15px;
      height: auto;
      outline: none !important;
      .border-radius(0px);
    }

    select {
      line-height: 14px;
      padding-right: 30px;
      background: transparent url(../images/icons/arrow_down.png) no-repeat center right;
    }

    input[type=text]:focus {
      outline: none !important;
    }

    input[type=text]:disabled {
      background-color: #fff;
      .opacity(70);
    }

    select:disabled {
      background-color: #fff;
      background-image: none;
      .opacity(70);
    }

  }

  > li:first-child {
    .border-left-radius(3px);
    border-left: 1px solid #c4c4c4;
  }

  > li:last-child {
    border-right: 0px;
    .border-right-radius(3px);
  }

  > li.ccm-inline-toolbar-icon-cell {
    width: 30px;
    text-align: center;
    padding: 0px;
    #gradient > .vertical(#fff, #f1f1f1);
  }

  > li.ccm-inline-toolbar-icon-cell > a {
    opacity: 0.7;
    height: 100%;
    cursor: pointer;
    color: #333;
    padding-top: 7px;
    display: block;
    text-decoration: none;

    i {
      font-size: 12px;
      display: inline-block;
    }
  }

  > li.ccm-inline-toolbar-icon-cell.ccm-inline-toolbar-icon-selected {
    #gradient > .vertical(#e1e1e1, #cbcbcb);
    border-right: 1px solid #c5c5c5;
  }

  > li.ccm-inline-toolbar-icon-cell.ccm-inline-toolbar-icon-selected > a {
    opacity: 1.0;
  }

  > li.ccm-inline-toolbar-icon-cell > a:hover {
    opacity: 1.0;
  }

  > li.ccm-inline-toolbar-button {

    padding: 0px;
    background: transparent;
    button {
      background: #f3f3f3;
      height: 33px;
      text-align: center;
      padding: 0px 20px 0px 20px;
      display: inline-block;
      font-size: 9px;
      color: #333;
      border: 0px;
      width: 100%;
      .border-radius(0px);
    }
  }

  > li.ccm-inline-toolbar-button-cancel button {
    #gradient > .vertical(#f3f3f3, #eaeaea);
  }

  > li.ccm-inline-toolbar-button-cancel button:hover {
    background-image: none;
    background-color: #fff;
  }

  > li.ccm-inline-toolbar-button-save {
    border: 1px solid #007cce !important;
  }

  > li.ccm-inline-toolbar-button-save button {
    background: #09f;
    #gradient > .vertical(#09f, #0094f6);
    color: #fff;
  }

  > li.ccm-inline-toolbar-button-save button:hover {
    background-image: none;
    background-color: #007cce;
  }
}

#ccm-inline-toolbar-container {
  padding: 10px 0px 10px 0px;
  width: 100%;
  position: absolute;
  top: 0;
  .transition(opacity 0.3s ease-in);
  opacity: 0;
  .box-sizing(border-box);
  left: 0;
  z-index: @index-level-inline-toolbar; /* same as toolbar */
}

#ccm-inline-toolbar-container.ccm-inline-toolbar-affixed {
  position: fixed;
  top: 0 !important;
  background-color: rgba(0, 0, 0, 0.4);
}