@charset "utf-8";

/* 초기화면 */

.p-0{
    padding: 0 !important;
    margin: 0 !important;
}
.user-main {display: block; width: 100%; height: 100%; background-color: #ffffff; overflow: hidden;}
.user-main:before {content: ''; display: block; width: 100%; height: 100%; background-image: url('../images/background/mvbg3.jpg'); background-repeat: no-repeat; background-size: cover; opacity: 0.7;}
.user-main .layer-wrap[data-layer-wrap="login"] .close-layer{display: none;}
body:has(.user-main) .layer-overlay {display: none;}

.layer-wrap.user {padding: 25px 35px 35px 35px; gap: 0; width: 350px; box-sizing: border-box; max-height: 90%; overflow-y: auto;}
.layer-wrap.user:has(.terms-wrap) {width: auto; min-width: 400px;}
.layer-wrap.terms {width: auto; min-width: 400px;}
.user-main .layer-wrap[data-layer-wrap="login"] {width: 350px;}
.user-main .layer-wrap[data-layer-wrap="userJoin"] {width: 450px;}
.layer-wrap.user .layer-top {display: flex; justify-content: space-between;}
.layer-wrap.user .layer-top .logo {width: 120px;}
.layer-wrap.user .layer-title {font-size: 24px; font-weight: 600; display: flex; justify-content: center;    margin: 50px 0 40px 0;}
.layer-wrap.user .user-wrap {display: flex; flex-direction: column; gap: 20px;}
.layer-wrap.user .user-input {display: flex; flex-direction: column; gap: 10px;}
.layer-wrap.user .user-input label { font-size: 12px; font-weight: 500; color: #333333; }
.layer-wrap.user .user-input input { width: 100%; height: 42px; border-color: #333333; }
.layer-wrap.user .user-input input[disabled="disabled"] {border-color: #cccccc;}
.layer-wrap.user .btn-wrap { margin-top: 30px; }
.layer-wrap.user .btn {width: 100%; height: 42px; font-size: 14px; font-weight: 500;}
.layer-wrap.user .btn-input .btn{width: auto; height: 32px; font-size: 12px;}
.layer-wrap.user span.btn{justify-content: center; align-items: center; display: inline-flex; background-color: #898989;}

.user-btn { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 10px;}
.user-btn button, .user-btn span {color: #898989; font-weight: 500; font-size: 12px;}
.user-btn .sub-btn {display: flex; align-content: center; gap: 2px;}
.user-info { display: flex; justify-content: flex-end; margin-top: 30px; font-weight: 500; font-size: 12px; color: #333333;}

.user-table {display: flex; flex-direction: column; gap: 10px; padding: 5px 0; border-top: solid 1px #adadad; border-bottom: solid 1px #adadad;}
.user-table table {table-layout: fixed; width: 100%;}
.user-table table th, .user-table table td {padding: 5px;}
.user-table table th {color: #898989; font-weight: 500; text-align: left;}

.user-list ul {display: flex; flex-direction: column; border-top: solid 1px #adadad; border-bottom: solid 1px #adadad; max-height: 265px; overflow-y: auto;}
.user-list ul li {display: flex; flex-wrap: wrap; padding: 10px 0; border-top: dotted 1px #adadad; align-items: flex-start;}
.user-list ul li span {display: flex; width: calc(100% - 100px); padding: 5px 10px; line-height: 1.4;}
.user-list ul li span.title {width: 100px; color: #898989; font-weight: 500;}
.user-list ul li:first-of-type {border-top: none;}

.terms-btn {margin-top: 20px;}
.terms-btn .check-wrap {display: flex; justify-content: space-between;}
.terms-btn .check-wrap + .check-wrap {margin-top: 15px;}
.terms-btn .check-wrap .text {font-weight: 500;}
.terms-btn .check-wrap button {font-weight: 500; text-decoration: underline;}

#userJoin_tr {position: relative;}

/* 약관 */
.terms-title { display: flex; font-size: 14px; font-weight: 600; margin: 40px 0 15px 0;}
.terms-wrap { display: flex; border-radius: 5px; border: solid 1px #cdcdcd; padding: 20px; flex-direction: column; gap: 10px; height: 100%; overflow-y: auto; }
.terms-wrap .terms-title {margin: 10px 0; display: flex; align-items: center;}
.terms-wrap .terms-title.big, .terms-wrap .terms-title.small {font-size: 12px; margin: 10px 0 0 0; font-weight: 600; line-height: 1.6;}
.terms-wrap .terms-title.big {font-size: 16px;}
.terms-wrap .terms-title.point {color: #395ad4;}
.terms-wrap .terms-title img {display: inline-flex; width: auto; height: 24px; margin-left: 10px;}
.terms-wrap .terms-title img + img {margin-left: 7px;}
.terms-wrap p, .terms-wrap ul li {font-size: 12px; font-weight: 400; line-height: 1.4;}
.terms-wrap p .link{text-decoration: underline; margin-left: 10px;}
.terms-wrap p.bold {font-weight: 500; font-size: 14px;}
.terms-wrap ul {display: flex; flex-direction: column; gap: 5px;}
.terms-wrap ul li {padding-left: 10px; position: relative;}
.terms-wrap ul li:before {content: ''; width: 3px; height: 3px; border-radius: 100%; background-color: #898989; position: absolute; top: 7px; left: 0;}
.terms-wrap ul li b{font-weight: 500;}
.terms-wrap ul li ul {margin: 10px 0;}
.terms-wrap ul li ul li, .terms-wrap ul.dash li, .terms-wrap .point-box ul.num ul.dash li {padding-left: 12px; list-style: none;}
.terms-wrap ul li ul li:before, .terms-wrap ul.dash li:before, .terms-wrap .point-box ul.num ul.dash li:before, .terms-wrap ul.circle-num ul.dash li:before {content: ''; width: 5px; height: 2px; border-radius: 1px; background-color: #898989; position: absolute; top: 7px; left: 0; display: inline;}
.terms-wrap ul.circle-num ul.dash {padding-left: 15px;}
.terms-wrap table {border-bottom: solid 1px #898989; border-top: solid 1px #898989;border-left: solid 1px #cdcdcd;}
.terms-wrap table th {text-align: center; padding: 10px; line-height: 1.6; background-color: #f3f3f3; border: solid 1px #cdcdcd; border-left: none; font-weight: 500; vertical-align: middle;}
.terms-wrap table td {text-align: center; padding: 15px 10px; line-height: 1.6; word-break: keep-all; border-right: solid 1px #cdcdcd;}
.terms-wrap table td b{font-weight: 600; font-size: 16px;}
.terms-wrap table td span {font-size: 12px; margin-top: 10px; display: block;}
.terms-wrap table tr:first-of-type th {border-top: none;}
.terms-wrap table tr th:first-of-type, .terms-wrap table tr td:first-of-type {border-left: none;}
.terms-wrap table tbody td{border-bottom: solid 1px #cdcdcd; vertical-align: middle;}
.terms-wrap table tbody tr:last-of-type td{border-bottom: none;}
.terms-wrap table td img { display: block; margin : 0 auto 10px auto; width: 42px;}
.terms-wrap table tr td.bd-left {border-left: solid 1px #cdcdcd;}
.terms-wrap table tr td.v-middel {vertical-align: middle;}
.terms-wrap .index-wrap {display: flex; gap: 20px; align-items: flex-start; border: solid 1px #cdcdcd; padding: 20px; border-radius: 5px; }
.terms-wrap .index-wrap ul {width:calc(50% - 10px);}
.terms-wrap .index-wrap ul li {word-break: keep-all;}
.terms-wrap .terms-box {display: flex; flex-direction: column; border: solid 1px #cdcdcd; padding: 20px 20px 20px 35px; border-radius: 5px; }
.terms-wrap .terms-box li:before {display: none;}
.terms-wrap .terms-box li, .terms-wrap .point-box ul.num li, .terms-wrap .point-box ul.circle-num ul.num li {list-style: auto; padding: 0;}
.terms-wrap .point-box ul.circle-num li {list-style: none;}
.terms-wrap ul.circle-num li:before {display: none;}
.terms-wrap .point-box {display: flex; flex-direction: column; background-color: #f3f3f3; padding: 20px; border-radius: 5px; }
.terms-wrap .point-box ul.num {padding-left: 15px;}
.terms-wrap .point-box ul.num li:before, .terms-wrap .point-box ul.circle-num:before {display: none;}
.terms-wrap .point-box ul.circle-num ul.num {padding-left: 30px;}
.terms-wrap .point-box li b{font-weight: 600;}
.terms-wrap .terms-btn {display: flex; gap: 20px; justify-content: center; align-items: center; margin: 30px 0 20px 0;}
.terms-wrap .terms-btn a {display: flex; flex-direction: column; gap: 10px; border-radius: 5px; background-color: #395ad4; color: #ffffff; position: relative; padding: 20px; padding-right: 70px;}
.terms-wrap .terms-btn a span:not(.document) {font-size: 14px;}
.terms-btn a:after {content: ''; position: absolute; top: 50%; right: 20px; width: 24px; height: 24px; transform: translateY(-50%); background-color: #ffffff; mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 80% auto; -webkit-mask-size: 80% auto; mask-image: url('../images/icon/download.svg'); -webkit-mask-image: url('../images/icon/download.svg');}
.terms-wrap .point-box ul li p:has(.btn) {line-height: 2.8;}
.terms-wrap .point-box ul li p.btn-p {line-height: 2.8;}
.terms-wrap .point-box ul li p .btn{font-size: 12px; padding: 2px 10px; margin-left: 10px;}
.terms-wrap ul.dash li .terms-box.circle-num {padding-left: 20px;}
.terms-wrap ul.dash li .terms-box.circle-num li {padding-left: 0;}

/* 진료기록관리 */
/*.block-wrap:has(.template, .emr) { max-height: calc(100% - 125px);}*/
/*.block-wrap.emr-wrap { max-height: calc(100% - 120px);}*/
/*.block-wrap.emr-wrap { max-height: calc(100% - 149px);}*/
.block-wrap .template, .block-wrap .emr {display: flex; flex-direction: column; gap: 15px; width: calc(100% - 420px);}
.block-wrap .template .detail-table table, .block-wrap .emr .detail-table table {height: 100%;}
.block-wrap .emr {width: 400px;}
.block-wrap .emr .detail-table table {height: 100%;}
.block-wrap .emr .detail-table .text-count {height: 100%; min-height: 150px; max-width: 100%;}
.block-wrap .emr .detail-table .text-count .count {position: unset; top: unset; right: unset;}
.block-wrap .emr .detail-table .text-count textarea {min-height: 130px; height: 100%;}
.recode-title, .history-title {display: flex; gap: 5px; font-size: 14px; font-weight: 500; align-items: center; margin-bottom: 7px;}
.recode-title:before, .history-title:before {content: ''; width: 12px; height: 12px; background-color: #132058; mask-position: center left; -webkit-mask-position: center left; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 80% auto; -webkit-mask-size: 80% auto; mask-image: url('../images/icon/play.svg'); -webkit-mask-image: url('../images/icon/play.svg');}
.recode-wrap {display: flex; gap: 10px; margin: 10px 0; width: 100%;}
.recode-wrap .recode-input{display: flex; flex-direction: column; gap: 10px; min-width: 200px; max-width: 200px; flex-wrap: wrap;  position: relative;}
.recode-wrap .recode-input:after {content: ''; display: flex; width: 18px; height: 18px; background-image: url('../images/icon/search-alt.svg'); background-size: 100% auto; background-repeat: no-repeat; position: absolute; top: 7px; right: 10px; opacity: 0.3;}
.recode-wrap .recode-input:has(input:focus):after {display: none;}
.recode-wrap .recode-input input {min-width: auto; padding: 0 35px 0 10px !important; width: 100%;}
.recode-wrap .recode-input input:focus {padding: 0 10px !important;}
.recode-wrap .recode-view {display: flex; gap: 10px 10px; width: 100%; flex-wrap: wrap;}
.recode-wrap .recode-view span {display: inline-flex; padding: 6px 30px 5px 10px; border-radius: 5px; font-size: 12px; line-height: 1.6; background-color: #e1e8fa; min-width: calc(50% - 5px); min-height: 32px; color: #898989; gap: 7px; position: relative;}
.recode-wrap .recode-view button {display: flex; width: 18px; height: 18px; background-color: #898989; mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 80% auto; -webkit-mask-size: 80% auto; mask-image: url('../images/icon/cross-small.svg'); -webkit-mask-image: url('../images/icon/cross-small.svg'); justify-content: center; align-items: center; margin-top: 1px; position: absolute; top: 6px; right: 10px;}
.recode-wrap .recode-view span .tooltip .icon {padding: 0; min-width: 15px; min-height: 15px; margin-top: 3px;}
.recode-wrap .text-count {display: flex; max-width: calc(100% - 211px); width: 100%; min-height: auto; height: 116px; position: relative;}
.recode-wrap .text-count .count {position: absolute; top: -20px; right: 0;}
.recode-wrap .text-count textarea {min-height: 100%;}
.emr .recode-wrap {flex-direction: column; margin: 0; height: 100%;}
.emr .recode-wrap .surveyO {display: flex; flex-direction: column; gap: 10px; height: 100%;}
.emr .recode-wrap .recode-title{margin: 10px 0 0 0;}
.emr .recode-wrap .recode-title:first-of-type {margin: 0;}
.recode-title + ul {display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px;}
.block-wrap .template .detail-table table th, .block-wrap .emr .detail-table table th {font-size: 24px; text-align: center;}
.block-wrap .template .detail-table table th .btn {font-size: 12px; padding: 5px; line-height: 1; display: flex; margin-top: 5px; justify-content: center; align-items: center; width: 100%; font-weight: 500; padding-bottom: 7px; cursor: pointer;}
.block-wrap .template .detail-table table th .btn.disabled {cursor: not-allowed; border: solid 1px #ebebeb;}
#clinicRoundList {display: flex; flex-direction: column; width: 100%; }
.marker:after {content: '(권장)'; color: #395ad4; font-size: 11px; margin-left: 3px; font-weight: 600;}
.search-wrap .group input#clinicRound {min-width: 50px; max-width: 50px;}
.search-wrap .group input#clinicTime {min-width: 70px; max-width: 70px;}

/* 기록상세 */ 
.history-title {font-size: 15px; margin: 0 0 5px 0;}
.history-wrap {display: flex; flex-direction: column; width: 100%;  height: calc(100% - 43px); overflow: hidden;}
.history-box {border: solid 1px #cccccc; border-radius: 5px; padding: 20px; display: flex; flex-direction: column; height: 100%; width: 100%; overflow-y: auto; gap: 40px; line-height: 1.6;}
.history-box .history-list {display: flex; flex-direction: column; gap: 10px;}
.history-box .history-list + .history-list {padding-top: 40px; border-top: dashed 1px #cccccc;} 
.history-box .history-list .list-block, .history-box .history-list .list-block .survey-block {display: flex; flex-direction: column; gap: 5px;}
.history-box .history-list .list-block .survey-block {border: solid 1px #cccccc; border-radius: 5px; padding: 12px 15px; margin-left: 25px;}
.history-box .history-list .list-block .survey-block:first-of-type {margin-top: 5px;}
.history-box .history-list .list-block .survey-block + .survey-block {margin-top: 10px;}
.history-box .history-list strong {font-weight: 600; margin-bottom: 5px;}
.history-box .history-list span {display: flex; width: 100%;}
.history-box .history-list span b {font-weight: 500; min-width: 80px;}
.history-box .history-list span.column {display: flex; flex-direction: column; gap: 5px;}
.history-box .history-list span.column > b {min-width: auto; padding-left: 10px; margin-top: 10px;}
.history-box .history-list span.column > b:before {content: ''; width: 8px; height: 2px; border-radius: 10px; background-color: #333333; display: inline-flex; vertical-align: middle; margin-right: 5px; margin-top: -2px;}
.history-box .history-list span.column:first-of-type > b {margin-top: 0;}
.history-box .history-list span.column > span.column > span, .history-box .history-list span.column > span.memo {padding-left: 25px;}
.history-box .history-list span.memo {display: block; width: 100%; white-space: pre-wrap; word-break: break-all;}
.history-box + .btn-wrap {margin-top: 15px;}

/* 서브페이지 */
.detail-wrap {display: flex; flex-direction: column; gap: 15px; width: 100%;}

/* 환자정보 관리 */
.layer-wrap[data-layer-wrap='patientDetail'] {max-width: 500px; width: 100%;}
.layer-content.patient {gap: 10px;}

/* 회원가입 */
.layer-wrap[data-layer-wrap='userJoin'] input { width: 100%;}

/* 마이페이지 */
.layer-wrap[data-layer-wrap='mypage'] {max-width: 500px; width: 100%;}
.layer-wrap[data-layer-wrap='mypage'] input {min-width: 100%;}

/* 설문지 */
body:has(.survey-wrap) {background-color: #f2f6fc; padding: 20px; overflow-y: auto;}
.survey-wrap {display: flex; width: 100%; min-height: 100%; flex-direction: column; gap: 15px; background-color: #ffffff; border-radius: 5px; padding: 30px 20px; position: relative;}
.survey-wrap .survey-title {font-size: 22px; font-weight: bold; text-align: center; line-height:3; color: #132058;}
.survey-wrap .survey-title.sub{
	font-size: 16px;
    text-align: left;
    padding: 5px 10px;
    border-radius: 5px;
    color: #000000;
    font-weight: bold;
    line-height: 1.4;
    margin: 10px 0;
}
.survey-wrap .survey-info {font-size: 13px; padding: 15px 0; font-weight: 200;line-height: 1.4; text-align: center;}
.survey-wrap .survey-info.sub {text-align: justify; border: solid 1px #ff9200; padding: 6px; border-radius: 5px; margin:10px; color: #000000; max-height: 200px; overflow-y: auto; background-color: #fff5e6;  font-weight: 500;}
.survey-wrap .question-wrap {padding: 10px 20px; display: flex; flex-direction: column; gap: 5px;border: 1px solid #ddd;border-radius: 10px; }
.survey-wrap .question-wrap .question {display: flex; flex-direction: column;}

/* 설문지 질문아래 선*/
.question-line{
    border: 1px solid #ddd;
    margin-bottom: 35px;
    margin-top: 20px;
}
.survey-wrap .question-title {line-height: 1.6; font-weight: bold; color:#000; font-size:13px; margin: 15px 0;}
.survey-wrap .survey-info.question {
background-color: #f3f3f3;padding: 10px;border-radius: 5px;color: #000;max-height: 100px;overflow-y: auto;border: none;font-weight: 400;text-align: justify;margin-top: 10px;font-size:13px;}
.survey-wrap .survey-result {display: flex; flex-direction: column; gap: 15px; margin-top: 20px;}
.survey-wrap .result-title {font-size: 18px; font-weight: 600;}
.survey-wrap .survey-result table {table-layout: fixed; border-top: solid 1px #cccccc; border-bottom: solid 1px #cccccc;}
.survey-wrap .survey-result table th, .survey-wrap .survey-result table td {padding: 5px 10px; vertical-align: middle; line-height: 1.6;}
.survey-wrap .survey-result table th {font-weight: 500; padding: 5px 20px;}
.survey-wrap .survey-result table td:has(input) {vertical-align: top;}
.survey-wrap .survey-result table tbody tr {border-top: dashed 1px #cccccc; background-color: #ffffff;}
.survey-wrap .survey-result table tbody tr:first-of-type {border-top: none;}
.survey-wrap .survey-result table tfoot tr {background-color: #f2f8fb; border-top: solid 1px #cccccc; border-bottom: solid 1px #cccccc;}
.survey-wrap .survey-result input {text-align: right; width: 100%;}
.survey-wrap .question-wrap .question-text textarea {min-height: 62px;margin-top: 10px;margin-bottom: 10px;}
.survey-wrap .question-wrap .question-text textarea::placeholder {color: #cccccc;}
.survey-wrap .question-wrap .check-wrap {gap: 10px 25px;  font-size:13px;}
.survey-wrap .question-wrap .check-wrap .text {display: flex; min-width: 25px;}
.survey-wrap .survey-info + .question-wrap {margin-top: 0;background-color: #fff; border-top: 1px solid #cdcdcd;}
.survey-wrap .survey-title.sub + .question-wrap {margin-top: 0px;}
.tablet-main {background-image: url(../images/background/health.png); background-repeat: no-repeat; background-size: 150px auto; background-position: center 30px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 250px; padding: 0 0 40px 0; border: solid 1px #cccccc; border-left: none; border-right: none;}
.tablet-main p {font-size: 18px; font-weight: 500;}
.tablet-survey { display: block; width: 100%; height: calc(100% - 55px);}
.survey-wrap .survey-image {display: flex; flex-direction: column; justify-content: center; align-items: center;}
.survey-wrap .survey-image img {max-width: 100%;}
.check-block {display: flex; align-items: center; gap: 7px;}
.check-block .tooltip span.icon {margin-top: 1px;}

@media screen and (max-width: 1730px) {
	.block-wrap:has(.template, .emr) {max-height: calc(100% - 124px);}
	.block-wrap.emr-wrap {max-height: 100%;}
}
@media screen and (max-width: 1700px) {
	.recode-wrap{flex-direction: column;}
	.recode-wrap .recode-input {max-width: 100%;}
	.recode-wrap .text-count {max-width: 100%; height: auto;}
	.recode-wrap .text-count .count {position: unset; top: unset; right: unset;}
	.recode-wrap .text-count textarea {min-height: 120px;}
}
@media screen and (max-width: 1024px) {
	#clinicSelectChart {max-width: 90%; width: 100%;}
}

#member .search-wrap .group > span {min-width: 56px;}

.section .tree-wrap.survey {width: 100%;}

/* 사인 */
.layer-content .content-terms .terms-wrap {padding: 15px; height: 30vh; overflow-y: auto;} 
.layer-content .content-terms .terms-wrap + .check-wrap {margin-top: 10px; justify-content: flex-end;}
.sign-wrap { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; width: 100%; max-width: 400px; margin: 0 auto;}
.sign-wrap .sign-title {font-size: 16px; font-weight: 500; margin: 10px 0 5px 0; text-align: center; width: 100%;}
.sign-wrap .sign-box {width: 400px; height: 200px; border:1px solid #cccccc; display: flex; border-radius: 5px;}
.sign-wrap .sign-btn {font-size: 12px; border: solid 1px #cdcdcd; border-radius: 5px; display: inline-flex; justify-content: center; align-items: center; padding: 5px 10px; font-weight: 500;}
.sign-wrap .sign-btn:before {content:''; width: 12px; height: 12px; background-position: center center; background-repeat: no-repeat; background-size: 100% auto; background-image: url('../images/icon/refresh.svg'); margin-right: 5px;}

/* 설문지 관리 */
/* .tree-wrap.manage.survey {height: 100%; min-height: auto; border: solid 1px #cccccc; padding: 20px; border-radius: 5px;} */
.tree-wrap.manage.survey ul ul .tree-title {padding: 5px 0 5px 25px;}
.tree-wrap.manage.survey ul ul li.last .tree-title b:before {background-image: url('../images/icon/arrows-alt-v.svg'); width: 18px; height: 18px; border: solid 1px #cdcdcd; background-color: #ffffff; background-position: center center; left: -25px; border-radius: 3px;}
.tree-wrap.manage.survey .tree-title b {word-break: keep-all;}
.tree-wrap.manage.survey .tree-title + ul + .add-survey{display: none; margin: 5px 0 10px 0; width: 100%; padding: 0 5px 0 12px; flex-direction: column; gap: 3px;}
.tree-wrap.manage.survey .tree-title.open + ul + .add-survey, .tree-wrap.manage .tree-title.active + ul + .add-survey{display: flex;}
button.delete {display: inline-flex; width: 18px; height: 18px; justify-content: center; align-items: center; vertical-align: middle; border: solid 1px #cdcdcd; border-radius: 3px; background-color: #ffffff; margin-top: -1px;}
button.delete:before {content: ''; display: flex; width: 100%; height: 100%; background-color: red; mask-position: calc(50% + 0.7px) center; -webkit-mask-position: calc(50% + 0.7px) center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 80% auto; -webkit-mask-size: 80% auto; mask-image: url('../images/icon/cross-small.svg'); -webkit-mask-image: url('../images/icon/cross-small.svg');}
.add-wrap {display: flex; gap: 7px; align-items: center;}
.add-wrap .auto-input {width: calc(100% - 69px);} 
.add-wrap .auto-input input {width: 100%;} 
.add-wrap .add-btn {padding: 5px 10px; border-radius: 5px; color: #ffffff; background-color: #132058; min-width: 62px; height: 32px; display: flex; justify-content: center; align-items: center; font-weight: 500; font-size: 12px;}
.manage-detail {display: flex; flex-direction: column; max-height: 100%; overflow-y: auto; border-top: solid 1px #cdcdcd;  padding: 10px;}
.manage-detail .manage-title {font-size: 16px; font-weight: 500; display: flex; width: 100%; align-items: center;}
.manage-detail .manage-title:first-of-type {margin-top: 0;}
.manage-detail .manage-title:before {content: ''; display: flex; width: 20px; height: 20px; background-color: #132058; mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 80% auto; -webkit-mask-size: 80% auto; mask-image: url('../images/icon/comment-pen.svg'); -webkit-mask-image: url('../images/icon/comment-pen.svg'); margin-right: 5px;}
.manage-detail .manage-title.essential:after {margin-top: 3px;}
.manage-detail .auto-input {display: flex; max-width: 250px;}
.manage-detail .type-select {display: flex; gap: 10px;}
.manage-detail .type-select input[type=radio], .manage-detail .type-select input[type="radio"] + label::before, .manage-detail .type-select input[type="radio"] + label::after {display: none;}
.manage-detail .type-select input[type=radio] + label{display: flex; cursor: pointer; padding: 7px 15px; border: 1px solid #cccccc; font-weight: 500; border-radius: 5px; min-width: 90px; align-items: center; justify-content: center;}
.manage-detail .type-select input[type=radio]:checked + label{background-color: #395ad4; color: #fff; border-color: #395ad4;}
.manage-detail .auto-input input {width: 100%;}
.manage-detail input {width: 100%; min-height: 32px;}
.manage-detail .manage-block {margin-top: 15px; padding: 20px 0px; border-top: dashed 1px #cdcdcd;display: flex; flex-direction: column; gap: 15px;}
.manage-detail .manage-block .manage-title {font-size: 15px; position: relative;}
.manage-detail .manage-block .manage-title:before {width: 12px; height: 12px; mask-image: url(../images/icon/play.svg); -webkit-mask-image: url(../images/icon/play.svg);}
.manage-detail .manage-block .manage-title .radio-wrap {gap: 10px;}
.manage-detail .manage-block .manage-title .radio-wrap input[type="radio"] + label.text {padding-left: 25px;}
.manage-detail .manage-block .manage-title .radio-wrap input[type="radio"]:last-of-type + label.text {margin-right: 0;}
.manage-detail .manage-block .question-list { padding: 15px; list-style: auto; list-style-position: inside; background-color: #f3f3f3; border-radius: 5px; display: flex; flex-direction: column; gap: 20px;}
.manage-detail .manage-block .question-list li {padding-top: 10px; border-top: dashed 1px #cdcdcd; display: flex; flex-direction: column; gap: 10px;}
.manage-detail .manage-block .question-list li:first-of-type {padding: 0px; border-top: none;}
.manage-detail .manage-block .question-list .manage-title {font-size: 14px; display: inline-flex; width: 100%; max-width: calc(100% - 20px);}
.manage-detail .manage-block .question-list .manage-title:before {display: none;}
.manage-detail .manage-block .question-list .answer-list li {display: flex; flex-direction: column; gap: 10px;}
.manage-detail .manage-block .question-list .answer-list li .answer {display: flex; gap: 10px;}
.manage-detail .manage-block .question-list .answer-list li .answer span:not(.hidden) {display: flex; min-width: 62px; align-items: center; font-weight: 500;}
.manage-detail .manage-block .question-list .answer-list li .answer input:last-of-type{max-width: 100px;}
.manage-detail .manage-block .question-list .answer-list li .answer button {justify-content: flex-end !important;position: relative; top: auto; right: auto; transform: unset; display: inline-flex; min-width: 32px; height: 32px; justify-content: center; align-items: center; vertical-align: middle; border: solid 1px #cdcdcd; border-radius: 5px; background-color: #ffffff; margin-top: -1px;}
.manage-detail .manage-block .question-list .answer-list li .answer button.add:before {content: ''; display: flex; width: 100%; height: 100%; background-color: #132058; mask-position: calc(50% + 0.7px) center; -webkit-mask-position: calc(50% + 0.7px) center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-image: url(../images/icon/plus-small.svg); -webkit-mask-image: url(../images/icon/plus-small.svg); mask-size: 80% auto; -webkit-mask-size: 80% auto;}
.manage-detail .manage-block button.delete {width: 32px; height: 32px; position: absolute; top: 50%; right: 0; transform: translateY(-50%); mask-size: 60% auto; -webkit-mask-size: 60% auto;}
.manage-detail .manage-block button.delete:before {mask-size: 60% auto; -webkit-mask-size: 60% auto;}
.manage-detail .manage-block .add-btn {display: flex; border: solid 1px #ececec; width: 100%; height: 42px; border-radius: 5px; justify-content: center; align-items: center; font-weight: 500; background-color: #f3f3f3;}
.manage-detail .manage-block .add-btn:before {content: ''; display: flex; width: 20px; height: 20px; background-color: #132058; mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 80% auto; -webkit-mask-size: 80% auto; mask-image: url(../images/icon/square-plus.svg); -webkit-mask-image: url(../images/icon/square-plus.svg); margin-right: 7px;}

/* 이미지 업로드 */
.file-box {display: flex; gap: 10px;}
.file-box .group {display: flex; flex-direction: column; gap: 10px;}
.file-box .group .btn {padding: 0 15px; font-weight: 500; height: 32px; line-height: 1; min-width: 82px; font-size: 12px;}
.file-box input[type="file"] {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.file-box label {display: flex; width: 100px; height: 100px; border: 1px solid #ececec; background-color: #f3f3f3; border-radius: 5px; justify-content: center; align-items: center; cursor: pointer; text-align: center; line-height: 1.4; padding: 5px; word-break: keep-all; font-weight: 500; flex-direction: column; gap: 10px; font-size: 12px;}
.file-box label:before {content: ''; display: flex; width: 25px; height: 25px; background-color: #395ad4; mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100% auto; -webkit-mask-size: 100% auto; mask-image: url(../images/icon/square-plus.svg); -webkit-mask-image: url(../images/icon/square-plus.svg);}
.file-box .upload-name {display: inline-block; padding: .5em .75em; font-size: 12px; font-family: inherit; line-height: normal; vertical-align: middle; border: none !important; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.file-box .preview-wrap {position: relative; border: solid 1px #cdcdcd; width: 100%; min-height: 200px; max-height: 555px; overflow-y: auto; border-radius: 5px; padding: 15px;}
.file-box .preview-wrap p {position: absolute; top: 50%; left: 0; text-align: center; width: 100%; transform: translateY(-50%);}
.file-box .preview-list{display: flex; flex-wrap: wrap; gap: 20px; width: 100%;}
.file-box .preview-list li{position: relative; cursor: move; max-width: calc(25% - 15px);}
.file-box .preview-list li:before {content: ''; display: flex; background-image: url('../images/icon/arrows-alt.svg'); width: 32px; height: 32px; border: solid 1px #cdcdcd; background-color: #ffffff; background-position: center center; border-radius: 3px; position: absolute; top: 0; left: 0; background-size: 15px auto; background-repeat: no-repeat;}
.file-box .preview-list li img {max-width: 100%; max-height: 100%; display: flex; justify-content: center;}
.file-box .preview-list li button.delete {top: 0; transform: unset;}
.file-box .preview-list li .file-name {overflow: hidden; text-overflow: ellipsis; display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; width: 100%; line-height: 1.4; word-break: break-all; margin-top: 5px; text-align: center;}
 
 /* EMR 관리 */
.tree-wrap.manage.emr, .tree-wrap.manage.cpg {height: 100%; min-height: auto; border: solid 1px #cccccc; padding: 10px; border-radius: 5px; overflow-y: auto;}
.tree-wrap.emr > ul, .tree-wrap.cpg > ul {gap: 20px; display: flex; flex-direction: column;}
.tree-wrap.emr ul ul {padding-left: 15px;}
.tree-wrap.emr .tree-box, .tree-wrap.cpg .tree-box {margin: 0; gap: 0;}
.tree-wrap.emr .tree-box .tree-box, .tree-wrap.cpg .tree-box .tree-box {margin: 5px 0;}
.tree-wrap.emr button, .tree-wrap.cpg button {position: relative; top: auto; right: auto; transform: unset; display: inline-flex; min-width: 26px; height: 26px; justify-content: center; align-items: center; vertical-align: middle; border: solid 1px #cdcdcd; border-radius: 3px; background-color: #ffffff; margin-top: -1px;}
.tree-wrap.emr button.add:before, .tree-wrap.cpg button.add:before {content: ''; display: flex; width: 100%; height: 100%; background-color: #395ad4; mask-position: calc(50% + 0.7px) center; -webkit-mask-position: calc(50% + 0.7px) center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-image: url(../images/icon/plus-small.svg); -webkit-mask-image: url(../images/icon/plus-small.svg); mask-size: 80% auto; -webkit-mask-size: 80% auto;}
.tree-wrap.emr button.delete:before, .tree-wrap.cpg button.delete:before {mask-size: 60% auto; -webkit-mask-size: 60% auto;}
.tree-wrap.emr button.edit:before, .tree-wrap.cpg button.edit:before {content: ''; display: flex; width: 100%; height: 100%; background-color: #333333; mask-position: center center; -webkit-mask-position: center center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-image: url(../images/icon/settings.svg); -webkit-mask-image: url(../images/icon/settings.svg); mask-size: 50% auto; -webkit-mask-size: 50% auto;}
.tree-wrap.emr .tree-box .tree-title, .tree-wrap.cpg .tree-box .tree-title {display: inline-flex; gap: 7px; align-items: center; padding: 5px 0 5px 50px;}
.tree-wrap.cpg .tree-box .tree-title {padding-left: 40px;}
.tree-wrap.emr .tree-box .tree-title b:before, .tree-wrap.cpg .tree-box .tree-title b:before {left: -50px;}
.tree-wrap.emr .tree-box .last .tree-title b:before, .tree-wrap.cpg .tree-box .last .tree-title b:before {display: none;}
.tree-wrap.emr .tree-box .tree-title b:after, .tree-wrap.cpg .tree-box .tree-title b:after {content: ''; position: absolute; top: -1px; left: -30px; width: 22px; height: 22px; background-image: url(../images/icon/arrows-alt-v.svg); background-color: #ffffff; background-position: center center; background-size: 10px auto; background-repeat: no-repeat; border: solid 1px #cdcdcd; border-radius: 3px;}

.tree-wrap.emr .tree-box .tree-title b.none:after, 
.tree-wrap.cpg .tree-box .tree-title b.none:after{
content: ''; display:none;
}
.tree-wrap.emr .tree-box .tree-title b.none:before, 
.tree-wrap.cpg .tree-box .tree-title b.none:before{
left:-20px;
}

.tree-wrap.emr .tree-box .tree-title.none, 
.tree-wrap.cpg .tree-box .tree-title.none{
padding: 5px 0 5px 20px;	
}

.detail-table.manage .recode-wrap {margin: 0; flex-direction: column;}
.detail-table.manage .recode-wrap .group {display: flex; gap: 10px;}
.detail-table.manage .recode-wrap .group .recode-input {width: 100%; max-width: 100%;}
.detail-table.manage .recode-wrap .group .btn {width: 100px;}
.detail-table.manage .recode-wrap .recode-view {border-top: solid 1px #cdcdcd; border-bottom: solid 1px #cdcdcd; min-height: 150px; padding: 0; flex-direction: column; gap: 0; max-height: 410px; flex-wrap: nowrap; overflow-y: auto; padding: 0 10px;}
.detail-table.manage .recode-wrap .recode-view > div {width: 100%; display: flex; gap: 10px; padding: 10px 0; border-top: dashed 1px #cdcdcd; justify-content: space-between;}
.detail-table.manage .recode-wrap .recode-view > div:first-of-type {border-top: none;}
.detail-table.manage .recode-wrap .recode-view > div span {height: fit-content; min-width: auto; width: 100%; max-width: 240px;}
.detail-table.manage .recode-wrap .recode-view > div span b {word-break: break-all;}
.detail-table.manage .recode-wrap .recode-view > div textarea {max-width: calc(100% - 250px); min-height: 62px;}
.description-wrap {display: flex; flex-direction: column; gap: 5px; margin-top: 10px;}
.description-wrap p {display: flex; gap: 5px; font-size: 12px;}
.description-wrap p b {color: #555555;}
.description-wrap span b {color: #333333; font-weight: 500;} 

/* CPG 질병 관리 */
.detail-table.manage .recode-wrap .recode-view.template {padding: 0; border: solid 1px #cdcdcd; border-radius: 5px; overflow: hidden; overflow-y: auto;}
.detail-table.manage .recode-wrap .recode-view.template span {border-radius: 0; background: none; border-bottom: dashed 1px #cdcdcd; color: #333333; min-width: auto; min-height: auto;}
.detail-table.manage .recode-wrap .recode-view.template span:last-of-type {border: none;}
.detail-table.manage .recode-wrap .recode-view.template span b {display: flex; word-break: break-all;}
.detail-table.manage .tab-button button {width: 100px; justify-content: center;}
.detail-table.manage .tab-content {margin-top: 10px;}
.detail-table.manage .tab-content .recode-view {min-height: 400px; max-height: 400px;}
.detail-table.manage .recode-wrap .tree-wrap.cpg {padding: 5px; min-height: 200px; max-height: 200px; overflow: hidden; overflow-y: auto;}
.detail-table.manage .recode-wrap .tree-wrap.cpg li {max-width: fit-content;}
.detail-table.manage .recode-wrap .tree-wrap.cpg .tree-title {position: relative; padding-right: 40px;}
.detail-table.manage .recode-wrap .tree-wrap.cpg .tree-title b {display: flex; word-break: break-all;}
.detail-table.manage .recode-wrap .tree-wrap.cpg .tree-title button {margin: 0; position: absolute; top: 2px; right: 5px;}

/* 시각화 */
.section-wrap .section.list .block-wrap {max-height: calc(100% - 40px);}
.chart-wrap {display: flex; gap: 20px; flex-wrap: wrap; width: 100%;}
.chart-wrap .chart-block, .chart-wrap .chart-block .group, .list-wrap.column {display: flex; flex-direction: column; gap: 15px; width: 100%;}
.chart-wrap .chart-block.triple {width: calc(33.333% - 13.4px);}
.chart-wrap .chart-block.double {width: calc(50% - 10px);}
.chart-wrap .chart-block canvas {width: 100%; height: 100%;}
.chart-wrap .chart-slider {display: flex; align-items: center; padding-right: 15px;}
.chart-wrap .chart-slider h6 {font-weight: 600; width: 90px;}
.chart-wrap .chart-slider span {width: 90px; margin-right: 20px; color: #395ad4; font-weight: 500;}
.chart-wrap .chart-slider .ui-slider {width: 100%; height: 15px; border-radius: 10px;}
.chart-wrap .chart-slider .ui-slider .ui-widget-header {background-color: #395ad4;}
.chart-wrap .chart-slider .ui-slider .ui-state-default {width: 28px; height: 28px; border-radius: 100%; top: 50%; transform: translateY(-50%); background-color: #ffffff;}
.list-wrap .list-table select {width: 100%;}
.title-group {display: flex; justify-content: space-between;}
.title-group .title-tab {display: flex; align-items: center; gap: 5px;}
.title-group .title-tab .btn {padding: 5px 15px 6px 15px; font-size: 12px; border: solid 1px #395ad4; color: #395ad4; background-color: #ffffff; font-weight: 500;}
.title-group .title-tab .btn.on {background-color: #395ad4; color: #ffffff; font-weight: 400;}
.title-group .title-tab .datepicker {width: 130px;}
.search-wrap.statistics {flex-wrap: wrap; margin-bottom: 20px;}
.search-wrap.statistics .group > span {min-width: fit-content;}
.search-wrap.statistics .datepicker-wrap {display: flex; align-items: center; gap: 10px;}
.noData {display: flex; position: relative; justify-content: center;}
.noData img {width: 100%; max-width: 1400px;}
.noData p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 28px; font-weight: 500;}
.section-title .list-count {margin: 0;}
.chart-wrap .chart-block .group.title {flex-direction: row; justify-content: space-between;}
.chart-wrap .chart-block .group.title select {min-width: 92px;}
.chart-wrap .chart-block + .chart-block {margin-top: 20px; padding-bottom: 20px;}
.chart-wrap .chart-block + .chart-block.double, .chart-wrap .chart-block + .chart-block.triple {margin:0; padding: 0;}
.chart-wrap .chart-block.dashed {border-bottom: dashed 1px #cccccc; padding-bottom: 60px; margin-bottom: 20px;}
.noData-chart {display: flex; position: absolute; top: 0; left: 0; width: 100%; height: 100%; justify-content: center; align-items: center; background: rgba(255,255,255,0.7); font-size: 18px; font-weight: 500;}
.canvas-wrap {position: relative; padding-bottom: 15px; overflow: hidden; overflow-x: auto;}
.canvas-wrap .canvas {height: 360px;}

/* Fhir HR7 */
.code-wrap {display: flex; flex-direction: column; gap: 10px; margin-top: 10px;}
.code-wrap:first-of-type {margin-top: 0;}
.code-box {border: solid 1px #e9e9e9; border-radius: 5px; background-color: rgba(57, 90, 212, 0.1); padding: 15px 20px; overflow-y: auto; min-height: 100px; white-space: pre; margin-left: 15px; line-height: 1.6;}