@charset "UTF-8";

/* 좌측 패널 높이 고정용 */
.app__container {
  height: 100%;
}

/* 트리 뷰 체크 아이콘만 스크롤 되지 않는 것 수정용 */
/* div.icon-wrapper:has(.treebox__btn_custom) {
  position: relative;
}

.treebox__btn_custom {
  position: absolute;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-color: #27aa30;
  cursor: pointer;
}

.treebox__btn_custom.is-active ~ .treebox__accord-depth {
  display: block;
}

.treebox__btn_custom.is-active::after,
.treebox__btn_custom.is-active::before {
  transform: translate(-50%, -50%);
}

.treebox__btn_custom::after,
.treebox__btn_custom::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background-color: #ffffff;
  content: "";
}

.treebox__btn_custom::before {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: all 0.25s;
}

.treebox__btn_custom::after {
  transform: translate(-50%, -50%) rotate(180deg);
  transition: all 0.35s;
} */

/* 트리 뷰 체크 아이콘만 스크롤 되지 않는 것 수정용 */
div.icon-wrapper:has(.treebox__btn_custom) {
  position: relative;
}

.treebox__btn_custom {
  position: absolute;
  top: 1px;
  left: 0;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  background-color: #f8f8f8;
  border-radius: 2px;
  cursor: pointer;
}

.treebox__btn_custom.is-active ~ .treebox__accord-depth {
  display: block;
}

.treebox__btn_custom.is-active::after,
.treebox__btn_custom.is-active::before {
  transform: translate(-50%, -50%);
}

.treebox__btn_custom::after,
.treebox__btn_custom::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 2px;
  background-color: #404fc1;
  content: "";
}

.treebox__btn_custom::before {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: all 0.25s;
}

.treebox__btn_custom::after {
  transform: translate(-50%, -50%) rotate(180deg);
  transition: all 0.35s;
}

.modal__body {
  height: auto;
  margin: 10px 0;
  overflow-y: auto;
}

/* .form__label {
  flex-shrink: 0;
  font-weight: 500;
  padding-top: 7px;
  font-size: 14px;
} */

.selectbox--default .select {
  color: #666666;
  padding: 7px 31px 7px 18px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  font-size: 14px;
}

.selectbox--default .select[disabled] {
  cursor: default;
}

.radio__label {
  position: relative;
  line-height: 1.2;
  padding-left: 20px;
  cursor: pointer;
  font-size: 14px;
}

.file_upload {
  margin-right: 15px;
}

/* Chrome, Safari, Edge, Opera */
:is(.form__field, .form__field-col, .form__container)
  input::-webkit-outer-spin-button,
:is(.form__field, .form__field-col, .form__container)
  input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
:is(.form__field, .form__field-col, .form__container) input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.inputbox--default {
  align-items: center;
}

.inputbox.inputbox--default {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.icon,
.icon--exel,
.icon--extend,
/* .icon--extend-png, */
.icon--extend-exel {
  font-size: 0;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% 100%;
}

.icon--exel {
  display: inline-block;
  vertical-align: top;
  width: 18px;
  height: 18px;
  background-image: url("../images/icon/common/exel.svg");
}

/* .icon--extend-png {
  width: 15px;
  height: 16px;
  background: url("../images/icon/common/png.svg") no-repeat;
} */

.icon--extend-exel {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background: url("../images/icon/common/xlsx.svg") no-repeat;
}

.tabs--slide::before {
  display: block;
  right: 0;
  background-color: rgba(255, 255, 255, 0.9);
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+80,ffffff+100&1+80,0+100 */
  background: -moz-linear-gradient(
    left,
    rgba(255, 255, 255, 1) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  /* FF3.6-15 */
  background: -webkit-linear-gradient(
    left,
    rgba(255, 255, 255, 1) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 1) 80%,
    rgba(255, 255, 255, 0) 100%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
  /* IE6-9 */
}

.icon--caution {
  width: 15px;
  height: 15px;
  background: url(../images/icon/common/caution.svg) no-repeat 50% 50%;
}

.icon--location {
  width: 15px;
  height: 15px;
  background: url(../images/icon/common/location.svg) no-repeat 50% 50%;
}

.panel {
  display: flex;
  transition: 250ms linear left;
}

.panel.is-active {
  left: 80px;
}

/* .panel__wrap,
.panel__wrap-icon {
  position: relative;
  width: 404px;
  padding-top: 58px;
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.1);
  background: #ffffff;
} */

.panel__wrap-icon {
  padding-top: 100px;
  /* margin-right:26px; */
}

/* .panel__head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 10px 15px;
  width: 404px;
} */

/* .panel__container {
  height: 100%;
  width: 404px;
} */

/* .panel__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  row-gap: 10px;
} */

.panel__body {
  flex-grow: 1;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.panel__innr {
  display: flex;
  flex-direction: column;
  padding: 0 15px 15px;
  height: 100%;
  overflow: hidden;
}

/* .panel__padd {
  padding: 0 15px;
} */

.panel__row {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding-bottom: 22px;
}

.panel__row .ui-box {
  flex: 1;
}

.panel__sticky {
  display: block;
  flex: none;
  /* padding: 0 15px; */
}

.panel__title {
  display: block;
  flex: none;
  font-weight: 500;
  margin-bottom: 8px;
}

.panel__col {
  overflow-y: auto;
}

.panel__scrl {
  height: 100%;
  overflow-y: auto;
}

.panel__section {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  row-gap: 10px;
}

/* .panel .btn-toggle {
  position: absolute;
  top: 0;
  left: 100%;
  width: 30px;
  height: 58px;
  z-index: 10;
  border-radius: 0 8px 8px 0;
  background-color: #ffffff;
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.1);
  transition: 250ms linear all;
} */

/* .panel .btn-toggle::after {
  display: block;
  width: 11px;
  height: 11px;
  border-left: 2px solid #141414;
  border-bottom: 2px solid #141414;
  transform: rotate(-135deg);
  content: "";
  transform: translate(6px, 0) rotate(45deg);
} */

/* .panel:not(.is-active) .btn-toggle {
  left: calc(100% + 80px);
} */

.panel:not(.is-active) .btn-toggle::after {
  transform: translate(6px, 0) rotate(-135deg);
}

.panel:not(.is-active) .panel__layer {
  display: none;
}

.panel__layer {
  width: 404px;
  height: 100%;
  background-color: #f6f7f8;
  border-bottom: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-radius: 0 0 0 0;
  box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, 0.1);
  z-index: -1;
  transition: 250ms linear all;
}

.panel__layer.is-active {
  visibility: visible;
  transform: translateX(0%);
}

.panel__layer:not(.is-active) {
  visibility: hidden;
  transform: translateX(-100%);
}

.panel.is-active .panel__layer.is-active + .btn-toggle {
  left: calc(205% - 20px);
}

/* .panel__subtit {
  display: flex;
  width: 100%;
  font-size: 1.6rem;
  font-weight: 500;
  padding: 0 20px;
  height: 60px;
  align-items: center;
  background-color: #ffffff;
} */

.panel__sub-innr {
  max-height: calc(100% - 60px);
  overflow-y: auto;
  width: 400px;
}

.treebox-wrap {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  height: 100%;
  background-color: #f6f7f8;
  padding: 15px;
}

.p0 {
  padding: 0px;
}

.mr5 {
  margin-right: 5px;
}

/* .btn--default {
  color: #111;
  font-weight: 500;
  padding: 6px 22px;
  border: 1px solid #D2D2D2;
} */

.btn-excel {
  color: #f6f7f8;
}

.vue3-easy-data-table__header th.sortable .sortType-icon[data-v-0c7093ee] {
  margin-left: 2px !important;
}

.panel.is-active {
  left: 80px;
  width: 404px;
}

.btnbox-modal {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
}

.w100px {
  width: 100px;
}

.inputbox--default .inputbox__label {
  font-weight: normal;
  color: #999;
}

.table table tr.selected,
.table table tr.selected td {
  background-color: #eef8f1;
}
.shadow,
.sortable {
  font-weight: 500;
  background-color: #f3f5f6;
  height: 40px;
}

.modal__container {
  max-height: calc(100vh - 170px);
  margin-top: 0px;
  overflow-y: auto;
}

/* line 20, pre-build/scss/_page.scss */
.dashboard {
  margin-top: 20px;
  height: 600px;
  overflow-x: hidden;
  overflow-y: auto;
}

/* line 23, pre-build/scss/_page.scss */
.dashboard .dash-cont {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

/* line 24, pre-build/scss/_page.scss */
.dashboard .dash-cont .left {
  width: 200px;
  margin-right: 30px;
}

/* line 27, pre-build/scss/_page.scss */
.dashboard .dash-cont .left .trading {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: #fcf1f6;
  border-radius: 5px;
  padding: 20px;
}

/* line 28, pre-build/scss/_page.scss */
.dashboard .dash-cont .left .trading img {
  margin-bottom: 10px;
}

/* line 31, pre-build/scss/_page.scss */
.dashboard .dash-cont .left .trading p {
  margin-top: 4px;
}

/* line 32, pre-build/scss/_page.scss */
.dashboard .dash-cont .left .trading i {
  font-size: 30px;
  font-weight: 700;
  color: #9a0c4f;
}

/* line 33, pre-build/scss/_page.scss */
.dashboard .dash-cont .left .trading em {
  font-size: 16px;
  font-weight: 700;
  line-height: 36px;
}

/* line 36, pre-build/scss/_page.scss */
.dashboard .dash-cont .right {
  width: 1000px;
}

/* line 37, pre-build/scss/_page.scss */
.dashboard .dash-cont .right .chart-area {
  padding: 20px;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* line 40, pre-build/scss/_page.scss */
.dashboard .dash-cont .right .chart-title {
  width: 100%;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

/* line 43, pre-build/scss/_page.scss */
.dashboard .dash-cont .right.month .result-title {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  padding-bottom: 10px;
  white-space: nowrap;
  margin-bottom: 20px;
  border-bottom: 2px solid #18205c;
}

/* line 44, pre-build/scss/_page.scss */
.dashboard .dash-cont .right.month .result-title p {
  font-size: 16px;
  font-weight: 700;
}

/* line 45, pre-build/scss/_page.scss */
.dashboard .dash-cont .right.month .result-title span {
  color: #666666;
  margin-left: 10px;
}

/* line 54, pre-build/scss/_page.scss */
.dashboard .dash-tab {
  width: 200px;
  border-radius: 5px;
}

/* line 56, pre-build/scss/_page.scss */
.dashboard .dash-tab .tab-title {
  width: 100%;
  height: 70px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  background-color: #9a0c4f;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border-radius: 5px 5px 0 0;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 20px;
}

/* line 57, pre-build/scss/_page.scss */
.dashboard .dash-tab .tab-title p {
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.estate .estate-btn {
  left: 10px;
}
/* .modal__content {
	padding:  1px 100px 0px;
	background-color: #ffffff;
} */
/* basetable css 적용 START */
.table--default th {
  font-weight: 700;
  background-color: #f3f5f6;
  height: 40px;
}

/* basetable css 적용 END */

/* input box 스타일 적용 */
/* .option--default {
  width: 100%;
  height: 30px;
  padding: 7px 31px 7px 18px;
} */

/* select box 스타일 적용 */
.safe-info .safe-left {
  width: 230px;
}