.fusion-builder-live {
  .fusion-child-sortables {
    padding: 10px 20px;
  }
  .fusion-builder-all-elements-container,
  .fusion-builder-column-layouts-container {
    position: relative;

    .fusion-tabs {
      overflow: hidden;
      margin-bottom: 0;
    }
  }

  .fusion-global {
    span.fusion-global-tooltip {
      background: #32383c;
      position: absolute;
      left: 50%;
      margin: 0 auto;
      color: rgba(255, 255, 255, 0.82);
      font-size: 14px;
      padding: 10px 20px;
      border-radius: 5px;
      font-weight: 200;
      top: -50px;
      white-space: nowrap;
      display: none;
      z-index: 9999;
      transform: translateX(-50%);

      &:before {
        content: "\f0d7";
        font-family: fusion-builder-icons;
        width: 100%;
        text-align: center;
        position: absolute;
        left: 0;
        bottom: -10px;
        font-size: 30px;
        color: #33393d;
        transition: color 0.1s ease;
      }
    }

    &:hover {
      span.fusion-global-tooltip {
        display: block;
      }

      h4 {
          &.fusion-page-layout-title,
          &.fusion_module_title {
              &:before {
                color: #198fd9;
              }
          }
      }
    }

    h4.fusion-page-layout-title,
    h4.fusion_module_title {
      position: relative;
      width: 100%;
      line-height: 16px;

      &:before {
        content: "\f0ac";
        font-family: fusion-builder-icons;
        font-size: 16px;
        margin-right: 10px;
        margin-left: 1px;
        color: #93999f;
        vertical-align: middle;
      }

      .fusion-global-tooltip-wrapper {
        position: absolute;
        width: 15px;
        height: 16px;
        top: 0;
      }
    }
  }

  .fusion-builder-all-modules {
      margin: 0;
    padding: 10px 5px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    clear: both;

    li {
      border: 1px solid #e0e3e7;
      background-color: #fff;
      text-align: center;
      position: relative;
      list-style-position: inside;
      list-style-type: none;
      cursor: pointer;
      padding: 0 10px;
      box-sizing: border-box;
      margin: 7.5px;
      width: 120px;
      min-height: 110px;
      align-items: center;
      display: inline-flex;
      justify-content: center;
      flex-grow: 1;
      border-radius: 4px;
      transition: all 0.1s ease;

      &.spacer {
        visibility: hidden;
        height: 0 !important;
        min-height: 0 !important;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
      }

      .fusion-module-icon, .fusion_module_title, .fusion_module_title:before {
        transition: all 0.1s ease;
      }

      &:hover {
        border: 1px solid #198fd9;

        .fusion-module-icon, .fusion_module_title, .fusion_module_title:before {
          color: #198fd9;
        }
      }

      .fusion-module-icon {
        display: block;
        width: auto;
        height: auto;
        font-size: 30px;
        margin-bottom: 16px;
        color: #93999f;
        transition: all 0.3s ease;
      }

      .fusion_module_title {
        color: #2a3035;
        font-size: 14px;
        font-weight: 400;
        transition: all 0.1s ease;
        &:before {
           transition: all 0.1s ease;
        }
      }

      .fusion_module_label {
        display: none;
      }

      .fusion_module_description {
        display: none;
      }

      &.fusion-builder-special-list,
      &.fusion-builder-library-list {
        li {
          width: 300px;
          text-align: left;
          min-height: 70px;
          padding: 0 25px;
          justify-content: left;
          cursor: pointer;

          .fusion_module_title {
            &:before {
              font-size: 25px;
              right: 0;
            }
            .fusion-global-tooltip-wrapper {
              width: 25px;
              height: 25px;
              right: 0;
            }
          }
        }
      }
    }
    .fusion-builder-element-generator {
        position: relative;
        border-color: #eeeeee !important;
        background-color: #ffffff !important;
        box-shadow: none !important;
        cursor: auto;

        .fusion_module_title {
            color: #999999;
            transition: opacity 0.1s ease;
        }

        .fusion-tooltip {
            display: flex;
          align-items: center;
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          opacity: 0;
          color: #999999;
          font-size: 14px;
          padding: 10px;
          border-radius: 5px;
          font-weight: 200;
          transition: opacity 0.2s ease 0.2;
          text-align: center;
        }

        &:hover {
            .fusion_module_title {
                opacity: 0;
                color: #999999;
            }

            .fusion-module-icon {
                color: #93999f;
            }

            .fusion-tooltip {
                opacity: 1;
            }
      }
    }
    &.fusion-builder-library-list {
      li {
          border: 1px solid #ddd;
          margin: 10px;
          background-color: #fff;
          text-align: left;
          position: relative;
          list-style-position: inside;
          padding-left: 20px;
          padding-right: 20px;
          list-style-type: none;
          cursor: pointer;
          box-sizing: border-box;
          display: flex;
          border-radius: 4px;
          width: ~"calc((100% - 60px ) / 3)";
          height: 54px;
          // min-height and max-height here are used to override the 70px defined elsewhere.
          min-height: 54px !important;
          max-height: 54px !important;
          transition: border-color 0.1s ease;

         &:hover {
            border-color: #198fd9;

            h4 {
                .fusion-page-layout-title,
                .fusion_module_title {
                    &:before {
                        color: #198fd9;
                    }
                }
            }
         }

         &.fusion-global {
           h4 {
             &:before {
               content: "\f0ac";
               font-family: fusion-builder-icons;
               font-size: 16px !important;
               margin-right: 10px;
               margin-left: 1px;
               color: #93999f;
               vertical-align: middle;
             }
           }
         }

         h4 {
           line-height: 16px;
           color: #444 !important;
         }
      }
    }
  }

  .fusion-builder-sortable-children {
    margin: 0;
    padding: 0;
    list-style: none;

    .ui-sortable-placeholder {
      background: #f3f3f3 !important;
      border: 1px dashed #ddd !important;
      visibility: visible !important;
      box-shadow: none;
      padding-left: 0;
      padding-right: 0;
      animation: none;
      display: block;
      height: 38px;
    }

    .fusion-menu-item-handle,
    li {
      border: 1px solid #e0e3e7;
      box-sizing: border-box;
      box-shadow: 0 0 0 1px 2px 0 rgba(22, 29, 37, 0.1);
      width: 100%;
      border-radius: 4px;
      margin: 0 0 10px;
      cursor: move;
      background-color: #fff;
      padding-left: 0;
      line-height: 1.4;
      margin-left: 0 !important;
      text-align: right;
      transition: box-shadow 100ms;

      &:hover {
        box-shadow: 0 1px 3px 0 rgba(22, 29, 37, 0.14);
        color: #444;
      }

      .fusion-builder-controls {
        display: inline-flex;
        align-items: stretch;

        a {
          padding: 0.9em;
          display: block;
          width: auto;
          text-align: center;
          text-decoration: none;
          color: #93999f;
          box-sizing: content-box;
          transition: color 0.1s ease;

          &:not(.fusion-builder-multi-setting-remove):hover {
			color: #198fd9;
          }
            &.fusion-builder-multi-setting-remove:hover {
                color: #e0284f;
            }
        }
      }

      .multi-element-child-name {
        font-weight: 600;
        padding: 0.7em 0.8em 0.7em 1em;
        float: left;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
        box-sizing: border-box;
        font-family: "Noto Sans", Roboto, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
      }
			&.ui-sortable-helper {
				transition: none;
			}
    }

    li {
        display: flex;
        justify-content: space-between;
    }
  }

  .fusion-builder-add-multi-child {
		display: flex;
    align-items: center;
    justify-content: center;
    background: #198fd9;
    padding: 8px 15px;
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    border-radius: 3px;
    width: auto;
    font-family: "Noto Sans", Roboto, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
    line-height: 26px;
    clear: both;
		margin-bottom: 20px;
		margin-top: 30px;
		width: 100%;
		text-align: center;
		text-decoration: none;
		font-size: 14px;
		transition: background-color 0.1s ease;

    span {
      padding-right: 5px;
    }

    &:hover {
      background-color: #1081c7;
    }
  }
  .fusion-builder-dialog {
    .fusion-builder-main-settings {
      .fusion-builder-all-elements-container {
        padding: 0 5px;
      }
    }
  }
}