.focus {
  border-color: #8a550a;
  box-shadow: 0 0 0 2px rgba(247, 200, 115, 0.2);
  background-color: #2d3038;
}
.config {
  width: 100%;
  height: 100%;
  background-color: #1a1d23;
  display: flex;
  justify-content: center;
  align-items: center;
  .section {
    width: 95%;
    height: 90%;
    border: 1px solid #282b31;
    background-color: #1d2027;
    border-radius: 10px;
    overflow: hidden;
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px;
      margin-bottom: 20px;
      color: #fff;
      .header_left {
        display: flex;
        align-items: center;
        font-weight: 800;
        gap: 10px;
      }
      .header_Button {
        background-color: #2b9d7c;
        border: none;
        color: #fff;
      }
    }
    .content {
      padding: 20px;
      max-height: 80vh;
      overflow-y: auto;
      padding-bottom: 60px;
      &::-webkit-scrollbar {
        width: 4px;
      }
      &::-webkit-scrollbar-track {
        background: linear-gradient(220.55deg, #1c1815 0%, #46425a 100%);
        border-radius: 50px;
      }
      &::-webkit-scrollbar-thumb {
        background: linear-gradient(180deg, #144054 0%, #14493a 100%);
        border-radius: 3px;
        cursor: pointer;
        &:hover {
          background: linear-gradient(180deg, #2a9dd3 0%, #23daa6 100%);
        }
      }
      .inputRow {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        .labelContainer {
          display: flex;
          align-items: start;
          gap: 10px;
          .labelContainer_text {
            display: flex;
            flex-direction: column;
            .annotation {
              margin-top: 5px;
              font-size: 12px;
              color: #999;
              user-select: none;
            }
          }
        }
        .right_container_text {
          color: #fff;
          font-size: 14px;
          user-select: none;
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }

      // Input 样式控制
      :global(.ant-input) {
        min-width: 200px; // 控制输入框长度
        background-color: #2a2d35; // 背景颜色
        border: 1px solid #3a3d45;
        color: #fff;
        transition: all 0.3s ease;

        // 鼠标悬停效果
        &:hover {
          border-color: none;
          background-color: #2a2e35;
          // box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
        }

        // 聚焦效果
        &:focus {
          @extend .focus;
        }

        // 占位符颜色
        &::placeholder {
          color: #666;
        }
      }
    }
  }
}

.guideModal {
  :global(.ant-modal-content) {
    background-color: #1e2128;
    color: #fff;
  }

  :global(.ant-modal-header) {
    background-color: #1e2128;
    color: #fff;
  }
}

.text_label_general {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-weight: 800;
  line-height: 1;
  margin-left: 10px;
  user-select: none;
}

.iconPhone {
  color: #fddb92;
  font-size: 15px;
}
.labelPhone {
  background-image: linear-gradient(to right, #fddb92 0%, #d1fdff 100%);
  @extend .text_label_general;
}

.iconPath {
  color: #69eacb;
  font-size: 15px;
}
.labelPath {
  background-image: linear-gradient(
    -225deg,
    #69eacb 0%,
    #eaccf8 48%,
    #6654f1 100%
  );
  @extend .text_label_general;
}

.iconAcephalous {
  color: #acb6e5;
  font-size: 15px;
}
.labelAcephalous {
  background-image: linear-gradient(to right, #acb6e5, #86fde8);
  @extend .text_label_general;
}

.iconCity {
  color: #d4ffec;
  font-size: 15px;
}
.labelCity {
  background-image: linear-gradient(
    -225deg,
    #d4ffec 0%,
    #57f2cc 48%,
    #4596fb 100%
  );
  @extend .text_label_general;
}

.selectCitys {
  width: 100px !important;
  :global {
    .ant-select-selector {
      background-color: #2a2d35 !important;
      border: 1px solid #3a3d45 !important;
      color: #fff;
      box-shadow: none !important;
    }
  }
}

:global(.ant-select-dropdown) {
  background-color: #222831 !important;
  .ant-select-item-option-content {
    color: #fff !important;
  }
}
:global(.ant-select-item) {
  background-color: #222831 !important;
  color: #fff !important;
  &:hover {
    background-color: #222831 !important;
  }
}

.iconJob {
  color: #e65c00;
  font-size: 15px;
}
.labelJob {
  background-image: linear-gradient(to right, #e65c00, #f9d423);
  @extend .text_label_general;
}

.portNumberIcon {
  color: #3d4e81;
  font-size: 15px;
}
.portNumber {
  background-image: linear-gradient(
    -225deg,
    #3d4e81 0%,
    #5753c9 48%,
    #6e7ff3 100%
  );
  @extend .text_label_general;
}

.iconBrowser {
  color: #231557;
  font-size: 15px;
}
.labelBrowser {
  background-image: linear-gradient(
    -225deg,
    #8b72e7 0%,
    #44107a 29%,
    #ff1361 67%,
    #fff800 100%
  );
  @extend .text_label_general;
}
