#scanner-area {
    position: relative;
    width: 100%;
    height: 300px;
    margin-bottom: 10px;
}

.scan-error,
.scan-success {
    animation: 1s linear 1s forwards 1 scan-message-fadeout;
    margin-bottom: 10px;
}

    .scan-error i,
    .scan-success i {
        animation: 0.2s linear 0s forwards 1 scan-message-iconpulse;
        transform-origin: center;
        color: inherit;
    }

.scan-error {
    color: red;
}

.scan-success {
    color: #5f735f;
}

@keyframes scan-message-iconpulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.3);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes scan-message-fadeout {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}