.feedback-field {
    position: fixed;
    max-width: 400px;
    width: 90vw;
    z-index: 1100;
    display: flex;
    flex-direction: column-reverse;
}

.message {
    width: 100%;
    background-color: white;
    border: solid 1px #666;
    color: black;
    cursor: pointer;
}

@media only screen and (min-width: 480px) {
    .feedback-field {
        bottom: 25px;
        right: 25px;
    }
    .message {
        padding: 0.4rem;
        margin: 0.6rem 0.6rem 0.6rem 0;
        font-size: 12pt;
    }
}

@media only screen and (min-width: 359px) and (max-width: 479px) {
    .feedback-field {
        bottom: 15px;
        right: 15px;
    }
    .message {
        padding: 0.3rem;
        margin: 0.448rem 0.448rem 0.448rem 0;
        font-size: 10pt;
    }
}

@media only screen and (max-width: 358px) {
    .feedback-field {
        bottom: 4px;
        right: 4px;
    }
    .message {
        padding: 0.242rem;
        margin: 0.388rem 0.388rem 0.388rem 0;
        font-size: 9pt;
    }
}

.message:hover {
    background-color: #EFEFEF;
}

.message.yellow {
    border-right: solid 9px #FAE500;
    background-color: #FFFFA0;
    color: #676700;
}

.message.yellow:hover {
    background-color: #FFFFBC;
}

.message.green {
    border-right: solid 9px #37CE29;
    background-color: #AFFFAE;
    color: #278620;
}

.message.green:hover {
    background-color: #BFFFCE;
}

.message.red {
    border-right: solid 9px #D45757;
    background-color: #F09999;
    color: #7F1414;
}

.message.red:hover {
    background-color: #FEB1B0;
}