.flypanels-topbar a.flypanels-button-right.icon-magnify {
  border-radius: 100%;
  height: 2em;
  width: 2em;
  font-size: 1em;
  line-height: 0;
  margin-top: 7px;
  margin-right: 5px;
  .search-icon {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    font-size: 60%;
    color: currentColor;
    background: rgba(255,255,255,.3);
    border-radius: 100%;
    transform: translate(-50%, -50%);
    transition: all .5s ease-in-out;
    line-height: 0;
    &:before,
    &:after {
      position: absolute;
      display: block;
      content: '';
      border-radius: 2em;
      transition: all .5s ease-in-out;
    }

    &:before {
      box-shadow: 0 0  0 .25em;
      width: 1em;
      height: 1em;
      top: 50%;
      left: 50%;
      transform: translate(-75%, -75%);
    }
    &:after {
      width: 1em;
      height: .3em;
      background: currentColor;
      transform: translate(0%, 100%) rotate(45deg);
      top: 50%;
      left: 50%;
    }
  }
}

.openright {
  .flypanels-topbar a.flypanels-button-right.icon-magnify {
    .search-icon {
      background-color: transparent;
      transform: translate(-1em, -.15em);
      &:before,
      &:after {
        box-shadow: 0 0 0 0;
        width: 2em;
        height: .3em;
        background: currentColor;
      }
      &:before {
        transform: translate(0, 0) rotate(225deg);
      }
      &:after {
        transform: translate(0, 0) rotate(-225deg);
      }
    }
  }
}
