@charset "utf-8";

/*Font style*/
.ok{color:#5faee3 !important;}
.deny{color:#ec4a41 !important;}

#company{width: 100%; height:calc(100% - 60px); padding:40px 45px 0;}
#union{width: 100%; height:calc(100% - 60px); padding:40px 45px 0;}
.status{width:100%;  display:inline-block; margin-bottom:30px}
.status dl{float:left; margin-right:1px; padding:20px 32px}
.status dt{color:#FFF; font-size:1.1rem; margin-bottom:15px}
.status dd{float:left;}
.status dd cite{display:block; color:rgba(0,0,0,0.5); font-size:0.9rem; font-weight:400}
.status dd strong{font-weight:500; font-size:2.85rem; color:#fff; line-height:100%; letter-spacing:-0.04em}
.status dd.err strong{color:#ec4a41} 
	.status .facility dl{width:17%; background:#5faee3; padding:20px 32px}
	.status .facility dl:nth-child(2){background:#6eb5e5;}
	.status .facility dl:nth-child(3){background:#7cbde8;}
	.status .facility dl dd:nth-child(2){width:60%;}
	.status .facility dl dd:nth-child(3){width:40%;}
	.status .tag dl{width:23%;background:#58b5ac; padding:20px 20px 20 30px}
	.status .tag dl:nth-child(2){background:#69bfb7;}
	.status .tag dl:first-child{margin-left:25px;}
	.status .tag dl dd:nth-child(2){width:43%;}
	.status .tag dl dd:nth-child(n+3){width:24%; margin-right:20px}
	.status .tag dl dd:last-child{margin-right:0}
	
.manage{display: -webkit-flex; display: -moz-flex; display: -ms-flexbox; display: -o-flex; display: flex; 
	-webkit-flex-direction: row; -moz-flex-direction: row; -ms-flex-direction: row; o-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; flex-wrap: wrap;
	justify-content: space-around; width:70%; height:calc(100% - 210px); float:left; padding-right:40px;}
.manage h3, .timetable h3{height:40px; background:#e5e5e5; color:#000; font-size:1.2rem; font-weight:400; line-height:40px; padding:0 15px; border-top-left-radius:2px; border-top-right-radius:2px;}
.manage .cont{height:inherit; background:#FFF; padding:20px 25px 30px  0; box-shadow: 2px 2px 2px -2px rgba(0,0,0,0.2); border-bottom-left-radius:2px; border-bottom-right-radius:2px; overflow:hidden;}
	.manage .tab{margin-bottom:0; height:40px;}
	.manage .tab:after, .manage .tab li.select:after{border:0 none}
	.manage .tab li{height:inherit; padding:8px 40px 5px; margin-left:0}
	.manage .tab li:after{border:0 none}
	.manage .tab li.select{box-shadow: 2px 0px 2px -2px rgba(0,0,0,0.2); border:0 none}
.manage .cont .tblList{margin-left:13px;}
	
	.runStatist{width:50%; height:260px; margin-right:40px;}
	.chart{float:left; width:45%; height:100%; text-align:center; padding:10px;}
	.numeric{float:right; width:55%; height:100%; }
	.numeric dl{float:left; text-align:center; width:50%; height:100px; padding:8px 0 0;}
	.numeric dl dt{color:#424242; font-size:1rem; line-height:170%}
	.numeric dl dd{font-size:2.4rem; line-height:100%; color:#000; letter-spacing:-0.05em;}
	.numeric dl dd span{display:block; font-size:1.3rem; letter-spacing:-0.05em; vertical-align:top; line-height:24px;}
	.numeric dl:nth-child(n+3){border-top:1px solid #d8d8d8; margin-top:8px; padding-top:16px}
	
	.notice{width:45.8%; height:260px;}
	.notice mark{display:inline-block; height:40px;  background:#FFF; color:#000; font-size:1.2rem; font-weight:400; line-height:40px; padding:0 15px; box-shadow: 1px 0px 1px -1px rgba(0,0,0,0.2);}
	.notice .cont{overflow-y:auto; padding-top:15px;}
	.notice ul li{ display:block; border-bottom:1px solid #d8d8d8; padding:8px 0; font-size:1rem}
	.notice ul li:last-child{border-bottom:none;}
	.notice ul li a{position:relative; color:#000; line-height:150%}
	.notice ul li a.new::after{content:""; display:block; width:15px; height:15px; position:absolute; top:2px; right:-22px; background:url('../images/bg_sprite.png')no-repeat -68px -38px;}
	.notice ul li span{display:block; color:#9f9f9f; font-size:0.9rem; } 
	
	.holiday{width:50%; height:300px; margin:30px 40px 0 0;}
	.holiday table td:first-child{color:#58b5ac}
	
	.errCheck{width:45.8%; height:300px; margin:30px 0 0 0;}

.timetable{width:30%; height:630px; float:right;}
.timetable .cont{height:inherit; background:#FFF; padding:20px 25px 30px ; box-shadow: 2px 2px 2px -2px rgba(0,0,0,0.2); border-bottom-left-radius:2px; border-bottom-right-radius:2px; overflow:hidden;}
.timetable fieldset{background:#FFF; padding:0;}
.timetable fieldset select{width:100%; height:28px;}
.timetable .tblList{height:calc(100% - 100px);}
.timetable table tbody tr:nth-child(-n+3){background:#f6f5b7 !important;}
.timetable table tbody tr:nth-child(1){background:#caf8d8 !important;} 

/* 게시판*/
.tblList{width:100%; height:100%; overflow-y: auto; overflow-x:hidden;}
.tblList table{width:100%; table-layout:fixed;}
.tblList table thead{background: linear-gradient(#efefef, #d8d8d8); border:1px solid rgba(0,0,0,0.15); box-shadow: inset 0px 2px 0px -1px rgba(255,255,255,0.5); }
.tblList table thead th{height:34px; font-size: 1rem; font-weight:400; text-align:center; vertical-align:middle; }
.tblList table tbody td{text-align: center; border-bottom:1px solid #d8d8d8; padding:7px 5px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; font-size:1rem;}
.tblList table tbody tr:hover a{color:#003591; text-decoration: underline;}
.tblList table tbody tr:nth-child(even) {background:rgba(0,0,0,0.05);}
.tblList tbody button{background: linear-gradient(#8ac2e8, #77b9e4); border:1px solid rgba(0,0,0,0.1); padding:3px 10px; color:#FFF; font-size:1rem; border-radius:2px;}
.tblList tbody .cancel{background: pink; border:1px solid rgba(0,0,0,0.1); padding:3px 10px; color:#FFF; font-size:1rem; border-radius:2px;}
.tblList tbody button:hover{box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,0.25); background: rgba(45,53,62,0.8); border:1px solid rgba(255,255,255,0.15); }
.tblList tbody .cancel:hover{box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,0.25); background: rgba(45,53,62,0.8); border:1px solid rgba(255,255,255,0.15); }
.tblList tfoot{position:fixed; bottom:60px;}
.tblList tfoot td{padding:0; vertical-align:top;}
.tblList tfoot button{width:82px; background: linear-gradient(#fff, #cdcdcd); padding:10px 20px; color:#424242; font-size:1.1rem; box-shadow: 0px 0px 1px 1px rgba(0,0,0,0.1);
 border-right:1px solid rgba(0,0,0,0.1); border-left:1px solid rgba(255,255,255,0.5); border-top:1px solid #a3a3a3; margin-left:-4px ; word-break: break-all; word-wrap: break-word; }
.tblList tfoot button:first-child{margin-left:0;}
.tblList tfoot button:hover{box-shadow:inset 1px 1px 2px 0 rgba(0,0,0,0.25); background: rgba(45,53,62,0.9);color:#FFF; }
.tblList tfoot button:nth-child(4){height:61px; vertical-align:inherit;}

/*조합*/
.violate{width:100%;}
.violate h3{position:relative;}
.violate .remark{position:absolute; top:0px; right:0px;}
.violate .remark .cp1, .violate .remark .cp2{position:relative; float:left; color:#000; font-size:1.1rem; margin:0 20px}
.violate .remark .cp1::before{content:"◼"; position:absolute; left:-28px; font-size:2rem; color:#f3c047}
.violate .remark .cp2::before{content:"◼"; position:absolute; left:-28px; font-size:2rem; color:#f86b4f}

.violate .cont{height:320px; padding-top:15px;}
.violate .today{float:left; color:rgba(0,0,0,0.15); font-size:1.7rem; margin:10px 0 0 12px; text-align:center;}
.violate .today big{display:block; font-size:4rem; line-height:100%; width:100px; letter-spacing:-0.05em;}
.violate .today em{display:block; font-size:2.5rem}

.violate .chart{float:right; width:calc(100% - 130px); height:100%; border-left:1px solid #e5e5e5;}
.violate .chart dl{width:15.5%; height:inherit; float:left; margin-right:1.1%;}
.violate .chart dl:first-child{margin-left:10px}
.violate .chart dl:last-child{margin-right:0}
.violate .chart dt{display:inline-block; position:relative;background:rgba(0,0,0,0.1); color:#424242; text-align:center; border-radius:40px; padding:2px 30px; font-size:1.2rem; margin-top:35px;}
.violate .chart dl dt::before{content:""; display:block; position:absolute; width:44px; height:45px;}
.violate .chart dl.drink dt::before{top:-42px; left:33px; background:url('../images/bg_sprite.png')no-repeat 0px -63px; }/*음주*/
.violate .chart dl.narrow dt::before{top:-35px; left:15px; width:56px; height:35px; background:url('../images/bg_sprite.png')no-repeat -43px -73px;}/*몰림*/
.violate .chart dl.interval dt::before{top:-35px; left:24px; width:58px; height:35px; background:url('../images/bg_sprite.png')no-repeat -118px -73px;}/*벌어짐*/
.violate .chart dl.earlyArr dt::before{top:-37px; left:19px; width:53px; height:35px; background:url('../images/bg_sprite.png')no-repeat -188px -70px;}/*조착*/
.violate .chart dl.earlyStart dt::before{top:-36px; left:22px; height:40px; background:url('../images/bg_sprite.png')no-repeat -122px -36px;}/*조발*/
.violate .chart dl.delay dt::before{top:-40px; left:18px; width:58px; height:40px; background:url('../images/bg_sprite.png')no-repeat -185px -30px;}/*연발*/
.violate .chart dd{height:100%; text-align:center;}

#union .runStatist{width:48%;}
#union .mngSelec{position:absolute; top:66px; right:62px;}
#union .mngSelec select{width:200px; height:30px; font-size:1rem;}
#union .runStatist:last-child{margin-right:0}
#union .timetable .tblList{height:calc(100% - 30px);}

/*차트*/
#donut, #donutForCur{position:relative;width:205px; height:205px}
#donut .name, #donutForCur .name{fill:#000}
#donut .data, #donutForCur .data{fill:#5f97ff; font-size:4.3rem;}
#donut .percent, #donutForCur .percent{fill:#5f97ff; font-size:1.5rem; }

.background-style{height:210px;}
.value{background:red; height:60px; z-index:10000}
.tick line{display:none;}
.tick text{font-size:1.5rem; letter-spacing:-0.15em}
.tick:first-child text{fill:#f3c047;}
.tick:nth-child(2) text{fill:#f86b4f;}