@menu-header-color: #00ccb0;
@modal-scrollbar-thumb-bg: #181e3b;
@simple-form-prefix-cls: ~'@{ant-prefix}-simple-form';
@formbuild-primary-color: #4477ee;
// @formbuild-bg: #1e1e1e;
// @formbuild-border-color: #333333;
// @formbuild-color: #e0e0e0;
// @formbuild-title-bg: #161616;
// @formbuild-border-dark-color: #1e1e1e;
// @formbuild-toolbar-bg: #252525;
@formbuild-bg: white;
@formbuild-border-color: #ccc;
@formbuild-color: #333;
@formbuild-title-bg: #DBDBDB;
@formbuild-border-dark-color: #F0F0F0;
@formbuild-toolbar-bg: #f0f0f0;
@formbuild-control-input-bg: white;
@ant-prefix: ant;
@formbuild-placeholder-color: #E0E0E0;
@formbuild-top-bg: #f0f0f0;

@brand-primary: #108ee9;

html,
body,
#root {
  height: 100%;
}
body {
  font-size: 16px;
}

.formbuild-btn-opt,
.formbuild-btn-page-opt {
  display: inline-block;
  padding: 0;
  white-space: nowrap;
  cursor: pointer;
  line-height: 1;
  button,
  span {
    color: @formbuild-color;
  }
  button {
    padding: 0 3px;
    width: auto;
    display: inline-block !important;
    height: 24px;
    font-size: 15px;
    &:after,
    &::before {
      display: none;
    }
    svg {
      width: 15px !important;
      height: 15px !important;
      color: #646464;
    }
    svg,
    path {
      fill: #646464;
    }
  }
  span {
    vertical-align: 6px;
    font-size: 13px;
    margin-left: 3px;
  }
  &:hover {
    svg,
    span {
      // color: #5a99f9;
      opacity: 0.65;
    }
  }
  &.red {
    span,
    svg,
    path {
      color: #c93925 !important;
      fill: currentColor !important;
    }
    &:hover {
      span,
      svg {
        opacity: 0.65;
      }
    }
  }
}
.formbuild-btn-page-opt {
  padding-top: 9px;
  margin-left: 10px;
  button {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    font-size: 15px;
    padding: 0;
  }
  &:hover {
    svg,
    polygon {
      fill: white !important;
      opacity: 1;
    }
    button {
      background-image: linear-gradient(180deg, #9F9F9F 0%, #666666 100%);
      border: 1px solid #333333;
    }
  }
  + .formbuild-btn-opt {
    margin-left: 10px;
  }
}
.formbuild-btn-opt-default-color {
  display: inline-block;
  padding: 1px 0 0;
  white-space: nowrap;
  margin: 0 1px;
  cursor: pointer;
  line-height: 1;
  > div {
    height: 22px !important;
    border-radius: 3px;
    border: 1px solid transparent;
  }
  button {
    padding: 0 4px;
    width: auto;
    display: inline-block !important;
    height: 22px !important;
    font-size: 15px;
    background-color: transparent;
    &:after,
    &::before {
      display: none;
    }
    svg {
      width: 15px !important;
      height: 15px !important;
    }
  }
  &:hover {
    div {
      background: #d2d2d2;
    }
  }
  .formbuild-btn-default-color {
    fill: #999 !important;
  }
  .formbuild-btn-action-color {
    fill: #333 !important;
  }
}
//---------------scroll for chrome brower---------------------------------
@scrollbar-width: 6px;
@scrollbar-thumb-border-radius: 3px;
@scrollbar-thumb-bg: #888;
@scrollbar-bg: #888;
::-webkit-scrollbar {
  width: @scrollbar-width;
  height: @scrollbar-width;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 @scrollbar-width rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-thumb {
  background-color: @scrollbar-thumb-bg;
  border-radius: @scrollbar-thumb-border-radius;
}

.webiny-pb-page-element-container {
  padding: 14px !important;
}
.webiny-pb-page-element-container.webiny-pb-page-element-container-empty {
  padding: 0 !important;
}
.webiny-pb-page-is-block .webiny-pb-page-element-container  {
  padding: 0 !important;
}
.webiny-pb-editor-content-preview > .webiny-pb-page-element-container {
  padding: 0 !important;
}

.webiny-pb-layout-form-container, .webiny-pb-layout-block-container {
  .@{ant-prefix}-form-horizontal .@{ant-prefix}-form-item-control-wrapper {
    flex: 1 1 0;
  }
  .@{ant-prefix}-form-inline .@{ant-prefix}-form-item {
    margin: 0;
  }
  .@{ant-prefix}-table-thead > tr > th {
    position: relative;
  }
  .@{ant-prefix}-form-item {
    margin-bottom: 0;
  }
  .@{ant-prefix}-form .@{ant-prefix}-form-item-label label {
    padding-right: 12px;
  }
  .@{ant-prefix}-table-wrapper {
    ::-webkit-scrollbar {
      width: 9px;
      height: 9px;
    }
  }
  .@{ant-prefix}-row {
    display: flex;
  }
  .@{ant-prefix}-form-item-hidden, .@{ant-prefix}-form-item-hidden.@{ant-prefix}-row {
    display: none;
  }
  div.@{ant-prefix}-row {
    overflow: visible;
  }
  div.@{ant-prefix}-input-number, .@{ant-prefix}-picker, .@{ant-prefix}-time-picker {
    width: 100%;
  }
  // .@{ant-prefix}-form-item-label > label.@{ant-prefix}-form-item-required:not(.@{ant-prefix}-form-item-required-mark-optional)::before {
  //   display: none;
  // }

  // .@{ant-prefix}-form-item-label > label.@{ant-prefix}-form-item-required:not(.@{ant-prefix}-form-item-required-mark-optional) >div::after {
  //   display: inline-block;
  //   color: #f5222d;
  //   font-size: 14px;
  //   font-family: SimSun, sans-serif;
  //   line-height: 1;
  //   content: '*';
  //   position: absolute;
  //   top: 50%;
  //   transform: translateY(-50%);
  //   right: -10px;
  // }
  // form
  // .@{ant-prefix}-form div.@{ant-prefix}-form-item-label label:after {
  //   content: ':';
  //   right: 0;
  // }
  .@{ant-prefix}-form .no-label div.@{ant-prefix}-form-item-label label:after {
    display: none;
  }
  .@{ant-prefix}-form div.@{ant-prefix}-form-item-label label.@{ant-prefix}-form-item-no-colon:after {
    content: ' ';
  }
}
.webiny-pb-page-document {
  background: #fff;
  overflow: hidden;
  padding-left: 5px;
  padding-right: 5px;
}

// setting table
@formbuild-setting-color: #757575;
@formbuild-setting-hover-color: #3f9aff;
@formbuild-setting-border-color: #e0e0e0;
@formbuild-setting-default-color: @formbuild-primary-color;
@formbuild-setting-help-color: #ee9e58;
@formbuild-setting-help-hover-color: #ee7c18;

.formbuild-setting-table {
  margin-bottom: 5px;
  .@{ant-prefix}-table-thead th {
    color: @formbuild-setting-color;
  }
  .@{ant-prefix}-table-thead th,
  .@{ant-prefix}-table-footer {
    background: transparent !important;
    padding: 5px 0;
    border: 0;
    margin-top: 8px;
    text-align: center;
    a {
      color: @formbuild-setting-color;
    }
    &:hover {
      a {
        color: @formbuild-setting-hover-color;
      }
    }
  }
  .@{ant-prefix}-table-placeholder {
    border-width: 0 !important;
    margin-top: 5px;
  }
  .@{ant-prefix}-table-body > table {
    &,
    .@{ant-prefix}-table-thead {
      border: 0;
    }
    border-collapse: collapse;
    .@{ant-prefix}-table-thead {
      border-bottom: 1px solid #f0f0f0;
    }
    .@{ant-prefix}-table-tbody > tr:last-child > td {
      border-bottom: 0 !important;
    }
    td {
      padding-left: 2px !important;
      padding-right: 1px !important;
    }
  }
  .@{ant-prefix}-table-content > .@{ant-prefix}-table-scroll > .@{ant-prefix}-table-header > table > .@{ant-prefix}-table-thead > tr > th {
    padding-left: 2px !important;
  }
  .@{ant-prefix}-table-small.@{ant-prefix}-table-bordered .@{ant-prefix}-table-footer {
    border: 1px solid #f0f0f0 !important;
  }
}
// 右侧工具栏样式
.webiny-ui-element-setting-bar {
  width: 287px;
  height: 50px;
  overflow: hidden;
  .@{ant-prefix}-collapse-icon-position-right > .@{ant-prefix}-collapse-item > .@{ant-prefix}-collapse-header {
    padding-left: 12px;
    color: #2c7cf6;
  }
  .@{ant-prefix}-collapse-borderless > .@{ant-prefix}-collapse-item > .@{ant-prefix}-collapse-content > .@{ant-prefix}-collapse-content-box {
    padding: 0;
  }
  .@{ant-prefix}-slider-with-marks {
    margin-bottom: 0;
  }
  .@{ant-prefix}-input-group-wrapper {
    top: 0 !important;
  }
  .@{ant-prefix}-collapse-item > .@{ant-prefix}-collapse-content {
    overflow-y: auto;
    overflow-x: hidden;
  }
  > .ant-tabs {
    > .ant-tabs-bar {
      .ant-tabs-nav-container {
        height: auto !important;
      }
      .ant-tabs-tab {
        background: transparent !important;
        height: unset !important;
        line-height: unset !important;
      }
    }
    > .ant-tabs-content > .ant-tabs-tabpane {
      padding: 0 1px 1px !important;
    }
  }
}
.formbuild-collapse {
  background: transparent !important;
  padding: 0 5px;
  .@{ant-prefix}-collapse-header {
    padding-left: 5px !important;
  }
}
// settings
.formbuilder-setting-input {
  background: transparent !important;
  &:before,
  &:after {
    display: none;
  }
  .mdc-text-field__input {
    caret-color: unset;
    border: 1px solid @formbuild-setting-border-color !important;
    height: 26px !important;
    padding: 4px 12px !important;
    &:hover,
    &:focus {
      border-color: @formbuild-setting-hover-color !important;
    }
  }
  .mdc-line-ripple {
    display: none !important;
  }
}
.formbuilder-setting-select {
  .webiny-ui-select {
    background: transparent !important;
    height: 26px !important;
    width: 90px;
    border-radius: 1px !important;
    &:after,
    &:before {
      display: none !important;
    }
    border: 1px solid @formbuild-setting-border-color !important;
    select {
      height: 26px !important;
      padding: 1px 8px !important;
      line-height: 14px !important;
    }
  }
  .mdc-line-ripple {
    display: none !important;
  }
  .mdc-select__dropdown-icon {
    bottom: 1px;
    background: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E") no-repeat center !important;
  }
}
.frombuilder-setting-help {
  position: absolute;
  right: 18px;
  bottom: 20px;
  width: 35px;
  height: 35px;
  line-height: 1;
  padding-top: 7px;
  text-align: center;
  border-radius: 0 0 5px 0;
  background-color: white;
  border-radius: 3px;
  box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.1), 2px 1px 2px 0 rgba(0, 0, 0, 0.1), -2px 1px 2px 0 rgba(0, 0, 0, 0.1);
  cursor: pointer;
  z-index: 10;
  z-index: 200;
  span {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: @formbuild-setting-help-color;
    padding-top: 2px;
  }
  svg {
    width: 11px;
    height: 11px;
  }
  &:hover {
    span {
      background: @formbuild-setting-help-hover-color;
    }
  }
  &,
  &:hover {
    color: white;
  }
}
.formbuilder-setting-label-underline {
  border-bottom: 1px dashed #bcbcbc;
  height: 18px;
  line-height: 18px;
  vertical-align: 3px;
  display: inline-block;
}

// design card component collapse
.formBuilder-show-collapse {
  margin: 0 !important;
  > .ant-collapse-item {
    border: 0 !important;
  }
}

// fix ngportal
html {
  font-size: 16px !important;
}

// style
.webiny-ui-element-setting-bar {

    .ant-tabs-nav-container-scrolling {
      padding: 0 !important;
    }
    .ant-tabs-nav .ant-tabs-tab {
      padding: 10px 0 !important;
    }
    .ant-tabs-line > .ant-tabs-bar .ant-tabs-tab {
      margin-left: 12px;
      margin-right: 12px;
    }

}

// design form
.webiny-pb-layout-form-container, .webiny-pb-layout-block-container {
  .@{ant-prefix}-form-horizontal .@{ant-prefix}-form-item-control-wrapper {
    flex: 1 1 0;
  }
  .@{ant-prefix}-form-inline .@{ant-prefix}-form-item {
    margin: 0;
  }

  .@{ant-prefix}-table-thead > tr > th {
    position: relative;
  }
  .@{ant-prefix}-form-item {
    margin-bottom: 0;
  }
  // table
  .@{ant-prefix}-table-thead > tr > th {
    position: relative;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .@{ant-prefix}-table-column-title {
    overflow: visible;
    height: auto;
    .webiny-pb-layout-table-header-cell {
      > div > div > div > div > div > div {
        margin-top: 6px;
      }
    }
    > div {
      &:hover,
      &.cutIGC {
        .webiny-pb-layout-table-header-cell {
          > div > div > div > div > div > div {
            margin-top: 10px;
          }
        }
      }
    }
  }
  .@{ant-prefix}-table-header-column {
    overflow: visible;
    height: auto;
    min-height: 30px;
  }
  .@{ant-prefix}-table-fixed,
  .@{ant-prefix}-table-thead,
  .@{ant-prefix}-table-thead tr,
  .@{ant-prefix}-table-thead th,
  .@{ant-prefix}-table-thead .@{ant-prefix}-table-header-column,
  .@{ant-prefix}-table-thead .@{ant-prefix}-table-header-column > div,
  .@{ant-prefix}-table-thead .@{ant-prefix}-table-column-title,
  .@{ant-prefix}-table-tbody,
  .@{ant-prefix}-table-tbody > tr,
  .@{ant-prefix}-table-tbody > tr > td,
  .@{ant-prefix}-table-tbody > tr > td > div {
    position: relative;
  }
  .webiny-pb-layout-table-header-cell {
    height: 26px;
  }

  .@{ant-prefix}-table-thead th,
  .@{ant-prefix}-table-thead td {
    min-width: 164px;
  }
  .@{ant-prefix}-table-thead .webiny-pb-page-element-container {
    line-height: 1;
  }
  .@{ant-prefix}-table-thead .webiny-pb-page-element-container,
  .@{ant-prefix}-table-tbody > tr > td .webiny-pb-page-element-container {
    &.iBDPDe {
      position: relative;
    }
    .element-holder {
      top: -8px;
      > div {
        padding-top: 1px;
        padding-bottom: 3px;
      }
      > div > div {
        margin-bottom: -3px;
      }
    }
  }
  .@{ant-prefix}-table {
    .cutIGC > .innerWrapper > .type {
      z-index: 2;
    }
    .element-holder {
      > div > div {
        z-index: 10;
      }
      label {
        z-index: 15;
        cursor: pointer;
      }
    }
    .webiny-pb-page-if {
      padding-top: 10px;
      .type {
        &,
        .element-holder {
          left: 0;
          right: auto;
        }
      }
      .webiny-pb-page-element-container {
        min-height: auto;
      }
    }
  }
  tbody.@{ant-prefix}-table-tbody > tr {
    &:nth-child(2),
    &:nth-child(3) {
      &.fdx-table-row-selected,
      &:hover td,
      &:focus td,
      td {
        background: transparent !important;
      }
      td::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 1;
      }
    }
    &:nth-child(2) td::after {
      background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.6));
    }
    &:nth-child(3) td::after {
      background-image: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.9));
    }
  }
  td > div > .webiny-pb-page-element-container {
    height: inherit;
  }
  th .webiny-pb-layout-table-header-cell {
    clear: both;
    > div > div {
      float: left;
    }
    span > span {
      display: block;
      width: 148px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      line-height: 1;
      float: left;
    }
  }
  td {
    min-height: 34px;
    text-overflow: unset !important;
    .webiny-pb-layout-table-row-cell,
    > div {
      height: auto !important;
      .webiny-pb-page-element-container {
        min-height: 25px;
      }
    }
  }
  .@{ant-prefix}-table-tbody > tr {
    &:nth-child(2),
    &:nth-child(3) {
      > td > div > div {
        min-height: auto !important;
      }
    }
  }

  .@{ant-prefix}-form .@{ant-prefix}-form-item-label label {
    padding-right: 12px;
  }
  .@{ant-prefix}-row {
    display: flex;
  }
  .@{ant-prefix}-form-item-hidden, .@{ant-prefix}-form-item-hidden.@{ant-prefix}-row {
    display: none;
  }
  div.@{ant-prefix}-row {
    overflow: visible;
  }
  div.@{ant-prefix}-input-number, .@{ant-prefix}-picker, .@{ant-prefix}-time-picker {
    width: 100%;
  }
  // .@{ant-prefix}-form-item-label > label.@{ant-prefix}-form-item-required:not(.@{ant-prefix}-form-item-required-mark-optional) {
  //   &::before,
  //   &::after {
  //     display: none;
  //   }
  // }
  // .@{ant-prefix}-form-item-label > label.@{ant-prefix}-form-item-required:not(.@{ant-prefix}-form-item-required-mark-optional) >div::after {
  //   display: inline-block;
  //   color: #f5222d;
  //   font-size: 14px;
  //   font-family: SimSun, sans-serif;
  //   line-height: 1;
  //   content: '*';
  //   position: absolute;
  //   top: 50%;
  //   transform: translateY(-50%);
  //   right: -12px;
  // }
  // form
  // .@{ant-prefix}-form div.@{ant-prefix}-form-item-label label:after {
  //   content: ':';
  //   right: 0;
  // }
  // .@{ant-prefix}-form .no-label div.@{ant-prefix}-form-item-label label:after {
  //   display: none;
  // }
  // .@{ant-prefix}-form div.@{ant-prefix}-form-item-label label.@{ant-prefix}-form-item-no-colon:after {
  //   content: ' ';
  // }
}

.pb-editor-if-setting {
  .@{ant-prefix}-radio-inner {
    width: 10px;
    height: 10px;
    top: -3px;
    &::after {
      width: 0;
      height: 0;
    }
  }
  .@{ant-prefix}-radio.@{ant-prefix}-radio-checked .@{ant-prefix}-radio-inner {
    top: -2px;
  }
}

// fix table scroll
div.@{ant-prefix}-table-layout-fixed table {
  table-layout: unset;
}
div.@{ant-prefix}-table-empty .@{ant-prefix}-table-body {
  overflow-x: hidden !important;
}

// black theme
.formbuilder-bg {
  background: @formbuild-bg;
}
.formbuilder-border-color {
  border-color: @formbuild-border-color;
}
.formbuilder-title-bg {
  background-color: @formbuild-top-bg;
}
.formbuilder-border-dark-color {
  border-color: @formbuild-border-dark-color;
}
.webiny-pb-layout-form-container .ant-form {
  // background: white;
}
.webiny-ui-element-setting-bar {
  .ant-tabs-nav .ant-tabs-tab {
    color: @formbuild-color;
  }
  .ant-tabs-top-bar {
    border-color: @formbuild-border-color;
  }
  .ant-tabs-bar {
    background: @formbuild-title-bg;
    span {
      font-size: 12px !important;
    }
  }
  .ant-tabs-nav .ant-tabs-tab-active {
    color: @formbuild-color;
  }
  .ant-tabs-ink-bar {
    background: @formbuild-color;
  }
  .ant-collapse-icon-position-right > .ant-collapse-item > .ant-collapse-header {
    color: @formbuild-color !important;
  }
  .ant-form-item-label > label {
    color: @formbuild-color !important;
  }
  .ant-form input.ant-input {
    // background: @formbuild-control-input-bg;
    color: @formbuild-color;
    border: 1px solid @formbuild-setting-border-color !important;
  }
  .mdc-menu-surface--anchor .mdc-menu-surface + div {
    background: @formbuild-control-input-bg;
    color: @formbuild-color;
  }
  .mdc-typography--overline,
  .ant-collapse-content-box {
    color: @formbuild-color !important;
  }
  .mdc-select:not(.mdc-select--disabled) {
    background: @formbuild-control-input-bg !important;
    color: @formbuild-color !important;
    border: 0 !important;
  }
  .formbuilder-setting-input .mdc-text-field__input {
    background: @formbuild-control-input-bg !important;
    color: @formbuild-color !important;
    border: 0 !important;
  }
  svg.webiny-ui-icon {
    &,
    path {
      color: #00ccb0 !important;
    }
  }
  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector,
  .ant-input-number {
    background: @formbuild-control-input-bg !important;
    color: @formbuild-color !important;
  }
  input {
    color: @formbuild-color !important;
    &::-webkit-input-placeholder {
      color: @formbuild-placeholder-color;
    }
    &:-moz-placeholder {
      color: @formbuild-placeholder-color;
    }
    &::-moz-placeholder {
      color: @formbuild-placeholder-color;
    }
    &:-ms-input-placeholder {
      color: @formbuild-placeholder-color;
    }
  }
}
.formbuild-icon-design {
  path {
    &:first-child {
      fill: none !important;
    }
    &:last-child {
      fill: currentColor !important;
      color: #333 !important;
    }
  }
}
.mdc-drawer__content {
  background: @formbuild-toolbar-bg;
  &::-webkit-scrollbar {
    width: 4px;
    height: 4px;
    background-color: #d3dadb;
  }
  &::-webkit-scrollbar-track {
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.2);
  }
  &::-webkit-scrollbar-thumb {
    background-color: #949fa3;
    border-radius: 0;
  }
}
.formbuilder-toolbar-wrap {
  width: 160px;
}

// theme
.formbuild-dropdown-active {
  &,
  &:hover {
    background: @formbuild-primary-color;
    color: white;
  }
}

// search
.lowcode-builder_search {
  background: @formbuild-toolbar-bg;
  height: 32px;
  padding: 0 3px;
  border-right: 1px solid #bdc5c7;
  position: relative;
  .ant-input-affix-wrapper {
    width: 89%;
  }
  input {
    &::-webkit-input-placeholder {
      color: #949fa3;
      font-style: italic;
    }
    &:-moz-placeholder {
      color: #949fa3;
      font-style: italic;
    }
    &::-moz-placeholder {
      color: #949fa3;
      font-style: italic;
    }
    &:-ms-input-placeholder {
      color: #949fa3;
      font-style: italic;
    }
  }
  .ant-input {
    background: transparent;
    height: 26px;
    margin-top: 3px;
    padding-left: 23px !important;
    border-color: transparent !important;
    font-size: 12px;
    &:hover,
    &:focus {
      outline: 0;
      box-shadow: none;
    }
  }
  .ant-input-prefix {
    left: 4px;
    top: 55%;
    cursor: pointer;
    svg {
      width: 16px;
      height: 16px;
      fill: #949fa3;
    }
  }
}
.lowcode-builder_collapse {
  width: 14px;
  height: 14px;
  position: absolute;
  top: 10px;
  right: 8px;
  cursor: pointer;
  fill: #949fa3;
}
.lowcode-builder_menu_collapse {
  width: 45px;
  .lowcode-builder_collapse {
    right: 15px;
  }
  .mdc-list {
    padding-left: 0;
    padding-right: 0;
    width: 100%;
    > div {
      margin-bottom: 0;
    }
  }
  .mdc-list-item {
    display: none;
    + div {
      padding: 0 !important;
      > * {
        width: 100%;
        > div > div > div {
          min-height: 24px;
          > div {
            height: 24px;
            margin: 0;
            border: 0;
            margin-bottom: 0;
          }
        }
      }
      .itemsCenter {
        > div {
          &:nth-child(2) {
            display: none;
          }
          &:nth-child(1) {
            svg {
              width: 15px !important;
              height: 15px !important;
            }
          }
        }
      }
    }
  }
  .page-builder-toolbar-group-item {
    padding-left: 0;
    padding-right: 0;
    > * {
      width: 100%;
      height: 38px;
      &:hover {
        .page-builder-toolbar-menu-item {
          height: 38px !important;
        }
      }
    }
    .page-builder-toolbar-menu-icon + div {
      display: none;
    }
  }
}
// setting
.webiny-ui-element-setting-bar {
  background: white;
  .ant-slider-rail {
    background: #999;
  }
}

// autocomplete
.certain-category-search-dropdown {
  > div > ul > li:first-child > ul {
    display: none;
  }
}

// 移动端样式
.webiny-pb-page-document.mobile {
  .webiny-pb-page-element-container {
    padding: 0 !important;
  }
  .webiny-pb-layout-form-container, .webiny-pb-layout-block-container {
    .fxm-list {
      text-align: left;
      border-bottom: none;
      .fxm-list-body {
        border-top: none;
        padding-bottom: 12px;
        padding-top: 12px;
      }
      .fxm-list-item {
        border: 1px solid #eee;
        border-radius: 4px;
      }
    }
    .fxm-radio {
      border: 1px solid #ccc;
      border-radius: 50%;
      width: 18px;
      height: 18px;
      &.fxm-radio-checked {
        border-color: @brand-primary;
      }
    }
    .fxm-radio-inner:after {
      width: 10px;
      height: 10px;
      top: 3px;
      left: 2px;
      border-radius: 50%;
      content: '';
      transform: none;
    }
    .fxm-radio.fxm-radio-checked .fxm-radio-inner:after {
      background: @brand-primary;
      display: block;;
    }
  }
}
// toolbar
.page-builder-categories-list {
  background-color: transparent;
  padding: 0 0 5px;
  width: 100%;
}

.page-builder-toolbar-menu-item {
  height: 68px;
  margin: 0 1px;
  background: transparent;
  border-radius: 2px;
  padding: 8px 1px 0;
  transition: all 0.3s;
  > div:first-child {
    height: 26px;
  }
  > div:last-child {
    font-size: 12px;
    color: #39464b;
    width: 100%;
    height: 26px;
    line-height: 14px;
    text-align: center;
    display: -webkit-box;
    vertical-align: top;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  &:hover {
    background: #d2d3d4;
  }
}

.page-builder-toolbar-menu-icon {
  z-index: 50;
  font-size: 12px;
  margin: 0 auto;
  svg {
    width: 22px !important;
    height: 22px !important;
  }
}

.page-builder-toolbar-group-item {
  border-top: 1px solid #bdc5c7;
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 50%;
  }
  padding: 5px;
  &:first-child {
    border-top: 0;
  }
}

// fix table
.pagebuilder-design-area {
  .ant-table-empty {
    table > thead.ant-table-thead {
      display: none;
    }
    .ant-table-placeholder > div > div {
      border: 0;
    }
    .ant-table-placeholder {
      border-bottom: 0 !important;
    }
  }
  .pagebuilder-table-empty-tpl {
    width: 150px;
    height: 152px;
    position: relative;
    margin: 15px auto 0;
    img {
      width: 100%;
      height: 100%;
    }
    > span {
      position: absolute;
      top: 86px;
      right: 125px;
      width: 80px;
      font-size: 12px;
    }
  }
  .ant-table-column-title {
    > .bYqJjl .webiny-pb-layout-table-header-cell > div > div {
      border: 0;
    }
  }
  // fix table alignment
  .type + div > .fdx-table > .ant-table-wrapper {
    tbody > tr {
      &:not(:first-child) {
        > td > div {
          display: flex;
          > * {
            flex: 100%;
          }
        }
      }
    }
  }
}
.pagebuilder-bar-separate {
  width: 1px;
  height: 16px;
  background: #d9d9d9;
  display: inline-block;
  margin: 3px 4px;
}
.pagebuilder-bar-opt-active > div {
  background: #c5c5c5 !important;
  border-color:#808080 !important;
}
.formbuild-btn-opt-default-color svg.pagebuilder-bar-opt-arrow {
  width: 6px !important;
  height: 6px !important;
  vertical-align: 4px;
  margin-left: 3px;
}
.pagebuilder-title-tag {
  background: #596669;
  border-radius: 3px;
  line-height: 16px;
  display: inline-block;
  vertical-align: 2px;
  margin: 0 3px 0 0;
  padding: 0 1px;
  color: white;
  font-size: 12px;
  + span {
    vertical-align: 3px;
  }
}



