@charset "UTF-8";

body {
    background-color: #EEF5FC !important;
}

#main-content {
    background-color: #EEF5FC !important;
}

/* ---------------------------------------------------loading --------------------------------------------*/
.loading_box {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: rgba(100, 100, 100, 0.7);
    display: none;
    z-index: 100;
}

.loading_box img {
    width: 100px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ---------------------------------------------------loading --------------------------------------------*/

/* ---------------------------------------------------左侧菜单栏高度百分百 --------------------------------------------*/
body:not(.login) #body-wrap #sidebar {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 230px;
    padding: 80px 30px 50px;
    height: min-content;
    bottom: 0;
    right: 0;
    height: unset;
    overflow-y: auto;
}

/* ---------------------------------------------------左侧菜单栏高度百分百 --------------------------------------------*/
/* ---------------------------------------------------检索部分容器样子 --------------------------------------------*/
.search_item {
    display: flex;
    align-items: center;
    border: 1px solid #d5dce2;
    border-radius: 5px;
    background-color: #ffffff;
    box-shadow: #d5dce2 0px 0px 4px 0px;
    height: 41px;
    padding-left: 10px;
    padding-top: 4px;
    padding-bottom: 4px;
    padding-right: 5px;
    width: 100%;

}

.search_item_label {
    color: #19A1B8;
    font-weight: 700;
    font-size: 12px;
    border-right: 1px solid #dadada;
    /**div宽度随内容的变化*/
    width: auto;
    display: inline-block !important;
    padding-right: 10px;
    margin-right: 10px;
    text-align: center;
}

.search_item select {
    color: #666;
}

/* ---------------------------------------------------下拉按钮样式 --------------------------------------------*/
.dropbtn {
    color: #4A4A4A;
    padding: 1px;
    font-size: 12px;
    border: none;
    cursor: pointer;
}

/* 容器 <div> - 需要定位下拉内容 */
.dropdown {
    position: relative;
    display: inline-block;
    width: 100%;
}

/* 下拉内容 (默认隐藏) */
.dropdown-content {
    display: none;
    /* position: absolute; */
    background-color: #f9f9f9;
    min-width: 160px;
    /* box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); */
    z-index: 999;
    border: 1px solid red;
}

/* 下拉菜单的链接 */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* 鼠标移上去后修改下拉菜单链接颜色 */
.dropdown-content a:hover {
    background-color: #f1f1f1
}

/* 在鼠标移上去后显示下拉菜单 */
.dropdown:hover .dropdown-content {
    display: block;
}

/* 当下拉内容显示后修改下拉按钮的背景颜色 */
.dropdown:hover .dropbtn {
    background-color: #ffffff;
}


/* ---------------------------------------------------复选框样式 --------------------------------------------*/
/* 首先第一步就是隐藏原来的复选框
.regular-checkbox {
    display: none;
}

/*第二部定义现在复选框样式*/
/* .regular-checkbox+label { */
/* position: relative; */
/* display: inline-block; */
/*lable是内联元素所以需要加inline-block*/
/* padding: 7px; */
/*设置复选框大小*/
/* background-color: #ffffff; */
/*设置背景颜色*/
/* border-radius: 3px; */
/*复选框border*/
/* border: 1px solid #19A9B8; */
/* box-shadow: 0 1px 3px rgba(0,0,0,0.5);*/
/*创建的阴影效果  这里需要了解box-shadow的属性，前三个值分别是
        阴影离开横方向的距离   :offset-x
        阴影离开纵方向的距离   ：offset-y
        阴影的模糊半径：
        阴影的颜色 ：
    */
/* margin-bottom: 0px !important;
    margin-right: 10px; */
/* } */

/*第三部分做一个active的效果*/
/* .regular-checkbox+label:active,
.regular-checkbox+label:checked+label:active {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
} */

/*选中之后的样式*/
/* .regular-checkbox:checked+label {
    background-color: #19A9B8;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
} */

/*选中后的效果*/
/* .regular-checkbox:checked+label:after { */
/* content: '\2714'; */
/*这是一个对勾*/
/* position: absolute;
    font-size: 12px; */
/*设置对勾的大小*/
/* top: -3px;
    left: 1px; */
/*设置位置的偏向*/
/* color: #ffffff; */
/*设置颜色绿色*/
/* font-weight: bold; */
/*设置对勾的粗细*/
/* } */

.check_box_item {
    display: flex;
    align-items: center;
    margin-right: 20px;
}


/* --------------------------------------------------- STATUS 复选框样式 --------------------------------------------*/
.status_text span {
    font-size: 12px;
    font-weight: 600;
    color: #4A4A4A;
    margin-right: 25px;
}

.status_text input[type=checkbox] {
    vertical-align: middle;
}

.custom-control-label {
    font-size: 12px;
    color: #4A4A4A;
    font-weight: 600;
    margin-right: 30px;
    padding-left: 5px;
}

/* --------------------------------------------------- TERM 样式 --------------------------------------------*/

body:not(.login) #body-wrap #main-content .page-header .widgets.search select {
    font-size: 12px !important;
    font-weight: 600;
    color: #4A4A4A;
    border: none;
    background-color: transparent;
}

body:not(.login) #body-wrap #main-content .page-header .widgets.search input[type=text] {
    border: none;
    font-size: 12px !important;
    color: #4A4A4A;
    font-weight: 600;
}

body:not(.login) #body-wrap #main-content .page-header .widgets.search input[type=text].daterange {
    background-size: 16px auto;
}

body:not(.login) #body-wrap #main-content .sec {
    margin-top: 0px;
}

.daterange {
    font-size: 12px;
    font-weight: 600;
    color: #4A4A4A;
}

/* --------------------------------------------------- TERM下的检索样式 --------------------------------------------*/

.retrieve_text {
    padding: 5px 0px 5px 10px;
    font-size: 12px;
    color: #4A4A4A;
    display: flex;
}

.retrieve_text>div:nth-child(2) {
    margin-left: auto;
}

.retrieve_text>div:nth-child(3) {
    margin-left: 20px;
}

.retrieve_text span {
    font-weight: 600;
}

.custom-control-label::before {
    width: 1.3rem !important;
    height: 1.3rem !important;
}

.custom-control-label::after {
    width: 1.5rem !important;
    height: 1.5rem !important;
    left: -1.6rem !important;
}

.custom-control-input:checked~.custom-control-label::before {
    color: #fff !important;
    border-color: #19A1B8 !important;
    background-color: #19A1B8 !important;
}

.td_detail {
    border: 1px solid #979797;
    text-align: center;
    font-size: 12px;
    color: #000;
    width: 78px;
    height: 30px;
    border-radius: 10px;
    line-height: 30px;
    font-weight: 600;
    cursor: pointer;
}

.table01 th,
.table01 td {
    text-align: center;
}

.td_goods {
    text-align: left !important;
}

tr span {
    font-size: 24px;
}


/* --------------------------------------------------- 监视器按钮样式 --------------------------------------------*/

.monitor_btn span {
    font-size: 14px;
    font-weight: 600;
}

.monitor_btn img {
    width: 25px;
    height: auto;
    vertical-align: middle;
}

.fullscreen_btn span {
    font-size: 14px;
    font-weight: 600;
}

.fullscreen_btn img {
    width: 25px;
    height: auto;
    vertical-align: middle;
}

/* --------------------------------------------------- 分页样式 --------------------------------------------*/

.page_btn {
    display: flex;
    align-items: center;
}

.page_btn img {
    width: 10px;
    height: 10px;
    margin: 0px 3px;
    cursor: pointer;
}

.page_select {
    display: flex;
}

.page_select>div {
    width: 16px;
    height: 16px;
    text-align: center;
    line-height: 16px;
    border: 1px solid #4A4A4A;
    border-radius: 4px;
    margin: 0px 3px;
    cursor: pointer;
}

.page_select span {
    display: block;
    font-size: 12px;
    transform: scale(0.9);
}

.page_action {
    background-color: #4A4A4A !important;
    color: #FFF !important;
}

.order_list_status {
    display: inline-block;
    width: 100px;
    font-size: 11px;
    font-weight: bold;
    border-radius: 5px;
}

.order_list_status_2000 {
    color: #FFFFFF;
    background-color: #666666;
}

.order_list_status_7000 {
    color: #FFFFFF;
    background-color: #E65624;
}

.order_list_status_7010 {
    color: #FFFFFF;
    background-color: #509B2D;
}

.order_list_status_7011 {
    color: #000000;
    background-color: #CCCCCC;
}

/* --------------------------------------------------- 弹窗样式 --------------------------------------------*/
.mask_mode {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9;
    display: none;
}

.mask_mode>div {
    position: absolute;
    /*top: 20px;*/
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    /*width: 96%;
    height: 90%;*/
    height: 100%;
    z-index: 10;
    background-color: #FFF;
    /*border-radius: 8px;*/
    box-shadow: #333 0px 0px 8px;
    padding: 10px 20px;
}

.header_div {
    display: flex;
    height: 50px;
    align-items: baseline;
    color: #666;
    justify-content: space-between;
    /*border-bottom: 2px solid #eee;*/
}

.header_div>div {
    /* flex: 1; */
    align-items: center;
    /* justify-content: center; */
    /*font-size: 16px;*/
}

.header_div span {
    font-weight: bold;
    font-size: 24px;
    padding: 0px 2px;
}

.header_div .header_left {
    display: flex;
    align-items: center;
    font-weight: bold;
}

.header_div .header_right {
    width: 29%;
    margin-right: 20px;
    text-align: right;
}

.header_div .header_right button {
    font-size: 12px;
    font-weight: bold;
    background-color: #19A1B8;
    color: #FFFFFF;
    padding: 5px 20px;
    border-radius: 5px;
}

.header_div .header_left img {
    width: 25px;
    margin-right: 20px;
    margin-top: 10px;
    margin-left: 10px;
    cursor: pointer;
}

.header_left>div {
    margin-top: 10px;
}

.order {
    display: flex;
    margin-top: 8px;
    border-top: 1px solid #DDD;
    height: 90%;
}

.order>div {}

.order>div:nth-child(1) {
    background-color: rgb(239, 239, 239);
    width: 50%;
    overflow-y: auto;
    height: 98%;
}

#item {
    display: flex;
    margin-top: 8px;
    border-top: 1px solid #DDD;
    height: 90%;
    flex-direction: column;
    overflow-y: auto;
}

#item>div:nth-child(1) {
    background-color: #FFFFFF;
    width: 100%;
    overflow-y: unset;
    height: auto;
}

#item .order_num {
    text-align: center;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 5px;
    margin-bottom: 5px;
}

#item .num_box {
    display: inline-block;
    width: 70%;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 20px;
    font-weight: bold;
}

#item .num_box span {
    font-size: 12px;
    display: inline-block;
    width: 65%;
    padding-bottom: 5px;
}

#item .num_box .num {
    font-size: 18px;
    width: 30%;
}

#item .item_text {
    position: relative;
}

#item .item_text .item_text_step {
    display: flex;
    border: 2px solid #d0d0d0;
    border-radius: 5px;
}

#item .item_text .item_text_step .step_item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-right: auto;
    text-align: center;
}

#item .item_text .item_text_step .step_item .step_name {
    font-size: 14px;
    color: #999;
    font-weight: bold;
}

#item .item_text .item_text_step .step_item .center {
    background-color: #BFBEBE;
    border: 2px solid #BFBEBE;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#item .item_text .item_text_step .step_item .center img {
    width: 20px;
}

.process_list {
    width: 50%;
    margin-left: 3%;
    position: relative;
}

#order_detail_right {
    overflow-y: auto;
    max-height: 100%;
}

.item_left {}


.item_left>div {
    background-color: #EFEFEF;
    cursor: pointer;
}

.item_left .active {
    background-color: #fff;
}

.item_left .active .item_cont {
    border-bottom: unset !important;
    background-color: #fff;
}

.item_left>div:hover {
    background-color: rgba(255, 0, 0, 0.15) !important;
}

.item_cont {
    display: flex;
    border-bottom: 2px solid rgb(225, 225, 225);
    padding: 13px 0px 10px 5px;
}

.item_cont>div {
    /*flex: auto;*/
}

.item_cont_left1 {
    width: max-content;
    height: auto;
    margin: 0px 0px 15px 0px;
    position: relative;
    flex: unset !important;
    padding: 5px 10px;
    width: 60px;
    position: relative;
}

.item_cont_left1 img {
    width: 100%;
}

.item_cont_left1 .warn {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -60%);
    color: #fff;
    font-size: 14px;
}

.item_cont_left1 .is_new {
    position: absolute;
    width: 55%;
    left: 50%;
    top: 15%;
    transform: translate(-50%, -50%);
}

.item_cont_left1 .is_warn {
    position: absolute;
    width: 55%;
    left: 50%;
    top: 60%;
    transform: translate(-50%, -50%);
}

.item_cont_left2 {
    color: #666;
    padding-left: 8px;
}

.left2_time {
    font-size: 20px;
    line-height: 20px;
}

.left2_num {
    display: flex;
    margin-top: 5px;
}

.left2_num p {
    font-size: 18px;
}

.left2_num span {
    font-size: 40px;
    font-weight: bold;
    line-height: 40px;
    color: #333;
    margin-right: 5px;
}

.left2_num>div:nth-child(2) {
    margin-left: 40px;
}

.order_id {
    margin-top: 5px;
}

.item_cont_left3 {
    width: 120px;
    text-align:center;
    margin-left: auto;
}

.item_cont_left3>div {
    color: #666;
}

.item_cont_left3>div:nth-child(1) {
    text-align: center;
    line-height: 30px;
    border: 1px solid #999;
    border-radius: 6px;
    font-weight: bold;
    margin-top: 20px;
    background-color: #eee;
    color: #333;
}

.item_btn01_left{
    width: 80px;
    height: 40px;
    border: 1px solid #999;
    border-radius: 6px;
    font-weight: bold;
    margin-top: 20px;
    background-color: #eee;
    color: #333;
}

.item_cont_left3>div:nth-child(2) {
    margin-top: 3px;
}

.item_cont_left3 p {
    font-size: 40px;
    font-weight: bold;
    line-height: 40px;
    color: #333;
    margin-right: 5px;
}

.item_cont_left4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
}

.item_cont_left4>div:nth-child(1) {
    font-size: 18px;
    color: #666;
}

.item_cont_left4 .left4_img {
    background: rgb(191, 190, 190);
    border-radius: 50%;
    text-align: center;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.item_cont_left4 .left4_img_active {
    background: rgb(79, 156, 41);
}

.item_cont_left4 .left4_img_newactive {
    background:red;
}

.item_cont_left4 .left4_img_blackactive {
    background:black;
}

.item_cont_left4 .left4_img_blueactive {
    background: #19A1B8;
}

.item_cont_left4 .left4_img img {
    width: 30px;
}

.status_gray {
    background-color: #9B9B9B;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    text-align: center;
    padding: 7px 0;
}

.status_gray span {
    margin-right: 0;
}

.status_gray_out {
    border: 3px solid #9B9B9B;
    border-radius: 5px;
    width: 25%;
    margin: 0 5px !important;
}

.status_gray_single {
    background-color: #9B9B9B;
    color: #FFFFFF;
    text-align: center;
    padding: 9px 0;
    border: 1px solid #9B9B9B;
    border-radius: 5px;
    width: 25%;
    height: 95px;
    margin: 0 5px !important;
}

.status_green {
    background-color: #509B2D;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    text-align: center;
    padding: 7px 0;
}

.status_green span {
    margin-right: 0;
}

.status_green_out {
    border: 3px solid #509B2D;
    border-radius: 5px;
    width: 25%;
    margin: 0 5px !important;
}

.status_green_single {
    background-color: #509B2D;
    color: #FFFFFF;
    text-align: center;
    padding: 9px 0;
    border: 1px solid #509B2D;
    border-radius: 5px;
    width: 25%;
    height: 95px;
    margin: 0 5px !important;
}

.status_orange {
    background-color: #F5A623;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    text-align: center;
    padding: 7px 0;
}

.status_orange span {
    margin-right: 0;
}

.status_orange_out {
    border: 3px solid #F5A623;
    border-radius: 5px;
    width: 25%;
    margin: 0 5px !important;
}

.status_orange_single {
    background-color: #F5A623;
    color: #FFFFFF;
    text-align: center;
    padding: 9px 0;
    border: 1px solid #F5A623;
    border-radius: 5px;
    width: 25%;
    height: 95px;
    margin: 0 5px !important;
}

.status_red {
    background-color: #D0021B;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    text-align: center;
    padding: 7px 0;
}

.status_red span {
    margin-right: 0;
}

.status_red_out {
    border: 3px solid #D0021B;
    border-radius: 5px;
    width: 25%;
    margin: 0 5px !important;
}

.status_red_single {
    background-color: #D0021B;
    color: #FFFFFF;
    text-align: center;
    padding: 9px 0;
    border: 1px solid #D0021B;
    border-radius: 5px;
    width: 25%;
    height: 95px;
    margin: 0 5px !important;
}

.status_blue {
    background-color: #206dbf;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    text-align: center;
    padding: 7px 0;
}

.status_blue span {
    margin-right: 0;
}

.status_blue_out {
    border: 3px solid #206dbf;
    border-radius: 5px;
    width: 25%;
    margin: 0 5px !important;
}

.status_blue_single {
    background-color: #206dbf;
    color: #FFFFFF;
    text-align: center;
    padding: 9px 0;
    border: 1px solid #206dbf;
    border-radius: 5px;
    width: 25%;
    height: 95px;
    margin: 0 5px !important;
}

.status_black {
    background-color: black;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
    border-radius: 5px;
    text-align: center;
    padding: 7px 0;
}

.status_black span {
    margin-right: 0;
}

.status_black_out {
    border: 3px solid black;
    border-radius: 5px;
    width: 25%;
    margin: 0 5px !important;
}

.status_black_single {
    background-color: black;
    color: #FFFFFF;
    text-align: center;
    padding: 9px 0;
    border: 1px solid black;
    border-radius: 5px;
    width: 25%;
    height: 95px;
    margin: 0 5px !important;
}


.status_fontstyle {
    font-size: 24px !important;
    color: #FFFFFF !important;
    margin-right: 0 !important;
}

.process_list {}

.process_item {
    width: 90%;
    border-bottom: 1px solid #CCC;
    padding: 20px 0px 10px 0px;
    display: flex;
}

.process_item .order_num {
    text-align: center;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 5px;
    margin-bottom: 5px;
}

.process_item .item_img {
    border: 2px solid #CCC;
    border-radius: 5px;
    width: 25%;
    position: relative;
    height: fit-content;
    padding: 10px 0;
}

.process_item .item_img .num_box {
    position: absolute;
    bottom: -38px;
    right: 18px;
    background-color: #fff;
    color: #333;
    border: 1px solid #ccc;
    border-radius: 20px;
    padding: 0px 10px;
    display: flex;
    align-items: center;
    height: 30px;
}

.process_item .item_img .num_box .num {
    font-size: 22px;
    font-weight: bold;
    margin-left: 20px;
}


.process_item .item_text {
    margin-left: 30px;
    width: 75%;
    position: relative;
}

.process_item .item_text .item_text_name {
    color: #333;
    font-size: 24px;
    font-weight: bold;
    width: 100%;
    line-height: 30px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.process_item .item_text .num_box {
    display: inline-block;
    width: 30%;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 20px;
    padding-left: 20px;
    font-weight: bold;
}

.process_item .item_text .num_box span {
    font-size: 12px;
    display: inline-block;
    width: 70%;
    padding-bottom: 5px;
}

.process_item .item_text .num_box .num {
    font-size: 18px;
    width: 25%;
}

.process_item .item_text .item_text_opations {
    color: #333;
    font-size: 14px;
    font-weight: bold;
    width: 80%;
    line-height: 18px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.process_item .item_text .item_text_step {
    display: flex;
    margin-top: 25px;
    border: 2px solid #d0d0d0;
    border-radius: 5px;
    padding: 0px 0px 0px 60px;
    /* justify-content: center; */
}

.process_item .item_text .item_text_step .step_item {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-right: auto;
    text-align: center;
}

.process_item .item_text .item_text_step .step_item .step_name {
    font-size: 14px;
    color: #999;
    font-weight: bold;
}

.process_item .item_text .item_text_step .step_item .center {
    background-color: #BFBEBE;
    border: 2px solid #BFBEBE;
    border-radius: 50%;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process_item .item_text .item_text_step .step_item .center img {
    width: 20px;
}

.Interspersed {
    width: calc(80% - 70px);
    border-top: 2px solid #BFBEBE;
    margin-left: 80px;
    margin-top: -45px;
    height: 45px;
}

#item .Interspersed {
    width: calc(80% - 40px);
    border-top: 2px solid #BFBEBE;
    margin-left: 45px;
    margin-top: -45px;
    height: 45px;
}

.order_detail {
    background-color: #FFFFFF;
    padding: 0 50px;
}

.step_time {
    height: 26px;
}

.act_center {
    background-color: #12A2B9 !important;
    border-color: #12A2B9 !important;
}

.down_ico {
    text-align: center;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, -50%);
}

.down_ico img {
    width: 30px;
    margin-top: 13px;
}

.td_btn {
    font-size: 14px !important;
}

.bulk-edit-submit {
    display: flex;
}

.bulk-edit-submit .btn01:hover {
    background-color: rgb(25, 161, 184);
    color: #fff;
}

.bulk-edit-submit>select {
    width: 300px;
    color: #aaa;
    background: #f9f9f9;
    padding: 0px 20px;
    border-radius: 60px;
    margin-right: 20px;
    font-size: 16px;
}

/* --------------------------------------------------- 店铺一览 start --------------------------------------------*/

/* --------------------------------------------------- 店铺一览 end--------------------------------------------*/

/* 弹窗 */
.mask_cont {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 100%;
    height: 100%;
    z-index: 9;
    background-color: rgba(0, 0, 0, 0.3);
    display: none;
}

.mask_cont>div {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    background-color: #FFF;
    border: 1px solid #EEE;
    z-index: 11;
    width: 50vw;
    height: 80vh;
    padding: 10px 15px;
    border-radius: 10px;
    box-shadow: #ccc 0px 0px 5px;
    overflow: auto;
}

.mask_cont dl+dl {
    margin-top: 20px;
}

.mask_cont_top{
    position: absolute;
    width: calc(100% - 30px);
    height: calc(100% - 150px);
    overflow: auto;
    padding-bottom: 50px;
}

.mask_cont .form_btn {
    display: flex;
    width: 500px;
    margin: auto;
    bottom: 20px;
    cursor: pointer;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.mask_cont .form_btn>div:nth-child(1) {
    background: #DDD;
    width: 120px;
    height: 36px;
    border-radius: 4px;
    color: #333;
    text-align: center;
    line-height: 36px;
}

.mask_cont .form_btn>div:nth-child(2) {
    margin-left: auto;
    background: #5bc2dc;
    width: 100px;
    height: 36px;
    border-radius: 4px;
    color: #FFF;
    text-align: center;
    line-height: 36px;
}

.mask_cont .form_btn>div:nth-child(3) {
    margin-left: auto;
    background: rgb(242, 85, 85);
    width: 100px;
    height: 36px;
    border-radius: 4px;
    color: #FFF;
    text-align: center;
    line-height: 36px;
}

/* --------------------------------------------------- 统计页面 时间选项 --------------------------------------------------- */
.option_time .dropdown {
    width: 25%;
    text-align: center;
    border-left: 1px solid #dadada;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.option_time .dropdown:nth-child(1) {
    border: none;
}

/* 统计表模块  开始 */
.chart_mode {
    width: calc(100% - 250px);
    background-color: #FFF;
    margin-left: 100px;
    padding-bottom: 15px;
    padding-top: 10px;
}

.chart_mode .time_switch {
    display: flex;
    width: 460px;
    margin: auto;
    margin-top: 5px;
}

.time_switch img {
    width: 13px;
    margin-top: 9px;
    margin-right: 3px;
}

.chart_mode .time_switch>div {
    text-align: center;
    line-height: 30px;
}

.chart_mode .time_switch>div:nth-child(1) {
    width: 80px;
    border: 1px solid #B2B3B6;
    border-radius: 3px;
}

.chart_mode .time_switch>div:nth-child(2) {
    width: 300px;
    font-size: 18px;
    font-weight: bold;
}

.chart_mode .time_switch>div:nth-child(3) {
    width: 80px;
    border: 1px solid #B2B3B6;
    border-radius: 3px;
}

.chart_mode .order_num {
    display: flex;
    width: 600px;
    margin: auto;
    margin-top: 10px;
}

.chart_mode .order_num>div {
    width: calc(50% - 10px);
    background-color: #48A0B3;
    color: #FFF;
    padding: 5px 15px;
    border-radius: 5px;
}

.chart_mode .order_num>div:nth-child(2) {
    margin-left: 20px;
}

.mode_name {
    font-size: 14px;
}

.mode_number {
    font-size: 20px;
    margin-top: -10px;
}

.chart_table_name {
    width: calc(100% - 30px);
    margin-left: 15px;
    background-color: #48A0B3;
    height: 60px;
    color: #FFF;
    line-height: 60px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    margin-top: 10px;
    padding: 0px 15px;
    font-size: 20px;
}

.chart_table_cont {
    width: calc(100% - 30px);
    margin-left: 15px;
    border: 2px solid #EEE;
}

.chart_table_top {
    display: flex;
    width: calc(100% - 30px);
    margin-top: 10px;
    margin-left: 15px;
}

.chart_table_top>div {
    width: 50%;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-top: 2px solid #EEE;
    border-right: 2px solid #EEE;
    border-left: 2px solid #EEE;
}

#container {
    width: 100%;
    height: 500px;
    margin-top: 10px;
}

#container canvas {
    width: 110% !important;
    margin-left: -5% !important;
}

.option_act {
    color: #49A0B4 !important;
}

.chart_table_act {
    color: #49A0B4;
    border: none !important;
    border-bottom: 2px solid #EEE !important;
}

/* --------------------------------------------------- 弹窗詳細样式 --------------------------------------------*/
.mask_mode_detail {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    /*background-color: rgba(0, 0, 0, 0.5);*/
    z-index: 9;
    display: none;
}

.mask_mode_detail>div {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 60%;
    height: 85%;
    z-index: 10;
    background-color: #FFF;
    border-radius: 8px;
    box-shadow: #333 0px 0px 8px;
    padding: 10px 20px;
}

.mask_mode_category {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9;
    display: none;
}

.mask_mode_category>div {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    margin-left: 70%;
    /*margin-top: 32%;*/
    width: 30%;
    height: 32%;
    height: auto;
    z-index: 10;
    background-color: #FFF;
    border-radius: 8px;
    box-shadow: #333 0px 0px 8px;
    padding: 10px 20px;
}

/*@media screen and (max-width: 1280px) {
    .mask_mode_category>div {
        margin-top: 28% !important;
        height: 44% !important;
    }
}*/

.mask_mode_icon {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9;
    display: none;
}

.mask_mode_icon>div {
    position: fixed;
    top: 50%;
    left: 50%;
    margin: auto;
    width: 50%;
    z-index: 10;
    background-color: #000000;
    color: #FFFFFF;
    border-radius: 8px;
    box-shadow: #333 0px 0px 8px;
    padding: 20px;
    transform: translate(-50%, -50%);
}
@media screen and (max-width: 1280px) {
    .mask_mode_icon>div {
        height: 52% !important;
    }
}
.mask_mode_icon .content .close {
    background-color: #FFFFFF;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    margin-bottom: 30px;
}

.mask_mode_user {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9;
    display: none;
}

.mask_mode_user>div {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    margin: auto;
    width: 80%;
    height: 85%;
    z-index: 10;
    background-color: #FFF;
    border-radius: 8px;
    box-shadow: #333 0px 0px 8px;
    padding: 10px 20px;
}

.user_detail {
    background-color: #FFFFFF;
    padding: 0 50px;
}

.user_detail_row {
    border: 1px solid rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    margin-bottom: 10px;
    display: table;
}

.user_detail_row div {
    display: table-cell;
    padding: 5px 0;
}

.row_1 {
    width: 100%;
}

.row_2_left {
    width: 50%;
}

.row_2_right {
    width: 50%;
    margin-left: 20px;
}

.row_3_left {
    width: 33%;
}

.row_3_center {
    width: 33%;
    margin-left: 20px;
}

.row_3_right {
    width: 33%;
    margin-left: 20px;
}

.user_detail_row_key {
    text-align: center;
    width: 120px;
    font-size: 11px;
    font-weight: bold;
    border-right: 1px solid #CCCCCC;
}

.user_detail_row_value {
    text-align: left;
    font-size: 12px;
    padding-left: 20px !important;
}

.btnClose {
    color: #fff;
    background-color: black;
    border-radius: 8px;
    box-shadow: #333 0px 0px 5px;
    width: 200px;
    float: right;
    margin-right: 100px;
    margin-top: 200px;
}