.message_color_false
{
    background-color: #ff787d;
    color: #ffffff;
}

.message_color_true
{
    background-color: #abf8b6;
    color: #066007;
}

.message_color_warning
{
    background-color: orange;
    color: #ffffff;
}

#message_1
{
    z-index: 2000;
    width: 100%;
    /* top: -1000px; */
    bottom: -1000px;
    left: 0px;
    display: none;
    position: fixed;
    border-radius: 3px;
}

#message_2
{
    width: var(--width_in);
    margin: 0 auto;
    padding: 10px;
}

#message_2_level_1
{font-weight: bold;}

#message_2_level_1, #message_2_level_2
{
    text-align: center;
    padding: 5px;
}

#message_2_level_2 {
	max-height: 30vh;
	overflow-y: auto;
	scrollbar-width: thin;
}

#msg_close
{
    box-shadow: 0px 0px 3px var(--dark_gray);
    background-color: var(--shadow);
    border-radius: 50%;
    padding: 5px;
    margin-left: 90%;
    margin-top: 10px;
    cursor: pointer;
    position: absolute;
}

#msg_close:hover
{
    box-shadow: 0px 0px 9px var(--dark_gray);
}







/*  ===  input error alert .msg_input_error  ===========================  */
    .msg_input_error
    {
        position: relative;
        box-shadow: 0px 0px 0px 1px #ff787d;
        border-radius: 3px;

        --after_content: 'Error !'; /* Default content */

        &::after
        {
            position: absolute;
            padding: 0px 4px;
            font-style: italic;
            font-size: 12px;
            color: #ff787d;
            content: var(--after_content);
            top: 100%;
            left: 0px;
        }
    }
/*  ===  input error alert .msg_input_error  ===========================  */