.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;
    right: 1rem;
    top: 5rem;
    width: 95%;
    content: url("../new-tools/layout_spray_booth.svg");
}

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

/* 
.room-2{
    position: absolute;
    top: 0.5rem;
    width: 100%;
    content: url('../tools/room-booth-2.svg');
} */

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

@media screen and (height: 1080px) {
    .room-1 {
        top: 9.5rem;
        right: 0.9rem;
    }
}

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

.label-grid {
    position: absolute;
    background: #b7b7b7;
    border: 1px solid #000000;
    text-align: center;
    padding: 0.2rem;
    color: #000000;
}

.label-grid:nth-child(1) {
    top: 9rem;
    left: 3rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(2) {
    top: 9rem;
    left: 11.6rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(3) {
    top: 9rem;
    left: 19.5rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(4) {
    top: 9rem;
    left: 27.8rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(5) {
    top: 9rem;
    left: 36.4rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(6) {
    top: 9rem;
    left: 45.3rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(7) {
    top: 15.5rem;
    left: 3rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(8) {
    top: 15.5rem;
    left: 11.6rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(9) {
    top: 15.5rem;
    left: 19.5rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(10) {
    top: 15.5rem;
    left: 27.8rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(11) {
    top: 15.5rem;
    left: 36.4rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(12) {
    top: 15.5rem;
    left: 45.3rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(13) {
    top: 1.5rem;
    right: 24rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(14) {
    top: 9rem;
    right: 24rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(15) {
    top: 1.5rem;
    right: 13rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(16) {
    top: 7rem;
    right: 10rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(17) {
    top: 15.5rem;
    right: 12rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(18) {
    top: 16.7rem;
    right: 0rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(19) {
    top: 32rem;
    right: 26rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(20) {
    top: 28.5rem;
    right: 12rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

.label-grid:nth-child(21) {
    top: 27.5rem;
    right: 3rem;
    font-size: 0.7rem;
    padding: 0rem 0.3rem;
}

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

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

.label-water-tank:nth-child(1) {
    width: 21.8rem;
    height: 7rem;
    right: 1.2rem;
    top: 27.6rem;
}

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

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

.label-water-tank:nth-child(2) {
    width: 20.5rem;
    height: 5rem;
    right: 5.2rem;
    top: 30.5rem;
}

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

.label-water-tank[data-status="st1"]:nth-child(2) .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(20s / 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);
    }
}

.roda-motor-1 {
    position: absolute;
    width: 1.2rem;
    top: 9.15rem;
    left: 7.9rem;
    animation-name: rodaberputar;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    content: url("../tools/roda-motor-1.svg");
}

.roda-motor-2 {
    position: absolute;
    width: 0.8rem;
    top: 9.8rem;
    left: 10.1rem;
    animation-name: rodaberputar;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    content: url("../tools/roda-motor-2.svg");
}

.roda-motor-3 {
    position: absolute;
    width: 1.2rem;
    top: 9.15rem;
    left: 15.5rem;
    animation-name: rodaberputar;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    content: url("../tools/roda-motor-1.svg");
}

.roda-motor-4 {
    position: absolute;
    width: 0.8rem;
    top: 9.8rem;
    left: 17.6rem;
    animation-name: rodaberputar;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    content: url("../tools/roda-motor-2.svg");
}

.roda-motor-5 {
    position: absolute;
    width: 1.2rem;
    top: 9.15rem;
    left: 26.8rem;
    animation-name: rodaberputar;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    content: url("../tools/roda-motor-1.svg");
}

.roda-motor-6 {
    position: absolute;
    width: 0.8rem;
    top: 9.8rem;
    left: 28.9rem;
    animation-name: rodaberputar;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    content: url("../tools/roda-motor-2.svg");
}

.roda-motor-7 {
    position: absolute;
    width: 1.2rem;
    top: 9.15rem;
    left: 38.5rem;
    animation-name: rodaberputar;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    content: url("../tools/roda-motor-1.svg");
}

.roda-motor-8 {
    position: absolute;
    width: 0.8rem;
    top: 9.8rem;
    left: 40.6rem;
    animation-name: rodaberputar;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    content: url("../tools/roda-motor-2.svg");
}

.roda-motor-9 {
    position: absolute;
    width: 1.2rem;
    top: 9.15rem;
    left: 50.4rem;
    animation-name: rodaberputar;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    content: url("../tools/roda-motor-1.svg");
}

.roda-motor-10 {
    position: absolute;
    width: 0.8rem;
    top: 9.8rem;
    left: 52.6rem;
    animation-name: rodaberputar;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    animation-fill-mode: none;
    content: url("../tools/roda-motor-2.svg");
}

@media screen and (height: 1080px) {
    .roda-motor-1,
    .roda-motor-3,
    .roda-motor-5,
    .roda-motor-7,
    .roda-motor-9 {
        top: 13.6rem;
    }

    .roda-motor-5 {
        left: 26.9rem;
    }

    .roda-motor-7 {
        left: 38.5rem;
    }

    .roda-motor-9 {
        left: 50.5rem;
    }

    .roda-motor-2,
    .roda-motor-4,
    .roda-motor-6,
    .roda-motor-8,
    .roda-motor-10 {
        top: 14.3rem;
    }

    .roda-motor-8 {
        left: 40.7rem;
    }

    .roda-motor-10 {
        left: 52.6rem;
    }

    .label-water-tank:nth-child(1) {
        right: 1.1rem;
        top: 32rem;
    }
}

@keyframes rodaberputar {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}