@charset "utf-8";

/* namo editor */
.ui-widget{font-family:'MalgunGothic',Arial,sans-serif,Verdana, Helvetica; font-size:12px}
.form_area{margin-left:0; margin-top:0; font-family:'MalgunGothic',Arial,sans-serif,Verdana, Helvetica; font-size:12px}
.slick-header-columns{border-bottom:none}
.slick-header.ui-state-default,
.slick-headerrow.ui-state-default{border-left:1px solid #d3d3d3; border-bottom:none}
.slick-header-column.ui-state-default{display:flex !important; height:auto; height:30px !important; padding:10px !important; background:#fff; font-size:12px; font-weight:600; line-height:0px !important; align-items:center; justify-content:flex-start}
.ui-state-default.slick-header-column:nth-child(1){width:30px !important; justify-content:center}
.slick-cell-checkboxsel{display:flex; width:30px !important; align-items:center; justify-content:center}
.slick-header-column:hover,
.slick-header-column-active{background:#fff !important}
.slick-cell, .slick-headerrow-column{font-size:12px}
.slick-viewport .slick-grid-transfer-status{padding:0 20px; text-align:right !important}
.slick-viewport{border:1px solid #ddd; overflow-x:hidden !important}
.form_area input[type="button"]{border-color:#ccc !important; cursor:pointer}
.form_area > div {background:#fff !important; border:1px solid #ccc !important}
.form_area > div > div:nth-child(2){position:relative; z-index:-999}
.grid-canvas {background:#fff}
.monitorBgLayer {position:fixed !important}
.monitorLayer .ui-state-default.slick-header-column:nth-child(1){content:''; width:387px !important; justify-content:flex-start}
.monitorLayer input[type="button"]{border-color:#ccc !important; cursor:pointer}
.monitorLayer > div:nth-child(1){background:#50545c !important}
.monitorLayer .grid-canvas{background:#fff}
.monitorLayer input[type="checkbox"]{float:left}
.monitorLayer input[type="checkbox"] + span{position:relative; top:20px; left:5px}
.monitorLayer .slick-cell{padding-left:10px}


/* autocomplete */
.ui-autocompleteExt{position:absolute; max-height:240px; padding:5px; border:1px solid #808080; font-size:12px; color:#303030; overflow:hidden; overflow-y:auto; box-sizing:border-box; z-index:1200; background:#fff}
.ui-autocompleteExt .ui-menu-item-wrapper{padding:3px 5px; border:1px solid #fff; line-height:125%; word-wrap:break-all; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; cursor:pointer; }
.ui-autocompleteExt .ui-menu-item-wrapper:hover{border:1px solid #ccc}
.ui-autocompleteExt .ui-menu-item-wrapper.ui-state-active {border: 1px solid rgb(37, 119, 218);background: #007fff;	 font-weight: normal;color: #ffffff;}
.Autocomplete .Autocomplete-textinput:hover,
.Autocomplete .Autocomplete-textinput:focus,
.Autocomplete .Autocomplete-textinput:active{border:1px solid #808080}



/* ========================================================================================== */
/* jqx
/* ========================================================================================== */
.ml-grid .jqx-fill-state-normal{border-color:transparent; background:#ccc; border-radius: 50px}

/* ========================================================================================== */
/* dhx
/* ========================================================================================== */
/* dhx_diagram  */
.dhx_diagram{background:#fff !important}
.dhx_diagram .dhx_icon-container{top:12px !important}
.dhx_diagram .dhx_icon-container i{vertical-align:top}

/* dhx_chart  */
.dhx_chart .scale-text,
.dhx_chart .legend-text{font-size:12px !important}
.dhx_chart .pie-value{font-size:12px !important}
.dhx_chart .dhx_chart-graph_area{fill:#fff}
.dhx_chart.grid-line{stroke-width:0}
.dhx_chart .donut-value-title{font-size:12px}


/* ========================================================================================== */
/* Fileupload
/* ========================================================================================== */
.Fileupload{margin-top:5px; overflow:hidden}
.Fileupload:after{content:''; display:block; clear:both}
.Fileupload button{margin-right:0}

/* Fileupload cmm */
.Fileupload .preview-img{margin-left:0; margin-right:3px}
.Fileupload .multifile-text > a > span{display:inline-block; text-decoration:underline; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle; overflow:hidden}

/* Fileupload multi */
.Fileupload.multi .fileupload-box{margin-top:5px}
.Fileupload.multi .preview-container{margin-top:0; border-color:#eaeaea; border-radius: 8px}
.Fileupload.multi .preview-biztp{display:inline-block; width:180px}
@media all and (max-width:1640px)
{
	.Fileupload.multi .preview-biztp{width:140px}
	.Fileupload.multi .multifile-text > a > span{max-width:400px}
}
@media all and (max-width:1400px)
{
	.Fileupload.multi .preview-biztp{width:120px}
	.Fileupload.multi .multifile-text > a > span{max-width:300px}
}
@media all and (max-width:1300px)
{
	.Fileupload.multi .preview-biztp{width:100px}
	.Fileupload.multi .multifile-text > a > span{max-width:200px}
}

/* Fileupload down */
.Fileupload.multi.down .preview-container{float:left; width:100%; margin-top:5px}

/* Fileupload single */
.Fileupload.single{margin-top:0}
.Fileupload.single .fileupload-box,
.Fileupload.single .preview-container{margin-top:0}
.Fileupload.single .preview-biztp{display:inline-block; width:180px}
@media all and (max-width:1640px)
{
	.Fileupload.single .preview-biztp{width:140px}
	.Fileupload.single .multifile-text > a > span{max-width:400px}
}
@media all and (max-width:1400px)
{
	.Fileupload.single .preview-biztp{width:120px}
	.Fileupload.single .multifile-text > a > span{max-width:300px}
}
@media all and (max-width:1300px)
{
	.Fileupload.single .preview-biztp{width:100px}
	.Fileupload.single .multifile-text > a > span{max-width:200px}
}
.preview-list{margin:2px 0}





/* **************************************** *
*  fileUpA
* **************************************** */


.FileComp .stitL.flex-col{align-items:flex-start}
.draw-list{border:1px solid #eaeaea; /*padding:8px 0px;*/}
.draw-list ul li{display:flex; align-items:center; justify-content:space-between; padding:6px 12px; border-left:2px solid transparent}
.draw-list ul li:hover{background:#fafafa; border-color: #5629ee}

.draw-list ul li .draw-txt{font-size: 14px; color:#777; letter-spacing: -0.5px; flex:1 0 auto;}
.draw-list ul li .draw-txt.file-size{font-size: 1.4rem; color:#999; margin-left: 8px; text-align:right; width:80px}
.draw-list ul li .draw-txt.file-rev{text-align: right; padding:0px 24px; min-width: 160px; width:160px}
.draw-list ul li .draw-txt.file-rev .signal-color{text-align: left;}
.draw-list ul li .draw-txt.file-rev .signal-color .cont-txt{min-width: 54px;}
.draw-list ul li .draw-txt.name{overflow:hidden; text-overflow: ellipsis; white-space:nowrap; text-align: center; width:200px; max-width: 200px;}
.draw-list ul li .draw-txt.date{width:160px; max-width: 160px; text-align: right;}

/* .draw-list ul li label{min-width: 60%;}*/

.draw-list.columnBox ul li .ImageCheckbox{display:inline-flex; margin-right: 4px; flex:none; width: 32px}
.draw-list.columnBox ul li .ImageCheckbox > .Checkbox{flex:none}
.draw-list.columnBox ul li .ImageCheckbox span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:100%;}


.draw-list.columnBox ul li .ImageCheckbox .Label-color{flex:none}
.draw-list.columnBox ul li .option_btn{font-size:24px; margin-left:24px; width: 53px; flex:none; display:flex; }
.draw-list.columnBox ul li .option_btn .Button{display:inline-flex; align-items:center; justify-content:center; border-radius: 4px; vertical-align:middle; height:30px; padding:0px 6px; flex:none; font-size: 13px; border-color: #e5e5e5;}
.draw-list.columnBox ul li .option_btn .Button.only-ico{min-width: 30px; background:#f5f2ff; color:#5629ee; border:none;}
.draw-list.columnBox ul li .option_btn .Button.del-btn{min-width: 30px; background:#ffe9f3; color:#fa167c; border:none}
.draw-list.columnBox ul li .option_btn .Button i{font-size:18px}
.draw-list.columnBox ul li .option_btn.Groupbutton .Button:last-child{margin-right: 7px;}



/* fileUpA */
.draw-list .inform-ty1{width:calc(100% - 16px); border:1px dotted #bac8ff; background:#dce3ff0f; height:100%; margin:0 auto; border-radius: 4px; box-sizing: border-box; display:flex; align-items: center; justify-content:center; text-align: center; }
.draw-list .inform-ty1:hover{border-color:#3159ff; background:#a9baff0f}
.draw-list .inform-ty1 p{letter-spacing:-0.5px; font-size:15px; color:#555; position:relative;}
.draw-list .inform-ty1 p:before{content:"\f24d"; font-family:"remixicon"; font-size: 24px; position:absolute; top:-4px; left:-32px; color:#6685e6}
.draw-list.columnBox{padding:0px; border-radius:0px;}
.draw-list .file-list{flex:none; overflow: auto; height:100%}
.draw-list .file-preview{border-top: 1px solid #e9e9e9; width: 100%; height:600px; display:flex; flex-direction:column}
.draw-list .file-preview .stitArea{background:#fbfbfb; padding:12px 2px; margin-bottom:0px; border-bottom: 1px solid #eee;}
.draw-list .file-preview .stitArea .stitL span.label{letter-spacing: -0.6px; margin-left: 14px; color:#444}
.draw-list .file-preview .stitArea .stitR Button.Button{border:0; background:#dedede; color:#fff; min-width:22px; height:22px}
.draw-list .file-preview .stitArea .stitR Button.Button i{font-size: 16px; vertical-align:baseline}
.FileComp .file-preview{border: 1px solid #e9e9e9; border-top:0; width: 100%; height:600px; display:flex; flex-direction:column}
.FileComp .file-preview .stitArea{background:#fbfbfb; padding:12px 8px; margin-bottom:0px; border-bottom: 1px solid #eee;}
.FileComp .file-preview .stitArea .stitL span.label{letter-spacing: -0.6px; margin-left: 14px; color:#444}
.FileComp .file-preview .stitArea .stitR Button.Button{border:0; background:#dedede; color:#fff; min-width:22px; height:22px}
.FileComp .file-preview .stitArea .stitR Button.Button i{font-size: 16px; vertical-align:baseline}

/* fileUpB */
.fileUpB .draw-list ul li .draw-txt.file-rev{width:100px; max-width: 100px; min-width: 100px;}
.fileUpB .draw-list ul li .draw-txt.name{width:100px; max-width: 100px;}
.fileUpB .draw-list ul li .draw-txt.date{width:140px; max-width: 140px; text-align:right}
.fileUpB .draw-list.columnBox ul li .option_btn{max-width: 90px; width:80px}


/* fileDnA" */
.draw-list .inform-ty2{width:calc(100% - 16px); height:100%; margin:0 auto; display:flex; align-items: center; justify-content:center; text-align: center; }
.draw-list .inform-ty2 p{letter-spacing:-0.5px; font-size:14px; color:#777; position:relative;}
.draw-list .inform-ty2 p:before{content:"\F0A4B"; font-family:"Material Design Icons"; font-size: 22px; position:absolute; top:-4px; left:-32px; color:#979797}


/* 도면 파일 fileList 라벨 스타일 */
.draw-list > ul > li .ImageCheckbox{min-width:20px}
.draw-list > ul > li > .Label-color{min-width:42px}
.draw-list > ul > li > .Label-color .cont-txt{white-space:nowrap !important}
.draw-list > ul > li > .draw_tit{white-space:nowrap; text-overflow:ellipsis; overflow:hidden; width:100%; line-height: 1.5; font-size: 1.6rem}
/*.layerpop-box .draw-list > ul > li .draw_tit{width:100%; min-width:270px}*/


/* 파일업로드 */
.file-loader{position:absolute; left:42vw; top:40vh; z-index: 9999; background:#fff; width: 400px; min-height:94px; height:auto; padding:16px; border-radius: 15px; box-shadow: 0px 0px 10px #00000030;}
.file-loader .stitL{flex-direction:column; align-items:flex-start; width:100%; word-break:break-all;}
.file-loader .stitL span{margin-right: 50px;}
.file-loader .Progressbar_wrap{margin-top:16px}
.file-loader .file-loader-btn{position:absolute; right:16px; top:14px} 
.file-loader .file-loader-btn .Button{border-radius: 50%; min-width: 36px; height:36px;}
.file-loader .file-loader-btn .Button.stop{border-color:#fa167c; color:#fa167c }
.file-loader .file-loader-btn .Button.stop:active,
.file-loader .file-loader-btn .Button.stop:hover,
.file-loader .file-loader-btn .Button.stop:focus,
.file-loader .file-loader-btn .Button.stop.af-hover,
.file-loader .file-loader-btn .Button.stop.Checked{background:#fa167c; border:1px solid #fa167c; color:rgb(255, 255, 255, 1)}

/*추가*/
.all-fileinfo{font-size: 14px; letter-spacing: -0.5px; color:#777}
.draw-list ul li.sort{background:#fff; border-bottom: 1px solid #f0f0f0;}
.draw-list ul li.sort:hover{background:none; border-left-color:transparent; border-bottom: 1px solid #f0f0f0;}
.draw-list ul li.sort .draw_tit,
.draw-list ul li.sort .draw-txt,
.draw-list ul li.sort .draw-txt.date{font-weight:400; font-size: 1.6rem; color:#777; letter-spacing: -0.5px; text-align: center;}




/* Tree */
.menu-box.customTy1 .Tree li > span.Arrow{width:13px}
.menu-box.customTy1 .ico,
.menu-box.customTy1 .icoLg{margin-top:-1px}


/* Progressbar */
.Progressbar_wrap{position:relative; padding:1px; border:2px solid #dadada; background:#fff; border-radius: 0; box-sizing:border-box}
.Progressbar_wrap:after{content:''; position:absolute; top:50%; right:-5px; width:5px; height:14px; margin-top:-7px; background:#dadada; z-index:1}
.Progressbar{position:relative; height:18px; background:#fff; border-radius:0; overflow:hidden}
.Progressbar > div{border:0 !important; transition:all .20s ease}
.Progressbar.col01 > div{background:#ffd200}
.Progressbar.col02 > div{background:#ff8400}
.Progressbar.col03 > div{background:#b31212}
.Progressbar.col04 > div{background:#16b221}
.Progressbar.col05 > div{background:#9eb216}
.Progressbar.col06 > div{background:#515b75}
.Progressbar.col07 > div{background:#b6b9c5}
.Progressbar.col08 > div{background:#0095da}
.Progressbar.col09 > div{background:#2bc7db}
.Progressbar.col10 > div{background:#8253d8}
.Progressbar.col11 > div{background:#e43f85}
.Progressbar.col01{background:#fffae5}
.Progressbar.col02{background:#fff2e5}
.Progressbar.col03{background:#f9ecec}
.Progressbar.col04{background:#f6fcf6}
.Progressbar.col05{background:#f5f7e7}
.Progressbar.col06{background:#edeef1}
.Progressbar.col07{background:#f8f8f9}
.Progressbar.col08{background:#e5f4fb}
.Progressbar.col09{background:#e9f9fb}
.Progressbar.col10{background:#f2edfb}
.Progressbar.col11{background:#fcebf3}

.Progressbar_wrap .ProgressOut{position:absolute; right:-45px; top:50%; width:35px; margin-top:-7px; text-align:left; letter-spacing:-0.5px; font-size:11px; color:#202020; line-height:135%; font-weight:normal}
.Progressbar.Progress-text{height:18px}
.Progressbar.Progress-text span{left:0; color:#202020; font-size:11px; line-height:16px}
.Progressbar .ProgressIn{position:absolute; top:0px; left:0; width:100%; height:18px; text-align:center; color:#202020; font-size:11px; letter-spacing:-0.5px; line-height:18px; z-index:1}
.Progressbar_wrap.slim .Progressbar{height:8px}
.Progressbar_wrap.slim:after{height:8px; margin-top:-4px}


/* gantchart color */
.gantt_Project{border:2px solid #51c03b; color:#51c03b; background:#51c03b}
.gantt_Project .gantt_task_progress{background:#108e18}
.gantt_Stage{border:2px solid #69c490; color:#69c490; background:#69c490}
.gantt_Stage .gantt_task_progress{background:#24b663}
.gantt_Milestone{border:2px solid #de6a6a; color:#de6a6a; background:#de6a6a}
.gantt_Milestone .gantt_task_progress{background:#b31212}
.gantt_Process{border:2px solid #6a95d2; color:#6a95d2; background:#6a95d2}
.gantt_Process .gantt_task_progress{background:#2e5b9c}
.gantt_Activity{border:2px solid #c2b19a; color:#c2b19a; background:#c2b19a}
.gantt_Activity .gantt_task_progress{background:#ffa800}





/* **************************************** *
 * DIALOG
 * **************************************** */
.Dialog .ResizeBtn{right:5px; bottom:8px}


.Dialog .Header .DialogBtn{display:flex; align-items:center; justify-content:center; position:absolute; top:auto; right:12px; width:32px; height:32px; background:none; box-sizing:border-box;}
.Dialog .Header .DialogBtn.dialog_btn:after{font-family:'Material Design Icons'; font-weight:300; font-size:22px; color:#575757}
.Dialog .Header .DialogBtn.dialog_btn:after{content:"\F05AD"; font-size:20px}
.Dialog .Header .DialogBtn:hover{background:none; box-shadow: none}

.layerpop-box{height:calc(100% - 63px); background:#fff; overflow:hidden; overflow-y:auto}
.layerpop-btnwrap{position:relative; display:flex; align-items:center; justify-content:center; padding:10px 0; border-top:1px solid #ddd; overflow:hidden; gap:4px}
.layerpop-btnwrap .Button{min-width:80px; height:40px; margin:0 2px}
.layerpop-btnwrap .Button.primary{background:#01042f}


 /* dialog base */
.Dialog{width:400px; border:2px solid #fff; border-radius:25px; outline:none; box-shadow:none; box-sizing:border-box}
.Dialog .Header,
.popUp .Header
{
	display:flex; align-items:center; height:58px; padding-left:24px; padding-right:20px; line-height:58px;
	font-size:18px; font-weight:300; text-align:left; color:#222; letter-spacing:-0.8px; border-bottom:1px solid #ddd; overflow:hidden; white-space:nowrap; text-overflow:ellipsis
}

/* dialog alert & confirm */
.Dialog.alert .Header,
.popUp.alert .Header{display:none; align-items:center; height:0 !important; padding:0 15px; padding-right:10px; line-height:40px; text-align:left; font-size:14px; font-weight:normal; letter-spacing:-0.5px; color:#202020; letter-spacing:-0.2px; background-color:#f9fafc; border-bottom:1px solid #dadada}

.Dialog.alert .alert-box,
.popUp.alert .alert-box{position:relative; height:159px; padding:15px 30px; overflow-y:auto; overflow-x:hidden; text-align:center; box-sizing:border-box}
.Dialog.alert .alert-box.exception,
.popUp.alert .alert-box.exception{height:175px}
.Dialog.alert .alert-cont,
.popUp.alert .alert-cont{display:table; position:relative; left:50%; text-align:left; height:100%; box-sizing:border-box; transform:translate(-50.2%, 0)}
.Dialog.alert .alert-cont .cont-inner,
.popUp.alert .alert-cont .cont-inner{display:table-cell; padding-left:60px; vertical-align:middle}
.Dialog.alert .alert-cont.txt .cont-inner,
.popUp.alert .alert-cont.txt .cont-inner{padding-left:0}
.Dialog.alert .alert-box .text,
.popUp.alert .alert-box .text{display:block; padding-left:20px; font-size:15px; line-height:155%; color:#202020; letter-spacing:-0.5px}
.Dialog.alert .alert-cont.txt .alert-box .text,
.popUp.alert .alert-cont.txt .alert-box .text{padding-left:0}
.Dialog.alert .alert-img{display:inline-block; position:absolute; left:0; top:46%; width:68px; height:68px; margin-top:-27px; background:url("/static/fw/images/content/alert-warning.svg") no-repeat; image-rendering: pixelated; vertical-align:middle}

.Dialog.alert .alert-box.confirm .alert-img{height:68px; margin-bottom:0; background:url("/static/fw/images/content/alert-help.svg") no-repeat;}
.Dialog.alert .alert-box.exception .alert-img {height:68px; margin-bottom:0; background:url("/static/fw/images/content/alert-x-mark.svg") no-repeat;}
.Dialog.alert .text.more{max-width:260px; overflow:hidden; text-overflow:ellipsis; word-wrap:normal; text-align:left;}
.Dialog.alert .text.more p{margin:0; font-weight:300}
.Dialog.alert .text.more a{display:block; width:60px; margin-top:15px; color:#202020}

.Dialog.alert .moreview{display:none; margin:0 25px 15px; max-height:300px; overflow:auto; text-align:left; border:1px solid #ccc}
.Dialog.alert .moreview p{margin:0px; padding:20px; overflow:hidden; text-overflow:ellipsis; word-wrap:normal; color:#666666; line-height:1.7}

.Dialog.alert .alert-btnwrap{display:flex; align-items:flex-start; justify-content:center; height:52px}
.Dialog.alert .alert-btnwrap .button{min-width:100px; height:42px; background:#fff; border:1px solid #d3d3d3; font-size:16px; border-radius:200px}
.Dialog.alert .alert-btnwrap .button.confirm,
.Dialog.alert .alert-btnwrap .button.info,
.Dialog.alert .alert-btnwrap .button.primary{background:linear-gradient(-43deg, #be52f2, #5629ee); border:0; color:#fff}

.Dialog.alert .alert-btnwrap.multiple .button{min-width:70px; height:42px; margin:0 2px; background:#fff; border:1px solid #d3d3d3; font-size:16px; border-radius:200px}
.Dialog.alert .alert-btnwrap.multiple .button.confirm,
.Dialog.alert .alert-btnwrap.multiple .button.info,
.Dialog.alert .alert-btnwrap.multiple .button.primary{background:#f2edff; border:1px solid #bba9f8; color:#5629ee}

.Dialog.alert .alert-btnwrap .Button:focus{outline:none}


.Dialog.alert .Header .DialogBtn.dialog_btn:after{color:#505050}
.Dialog.alert .Header .DialogBtn:hover{background:none}

.Dialog .ResizeBtn{right:7px; bottom:11px; width:20px; height:20px; background:none}
.Dialog .ResizeBtn::before{content:"\F045D"; font-family:'Material Design Icons'; font-size: 20px; color:#8e8e8e}



/* ========================================================================================== */
/* IE 개별 대응
/* ========================================================================================== */
/* IE */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.ImageRadio:after{top:7px; margin-top:-5px}
}

/* Edge */
@supports (-ms-ime-align: auto) {
	.Textinput.w100p + .Icon.remove{margin-top:-20px}
}