/**
 * Note that these styles are loaded *before* editor styles, so that
 * editor-specific styles using the same selectors will take precedence.
 */
.drm-fa-icon-pro {
  position: relative;
  display: block;
  width: 2em;
  height: 2em;
  text-decoration: none !important; }
  .drm-fa-icon-pro--align-left {
    float: left;
    clear: left; }
  .drm-fa-icon-pro--align-right {
    float: right;
    clear: right; }
  .drm-fa-icon-pro--align-center {
    margin-left: auto;
    margin-right: auto; }
  .drm-fa-icon-pro--align-inline {
    display: inline-block; }
  .drm-fa-icon-pro__hoverbg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.2s ease-in; }
  .drm-fa-icon-pro__content {
    position: relative;
    z-index: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    transition: background-color 0.2s ease-out, color 0.2s ease-in; }
  .drm-fa-icon-pro i {
    margin: auto; }

a.drm-fa-icon-pro:hover, a.drm-fa-icon-pro:focus, a.drm-fa-icon-pro:active {
  cursor: pointer; }
  a.drm-fa-icon-pro:hover .drm-fa-icon-pro__hoverbg, a.drm-fa-icon-pro:focus .drm-fa-icon-pro__hoverbg, a.drm-fa-icon-pro:active .drm-fa-icon-pro__hoverbg {
    opacity: 1;
    transition: opacity 0.2s ease-out; }
  a.drm-fa-icon-pro:hover .drm-fa-icon-pro__content, a.drm-fa-icon-pro:focus .drm-fa-icon-pro__content, a.drm-fa-icon-pro:active .drm-fa-icon-pro__content {
    background-color: inherit !important;
    color: inherit !important;
    transition: background-color 0.2s ease-in, color 0.2s ease-out; }