* {
	box-sizing: border-box
}

#howto-animation {
    width: 50%;
}

#howto-animation svg {
    margin-top: 70px
}

.jiggling {
    animation: jiggle 5s linear 1 normal forwards;
    transform-box: fill-box;
    transform-origin: center
}

#xd2 {
    animation-delay: 0.1s
}

#xd3 {
    animation-delay: 0.5s
}

#xd4 {
    animation-delay: 0.3s
}

#xd5 {
    animation-delay: 0.4s
}

@keyframes jiggle {
    0% {
        opacity: 0.5;
        transform: scale(1) rotate(0deg)
    }
    10% {
        opacity: 0.5;
        transform: scale(1) rotate(0deg)
    }
    11% {
        opacity: 1;
        transform: translate(-2px, 0) scale(1.1) rotate(-15deg)
    }
    12% {
        transform: translate(2px, 0) scale(1.2) rotate(15deg)
    }
    13% {
        transform: translate(-2px, 0) scale(1.3) rotate(-15deg)
    }
    14% {
        transform: translate(2px, 0) scale(1.4) rotate(15deg)
    }
    15% {
        transform: translate(-2px, 0) scale(1.5) rotate(-15deg)
    }
    16% {
        transform: translate(2px, 0) scale(1.4) rotate(15deg)
    }
    17% {
        transform: translate(-2px, 0) scale(1.3) rotate(-15deg)
    }
    18% {
        transform: translate(2px, 0) scale(1.2) rotate(15deg)
    }
    19% {
        transform: translate(-2px, 0) scale(1.1) rotate(-15deg)
    }
    20% {
        transform: translate(0, 0) scale(1.1) rotate(0deg)
    }
    50% {
        opacity: 1;
        transform: scale(1.1) rotate(0deg)
    }
    100% {
        opacity: 0.5;
        transform: scale(1) rotate(0deg)
    }
}

.xc {
    opacity: 0
}

.alerting {
    animation: fadeinout 1.2s linear 1 normal forwards
}

@keyframes fadeinout {
    0% {
        opacity: 0
    }
    25% {
        opacity: 1
    }
    100% {
        opacity: 0
    }
}

#target {
    transition: opacity 0.3s
}

#target.outage {
    opacity: 0.5
}

#target.outage .led {
    fill: #d40000 !important
}

.xe {
    opacity: 0
}

.xe.in {
    animation: dotinout 5s ease-in-out 1 normal forwards;
    transform-box: fill-box;
    transform-origin: center
}

@keyframes dotinout {
    0% {
        transform: scale(0.1);
        opacity: 0
    }
    19% {
        transform: scale(0.1);
        opacity: 0
    }
    20% {
        transform: scale(0.1);
        opacity: 1
    }
    23% {
        transform: scale(1);
        opacity: 1
    }
    60% {
        transform: scale(1);
        opacity: 1
    }
    65% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}