:root {
    --start-flash-pos: -40px;
}

.flash {
    color: white;
    max-width: 200px;
    padding: 10px;
    position: fixed;
    right: 10px;
    top: var(--start-flash-pos);
    z-index: 1000;
    transition: opacity 0.5s, transform 0.5s;
    opacity: 0;
    transform: translateY(-20px);
}

.flash.displayed {
    opacity: 1;
    transform: translateY(0);
}

.flash.fade-out {
    opacity: 0;
    transform: scale(0.9);
}

.flash.error {
    background-color: red;
}

.flash.double {
    max-width: 400px;
}

.flash.success {
    background-color: green;
}

.flash.notice {
    background-color: orange;
}

.flash.displayed.nb-0 {
    top: 30px;
}

.flash.displayed.nb-1 {
    top: 70px;
}

.flash.displayed.nb-2 {
    top: 110px;
}

.flash.displayed.nb-3 {
    top: 150px;
}

.flash.displayed.nb-4 {
    top: 190px;
}

.flash.displayed.nb-5 {
    top: 230px;
}

.flash.displayed.nb-6 {
    top: 270px;
}

.flash.displayed.nb-7 {
    top: 310px;
}

.flash.displayed.nb-8 {
    top: 350px;
}

.flash.displayed.nb-9 {
    top: 390px;
}

.flash.displayed.nb-10 {
    top: 430px;
}