@charset "UTF-8";
/*<h2>:: 예시</h2>
<i class="icon_cancel_ex1 has_bg" role="img" aria-label="취소"></i>
<i class="icon_cancel_ex2 has_bg" role="img" aria-label="취소"></i>
<i class="icon_cancel_ex3 has_bg" role="img" aria-label="취소"></i>

.has_bg {
    background-color: pink;
  }
.icon_cancel_ex1 { 
  @include iconCancel($size: 50px, $thick: 10px, $color: #666, $padding: 0, $display: inline-block, $position: relative); 
}*/
input[type=text]:focus,
input[type=number]:focus,
input[type=password]:focus,
input[type=email]:focus,
textarea:focus {
  border: 1px solid #316ced;
}

input, textarea {
  width: 100%;
  padding: 5px;
  outline: none;
  border: 1px solid #ccc;
  font-size: 12px;
  resize: none;
}

.flow-chart {
  padding: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 50px;
  /* SVG 영역에 스크롤바가 생기도록 설정 */
  /* 노드 스타일 */
  /* 20241008 함승헌 추가 */
  /* 20241008 함승헌 추가 */
  /* 링크 및 화살표 스타일 */
  /* 드래그 아이콘 스타일 */
  /* 팝업 스타일 */
  /* 배경을 비활성화하여 팝업이 강조되도록 함 */
  /* 신규 추가 버튼 */
  /* Import 텍스트 입력 */
  /* 링크 삭제 목록 */
}
.flow-chart .sample {
  padding: 300px 0 40px;
  border-bottom: 2px solid;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 30px;
}
.flow-chart .sample .card {
  border-radius: 10px;
  border: 1px solid #eee;
  width: 300px;
  min-height: 150px;
}
.flow-chart .sample .card .title {
  padding: 15px 0px 10px;
  text-align: center;
  background-color: #f5f0ec;
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.flow-chart .sample .card .title::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 7px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgb(238, 143, 143);
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.flow-chart .sample .card.card02 .title {
  background-color: #ecf5f2;
}
.flow-chart .sample .card.card02 .title::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 7px;
  background-color: rgb(143, 238, 214);
}
.flow-chart .sample .card.card03 .title {
  background-color: #eceff5;
}
.flow-chart .sample .card.card03 .title::after {
  content: "";
  display: inline-block;
  width: 100%;
  height: 7px;
  background-color: rgb(143, 173, 238);
}
.flow-chart .sample .card ul li {
  font-size: 14px;
  padding: 10px;
  color: #444;
}
.flow-chart .sample .card ul li:hover {
  background-color: #f6f8fd;
  color: #03A9F4;
  cursor: pointer;
}
.flow-chart .sample .card ul li.on {
  background-color: #f6f8fd;
  color: #03A9F4;
  cursor: pointer;
}
.flow-chart .svg-container {
  width: 100%;
  height: 100%;
  overflow: auto; /* 스크롤바 활성화 */
  position: relative; /* 위치 제어를 위해 필요 */
}
.flow-chart svg {
  display: block;
  height: 100%;
  max-height: 100%;
}
.flow-chart .node rect {
  stroke: #316ced;
  stroke-width: 1px;
  cursor: pointer;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.flow-chart .node rect:hover {
  stroke-width: 5px;
  stroke-opacity: 0.3;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.flow-chart .node-title {
  font-size: 14px;
  font-weight: bold;
  fill: #333;
}
.flow-chart .node-sub-title-bg {
  fill: #f3f3f3;
}
.flow-chart .node-content {
  font-size: 12px;
  fill: #555;
}
.flow-chart .node-content div {
  line-height: normal;
}
.flow-chart .node-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 10px;
  gap: 6px;
}
.flow-chart .node-title {
  padding: 20px 0px 10px;
  text-align: left;
  text-indent: 30px;
  background-color: transparent;
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.flow-chart .node-title::after {
  content: "";
  display: inline-block;
  width: 95%;
  height: 8px;
  position: absolute;
  top: 6px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: #316ced;
  border-radius: 4px;
}
.flow-chart ul li {
  font-size: 14px;
  padding: 10px;
  color: #444;
}
.flow-chart .button {
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  background-color: #e0e0e0;
  font-size: 11px;
  text-align: center;
}
.flow-chart .button.edit {
  background-color: #fff;
  -webkit-box-shadow: inset 0 0 0px 1px #316ced;
          box-shadow: inset 0 0 0px 1px #316ced;
  color: #316ced;
}
.flow-chart .button.edit::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 100%;
  content: "\e9c3";
  font-size: 11px;
  font-family: "xeicon";
  color: #316ced;
  padding-right: 2px;
  vertical-align: middle;
}
.flow-chart .button.copy {
  background-color: #fff;
  -webkit-box-shadow: inset 0 0 0px 1px #3a3a3a;
          box-shadow: inset 0 0 0px 1px #3a3a3a;
}
.flow-chart .button.copy::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 100%;
  content: "\eb1e";
  font-size: 11px;
  font-family: "xeicon";
  color: #3a3a3a;
  padding-right: 2px;
  vertical-align: middle;
}
.flow-chart .button:hover {
  background-color: #d3d3d3;
}
.flow-chart .separator {
  stroke: #d3d3d3;
  stroke-width: 1px;
}
.flow-chart .links line {
  stroke: #999;
  stroke-width: 2px;
  marker-end: url(#arrow); /* 연결선 끝에 화살표 추가 */
}
.flow-chart .drag-icon {
  fill: transparent;
  cursor: move;
  stroke: black;
}
.flow-chart .drag-icon:hover {
  fill: #d9eaff;
  stroke: #90a7ff;
}
.flow-chart .drag-icon::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 100%;
  content: "\e90c";
  font-size: 20px; /* 아이콘 사이즈 조정 : 20241022 */
  font-family: "xeicon";
  color: #000;
  padding-right: 2px;
  vertical-align: middle;
}
.flow-chart .popup {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: white;
  border: 1px solid #ccc;
  padding: 20px;
  -webkit-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  min-width: 400px;
  border-radius: 10px;
}
.flow-chart .popup .popup-header-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 30px;
}
.flow-chart .popup .popup-header-wrap .popup-header {
  font-weight: 600;
  font-size: 16px;
  color: #000;
}
.flow-chart .popup .popup-header-wrap .popup_close {
  font-size: 22px;
  vertical-align: text-top;
}
.flow-chart .popup .popup-buttons {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 10px;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  margin-top: 30px;
}
.flow-chart .popup .popup-buttons button {
  padding: 8px 12px;
  background: #ccc;
  font-size: 12px;
  border-radius: 4px;
}
.flow-chart .popup .popup-buttons .save {
  background-color: #316ced;
  color: #fff;
}
.flow-chart .popup-header-wrap + .input-box > input {
  width: 100%;
}
.flow-chart .input-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  gap: 5px;
}
.flow-chart .input-box textarea {
  padding-right: 20px;
}
.flow-chart .input-box input {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: 15%;
}
.flow-chart .input-box button {
  position: relative;
}
.flow-chart .input-box button::after {
  content: "";
  display: inline-block;
  width: auto;
  height: auto;
  content: "\e919";
  font-family: "xeicon";
  color: #316ced;
  font-size: 28px;
  position: absolute;
  top: 0;
  right: 5px;
}
.flow-chart .input-box button:hover::after {
  color: #8fb2fd;
}
.flow-chart .input-box button.remove::after {
  content: "";
  display: inline-block;
  width: auto;
  height: auto;
  content: "\e920";
  font-family: "xeicon";
  color: #ccc;
}
.flow-chart .input-box button.remove:hover::after {
  color: #8fb2fd;
}
.flow-chart .input-box ~ .input-box {
  margin-top: 10px;
}
.flow-chart .remove::after {
  content: "";
  display: inline-block;
  width: auto;
  height: auto;
  content: "\e920";
  font-family: "xeicon";
  color: #ccc;
}
.flow-chart .remove:hover::after {
  color: #8fb2fd;
}
.flow-chart .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 999;
}
.flow-chart table {
  width: 100%;
}
.flow-chart table tr {
  border: 1px solid #e4e4e4;
  background-color: #f8f9fb;
  border-bottom: 1px solid #e4e4e4;
}
.flow-chart table tr:nth-child(even) {
  background-color: #fff;
}
.flow-chart table:last-child {
  border-bottom: 1px solid #e4e4e4;
}
.flow-chart table th {
  padding: 6px 10px;
  white-space: nowrap;
  text-align: center;
  border: none;
  color: #333;
  font-weight: 500;
  font-size: 12px;
  background-color: #e5eaf3;
  border-top: 1px solid #e4e4e4;
}
.flow-chart table th > em {
  color: rgb(255, 73, 73);
}
.flow-chart table td {
  text-align: center;
  padding: 6px 10px;
  border: none;
  font-size: 12px;
  font-weight: 400;
  color: #333;
  position: relative;
}
.flow-chart table td.txt_left {
  text-align: left !important;
  word-break: break-all;
}
.flow-chart table td.txt_left a {
  text-align: left;
}
.flow-chart table td:first-child {
  border-left: none;
}
.flow-chart table td:last-child {
  border-right: none;
}
.flow-chart table td a {
  text-decoration: underline;
  text-align: center;
}
.flow-chart table td .btn_wrap a {
  text-decoration: none;
}
.flow-chart table.scope_row tbody tr {
  border-top: 1px solid #e4e4e4;
}
.flow-chart table.scope_row tbody tr th {
  background-color: #f8f9fb;
  border-top: 1px solid #e4e4e4;
}
.flow-chart table.scope_row tbody tr td {
  text-align: left;
}
.flow-chart table.scope_row tbody tr:last-child {
  border-bottom: 1px solid #e4e4e4;
}
.flow-chart table.scope_row t .table_box tbody tr {
  background-color: #fff;
}
.flow-chart table.scope_row t .table_box tbody tr td {
  text-align: center;
}
.flow-chart .side-area {
  position: fixed;
  top: 50px;
  right: 50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5px;
}
.flow-chart #addNodeButton, .flow-chart #addLinkButton, .flow-chart #deleteLinkButton, .flow-chart #exportButton, .flow-chart #importButton {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  cursor: pointer;
  font-size: 14px;
  z-index: 1000;
}
.flow-chart #deleteLinkButton {
  top: 100px;
  right: 320px;
  background-color: #F44336;
}
.flow-chart #exportButton {
  top: 20px;
  right: 20px;
  background-color: #ff9800;
}
.flow-chart #importButton {
  top: 60px;
  right: 20px;
  background-color: #03A9F4;
}
.flow-chart #importText {
  top: 120px;
  right: 20px;
  width: 300px;
  height: 150px;
}
.flow-chart #linkList {
  top: 140px;
  right: 320px;
  background-color: #fff;
  padding: 10px;
  border: 1px solid #ddd;
  width: 300px;
  max-height: 300px;
  overflow-y: auto;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}