#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;
    }
}