* { margin: 0; padding: 0; text-decoration: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -moz-transition: all 300ms; -o-transition: all 300ms; -webkit-transition: all 300ms; transition: all 300ms; background-color: transparent; border: none; outline: none; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }
html { font-size: 10px; }
html, body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden; }
body { font-size: 1.4rem; display: flex; -ms-flex-direction: column; flex-direction: column; background-color: #eee; }

select { /*-moz-appearance: none;*/ }
textarea { resize:none;}
iframe { display: block; }
.container { flex: 1; display: flex; -ms-flex-direction: column; flex-direction: column; overflow: hidden; }
    .container.hide { opacity: 0; }

.flex_box { display: flex; }

.tip { color: #999; font-size: .875em; }

.xydate { text-align: center; width: 90px; }

.abtn { cursor: pointer; padding: .5rem 1rem; margin: 0 .2rem; border: solid 1px #666; color: #333; outline: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; text-align: center; white-space: nowrap; }
    .abtn:hover { background-color: #666; color: #fff; border-color: #666; }
    .abtn.disabled, .header .abtn.disabled:hover { border-color: #ccc; color: #ccc; background-color: transparent; cursor: not-allowed; }

.header { display: flex; border-bottom: solid 1px #ddd; align-items: center; flex-wrap: wrap; }
    .header .item { padding: 1rem; display: flex; }
        .header .item .item_tit { color: #999; display: flex; align-items: center; white-space: nowrap; }
        .header .item input { padding: .6rem 1rem; border: solid 1px #aaa; }


.main { display: flex; flex: 1; align-items: stretch; overflow: hidden; }
    .main .sidebar { width: 220px; overflow: hidden; display: flex; -ms-flex-direction: column; -webkit-flex-direction: column; flex-direction: column; }
    .main .content { flex: 1; }
.footer { display: flex; justify-content: space-between; align-items: center; border-top: solid 1px #ddd; padding: 1rem; }


.dialog { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.4); display: flex; flex-direction: column; justify-content: center; align-items: center; display: none; }
    .dialog.show { display: flex; }
    .dialog .middle_box { border-color: #333; border-style: none solid solid; border-width: 0 5px 5px; background-color: #eee; display: flex; flex-direction: column; color: #333; -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }
        .dialog .middle_box .box_head { display: flex; justify-content: space-between; align-items: center; height: 40px; background-color: #333; color: #fff; padding: 0 .5rem; }
            .dialog .middle_box .box_head .title { flex: 1; display: flex; align-items: baseline; }
                .dialog .middle_box .box_head .title .sub_title { font-size: .875em; margin-left: .5rem; }
            .dialog .middle_box .box_head .close { width: 18px; height: 18px; position: relative; cursor: pointer; }
                .dialog .middle_box .box_head .close:before, .dialog .middle_box .box_head .close:after { content: ""; position: absolute; left: 50%; top: 50%; background-color: #eee; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
                .dialog .middle_box .box_head .close:before { width: 16px; height: 2px; margin-left: -8px; margin-top: -1px; }
                .dialog .middle_box .box_head .close:after { height: 16px; width: 2px; margin-left: -1px; margin-top: -8px; }

        .dialog .middle_box .box_body { flex: 1; overflow: auto; }

.y_main { -moz-transition: none; -o-transition: none; -webkit-transition: none; transition: none; }


.form_box { padding: 1rem; }
.form_row { display: flex; justify-content: space-between; align-items: center; padding: .5rem; margin-bottom: .3rem; }
    .form_row .form_item { flex: 1; display: flex; justify-content: space-between; align-items: center; }
    .form_row .form_con { flex: 1 0; display: flex; align-items: center; }


.y_datatable { border-collapse: collapse; }
    .y_datatable th, .y_datatable td { text-align: left; padding: 10px; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; }

.y_databox { flex: 1; display: flex; -ms-flex-direction: column; flex-direction: column; width: 100%; }
    .y_databox .y_data_head { font-weight: bold; overflow-x: hidden; overflow-y: scroll; }
    .y_databox .y_data_body { flex: 1; overflow-x: auto; overflow-y: scroll; }
    .y_databox .y_data_item_box { flex: 1; display: flex; }
    .y_databox .y_data_item { /*flex-shrink: 0; flex-grow: 1;*/ display: flex; align-items: center; padding: 10px; width: 100px; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; overflow: hidden; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; }
        .y_databox .y_data_item .y_data_content { flex: 1; overflow: hidden; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; }
    .y_databox .abtn_box { display: flex; justify-content: center; }
        .y_databox .abtn_box .tip { color: #999; }
        .y_databox .abtn_box .abtn { cursor: pointer; padding: .2rem .5rem; margin: 0 .2rem; border: solid 1px #666; color: #333; outline: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; text-align: center; }
            .y_databox .abtn_box .abtn:hover { background-color: #666; color: #fff; border-color: #666; }
            .y_databox .abtn_box .abtn.disabled, .header .abtn.disabled:hover { border-color: #ccc; color: #ccc; background-color: transparent; cursor: not-allowed; }

    .y_databox .y_data_head .tips { display: inline-block; width: 15px; height: 15px; line-height: 15px; background-color: #ffd800; font-size: 11px; margin-left: .5em; border-radius: 50%; cursor: default; position: relative; text-align: center; }



.y_data_info { display: flex; justify-content: center; align-items: center; color: #666; height: 100%; }


.y_page_abtn_box { display: flex; border: solid 1px #ccc; color: #666; }
    .y_page_abtn_box .y_page_abtn { padding: .5rem .8rem; cursor: pointer; border-right: solid 1px #ccc; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; }
    .y_page_abtn_box .y_page_info { padding: .5rem 2rem; border-right: solid 1px #ccc; }
    .y_page_abtn_box .y_page_abtn:last-child { border-right: none; }
    .y_page_abtn_box .y_page_abtn:hover { background-color: #333; color: #fff; }


.y_foot .abtn_box { display: flex; padding: 1rem; }
    .y_foot .abtn_box .abtn { cursor: pointer; padding: .5rem 1.5rem; margin: 0 .2rem; border: solid 1px #666; color: #333; outline: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; user-select: none; text-align: center; }
        .y_foot .abtn_box .abtn:hover { background-color: #666; color: #fff; border-color: #666; }
        .y_foot .abtn_box .abtn.disabled, .header .abtn.disabled:hover { border-color: #ccc; color: #ccc; background-color: transparent; cursor: not-allowed; }



.y_loading_box { width: 100px; height: 100px; background-color: #000; display: flex; -ms-flex-direction: column; flex-direction: column; }
    .y_loading_box .y_loading_icon { flex: 1; display: flex; justify-content: center; align-items: center; }
        .y_loading_box .y_loading_icon:before { content: ""; width: 20%; padding-top: 20%; border: dotted 3px #fff; border-right-color: transparent; border-radius: 50%; -moz-animation: loading_rotate 1s linear infinite; -o-animation: loading_rotate 1s linear infinite; -webkit-animation: loading_rotate 1s linear infinite; animation: loading_rotate 1s linear infinite; }

@keyframes loading_rotate {
    to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-moz-keyframes name {
    to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}

@-webkit-keyframes name {
    to { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}




/*.y_select { width: 150px; position: relative; height: 32px; }
    .y_select ._value { width: 0; height: 0; display: block; clear: both; }
    .y_select ._text { border: solid 1px #aaa; padding-right: 24px; padding-left: 8px; line-height: 32px; overflow-x: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; background: url(../img/down_arrow.png) no-repeat 95% center; }
    .y_select ._data { border: solid 1px #aaa; position: absolute; right: 0; left: 0; top: 100%; max-height: 200px; overflow: auto; background-color: #fff; display: none; z-index: 1; margin-top: 1px; }
        .y_select ._data.show { display: block; }
        .y_select ._data ._item { padding: 5px 8px; border-bottom: dotted 1px #999; cursor: pointer; white-space: normal; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
            .y_select ._data ._item.hide { display: none; }
            .y_select ._data ._item:hover { color: #ff6a00; }
            .y_select ._data ._item:last-child { border-bottom: none; }*/


.y_select { width: 150px; position: relative; }
    .y_select ._value { width: 0; height: 0; display: block; clear: both; }
    .y_select ._text { min-height: 31px; border: solid 1px #aaa; padding: .5rem 24px .5rem 8px; overflow-x: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; overflow-x: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; background: url(../img/down_arrow.png) no-repeat 95% center; }
    .y_select ._data { border: solid 1px #aaa; position: absolute; right: 0; left: 0; top: 100%; max-height: 200px; overflow: auto; background-color: #fff; display: none; z-index: 1; margin-top: -1px; }
        .y_select ._data.show { display: block; }
        .y_select ._data ._item { padding: 5px 8px; border-bottom: dotted 1px #999; cursor: pointer; white-space: normal; overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; }
            .y_select ._data ._item.hide { display: none; }
            .y_select ._data ._item:hover { color: #ff6a00; }
            .y_select ._data ._item:last-child { border-bottom: none; }