/* css初始化 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

li {
    list-style: none;
}


/* 声明字体*/

body {
    font-family: Microsoft YaHei Regular;
    margin: 0;
    padding: 0;
    background: url(../images/bg.png) no-repeat #000;
    background-size: cover;
    line-height: 1.15;
    height: 100vh;
    /* min-height: 600px; */
}

.noPointer {
    cursor: not-allowed!important;
}


/* @font-face {
    font-family: electronicFont;
    src: url(../font/DS-DIGIT.TTF);
}*/

header {
    position: relative;
    height: 2.025rem;
    background: url(../images/header-bg.png) no-repeat top center;
    background-size: 100% 100%;
    min-width: 1024px;
    padding-top: .6rem;
}

header h1 {
    /* color: #ffffff; */
    font-size: .6rem;
    text-align: center;
    /* line-height: 2.025rem; */
    /* background-image: -webkit-linear-gradient(0deg, #1298f5 0%, #e0eaff 100%); */
    /* background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    background-image: -webkit-linear-gradient(bottom, #07DCEE, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #9abcff;
    font-family: Source Han Sans CN Bold;
}

header .showTime {
    position: absolute;
    right: 1rem;
    top: .38rem;
    font-weight: bold;
    /* line-height: 0.9375rem; */
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;
    background-image: -webkit-linear-gradient(bottom, #1298f5, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Microsoft YaHei Bold;
}

.time-icon {
    position: absolute;
    right: .125rem;
    top: .225rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.25rem;
    cursor: pointer;
}

.mainbox.home {
    font-family: Microsoft YaHei Bold;
}

.mainbox {
    display: flex;
    min-width: 1024px;
    /* max-width: 1920px; */
    margin: 0 auto;
    padding-bottom: 20px;
    /* padding: 1.25rem 4.375rem 0; */
    /* height: calc(100% - 2.025rem); */
    /* min-height: calc(600px - 2.025rem); */
}

.mainbox .column {
    flex: 1;
    text-align: center;
    color: #fff;
    padding: 50px 5% 10px;
    display: inline-block
    /* background: pink; */
}

.mainbox .column .panel {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 3.425rem;
    opacity: 1;
    background: rgba(255, 255, 255, 0.00);
    border-radius: 23px;
    border: 3px solid #03369F;
    background: rgba(255, 255, 255, 0.00);
    box-shadow: inset 0px -56px 99px 2px #03369F;
    position: relative;
    /* height: 52%; */
    height: 3.9rem;
    /* 
    margin-bottom: .975rem; */
    /*  */
    /* margin-bottom: .8rem; */
    cursor: pointer;
}

.mainbox .column .panel:hover {
    /* opacity: .7 */
}

.mainbox .column .panel .light-color {
    color: #AEC9FF
}

.mainbox .column .panel img {
    margin-bottom: .5rem;
    max-width: .625rem;
    max-height: .625rem;
}

.mainbox .column .panel p {
    font-weight: bold;
    height: .47rem;
    line-height: .47rem;
    text-align: center;
    font-size: 0.25rem;
}

.mainbox .column .panel.alarm {
    border: 3px solid #ff1212;
    box-shadow: 0px -56px 99px 2px rgb(255 18 18 / 60%) inset;
}

.mainbox .column .panel.alarm span {
    color: #ff1212;
}

.mainbox .column .panel.alarm .light-color {
    color: #FFAEAE
}

.mainbox .column .panel.fault {
    border: 3px solid #FFCD04;
    box-shadow: 0px -56px 99px 2px rgba(255, 205, 3, 0.45) inset;
}

.mainbox .column .panel.fault span {
    color: #FFCD04;
}

.mainbox .column .panel.fault .light-color {
    color: #FFF2BF
}


/* 搜素区域 */


/* 搜索区域样式 */

.filterSec {
    position: absolute;
    top: 0;
    right: 0.375rem;
    bottom: -0.0625rem;
    left: 0.425rem;
    line-height: 0.9375rem;
    font-size: 0.3rem;
    background-image: -webkit-linear-gradient(bottom, #1298f5, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 400;
    color: #1298f5
}

.filterSec select,
.filterSec option {
    border: 1px solid #2399ed;
    border-radius: 7px;
    min-width: 3.375rem;
    font-size: 0.2rem;
    height: 0.45rem;
    color: #2399ed;
    line-height: 0.45rem;
    background: rgba(0, 0, 0, 0);
    outline: none;
    padding-left: 0.1rem;
    background-image: -webkit-linear-gradient(bottom, #1298f5, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* 可燃气体 */

.gas-container {
    text-align: center;
    color: #fff;
    margin-top: .325rem;
    position: relative;
    /* height: calc(11rem) */
    width: 100%;
    height: calc(100% - .325rem)
}

.gas-container h3 {
    font-size: .375rem;
    Color: #fff;
    margin-bottom: .25rem
}

.gas-container p {
    font-size: .225rem;
    margin-bottom: .25rem
}

.return-back {
    position: absolute;
    right: 20px;
    top: -1rem;
    width: 1.125rem;
    line-height: .5rem;
    font-size: .275rem;
    opacity: 1;
    background: linear-gradient(0deg, #0148cd 0%, #1c9bf5 100%);
    border-radius: 4px;
    cursor: pointer;
}

.cardTabs li {
    min-width: 1.875rem;
    padding: 0 .2rem;
    display: inline-block;
    font-size: 0.25rem;
    height: 0.575rem;
    line-height: 0.575rem;
    box-shadow: inset 0 0 0.2rem 0.0125rem rgba(3, 54, 159, 1);
    /* background: rgba(5, 37, 166, 0.26);*/
    border: 1px solid rgba(5, 37, 166, 0.8);
    cursor: pointer;
}

.cardTabs li.active {
    box-shadow: inset 0 0 29px 17px rgb(3 54 159);
}

.cardTabs li:first-child {
    -webkit-border-top-left-radius: 7px;
}

.cardTabs li:last-child {
    -webkit-border-top-right-radius: 7px;
}

.tabBox {
    padding: 0.325rem 0.4875rem;
    background: rgba(255, 255, 255, 0);
    border: 1px solid #1257c9;
    border-radius: 7px;
    display: inline-block;
    box-shadow: inset 0 0 0.2rem 0.0125rem rgba(3, 54, 159, 1);
}

.tabBox table {
    border-collapse: collapse;
    font-size: 0.225rem;
    width: 11.625rem;
    margin: 0 auto;
    line-height: 0.95rem;
}

.tabBox .gas-data {
    width: 10rem
}

.tabBox table th {
    color: #fff;
    background: rgba(84, 143, 255, 0.5);
}

.tabBox table td {
    font-size: 0.225rem;
    font-weight: 400;
}

.tabBox.fireTabs {
    padding: 0;
}

.tabBox.fireTabs th {
    /* border: none; */
    background: none;
    font-weight: 400
}

.fireTabs {
    /* width: 13.05rem; */
    box-shadow: none;
}

.fireTabs table,
.fireTabs tr,
.fireTabs td {
    box-shadow: inset 0 0 0.2rem 0.0125rem rgba(3, 54, 159, 1);
}

.fireTabs table td {
    /* padding: .75rem .4375rem */
    padding: 4% 0;
}

.fireTabs table p {
    margin-bottom: 0;
    line-height: 1.5;
    font-size: .225rem;
}

.fireTabs table p:nth-child(2) {
    margin: .25rem 0;
}

.normal {
    color: #60FF12;
}

.error {
    color: #ff1212;
}

.eleFire-data {
    margin: 0 auto;
    width: calc(100% - .5rem);
    display: flex;
    /* padding: .55rem .55rem .2rem; */
    padding: 0;
    height: 10rem;
}

.eleFire-data .column2 {
    flex: 1
}

.eleFire-data .column2 .panel {
    height: calc(50% - .325rem);
    /* border: 1px solid pink; */
    /* margin-bottom: .55rem; */
    margin: .25rem .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inner-box {
    width: 9.725rem;
}

.inner-box div {
    display: flex;
    justify-content: space-between;
}

.inner-box div:nth-child(2) {
    margin: .5rem 0;
}

.inner-box div p {
    box-shadow: inset 0 0 0.2rem 0.0125rem rgba(3, 54, 159, 1);
    width: 4.6rem;
    line-height: .875rem;
    font-size: .25rem;
    margin-bottom: 0
}


/* */

.gasRecord {
    display: flex;
    min-width: 1024px;
    /* max-width: 1920px; */
    margin: 0 auto;
    padding: .375rem 2.5rem 0;
}

.gasRecord>.recordItem {
    flex: 1;
    padding: .1875rem;
    margin: 0 .375rem;
    box-shadow: inset 0 0 0.2rem 0.0125rem rgb(3 54 159);
    border: 1px solid #1257c9;
}

.recordItem h3 {
    font-size: .25rem;
    border-bottom: 1px solid rgba(3, 54, 159, .2);
    position: relative;
}

.recordItem h3:after {
    position: absolute;
    bottom: -.1625rem;
    left: .25rem;
    right: .25rem;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    background-color: #548ffd;
}

.recordItem ul {
    display: inline-block;
    padding: 0 .45rem
}

.recordItem ul li {
    line-height: 2;
    font-size: .225rem
}

.recordItem ul:first-child li {
    text-align: right
}

.recordItem ul:last-child li {
    text-align: left
}


/* 巡检时间表start */

.record-container {
    padding: 0.375rem;
    height: calc(100vh - 2.025rem);
    position: relative;
}

.gas-container .timeList {
    /* max-width: 24rem;
    text-align: left; */
    min-width: 24rem;
    text-align: left;
    max-width: 86%;
    margin: 0 auto;
}

.gas-container .timeItem {
    width: 17.39%;
    display: inline-block;
    height: .9rem;
    line-height: .9rem;
    text-align: center;
    margin: 0 0.3125rem 1.3%;
    color: #fff;
    font-size: 0.325rem;
    background: rgba(18, 87, 201, 0.26);
    border: 2px solid #548fff;
    border-radius: 42px;
    cursor: pointer;
}

.timeItem:hover {
    box-shadow: inset 0 0 0.2rem 0.0125rem red;
    background: rgba(255, 18, 18, 0.26);
    border: 2px solid #ff1212;
}


/*带背景的分页按钮背景色begin*/

.el-pagination.is-background .el-pager li {
    opacity: 1;
    background: rgba(5, 37, 166, 0.26);
    border: 1px solid #1c47ff;
    color: #fff;
    /* width: .325rem;
    height: .325rem;
    line-height: .325rem */
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: rgba(5, 37, 166, 1);
    /* color: #FFF; */
}

.el-pagination.is-background .el-pager li.active {
    cursor: default;
}

.el-pagination.is-background .el-pager li:hover {
    color: #1c47ff;
}

.el-pagination.is-background .el-pager li:not(.disabled):hover {
    color: #1c47ff
}

.el-pagination.is-background .el-pager li:not(.disabled).active:hover {
    background-color: rgba(5, 37, 166, 1);
    color: #FFF;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    background: rgba(5, 37, 166, 0.26);
    border: 1px solid #1c47ff;
}

.el-pagination .btn-next,
.el-pagination .btn-prev {
    color: #fff
}

.el-pagination.is-background .btn-next.disabled,
.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev.disabled,
.el-pagination.is-background .btn-prev:disabled,
.el-pagination.is-background .el-pager li.disabled {
    color: #aaa
}

.el-input__inner {
    background: rgba(5, 37, 166, 0.26);
    border: 1px solid #1c47ff;
    color: #fff;
}

.el-pagination__jump {
    color: #fff;
}


/*带背景的分页按钮背景色end*/


/* end */

@keyframes rotatel {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes rotate2 {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    to {
        transform: translate(-50%, -50%) rotate(-360deg);
    }
}


/* 约束屏幕尺寸 */

@media screen and (max-width: 1024px) {
    html {
        font-size: 42px !important;
    }
}

@media screen and (min-width: 1920px) {
    html {
        font-size: 80px !important;
    }
}