.fusion-builder-live {
  .fusion-column-sizer-active {
    z-index: auto;
    position: relative;

    &:hover {
        z-index: auto;
    }

    .fusion_builder_row {
        .fusion-builder-row {
            z-index: auto;
        }
    }
  }

  .fusion-column-wrapper {
    cursor: grab;
  }

  .fusion-builder-column {
    >.fusion-builder-add-element {
      display: none;
    }

    &.fusion-builder-editing-child {
      >.fusion-builder-module-controls-container {
        display: none !important;
      }
    }

    .column-sizes {
      display: none;

      &.fusion-expand-to-bottom {
        top: 100%;
        transform: translateY(5px) !important;
        height: auto;
        display: flex;
        flex-wrap: wrap;

        h4 {
          width: 100%;
        }
      }
    }

    >.fusion-builder-module-controls-container {
      margin-left: 0;
      padding-left: 0;

      a {

        &.fusion-builder-insert-column,
        &.fusion-builder-column-settings {
          display: block;
          opacity: 1;
          width: 33px;
        }

        &.fusion-builder-column-settings {
          background-color: #2a3035;
        }

        &.fusion-builder-column-size {
          font-weight: 600;
          font-family: "Noto Sans", Roboto, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
        }
      }
      .fusion-builder-column-controls {
        .fusion-builder-column-controls-inner {
          &:hover {
            .fusion-builder-column-settings {
              background: transparent;
            }
          }
        }
      }
    }

    &.active,
    &:hover,
    &.fusion-builder-element-edited {
      position: relative;

      > .fusion-column-wrapper {
        &:after {
          box-shadow: 0 0 0 3px rgba(25, 143, 217, 0.4);
          border-radius: 4px;
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          pointer-events: none;
          content: "";
          z-index: 9;
        }
      }
    }

    &.active,
    &:hover {
      >.fusion-builder-module-controls-container {
        display: block;
      }
    }

    &.fusion-builder-element-edited {
      >.fusion-column-wrapper:after {
        box-shadow: 0 0 0 3px rgba(25, 143, 217, 1);
      }
    }

    &.active {
      >.fusion-builder-module-controls-container .fusion-builder-module-controls {
        a:first-child {
          background-color: #198FD9;
        }
      }

      /* Column Sizes UI */
      .column-sizes {
        font-family: "Noto Sans", Roboto, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
        overflow: hidden;
        position: absolute;
        bottom: 100%;
        z-index: 99999999;
        width: 230px;
        background: white;
        border-radius: 4px;
        box-shadow: 0 4px 12px rgba(0,0,0,.18);
        transform: translateY(-10px);
        display: block;

        h4 {
          font-weight: 600;
          display: block;
          text-align: center;
          margin: 10px 0;
          text-transform: uppercase;
          font-size: 12px;
          color: #222;
          font-family: "Noto Sans", Roboto, "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif;
        }

        .column-size {
          width: ~"calc(100% / 6)";
          float: left;
          text-align: center;
          border-right: 1px solid #f1f1f1;
          border-top: 1px solid #f1f1f1;
          color: #222;
          cursor: pointer;
          font-size: 12px;
          padding: 5px 0;
          font-weight: 600;

          &:hover {
            background: #f9f9f9;
          }
          &.active-size {
            background: #eff7fc;
            color: #3894db;
          }
        }
      }
    }
  }

  .fusion-builder-column {
    &.active {
      >.fusion-builder-module-controls-container {
        .fusion-builder-module-controls {
          a {
            .fusion-column-tooltip {
              display: none;
            }
          }
        }
      }
    }
  }

  &:not(.fusion-builder-ui-wireframe) {
    .fusion-builder-column {
      &.fusion-global-column {
        .fusion-column-wrapper {
          &:after {
            box-shadow: 0 0 0 3px rgba(254, 71, 116, 0.4);
          }
        }

        .fusion-builder-module-controls-type-column {
          background: transparent !important;
          box-shadow: none !important;

          .fusion-builder-module-controls-inner,
          .fusion-builder-column-global {
            background: #fe4774;
            box-shadow: 0 4px 12px rgba(0,0,0,.18);
            border-radius: 4px;
          }

          .fusion-builder-column-global {
            border-radius: 4px;
            margin-left: 6px;
            width: 33px;
            opacity: 1;
          }
        }

        .fusion-builder-empty-column {
          .fusion-builder-module-controls-container {
            background: #fe4774;
          }
        }

        &.active {
          .fusion-builder-column-controls {
            .fusion-builder-column-controls-inner {
              .fusion-builder-column-settings {
                background: #fe4774;
              }
            }
          }
        }
      }
    }
    .fusion-global-container {
      .fusion-builder-column {
        &.active {
          .fusion-builder-column-controls {
            .fusion-builder-column-controls-inner {
              .fusion-builder-column-settings {
                background: #fe4774;
              }
            }
          }
        }
      }
      .fusion-nested-columns {
        .fusion-builder-module-controls-type-row-nested {
          .fusion-builder-module-controls-inner {
            &:hover {
              .fusion-builder-row-settings {
                background: #fe4774;
              }
            }
          }
        }
      }
    }
    .fusion-builder-container {
      &.scrolling-helper {
        .fusion-builder-column {
          &.fusion-global-column {
            .fusion-builder-module-controls-type-column {
              .fusion-builder-column-controls {
                background: transparent !important;
              }
            }
            .fusion-builder-live-element {
              .fusion-builder-controls {
                &.fusion-builder-module-controls {
                  .fusion-builder-module-controls-inner {
                    &:hover {
                      .fusion-builder-settings {
                        background: #ff743d !important;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .fusion-column-wrapper {
      &.fusion-column-has-overflow-hidden {
        &:hover {
          overflow:visible;
        }
      }
    }
  }

  .fusion-builder-controls {
    .fusion-builder-module-controls-inner {
      display: flex;
      border-radius: 4px;
    }
  }

  &.fusion-builder-no-ui {
    &:not(.fusion-builder-ui-wireframe) {
      .fusion-builder-module-controls-type-column {
        .fusion-builder-module-controls-inner {
          display: none;
        }
      }
    }
  }
  &.fusion-builder-ui-wireframe {
    .fusion-builder-controls {
      .fusion-column-tooltip {
        display: none;
      }
    }
  }
}