.border-container {
  border: 1px solid #c2cadb;
  background-color: #fff;
  padding: 20px;
  border-radius: 24px;
  position: relative;

  .sub-title-header {
    display: flex;
    align-items: center;
    padding: 16.5px 20px;
    border: 1px solid #c2cadb;
    border-radius: 8px 8px 0 0;
    background-color: #f0f4fd;
    color: #282e3e;
    font-size: 15px;
    line-height: 15px;
    letter-spacing: -0.6px;
  }

  .main-text {
    display: flex;
    align-items: center;
    color: #000;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -0.64px;
    font-weight: 500;
    margin-bottom: 16px;
  }

  .border-content {
    padding: 0 20px 16px 20px;
    border: 1px solid #c2cadb;
    background-color: #fff;
    border-radius: 8px;

    &.border-content--no-padding-bottom {
      padding-bottom: 0;
    }

    .text-error {
      border: 1px solid #ff4c4c;
    }

    .content-text {
      width: 96px !important;
      font-size: 15px;
      line-height: 15px;
      letter-spacing: -0.6px;
      font-weight: 500;
      color: #000;
      flex-shrink: 0;

      & > span {
        color: #ff4c4c;
      }
    }

    .content-broder {
      width: 100%;
      height: 1px;
      background-color: #d9dfec;
    }
  }

  .short-bar {
    width: 1px;
    height: 16px;
    margin: 0 24px;
    background-color: #d9dfec;
  }

  .thick-bar {
    position: relative;
    left: -20px;
    width: calc(100% + 40px);
    height: 12px;
    margin: 20px 0;
    border-top: 1px solid #d9dfec;
    background-color: #f5f6f8;
  }

  .left-align {
    display: flex;
    align-items: center;
    width: 154px;

    .custom-checkbox {
      display: flex;
      align-items: center;
      gap: 24px;
    }
  }
}

.sub-title-header {
  display: flex;
  align-items: center;
  padding: 16.5px 20px;
  border: 1px solid #c2cadb;
  border-radius: 8px 8px 0 0;
  background-color: #f0f4fd;
}