﻿
/*body {
    background-image: url('../img/beijing.png');
    background-repeat: no-repeat;
    background-size: cover;
}*/

/*84, 255, 159
78,238 ,148
67 ,205 ,128*/


/*0, 229, 238,
0, 197, 205,
0, 134, 139,*/

@keyframes radar-warn {
	0% {
		transform: scale(0);
		opacity: 1.0;
	}

	100% {
		transform: scale(1);
		opacity: 0;
	}
}

/* 产生动画（向外扩散变大）的圆圈 第一个圆 */
.radar-circle-pulse {
	pointer-events: none;
	position: absolute;
	width: 100px;
	height: 100px;
	left: 400px;
	top: 400px;
	border: transparent;
	border-radius: 100%;
	z-index: 2;
	animation: radar-warn 2.5s linear;
	animation-iteration-count: infinite;
	/* box-shadow: 1px 1px 200px #ff1c0c inset; */
	background: radial-gradient(circle, transparent 10%, rgb(255,0,0) 90%);
}



@-webkit-keyframes fadeIn {
    0% {
        opacity: 0; /*初始状态 透明度为0*/
    }

    50% {
        opacity: 0; /*中间状态 透明度为0*/
    }

    100% {
        opacity: 1; /*结尾状态 透明度为1*/
    }
}


body .detaildisposal .layui-layer-content {
    margin-left: 0%;
}

.panel_fadein {
-webkit-animation-name: fadeIn; /*动画名称*/
-webkit-animation-duration: 3s; /*动画持续时间*/
-webkit-animation-iteration-count: 1; /*动画次数*/
-webkit-animation-delay: 0s; /*延迟时间*/
}

.shengjizhuji-div-icon {
    font-size: 15px;
    /*background:red;*/
    /*width:5px;*/
    font-weight:bold;
    z-index: 500;
    color: #fff;
    text-shadow: 0.2rem 0.2rem 0.1rem #00000066;
    z-index:700;
}

.Sys_title{
    position: absolute;
    top: 5px;
    left:50%;
    margin-left: -235px;
    font-size: 35px;
}

/*遮罩层*/
#layer-masker {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index:100000;
	background: rgba(0, 0, 0, 0.25);
}

.lds-label {
	font-weight: 400;
	font-size: 20px;
	color: white;
	text-align: center;
	margin-top: -40px;
}


/*系统名字*/
#app_title {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    /*color: #366994;*/
}

.title_fontSyle {
    color: #fff;
    text-shadow: 0.2rem 0.2rem 0.1rem #00000066;
    /*-webkit-text-stroke: 1px #00000066;*/
}
    #app_title h1 {
        font-size: 2.4rem;
        letter-spacing: 0.2rem;
        text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
    }

#digital_clock {
    height: 10%;
    text-align: center;
    font-family: Arial;
    font-weight: bold;
    /*background: #CFCFCF;*/
    position: absolute;
    right: 6%;
    top: 3%;
    font-size: 1.8rem;
}

/*海况信息滚动*/
#HaiKuangInfo {
    width: 100%;
    text-align: center;
}

#haikuanginfo_1 {
    width: 30%;
    top: 1px;
    position: relative;
    top: -0.25rem;
}

.change-container {
    position: relative;
    display: inline-block;
    width: 100%;
}
.changing {
    letter-spacing: 0.2rem;
    text-shadow: 0.1rem 0.1rem 0.1rem rgba(0, 0, 0, 0.25);
    position: absolute;
    overflow: hidden;
    display: inline-block;
    color: #fff;
    width: 100%;
    left: 0;
    bottom: -14px;
    height: 0;
    opacity: 0;
    text-rendering: optimizeLegibility;
    -webkit-animation: revealNextWord 10s ease-in-out infinite;
    animation: revealNextWord 10s ease-in-out infinite;
}
.changing:nth-child(2) {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}
.changing:nth-child(3) {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}
.changing:nth-child(4) {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}
.changing:nth-child(5) {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}
@-webkit-keyframes revealNextWord {
    0% {
        opacity: 0.3;
        height: 0;
    }
    10% {
        opacity: 1;
        height: 1.2em;
    }
    20% {
        opacity: 1;
        height: 1.2em;
    }
    28% {
        opacity: 0;
        height: 2em;
    }
    100% {
        opacity: 0;
    }
}
@keyframes revealNextWord {
    0% {
        opacity: 0.3;
        height: 0;
    }
    10% {
        opacity: 1;
        height: 1.2em;
    }
    20% {
        opacity: 1;
        height: 1.2em;
    }
    28% {
        opacity: 0;
        height: 2em;
    }
    100% {
        height: 0;
    }
}

/*左侧部分界面样式*/
/*环境场图层*/
.panel_ld_1 {
    position: relative;
    left: 1%;
    top: 15%;
    width: 12%;
    background-color: rgba(25, 51, 115, 1);
    /*background-color: rgba(129,174, 207, 0.8);*/
    border-radius: 6px;
    padding-top: 0.5%;
    padding-left: 0.5%;
    padding-bottom: 0.5%;
}

.panel_ld_2 {
    height: 90%;
    width:94%;
    background-color:  rgba(6, 65, 124, 0.65);
    border-radius: 6px;
    border: 2px solid rgb(41, 73, 148);

    /*background-color: rgba(6, 65, 124, 0.65);
    border-radius: 6px;
    border: 2px solid rgba(40, 56, 84, 0.66);*/
    /*box-shadow:rgba(11, 234, 235, 0.45) 0 0 100px inset;*/
}
/*基础图层*/
.panel_ld_base {
    position: relative;
    left: 1%;
    top: 16%;
    width: 8.5%;
    height:40%;
     background-color: rgba(25, 51, 115, 1);
    /*background-color: rgba(129,174, 207, 0.8);*/
    border-radius: 6px;
    padding-top: 0.5%;
    padding-left: 0.5%;
    padding-bottom: 0.5%;
}

/*视频接入*/
/*.panel_video1 {
    position: absolute;
    left: 1%;
    top: 61%;
    width: 10.5%;
    height: 35%;
    background-color: rgba(129,174, 207, 0.8);
    border-radius: 10px;
}

.panel_video2 {
    position: absolute;
    left: 4%;
    top: 2%;
    width: 90%;
    height: 95%;
    background-color: rgba(6, 65, 124, 0.65);
    border-radius: 10px;
    border: 2px solid rgba(0, 197, 205, 0.51);
}*/

.subject_logo {
    position: absolute;
    left: 7%;
    bottom: 1%;
    width: 30%;
    height:10%;
}

.panel_video_1{
    background: #0C0C0C;
    position: absolute;
    left: 7%;
    bottom: 1%;
    width: 10%;
    height:30%;
    border-radius: 6px;
    border: 2px solid rgba(51, 98, 144, 0.76);
}

.panel_video_2{
    width: 25%;
    height: 35%;
    transform: translate(120%, -95%);
    -webkit-transform: translate(120%, -95%);
    -moz-transform: translate(120%, -95%);
    transition:all .2s;
}


.videoBtn{
    position: absolute;
    top:2%;
    right:4%;
    color:white;
    text-shadow: 1px 1px 1px #0C0C0C;
    z-index: 9999;
}

/*数据管理模块标题*/
.txt-content-title {
    font-size: 1.3vw;
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 38px;
    text-align: center;
    margin: 2% 0 0 0;
}
/*数据管理模块列表*/
.ta_data {
    font-size: 0.85vw;
    color: black;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 28px;
    /*text-align: center;*/   
}

.ta_data_pos1 {
    /*margin: 0 0 0 13%;*/
    margin: 0 auto;
    margin-top: 2%;
}


/*修改复选框的样式 */
.layui-form-checkbox[lay-skin=primary] i {
    width: 15px;
    height: 15px;
    font-size: 1vw;
    line-height: 20px;
}

.layui-form-item .layui-form-checkbox[lay-skin=primary] {
    margin-top: 0px;
}

.layui-form-item {
    margin-bottom: 10px;
}

.panel_ld_1 div .ta_data tr:hover { /*.panel_ld_1*/
    color: #FF8C00;
    /*border-bottom: 4px solid #FF8C00;*/
}

.layui-form-checked[lay-skin=primary] i {
    border-color: #FF8C00;
    background-color: #FF8C00;
    color: #fff;
}


/*流程图详细按钮样式*/
.btn_detail{
    position: absolute;
    right: 3%;
    top: 1%;
    background-color: #7d6a6a;
}

/*流程图样式 */
text {
    font-size: 14px;
}

.node rect {
    stroke: #999;
    fill: rgba(24, 155, 252, 0.31);
    stroke-width: 1.5px;
}
.node polygon  {
    stroke: #999;
    fill: rgba(24, 155, 252, 0.31);
    stroke-width: 1.5px;
}

.edgePath path {
    stroke: #8d8d8d;
    stroke-width: 1.5px;
}

.svgContainer{
    width:550px;
}

/*右侧部分界面样式*/

/*实时消息样式*/
.txt-content-info-base {
    color: white;
    font-weight: 500;
    letter-spacing: 1px;
    text-align: center;
    line-height: 20px;
    margin-top: 10px;
}

.txt-content-info1 {
    font-size: 0.65vw;
    display: inline-block;
    /*background-color: rgba(129,174, 207, 0.8);*/
    background-color: rgba(129, 174, 207, 0);
    color: #666;
    border-radius: 10px;
    /*padding: 0 15px;*/
    -webkit-line-clamp:1;
}

.txt-content-info2 {
    font-size: 0.8vw;
    display: inline-block;
    background-color: rgba(129, 174, 207, 0);
    border-radius: 10px;
    /*padding: 0 15px;*/
    color: #666;

    -webkit-line-clamp:1;
}

.txt-content-info3 {
    font-size: 1vw;
    /*display: inline-block;*/
    background-color: rgba(129, 174, 207, 0);
    border-radius: 10px;
    color:yellow;
    text-shadow: 1px 1px 1px #0C0C0C;
    -webkit-line-clamp:2;
    /*padding: 5px 15px;*/
}

/*贴边效果按钮*/

.img-back{
    width: 16px;
    height: 35px;
    position: absolute;
    top: 40%;
    left:20%;
}

/*.panel-back{
    position: absolute;
    right: 0%;
    top:40%;
    height: 25%;
    width: 1.5%;
    background-color: rgba(6, 65, 124, 0.76);
    border-top-left-radius: 10px;
    border-bottom-left-radius:10px;
}*/

.panel-back{
    position: absolute;
    right: 0%;
    top:40%;
    height: 25%;
    width: 25px;
    background-color: #0880d7;
    /*background-color: rgba(6, 65, 124, 0.76);*/
    /*background-color: rgba(6, 65, 124, 0.76);*/
    border-top-left-radius: 10px;
    border-bottom-left-radius:10px;
}

/*窗口标题样式*/
.txt-content-info {
    color: black;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: 38px;
    font-size: 1.3vw;
    text-align: left;
    text-align:center;
    /*margin-left: 8%;*/
}
/*窗口样式*/
.panel_ru_1 {
    /*position: absolute;
    right: -20%;
    top: 2%;
    width: 20%;
    height: 95%;
    background-color: rgba(129,174, 207, 0.8);
    border-radius: 6px;*/

    position: absolute;
    right:  -20%;
    top: 15%;
    width: 20%;
    height: 77%;
    background-color: #0f9fd5;
    /*background-color: rgba(129,174, 207, 0.8);*/
    border-radius: 6px;
}

.panel_ru_2 {
    position: absolute;
    left: 2%;
    width: 95%;
    background-color: white;
    /*background-color: rgba(6, 65, 124, 0.66);*/
    border-radius: 6px;
    border: 2px solid rgba(0, 197, 205, 0.5);
}


.panel_step{
    top: 1%;
    /*height: 73.5%;*/
    height: 65.5%;
}


/*时间流程部分*/
.content-step{
    width: 100%;
    height:94%;
    padding-left: 5px;
    word-break:break-all;
    overflow-y: auto;
}

/*时间线样式*/
div.finished > h3{
    color: #f2f2f2;
    font-size: 0.9vw;
    font-weight: 500;

}
div.finished >p{
    color: #666;
    font-size: 0.9vw;
}

div.now >h3{
    color:yellow;
    font-size: 1.05vw;
    font-weight: 500;
    text-shadow: 1px 1px 1px #0C0C0C;

}
div.now > p{
    color:yellow;
    font-size: 1.05vw;
    text-shadow: 1px 1px 1px #0C0C0C;
}

div.unfinished > h3{
    color: black;
    font-size: 0.9vw;
    font-weight: 500;

}
div.unfinished > p{
    color:#090909;
    font-size: 0.9vw;
}
/*滚动条样式*/
.content-step::-webkit-scrollbar {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.content-step::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
    background: rgba(237, 237, 237, 0);
}
.content-step::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
    border-radius: 10px;
    background: rgba(237, 237, 237, 0);
}

body .ConfirmWindow{
    border-radius: 10px;
    background: rgba(6, 65, 124, 0.65);
}

body .ConfirmWindow .layui-layer-btn a{

    border-radius: 50px;
    border:1px solid #E9E7E7;
    width:14%;
    text-align: center;
    height: 1.8vw;
    line-height: 1.8vw;
    color:white;
    background: rgba(6, 65, 124, 0.65);
    font-size: 0.8vw;
}

/*最后简讯部分*/
.jianxun {
    color: white;
    margin-top: 8px;
    font-weight: bold;
    font-size: 1.8vw;
    width: 100%;
    text-align: center;
    height: 10%;
}
.jianxun_content {
    margin-top: 2%;
    padding: 13px;
    margin: 0 2%;
    text-align: left;
    color: #fff;
    text-shadow: 1px 1px 1px #0C0C0C;
    font-size: 1.5vw;
    text-indent: 2em;
    box-shadow: 0 0 black;
}

.jianxun_table {
    font-size: 1.3vw;
    margin-top: 1vw;
    width: 90%;
    color: #fff;
    margin-right: auto;
    margin-left: auto;
}

    .jianxun_table th {
        font-size: 1.5vw;
    }

    .jianxun_table tr {
        line-height: 2vw;
        width: 100%;
    }

.jianxun_table td {
    width: 33%;
    text-align:center;
}
    .confirmTitle {
        color: white;
        margin-top: 8px;
        font-weight: bold;
        font-size: 1.3vw;
        width: 100%;
        text-align: center;
        height: 10%;
    }

.Layer-content{
    margin-top: 7%;
    padding: 13px;
    text-align:center;
    color:yellow;
    text-shadow: 1px 1px 1px #0C0C0C;
    font-size: 1.1vw;
}
.Layer-content-plan {
    margin-top: 3%;
    padding: 13px;
    text-align: center;
    color: yellow;
    text-shadow: 1px 1px 1px #0C0C0C;
    font-size: 1.1vw;
}

.panel_msg {
    top: 68%;
    height: 30%;
    overflow-y: auto;
}
/*滚动条样式*/
.panel_msg::-webkit-scrollbar {/*滚动条整体样式*/
    width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
    height: 1px;
}
.panel_msg::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
    background: rgba(237, 237, 237, 0);
}
.panel_msg::-webkit-scrollbar-track {/*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
    border-radius: 10px;
    background: rgba(237, 237, 237, 0);
}

body .WarnWindow{
    border-radius: 10px;
    background: rgba(6, 65, 124, 0.65) /*rgba(14, 92, 255, 0.6)*/;
}

body .WarnWindow .layui-layer-btn a{
    /*background: #eb6938;
    border:1px solid #E9E7E7;
    width:15%;
    font-size: 0.9vw;*/

    border-radius: 50px;
    border:1px solid #E9E7E7;
    width:14%;
    text-align: center;
    height: 1.8vw;
    line-height: 1.8vw;
    background: rgba(14, 92, 255, 0.75);
    font-size: 0.9vw;
}

body .WarnWindow.layui-layer-btn{
    height: 35%;
}

body .ReportWindow{
    border-radius: 10px;
    background: rgba(6, 65, 124, 0.65);
}

body .ReportWindow .layui-layer-btn a{

    border-radius: 50px;
    border:1px solid #E9E7E7;
    width:20%;
    text-align: center;
    height: 1.8vw;
    line-height: 1.8vw;
    color:white;
    background: rgba(6, 65, 124, 0.65);
    font-size: 0.8vw;
}

body .ReportPanal{
    border-radius: 10px;
    background: rgba(6, 65, 124, 0.65);
}

body .ReportPanal .layui-layer-btn a{

    border-radius: 50px;
    border:1px solid #E9E7E7;
    width:20%;
    text-align: center;
    height: 1.8vw;
    line-height: 1.8vw;
    color:white;
    background: rgba(6, 65, 124, 0.65);
    font-size: 0.8vw;
}

.reporttable {
    color:yellow;
    font-size:1.3vw;
    text-align:center;
}

.plandislogtitle {
    display: inline-block;
    width: 100%;
    height:15%;
    color: white;
    font-weight: 800;
    text-align: -webkit-left;
    text-indent: 17px;
    font-size: 1.2vw;
}

.plandialog{
  position: fixed;
  z-index:999;
  top: 50%;
  left: 50%;
  margin: -141px 0 0 -201px;
  width: 400px;
  height:280px;
  border:1px solid #CCC;
  line-height: 40px;
  text-align:center;
  font-size: 14px;
  opacity:1;
  color:white;
  background-color:#356a9b;
  /*overflow:hidden;*/
  display:none;
}

.warnTitle{
    color:red;
    margin-top: 30px;
    font-weight: bold;
    font-size: 2.3vw;
    width: 100%;
    text-align: center;
    height:10%;
    letter-spacing:5px;

}

.warntable {
    font-size:25px;
    margin-top:35px;
    width:95%;
    color:yellow;
    margin-left:20px;
}

    .warntable td {
        height: 3.5rem;
        text-align: center;
        line-height: 35px;
    }

    .warntable .td_left {
        width: 36%;
        text-align: right;
    }

    .warntable .td_right {
        text-align: left;
    }

.panel_msg_0 {
    position: absolute;
    right: 2%;
    top: 15%;
    width: 18%;
    height: 24%;
    background-color: #2188c8d4;
    /*background-color: rgba(6, 65, 124, 0.66);*/
    border-radius: 6px;
    border: 2px solid rgba(0, 197, 205, 0.5);
    padding:8px;
    text-align: center;
    display:none;
}

.panel_msg_1 {
    position: absolute;
    right: 35px;
    top: 14%;
    width: 18%;
    height: 24%;
    background-color: #2188c8d4;
    /*background-color: rgba(6, 65, 124, 0.66);*/
    border-radius: 6px;
    border: 2px solid rgba(0, 197, 205, 0.5);
    padding:8px;
    text-align: center;
    display:none;
}

/*海况信息*/
.panel_msg_2 {
    position: absolute;
    right: 35px;
    top: 41%;
    width: 18%;
    height: 24%;
    background-color: #2188c8d4;
    /*background-color: rgba(6, 65, 124, 0.66);*/
    border-radius: 6px;
    border: 2px solid rgba(0, 197, 205, 0.5);
    padding: 8px;
    text-align: center;
    display: none;
}

/*石油平台信息*/
.panel_msg_3 {
    position: absolute;
    right: 35px;
    top: 68%;
    width: 18%;
    height: 24%;
    background-color: #2188c8d4;
    border-radius: 6px;
    border: 2px solid rgba(0, 197, 205, 0.5);
    padding: 8px;
    text-align: center;
    display: none;
}

/*核电厂分布信息*/
.panel_msg_4 {
    position: absolute;
    right: 35px;
    top: 68%;
    width: 18%;
    height: 24%;
    background-color: #2188c8d4;
    border-radius: 6px;
    border: 2px solid rgba(0, 197, 205, 0.5);
    padding: 8px;
    text-align: center;
    display: none;
}

.msgTitle{
    display: inline-block;
    width: 100%;
    height:12%;
    color: white;
    font-weight: 800;
    text-align: center;
    font-size: 1.35vw;
}
.msgItem{
    display: inline-block;
    background-color: #090909ba;
    /*background-color: rgba(6, 143, 242, 0.42);*/
    width: 81%;
    height:15%;
    border-radius: 10px;
    color: white;
    font-size: 1.2vw;
    font-weight: 900;
    letter-spacing: 5px;
    text-align: left;
    margin-top: 3.5%;
    padding: 2% 5%;


}
.msgValue{
    /*color: yellow;
    letter-spacing: 2px;
    text-shadow: 1px 1px 1px #0C0C0C;
    padding:4% 5%;*/

    color: yellow;
    letter-spacing: 1.5px;
    text-shadow: 1px 1px 1px #0C0C0C;
    /* padding: 4% 1%; */
    font-size: 1.2vw;
}

.window-icon{
    position: relative;
    width:1.3vw;
    height:1.3vw;
    top:15%;
    margin-right: 0.5vw;
    margin-top: -0.6vw;
}
/*箭头导航*/
.tab {
  margin-left: -0.5rem;
  cursor: pointer;
  transition: 0.5s;
  display: inline-block;
  text-align:center;
  width: 135px;
  height: 40px;
  line-height: 40px;
  background: #ccc;
  color: white;
  font-weight: bold;
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 5% 50%);
}
.tab:hover {
  background: royalblue;
}
.tab:first-child {
  clip-path: polygon(0% 0%, 95% 0%, 100% 50%, 95% 100%, 0% 100%, 0% 50%);
}
.tab:last-child {
  clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 100% 100%, 0% 100%, 5% 50%);
}