/*!
*******************************************************************************************************
* ATTENTION: THIS IS NOT FREE EDITION. FOR COMMERCIAL PURPOSES, PLEASE PURCHASE A COMMERCIAL LICENSE! *
*******************************************************************************************************
* File: Centcount Analytics Caesar Edition CA Chart CSS Code                                          *
* Version: 3.0 Caesar                                                                                 *
* Author: WM Jonssen                                                                                  *
* Date: 12/08/2023                                                                                    *
* Copyright 2015-2023 WM Jonssen <wm.jonssen@gmail.com> - All rights reserved.                        *
* License: Dual licensed under the Free License and Commercial License.                               *
* Website: https://www.centcount.com                                                                  *
*******************************************************************************************************
*/
 
@charset "utf-8";

/*box*/
.selectframe{font-size:14px; font-family:Consolas,Monaco,Microsoft Yahei,Arial,Verdana; width:100%; min-width:360px; height:auto; float:left; border-bottom:#ccc 1px solid; margin:auto; text-align:center;}	

.framebody{width:auto; min-width:345px; height:auto; float:none; margin:0px; margin-left:15px; text-align:left; overflow-x:auto; overflow-y:hidden;}
.errmsg{margin-bottom:10px;}
.frametable{width:100%; height:auto; text-align:center; float:none;}
.frameinner, .framesum, .framemap{width:100%; height:auto; text-align:center; float:left;}


.innertable{width:100%; min-width:330px; height:auto; margin:0px; text-align:left; float:left; background-color:transparent; left:0; top:0; overflow:hidden;}
.innertitle{width:calc(100% - 27px); height:45px; line-height:45px; padding-left:10px; margin-right:15px; text-align:left; font-size:20px; color:#111; font-family:Verdana,Microsoft Yahei,Arial; border:1px #ccc solid; border-bottom:0px; float:left; background-color:#fff;}
.innerbody, .innerbodywithborder, .innerbodynoborder, .innerbodyflex{width:calc(100% - 17px); height:auto; margin-right:15px; text-align:left; border:0px; border-left:#ccc 1px solid; border-right:#ccc 1px solid; scrolling:no; overflow-x:auto; float:left; background-color:#fff;}
.innerbodywithborder{border:1px #ccc solid;}
.innerbodynoborder{border:0px;}
.innerfoot{width:calc(100% - 23px); height:45px; margin-right:15px; margin-bottom:15px; padding-left:6px; text-align:left; font-size:16px; font-weight:bold; border:1px #ccc solid; border-top:0px; float:left;  background-color:#fff;}


/*global var*/
.ca_tool{width:30px; height:32px; margin-top:7px; float:left; position:relative; background-color:#fff; opacity:0.5;}

.ca_maximize_btn{width:34px; height:32px; margin-top:10px; float:right; background:url(../images/tool_maximize.svg) no-repeat; background-position:0px 0px; position:relative; background-color:#fff; opacity:0.5;}
.ca_maximize_btn:hover{opacity:1;}
.ca_refresh_btn{width:34px; height:32px; margin-top:10px; float:right; background:url(../images/tool_refresh.svg) no-repeat; background-position:0px -1px; background-size:28px; position:relative; background-color:#fff; opacity:0.5;}
.ca_refresh_btn:hover{opacity:1;}


.ca_separator_btn{width:1px; height:24px; margin:6px; margin-top:11px; float:left; position:relative; background-color:#fff; border-left:#bbb 1px solid;}
.ca_space_btn{width:5px; height:46px; float:left; position:relative; background-color:#fff;}


.ca_map_btn{background:url(../images/tool_visitor_map.svg) no-repeat; background-position:5px 5px; background-size:22px;}
.ca_map_btn:hover{opacity:1;}
.ca_realmap_btn{background:url(../images/tool_realtime_visitor.svg) no-repeat; background-position:5px 4px; background-size:22px;}
.ca_realmap_btn:hover{opacity:1;}
.ca_location_btn{background:url(../images/tool_visitor_location.svg) no-repeat; background-position:3px 5px; background-size:26px;}
.ca_location_btn:hover{opacity:1;}


.ca_table_btn{background:url(../images/tool_simple_table.svg) no-repeat; background-position:5px 6px; background-size:20px;}
.ca_table_btn:hover{opacity:1;}
.ca_fulltable_btn{background:url(../images/tool_full_table.svg) no-repeat; background-position:5px 6px; background-size:20px;}
.ca_fulltable_btn:hover{opacity:1;}
.ca_pie_btn{background:url(../images/tool_pie.svg) no-repeat; background-position:0px 2px; background-size:28px;}
.ca_pie_btn:hover{opacity:1;}
.ca_bar_btn{width:26px; background:url(../images/tool_bar.svg) no-repeat; background-position:3px 7px; background-size:19px;}
.ca_bar_btn:hover{opacity:1;}

.ca_daytrend_btn{width:32px; background:url(../images/tool_day_trend.svg) no-repeat; background-position:4px 6px; background-size:23px;}
.ca_daytrend_btn:hover{opacity:1;}
.ca_hourtrend_btn{width:32px; background:url(../images/tool_hour_trend.svg) no-repeat; background-position:5px 4px; background-size:22px;}
.ca_hourtrend_btn:hover{opacity:1;}

.ca_alldevice_btn{width:36px; background:url(../images/tool_all_device.svg) no-repeat; background-position:4px 3px; background-size:26px;}
.ca_alldevice_btn:hover{opacity:1;}
.ca_pc_btn{width:31px; background:url(../images/tool_pc.svg) no-repeat; background-position:5px 5px; background-size:22px;}
.ca_pc_btn:hover{opacity:1;}
.ca_phone_btn{width:28px; background:url(../images/tool_phone.svg) no-repeat; background-position:4px 6px; background-size:20px;}
.ca_phone_btn:hover{opacity:1;}
.ca_tablet_btn{width:28px; background:url(../images/tool_tablet.svg) no-repeat; background-position:1px 5px; background-size:25px;}
.ca_tablet_btn:hover{opacity:1;}


.ca_tool_act{opacity:1;}


.data_loading, .data_init{width:calc(100% - 18px); height:238px; line-height:238px; margin-top:47px; margin-left:1px; border:0px; background-color:rgba(255,255,255,0.5); font-size:36px; color:#bbb; display:none; flex-direction:row; align-items:center; justify-content:center; position:static;}
.data_init{width:100%; height:240px; margin:0px; padding:0px; border-top:#ccc 1px solid; border-bottom:#ccc 1px solid; position:static; display:flex;}
.img_loading {width:64px; height:auto;}


/*ca line css code*/
.ca_line, .ca_bar{width:auto; height:auto; font-size:13px; font-family:Consolas,Monaco,Microsoft Yahei,Arial, Verdana; text-align:left; overflow:hidden;}
.ca_bar{border:0px; border-top:#ccc 1px solid; border-bottom:#ccc 1px solid;}
.line_title, .bar_title, .pie_title, .map_title, .map_menu_lt, .map_menu_rt{width:calc(100% - 15px); font-size:12px; padding-top:10px; padding-left:10px; font-family:Consolas,Monaco,Microsoft Yahei,Arial, Verdana; float:none;}
.line_title {min-height:36px; line-height:18px; background-color:rgb(253,253,253);}
.map_title  {width:100%; height:40px; padding:0px;}
.map_menu_lt{width:auto; padding:0px; float:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.map_menu_rt{width:auto; padding:0px; float:right;white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}


/*ca online number css code*/
.ca_online_no{height:auto; width:100%; font-size:14px; line-height:16px; text-align:center; color:#333; margin-top:60px; margin-bottom:60px; float:none;}
.ca_online_p{height:45px; font-size:36px; line-height:40px; font-weight:bold; margin:0px; padding:0px;}
.ca_online_p2{height:auto; font-size:14px; line-height:14px; margin:0px; padding:0px;}

/*ca table css code*/
.ca_table{width:100%; height:auto; text-align:center;}
table{width:100%; border:#ccc 1px solid; border:0px; border-collapse:collapse; border-collapse:separate; border-spacing:0; font-family:Consolas,Monaco,Microsoft Yahei,Arial, Verdana; table-layout:fixed; float:left;}
tr{width:100%; line-height:18px; height:40px; color:#000; margin:0px; padding:0px; background-color:#fff; border-left-width:0px; border-right-width:0px; border-collapse:collapse; border-collapse:separate; border-spacing:0px;}
td, th{line-height:16px; border:0px; border-bottom:#ccc 1px solid; font-size:12px; color:#333; padding-left:10px; padding-right:0px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

.trhead{background-color:#ddd;}
.trfoot{background-color:#f6f6f6;}
.tra, .trb{background-color:#f3f3f3;}
.trc, .trd{height:auto; border:0px; background-color:#fff;}
.trd{height:40px;}
.tre{height:80px; border:0px; border-top:#eee 1px solid;}
.trn{background-color:rgba(50,150,255,0.6);}
.trr{background-color:rgba(0,150,0,0.6);}
.tru{background-color:rgba(255,50,50,0.6);}

.tra:hover, .trb:hover, .trd:hover, .trn:hover, .trr:hover, .tru:hover{background-color:#C6E2FF;}

.tdhlt, .tdhrt, .tdhmid{text-align:left; font-size:13px; line-height:15px; color:#000; white-space:normal;}
.tdhrt{text-align:right;}
.tdhmid{text-align:center;}

.tdlt{text-align:left;}
.tdltnoborder{text-align:left; }
.tdrt{text-align:right;}
.tdrtnoborder{text-align:right;}
.tdmid{text-align:center;}
.tdmidnoborder{text-align:center; }
.tdfoot{height:auto; text-align:left; padding:5px; padding-left:10px; padding-right:10px; border:0px; vertical-align:top;}
.tdfootinfo, .pagination{width:100%; height:auto; text-align:left; padding:0px; border:0px; vertical-align:top;}
.tdfootdiv, .tdfootdiv2{width:-moz-calc(20% - 20px); width:-webkit-calc(20% - 20px); width:calc(20% - 20px); min-width:240px; height:auto; white-space:normal; text-align:left; padding:5px; padding-left:10px; padding-right:10px; border:0px; vertical-align:top; float:left;}
.tdfootdiv2{width:-moz-calc(100% - 20px); width:-webkit-calc(100% - 20px); width:calc(100% - 20px);}



.pagination{width:calc(100% - 8px); border:0px; border-bottom:#ccc 1px solid; padding:4px; background-color:#f6f6f6; float:left;}
.tbdiv{width:100%; overflow-x:auto; float:left;}
.pR{padding-right:10px;}

.plast{color:#999;}

select{width:auto; height:24px;}

.subtb{border:0px;}
.subtr{width:100%; height:18px; border:0px;}
.subtd{font-size:12px; color:#555; padding:0px; border:0px;}
.listtb{width: 12px; border-left:#0045a6 3px solid;}

button{width:120px; height:28px; font-family:Consolas,Monaco,Microsoft Yahei,Arial,Verdana; color:#333; float:right; margin-right:5px;}
textarea,text{width:240px; height:24px; line-height:22px; font-family:Consolas,Monaco,Microsoft Yahei,Arial,Verdana; font-size:13px; color:#333; float:right; border:#ccc 1px solid; padding-left:5px; margin-right:10px; ime-mode:disabled;}
img.mid{vertical-align:middle;}

.lnk{width:auto; height:auto; font-size:12px; color:#333; text-decoration:none;}

.expand{width:12px; height:12px; margin-top:1px; margin-right:10px; background-image:url(../images/log_expand.svg); background-size:12px; background-repeat:no-repeat; float:left; cursor:pointer;}
.collapse{background-image:url(../images/log_collapse.svg);}


.tbfootbar{width:auto; height:auto; line-height:33px; float:right; border:0px; background-color:transparent;}

.tbfootbar a.select{width:auto; height:22px;line-height:22px;  font-size:12px; text-align:left; color:#333; padding-left:7px; padding-right:20px; border:#ccc 1px solid; border-radius:3px; margin:4px; background:url(../images/dp.png) bottom right no-repeat; background-color:transparent; display:block; float:left; cursor:pointer;}
.tbfootbar a.select:hover{text-decoration:none; border:#bbb 1px solid; border-bottom:#bbb 1px solid; border-right:#bbb 1px solid; -webkit-box-shadow:1px 1px 3px 0px #bbb; box-shadow:1px 1px 3px 0px #bbb; -webkit-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}

.tbfootbar ul{width:auto; height:auto; float:left; margin:0px; padding:0px; background-color:transparent; list-style:none;}
.tbfootbar li{background-color:transparent; width:auto; height:auto; font-size:12px; float:left; margin:0px; padding:0px;}

.tbfootbar li ul{display:none; width:auto; height:auto; max-height:144px; border:#ccc 1px solid; position:absolute; z-index:999; background-color:#fff; margin-left:4px; margin-top:27px; overflow-x:hidden; overflow-y:auto;}
.tbfootbar li li {display:block; width:auto; height:auto; float:none; text-align:left;}

.tbfootbar li ul li a{width:100%; height:24px; line-height:24px; font-size:12px;text-align:left; color:#333; display:block; padding-left:7px; cursor:pointer;}
.tbfootbar li ul li a:hover{text-decoration:none; background-color:#eee;}
.tbfootbar li ul li span{width:100%; height:24px; line-height:24px; font-size:12px;text-align:left; color:#333; background-color:#eee; display:block; padding-left:7px; cursor:pointer;}

.innertitle span{width:calc(100% - 82px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; float:left;}

a.page{width:auto; min-width:22px; height:22px; line-height:22px; padding:0px; font-size:12px; text-align:center; color:#333; background-color:transparent; border:#ccc 1px solid; display:block; float:left; margin:4px; border-radius:3px;  cursor:pointer;}
a.pagebut{width:auto; min-width:22px; height:22px; line-height:22px; padding:0px; font-size:12px; text-align:center; color:#333; background-color:transparent; border:#ccc 1px solid; display:block; float:left; margin:4px; border-radius:3px;  cursor:pointer; font-family:Verdana,Microsoft Yahei,Arial;}
a.page:hover, a.pagebut:hover{text-decoration:none; border:#bbb 1px solid; border-bottom:#bbb 1px solid; border-right:#bbb 1px solid; -webkit-box-shadow:1px 1px 3px 0px #bbb; box-shadow:1px 1px 3px 0px #bbb; -webkit-transition:all 0.2s ease-in; transition:all 0.2s ease-in;}

.page_focus{width:auto; min-width:22px; height:22px; line-height:22px; padding:0px; font-size:12px; text-align:center; color:#39F; background-color:#fff; border:#39F 1px solid; display:block; float:left; margin:4px; border-radius:3px;}

.sort-default{width:auto; height:auto; font-size:12px; color:#333; text-decoration:none; cursor:pointer; display:inline-block;}
.sort-default:hover{text-decoration:none;}
.sort-asc, .sort-desc{width:10px; height:10px; margin:0px; margin-left:4px; cursor:pointer; display:inline-block; background-color:transparent; background-image:url(../images/sortbtn.png);}
.sort-asc{background-position:0px 0px;}
.sort-desc{background-position:0px -10px;}

/*ca chart css code*/
.canvasbox, .mapbox{width:auto; height:auto; overflow:hidden; margin:0px; padding:0px; padding-bottom:10px; border:0px; border-top:1px #ccc solid; border-bottom:1px #ccc solid;}
.mapbox{border:0px;}
.pie-legend_holder {width:auto; height:auto; float:none; margin:0px; text-align:left;}
.pie-legend {width:auto; height:auto; list-style:none; float:none; margin:0px; padding:0px; text-align:left; font-family:Consolas,Monaco,Microsoft Yahei,Arial,Verdana;}
.pie-legend li {display:block; padding-left:30px; position:relative; margin:2px; margin-left:10px; margin-right:10px; border-radius:3px; padding:2px 0px 2px 24px; font-size:12px; height:14px; line-height:14px; cursor:default; -webkit-transition:background-color 200ms ease-in-out; -moz-transition:background-color 200ms ease-in-out; -o-transition:background-color 200ms ease-in-out; transition:background-color 200ms ease-in-out; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.pie-legend li:hover {background-color:#e7e7e7;}
.pie-legend li span {display:block; position:absolute; left:2px; top:2px; width:14px; height:14px; border-radius:7px;}


.chart_title{margin:0; padding:0px; height:40px;}
.chart_title ul{background-color:#fff; list-style:none; width:auto; height:auto; float:right; margin:0; padding:0;}
.chart_title li{width:auto; height:20px; line-height:19px; padding:10px; padding-left:15px; padding-right:25px; color:#777; float:left; display:block;}
.chart_title li ul{display:none; width:auto; height:auto; max-height:290px; list-style:none; border:#eee 2px solid; position:absolute; z-index:999; background-color:#fff; overflow:hidden; margin-top:10px; margin-left:-15px; padding-top:5px; padding-bottom:5px; overflow:auto;}
.chart_title li:hover ul{display:block;}
.chart_title li ul li {display:block; width:auto; height:auto; padding:0; margin:0; float:none; text-align:left; overflow:hidden;}

.chart_title li ul li a{display:block;height:29px; line-height:29px; padding-left:15px; padding-right:30px; font-size:12px;text-align:left; color:#777; white-space:nowrap;}
.chart_title li ul li a:hover{background-color:#ddd; text-decoration:none; cursor:pointer;}


.chart_map{margin:0; padding:0px; height:40px;}
.chart_map ul{background-color:#fff; list-style:none; width:auto; height:auto; float:right; margin:0; padding:0;}
.chart_map li{width:auto; height:20px; line-height:19px; padding:10px; padding-left:15px; padding-right:25px; color:#777; float:right; display:block;}

.chart_map li ul{display:none; width:auto; height:auto; max-height:290px; list-style:none; border:#eee 2px solid; position:absolute; z-index:999; background-color:#fff; overflow:hidden; margin-top:10px; margin-left:-15px; padding-top:5px; padding-bottom:5px; overflow:auto;}
.chart_map li:hover ul{display:block;}
.chart_map li ul li {display:block; width:auto; height:auto; padding:0; margin:0; float:none; text-align:left; overflow:hidden;}

.chart_map li ul li a{display:block;height:29px; line-height:29px; padding-left:15px; padding-right:30px; font-size:12px;text-align:left; color:#777; white-space:nowrap;}
.chart_map li ul li a:hover{background-color:#ddd; text-decoration:none; cursor:pointer;}

.libgi{background:transparent url(../images/menu_drop_down.svg) top right no-repeat; background-position-y:7px; background-size:30px 24px;}
.libgi:hover {background-color:#eee;}


/*customer tooltip*/
#chartjs-tooltip {
	width:auto;
	font-size:13px;
	line-height:20px;
	font-family:Consolas,Monaco,Microsoft Yahei,Arial,Verdana;
	opacity:0;
	position:absolute;
	left:-10px;
	background:rgba(0, 0, 0, 0.8);
	color:white;
	padding:3px;
	padding-left:7px;
	padding-right:7px;
	border-radius:3px;
	-webkit-transition:all .1s ease;
	transition:all .1s ease;
	pointer-events:none;
	-webkit-transform:translate(-50%, 0);
	transform:translate(-50%, 0);
	overflow:visible;
}

#chartjs-tooltip.below {
	-webkit-transform:translate(-50%, 0);
	transform:translate(-50%, 0);
}

#chartjs-tooltip.below:before {
	border:solid;
	border-color:#111 transparent;
	border-color:rgba(0, 0, 0, 0.8) transparent;
	border-width:0 8px 8px 8px;
	bottom:1em;
	content:"";
	display:block;
	left:50%;
	position:absolute;
	z-index:999999;
	-webkit-transform:translate(-50%, -100%);
}

#chartjs-tooltip.above {
	-webkit-transform:translate(-50%, -100%);
	transform:translate(-50%, -100%);
}

#chartjs-tooltip.above:before {
	border:solid;
	border-color:#111 transparent;
	border-color:rgba(0, 0, 0, 0.8) transparent;
	border-width:8px 8px 0 8px;
	bottom:1em;
	content:"";
	display:block;
	left:50%;
	top:100%;
	position:absolute;
	z-index:999999;
	-webkit-transform:translate(-50%, 0);
	transform:translate(-50%, 0);
}