﻿/*Animacja wentylatorow nawiew wywiew*/
.wentylator-nawiew-wywiew {
    width: 60px;
    height: 60px;
}

.wentylator-nawiew-wywiew_tr {
    animation: anime_wentylator-nawiew-wywiew_tr 2000ms linear infinite;
    -webkit-animation: anime_wentylator-nawiew-wywiew_tr 2000ms linear infinite;
}
    .offline.wentylator-nawiew-wywiew_tr {
        animation: anime_wentylator-nawiew-wywiew_tr_offline 600ms linear;
        -webkit-animation: anime_wentylator-nawiew-wywiew_tr_offline 600ms linear;
        opacity: 0.7;
        fill: #c20c0c;
    }

@keyframes anime_wentylator-nawiew-wywiew_tr {
    0% {
        transform: translate(499.999084px,500.004356px) rotate(90deg);
        opacity: 0.8;
    }
    100% {
        transform: translate(499.999084px,500.004356px) rotate(360deg);
        opacity: 0.8;
    }
    
}
@-webkit-keyframes anime_wentylator-nawiew-wywiew_tr {
    0% {
        transform: translate(499.999084px,500.004356px) rotate(90deg);
        opacity: 0.8;
    }

    100% {
        transform: translate(499.999084px,500.004356px) rotate(360deg);
        opacity: 0.8;
    }
}

@keyframes anime_wentylator-nawiew-wywiew_tr_offline {
    0% {
        transform: translate(499.999084px,500.004356px) rotate(90deg);
        opacity: 0.7;
        fill: #000000;
    }

    30% {
        transform: translate(499.999084px,500.004356px) rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: translate(499.999084px,500.004356px) rotate(360deg);
        opacity: 0.7;
        fill: #c20c0c;
    }
}
@-webkit-keyframes anime_wentylator-nawiew-wywiew_tr_offline {
    0% {
        transform: translate(499.999084px,500.004356px) rotate(90deg);
        opacity: 0.7;
        fill: #000000;
    }

    30% {
        transform: translate(499.999084px,500.004356px) rotate(180deg);
        opacity: 1;
    }

    100% {
        transform: translate(499.999084px,500.004356px) rotate(360deg);
        opacity: 0.7;
        fill: #c20c0c;
    }
}

/*Animacja strzalki nawiewu 178,34,34*/
@-webkit-keyframes animate-nawiew-arrow-fill-1 {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    50% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    75% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }
}

@keyframes animate-nawiew-arrow-fill-1 {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }
    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }
    50% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }
    75% {
        fill: rgb(43 175 225);
        opacity: 1;
    }
    100% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }
}



.nawiew-arrow-1 {
    -webkit-animation: animate-nawiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
    animation: animate-nawiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
}

@-webkit-keyframes animate-nawiew-arrow-fill-1-offline {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.8;
    }
}

@keyframes animate-nawiew-arrow-fill-1-offline {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.8;
    }
}

.offline .nawiew-arrow-1 {
    -webkit-animation: animate-nawiew-arrow-fill-1-offline 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both ;
    animation: animate-nawiew-arrow-fill-1-offline 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both ;
}

@-webkit-keyframes animate-nawiew-arrow-fill-2 {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    50% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    75% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }
}

@keyframes animate-nawiew-arrow-fill-2 {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    50% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    75% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }
}

.nawiew-arrow-2 {
    -webkit-animation: animate-nawiew-arrow-fill-2 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
    animation: animate-nawiew-arrow-fill-2 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
}

@-webkit-keyframes animate-nawiew-arrow-fill-2-offline {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.8;
    }
}

@keyframes animate-nawiew-arrow-fill-2-offline {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.8;
    }
}

    .offline .nawiew-arrow-2 {
        -webkit-animation: animate-nawiew-arrow-fill-2-offline 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
        animation: animate-nawiew-arrow-fill-2-offline 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
    }

@-webkit-keyframes animate-nawiew-arrow-fill-3 {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    50% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    75% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }
}

@keyframes animate-nawiew-arrow-fill-3 {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    50% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    75% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }
}

.nawiew-arrow-3 {
    -webkit-animation: animate-nawiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
    animation: animate-nawiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
}

@-webkit-keyframes animate-nawiew-arrow-fill-3-offline {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.8;
    }
}

@keyframes animate-nawiew-arrow-fill-3-offline {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.8;
    }
}
    .offline .nawiew-arrow-3 {
        -webkit-animation: animate-nawiew-arrow-fill-1-offline 4s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
        animation: animate-nawiew-arrow-fill-1-offline 4s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
    }

@-webkit-keyframes animate-nawiew-arrow-fill-4 {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    50% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    75% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }
}

@keyframes animate-nawiew-arrow-fill-4 {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    50% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    75% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }
}

.nawiew-arrow-4 {
    -webkit-animation: animate-nawiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
    animation: animate-nawiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
}

@-webkit-keyframes animate-nawiew-arrow-fill-4-offline {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.8;
    }
}

@keyframes animate-nawiew-arrow-fill-4-offline {
    0% {
        fill: rgb(43 175 225);
        opacity: 0.2;
    }

    25% {
        fill: rgb(43 175 225);
        opacity: 1;
    }

    100% {
        fill: rgb(43 175 225);
        opacity: 0.8;
    }
}
    .offline .nawiew-arrow-4 {
        -webkit-animation: animate-nawiew-arrow-fill-1-offline 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
        animation: animate-nawiew-arrow-fill-1-offline 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both;
    }


/*Animacja strzalki wywiewu */
@-webkit-keyframes animate-wywiew-arrow-fill-1 {
    0% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    25% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    50% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    75% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    100% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }
}

@keyframes animate-wywiew-arrow-fill-1 {
    0% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    25% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    50% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    75% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    100% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }
}

.wywiew-arrow-1 {
    -webkit-animation: animate-wywiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
    animation: animate-wywiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
}

@-webkit-keyframes animate-wywiew-arrow-fill-2 {
    0% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    25% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    50% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    75% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    100% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }
}

@keyframes animate-wywiew-arrow-fill-2 {
    0% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    25% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    50% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    75% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    100% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }
}

.wywiew-arrow-2 {
    -webkit-animation: animate-wywiew-arrow-fill-2 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
    animation: animate-wywiew-arrow-fill-2 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
}

@-webkit-keyframes animate-wywiew-arrow-fill-3 {
    0% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    25% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    50% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    75% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    100% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }
}

@keyframes animate-wywiew-arrow-fill-3 {
    0% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    25% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    50% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    75% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    100% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }
}

.wywiew-arrow-3 {
    -webkit-animation: animate-wywiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
    animation: animate-wywiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
}

@-webkit-keyframes animate-wywiew-arrow-fill-4 {
    0% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    25% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    50% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    75% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    100% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }
}

@keyframes animate-wywiew-arrow-fill-4 {
    0% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    25% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    50% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }

    75% {
        fill: rgb(101 95 95);
        opacity: 1;
    }

    100% {
        fill: rgb(101 95 95);
        opacity: 0.2;
    }
}

.wywiew-arrow-4 {
    -webkit-animation: animate-wywiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
    animation: animate-wywiew-arrow-fill-1 5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both infinite;
}

/*Animacja grafiki w statusie urzadzenia - powietrze nawiewane/wywiewane start*/
@keyframes status-powietrze-1 {

    0% {
        stroke-dashoffset: 0;
        stroke-dasharray: 50px;
    }

    100% {
        stroke-dashoffset: 300px;
        stroke-dasharray: 50px;
    }

}

@keyframes status-powietrze-2 {

    0% {
        stroke-dashoffset: 388px;
        stroke-dasharray: 50px;
    }

    100% {
        stroke-dashoffset: 88px;
        stroke-dasharray: 50px;
    }
}

@keyframes status-powietrze-3 {

    0% {
        stroke-dashoffset: 450px;
        stroke-dasharray: 50px;
    }

    100% {
        stroke-dashoffset: 150px;
        stroke-dasharray: 50px;
    }
}

@keyframes status-powietrze-4 {

    0% {
        stroke-dashoffset: 165px;
        stroke-dasharray: 50px;
    }

    100% {
        stroke-dashoffset: 465px;
        stroke-dasharray: 50px;
    }
}

@keyframes status-wymiennik-1 {

    0% {
        opacity: 0.2;
        fill: #ffffff;
    }

    50% {
        opacity: 0.35;
        fill: #fca98d;
    }

    90% {
        opacity: 0.25;
        fill: #ffffff;
    }
}

@keyframes status-wymiennik-2 {

    0% {
        stroke-dashoffset: 0px;
        stroke-dasharray: 20px;
    }

    100% {
        stroke-dashoffset: 400px;
        stroke-dasharray: 20px;
    }
}
/*Animacja grafiki w statusie urzadzenia - powietrze nawiewane/wywiewane koniec*/

/*Elementy powietrza nawiewanego bypass zamkniety start*/
#Group_1663_bypasszamkniety #Group_1661_bypasszamkniety #Path_950_bypasszamkniety {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}


#Line_188_bypasszamkniety {
    opacity: 0.8;
    transform-origin: 50% 50%;
    animation-name: status-powietrze-3;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#Line_192_bypasszamkniety {
    opacity: 0.8;
    transform-origin: 50% 50%;
    animation-name: status-powietrze-4;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#Line_193_bypasszamkniety {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#Line_194_bypasszamkniety {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-3;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#Path_945_bypasszamkniety_fill {
    transform-origin: 50% 50%;
    animation-name: status-wymiennik-1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/*Elementy powietrza nawiewanego bypass zamkniety koniec*/

/*Elementy powietrza wywiewanego start*/
#Group_1664_b #Group_1661-2_b #Path_950-2_b {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#Line_197_b {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-3;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#Line_198_b {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-4;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#Line_195_b {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-4;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#Line_196_b {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-2;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/*Elementy powietrza wywiewanego koniec*/

/*Elementy powietrza nawiewanego bypass otwarty start*/
#Group_1663_bypassotwarty #Group_1661_bypassotwarty #Path_950_bypassotwarty {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-1;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#Path_943_bypassotwarty {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-4;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
#Line_194_bypassotwarty {
    transform-origin: 50% 50%;
    animation-name: status-powietrze-2;
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
/*Elementy powietrza nawiewanego bypass otwarty koniec*/