.pictool-module-panel {
  height: 100%;
  width: 100%;
  position: relative;
  font-size: 14px;
  color: #333333;

  .pictool-panel-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    box-shadow: 0 0 6px 0 rgba(0,0,0,0.08);

    .pictool-panel-title {
      line-height: 40px;
      text-align: center;
      font-size: 16px;
    }

    .pictool-panel-btn-close {
      position: absolute;
      right: 0;
      top: 0;
      width: 60px;
      height: 40px;
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url('data:image/svg+xml;charset=utf-8,<svg t="1561299766263" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9368" width="200" height="200"><path d="M685.4 354.8c0-4.4-3.6-8-8-8l-66 0.3L512 465.6l-99.3-118.4-66.1-0.3c-4.4 0-8 3.5-8 8 0 1.9 0.7 3.7 1.9 5.2l130.1 155L340.5 670c-1.2 1.5-1.9 3.3-1.9 5.2 0 4.4 3.6 8 8 8l66.1-0.3L512 564.4l99.3 118.4 66 0.3c4.4 0 8-3.5 8-8 0-1.9-0.7-3.7-1.9-5.2L553.5 515l130.1-155c1.2-1.4 1.8-3.3 1.8-5.2z" p-id="9369" fill="%23666666"></path><path d="M512 65C264.6 65 64 265.6 64 513s200.6 448 448 448 448-200.6 448-448S759.4 65 512 65z m0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z" p-id="9370" fill="%23666666"></path></svg>');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 30px;
      }
    }
  
  }
  
  .pictool-panel-navigation {
    position: absolute;
    height: 80px;
    width: 100%;
    bottom: 0;
    background: #2196f30d;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .pictool-panel-navlist {
    width: 100%;
    height: 100%;
    display: flex;
    -webkit-overflow-scrolling: touch;

    &.panel-beyond-width {
      display: block;
      .pictool-panel-nav-btn {
        width: 100px;
        display: block;
        float: left;
      }
    }
  }
  .pictool-panel-nav-btn {
    flex: 1;
    text-align: center;
    font-size: 14px;
    position: relative;
    padding-top: 40px;

    &.panelnav-icon {
      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: url('data:image/svg+xml;charset=utf-8,<svg t="1561214557317" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8147" width="200" height="200"><path d="M336 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8148" fill="%23666666"></path><path d="M688 421m-48 0a48 48 0 1 0 96 0 48 48 0 1 0-96 0Z" p-id="8149" fill="%23666666"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64z m263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2-44.3-18.7-84.1-45.6-118.3-79.8-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8c18.7-44.3 45.6-84.1 79.8-118.3 34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2 44.3 18.7 84.1 45.6 118.3 79.8 34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8c-18.7 44.3-45.6 84.1-79.8 118.2z" p-id="8150" fill="%23666666"></path><path d="M664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-0.3-4.2-3.9-7.4-8.1-7.4H360c-4.6 0-8.2 3.8-8 8.4 4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6c0.2-4.6-3.4-8.4-8-8.4z" p-id="8151" fill="%23666666"></path></svg>');
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: 30px;
      }
    }

    &.panelnav-active {
      color: #17abe3;
      &.panelnav-icon {
        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 40px;
          background: url('data:image/svg+xml;charset=utf-8,<svg t="1561299983080" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9592" width="200" height="200"><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zM288 421c0-26.5 21.5-48 48-48s48 21.5 48 48-21.5 48-48 48-48-21.5-48-48z m224 272c-85.5 0-155.6-67.3-160-151.6-0.2-4.6 3.4-8.4 8-8.4h48.1c4.2 0 7.8 3.2 8.1 7.4C420 589.9 461.5 629 512 629s92.1-39.1 95.8-88.6c0.3-4.2 3.9-7.4 8.1-7.4H664c4.6 0 8.2 3.8 8 8.4-4.4 84.3-74.5 151.6-160 151.6z m176-224c-26.5 0-48-21.5-48-48s21.5-48 48-48 48 21.5 48 48-21.5 48-48 48z" p-id="9593" fill="%2317abe3"></path></svg>');
          background-repeat: no-repeat;
          background-position: center bottom;
          background-size: 30px;
        }
      }
    }


  }
}