.zl-large-screen-setting-wrap {
  .zl-large-screen-unit-label-small {
    display: inline-block;
    min-width: 24px;
    max-width: 48px;
    margin-right: 12px;
    color: var(--color-title-icon);
    font-size: var(--font-size-12);
  }

  .zl-large-screen-unit-label-normal {
    display: inline-block;
    min-width: 24px;

// max-width: 48px;
    margin-right: var(--spacing20);
    color: var(--color-title-icon);
    font-size: var(--font-size-12);
  }

  .zl-large-screen-unit-scope-wrap-max-min {
    display: flex;

    justify-self: start;
    align-items: center;
    flex: 1 auto 1;

    .zl-large-screen-unit-scope-wrap-span {
      position: relative;

      span {
        position: absolute;
        top: -12px;
        right: -12px;
      }
    }
  }

  .zl-large-screen-unit-label-large {
    display: inline-block;
    min-width: 24px;
    max-width: 48px;
    margin-right: 32px;
    color: var(--color-title-icon);
    font-size: var(--font-size-12);
  }

  .zl-large-screen-unit-scope-wrap {
    display: flex;
    flex-direction: column;

    flex: 1 1 auto;
    align-items: center;
    justify-content: start;
  }

  .zl-large-screen-label-line {
    width: calc(100% - 40px);
    height: 1px;
    margin: 16px 0;
    margin-left: 20px;
    background: var(--color-label-line);
  }

  .zl-large-screen-setting-unit-content {
    position: relative;
    overflow: hidden; // 解决select文字过长超出

display: flex;
    flex-direction: row;

    flex: 1 1 auto;
    align-items: center;
    justify-content: start;
    flex: 1;

    .zl-ls-ant-select-clear {
      background-color: var(--color-form-bg);
    }
  }

  .zl-large-screen-setting-unit-content-large {
    position: relative;
    display: flex;
    flex-direction: row;

    flex: 1 1 auto;
    align-items: center;
    justify-content: end;
    flex: 1;
  }

  .zl-label-color-btn {
    display: inline-block;
    width: 30px;
    height: 16px;
    margin-right: 0;
    margin-left: var(--spacing);
    border: 1px solid rgba(0, 0, 0, .4000);
    border-radius: var(--border-radius-4);
    vertical-align: bottom;
    cursor: pointer;
    ;
  }

  .zl-large-screen-label-upload {
    width: 100%;
    height: 176px;

    .zl-large-screen-label-upload-title {
      display: flex;
      height: 40px;
      padding: 5px 0;
      line-height: 30px;
      font-size: var(--font-size-12);
      flex-direction: row;
    }

    .zl-ls-ant-upload {
      width: 100%;
      height: 112px;
    }
  }

  .zl-large-screen-label-upload-show-img {
    position: relative;
    display: flex;
    width: 100%;
    height: 112px;
    border: 1px solid var(--color-input-border);

    justify-content: center;
    align-items: center;

    img {
      width: 100%;
      height: 92px;
    }

    .zl-large-screen-label-upload-show-mask-layer {
      position: absolute;
      top: 0;
      left: 0;
      display: none;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);

      .zl-large-screen-label-mask-layer-span-wrap {
        display: inline-block;
        width: 100%;
        line-height: 112px;
        text-align: center;
      }

      .zl-large-screen-label-mask-layer-updata {
        padding: 0 12px;
        border-right: 1px solid #a0a8af;
        color: var(--color-icon);
        font-size: 12px;
        cursor: pointer;
      }

      .zl-large-screen-label-mask-layer-del {
        padding: 0 12px;
        color: var(--color-icon);
        font-size: 12px;
        cursor: pointer;
      }
    }
  }

  .zl-large-screen-label-upload-button {
    display: block;
    margin-top: 6px;
    color: var(--color-main);
    font-size: var(--font-size-12);
    cursor: pointer;
  }

  .zl-large-screen-setting-title {
    display: flex;
    height: 30px;
    font-size: var(--font-size-12);

    span {
      line-height: var(--font-size-16);
      color: var(--color-setting-collapse-header-font);
      font-weight: 500;
      font-size: var(--font-size-12);

      justify-content: flex-start;
    }
  }

  .zl-ls-ant-input-affix-wrapper {
    position: relative;
    display: block;
    width: 100%;
    height: 26px;
    border: 1px solid #1c2229;
    background: #0f1114;
    color: #c0c9d2;
  }

  .zl-ls-ant-input-prefix {
    z-index: 3;
    position: absolute;
    top: 0;
    margin-right: 4px;
    line-height: 28px;

// color: 'rgb(192, 201, 210)';
    font-style: normal;
    font-size: var(--font-size-12);
  }

  .zl-ls-ant-input {
    height: 26px;
    padding: 6px 10px;
    border: 1px solid var(--color-input-border);
    background: var(--color-form-bg);
    color: var(--color-component-select-font-color);
    font-size: var(--font-size-12);

    &::-webkit-input-placeholder {
      color: var(--color-select-setting-font);
    }
  }

  .zl-ls-ant-input-suffix {
    position: absolute;
    top: 0;
    right: 10px;
    line-height: 26px;
    color: var(--color-input-suffix);
    font-style: normal;
    font-size: var(--font-size-12);
  }

  .zl-ls-ant-slider {
    width: 100%;
    margin: 10px -1px;
  }

  .zl-ls-ant-select {
    width: 100%;
    height: 30px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--border-radius-4);
    box-sizing: border-box;
    line-height: 28px;
    background-color: var(--color-form-bg);
    color: var(--color-component-select-font-color);

    svg {
      color: var(--color-select-setting-font);
    }

    .zl-ls-ant-select-selection-item {
      color: var(--color-title-wrap);

      .zl-large-screen-unit-select-item-two {
        display: none;
      }

      .zl-large-screen-unit-select-item {
        overflow: hidden;
        line-height: 28px;
      }
    }
  }

  .zl-ls-ant-select-selector {
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius-4);
    color: var(--color-icon);
    font-size: var(--font-size-12);
  }

  .zl-large-screen-setting-unit-content .zl-ls-ant-select-single .zl-ls-ant-select-selector .zl-ls-ant-select-selection-item
  , .zl-large-screen-setting-unit-content .zl-ls-ant-select-single .zl-ls-ant-select-selector .zl-ls-ant-select-selection-placeholder {
    line-height: 26px;
  }

  .zl-ls-ant-select-status-error.zl-ls-ant-select:not(.zl-ls-ant-select-disabled):not(.zl-ls-ant-select-customize-input) .zl-ls-ant-select-selector {
    background-color: transparent;
  }

  .zl-ls-ant-select-single:not(.zl-ls-ant-select-customize-input) .zl-ls-ant-select-selector {
    border: 1px solid transparent;
    background-color: var(--color-form-bg);
    color: var(--color-icon);
    font-size: var(--font-size-12);
  }

  .zl-large-screen-setting-unit-select-options {
    background-color: var(--color-form-bg);
    color: var(--color-icon);
    font-size: var(--font-size-12);
  }

  .zl-ls-ant-switch {
    &:focus {
      box-shadow: none;
    }
  }

  .zl-ls-ant-radio-input {
    &:focus + .zl-ls-ant-radio-inner {
      box-shadow: none;
    }
  }

  .zl-ls-ant-radio {
    .zl-ls-ant-radio-inner {
      border: 1px solid var(--color-select-setting-font);
      background: var(--color-checkbox-background);
    }
  }

  .zl-ls-ant-radio-wrapper {
    .zl-ls-ant-radio-checked {
      .zl-ls-ant-radio-inner {
        border-color: transparent;
        background: var(--color-main);

        &::after {
          background-color: var(--color-white);
        }
      }
    }
  }

  .zl-large-screen-unit-lable-screenshot-wrap {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;

    .zl-large-screen-unit-lable-screenshot-showimg {
      width: 100%;
      height: 114px;
      border: 1px solid var(--color-input-border);
      border-radius: var(--border-radius-4);

      img {
        width: 100%;
        height: 100%;

        object-fit: contain;
        aspect-ratio: 16/9;
      }
    }

    .zl-ls-ant-btn {
      width: 98px;
      height: 30px;
      border: 1px solid var(--color-main);
      border-radius: 0;
      background-color: var(--color-content-bg);
      color: var(--color-main);
      font-size: var(--font-size-12);
    }

    .zl-large-screen-unit-lable-screenshot-btns {
      display: flex;
      width: 100%;
      height: auto;
      margin-top: 12px;

      justify-content: space-between;
    }

    .zl-large-screen-label-upload-cover {
      display: flex;
      width: 94px;
      height: 28px;
      border: 1px solid var(--color-component-select-border);
      border-radius: 4px;
      line-height: 28px;
      color: var(--color-title-icon);
      font-size: var(--font-size-12);
      cursor: pointer;

      align-items: center;
      justify-content: center;

      &:hover {
        border: 1px solid var(--color-setting-btn-font);

        .zl-icon {
          color: var(--color-setting-btn-font);
        }

        span {
          color: var(--color-setting-btn-font);
        }
      }

      &:active {
        border: 1px solid var(--color-zindex-click-color);
      }

      svg {
        width: 14px;
        height: 14px;
        margin-right: var(--spacing);
        color: var(--color-title-icon);
      }
    }

    .zl-large-screen-label-upload-button {
      display: block;
      margin-top: 6px;
      color: var(--color-cover-font);
      cursor: pointer;
    }
  }

  .zl-large-screen-label-radio-wrap {
    width: 100%;

    .zl-ls-ant-radio-wrapper {
      margin: 0;
      font-size: var(--font-size-12);

      span {
        padding-right: 0;
        color: var(--color-title-icon);
      }
    }

    .zl-ls-ant-radio-group {
      display: flex;
      width: 100%;

      justify-content: space-between;
    }
  }

  .zl-large-screen-position-wrap {
    display: flex;
    width: 100%;

    justify-content: end;
  }

  .zl-large-screen-unit-icon {
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 7px;
    text-align: center;
    cursor: pointer;

    &:hover {
      border-radius: var(--border-radius-2);
      background: var(--color-setting-icons-hover);
    }
  }

  .zl-large-screen-unit-icon-active {
    float: left;
    width: 20px;
    height: 20px;
    margin-left: 7px;
    border-radius: var(--border-radius-2);
    text-align: center;
    background: var(--color-setting-icons-active);
    cursor: pointer;
  }

  .zl-ls-ant-btn {
    display: flex;
    border-color: var(--color-main);
    background: transparent;
    color: var(--color-main);
    font-size: var(--font-size-14);
    text-shadow: none;

    justify-content: center;
    align-items: center;

    &:hover {
      border-color: var(--color-main);
      background-color: var(--color-content-bg);
      color: var(--color-main);
    }
  }

  .zl-ls-ant-btn:active
  , .zl-ls-ant-btn:focus
  , .zl-ls-ant-btn:hover {
    background-color: var(--color-content-bg);
  }

  .zl-ls-ant-input[disabled] {
    border: 1px solid var(--color-input-border);
    background-color: var(--color-form-bg);

    &:hover {
      border: 1px solid var(--color-input-border);
    }
  }

  .zl-large-screen-upload {
    width: 100%;

    .zl-ls-ant-upload {
      color: var(--color-icon);
    }

    .zl-ls-ant-upload-select {
      width: 100%;
    }
  }

  .zl-large-screen-upload-wrap {
    position: relative;
    display: flex;
    width: 100%;
    height: 110px;
    border: 1px solid var(--color-input-border);

    justify-content: center;
    align-items: center;

    img {
      width: 100%;
      height: 100%;
    }

    .zl-large-screen-upload-wrap-mask-layer {
      z-index: 2;
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);

      justify-content: center;
      align-items: center;

      .zl-large-screen-label-mask-layer-span-wrap {
        span {
          padding: 0 12px;
        }

        span:first-child {
          border-right: 1px solid var(--color-icon);
        }
      }
    }
  }

  .zl-large-screen-textarea-wrap {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;

    .zl-large-screen-textarea-title {
      display: inline-block;
      width: 100%;
      line-height: 30px;
      font-size: var(--font-size-12);
    }
  }

  .zl-large-screen-click-lable {
    width: 100%;
    height: 100%;

    .zl-large-screen-click-lable-click {
      color: var(--color-main);
      font-size: var(--font-size-12);
      cursor: pointer;
    }

    .l-large-screen-click-lable-num {
      margin-left: 5px;
      font-size: var(--font-size-12);
    }
  }

  .zl-large-screen-number-roud {
    display: flex;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border: 2px solid rgba(82, 107, 251, .2);
    border-radius: 50%;
    background: rgba(82, 107, 251, .2);
    cursor: pointer;

    justify-content: center;
    align-items: center;
  }

  .zl-large-screen-number-roud-active {
    display: flex;
    width: 22px;
    height: 22px;
    margin-right: 8px;
    border: 2px solid var(--color-main);
    border-radius: 50%;
    background: rgba(82, 107, 251, .2);
    cursor: pointer;

    justify-content: center;
    align-items: center;
  }

  .zl-large-screen-number {
    display: flex;
    width: 22px;
    height: 22px;
    border: 2px solid rgba(82, 107, 251, .2);
    background: rgba(82, 107, 251, .2);
    cursor: pointer;

    justify-content: center;
    align-items: center;
  }

  .zl-large-screen-number-active {
    display: flex;
    width: 22px;
    height: 22px;
    border: 2px solid var(--color-main);
    background: rgba(82, 107, 251, .2);
    cursor: pointer;

    justify-content: center;
    align-items: center;
  }

  .zl-large-screen-unit-border-img {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;

    justify-content: start;

    .zl-large-screen-unit-border-img-large {
      display: flex;
      width: 100%;
      height: 36px;
      margin-bottom: 10px;
      background-color: var(--color-form-bg);
      cursor: pointer;

      justify-content: center;
      align-items: center;

      &:hover {
        border: 1px solid var(--color-main);
      }
    }

    .zl-large-screen-unit-border-img-normal {
      float: left;
      width: 58px;
      height: 58px;
      margin-right: 10px;
      margin-bottom: 10px;
      cursor: pointer;

      &:hover {
        border: 1px solid var(--color-main);
      }
    }

    .zl-large-screen-unit-border-img-large-active {
      float: left;
      border: 1px solid var(--color-main);
    }
  }

  .zl-large-screen-two-select {
    display: flex;
    width: 100%;

    justify-content: space-between;
  }

  .zl-laren-screen-input-wrap {
    width: 100%;
  }

  .zl-largen-screen-upload-select-wrap {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;

    .zl-largen-screen-upload-select-wrap-title {
      width: 100%;
      height: 30px;
      color: var(--color-white);
      font-weight: 500;
      font-size: var(--font-size-12);
    }
  }

  .zl-ls-ant-checkbox + span {
    color: var(--color-font);
  }

  .zl-large-screen-select-wrapper {
    background: var(--color-content-bg);
    color: var(--color-icon);

    .zl-ls-ant-select-item-option {
      color: var(--color-icon);
      font-size: var(--font-size-12);
    }

    .zl-ls-ant-select-selected-icon {
      color: rgba(255, 255, 255, .1);
    }

    .zl-ls-ant-select-item-option:hover
    , .zl-ls-ant-select-item-option-active:not(.zl-ls-ant-select-item-option-disabled) {
      background-color: rgba(82, 108, 253, .2);

      .zl-ls-ant-select-selected-icon {
        color: rgba(255, 255, 255, .5);
      }
    }

    .zl-ls-ant-select-item-option-selected {
      background: rgba(82, 108, 253, .1);

      .zl-ls-ant-select-selected-icon {
        color: rgba(255, 255, 255, 1);
      }
    }

    .zl-ls-ant-empty-description {
      color: var(--color-white);
    }

    .zl-large-screen-unit-select-item {
      line-height: 28px;
    }
  }

  .zl-ls-ant-select:not(.zl-ls-ant-select-customize-input) .zl-ls-ant-select-selector {
    height: 100%;

// border: 1px solid var(--color-input-border);
    background-color: var(--color-form-bg);
  }

  .zl-ls-ant-select-selection-overflow {
    margin-top: -6px;
  }

  .zl-large-screen-label-code-wrap {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;

    .zl-ls-ant-input {
      overflow: hidden;
      color: var(--color-white);
    }

    textarea {
      resize: none;
    }

    .zl-large-sreen-code-button {
      display: inline-flex;
      width: 100%;
      height: 26px;
      border: 1px solid rgba(28, 34, 41, 1);
      border-radius: 0 0 4px 4px;
      background: rgba(32, 35, 41, 1);
      color: var(--color-white);
      font-weight: 400;
      font-size: var(--font-size-12);
      cursor: pointer;

      align-items: center;
      justify-content: center;

      &:hover {
        color: var(--color-main);
      }
    }
  }

  .zl-ls-ant-input-number {
    border: 1px solid var(--color-input-border);
    background-color: var(--color-form-bg);
    color: var(--color-title-wrap);
    font-size: var(--font-size-12);
  }

  .zl-ls-ant-input-number-sm input {
    height: 28px;
  }

  .zl-large-screen-input-number-icon {
    position: absolute;
    top: 5px;
    right: 10px;
    color: var(--color-select-setting-font);
    font-weight: var(--font-weight-400);
    font-size: var(--font-size-12);
  }

  .zl-large-sreen-unit-tabs-wrap {
    width: 100%;
    height: auto;
  }

  .zl-ls-ant-tabs-bottom > .zl-ls-ant-tabs-nav:before
  , .zl-ls-ant-tabs-bottom > div > .zl-ls-ant-tabs-nav:before
  , .zl-ls-ant-tabs-top > .zl-ls-ant-tabs-nav:before
  , .zl-ls-ant-tabs-top > div > .zl-ls-ant-tabs-nav:before {
    border: none;
  }

  .zl-ls-ant-tabs-tab {
    color: var(--color-icon);
    font-size: var(--font-size-12);
  }

  .zl-label-control-input-flex {
    display: flex;

    align-items: center;
    justify-content: space-between;
  }

  .zl-large-screen-label-title-wrap {
    display: flex;
    width: 100%;

    justify-content: space-between;

    .zl-large-screen-label-title {
      overflow: hidden;
      display: inline-block;
      max-width: 80%;
      line-height: 16px;
      color: var(--color-title-icon);
      font-size: var(--font-size-12);
      white-space: nowrap;
      cursor: default;
      text-overflow: ellipsis;
    }

    .zl-large-screen-label-del {
      display: inline-block;
      width: 15%;
      line-height: 16px;
      color: var(--color-main);
      font-size: var(--font-size-12);
    }
  }

  .zl-large-screen-setting-unit-click-error {
    margin-top: var(--spacing);
    color: var(--color-select-setting-font);
    font-size: var(--font-size-12);
  }

  .zl-large-screen-setting-unit-click-btn {
    display: flex;
    width: 100%;
    height: 28px;
    border: 1px solid var(--color-update-btn-border);
    border-radius: 4px;
    background: var(--color-update-btn);
    color: var(--color-title-wrap);
    font-size: var(--font-size-12);
    cursor: pointer;

    justify-content: center;
    align-items: center;

    &:hover {
      background: var(--color-update-btn-hover);
    }
  }

  .zl-large-screen-setting-unit-add-btn {
    display: flex;
    width: 200px;
    height: 28px;
    margin: 5px 0 6px 0;
    border: 1px solid var(--color-update-btn-border);
    border-radius: var(--border-radius-4);
    background: var(--color-update-btn);
    color: var(--color-title-wrap);
    font-size: var(--font-size-12);
    cursor: pointer;

    justify-content: center;
    align-items: center;

    &:hover {
      background: var(--color-update-btn-hover);
    }

    .zl-icon {
      margin-right: 3px;
    }
  }

  .zl-large-screen-setting-unit-click-title {
    display: flex;
    width: 100%;
    background: var(--color-content-bg);
    color: var(--color-setting-btn-font);
    font-size: var(--font-size-12);
    cursor: pointer;

    align-items: center;
    justify-content: center;
  }

  .zl-large-screen-control-input {
    width: 100%;

    .zl-large-screen-control-input-wrap {
      display: flex;
      width: 100%;
      height: 28px;

      align-items: center;
      justify-content: space-around;

      .zl-ls-ant-slider-track {
        background-color: var(--color-main);
      }

      .zl-ls-ant-slider-handle {
        border: 2px solid var(--color-main);
      }

      .zl-ls-ant-input-number-handler-wrap {
        border-left: 1px solid var(--color-input-border);
        background: transparent;
      }

      .zl-ls-ant-input-number-handler-down {
        border: none;
      }

      .control {
        width: 124px;
      }

      .zl-ls-ant-input-number {
        width: 56px;
      }

      .zl-ls-ant-input-number-input {
        height: 28px;
        padding: 0 6px;
        color: var(--color-component-select-font-color);
      }
    }
  }

  .zl-large-screen-click-buttons :first-child .zl-large-screen-click-buttons-item {
    margin-bottom: 12px;
  }

  .zl-large-screen-click-buttons :nth-child(2).zl-large-screen-click-buttons-item {
    margin-bottom: 12px;
  }

  .zl-large-screen-click-buttons {
    display: flex;
    width: 100%;
    height: auto;

    justify-content: space-between;
    flex-wrap: wrap;

    #active {
      border: 1px solid var(--color-zindex-click-color);

      .zl-icon {
        color: var(--color-zindex-click-color);
      }

      span {
        color: var(--color-zindex-click-color);
      }
    }

    .zl-large-screen-click-buttons-item {
      display: flex;
      width: 94px;
      height: 28px;
      padding: 0 11px;
      border: 1px solid var(--color-zindex-boder);
      border-radius: 4px;
      background-color: var(--color-component-select);

      align-items: center;
      justify-content: space-between;

      &:hover {
        border: 1px solid var(--color-main);

        .zl-icon {
          color: var(--color-setting-btn-font);
        }

        span {
          color: var(--color-setting-btn-font);
        }
      }

      &:active {
        border: 1px solid var(--color-zindex-click-color);
      }

      .zl-icon {
        width: 15px;
        height: 15px;
        color: var(--color-title-wrap);
      }

      span {
        color: var(--color-title-wrap);
        font-size: var(--font-size-12);
      }
    }
  }

  // .zl-large-screen-setting-icons {
  //   display: flex;
  //   width: 100%;
  //   height: 28px;
  //   color: var(--color-title-icon);

  //   justify-content: space-between;

  //   .zl-large-screen-setting-icons-font {
  //     display: flex;
  //   }

  //   .zl-large-screen-setting-icons-tooltip {
  //     display: flex;

  //     align-items: center;
  //   }

  //   .zl-largen-screen-font-icon {
  //     display: flex;
  //     width: 20px;
  //     height: 20px;
  //     margin-right: 5px;
  //     border-radius: 2px;
  //     background: var(--color-setting-icons);
  //     cursor: pointer;

  //     justify-content: center;
  //     align-items: center;

  //     &:hover {
  //       background: var(--color-setting-icons-hover);
  //     }
  //   }

  //   #zl-largen-screen-align-icon-active {
  //     background-color: var(--color-setting-icons-active);
  //   }

  //   .zl-largen-screen-align-icon {
  //     display: flex;
  //     width: 20px;
  //     height: 20px;
  //     margin-left: 5px;
  //     border-radius: 2px;
  //     background: var(--color-setting-icons);
  //     cursor: pointer;

  //     justify-content: center;
  //     align-items: center;

  //     &:hover {
  //       background: var(--color-setting-icons-hover);
  //     }
  //   }
  // }

  // .zl-large-screen-setting-icons-align {
  //   display: flex;
  //   height: 20px;

  //   align-items: center;
  //   justify-content: space-between;

  //   .zl-largen-screen-align-icon {
  //     margin: 0;

  //     svg {
  //       width: var(--spacing2);
  //       height: var(--spacing2);
  //       color: #909090;
  //     }
  //   }

  //   .zl-largen-screen-align-icon-split {
  //     width: 1px;
  //     height: 16px;
  //     margin-left: 14px;
  //     background: var(--color-collapse-border);
  //   }
  // }

  .zl-large-screen-select-inputnumber-icon {
    color: var(--color-select-setting-font);
  }

  // .zl-ls-ant-select-arrow {
  //   color: var(--color-select-setting-font);
  // }

  .zl-ls-ant-input-number-handler-wrap {
    width: 16px;
    border-left: 1px solid var(--color-input-border);
    background: var(--color-form-bg);

    span {
      font-size: var(--font-size-12);
    }

    .zl-ls-ant-input-number-handler-up {
      height: 14px;
      border-bottom: 1px solid var(--color-input-border);
    }

    .zl-ls-ant-input-number-handler-down {
      height: 12px;
    }

    .zl-ls-ant-input-number-handler-down-inner {
      right: 2px;
      margin-top: 1px;
    }

    .zl-ls-ant-input-number-handler-up-inner {
      right: 2px;
      margin-top: -7px;
    }
  }

  .zl-ls-ant-input-number-handler {
    border: none;

    span {
      color: var(--color-select-setting-font);
      font-size: var(--font-size-12);
    }

    &:active {
      background: transparent;
    }
  }

  .zl-large-screen-line {
    display: inline-block;
    width: 100%;
    height: 1px;
    background: var(--color-board-box-bg);
  }

  .zl-large-screen-radio-wrap:first-child .zl-ls-ant-radio-wrapper {
    margin-bottom: 8px;
  }

  .zl-large-screen-radio-wrap:first-child .zl-ls-ant-radio-wrapper:last-child {
    margin-bottom: 0;
  }

  .zl-large-screen-radio-wrap {
    width: 100%;

    .zl-ls-ant-radio-group {
      display: flex;
      width: 100%;

      justify-content: space-between;
    }

    .zl-ls-ant-radio-wrapper {
      margin: 0;
      color: var(--color-title-wrap);
      font-size: var(--font-size-12);
    }
  }

  .custom-img {
    position: relative;
    display: flex;
    width: 64px;
    height: 68px;
    margin-left: 54px;
    border: 1px solid var(--color-select-setting-font);

    justify-content: center;
    align-items: center;

    .del-icon {
      position: absolute;
      top: -6px;
      right: -6px;
      width: 12px;
      height: 12px;
      color: var(--color-main);
    }

    .add-icon-wrap {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 100%;

      justify-content: center;
      align-items: center;
    }

    .add-icon {
      width: 26px;
      height: 26px;
    }

    .show-upload-img {
      width: 100%;
      height: 100%;

      aspect-ratio: 16 / 9;
      object-fit: contain;
    }
  }

  .default-img-list {
    width: 100%;
    height: 70px;
    margin-left: 58px;

    .img-wrap {
      float: left;
      width: 28px;
      height: 28px;
      margin: 0 auto;
      margin-bottom: 12px;
      border: 1px solid var(--color-input-border);
      text-align: center;
      cursor: pointer;
    }
  }

  .zl-ls-ant-checkbox {
    .zl-ls-ant-checkbox-inner {
      border: 1px solid var(--color-select-setting-font);
      background: var(--color-checkbox-background);
    }
  }

  .zl-ls-ant-checkbox-checked {
    .zl-ls-ant-checkbox-inner {
      width: var(--font-size-14);
      height: var(--font-size-14);
      border: 1px solid var(--color-main);
      background-color: var(--color-main);
    }
  }

  .zl-ls-ant-checkbox-disabled {
    .zl-ls-ant-checkbox-inner {
      width: var(--font-size-14);
      height: var(--font-size-14);

// border: 1px solid var(--color-main);
      border: 1px solid #5d6773;
      background-color: rgba(93, 103, 115, .3);
    }

    .zl-ls-ant-checkbox-inner:after {
      border-color: rgba(255, 255, 255, .5);
    }
  }

  .zl-ls-ant-input-number-input {
    &::-webkit-input-placeholder {
      color: var(--color-select-setting-font);
    }
  }

  .zl-large-screen-text {
    display: flex;
    width: 100%;

    justify-content: end;

    .zl-large-screen-label-title {
      overflow: hidden;
      display: inline-block;
      line-height: 16px;
      color: var(--color-title-icon);
      font-size: var(--font-size-12);
      white-space: nowrap;
      cursor: pointer;
      text-overflow: ellipsis;
    }
  }

  .zl-ls-texts {
    display: flex;
    color: var(--color-main);
    font-size: var(--font-size-12);

    flex: 1;
    justify-content: flex-end;

    span {
      margin-left: 10px;
    }
  }

  .zl-ls-input-empty {
    display: flex;
    font-size: var(--font-size-12);

    flex: 1;
    justify-content: flex-end;

    span {
      overflow: hidden;
      display: inline-block;
      width: 125px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .zl-ls-large-upload {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;

    .zl-ls-ant-upload.zl-ls-ant-upload-drag {
      border: 1px dashed transparent;
      background: transparent;
    }

    .zl-ls-ant-upload.zl-ls-ant-upload-drag .zl-ls-ant-upload {
      padding: 0 0;
    }

    .zl-ls-large-upload-wrap {
      display: flex;
      width: 199px;
      height: 96px;
      border: 1px solid var(--color-input-border);
      background: var(--color-component-select);

      justify-content: center;
      align-items: center;

      .zl-icon {
        width: 14px;
        height: 14px;
        margin-right: 5px;
        color: var(--color-select-setting-font);
      }

      span {
        color: var(--color-select-setting-font);
        font-size: 10px;
      }
    }

    .zl-ls-large-upload-name {
      display: flex;
      width: 100%;
      margin-bottom: var(--spacing);
      color: var(--color-stories-fontB7);
      font-size: var(--font-size-12);

      justify-content: space-between;

      .zl-ls-large-upload-spans {
        display: flex;

        align-items: center;
      }

      .zl-ls-large-upload-span {
        overflow: hidden;
        width: 111px;
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      .zl-ls-large-upload-del {
        color: var(--color-main);
        cursor: pointer;
      }
    }
  }

  .label-popover-tab {
    display: flex;
    width: 100%;
    height: auto;
    flex-direction: column;

    .label-popover-tab-title {
      display: flex;
      width: 100%;
      color: var(--color-component-select-font-color);
      font-size: var(--font-size-12);

      justify-content: space-between;

      .label-popover-tab-span {
        color: var(--color-main);
      }
    }

    .label-popover-color {
      width: 100%;
      height: 16px;
      margin-top: 12px;
      border: 1px solid var(--border-color-transparent);
      border-radius: var(--border-radius-4);
    }
  }
}

.zl-ls-ant-select {
  .zl-ls-ant-select-selector {
    .zl-ls-ant-select-selection-item {
      background-color: transparent;

      .zl-large-screen-unit-select-item {
        display: flex;

        align-items: center;

        .title-type {
          display: inline-block;
          display: flex;
          width: 36px;
          height: 18px;
          margin-right: 10px;
          border: 1px solid transparent;
          border-radius: var(--border-radius-4);
          background: transparent;

          align-items: center;
          justify-content: center;
        }

        .title-value {
          overflow: hidden;
          width: calc(100% - 46px);
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
}

.zl-large-screen-select {
  background-color: var(--color-component-select-menu);

  .zl-ls-ant-select-item {
    overflow: hidden;

// 解决文字超出
    display: flex;
    width: 100%;
    color: var(--color-component-select-font-color);
    font-size: var(--font-size-12);
    text-overflow: ellipsis;
  }

  .zl-ls-ant-select-item-option-active {
    background-color: var(--color-stroies-page-bg);
  }

  .zl-ls-ant-select-item-option-active:not(.zl-ls-ant-select-item-option-disabled) {
    // background-color: transparent;
    background-color: var(--color-stroies-page-bg);
  }

  .zl-ls-ant-select-item-option-selected:not(.zl-ls-ant-select-item-option-disabled) {
    background-color: var(--color-stroies-page-btn);
    color: var(--color-select-active-font);

    .zl-large-screen-unit-select-item {
      color: var(--color-select-active-font);
    }
  }

  .zl-large-screen-unit-select-item-img {
    display: flex;
    width: 100%;
    height: 100%;

    align-items: center;
  }

  .title-type {
    display: inline-block;
    display: flex;
    width: 36px;
    height: 18px;
    margin-right: 10px;
    border: 1px solid transparent;
    border-radius: var(--border-radius-4);
    background: transparent;

    align-items: center;
    justify-content: center;
  }

  .title-value {
    overflow: hidden;
    width: calc(100% - 46px);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .zl-large-screen-unit-select-item {
    display: flex;
    width: 100%;
    height: 100%;

// justify-content: space-between;

    align-items: center;

    .zl-large-screen-unit-select-item-one {
      overflow: hidden;

// 解决文字超出
      display: inline-block;
      width: 100%;
      color: var(--color-title-wrap);
      font-weight: var(--font-weight-400);
      font-size: var(--font-size-12);
      text-overflow: ellipsis;
    }

    .zl-large-screen-unit-select-item-one-active {
      color: var(--color-main);
      font-weight: 600;
    }

    .zl-large-screen-unit-select-item-two {
      color: var(--color-title-wrap);
      font-weight: var(--font-weight-400);
      font-size: var(--font-size-12);
    }
  }
}

.zl-large-screen-select-wrapper {
  background: var(--color-content-bg);
}

.zl-ls-font-size-select {
  overflow-y: auto;
  overflow-y: auto;
  width: 60px;
  width: 60px;
  max-height: 200px;
  max-height: 200px;
  box-shadow: 0 3px 6px 0 rgb(0 0 0 / 12%), 0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);

//firefox修改滚动条样式

  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-white);
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-white);
  scrollbar-width: thin;

  //chrome修改滚动条样式
  &::-webkit-scrollbar {
    width: 8px;
    height: 8px;
  }

  /* chrome滚动槽 */
  &::-webkit-scrollbar-track {
    border-radius: var(--borderRadius);
    background: var(--color-white);
  }

  /* chrome滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    border-radius: var(--borderRadius);
    background: #d8d8d8;
  }

  &::-webkit-scrollbar-thumb:hover {
    background: rgba(32, 35, 41, .2);
  }

  /* chrome滚动条边角 */
  &::-webkit-scrollbar-corner {
    border-radius: 50%;
    background: var(--color-white);
  }
}

.zl-ls-font-size-select-wrap {
  display: flex;

  .zl-ls-ant-input-number {
    width: 28px;
    border: none;
    background: transparent;

    .zl-ls-ant-input-number-sm input {
      text-align: right;
    }
  }

  .zl-ls-ant-input-number-sm input {
    padding: 0;
  }

  .zl-ls-ant-input-number-focused
  , .zl-ls-ant-input-number:focus {
    box-shadow: none;
  }

  .zl-icon {
    width: 8px;
    height: 8px;
  }
}

.zl-ls-numberinput-select-wrap {
  position: relative;
  width: 100%;
  height: 100%;

  .zl-ls-ant-input-number {
    width: 100%;
    height: 100%;
    border: 1px solid var(--color-input-border);
  }

  .zl-icon {
    position: absolute;
    top: 9px;
    right: 11px;
  }
}

.zl-ls-numberinput-select-font {
  .zl-ls-ant-dropdown-menu-item
  , .zl-ls-ant-dropdown-menu-submenu-title {
    color: var(--color-component-select-font-color);
  }

  .zl-ls-ant-dropdown-menu {
    background-color: var(--color-content-bg);
  }

  .zl-ls-ant-dropdown-menu-item-selected {
    background: var(--color-stroies-page-btn);
    color: var(--color-select-active-font);
  }

  .zl-ls-ant-dropdown-menu-item:hover {
    background: var(--color-box-menu-hover);
  }

  .zl-ls-ant-dropdown-menu {
    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.zl-large-screen-setting-style-wrap-title-switch {
  display: flex;
  width: 100%;
  height: 100%;
  padding: 2px 20px;
  color: var(--color-component-select-font-color);

  justify-content: space-between;
  align-items: center;

  .zl-large-screen-synchronous-title {
    line-height: 16px;
    color: var(--color-setting-collapse-header-font);
    font-weight: var(--font-weight-600);
    font-size: var(--font-size-12);
  }

  .zl-large-screen-setting-style-wrap-switch {
    display: flex;

    .zl-large-screen-synchronous {
      margin-right: 17px;
      line-height: 16px;
      color: var(--color-select-font);
      font-size: var(--font-size-12);
    }
  }
}

.zl-large-screen-synchronous-popconfirm {
  width: 226px;

  .zl-ls-ant-popover-inner-content {
    background: var(--color-context-menu-bg);
    color: #bdc9d3;
  }

  .zl-ls-ant-popover-arrow-content {
    background: var(--color-context-menu-bg);

    &::before {
      background: var(--color-context-menu-bg);
    }
  }

  .zl-ls-ant-btn-default {
    border: 1px solid var(--color-btn);
    background: transparent;
    color: var(--color-popconfirm--btn-font-color);

    &:hover {
      border: 1px solid var(--color-setting-btn-font);

      span {
        color: var(--color-setting-btn-font);
      }
    }

    &:active {
      border: 1px solid var(--color-zindex-click-color);
    }
  }

  .zl-ls-ant-popover-message {
    display: flex;
    padding: 4px 0 var(--spacing2);
    color: var(--color-popconfirm-font-color);
    font-size: var(--font-size-12);
  }

  .zl-icon {
    width: 35px;
    height: 25px;
  }

  .zl-ls-ant-popover-message-title {
    padding-left: 12px;
  }

  .zl-ls-ant-popover-buttons {
    margin-bottom: 0;
  }
}

.zl-large-screen-setting-icons-list {
  display: flex;
  width: 100%;
  height: 28px;
  color: var(--color-title-icon);

  justify-content: flex-end;

  .zl-large-screen-setting-icons-list-tooltip {
    display: flex;

    align-items: center;

    .zl-largen-screen-align-icon {
      display: flex;
      width: 20px;
      height: 20px;
      margin-left: 5px;
      border-radius: 2px;
      background: var(--color-setting-icons);
      cursor: pointer;

      align-items: center;
      justify-content: center;
    }

    .zl-largen-screen-align-icon-active {
      background-color: var(--color-setting-icons-active);
    }
  }
}

html[theme='black'] .zl-large-screen-setting-wrap .zl-ls-ant-checkbox-wrapper:not(.zl-ls-ant-checkbox-wrapper-checked) .zl-ls-ant-checkbox .zl-ls-ant-checkbox-inner
, html[theme='black'] .zl-large-screen-setting-wrap .zl-ls-ant-radio .zl-ls-ant-radio-inner {
  width: var(--font-size-14);
  height: var(--font-size-14);
}

html[theme='black'] .ant-layout > .blockHeader .backTitle .backTitleInput input {
  border: 1px solid var(--color-title-icon);
  color: var(--color-white);
}

.zl-ls-event-lists {
  color: var(--color-white);
  font-size: var(--font-size-12);

  .zl-ls-event-list {
    display: flex;
    height: 40px;
    margin-top: 2px;
    padding: 0 20px;
    background: var(--color-update-btn);

    align-items: center;
    justify-content: space-between;

    &:first-child {
      border-top: 1px solid var(--color-collapse-border);
    }

    .zl-ls-event-list-index {
      margin-right: var(--spacing);
      margin-left: var(--spacing);
    }

    .zl-ls-event-list-title {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      flex: 1;

      .zl-icon {
        font-size: var(--font-size-14);
      }
    }
  }
}

.zl-lagre-screen-radio-tree {
  overflow: hidden;
  height: calc(100vh - 376px);
  padding: var(--spacing) 0;
  border: 1px solid #1c2229;
  border-radius: var(--border-radius-4);
  background: #0f1114;

  .zl-ls-ant-tree
  , .ant-tree
  , .zl-ant-tree {
    overflow: auto;
    width: 100%;
    height: 100%;
    border-radius: 0;
    background: transparent;

    .zl-ls-ant-tree-indent
    , .zl-ant-tree-indent
    , .ant-tree-indent {
      display: none;
    }

    .zl-ls-ant-tree-switcher
    , .zl-ant-tree-switcher
    , .ant-tree-switcher {
      display: none;
    }

    .zl-ls-ant-tree-treenode
    , .zl-ant-tree-treenode
    , .ant-tree-treenode {
      width: 100%;
      padding: 0;
    }

    .zl-ls-ant-tree-node-content-wrapper
    , .zl-ant-tree-node-content-wrapper
    , .ant-tree-node-content-wrapper {
      width: 100%;
      padding: 0;
    }

    .zl-ls-ant-tree-show-line .zl-ls-ant-tree-switcher
    , .zl-ant-tree-show-line .zl-ant-tree-switcher
    , .ant-tree-show-line .ant-tree-switcher {
      background: transparent;
      color: var(--color-stories-font);
    }

    .zl-ls-ant-tree-node-content-wrapper
    , .zl-ant-tree-node-content-wrapper
    , .ant-tree-node-content-wrapper {
      overflow: hidden;
      width: 198px;
      height: 34px;
      border-radius: 0;
      line-height: 34px;
      color: var(--color-white);
      font-weight: var(--font-weight-400);
      font-size: var(--font-size-12);
      white-space: nowrap;
      text-overflow: ellipsis;

      .zl-ls-ant-tree-title
      , .zl-ant-tree-title
      , .ant-tree-title {
        color: var(--color-font);
        font-weight: var(--font-weight-400);
        font-size: var(--font-size-12);
      }
    }

    .zl-ls-ant-tree-node-selected
    , .zl-ant-tree-node-selected
    , .ant-tree-node-selected {
      background: transparent;

      .zl-ls-ant-tree-node-content-wrapper
      , .zl-ant-tree-node-content-wrapper
      , .ant-tree-node-content-wrapper {
        background: transparent;
      }
    }

    .zl-ls-ant-tree-node-content-wrapper:hover
    , .zl-ant-tree-node-content-wrapper:hover
    , .ant-tree-node-content-wrapper:hover {
      background: transparent;
    }

    .zl-lagre-screen-scene-tree-parent-name {
      display: flex;
      margin: 0;

      align-items: center;
    }

    .zl-lagre-screen-scene-tree-children {
      height: 34px;
      padding-left: 44px;

      label > span {
        display: inline-block;
        height: 34px;
        line-height: 34px;
        font-size: var(--font-size-12);
      }

      .zl-ls-ant-radio {
        height: var(--font-size-14);
        margin-top: -4px;

        .zl-ls-ant-radio-inner {
          width: var(--font-size-14);
          height: var(--font-size-14);
        }
      }

      .zl-ls-ant-radio-wrapper {
        display: flex;

        align-items: center;
      }

      .zl-lagre-screen-scene-tree-children-title {
        overflow: hidden;
        display: inline-block;
        width: 130px;
        color: #c0c9d2;
        font-weight: var(--font-weight-400);
        font-size: var(--font-size-12);
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .zl-lagre-screen-scene-tree-parent {
      display: flex;
      height: 34px;
      padding: 0 var(--spacing20);

      justify-content: space-between;
      align-items: center;
    }
  }
}

.zl-lagre-screen-url-input {
  height: calc(100vh - 376px);

  .zl-large-screen-label-radio-wrap {
    margin: 10px 0;
  }

  .zl-lagre-screen-url-input-tips {
    width: 120%;
    line-height: var(--font-size-16);
    color: var(--color-select-setting-font);
    font-size: var(--font-size-12);
    transform: scale(.9);
    transform-origin: 0 0;
  }
}

.zl-lagre-screen-cockpit-list {
  .zl-lagre-screen-cockpit-list-search {
    height: 28px;
    margin: 0 12px;
    padding: 0 var(--spacing);
    border-bottom: 1px solid var(--color-input-border);

    .zl-ls-ant-input-affix-wrapper {
      border: 1px solid transparent;
    }

    .zl-ls-ant-input-prefix {
      top: 1px;
      left: 0;
    }

    input {
      padding-left: 15px;
      border: 1px solid transparent;
      outline: none;
    }
  }

  .zl-lagre-screen-cockpit-list-datas {
    overflow: auto;
    height: calc(100% - 28px);
    margin: 0;

//firefox修改滚动条样式

    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);

    //chrome修改滚动条样式
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    /* chrome滚动槽 */
    &::-webkit-scrollbar-track {
      border-radius: var(--border-radius-4);
      background: var(--color-scrollbar-track);
    }

    /* chrome滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      border-radius: var(--border-radius-4);
      background: var(--color-scrollbar-thumb);
    }

    &::-webkit-scrollbar-thumb:hover {
      background: var(--color-scrollbar-thumb-hover);
    }

    /* chrome滚动条边角 */
    &::-webkit-scrollbar-corner {
      border-radius: 50%;
      background: var(--color-scrollbar-track);
    }

    li.zl-lagre-screen-cockpit-list-data {
      display: flex;
      padding: 0 12px;
      border: 1px solid transparent;

      align-items: center;

      img {
        width: 21px;
        height: 12px;
        margin-right: var(--spacing);
        user-select: none;

        object-fit: contain;
        aspect-ratio: 16/9;
      }

      p {
        overflow: hidden;
        height: 34px;
        margin: 0;
        line-height: 34px;
        color: var(--color-cover-font);
        font-weight: var(--font-weight-400);
        font-size: var(--color-font);
        white-space: nowrap;
        text-overflow: ellipsis;
      }

      &:hover {
        border: 1px solid var(--color-main);
        // background-color: var(--color-stroies-page-bg);
      }

      &.active {
        border: 1px solid transparent;
        background-color: var(--color-stroies-page-btn);
      }
    }

    .zl-lagre-screen-cockpit-list-tip {
      p {
        width: 100%;
        margin: 0;
        line-height: 36px;
        text-align: center;
        font-size: var(--font-size-12);
      }

      .zl-lagre-screen-cockpit-list-tip-more {
        color: var(--color-cover-font);
        cursor: pointer;

        &:hover {
          border: 1px solid var(--color-main);
          background-color: var(--color-stroies-page-bg);
        }
      }
    }
  }
}

.zl-ls-setting-footer-btn {
  display: flex;
  margin-bottom: 5px;
  cursor: auto;

  justify-content: center;

  button {
    width: 84px;
  }

  .zl-ls-ant-btn-default {
    margin-right: var(--spacing20);
    border: 1px solid var(--color-btn);
    color: var(--color-popconfirm--btn-font-color);
  }

  .zl-ls-ant-btn-primary {
    border: 1px solid var(--color-btn);
    border-radius: var(--border-radius-4);
    background: var(--color-main);
    color: var(--color-white);

    &:hover {
      border-color: var(--color-zindex-hover-color);
      background: var(--color-zindex-hover-color);
      color: var(--color-white);
    }
  }
}

.zl-large-screen-dropmenu {
  .zl-ls-ant-dropdown-menu-item {
    padding: 0;
  }

  .zl-ls-ant-dropdown-menu-title-content {
    div {
      width: 100%;
      padding: 5px 12px;
    }
  }
}

.zl-lagre-screen-scene-tree-popover {
  .zl-ls-ant-popover-content {
    width: 70px;
  }

  .zl-ls-ant-popover-arrow-content {
    background-color: var(--color-context-menu-arrow);

    &::before {
      background: -webkit-gradient(linear, right top, left top, color-stop(50%, var(--color-context-menu-arrow)), color-stop(0, var(--color-context-menu-arrow))) no-repeat -10px -10px;
    }
  }

  .zl-ls-ant-popover-inner {
    background-color: var(--color-component-select-menu);
    color: var(--color-select-font);

    .zl-ls-ant-popover-inner-content {
      padding: 4px 0;
    }
  }

  .zl-ls-scene-operation-menu {
    margin: 0;
    padding: 0;

    > div {
      display: flex;
      width: 70px;
      margin: 0;
      padding: 0 16px;
      line-height: 30px;
      color: var(--color-select-font);
      font-size: var(--font-size-12);
      cursor: pointer;

      align-items: center;

      &:hover {
        background-color: var(--color-box-menu-hover);
      }

      &:active {
        background-color: var(--color-box-menu-active);
      }
    }
  }
}

.zl-lagre-screen-scene-model-popover {
  .zl-ls-ant-dropdown-menu-item-active {
    background: var(--color-box-menu-hover);
  }

  .zl-ls-ant-dropdown-menu-title-content {
    display: flex;
    margin: 0;
    color: var(--color-select-font);
    font-size: var(--font-size-12);
    cursor: pointer;

    align-items: center;

    &:hover {
      background-color: var(--color-box-menu-hover);
    }

    &:active {
      background-color: var(--color-box-menu-active);
    }
  }
}

.zl-large-screen-setting-unit-cards {
  display: flex;

  .zl-large-screen-setting-unit-card {
    position: relative;
    width: 104px;
    margin: 0 5px;
    border: 1px solid var(--color-compoent-card-boder);
    border-radius: var(--border-radius-4);
    line-height: 24px;
    text-align: center;

    &.active
    , &:hover {
      border: 1px solid var(--color-main);
    }

    span {
      position: absolute;
      top: 4px;
      right: -7px;
      height: 18px;
      padding: 0 4px;
      line-height: 18px;
      background: var(--color-main);
      color: #fff;
      font-weight: var(--font-weight-400);
      font-size: var(--font-size-12);
      transform: scale(.7);
    }

    img {
      height: 85px;
    }

    p {
      width: 100%;
      height: 24px;
      border-radius: 0 0 4px 4px;
      line-height: 24px;
      text-align: center;
      background: rgb(59, 66, 77);
      color: var(--color-popconfirm-font-color);
      font-size: var(--font-size-12);
    }
  }
}

.zl-ls-setting-cascader {
  background-color: var(--color-context-menu-bg);
  color: var(--color-title-icon);

  .zl-ls-ant-cascader-menu {
    border-right: none;
  }

  .zl-ls-ant-cascader-menu-item {
    &:hover {
      background: var(--color-select-wrap-hover);
    }
  }

  .zl-ls-ant-cascader-menu-item-active {
    background: var(--color-select-wrap-active);
  }

  .zl-ls-ant-cascader-menu-item-active {
    background: var(--color-select-wrap-active);
  }

  .zl-ls-ant-select-clear {
    background-color: var(--color-form-bg);
  }

  .zl-ls-ant-cascader-menu {
    //chrome修改滚动条样式
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }

    /* chrome滚动槽 */
    &::-webkit-scrollbar-track {
      border-radius: 4px;
      background: var(--color-scrollbar-track);
    }

    /* chrome滚动条滑块 */
    &::-webkit-scrollbar-thumb {
      border-radius: 4px;
      background: var(--color-scrollbar-thumb);
    }

    &::-webkit-scrollbar-thumb:hover {
      background: var(--color-scrollbar-thumb-hover);
    }

    /* chrome滚动条边角 */
    &::-webkit-scrollbar-corner {
      border-radius: 50%;
      background: var(--color-scrollbar-track);
    }
  }
}

.zl-lagre-screen-setting-tab-popover {
  width: 240px;
  height: 396px;
  padding-top: 0;
  border-radius: var(--border-radius-4);

  .zl-ls-ant-popover-content {
    width: 280px;
    height: 396px;
    background: var(--popover-background);

    .zl-ls-ant-popover-inner {
      background: var(--popover-background);
    }

    .zl-ls-ant-popover-inner-content {
      width: 280px;
      height: 396px;
      padding: 0;
      background: var(--popover-background);
    }
  }

  .zl-ls-ant-popover-arrow-content {
    display: none;
  }

  .zl-ls-tab-wrap {
    width: 100%;
    height: 100%;

    .zl-ls-tab-wrap-top {
      width: 100%;
      height: 340px;
      padding: 14px var(--spacing20) 25px var(--spacing20);
      border-bottom: 1px solid var(--color-board-box-bg);

      .zl-large-screen-setting-unit-wrap {
        display: flex;
        width: 100%;
        padding: 12px 0;
        color: var(--color-title-icon);
        font-size: var(--font-size-12);

        align-items: center;
        justify-content: space-between;

        .zl-label-color-btn {
          border: 1px solid rgba(0, 0, 0, .4);
        }
      }
    }

    .zl-ls-tab-content-wrap {
      display: flex;
      color: var(--color-title-icon);
      font-size: var(--font-size-12);

      justify-content: space-between;
      align-items: center;
    }

    .zl-ls-tab-wrap-btn {
      width: 100%;
      height: 56px;
      padding: 14px var(--spacing20);

      .zl-ls-ant-btn:first-child {
        border-color: var(--color-btn);
        background-color: transparent;
        color: var(--color-popconfirm--btn-font-color);

        &:active {
          background-color: transparent;
        }
      }
    }

    .zl-ls-ant-select {
      width: 100%;
      height: 30px;
      border: 1px solid var(--color-input-border);
      border-radius: var(--border-radius-4);
      line-height: 28px;
      background-color: var(--color-form-bg);
      color: var(--color-component-select-font-color);

      svg {
        color: var(--color-select-setting-font);
      }

      .zl-ls-ant-select-selection-item {
        color: var(--color-title-wrap);

        .zl-large-screen-unit-select-item-two {
          display: none;
        }

        .zl-large-screen-unit-select-item {
          line-height: 28px;
        }
      }
    }

    .zl-ls-ant-select-selector {
      width: 100%;
      height: 100%;
      border-radius: var(--border-radius-4);
      color: var(--color-icon);
      font-size: var(--font-size-12);
    }

    .zl-large-screen-setting-unit-content .zl-ls-ant-select-single .zl-ls-ant-select-selector .zl-ls-ant-select-selection-item
    , .zl-large-screen-setting-unit-content .zl-ls-ant-select-single .zl-ls-ant-select-selector .zl-ls-ant-select-selection-placeholder {
      line-height: 26px;
    }

    .zl-ls-ant-select-single:not(.zl-ls-ant-select-customize-input) .zl-ls-ant-select-selector {
      border: none;
      background-color: var(--color-form-bg);
      color: var(--color-icon);
      font-size: var(--font-size-12);
    }

    .zl-ls-linear-color {
      display: flex;
      width: 100%;
      height: 16px;

      justify-content: space-between;

      .zl-ls-linear-color-select {
        width: 30px;
        height: 16px;
        border: 1px solid var(--border-color-transparent);
        border-radius: var(--border-radius-4);
        cursor: pointer;
      }

      .zl-ls-linear-color-show {
        width: 174px;
        height: 16px;
        border: 1px solid var(--border-color-transparent);
        border-radius: var(--border-radius-4);
      }
    }

    .zl-ls-ant-select-arrow {
      right: 8px;
    }
  }

  .zl-large-screen-component-tabs-wrapper {
    display: flex;
    width: 176px;
    height: 28px;
    border: 1px solid var(--color-tab-boder);
    border-radius: var(--border-radius-4);
    background: var(--color-stories-tabs-bg);

    .zl-large-screen-component-tabs-item {
      display: flex;
      height: 100%;
      cursor: pointer;

      justify-content: center;
      align-items: center;
      flex: 1 1;

      .zl-large-screen-component-tabs-item-small {
        display: inline-block;
        width: 54px;
        height: 21px;
        line-height: 21px;
        text-align: center;
        background: var(--color-stories-tabs-bg);
        color: var(--color-component-select-font-color);
        font-weight: var(--font-weight-400);
        font-size: var(--font-size-12);
      }

      .zl-large-screen-tas-active {
        background: var(--color-tab-active-bg);
        color: var(--color-select-wrap-font-color);
        font-weight: var(--font-weight-600);
      }
    }
  }

  .zl-large-screen-component-tabs-wrapper :first-child {
    border-top-left-radius: var(--border-radius-2);
    border-bottom-left-radius: var(--border-radius-2);
  }

  .zl-large-screen-component-tabs-wrapper :last-child {
    border-top-right-radius: var(--border-radius-2);
    border-bottom-right-radius: var(--border-radius-2);
  }
}

.zl-large-screen-switch2-wrap {
  display: flex;
  width: 100%;

  justify-content: flex-end;

  .zl-large-screen-switch2 {
    padding: 4px;
    border: 1px solid var(--color-input-border);
    border-radius: var(--border-radius-4);
    background: var(--color-form-bg);

    span {
      display: inline-block;
      width: 44px;
      height: 20px;
      border-radius: var(--border-radius-2);
      line-height: 20px;
      text-align: center;
      color: var(--color-white);
      font-weight: var(--font-weight-400);
      font-size: var(--font-size-12);

      &.active {
        background: var(--color-select-setting-font);
      }
    }
  }
}

.zl-large-screen-component-empty {
  position: absolute;
  top: 50%;
  left: 10px;
  width: 240px;
  height: 240px;
  margin-top: -120px;
}

.undeveloped-text {
  position: absolute;
  top: 175px;
  left: 69px;
  color: var(--color-font);
  font-weight: var(--font-weight-400);
  font-size: var(--font-size-12);
}

.black-undeveloped {
  display: none;

  .black-undeveloped-text {
    color: var(--color-font);
  }
}

.white-undeveloped {
  display: block;

  .white-undeveloped-text {
    color: var(--color-font);
  }
}

html[theme='black'] .black-undeveloped {
  display: block;
}

html[theme='black'] .white-undeveloped {
  display: none;
}

.zl-large-screen-unit-select-item-img-title {
  margin-left: 5px;
}

.zl-large-screen-unit-select-item-one-active {
  overflow: hidden;
  display: inline-block;
  width: 100%;
  text-overflow: ellipsis;
}

.option-img {
  width: 45px;
  height: 18px;
}

.quantizeContent {
  overflow-y: auto;
  height: 170px;
  padding: 10px;
  border: 1px solid var(--color-input-border);
  border-radius: var(--border-radius-4);
  background: var(--color-form-bg);

  scrollbar-width: thin;
  scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);

  //chrome修改滚动条样式
  &::-webkit-scrollbar {
    display: none;
    // width: 8px;
    // height: 8px;
  }

  // /* chrome滚动槽 */
  // &::-webkit-scrollbar-track {
  //   border-radius: var(--borderRadius);
  //   background: rgba(0, 0, 0, .02);
  // }

  // /* chrome滚动条滑块 */
  // &::-webkit-scrollbar-thumb {
  //   border-radius: var(--borderRadius);
  //   background: #d8d8d8;
  // }

  // &::-webkit-scrollbar-thumb:hover {
  //   background: rgba(32, 35, 41, .2);
  // }

  // /* chrome滚动条边角 */
  // &::-webkit-scrollbar-corner {
  //   // border-radius: 50%;
  //   background: rgba(0, 0, 0, .02);
  // }

  .toInput {
    display: flex;
    width: 100%;
    margin-bottom: 10px;

    justify-content: space-between;
    align-items: center;

    .showColor {
      display: inline-block;
      width: 16px;
      height: 16px;
      border: 1px solid var(--border-color-transparent);
      border-radius: var(--border-radius-4);
      cursor: pointer;
    }

    .showIcon {
      color: var(--color-title-icon);
      font-size: var(--font-size-12);
    }

    .zl-ls-ant-input-number:nth-child(1) {
      border-top-left-radius: var(--border-radius-4);
      border-bottom-left-radius: var(--border-radius-4);
    }

    .zl-ls-ant-input-number:nth-child(2) {
      border-top-right-radius: var(--border-radius-4);
      border-bottom-right-radius: var(--border-radius-4);
    }

    .zl-ls-ant-input-number-disabled .zl-ls-ant-input-number-input {
      color: var(--input-number-addon);
    }

    .zl-ls-ant-input-number {
      height: 22px;
      border: 1px solid var(--color-input-border);
      border-radius: 0;
      background: var(--color-component-select);
      color: var(--color-title-icon);

      .zl-ls-ant-input-number-input-wrap {
        height: 100%;

        input {
          // overflow: hidden;
          height: 100%;
          padding: 0;
          padding-left: 5px;
          font-size: var(--font-size-12);
          // white-space: nowrap;
          // text-overflow: ellipsis;
        }
      }
    }

    .zl-ls-ant-input-number-group-addon:nth-child(2) {
      border-top-right-radius: var(--border-radius-4);
      border-bottom-right-radius: var(--border-radius-4);
    }

    .zl-ls-ant-input-number-group-addon:nth-child(1) {
      border-top-left-radius: var(--border-radius-4);
      border-bottom-left-radius: var(--border-radius-4);
    }

    .zl-ls-ant-input-number-group-addon {
      width: 21px;
      padding: 0;
      border: 1px solid var(--color-input-border);
      border-radius: 0;
      background-color: var(--color-component-select);
      color: var(--input-number-addon);
      font-size: var(--font-size-12);
    }
  }
}

.quantizeNum {
  display: flex;
  width: 100%;
  height: 28px;
  margin-top: 10px;

  align-items: center;

  .zl-ls-ant-input-number {
    width: 72px;
    height: 28px;
    border: 1px solid var(--color-input-border);
    background: var(--color-form-bg);
    color: var(--color-zoom-icon);

    .zl-ls-ant-input-number-handler-wrap {
      background: var(--color-form-bg);
    }

    .zl-ls-ant-input-number-handler {
      border-left: 1px solid var(--color-input-border);
    }
  }

  span {
    margin-right: var(--spacing);
    color: var(--color-zoom-icon);
    font-size: var(--font-size-12);
  }

  .zl-ls-ant-input-number-handler-wrap {
    height: 28px;
    border-left: 1px solid var(--color-input-border);
    background: transparent;

    .zl-ls-ant-input-number-handler-down {
      height: 12px;

      &:hover {
        height: 12px !important;
      }
    }

    .zl-ls-ant-input-number-handler-up {
      height: 12px;
      border-bottom: 1px solid var(--color-input-border);

      &:hover {
        height: 12px !important;
      }
    }
  }

  .zl-ls-ant-input-number-handler-down {
    border-top: 1px solid var(--color-input-border);
  }

  .zl-ls-ant-input-number-sm input {
    height: 28px;
    line-height: 28px;
  }

  .zl-ls-ant-input-number-handler-down-inner svg
  , .zl-ls-ant-input-number-handler-up-inner svg {
    margin-left: 5px;
    color: var(--color-select-setting-font);
    font-size: var(--font-size-12);
  }
}

.zl-ls-ant-input-number-status-error:not(.zl-ls-ant-input-number-disabled):not(.zl-ls-ant-input-number-borderless).zl-ls-ant-input-number
, .zl-ls-ant-input-number-status-error:not(.zl-ls-ant-input-number-disabled):not(.zl-ls-ant-input-number-borderless).zl-ls-ant-input-number:hover {
  background: transparent;
}

.quantizeColor {
  display: flex;
  width: 100%;
  height: 16px;
  margin-bottom: 13px;
  border: 1px solid var(--border-color-transparent);
  border-radius: var(--border-radius-4);

  span {
    display: flex;

    flex: 1;
  }

  .first {
    border-top-left-radius: var(--border-radius-4);
    border-bottom-left-radius: var(--border-radius-4);
  }

  .last {
    border-top-right-radius: var(--border-radius-4);
    border-bottom-right-radius: var(--border-radius-4);
  }

  .all {
    border-radius: var(--border-radius-4);
  }
}

.zl-lagre-screen-select-icon-wrap {
  display: flex;
  padding: 6px 20px 6px 20px;

  justify-content: space-between;

  p {
    display: inline-block;
    min-width: 24px;
    max-width: 48px;
    margin: 0;
    margin-right: 32px;
    color: var(--color-title-icon);
    font-size: var(--font-size-12);
  }

  .zl-lagre-screen-select-icon {
    display: flex;
    margin: 0;
    padding: 0;

    .zl-lagre-screen-select-icon-item {
      display: flex;
      width: 42px;
      height: 28px;
      border: 1px solid #1c2229;
      color: var(--white);

      align-items: center;
      justify-content: center;

      &.active {
        border: 1px solid #6279fc;
        color: #6279fc;
      }
    }

    .zl-lagre-screen-select-icon-item:frist-child {
      border-radius: 4px 0 0 4px;
    }

    .zl-lagre-screen-select-icon-item:last-child {
      border-radius: 0 4px 4px 0;
    }
  }
}

.zl-large-screen-setting-icons {
  display: flex;
  width: 100%;
  color: var(--color-title-icon);

  justify-content: space-between;

  .zl-large-screen-setting-icons-font {
    display: flex;
  }

  .zl-large-screen-setting-icons-tooltip {
    display: flex;

    align-items: center;
  }

  .zl-largen-screen-font-icon {
    display: flex;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    border-radius: 2px;
    background: var(--color-setting-icons);
    cursor: pointer;

    justify-content: center;
    align-items: center;

    &:hover {
      background: var(--color-setting-icons-hover);
    }
  }

  #zl-largen-screen-align-icon-active {
    background-color: var(--color-setting-icons-active);
  }

  .zl-largen-screen-align-icon {
    display: flex;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    border-radius: 2px;
    background: var(--color-setting-icons);
    cursor: pointer;

    justify-content: center;
    align-items: center;

    &:hover {
      background: var(--color-setting-icons-hover);
    }
  }
}

.zl-large-screen-setting-icons-align {
  display: flex;

  align-items: center;
  justify-content: space-between;

  .zl-largen-screen-align-icon {
    margin: 0;
  }

  #align-icon {
    svg {
      width: 17px;
      height: 17px;
      color: #909090;
    }
  }

  .zl-largen-screen-align-icon-split {
    width: 1px;
    height: 16px;
    margin-left: 14px;
    background: var(--color-collapse-border);
  }
}

.select-error-text {
  color: #ff4753;
}

.zl-ls-ant-select-multiple {
  .zl-ls-ant-select-selector {
    .zl-ls-ant-select-selection-overflow {
      min-height: 26px;
      margin-top: -2px;
    }

    .zl-ls-ant-select-selection-item {
      display: flex;

// height: 24px;
      border: none;

      // border: 1px solid var(--color-component-input-border);

      // .zl-ls-ant-select-selection-item-remove {
      //   display: none;
      // }

      .zl-large-screen-unit-select-item {
        .title-value {
          width: 100%;
          line-height: 22px;
        }
      }
    }
  }
}

.zl-ls-ant-switch-checked:focus {
  box-shadow: none;
}

.reset-color-pick {
  color: var(--color-title-icon);
  font-size: var(--font-size-12);
}

.zl-ls-ant-empty {
  color: var(--color-select-setting-font);
}