/***********************************************************************************
* Copyright (C)RFLOGIX since 2010.08.24 (rflogix@rflogix.com)
************************************************************************************
* ● 프로젝트	: 크로닉
* ○ 파일명		: report.css
************************************************************************************/




/***********************************************************************************
* 2번째 탭 - 보고서
***********************************************************************************/

.page_report .tab_wrap {width:100%; height:52px; z-index:2;}
.page_report .tab_wrap .tab {width:100%; height:100%; color:#7d7d7d; font-size:14px; background-image:linear-gradient(0deg,#E6E6E6 1px,hsla(0,0%,82%,0) 0); transition:background 0.2s;}
.page_report .tab_wrap .tab.active {color:#333340; font-weight:bold; background-image:linear-gradient(0deg,#333340 2.5px,rgba(156,39,176,0) 0); background-size:100% 100%,100% 100%;}

.page_report .content {width:100%; height:calc(100% - 52px); overflow-y:auto; overflow-x:hidden; z-index:1;}

.page_report .date_wrap {width:100%; height:30px; padding:25px 0 0 0;}
.page_report .date_wrap .date_show {width:80px; font-size:14px; color:#333340; text-align:right;}
.page_report .date_wrap .dash {padding-right:2px;}
.page_report .date_wrap .btn_calendar {padding:10px;}

.page_report .date_btn_wrap {width:100%; height:30px; padding:3px 0 12px 0;}
.page_report .date_btn_wrap .btn_year {height:30px; padding:0 10px; border:1px solid #aaa; border-radius:3px;}
.page_report .date_btn_wrap .btn_month {height:30px; padding:0 10px; margin-left:10px; border:1px solid #aaa; border-radius:3px;}
.page_report .date_btn_wrap .btn_week {height:30px; padding:0 10px; margin-left:10px; border:1px solid #aaa; border-radius:3px;}

.page_report .report_wrap {width:calc(100% - 48px); min-height:98px; margin:13px 24px 0 24px; box-shadow:0 3px 6px 0 rgba(0, 0, 0, 0.16); border-radius: 19px; overflow:hidden; display:none;}
.page_report .report_wrap.active {display:flex;}
.page_report .report_wrap img {width:25px; height:25px;}
.page_report .report_wrap.ex img {background-image:url('../image/report/icon_at.png');}
.page_report .report_wrap.bp_1 img {background-image:url('../image/report/icon_bp.png');}
.page_report .report_wrap.bp_2 img {background-image:url('../image/report/icon_bp.png');}
.page_report .report_wrap.bp_3 img {background-image:url('../image/report/icon_bp.png');}
.page_report .report_wrap.bs img {background-image:url('../image/report/icon_bs.png');}
.page_report .report_wrap.bs_2 img {background-image:url('../image/report/icon_bs.png');}
.page_report .report_wrap.ip_1 img {background-image:url('../image/report/icon_ip.png');}
.page_report .report_wrap.ip_2 img {background-image:url('../image/report/icon_ip.png');}
.page_report .report_wrap.md img {background-image:url('../image/report/icon_bs.png');}
.page_report .report_wrap.ml img {background-image:url('../image/report/icon_me.png');}

.page_report .report_wrap .title {flex:1; height:100%; margin-left:6px; line-height:18px; font-size:18px; color:#4b4b4b;}
.page_report .report_wrap .bar_wrap {width:100%; min-width:154px; height:10px; margin-top:10px; border-radius:5px; background:#cfcfcf; overflow:hidden;}
.page_report .report_wrap .bar {width:10px; height:100%; background:#ffdb64; transition:width 0.3s; border-radius:5px;}
.page_report .report_wrap.bad .bar {background:#ff6767;}
.page_report .report_wrap.good .bar {background:#4885b1;}
.page_report .report_wrap .result_num {line-height:34px; font-size:34px; font-weight:bold; font-family:arial; color:#ffdb64;}
.page_report .report_wrap.bad .result_num {color:#ff6767;}
.page_report .report_wrap.good .result_num {color:#4885b1;}
.page_report .report_wrap .result_text {margin-top:10px; line-height:17px; font-size:17px; color:#4b4b4b;}
.page_report .report_wrap.bad .result_text {color:#ff6767;}

.page_report .report_wrap .chart_wrap {width:150px; height:150px; margin:15px 0 15px 25px; background-image:url('../image/report/icon_normal.png'); background-size:cover;}
.page_report .report_wrap.bad .chart_wrap {background-image:url('../image/report/icon_bad.png');}
.page_report .report_wrap.good .chart_wrap {background-image:url('../image/report/icon_good.png');}
.page_report .report_wrap .chart_num {font-size:20px; font-weight:bold; width:100%; height:23%; top:31%; left:0; position:absolute; text-align:center; z-index:1;}

.page_report .report_wrap.md .chart_num {top:30%; font-size:24px;}
.page_report .report_wrap.md .title {flex:none; line-height:20px; font-size:20px;}
.page_report .report_wrap.md .result_text {margin-top:12px; line-height:34px; font-size:34px; font-weight:bold;}
.page_report .report_wrap.md .result_info {margin-top:10px;}
.page_report .report_wrap.md .result_info .text {line-height:18px; font-size:14px; color:#4b4b4b; text-align:center;}
.page_report .report_wrap.md .result_info img {margin-left:5px; background-image:url('../image/report/icon_qu.png');}

.page_report .report_wrap.ml {width:50%; margin-right:7px; margin-bottom:20px; padding-bottom:15px;}
.page_report .report_wrap.ml .chart_wrap {width:120px; height:120px; margin:10px auto 12px auto;}
.page_report .report_wrap.ml .title {flex:none;}

.page_report .report_wrap.ex {width:50%; margin-left:7px; margin-bottom:20px; padding-bottom:15px;}
.page_report .report_wrap.ex .chart_wrap {width:120px; height:120px; margin:10px auto 12px auto;}
.page_report .report_wrap.ex .title {flex:none;}