/*-- MESSAGES --*/

.display-msgs {
    width: 75%;
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 5px;
    font-size: 1rem;
    border-radius: 15px;
    border: solid 1px rgb(167, 163, 163);
    margin: auto;
    padding: 10px;
    margin: 10px auto;
}

/* fadein matches the keyframe vsteam below */
.display-msgs {
    animation: fadein 1s;
}

.flash-5-times {
    animation-iteration-count: 5;
}

@keyframes fadein {
    from { opacity: 0}
    to   { opacity: 1}
}

.processing {
    background-color: rgb(109, 153, 206);
}

.notice {
    background-color: rgb(201, 171, 235);
}

.reminder {
    color: rgb(230, 224, 224);
    background-color: #7a6845;
}

.safety-notices {
    background-color: rgba(255, 248, 225, 1);
    max-width: 750px;
}

.safety-strong {
    color: red;
}

.attention {
    color: rgba(255, 0, 0, 0.733);
}

.success {
    background-color: rgb(170, 207, 170);
}

.success-light {
    background-color: rgb(170, 207, 170, 0.50);
}

.success-bright {
    background-color: rgb(117, 179, 117);
}

.action {
    background-color: rgb(248, 230, 211); /* soft beige */
}

/* This should stand out more than the .action class above. */
.action-pre-ev {
    background-color: rgba(226, 177, 177, 0.75); /* bright tangerine */
}

/* Must be darker as the btn text colour is white on vsteam pages. */
.action-vsteam {
    background-color: rgb(143, 117, 89); /* soft beige */
}

.failed,
.error {
    background-color: rgb(216, 159, 156);
}

.failed-bright {
    background-color: rgb(202, 84, 84);
}

.server-err-form {
    background-color: rgb(245, 232, 219);
}

.client-err-form {
    background-color: rgb(233, 199, 198);
}

.server-err-form,
.client-err-form {
    padding: 5px;
    border-radius: 5px;
}

.glow-edge-active {
    box-shadow: inset 0 0 3px rgb(26, 115, 232), 0 0 3px rgb(26, 115, 232);
}

.glow-edge-change {
    box-shadow: inset 0 0 25px rgb(26, 115, 232), 0 0 25px rgb(26, 115, 232);
    transition: box-shadow 0.25s ease-in-out;
}

.glow-edge-action {
    box-shadow: inset 0 0 25px rgb(248, 230, 211), 0 0 25px rgb(248, 230, 211);
    transition: box-shadow 0.25s ease-in-out;
}

.glow-edge-action-t {
    box-shadow: inset 0 0 3px rgb(248, 230, 211), 0 0 3px rgb(248, 230, 211);
    transition: box-shadow 0.20s ease-in-out;
}

.glow-edge-failed {
    box-shadow: inset 0 0 25px rgb(192, 86, 80), 0 0 25px rgb(192, 86, 80);
    transition: box-shadow 0.25s ease-in-out;
}

.glow-edge-failed-t {
    box-shadow: inset 0 0 3px rgb(192, 86, 80), 0 0 3px rgb(192, 86, 80);
    transition: box-shadow 0.20s ease-in-out;
}

.glow-edge-success {
    box-shadow: inset 0 0 25px rgb(80, 177, 80), 0 0 25px rgb(80, 177, 80);
    transition: box-shadow 0.25s ease-in-out;
}

.glow-edge-success-t {
    box-shadow: inset 0 0 3px rgb(80, 177, 80), 0 0 3px rgb(80, 177, 80);
    transition: box-shadow 0.20s ease-in-out;
}

@media (max-width: 750px) {

    .display-msgs,
    .proc-messages {
        width: 100%;
    }
}