@import url('Icons.css?id=9');
* { padding: 0px; margin: 0px; list-style: none; font-style: normal; text-decoration: none; }
html, body { min-height: 100%; background-color: #F2F2F2; }
html, body, input, select, textarea { line-height: 2em; outline: none; }
a { cursor: pointer; text-decoration: none; }
h1 { font-size: 1.75em; line-height: 1.75em; }
h2, .vl_huge { font-size: 18px; }
h3, .vl_big { font-size: 16px; }
h4, .vl_normal { font-size: 14px; }
h5, .vl_small { font-size: 12px; }
h6, .vl_mini { font-size: 10px; }
hr[title] { position: relative; border: none; border-top: 1px dashed #999; height: 0px; overflow: visible; margin: 15px 0px; }
hr[title]:after { content: attr(title); position: absolute; left: 50%; transform: translate(-50%,-60%); background-color: #FFF; padding: 0px 10px; }

.vl_click { cursor: pointer; }
.vl_left { text-align: left; }
.vl_center { text-align: center; }
.vl_right { text-align: right; }
.vl_block { display: block; }
.vl_inline { display: inline-block; }
.vl_blod { font-weight:bold; }
/*省略文字*/
.vl_omit { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/*淡入淡出动画*/
.vl_fade-enter-active { transition: all .2s; }
.vl_fade-leave-active { transition: all .2s; }
.vl_fade-enter, .vl_fade-leave-to { opacity: 0; }
/*遮罩层*/
.vl_shade { position: fixed; top: 0px; left: 0px; right: 0px; bottom: 0px; background-color: rgba(255, 255, 255, 0.3); z-index: 6; }
.vl_shade > .vl_icon_close:first-child { position: fixed; top: 10px; right: 10px; color: #FFF; font-size: 18px; }
/*浮层*/
.vl_layer { position: fixed; min-width: 50px; min-height: 50px; background-color: #FFF; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); border-radius: 5px; overflow: hidden; z-index: 7; }
.vl_layer .vl_layer_title { position: relative; display: block; text-align:left; font-size: 1.1em; font-weight:bold; line-height: 2.4em; padding: 0px 3em 0px 1em; }
.vl_layer .vl_icon_close { position: absolute; top: 0px; right: 0px; width: 24px; line-height: 24px; padding: 5px; text-align: center; }
.vl_layer.bottom { top: unset; bottom: 10vh; }
.vl_layer.middle { top: 50vh; transform: translate(-50%,-50%); }
.vl_layer > footer { position: relative; padding: 10px; text-align: center; }
.vl_layer > footer:empty { display: none }
.vl_layer > article { padding: 10px; }

/*满屏浮层*/
.vl_layer.vl_fill > article { max-height: calc(100% - 100px); overflow-y: auto; }
.vl_layer.vl_fill > footer { position: absolute; left: 0px; right: 0px; bottom: 0px; }

/*[组件]输入框*/
.vl_input_box { position: relative; display: inline-block; background-color: #FFF; border-bottom: 1px solid #CCC; }
.vl_input_box:after { position:absolute;top:0px; right:0px; line-height: 2em; width:2em; text-align:center; }
.vl_input { border: none; outline: none; line-height: 2em; height: 2em; box-sizing: border-box; width: calc(100% - 2em); }
.vl_input_line { display: inline-block; line-height: 2em; height: 2em; border-bottom: 1px solid #CCC; }
.vl_input_line input { border: none; background-color: rgba(0, 0, 0, 0.00); }

/*[组件]开关*/
.vl_switch { position: relative; background-color: #CCC; display: inline-block; width: 28px; height: 1.5em; border-radius: 0.75em; cursor: pointer; transition: all 0.3s; vertical-align: text-top; }
.vl_switch:after { content: ""; position: absolute; top: 1px; display: block; width: 16px; height: calc(1.5em - 2px); border-radius: 0.75em; background-color: #FFF; transition: all 0.3s; left: 1px; }
.vl_switch[data-value="true"] { background-color: #3ba272; }
.vl_switch[data-value="true"]:after { left: 11px; }

/*[组件]单选按钮*/
.vl_radio { display: inline-block; color: #999; margin: 0px 7px; transition: all 0.2s linear; }
.vl_radio:before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 5px; border-radius: 14px; border: 1px solid #CCC; vertical-align: middle; box-sizing: border-box; transform: translateY(-1px); transition: all 0.2s linear; }
.vl_radio[data-checked=true] { color: #9a60b4; }
.vl_radio[data-checked=true]:before { background-color: #FFF; border: 5px solid #9a60b4; }

/*[组件]复选按钮*/
.vl_checkbox { display: inline-block; color: #999; margin: 0px 7px; transition: all 0.2s linear; }
.vl_checkbox:before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 5px; border: 1px solid #CCC; border-radius: 3px; vertical-align: middle; box-sizing: border-box; transform: translateY(-1px); transition: all 0.2s linear; }
.vl_checkbox[data-checked=true] { color: #5470c6; }
.vl_checkbox[data-checked=true]:before { background-color: #FFF; border: 5px solid #5470c6; }


/*[组件]确认框*/
.vl_dialog { border: 1px solid #CCC; z-index: 10; }
.vl_dialog p { padding: 0.5em 0.75em; color: #000; text-indent: 2em; }
.vl_dialog > a { display: inline-block; text-align: center; line-height: 2.5em; box-sizing: border-box; border-top: 1px solid #E0E0E0; float: left; }
.vl_dialog > a + a { border-left: 1px solid #E0E0E0; }
.vl_dialog > a:nth-last-child(1) { width: 100%; }
.vl_dialog > a:nth-last-child(2),
.vl_dialog > a:nth-last-child(2) ~ a { width: 50%; }

/*[组件]提示框*/
.vl_toast { position: fixed; top: 20px; z-index: 10; }
.vl_toast li { margin-bottom: 10px; background-color: #FFF; border-radius: 5px; }
.vl_toast li p { position: relative; padding: 0px 1em; line-height: 2.5em; height: 2.5em; border-radius: 5px; border-style: solid; border-width: 1px; box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.3); }
.vl_toast li p:before { font-size: 1em; }
.vl_toast a.vl_icon_close { position: absolute; right: 10px; }

/*[组件]：标记*/
.vl_badge { position: relative; display: inline-block; cursor:pointer; }
.vl_badge_text { position: absolute; display: inline-block; top: -10px; right: 0px; min-width: 20px; line-height: 20px; border-radius: 20px; padding: 0px 5px; box-sizing: border-box; text-align: center; font-size: 12px; transform: scale(0.8) translateX(50%); white-space: nowrap; }

/*[组件]：链接与按钮*/
.vl_link,
.vl_button,
.vl_select { display: inline-block; height: 2em; line-height: calc(2em - 1px); vertical-align: middle; box-sizing: border-box; }
.vl_button,
.vl_select { border-radius: 3px; background-color: #FFF; border: 1px solid #CCC; color: rgba(0, 0, 0, 0.7); }


.vl_link { text-align: center; }
.vl_button { line-height: calc(2em - 1px); text-align: center; padding-left: 1em; padding-right: 1em; }
.vl_select { line-height: calc(2em - 1px); }
.vl_button:hover { opacity: 0.9; }
.vl_button:empty { width: 2em; border-radius: 2em; padding: 0em; }
.vl_link.vl_r_icon_loading,
.vl_button.vl_r_icon_loading { cursor: wait; }
.vl_checkbox_group_box { display:inline-block; }

/*[组件]：日历*/
.vl_datepicker { position: relative; display: inline-block; }
.vl_datepicker input { width: 100%; box-sizing: border-box; }
.vl_datepicker .vl_datepicker_table { position: absolute; opacity: 0.9; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px; }
.vl_datepicker_table { background-color: #FFF; text-align: center; width: 100%; border-collapse: collapse; box-sizing: border-box; border-radius: 5px; }
.vl_datepicker_table thead tr:first-child th { font-size: 16px; line-height: 30px; font-weight: normal; padding: 7px 0px; }
.vl_datepicker_table thead tr:first-child th { cursor: pointer; }
.vl_datepicker_table thead tr:first-child th[colspan] { cursor: default; }
.vl_datepicker_table td,
.vl_datepicker_table th { font-size: 12px; color: #777; border: 1px solid #EEE; border-left: none; border-right: none; line-height: 2.5em; }
.vl_datepicker_table .vl_datepicker_day { cursor: pointer; /*background-color: #F3F3F3;*/ }
.vl_datepicker_table .vl_datepicker_adjoin { color: #CCC; }
.vl_datepicker_table td:nth-child(6),
.vl_datepicker_table th:nth-child(6) { color: #058600; }
.vl_datepicker_table td.vl_datepicker_adjoin:nth-child(6) { color: rgba(5, 134, 0, 0.4); }
.vl_datepicker_table td:nth-child(7),
.vl_datepicker_table th:nth-child(7) { color: #ff0056; }
.vl_datepicker_table td.vl_datepicker_adjoin:nth-child(7) { color: rgba(255, 0, 86, 0.4); }
.vl_datepicker_table td.vl_datepicker_today { color: #08F; font-weight: bold; }
.vl_datepicker_table td.vl_datepicker_selected { background-color: #058600; color: #FFF; }
.vl_datepicker_table td.vl_datepicker_range { background-color: rgba(5, 134, 0, 0.1); }

/*加载中*/
.vl_loading.vl_shade { background-color: rgba(255, 255, 255, 0.5); text-align: center; color: #666; z-index: 100; }
.vl_loading .vl_icon_loading:before { display: block; margin-top: 30vh; font-size: 50px; margin-bottom: 10px; }
.vl_loading span { font-size: 12px; }

/*选项卡*/
.vl_tab { position: relative; }
.vl_tab > nav:first-child { border-bottom: 1px solid #EEE; padding: 0px 10px; }
.vl_tab > nav:first-child a { display: inline-block; border: 1px solid #EEE; min-width: 7em; text-align: center; background-color: #FFF; line-height: 2.5em; margin-bottom: -1px; z-index: 0; }
.vl_tab > nav:first-child a:first-child { border-top-left-radius: 5px; }
.vl_tab > nav:first-child a:last-child { border-top-right-radius: 5px; }
.vl_tab > nav:first-child a + a { margin-left: -1px; }
.vl_tab > nav:first-child a[data-active=true] { border-bottom-color: #FFF; z-index: 1; }

/*标签*/
.vl_tag { display: inline-block; font-size: 10px; padding: 2px 7px; text-align: center; border-radius: 5px; margin-right: 5px }
/*人民币*/
.vl_rmb:before {
    content: "￥";
    font-size: 12px;
}

.vl_qrcode * { margin:auto; text-align:center; }