.formbuilder {
  @import 'loops.scss';

  html {
    box-sizing: border-box;
    height: 100%;
    max-height: 100vh;
    background-color: rgba(204, 204, 204, .219);
  }

  *,
  *::before,
  *::after {
    box-sizing: inherit;
  }

  html,
  body {
    display: block;
    height: 100%;
    max-height: 100vh;
    margin: 0;
    overflow: auto;
    font-family: 'Helvetica Neue', Arial, sans-serif;
  }

  .input-group {
    flex-wrap: unset;
  }

  .input-group-addon {
    padding: 6px 12px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1;
    color: #555;
    text-align: center;
    background-color: #eee;
    border: 1px solid #ccc;
    border-left: 0;
    border-radius: 4px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .panel-heading {
    padding: 0;

    .btn-link {
      color: #555 !important;
    }
  }

  .tab-container .nav-link {
    color: #555;
  }

  .source {
    .ngx-dnd-container {
      padding: 0;
      margin: 0;
      border: none;
    }

    .ngx-dnd-item {
      padding: 0;
      margin: 2px 0;
    }
  }

  .ngx-section-content {
    padding: 0 !important;
  }

  .fbContainer {
    display: flex;
    background: white;

    .fb-column {
      max-height: 100%;
    }

    .mt10 {
      margin: 10px 0 0;
      border-color: #ccc;
    }

    .fb-sidebar-left {
      position: relative;
      min-height: 100%;
      padding-right: 10px;
      border-right: 1px solid #ccc;

      .search-container {
        padding-left: 5px;
        margin-bottom: 10px;

        .search {
          display: inline-flex;
        }

        .filter {
          float: right;
          font-size: larger;
          line-height: 30px;
          vertical-align: middle;
        }
      }

      .controls-container {
        max-width: 100%;
        height: 100%;
        min-height: 100%;
        overflow-x: hidden;

        .control {
          width: 100%;
          height: 30px;
          padding-left: 5%;
          margin: 1px;
          font-weight: 600;
          line-height: 30px;
          background: #cccccc6b;
          border: 1px solid #cccccc6b;
        }
      }
    }

    .fb-sidebar-right {
      position: relative;
      min-height: 100%;
      padding-left: 10px;
      border-left: 1px solid #ccc;
    }
  }

  .panel-group .panel + .panel {
    margin-top: 0;
    border-radius: none;
  }

  .tab-container {
    display: block;
    height: 100%;
  }

  .tab-content {
    display: block;
    max-height: calc('100vh -87px');
    overflow-y: auto;
  }

  .right {
    float: right;
  }

  .d-block {
    display: block;
  }

  .label {
    background: transparent;
    border: none;

    &:focus {
      border: none;
      outline: none;
    }
  }

  .moreActions {
    display: inline-block;
    padding: 0;
  }

  .no-transform {
    transform: none !important;
  }

  .w-100 {
    max-width: 100%;
  }
}

.actions-menu {
  position: absolute;
  top: -11px;
  right: -5px;
  z-index: 999;

  button {
    max-width: 30px;
    max-height: 30px;
    padding: 0 1px;
    font-size: small;

    i {
      padding: 3px;
      margin: 3px;
    }
  }
}

ngx-dnd-item > .actions-menu {
  right: 0;
}

.fb-row {
  padding-top: 3px;
  padding-top: 3px;
  padding-bottom: 3px;
  padding-bottom: 3px;
  margin-top: 3px;
  margin-bottom: 3px;
  border: 1px solid rgb(231, 231, 231);

  &:hover {
    border: 1px solid rgb(99, 99, 255);
  }
}

.fb-original-columns-4 {
  .fb-forced-columns-1 {
    width: calc(25% - 10px) !important;
    min-width: calc(25% - 10px) !important;
    max-width: calc(25% - 10px) !important;
  }

  .fb-forced-columns-2 {
    width: calc(50% - 10px) !important;
    min-width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  .fb-forced-columns-3 {
    width: calc(75% - 10px) !important;
    min-width: calc(75% - 10px) !important;
    max-width: calc(75% - 10px) !important;
  }

  .fb-forced-columns-4 {
    width: calc(100% - 10px) !important;
    min-width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
  }
}

.fb-original-columns-3 {
  .fb-forced-columns-1 {
    width: calc(33.33% - 10px) !important;
    min-width: calc(33.33% - 10px) !important;
    max-width: calc(33.33% - 10px) !important;
  }

  .fb-forced-columns-2 {
    width: calc(66.66% - 10px) !important;
    min-width: calc(66.66% - 10px) !important;
    max-width: calc(66.66% - 10px) !important;
  }

  .fb-forced-columns-3 {
    width: calc(100% - 10px) !important;
    min-width: calc(100% - 10px) !important;
    max-width: calc(100% - 10px) !important;
  }
}

.fb-original-columns-2 {
  .fb-forced-columns-2 {
    width: calc(75% - 10px) !important;
    min-width: calc(75% - 10px) !important;
    max-width: calc(75% - 10px) !important;
  }
}

.panel-open {
  .fb-row {
    padding: 0;
    margin: 0;
    border: 0;
  }
}