@charset "utf-8";
a,p,h1,h2,h3,h4,h5,h6,body,span,label,div{padding:0;margin:0;font-family:'瀵邦喛钂嬮梿鍛寸拨';}
div{font-family:'瀵邦喛钂嬮梿鍛寸拨';}
ul{padding:0;margin:0;}
a{text-decoration:none !important;}
.clear{clear:both;}
html, body, form{overflow-y:auto;height:100%;}
/* 滚动条样式 */
::-webkit-scrollbar {width:1px;height:4px;}
::-webkit-scrollbar-track {-webkit-box-shadow:inset 0 0 6px rgba(255,255,255,0.9);border-radius: 10px;}
::-webkit-scrollbar-thumb {border-radius:5px; background: rgba(66,66,66,1);-webkit-box-shadow:inset 0 0 6px rgba(227,227,227,87.5);}
::-webkit-scrollbar-thumb:window-inactive {background: rgba(227,227,227,0.5);}

@font-face{
	font-family: yjsz;
	src:url('../fonts/yjsz.TTF'),
		url('../fonts/yjsz.eot'); /* IE9+,可以是具体的实际链接 */
	}


.ksh{height:100%;padding:15px;background:url(../images/data08.png) no-repeat #061537;background-size:cover;overflow:hidden;position:relative;z-index:-2;}

/* 加载旋转动画 */
#load{width:100%;height:100%;position:absolute;background:url(../images/data08.png) no-repeat #061537;background-size:cover;top:0;left:0;z-index:999}
#load .load_img{position:absolute;left:calc(50% - 182px);top:calc(50% - 182px);}
.load_img img{position:absolute;left:0;top:0;}
.load_img .jzxz1{animation:xz1 8s infinite linear;}
	@keyframes xz1 {
	  from {
	  transform:rotate(0deg);
	  }
	  50% {
	    transform:rotate(180deg);
	  }
	  to{
	  	transform:rotate(360deg);
	  }
	}	
.load_img .jzxz2{animation:xz2 7s infinite linear;}
	@keyframes xz2 {
	  from {
	  transform:rotate(0deg);
	  }
	  50% {
	    transform:rotate(-180deg);
	  }
	  to{
	  	transform:rotate(-360deg);
	  }
	}	

.head_top{position:relative;text-align:center;}
.head_top img{display:block;width:80%;margin:0 auto;}
.head_top .head_logo{position:absolute;top:6px;left:50%;transform:translateX(-50%);color:#55bfff;font-size:35px;font-weight:600;z-index:10;text-shadow: 0 0 10px rgba(0, 216, 255, 0.5);}
.head_top .head_decor{margin-top:1px;}
.head_top .decor_side {
    position: absolute;
    top: 15px;
    width: 45px !important;
    height: auto !important;
    z-index: 11;
    opacity: 0.9;
    display: block; /* ensure it is visible */
    margin: 0; /* reset margin from generic rule */
}
.head_top .decor_left {
    left: 50%;
    margin-left: -170px !important;
}
.head_top .decor_right {
    left: 50%;
    margin-left: 125px !important;
    transform: scaleX(-1);
}
.head_top .decor_bar {
    position: absolute;
    top: 40px;
    width: 25% !important;
    height: auto !important;
    z-index: 10;
    display: block;
}
.head_top .decor_left_outer {
    left: 50%;
    margin-left: -850px !important;
}
.head_top .decor_right_outer {
    left: 50%;
    margin-left: 400px !important;
}
.head_top p{width:100%;text-align:center;color:#55bfff;position:absolute;bottom: -18px;left: -10px;}
.head_top p span{font-family:'yjsz';font-size:20px;}

.visual{height:calc(100% - 33px);padding-top:5px;}

.visual_box{height:40%;}
.visual_left .visual_box{height:18%;margin-bottom: 2%;}
.visual_right .visual_box{height:18%;margin-bottom: 2%;}
.visual_left .visual_box:nth-child(1),
.visual_right .visual_box:nth-child(1) {
    height: 39%;
}

.visual_left .visual_box:nth-child(2),
.visual_right .visual_box:nth-child(2) {
    height: 24%;
}

.visual_left .visual_box:nth-child(3),
.visual_right .visual_box:nth-child(3) {
    height: 23%;
}
.visual_box .visual_title{position:relative;height:35px;margin:5px 0;}
.visual_box .visual_title span{color:#fff;font-size:18px;line-height:35px;}
.visual_box .visual_title img{width:100%;position:absolute;left:0;bottom:0;}
.visual_box .visual_chart{height:calc(100% - 35px);}

.visual_left{width:30%;height:100%;float:left;margin-top: -15px;}
.visual_left .sfzcll{position:relative;}
.visual_left .sfzcll a{width:32%;text-align:center;line-height:25px;color:#fff;display:inline-block;}
.visual_left .sfzcll .sfzcll_pos_box{width:100%;height:calc(100% - 30px);}
.visual_left .sfzcll .sfzcll_box{width:100%;height:calc(33% - 15px);line-height:5;background:rgba(15,47,72,0.8);border:1px solid #1380bd;position:relative;margin-bottom:15px;}
.visual_left .sfzcll .sfzcll_box:last-of-type{margin:0;}
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk{position:absolute;}
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:first-of-type{top:-2px;left:-2px;}
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(2){top:-2px;right:-2px;}
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(3){bottom:-2px;right:-2px;}
.visual_left .sfzcll .sfzcll_box .sfzcll_bkJk:nth-child(4){bottom:-2px;left:-2px;}
.visual_left .sfzcll .sfzcll_box label{width:33%;color:#fff;text-align:center;float:left;}
.visual_left .sfzcll .sfzcll_box label img{width:23px;height:23px;margin-right:5px;margin-top:-2px;}
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk{width:33%;height:100%;float:left;padding:2px 5px;}
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk>div{height:100%;background:url(../images/ksh38.png) no-repeat;background-size:100% 100%;text-align: center;line-height:1.5em;}
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygl{color:#00ffc6;}
.visual_left .sfzcll .sfzcll_box .sfzcll_smallBk .ygh{color:#ffe400;}

.visual_con{width:40%;height:100%;float:left;padding:0 20px 0 20px;}
.visual_con .visual_conTop{display:grid;grid-template-columns:repeat(5,1fr);grid-auto-rows:80px;gap:10px;margin-bottom:10px;}
.visual_con .visual_conTop .visual_conTop_box{height:100%;padding:0;}
.visual_con .visual_conTop .visual_conTop1{width:100%;height:100%;float:none;}
.visual_con .visual_conTop .visual_conTop1>div{background:url(../images/ksh40.png) no-repeat;background-size:100% 100%;}
.visual_con .visual_conTop .visual_conTop2{width:30%;height:100%;float:left;}
.visual_con .visual_conTop .visual_conTop2>div{background:url(../images/ksh39.png) no-repeat;background-size:100% 100%;}
.visual_right{width:30%;height:100%;float:right;margin-top: -15px;}
.visual_con .visual_conTop .visual_conTop_box>div{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;}
.visual_con .visual_conTop .visual_conTop_box>div h3{color:#fff;font-size:14px;padding:0;margin:0;text-align:center;width:100%;}
.visual_con .visual_conTop .visual_conTop_box>div p{width:100%;float:none;line-height:1.2;color:#20dbfd;text-shadow:0 0 12px #00d8ff;font-size:24px;font-family: 'yjsz';text-align:center;padding:5px 0 0 0;margin:0;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil{width:67%;height:60px;float:left;padding-top:23px;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a{display:block;line-height:20px;text-align: left;color:#fff;padding-left:9px;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil span{width:32px;display:inline-block;margin-left:3px;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.sz{color:#fe3e12;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.xd{color:#12fe81;}
.visual_con .visual_conTop .visual_conTop_box>div .conTop_smil a.null{visibility:hidden;}

.visual_conBot{height:calc(100% - 400px);position:relative;margin-top:10px;}
.visual_conBot>img{position:absolute;z-index:99;}
.visual_conBot .visual_conBot_l{left:0;top:0;}
.visual_conBot .visual_conBot_2{right:0;top:0;}
.visual_conBot .visual_conBot_3{right:0;bottom:0;}
.visual_conBot .visual_conBot_4{left:0;bottom:0;}
.visual_conBot .visual_chart{width:100%;height:100%;position:absolute;z-index:9;}

/* 订单状态监控模块样式 */
.visual_conStatus {
    height: 90px;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    padding: 0 10px;
}

.status_item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    padding-bottom: 5px;
}

.status_label {
    color: #fff;
    font-size: 14px;
    margin-bottom: 5px;
    z-index: 2;
}

.status_value_group {
    display: flex;
    align-items: baseline;
    margin-bottom: 15px;
    z-index: 2;
}

.status_value_group .stat-value {
    color: #fff;
    font-size: 24px;
    font-family: 'yjsz';
    font-weight: bold;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

.status_value_group .status_unit {
    color: #aaa;
    font-size: 12px;
    margin-left: 5px;
}

.status_base {
    position: absolute;
    bottom: 0;
    width: 80%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.status_ring {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid rgba(0, 150, 255, 0.5);
    background: rgba(0, 80, 160, 0.2);
    box-shadow: 0 0 15px rgba(0, 150, 255, 0.4), inset 0 0 10px rgba(0, 150, 255, 0.2);
    transform: rotateX(60deg);
}

.status_light {
    position: absolute;
    bottom: 10px;
    width: 70%;
    height: 40px;
    background: linear-gradient(to top, rgba(0, 150, 255, 0.4), transparent);
    clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
    z-index: 1;
}

/* 为 status_ring 添加旋转动画 */
.status_ring::after {
    content: '';
    position: absolute;
    top: -5px; left: -5px; right: -5px; bottom: -5px;
    border-radius: 50%;
    border: 2px dashed rgba(0, 216, 255, 0.6);
    animation: rotateRing 10s linear infinite;
}

@keyframes rotateRing {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.stat-card{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;height:100%;}

/* Order List Styles */
.order_list_container {
    padding: 10px;
    display: flex;
    flex-direction: column;
}
.order_list_header {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    background: rgba(13, 38, 71, 0.8);
    border-radius: 4px;
    margin-bottom: 5px;
}
.order_list_header span {
    color: #00d8ff;
    font-size: 14px;
    flex: 1;
    text-align: center;
}
/* 优化列宽分配 */
.order_list_header span:nth-child(1), .order_item span:nth-child(1) { flex: 0.4; } /* 序号 */
.order_list_header span:nth-child(2), .order_item span:nth-child(2) { flex: 1.4; } /* 运单号 */
.order_list_header span:nth-child(3), .order_item span:nth-child(3) { flex: 1; } /* 起始地 */
.order_list_header span:nth-child(4), .order_item span:nth-child(4) { flex: 1; } /* 目的地 */
.order_list_header span:nth-child(5), .order_item span:nth-child(5) { flex: 0.6; } /* 状态 */
.order_list_header span:nth-child(6), .order_item span:nth-child(6) { flex: 1.2; } /* 预计送达 */

.order_list_content {
    flex: 1;
    overflow-y: hidden; /* 隐藏滚动条，使用自动滚动 */
}
.order_item {
    display: flex;
    justify-content: space-between;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    align-items: center;
}
.order_item span {
    color: #fff;
    font-size: 13px;
    flex: 1;
    text-align: center;
}
.status-done { color: #00ffc6 !important; }
.status-shipping { color: #ffe400 !important; }
.status-pending { color: #ff6b6b !important; }

/* 牛只概况列表样式 */
#cattle_overview_container {
    padding: 10px 10px 0 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: auto;
    height: 100%;
}

.cattle_item {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 12px;
    background: rgba(10, 30, 60, 0.6);
    border: 1px solid #134572;
    border-radius: 20px;
    padding: 5px 8px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    box-shadow: inset 0 0 10px rgba(0, 150, 255, 0.1);
    cursor: pointer;
    transition: all 0.3s;
}

.cattle_item:hover {
    background: rgba(10, 30, 60, 0.9);
    border-color: #00d8ff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 216, 255, 0.2);
}

.cattle_item:nth-child(2n) {
    margin-right: 0;
}

.cattle_icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(0, 80, 160, 0.5);
    border: 1px solid #0096ff;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    flex-shrink: 0;
    position: relative;
}

.cattle_icon::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background: #00d8ff;
    border-radius: 50%;
    bottom: 2px;
    right: 2px;
    box-shadow: 0 0 5px #00d8ff;
}

.cattle_icon .glyphicon {
    color: #8acaff;
    font-size: 14px;
}

.cattle_info {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    white-space: nowrap;
    overflow: hidden;
}

.cattle_name {
    color: #cceeff;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cattle_value {
    color: #fff;
    font-size: 16px;
    font-family: 'yjsz';
    margin-left: 5px;
}

.cattle_unit {
    font-size: 12px;
    color: #aaa;
    margin-left: 2px;
    font-family: "Microsoft YaHei";
}

/* 牛只行情列表样式 */
.market_list_container {
    padding: 10px;
    display: flex;
    flex-direction: column;
}

.market_list_header {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    background: rgba(13, 38, 71, 0.8);
    border-radius: 4px;
    margin-bottom: 5px;
}

.market_list_header span {
    color: #aaa;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
}

.market_list_content {
    flex: 1;
    overflow-y: auto;
}

.market_item {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    align-items: center;
}

.market_item span {
    color: #fff;
    font-size: 13px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 序号列 */
.market_list_header span:nth-child(1),
.market_item span:nth-child(1) {
    flex: 0.5;
}

/* 省份列 */
.market_list_header span:nth-child(2),
.market_item span:nth-child(2) {
    flex: 1;
}

/* 地区列 */
.market_list_header span:nth-child(3),
.market_item span:nth-child(3) {
    flex: 1.5;
}

/* 品种列 */
.market_list_header span:nth-child(4),
.market_item span:nth-child(4) {
    flex: 1;
}

/* 单价列 */
.market_list_header span:nth-child(5),
.market_item span:nth-child(5) {
    flex: 1;
}

.market_price {
    color: #00d8ff !important;
    font-weight: bold;
}

/* 合计总数模块样式 */
.total_layout {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 10px 20px;
}

.total_row {
    flex: 1;
    display: flex;
    align-items: center;
    background: rgba(10, 30, 60, 0.6);
    border: 1px solid rgba(0, 216, 255, 0.2);
    border-radius: 8px;
    margin-bottom: 10px;
    padding: 0 15px;
    box-shadow: inset 0 0 15px rgba(0, 150, 255, 0.1);
}

.total_row:last-child {
    margin-bottom: 0;
}

.total_icon_wrapper {
    width: 46px;
    height: 46px;
    background: rgba(0, 80, 160, 0.5);
    border: 1px solid #0096ff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 10px rgba(0, 216, 255, 0.3);
}

.total_icon_wrapper .glyphicon {
    font-size: 20px;
    color: #00d8ff;
}

.total_text_wrapper {
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.total_label {
    color: #cceeff;
    font-size: 14px;
    margin-bottom: 2px;
}

.total_data {
    display: flex;
    align-items: baseline;
}

.total_data .stat-value {
    color: #fff;
    font-size: 24px;
    font-family: 'yjsz';
    font-weight: bold;
    text-shadow: 0 0 10px rgba(0, 216, 255, 0.5);
}

.total_data .total_unit {
    color: #aaa;
    font-size: 12px;
    margin-left: 5px;
}

/* 屠宰场概况列表样式 - 复用牛只概况样式逻辑 */
#slaughterhouse_overview_container {
    padding: 10px 10px 0 10px;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    overflow-y: auto;
    height: 100%;
}