/**
********新UI公用的各个组件的样式**********
******具体展示效果需要参考对应的UI PSD文件
******2017-09-11**********
**/


/********************************   按钮样式部分  ***********************/
/**宽度为130px的按钮，用于页面底部，如：提交订单、保存设置等**/
.btn130{
    display: inline-block !important;
    width: 130px !important;
    height: 40px !important;
    line-height: 40px !important;
    font-size: 14px !important;
    text-align: center !important;
    border-radius: 5px !important;
    background: #65A7F3 !important;
    border-style: none !important;
    color: #fff !important;
    cursor: pointer !important;
}
.btn130:hover{
    color: #fff !important;
    background: #2b87f1 !important;
}
.btn130:active{
    color: #fff !important;
    background: #0061d8 !important;
}
/**宽度为80px的按钮，用于列表表头上方，如：全部导出、全部删除等**/
.btn80{
    display: inline-block !important;
    width: 80px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
    text-align: center !important;
    border-radius: 5px !important;
    background: #65A7F3 !important;
    border-style: none !important;
    color: #fff !important;
    cursor: pointer !important;
}
.btn80:hover{
    color: #fff !important;
    background: #2b87f1 !important;
}
.btn80:active{
    color: #fff !important;
    background: #0061d8 !important;
}
/**宽度为100px的按钮，用于列表表头上方，如：全部导出、全部删除等**/
.btn100{
    display: inline-block !important;
    width: 100px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
    text-align: center !important;
    border-radius: 5px !important;
    background: #65A7F3 !important;
    border-style: none !important;
    color: #fff !important;
    cursor: pointer !important;
}
.btn100:hover{
    color: #fff !important;
    background: #2b87f1 !important;
}
.btn100:active{
    color: #fff !important;
    background: #0061d8 !important;
}


/**宽度为50px的按钮，用于列表表头上方，如：全部导出、全部删除等**/
.btn50{
    display: inline-block !important;
    width: 48px !important;
    height: 24px !important;
    line-height: 24px !important;
    font-size: 12px !important;
    text-align: center !important;
    border-radius: 5px !important;
    background: #fff !important;
    border: 1px solid #dddddd !important;
    color: #65A7F3 !important;
    cursor: pointer !important;
    box-sizing: content-box !important;
}
.btn50:hover{
    color: #fff !important;
    background: #2b87f1 !important;
    border: 1px solid #2b87f1 !important;
}
.btn50:active{
    color: #fff !important;
    background: #0061d8 !important;
    border: 1px solid #0061d8 !important;
}

/****宽度为70px的按钮，用于设置时间点和星期的按钮********/
.btn70{
    display: inline-block !important;
    width: 70px !important;
    height: 24px !important;
    line-height: 22px !important;
    font-size: 12px !important;
    text-align: center !important;
    border-radius: 5px !important;
    background: #fff !important;
    border: 1px solid #cccccc !important;
    color: #666666 !important;
    cursor: pointer !important;
    box-sizing: border-box!important;
}
.btn70:hover{
    border: 1px solid #A7A7A7 !important;
}
.btn70:active{
    border: 1px solid #65A7F3 !important;
}
.btn70.active{
    color: #ffffff !important;
    background: #65A7F3 !important;
    border: 1px solid #65A7F3 !important;
}

/**宽度为70px的确定按钮，用于弹出窗口中的确定按钮**/
.btn70Confirm{
    display: inline-block !important;
    width: 70px !important;
    height: 30px !important;
    line-height: 30px !important;
    font-size: 12px !important;
    text-align: center !important;
    border-radius: 5px !important;
    background: #65A7F3 !important;
    border-style: none !important;
    color: #fff !important;
    cursor: pointer !important;
}
.btn70Confirm:hover{
    color: #fff !important;
    background: #2b87f1 !important;
}
.btn70Confirm:active{
    color: #fff !important;
    background: #0061d8 !important;
}

/**宽度为70px的取消按钮，用于弹出窗口中的取消按钮**/
.btn70Cancel{
    display: inline-block !important;
    width: 68px !important;
    height: 28px !important;
    line-height: 28px !important;
    font-size: 12px !important;
    text-align: center !important;
    border-radius: 5px !important;
    background: #fff !important;
    border: 1px solid #65A7F3 !important;
    color: #65A7F3 !important;
    cursor: pointer !important;
    box-sizing: content-box !important;
}
.btn70Cancel:hover{
    color: #fff !important;
    background: #2b87f1 !important;
    border: 1px solid #2b87f1 !important;
}
.btn70Cancel:active{
    color: #fff !important;
    background: #0061d8 !important;
    border: 1px solid #0061d8 !important;
}
/************************根据内容自适应宽度和高度的按钮************************/
.btnAuto{
    display: inline-block !important;
    padding: 7px 10px !important;
    background: #f3f9ff !important;
    color: #65A7F3 !important;
    border: 1px solid #eaeaea !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    box-sizing: content-box !important;
    text-align: center !important;
}
.btnAuto:hover{
    border: 1px solid #65A7F3 !important;
    color: #65A7F3 !important;
}
.btnAuto:active{
    background: #65A7F3 !important;
    color: #fff !important;
    border: 1px solid #65A7F3 !important;
}

/************************根据内容自适应宽度的按钮************************/
.btnWAuto{
    display: inline-block !important;
    height: 26px !important;
    line-height: 26px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    background: #f3f9ff !important;
    color: #65A7F3 !important;
    border: 1px solid #eaeaea !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    box-sizing: content-box !important;
}
.btnWAuto:hover{
    border: 1px solid #65A7F3 !important;
}
.btnWAuto:active{
    background: #65A7F3 !important;
    color: #fff !important;
    border: 1px solid #65A7F3 !important;
}


/************************ input输入框部分  ***************************/
/*默认宽度固定为40px(包括：border，内容居中)的灰色边框的input输入框*/
input.input40{
    width:40px !important;
    height: 24px !important;
    line-height: 22px !important;
    color: #666666 !important;
    border: 1px solid #cccccc !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    text-align: center !important;
}
input.input40:hover{
    border: 1px solid #A7A7A7 !important;
}
input.input40:focus{
    border: 1px solid #65A7F3 !important;
    color: #666666 !important;
}
input.input40::-webkit-input-placeholder{
    color: #cccccc !important;
}
/*默认宽度为228px的灰色边框的input输入框*/
input.input228{
    padding-left: 5px;
    width:223px !important;
    height: 26px !important;
    line-height: 26px !important;
    color: #666666 !important;
    border: 1px solid #cccccc !important;
    border-radius: 5px !important;
    box-sizing: content-box !important;
    caret-color: #65a7f3 !important;
}
input.input228:hover{
    border: 1px solid #A7A7A7 !important;
}
input.input228:focus{
    border: 1px solid #65A7F3 !important;
    color: #666666 !important;
}
input.input228::-webkit-input-placeholder{
    color: #cccccc !important;
}

/*默认宽度为230px,高度为24px的无边框的input输入框，用于搜索框*/
input.input230{
    padding-left: 10px;
    width:230px !important;
    height: 24px !important;
    line-height: 24px !important;
    color: #666666 !important;
    border: none !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
}
input.input230:hover{
    border: none !important;
}
input.input230:focus{
    border: none !important;
    color: #666666 !important;
}
input.input230::-webkit-input-placeholder{
    color: #cccccc !important;
}

/*默认宽度为298px的灰色边框的input输入框*/
input.input298{
    width:298px !important;
    height: 28px !important;
    color: #666666 !important;
    border: 1px solid #cccccc !important;
    border-radius: 5px !important;
    box-sizing: content-box !important;
}
input.input298:hover{
    border: 1px solid #A7A7A7 !important;
}
input.input298:focus{
    border: 1px solid #65A7F3 !important;
    color: #666666 !important;
}
input.input298::-webkit-input-placeholder{
    color: #cccccc !important;
}
/*默认宽度固定为300px(包括：border，padding值，padding-left默认为5px)的灰色边框的input输入框*/
input.input300{
    padding-left: 5px!important;
    width:300px !important;
    height: 30px !important;
    line-height: 28px !important;
    color: #666666 !important;
    border: 1px solid #cccccc !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    caret-color: #65a7f3 !important;
}
input.input300:hover{
    border: 1px solid #A7A7A7 !important;
}
input.input300:focus{
    border: 1px solid #65A7F3 !important;
    color: #666666 !important;
}
input.input300::-webkit-input-placeholder{
    color: #cccccc !important;
}
/*默认宽度为488px的灰色边框的input输入框*/
input.input488{
    width:488px !important;
    height: 28px !important;
    color: #666666 !important;
    border: 1px solid #cccccc !important;
    border-radius: 5px !important;
    box-sizing: content-box !important;
}
input.input488:hover{
    border: 1px solid #A7A7A7 !important;
}
input.input488:focus{
    border: 1px solid #65A7F3 !important;
    color: #666666 !important;
}
input.input488::-webkit-input-placeholder{
    color: #cccccc !important;
}

/****************************************** 可点击的URL或a标签 ***********************/
/**默认为蓝色并显示下划线**/
.urlLink,.urlLink:visited{
    color: #65A7F3 !important;
    text-decoration: underline !important;
    cursor: pointer;
}
.urlLink:hover{
    color: #2b87f1 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}
.urlLink:active{
    color: #0061d8 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
}
/****************************************** 常用样式的简写 ***********************/
.iblock{
    display: inline-block;
}

/**** 下拉框 ********/
.btnDate100{
    display: inline-block !important;
    min-width: 100px !important;
    height: 30px !important;
    line-height: 28px !important;
    font-size: 12px !important;
    padding: 0 15px 0 5px !important;
    border-radius: 5px !important;
    background: #fff !important;
    border: 1px solid #cccccc !important;
    color: #666666 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
/**通过伪类添加的下拉图标**/
.btnDate100:after{
    float: right;
    margin-right: 5px;
    content: url('/apm-web/static/images/terminal/newStyle/downArrow.png');
    width: 12px;
    height: 8px;
    padding-left: 20px;
}
.btnDate100:hover{
    border: 1px solid #A7A7A7 !important;
}
.btnDate100:active{
    border: 1px solid #65A7F3 !important;
}
.btnDate100.active{
    color: #ffffff !important;
    background: #65A7F3 !important;
    border: 1px solid #65A7F3 !important;
}
/****************************************** 共用弹出窗口用到的关闭图标 ***********************/
#commonWin_close,.commonWin_close{
    display: inline-block;
    float: right;
    cursor: pointer;
    background: url('/apm-web/static/images/terminal/newStyle/bclose.png') no-repeat;
}
#commonWin_close:hover,.commonWin_close:hover{
    background: url('/apm-web/static/images/terminal/newStyle/bcloseH.png') no-repeat;    
}
#commonWin_close:active,.commonWin_close:active{
    background: url('/apm-web/static/images/terminal/newStyle/bcloseA.png') no-repeat;    
}

#commonWin_title,.commonWin_title{
    font-size: 16px;
    color: #fff;
}
/****************************************** 共用搜索组件（含输入框和搜索按钮） ***********************/
/*搜索组件外框*/
.apm-searchbar {
	display: inline-block !important;
}
/*输入框*/
.apm-searchbar input.apm-searchinput {
    padding-left: 10px !important;
    float: left !important;
    width: 230px !important;
    height: 30px !important;
    line-height: 30px !important;
    border: 1px solid #ccc !important;
    border-radius: 5px 0 0 5px !important;
    border-right: none !important;
    caret-color: #65a7f3 !important;
    color: #666 !important;
    font-family: Microsoft YaHei !important;
}
.apm-searchbar input.apm-searchinput:hover {
    border-color: #a7a7a7 !important;
}
.apm-searchbar input.apm-searchinput:focus {
    border-color: #65a7f3 !important;
}
.apm-searchbar input.apm-searchinput::-webkit-input-placeholder {
    color: #a7a7a7 !important;
}
/*搜索按钮*/
.apm-searchbar .apm-searchbtn {
	float: left !important;
	width: 60px !important;
	height: 30px !important;
	border-radius: 0 5px 5px 0 !important;
	border: 1px solid #65a7f3 !important;
	background: #65a7f3 !important;
	color: #fff !important;
	font-family: Microsoft YaHei !important;
}
.apm-searchbar .apm-searchbtn:hover {
	background: #2b87f1 !important;
}
.apm-searchbar .apm-searchbtn:active {
	background: #0061d8 !important;
}
/****************************************** 共用输入框组件 ***********************/
/*移入移除效果*/
.apm-input {
	border: 1px solid #ccc !important;
	caret-color: #65a7f3 !important;
}
.apm-input:hover {
    border-color: #a7a7a7 !important;
}
.apm-input:focus, .apm-input:active {
    border-color: #65a7f3 !important;
}
.apm-input::-webkit-input-placeholder {
    color: #a7a7a7 !important;
}
/****************************************** 共用下拉框组件 ***********************/
.apm-select {
    display: inline-block !important;
    min-width: 100px !important;
    height: 30px !important;
    line-height: 28px !important;
    font-size: 12px !important;
    padding: 0 15px 0 5px !important;
    border-radius: 5px !important;
    background: #fff !important;
    border: 1px solid #cccccc !important;
    color: #666666 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
.apm-select:hover{
    border: 1px solid #A7A7A7 !important;
}
.apm-select:active{
    border: 1px solid #65A7F3 !important;
}
.apm-select.active{
    color: #ffffff !important;
    background: #65A7F3 !important;
    border: 1px solid #65A7F3 !important;
}
/**通过伪类添加的下拉图标**/
.apm-select:after{
    float: right;
    margin-right: 5px;
    content: url(/apm-web/static/images/terminal/newStyle/downArrow.png);
    width: 12px;
    height: 8px;
    padding-left: 20px;
}
/**下拉选项**/
.apm-option {
	height: 30px !important;
	line-height: 30px !important;
	text-align: center !important;
	cursor: pointer !important;
}
.apm-option:hover {
	color: #fff !important;
	background: #65a7f3 !important;
}
/****************************************** 共用注释 ***********************/
.apm-note {
	color: #999 !important;
	font-family: Microsoft YaHei !important;
	font-size: 12px !important;
}