@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

/* common css value */

:root {
    --color-black: #3e3e3e;
    --color-white: #fff;

    --color-gray: #c5c5c5;
    --color-light-gray: #eee;
    
    --color-blue: #0074e9;

    --color-red: #d9534f;
    --color-dark-red: #ce312c;
    
    --border-color-gray: #ccc;

    --font-size: 16px;
    --btn-border-radius: 4px;

    --title-font: 'Noto Sans KR';
}

/* css reset start */
* {
    font-family: 'Apple SD Gothic', sans-serif; 
}

html, body {
    padding: 0;
    margin: 0;
    height: 100%;

    font-size: 14px;

    color: #3e3e3e;
    /* letter-spacing: -.2px; */

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    overflow-x: hidden;
    line-height: 1.2;
    height: -webkit-fill-available;
    height: fill-available;
    box-sizing: border-box;

}

input, textarea {
    font-family: sans-serif;
    color: #3e3e3e !important;
}

ul, ol {
    list-style: none;
	padding-left: 0;
    margin-bottom: 0;
    margin-top: 0;
}


ol ol, ol ul, ul ol, ul ul {
    margin-bottom: 0;
}

a {
    color: white;
    text-decoration: none;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
}

.h1, h1 {
    font-size: 36px;
}


/* css reset end */

.backWrap {
    width: 100%;
    min-height: 100vh;
    min-height: fill-available;

	background-color: #f5f5f5;
    box-sizing: border-box;
    position: relative;
    padding-top: 100px;
    padding-bottom: 41px;
    overflow: scroll;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.backWrap::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.backWrap {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}

.wrap {
    width: 1200px;
    margin: 0 auto;
    
}

.container {
    width: 1200px;
    margin-right: auto;
    margin-left: auto;
}

.OtherContainer {
    width: 90%;
    min-width: 1200px;
    padding: 0px 0px 10px 0px;
    margin: 0 auto 10px;
}

.OtherContainer.seventypercent {
    width: 70%;
}

.OtherContainer.small-window {
    width: 1200px;
}

.OtherContainer.rawMaterialStock-content {
    max-width: 1542px;
}

.OtherContainer.goodsstock-content {
    width: 1542px;
    max-width: 1542px;
}

.DashformOutDiv {
	border: 1px solid #c5c5c5;
	box-shadow: 0 1px 4px 0 rgb(0 0 0 / 20%);
	border-radius: 1px;
	background-color: #fff;
}

.DashformInDiv{
	background-color: #fff;
    border-radius: 1px;
    padding: 10px;
}

.infoPTitle,
.infoPTitle span {
	padding: 10px 0px;
    font-size: 14px;
    font-weight: bold;
    color: var(--color-black);
    font-family: var(--title-font), sans-serif;
	
}

.infoPTitle i{ 
    font-size: 15px;
    font-weight: 500;
    color: var(--color-black);

}

.content-title,
.content-title > span {
    font-size: 14px;
    font-weight: bold;
    font-family: var(--title-font);
    color: var(--color-black);
}

/* .content-title > span {
    vertical-align: text-top;
} */

/* popup title font */
#pop .dx-toolbar-label .dx-toolbar-item-content > div,
div.dx-popup-normal .dx-popup-title .dx-item-content > div{
    font-family: var(--title-font);
    font-weight: bold;
}

.dottedLine {
	border-bottom: 2px dotted #cfcfcf; 
	margin: 10px 0px;
}
.content-top-mg {
    margin-top: 10px;
}

/* 전기에너지 관리 탭에서 시간대, 일별, 월별 사용량 공통 class */
.OtherContainer_cht {
    width: 90%;
    max-width: 1970px;
    margin: 0px auto;
    padding: 0px 0px 10px 0px;
} 

.DashformInDiv.power-chart {
    position: relative;
}

.power-chart-title {
    display: flex; 
    position: absolute;
    right: 86px;
    top: 21px;
}

.cht-center {
    margin: 20px auto;
}

#dtb_s_date {
    width: 120px;
}
#sld_pm_month {
    width: 200px;
    margin-right: 5px;
    margin-left: 5px;
}
#sld_value_month {
    width: 80px;
}


/* 전체 페이지 svg title 수정하는 attribute */
#cg_error .dxg-title text, 
#cg_minus .dxg-title text, 
#cht .dxc-title text, 
#cht_hour .dxc-title text, 
#cht_day .dxc-title text, 
#cht_month .dxc-title text,
#cht_year .dxc-title text,
#cht_factor .dxc-title text,
#cht_bar_gs .dxc-title text, 
#cht_bar .dxc-title text {
    font: normal 22px var(--title-font) !important;
}


/* div나란히 */
.items { 
    display: table;
    table-layout: fixed; 
    width: 100%;
    word-break: break-all; 

}
.items .item0 { 
    text-align: center;
    display: table-cell;
    width: 140px;
    vertical-align: middle;
}
.items .item { 
    text-align: center;
    display: table-cell;
}

/* template css change */
span.dx-datagrid-nodata,
span.dx-treelist-nodata {
    font-size: 14px;
}

.dx-scheduler-date-table-current-date > .dx-scheduler-date-table-cell-text {
    color: #337ab7;
}

div.dx-placeholder::before {
    padding: 0 9px 0 8px;
}

div.dx-datagrid,
div.dx-widget {
    color: var(--color-black);
}

div.dx-scheduler-work-space-month td.dx-scheduler-date-table-cell {
    font-size: 14px;
}


/* pagination selection  */
.dx-pager .dx-page-sizes > .dx-page-size.dx-selection, 
.dx-pager .dx-pages .dx-page.dx-selection {
    background-color: #f5f5f5;
    font-weight: bold;
    color: #757575;
}

/* table 중복 줄 제거 */
.dx-datagrid-borders .dx-datagrid-rowsview, .dx-datagrid-headers + div.dx-datagrid-rowsview,
.dx-datagrid-borders > .dx-datagrid-rowsview, .dx-datagrid-borders > div.dx-datagrid-total-footer {
    border-top: none;
}

/* dx checkbox 크기 조절 */
.dx-checkbox-checked .dx-checkbox-container > .dx-checkbox-icon {
  font: 12px/1em DXIcons;
}

/* 결재 알림 - 결재선 & 발주서 - 결제 목록 아이콘 */
.icon-approval {
    display: inline-block; 
    border: 1px solid transparent;
    margin-right: 5px; 
    padding:2px 6px;
    border-radius: 15px;
    font-size: 11px;
    color: white;
    font-weight: bold;
}

/* 미결재 */
.icon-approval.waiting {
  border: 1px solid #ebebeb;
  color: #b9b9b9;
  background: white;
}
/* 기안(결재대기), 재기안 */
.icon-approval.submit {
border: 1px solid #647b9d82;
color: #0964d5;
background-color: #f5faff;
}
/* 결재 */
.icon-approval.signed {
border: 1px solid #b1c5e1;
color: #1b73e9;
background: #e7f1ff;
}
/* 승인 */
.icon-approval.final-signed {
border: 1px solid #b2eb8a;
color: #52BF04;
background: #f9fff5;
}
/* 전결 */
.icon-approval.arbitrarily-signed {
border: 1px solid #9dd1a5;
color: #027313;
background: #e9f7eb;
}
/* 반려요청 */
.icon-approval.return-request {
border: 1px solid #f7d27b;
color: #ff9900;
background: #fffaeee0;
}
/* 이전반려 */
.icon-approval.return-before-request {
border: 1px solid #ffae89;
color: #E84900;
background: #fff2ec;
}
/* 전체반려 */
.icon-approval.return-all-request {
border: 1px solid #fda7a6;
color: #E80500;
background: #ffecebad;
}
/* 반려 거절 */
.icon-approval.reject-return {
border: 1px solid #f1b989;
color: #FD7400;
background: #fff2e8;
}
/* 기안 종료 */
.icon-approval.submit-end {
border: 1px solid #abbacb;
color: #001229;
background: #eee;
}
/* 반려 종료 */
.icon-approval.request-end {
border: 1px solid #abbacb;
color: #001229;
background: #eee;
}
span.icon-approval ~ i {
    margin-left: -3px;
    margin-right: 1px;
    font-size: .7rem;
    color: #d9d6d6;
}

/* CSS specific to iOS devices */ 
@supports (-webkit-touch-callout: none) {
    .backWrap {
        /* min-height: calc(100vh - 60px) !important; */
        /* ios mobile vh issue */
        min-height: calc(var(--vh, 1vh)*100) !important;
        min-height: -webkit-fill-available !important;
        /* min-height: 120vh; */
    }
}

@media (max-width: 1199px){
    body {
        width: 100%;
        height: 100%;
    }
    .backWrap {
        overflow-x: scroll;
    }
    .wrap {
        width: 100%;
    }
    .wrap_fix, .wrap_pg {
        /* overflow 되는 자식 인식해야 하기 때문에 display 변경 불가 */
        display: inline-block;
    }
    .container {
        width: 100%;
    }
    .OtherContainer,
    .OtherContainer_cht {
        width: 100%;
        max-width: 1300px;
        padding-right: 10px;
        padding-left: 10px;
        box-sizing: border-box;
    }
    .infoPTitle {
        padding-right: 10px;
        padding-left: 10px;
    }
} 

@media all and (max-width: 1199px) {
    footer#footer {
        width: 1200px;
    }
}
@media all and (max-width: 500px) {
    footer .copyright div {
        text-align: left;
        padding-left: 10px;
    }
}