.card-layout {
    width: 100%;
    height: 68vh !important;
}

@media screen and (height: 1080px) {
    .card-layout {
        height: 72.5vh !important;
    }
}

.main-layout {
    width: 100%;
    height: 100%;
    position: relative;
}

.room-1 {
    position: absolute;
    content: url("../new-tools/layout_pretreatment.svg");
    right: 1rem;
    top: 5rem;
    width: 95%;
}

/* .room-2{
    position: absolute;
    content: url('../tools/room-2-pret.svg');
    width: 19.5rem;
    top: 26.5rem;
    left: 16.5rem;
}

.room-3{
    position: absolute;
    content: url('../tools/room-3-pret.svg');
    width: 38rem;
    top: 27rem;
    left: 44rem;
} */

.main-label {
    position: absolute;
    top: 0.5rem;
    width: 100%;
    height: 38.5rem;
}

.gird-label {
    position: relative;
    width: 100%;
    height: 100%;
}

.action-label {
    position: absolute;
    width: 100%;
    height: 100%;
}

.action-room {
    position: relative;
    width: 100%;
    height: 100%;
}

.spary {
    position: absolute;
    display: none;
}

.icon-pipa {
    position: absolute;
}

.action-label:nth-child(1) .action-room .spary {
    width: 18.1rem;
    height: 12rem;
    top: 5.4rem;
    left: 18rem;
}

.action-label:nth-child(1) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-1.svg");
    width: 20rem;
    top: 8rem;
    left: 13rem;
}

.action-label[data-status="st1"]:nth-child(1) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-1-run.svg");
}

.action-label[data-status="st2"]:nth-child(1) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-1-idl.svg");
}

.action-label[data-status="st3"]:nth-child(1) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-1-alr.svg");
}

.action-label:nth-child(2) .action-room .spary {
    width: 16rem;
    height: 12rem;
    top: 5.4rem;
    left: 42rem;
}

.action-label:nth-child(2) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-2.svg");
    width: 27rem;
    top: 8rem;
    left: 29rem;
}

.action-label[data-status="st1"]:nth-child(2) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-2-run.svg");
}

.action-label[data-status="st2"]:nth-child(2) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-2-idl.svg");
}

.action-label[data-status="st3"]:nth-child(2) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-2-alr.svg");
}

.action-label:nth-child(3) .action-room .spary {
    width: 16rem;
    height: 12rem;
    top: 5.4rem;
    left: 61.2rem;
}

.action-label:nth-child(3) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-3.svg");
    width: 22rem;
    top: 8rem;
    left: 64rem;
}

.action-label[data-status="st1"]:nth-child(3) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-3-run.svg");
}

.action-label[data-status="st2"]:nth-child(3) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-3-idl.svg");
}

.action-label[data-status="st3"]:nth-child(3) .action-room .icon-pipa {
    content: url("../tools/pipa-pret-3-alr.svg");
}

.action-tank {
    position: absolute;
    display: flex;
    align-items: end;
}

.card-air {
    width: 100%;
    height: 60%;
    background: #7bcdff;
}

.action-tank:nth-child(1) {
    width: 8.61rem;
    height: 6.9rem;
    top: 27.3rem;
    left: 19.1rem;
}

.action-tank[data-status="st0"]:nth-child(1) .card-air {
    height: 1.2rem;
}

.action-tank[data-status="st1"]:nth-child(1) .card-air {
    height: 100%;
}

.action-tank:nth-child(2) {
    width: 8.6rem;
    height: 5.45rem;
    top: 28.8rem;
    left: 27.78rem;
}

.action-tank[data-status="st0"]:nth-child(2) .card-air {
    height: 1.2rem;
}

.action-tank[data-status="st1"]:nth-child(2) .card-air {
    height: 100%;
}

.action-tank:nth-child(3) {
    width: 17.2rem;
    height: 4.5rem;
    top: 29.7rem;
    left: 64.1rem;
}

.action-tank:nth-child(3) .card-air {
    height: 100%;
}

.action-tank:nth-child(4) {
    width: 17.1rem;
    height: 6rem;
    top: 30.3rem;
    left: 62.9rem;
}

.action-tank:nth-child(4) .card-air {
    background-color: #eb2222;
}

.action-tank[data-status="st0"]:nth-child(4) .card-air {
    height: 1.2rem;
}

.action-tank[data-status="st1"]:nth-child(4) .card-air {
    height: 100%;
}

.buble {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    z-index: 1;
    padding: 0 0.2rem;
    overflow: hidden;
    transform: rotate(180deg);
}

.buble span {
    position: relative;
    bottom: 10px;
    width: 2rem;
    height: 0.6rem;
    border-radius: 50%;
    background: #b3def8;
    margin: 0 2px;
    animation: buble 1s linear infinite;
    animation-duration: calc(10s / var(--i));
    transform-origin: bottom;
}

@keyframes buble {
    0% {
        transform: translateY(0) scale(1);
    }

    70% {
        transform: translateY(6rem) scale(1);
    }

    100% {
        transform: translateY(6rem) scale(0);
    }
}

.label-name {
    position: absolute;
    width: auto;
    height: auto;
    padding: 0.3rem;
    border-radius: 0.1rem;
    background: #b7b7b7;
    color: #000000;
    font-size: 0.7rem;
}

.label-name:nth-child(1) {
    top: 1rem;
    left: 1.5rem;
}

.label-name:nth-child(2) {
    top: 1rem;
    left: 10rem;
}

.label-name:nth-child(3) {
    top: 1rem;
    left: 46rem;
}

.label-name:nth-child(4) {
    top: 27.5rem;
    left: 8rem;
}

.label-name:nth-child(5) {
    top: 35rem;
    left: 36rem;
}

.label-name:nth-child(6) {
    top: 30rem;
    left: 56rem;
    font-size: 0.6rem;
}

.label-name:nth-child(7) {
    top: 28rem;
    left: 80.9rem;
    font-size: 0.6rem;
}

.label-name[data-status="st1"] {
    background: #4caf50;
    color: #000000;
}

.label-name[data-status="st2"] {
    background: #ffff01;
    color: #000000;
}

.label-name[data-status="st3"] {
    background: #ed1c24;
    color: #ffffff;
    animation: blinker 1s cubic-bezier(0.5, 0, 1, 1) infinite alternate;
}

.rain {
    position: relative;
    width: 100%;
    height: 12.2rem;
    display: flex;
    z-index: 100;
    padding: 0 20px;
    overflow: hidden;
}

.action-label[data-status="st1"] .action-room .spary {
    display: block;
}

.rain span {
    position: relative;
    bottom: 10px;
    width: 0.2rem;
    height: 0.4rem;
    background: #b5e1f0;
    margin: 0 2px;
    animation: animate 1s linear infinite;
    animation-duration: calc(10s / var(--i));
    transform: bottom;
}

@keyframes animate {
    0% {
        transform: translateY(0) scale(1);
    }

    70% {
        transform: translateY(12.2rem) scale(1);
    }

    100% {
        transform: translateY(12.2rem) scale(0);
    }
}


.table-value {
    position: absolute;
    width: auto;
    height: auto;
    background: #ffff01;
    padding: 0.1rem 0.5rem;
    top: 25rem;
    right: 1rem;
    z-index: 999;
}

.table-value table {
    background: #ffffff;
    border: none;
    border-collapse: collapse;
}

.table-value table tr td {
    font-size: 0.6rem;
    background-color: #ffffff !important;
    border: none !important;
    padding: 2px 5px;
}

.table-value table tr:nth-child(1) td {
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
}

.table-value:nth-child(1) {
    top: 34.5rem;
    right: 1rem;
}