/*항상 겉에 binding될 wrap Class 명 하기 css들은 .template-wrap을 부모로 두고 진행*/
/*모든 Div 영역에는 postion:relative 적용해주기. Bubble들 기능 때문.*/
.page-block-body {
  --draft-border-color: #ececec;
  --draft-input-border-color: #ccc;
  --draft-header-color: #f1f2f7;
  --draft-btn-border-color: #e2e2e2;
  --draft-btn-color: #5c5fc0;
  --draft-btn-color-two: #fff;
  --draft-calendar-color: #5c5fc0;
  --draft-focus-color: #7b7adf;
}
.template-parent-wrap {
  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
}
.template-wrap {
  width: 100%;
  position: relative;
  border: 1px solid #a5a5a5;
  border-top: none;
  border-right: none;
  display: flex;
}
/*.EDMS-draft-form-bottom-area .template-wrap:not(:has(.template-div)) {
    width: 100%;
    height: 10px;
    position: relative;
    border: solid #eaeaea;
    border-width: 0 0 1px 0;
    border-right: none; 
    display: flex;
}*/
.template-wrap:first-of-type {
  border-top: 1px solid #a5a5a5;
}
.template-wrap > .template-div {
  width: 100%;
  display: flex;
  position: relative;
  min-height: 45px;
}
.template-line {
  width: 100%;
  height: 20px;
  /*border-right: 1px solid #eaeaea;*/
}
.template-wrap:has(.template-line) {
  width: 100%;
  height: 10px;
  position: relative;
  border: solid #a5a5a5;
  border-width: 0 0 1px 0;
  border-right: none;
  display: flex;
}
.template-wrap > .template-div > .template-title {
  width: 175px;
  display: flex;
  justify-items: flex-start;
  align-items: center;
  position: relative;
  border-right: 1px solid #a5a5a5;
  background-color: #f1f2f7;
  padding: 0 12px;
  flex-shrink: 0;
  word-break: keep-all;
  color: #4c4c4c;
}
.template-wrap > .template-div > .template-content {
  display: flex;
  justify-items: flex-start;
  align-items: center;
  min-width: calc(100% - 175px);
  flex-grow: 1;
  max-width: 100%;
  gap: 10px;
  position: relative;
  padding: 5px;
  border-right: 1px solid #a5a5a5;
  flex-wrap: wrap;
}
.template-content input[type="radio"],
.template-content label {
  cursor: pointer;
  /* gap: 10px; */
  justify-items: flex-start;
  align-items: center;
  padding: 5px;
  flex-wrap: wrap;
}
.template-wrap .template-important {
  margin-right: 4px;
  color: red !important;
}
/*Mobile Css 따로 필요할 것*/
.template-wrap .important-message {
  padding: 10px;
  border: 1px solid #ff1d1daa; /*색지정은 추가 작업해주세요.*/
  background-color: #ff1d1daa;
  border-radius: 3px;
  color: white;
  text-shadow: black;
}
.template-wrap .important-message::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid #ff1d1daa;
}
input.important-input {
  border-color: red !important;
}
.template-remark {
  margin-left: 3px;
}
.notice-write {
  padding: 10px 0;
  width: 100%;
}
.title-input {
  /* min-width: 220px; */
  min-width: 0;
  flex: 1 1 0;
  height: 30px;
  padding: 5px;
  /* background-color: #f7f8fc; */
  border-radius: 0;
  border: 1px solid var(--draft-input-border-color);
}
.textbox-input {
  border: 1px solid var(--draft-input-border-color);
  width: 100%;
}
.calendar-div {
  display: flex;
  border: 1px solid var(--draft-input-border-color);
  align-items: center;
  justify-content: space-between;
  min-width: 220px;
  height: 35px;
  padding: 5px;
  cursor: pointer;
}
.calendar-div input {
  cursor: pointer;
}
.range-wrapper {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.range-wrapper span {
  align-content: center;
}
.calendar-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
}
.template-parent-wrap .template-content > select {
  border: 1px solid var(--draft-input-border-color);
  height: 100%;
  padding: 5px;
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}

/* 셀렉박스 */
.template-parent-wrap .custom-select-wrapper {
  width: 100%;
}
.template-parent-wrap .custom-select-wrapper .custom-select-box,
.template-parent-wrap .custom-select-wrapper .custom-option-box,
.template-parent-wrap .custom-select-wrapper.open .custom-select-box {
  border: 1px solid var(--draft-input-border-color);
  border-radius: 0;
}
.template-parent-wrap .custom-select-wrapper .custom-option-box {
  border-top: none;
}

/* #region 모바일 전체 (해상도 1023px ~ ) */
@media all and (max-width: 1023px) {
  .template-wrap {
    flex-direction: column;
    max-width: 100%;
  }
  .template-wrap .template-div {
    width: 100% !important;
    /* 자동으로 인라인 스타일로 들어오기 때문에 우선순위로 인하여 !important를 추가함 */
    min-height: 35px;
  }
  .template-wrap .template-div:not(:last-child) {
    border-bottom: 1px solid #a5a5a5;
  }
  .template-title {
    font-size: var(--sm-font);
  }
  .template-content span {
    font-size: var(--sm-font);
  }
  .template-content label {
    font-size: var(--sm-font);
  }
  .template-wrap textarea {
    font-size: var(--sm-font);
    padding: 5px;
  }
  .template-content > div:has(.calendar-div) {
    max-width: 100%;
  }
  .template-content .calendar-div input {
    min-width: 0;
  }
  .title-input {
    /* height: 100%; */
    background-color: transparent;
  }
  .range-wrapper {
    flex-wrap: wrap;
  }
  /* 셀렉박스 */
  .template-parent-wrap .custom-select-wrapper * {
    font-size: var(--sm-font);
  }
  .template-parent-wrap .custom-select-wrapper {
    width: 100%;
  }
  .template-parent-wrap .custom-select-wrapper .custom-select-box,
  .template-parent-wrap .custom-select-wrapper .custom-option-box,
  .template-parent-wrap .custom-select-wrapper.open .custom-select-box {
    border: 1px solid var(--draft-input-border-color);
    border-radius: 0;
    background-color: #f7f8fc;
    /* padding: 0 5px; */
  }
  .template-parent-wrap .custom-select-wrapper .custom-option {
    background-color: #f7f8fc;
  }
  .template-parent-wrap .custom-select-wrapper .custom-option-box {
    border-top: none;
  }
  .template-parent-wrap .custom-option.selected {
    background-color: #d5d6ef;
  }

  /* 캘린더 */
  .template-content .calendar-div {
    min-width: 0;
    max-width: 100%;
    /* pointer-events: none; */
  }
  .calendar-icon {
    font-size: var(--lg-font);
  }
}
/* #endregion */

/*양식 생성 20251210 추가 css*/
.second-appl-line .template-wrap.info-appl-type-set {
  border-top: none;
}
.page[data-name="eappl-custom-form"] .edms-draft-info-set-flex-first-radio {
  width: auto;
  align-items: center;
}
.page[data-name="eappl-custom-form"] .edms-draft-info-set-third-radio {
  flex-wrap: wrap;
}