/**
 * @fileoverview 所有样式 必须引入~~
 *
 * @author NGM
 * @version 1.0
 */

/*页面通用的样式*/
 html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  box-sizing:border-box;
}

:after, :before {
	box-sizing: border-box;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
} 

html, body {
	height: 100%;
	color:#555;
}


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
/* ::-webkit-scrollbar
{
	width: 3px;
	height: 3px;
	background-color: #fff;
	position: absolute;
	width: 3px;
	margin-left: -10px;
	-webkit-appearance: none;
} */

/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track
/* {
	-webkit-box-shadow: inset 0 0 6px #fff;
	border-radius: 10px;
	background-color: #fff;
	border-right: none;
	border-left: none;
} */

/*定义滑块 内阴影+圆角*/
/* ::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: rgb(45, 47, 170);
	height: 50px;
	background-clip: content-box;
	border-color: rgb(45, 47, 170);
} */

/*页面通用的样式 end*/

/*
	Components 通用的样式 。 
	因为没有使用 预处理语言， 没法把一些配置提取出来作为参数， 可惜！
*/

/* 通用的颜色 */
.casia-primary {
	background-color: #fff;
	color:#555;
	border: 1px solid #c0c4cc;
}

.casia-normal {
	background-color: #33d0ff;/*409EFE*/
	color:#fff;
}

.casia-warning {
	background-color: #ffc000;/*E6A23A*/
	color:#fff;
}

.casia-danger {
	background-color: #e60012;
	color:#fff;
}

/* 通用的颜色 end*/


/* 通用的按钮 */

/* 为了使用尽可能少些class，这里不拆成
.casia-btn .btn-primary 这种格式 
虽然现在这样，多写很多样式，但是使用少写class*/

/* 默认按钮 */
.casia-btn-primary {
	display: inline-block;
	border: 1px solid #c0c4cc;
	background-color: #fff;
	color:#555;
	border-radius: 2px;
	width: 72px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	user-select: none;
}

.casia-btn-normal {
	display: inline-block;
  background-color: #33d0ff;/*409EFE*/
	color:#fff;
	border-radius: 2px;
	width: 72px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	user-select: none;
}

.casia-btn-warning {
	display: inline-block;
	background-color: #ffc000;/*E6A23A*/
	color:#fff;
	border-radius: 2px;
	width: 72px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	user-select: none;
}

.casia-btn-danger {
	display: inline-block;
	background-color: #e60012;
	color:#fff;
	border-radius: 2px;
	width: 72px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	user-select: none;
}
/* 默认按钮 end*/

/* 圆角按钮 */
.casia-angle-btn-primary {
	display: inline-block;
	border: 1px solid #c0c4cc;
	background-color: #fff;
	color:#555;
	border-radius: 15px;
	width: 80px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	user-select: none;
}

.casia-angle-btn-normal {
	display: inline-block;
  background-color: #33d0ff;/*409EFE*/
	color:#fff;
	border-radius: 15px;
	width: 80px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	user-select: none;
}

.casia-angle-btn-warning {
	display: inline-block;
	background-color: #ffc000;/*E6A23A*/
	color:#fff;
	border-radius: 15px;
	width: 80px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	user-select: none;
}

.casia-angle-btn-danger {
	display: inline-block;
	background-color: #e60012;
	color:#fff;
	border-radius: 15px;
	width: 80px;
	height: 30px;
	text-align: center;
	line-height: 30px;
	cursor: pointer;
	user-select: none;
}
/* 圆角按钮 end*/

/* 圆按钮 */
.casia-circle-btn-primary {
	display: inline-block;
	border: 1px solid #c0c4cc;
	background-color: #fff;
	color:#555;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	user-select: none;
}

.casia-circle-btn-normal {
	display: inline-block;
  background-color: #33d0ff;/*409EFE*/
	color:#fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	user-select: none;
}

.casia-circle-btn-warning {
	display: inline-block;
	background-color: #ffc000;/*E6A23A*/
	color:#fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	user-select: none;
}

.casia-circle-btn-danger {
	display: inline-block;
	background-color: #e60012;
	color:#fff;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 40px;
	cursor: pointer;
	user-select: none;
}
/* 圆按钮 end */

/* 通用的按钮 end*/


/* 通用的input框*/
.casia-input {
	border: 1px solid #c0c4cc;
	height: 30px;
	padding: 0 15px;
	border-radius: 5px;
}

.casia-area {
	border: 1px solid #c0c4cc;
	height: 50px;
	padding: 15px;
	border-radius: 5px;
	color: #333;
	font-size: 18px;
}
/* 通用的input框 end*/


/* 通用单选框，多选框 */

.casia-checkbox {
	position: relative;
}

.casia-checkbox::before {
	content: '';
	position: absolute;
	width: 14px;
	height: 14px;
	border: 1px solid #33d0ff;
	background-color: #fff;
	color: #33d0ff;
	font-size: 12px;
	line-height: 15px;
	text-align: center;
}

.casia-checkbox[type=checkbox]:checked::before {
	content: '\2714';
	/* color: #fff;
	background-color: #33d0ff; */
}

.casia-radio {
	position: relative;
}


.casia-radio::before {
	position: absolute;
	content: '';
	width: 14px;
	height: 14px;
	margin-left: -1px;
	border: 1px #33d0ff solid;
	border-radius: 50%;
	background-color: #fff;
	line-height: 14px;
	text-align: center;
	font-size: 16px;
}

.casia-radio[type=radio]:checked::before {
	content: "\2022";
	color: #fff;
	background-color: #33d0ff;
}

/* 通用单选框，多选框 end*/


.casia-border {
	border: 1px solid #c0c4cc;
}




/* 按钮动画， 大小， loading动画 */







/*后面是不同的组件的样式*/ 
 
 /*barChart*/
.common-showLineChart {
	padding: 10px;
}
.common-showLineChart-outLine {
	background-color: #c0c4cc;
	position: relative;
	height: 30px;
	margin: 8px 0;
}

.common-showLineChart-innerLine {
	height: 30px;
	position: absolute;
	width:0px;
	transition: width 2s;
}

.common-showLineChart-index, .common-showLineChart-title, .common-showLineChart-number {
	position: absolute;
	height: 100%;
	line-height: 30px;
}

.common-showLineChart-index {
	left: 5px;
	top: -5px;
	width: 28px;
	height: 28px;
	font-size: 12px;
	background-color: rgba(0,0,0,0);
	 
}
.common-showLineChart-index-background {
	position: absolute;
	width: 0;
	height: 0;
	border-width:30px 30px 30px 0;
	border-style:solid;
}

.common-showLineChart-title {
	left:30px;
	width: 78%;
	font-size: 18px;
}

.common-showLineChart-number {
	right:8px;
	font-size: 12px;
}

/*barChart end*/

 /*barChartT2*/
 .common-showLineChartT2 {
	padding: 10px;
}
.common-showLineChart-outLineT2 {
	background-color: #c0c4cc;
	position: relative;
	height: 10px;
	margin: 30px 0;
}

.common-showLineChart-innerLineT2 {
	height: 10px;
	position: absolute;
	width:0px;
	transition: width 2s;
}

.common-showLineChart-indexT2, .common-showLineChart-titleT2, .common-showLineChart-numberT2 {
	position: absolute;
	height: 100%;
	line-height: 30px;
}

.common-showLineChart-indexT2 {
	left: 5px;
	top: -25px;
	width: 28px;
	height: 28px;
	font-size: 12px;
	background-color: rgba(0,0,0,0);
	 
}
.common-showLineChart-index-backgroundT2 {
	position: absolute;
	top: -20px;
	width: 0;
	height: 0;
	border-width:30px 30px 30px 0;
	border-style:solid;
}

.common-showLineChart-titleT2 {
	left:30px;
	top: -25px;
	width: 78%;
	font-size: 18px;
}

.common-showLineChart-numberT2 {
	right:8px;
	top: -25px;
	font-size: 12px;
}

/*barChartT2 end*/

/*loading*/
.loading-model {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 999;
	background-color: rgba(222, 222, 222, 0.2);
}

.loading-model svg{
	position: absolute;
	top: 50%;
	left: 50%;
  transform: translate(-50%, -50%);

}
/*loading end*/


/*alert*/
#ct_page_alert {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .4);
  z-index: 1001;
}

#ct_page_alert_box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  min-height: 170px;
  margin: -210px 0 0 -150px;
  background-color: #fff;
}

#ct_page_alert_title {
  height: 40px;
  margin-top: 10px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  color: #09a5ee;
}

#ct_page_alert_content {
  min-height: 106px;
  padding: 10px 20px 60px;
  line-height: 22px;
  font-size: 18px;
  text-align: center;
  outline: none;
}

#ct_page_alert_button {
  width: 80px;
	position: absolute;
	right: 30px;
	bottom: 20px;
  height: 24px;
  background-color: #fff;
  border: 1px #09a5ee solid;
	outline: none;
	border-radius: 2px;
}

#ct_page_alert_button:hover {
  background: #edfaff;
}
/*alert end*/

/*notice*/
#ct_page_notice {
	overflow: hidden;
	white-space: nowrap;
	width: 90%;
	color: #999999;
	position: relative;
	height: 100%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#ct_page_notice_body {
	white-space: nowrap;
	display: inline;
	position:absolute;
	top: 0px;
	left: 0px;
}

#ct_page_notice_title {
	white-space: nowrap;
	float: left;
}

 #ct_page_notice_content {
	white-space: nowrap;
	display: inline;
}

#ct_page_notice_content div{
	white-space: nowrap;
	display: inline;
	margin-right: 50px;
}

/*notice end*/

/*modal*/
.ct_page_modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .4);
  z-index: 1001;
}

.ct_page_modal_box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  min-height: 190px;
  margin: -210px 0 0 -150px;
  background-color: #fff;
}

.ct_page_modal_title {
  height: 40px;
  margin-top: 10px;
  line-height: 40px;
  font-size: 20px;
  font-weight: 400;
  text-align: center;
  color: #09a5ee;
}

.ct_page_modal_content {
  min-height: 106px;
  padding: 10px 20px 60px;
  line-height: 22px;
  font-size: 18px;
  text-align: center;
  outline: none;
}

.ct_page_modal_footer {
	display: flex;
	justify-content: flex-end;
}

.ct_page_modal_button {
	width: 70px;
	margin-right: 10px;
  background-color: #fff;
  border: 1px #09a5ee solid;
	outline: none;
	border-radius: 2px;
}

.ct_page_modal_button-sure {
  width: 70px;
  background-color: #fff;
  border: 1px #09a5ee solid;
	outline: none;
	border-radius: 2px;
}

.ct_page_modal_button:hover {
  background: #edfaff;
}
/*modal end*/

/*userGroup */
#ct-userGroup {
	position: relative;
	height: 40px;
	cursor: pointer;
	user-select: none;
}

#ct-userGroup-img{
	position: absolute;
	top: 7px;
	left: 5px;
	border-radius: 50%;
}

#ct-userGroup-user{
	position: absolute;
	top: 10px;
	left: 31px;
}

#ct-userGroup-span {
	width: 10px;
	height: 10px;
	display: inline-block;
	transform: rotate(-135deg);
	margin-left: 3px;
	margin-bottom: 3px;
	border-top: 2px solid #606266;
	border-left: 2px solid #606266;
	cursor: pointer;
}

#ct-userGroup-menu {
	display: none;
	position: absolute;
	right: 0px;
	top: 45px;
	background: #fff;
	box-shadow: 0 6px 12px rgba(0,0,0,.275);
	width: 195px;
}

.ct-userGroup-li-line {
	height: 1px;
	width: 100%;
	border-top: 1px solid #dfdfdf;
}

.ct-userGroup-menu-item{
	cursor: pointer;
	height: 40px;
	color: #606266;
	font-size: 16px;
	line-height: 40px;
	list-style: none;
	padding-left: 20px;
}

.ct-userGroup-menu-item a{
	cursor: pointer;
	height: 40px;
	color: #606266;
	font-size: 16px;
	line-height: 40px;
	display: inline-block;
	width: 100%;
	list-style: none;
	text-decoration: none;
}

.ct-userGroup-menu-item a:hover{
	color: #1d3a7c;
	background-color: #eee;
} 


.ct-userGroup-menu-item:hover{
	color: #1d3a7c;
	background-color: #eee;
} 
/*userGroup end*/

/*changeTheme */
#ct-changeTheme {
	position: relative;
	height: 40px;
	cursor: pointer;
	user-select: none;
}

#ct-changeTheme-img{
	position: absolute;
	top: 7px;
	left: -3px;
	border-radius: 50%;
}

#ct-changeTheme-user{
	position: absolute;
	top: 10px;
	left: 31px;
}

#ct-changeTheme-span {
	width: 10px;
	height: 10px;
	display: inline-block;
	transform: rotate(-135deg);
	margin-left: 3px;
	margin-bottom: 3px;
	border-top: 2px solid #606266;
	border-left: 2px solid #606266;
	cursor: pointer;
}

#ct-changeTheme-menu {
	display: none;
	position: absolute;
	right: 0px;
	top: 45px;
	background: #fff;
	box-shadow: 0 6px 12px rgba(0,0,0,.275);
	width: 174px;
	z-index: 99;
}

.ct-changeTheme-menu-head {
	padding-left: 14px;
	font-size: 16px;
	font-weight: bold;
	background: #f2f5f9;
	height: 40px;
	color: #000;
	font-size: 16px;
	line-height: 40px;
}

.ct-changeTheme-li-line {
	height: 1px;
	width: 100%;
	border-top: 1px solid #dfdfdf;
}

.ct-changeTheme-menu-item{
	cursor: pointer;
	height: 40px;
	color: #606266;
	font-size: 16px;
	line-height: 40px;
	list-style: none;
	padding-left: 30px;
}

.ct-changeTheme-menu-item-name {
	display:inline-block;
  overflow:hidden;
  text-align:justify;
	width:70px;
}
.ct-changeTheme-menu-item-name:after{
  content:'';
  display:inline-block;
  width:100%;
}

.ct-changeTheme-menu-item-icon {
	visibility: hidden;
	position: relative;
	top: -54px;
	left: -15px;
}
.ct-changeTheme-menu-item-area {
	display: inline-block;
	width: 30px;
	height: 15px;
	position: relative;
	top: -54px;
	left: 15px;
	border-radius: 3px;
}

.ct-changeTheme-menu-item a{
	cursor: pointer;
	height: 40px;
	color: #606266;
	font-size: 16px;
	line-height: 40px;
	display: inline-block;
	width: 100%;
	list-style: none;
	text-decoration: none;
}

.ct-changeTheme-menu-item a:hover{
	color: #94a8cc;
	background-color: #eee;
} 

.ct-changeTheme-menu-item:hover{
	color: #94a8cc;
	background-color: #eee;
} 

.ct-changeTheme-menu-item-active .ct-changeTheme-menu-item-icon{
	visibility: visible;
}
/*changeTheme end*/

/*upNotice*/
#ct_page_upNotice {
	height: 30px;/* 必要元素 */
	line-height: 30px;
	overflow: hidden;/* 必要元素 */
	margin-right: 10px;
}
#ct_page_upNotice li {
	height: 30px;
	padding-left: 10px;
}


/* 默认是 下面这种样式。   */
::-webkit-scrollbar {
	position: absolute !important;
	width: 8px !important;
	height: 8px !important;
	/* margin-left: -10px !important; */
	-webkit-appearance: none !important;
	background: transparent !important;
}

::-webkit-scrollbar-track {
	/* //background-color: #fff;
	//border-right: none;
	//border-left: none */
	/* background-color: #f3f3f3 !important; */
	/* border-right: none !important;
	border-left: none !important; */
}
::-webkit-scrollbar-thumb {
  height: 50px !important;
  background-color: #d2d6df52 !important;
  background-clip: content-box !important;
  border-color: transparent !important;
  border-style: solid !important;
  border-width: 1px 1px 1px 5px !important;
  border-radius: 2px !important;
}
::-webkit-scrollbar-thumb:hover {
  height: 50px !important;
  background-color: #d2d6df52 !important;
  background-clip: content-box !important;
  border-color: transparent !important;
  border-style: solid !important;
  border-width: 1px 1px !important;
  border-radius: 5px !important;
}
::-webkit-scrollbar:hover {
  position: absolute !important;
  /* width: 15px !important;
  height: 15px !important;
  margin-left: -10px !important; */
  -webkit-appearance: none !important;
  background: transparent !important;
}