/* reset */
p,ul,dl,dd,dt{
	margin: 0;
	padding: 0;
}
li{
	list-style: none;
}
.finfosoft input,
.finfosoft select{
	display: block;
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	font-family: "微软雅黑";
	font-weight: bold;
	text-align: center;
	cursor: pointer;
	outline: none;
}
.finfosoft .clearfix:after{
	content: "";
	display: block;
	clear: both;
}
.finfosoft .fl{
	float: left;
}
.finfosoft .fr{
	float: right;
}
.finfosoft .ib{
	display: inline-block;
}

/* Finfosoft前端框架 css库 */

/*环形进度条*/
.finfosoft-ring{
	position: relative;
	cursor: pointer;
}
.finfosoft-ring>input{
	position: absolute;
}

/*可拖拽开关*/
.finfosoft-onOff{
	width: 100%;
	height: 100%;
	position: relative;
	cursor: pointer;
}
.finfosoft-onOff:after{
	content: "";
	display: block;
	clear: both;
}
.finfosoft-onOff>.left,
.finfosoft-onOff>.right{
	width: 35%;
	font-size: 18px;
	text-align: center;
	color: #aeaeae;
	transition: 0.5s;
}
.finfosoft-onOff>.left{
	float: left;
}
.finfosoft-onOff>.right{
	float: right;
}
.finfosoft-onOff>.slideBar{
	position: absolute;
}
.finfosoft-onOff>.slider{
	position: absolute;
	border-radius: 50%;
	transition: 0.5s;
	box-shadow: 0 2px 2px rgba(0, 0, 0, 0.38);
}


/*仪表盘*/
.finfosoft-clock{
	position: relative;
	overflow: hidden;
}
.finfosoft-clock>.name{
	width: 100%;
	height: 20px;
	line-height: 20px;
	position: absolute;
	left: 0;
	top: calc( 50% - 20px );
	font-size: 14px;
	text-align: center;
	color: gray;
	font-weight: normal;
}
.finfosoft-clock>.time{
	width: 40%;
	height: 20px;
	line-height: 20px;
	position: absolute;
	left: 30%	;
	top: 50%;
	font-size: 14px;
	text-align: center;
	font-weight: normal;
	cursor: pointer;
}
.finfosoft-clock>.panel{
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	position: absolute;
	left: 0;
	top: 0;
	transition: 0.4s;
	transform: translateX(100%);
}
.finfosoft-clock>.panel.active{
	transform: translateX(0);
}
.finfosoft-clock>.panel>dd{
	width: 35%;
	height: 50px;
	background: #fff;
	position: absolute;
	top: calc( 50% - 60px );
	border-radius: 4px;
	transition: 0.4s;
}
.finfosoft-clock>.panel>dt{
	width: 100%;
	position: absolute;
	top: calc( 50% + 20px );
	text-align: center;
}
.finfosoft-clock>.panel>dt>span{
	width: 20%;
	height: 30px;
	line-height: 30px;
	position: absolute;
	top: 0;
	text-align: center;
	border-radius: 4px;
	color: #fff;
	font-weight: bold;
	font-size: 12px;
	transition: 0.4s;
	cursor: pointer;
	box-sizing: border-box;
	font-family: "微软雅黑";
}
.finfosoft-clock>.panel>dt>span:hover{
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.38);
}
.finfosoft-clock>.panel>dt>.yes{
	left: 25%;
	/* background: #1ab394; */
}
.finfosoft-clock>.panel>dt>.no{
	right: 25%;
	background: #757575;
	border-width: 1px;
	border-style: solid;
}
.finfosoft-clock>.panel>dd select{
	transition: 0.4s;
}
.finfosoft-clock>.panel>dd span{
	transition: 0.4s;
}
.finfosoft-clock>.panel>dd:hover{
	background: #000;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.38);
}
.finfosoft-clock>.panel>dd:hover p{
	color: #fff;
}
.finfosoft-clock>.panel>dd:hover select{
	color: #fff;
}
.finfosoft-clock>.panel>dd:hover option{
	color: #000;
}
.finfosoft-clock>.panel>dd:hover span{
	color: #fff;
}
.finfosoft-clock>.panel>.start{
	left: 10%;
}
.finfosoft-clock>.panel>.end{
	right: 10%;
}
.finfosoft-clock>.panel>dd>p{
	width: 100%;
	text-align: center;
	font-size: 14px;
	color: #000;
	line-height: 25px;
	font-weight: bold;
	font-family: "微软雅黑";
	transition: 0.4s;
}
.finfosoft-clock>.panel>dd>.box{
	width: 100%;
	text-align: center;
	line-height: 25px;
}
.finfosoft-clock>.plug{
	width: 30%;
	height: 30px;
	line-height: 30px;
	position: absolute;
	left: 35%;
	top: calc( 50% + 15px );
	cursor: pointer;
}
.finfosoft-clock>.plug>.plugNum,
.finfosoft-clock>.plug>.unit{
	width: 50%;
	height: 24px;
	line-height: 24px;
	position: absolute;
	top: 3px;
	font-size: 14px;
	font-weight: normal;
	text-align: center;
}
.finfosoft-clock>.plug>.plugNum{
	left: 0;
	border-radius: 2px;
	transition: 0.2s;
}
.finfosoft-clock>.plug>.plugNum:focus{
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.38);
}
.finfosoft-clock>.plug>.unit{
	right: 0;
}

/*loading*/
.finfosft-loading{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height:100%;
	display: none;
}
.finfosft-loading > .loading{
	margin:auto;
	width: 90px;
	height: 40px;
	position: relative;
	top:35%;
	left:0;
	right:0;
	/*top:50%;*/
	/*left:50%;*/
}
.finfosft-loading > .loading > span{
	display: inline-block;
	width: 8px;
	height: 100%;
	margin: 0 5px;
	border-radius: 4px;
	background: lightgreen;
	-webkit-animation: load 1s ease infinite;
}
.finfosft-loading >  .msgBox{
	margin-top: 8px;
	position: relative;
	text-align: center;
	top:40%;
}
@-webkit-keyframes load{
	0%,100%{
		height: 40px;
		background: lightgreen;
	}
	50%{
		height: 70px;
		margin: -15px 5px;
		background: lightblue;
	}
}
.finfosft-loading > .loading > span:nth-child(2){
	-webkit-animation-delay:0.2s;
}
.finfosft-loading > .loading > span:nth-child(3){
	-webkit-animation-delay:0.4s;
}
.finfosft-loading > .loading > span:nth-child(4){
	-webkit-animation-delay:0.6s;
}
.finfosft-loading > .loading > span:nth-child(5){
	-webkit-animation-delay:0.8s;
}

.finfosoft-selecter .selecter-bar{
	border-radius: 2px;
	width:4px;
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 100;
}
.finfosoft-selecter .selecter-bar>div{
	border-radius: 2px;
	position: absolute;
	width: 4px;
}