@import "simple-datatables/dist/style.css";

.charge-station-status {
    width: 10%;
    position: absolute;
    z-index: 200;
    top: 32%;
    left: 14%;
    bottom: 10%;

    img {
        opacity: 1;
    }
}
.charge-station-status.charging {
    img {
        animation: pulse 2s infinite;
    }
}

@keyframes parkCar1 {
    0% {
        left: -40%;
        bottom: -4%;
    }
    100% {
        left: -1%;
        bottom: 5%;
    }
}

@keyframes parkCar1Reverse {
    0% {
        left: -1%;
        bottom: 5%;
    }
    100% {
        left: -90%;
        bottom: -4%;
    }
}

@keyframes parkCar2 {
    0% {
        left: -120%;
        bottom: -4%;
    }
    100% {
        left: -50%;
        bottom: 20%;
    }
}

@keyframes parkCar2Reverse {
    0% {
        left: -50%;
        bottom: 20%;
    }
    100% {
        left: -120%;
        bottom: -4%;
    }
}
.car-2 {
    animation: parkCar2Reverse 3s 1 normal ease-out;
    position: absolute;
    z-index: 200;
    width: 30%;
    height: 30%;
    left: 0%;
    bottom: -4%;
}

.car-2.initial {
    display: none;
}

.car-2.animated {
    animation: parkCar2 3s 1 normal ease-out;
    left: 0%;
    bottom: 15%;
}