.message {
    border: 1px solid;
    border-radius: 2px;
    // border-color: none;
    position: relative;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    min-height: 10px;
    width: 100%;
    padding: 20px 20px 20px 70px;
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: 15px center;

    white-space:pre-wrap;
}

.message-close {
    position: absolute;
    top: 10px;
    width: calc(100% - 85px);
    height: 12px;
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap;
    .message-close-icon {
        height: 12px;
        width: 12px;
        cursor: pointer;
        font-size: 12px;
    }
}

.message-error {
    border-color: #C33228;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMTguNzcgMTE4Ljc3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMTguNzcgMTE4Ljc3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0MxMzMyNzt9Cgkuc3Qxe2ZpbGw6Izk2MjMxRjt9Cgkuc3Qye2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+Cjxwb2x5Z29uIGNsYXNzPSJzdDAiIHBvaW50cz0iNzkuMTgsMTEuNTkgMzkuNTksMTEuNTkgMTEuNTksMzkuNTkgMTEuNTksNzkuMTggMzkuNTksMTA3LjE4IDc5LjE4LDEwNy4xOCAxMDcuMTgsNzkuMTggCgkxMDcuMTgsMzkuNTkgIi8+CjxnPgoJPHBhdGggY2xhc3M9InN0MSIgZD0iTTU2Ljg2LDc5YzAuMTMtMS43NywwLjgtMy4xOCwyLTQuMjRjMS4yLTEuMDYsMi42NC0xLjUzLDQuMy0xLjRjMS42NiwwLjEyLDMsMC44LDQsMi4wMgoJCWMxLjAxLDEuMjMsMS40NCwyLjcyLDEuMzEsNC40OWMtMC4xMywxLjc3LTAuNzksMy4xOC0xLjk2LDQuMjRjLTEuMTgsMS4wNi0yLjYsMS41My00LjI2LDEuNDFjLTEuNjYtMC4xMi0zLjAxLTAuOC00LjA0LTIuMDMKCQlDNTcuMTcsODIuMjYsNTYuNzIsODAuNzYsNTYuODYsNzl6IE02MS4yOCw0MC45MmwwLjQzLTguOWw5LjA0LDAuNjhsLTAuOTgsOC44NmwtMy4yNCwyNi40OWwtNi0wLjQ1TDYxLjI4LDQwLjkyeiIvPgo8L2c+CjxnPgoJPHBhdGggY2xhc3M9InN0MiIgZD0iTTUzLjU2LDgwLjU4YzAtMS43NywwLjU2LTMuMjMsMS42OC00LjM4YzEuMTItMS4xNSwyLjUxLTEuNzIsNC4xOC0xLjcyYzEuNjcsMCwzLjA1LDAuNTcsNC4xNCwxLjcyCgkJYzEuMSwxLjE1LDEuNjQsMi42MSwxLjY0LDQuMzhjMCwxLjc3LTAuNTUsMy4yMy0xLjY0LDQuMzhjLTEuMDksMS4xNS0yLjQ3LDEuNzItNC4xNCwxLjcyYy0xLjY3LDAtMy4wNi0wLjU3LTQuMTgtMS43MgoJCUM1NC4xMiw4My44MSw1My41Niw4Mi4zNSw1My41Niw4MC41OHogTTU1LjEyLDQyLjI4bC0wLjIzLTguOTFoOS4wN2wtMC4zMSw4LjkxbC0xLjI1LDI2LjY2aC02LjAyTDU1LjEyLDQyLjI4eiIvPgo8L2c+Cjwvc3ZnPgo=');
}

.message-warning {
    border-color: #FEB916;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMTguNzcgMTE4Ljc3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMTguNzcgMTE4Ljc3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6I0ZDQjkxNzt9Cgkuc3Qxe2ZpbGw6I0VEOTQyMjt9Cgkuc3Qye2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik01Mi4yNiwyMS43M2MyLjg3LTQuOTYsMTAuMDMtNC45NiwxMi45LDBsMTkuOCwzNC4yOWwxOS44LDM0LjI5YzIuODcsNC45Ni0wLjcyLDExLjE3LTYuNDUsMTEuMTdINTguN2gtMzkuNgoJYy01LjczLDAtOS4zMS02LjIxLTYuNDUtMTEuMTdsMTkuOC0zNC4yOUw1Mi4yNiwyMS43M3oiLz4KPGc+Cgk8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNTQuNzQsODMuODZjMC4xMi0xLjU3LDAuNzEtMi44MywxLjc4LTMuNzdjMS4wNy0wLjk0LDIuMzUtMS4zNiwzLjgzLTEuMjVjMS40OCwwLjExLDIuNjcsMC43MSwzLjU2LDEuOAoJCWMwLjksMS4wOSwxLjI4LDIuNDIsMS4xNyw0Yy0wLjEyLDEuNTctMC43LDIuODMtMS43NSwzLjc4Yy0xLjA1LDAuOTQtMi4zMSwxLjM2LTMuNzksMS4yNWMtMS40OC0wLjExLTIuNjgtMC43MS0zLjYtMS44MQoJCUM1NS4wMiw4Ni43Nyw1NC42Miw4NS40NCw1NC43NCw4My44NnogTTU4LjY3LDQ5Ljk2bDAuMzgtNy45M2w4LjA1LDAuNmwtMC44Nyw3Ljg5bC0yLjg4LDIzLjU4bC01LjM0LTAuNEw1OC42Nyw0OS45NnoiLz4KPC9nPgo8Zz4KCTxwYXRoIGNsYXNzPSJzdDIiIGQ9Ik01My4xNyw4NS4xNGMwLTEuNTgsMC41LTIuODgsMS41LTMuOWMxLTEuMDIsMi4yNC0xLjUzLDMuNzItMS41M2MxLjQ4LDAsMi43MSwwLjUxLDMuNjksMS41MwoJCWMwLjk4LDEuMDIsMS40NiwyLjMyLDEuNDYsMy45YzAsMS41OC0wLjQ5LDIuODgtMS40NiwzLjljLTAuOTcsMS4wMi0yLjIsMS41My0zLjY5LDEuNTNjLTEuNDksMC0yLjczLTAuNTEtMy43Mi0xLjUzCgkJQzUzLjY3LDg4LjAyLDUzLjE3LDg2LjcyLDUzLjE3LDg1LjE0eiBNNTQuNTYsNTEuMDRsLTAuMjEtNy45M2g4LjA3bC0wLjI4LDcuOTNsLTEuMTEsMjMuNzNoLTUuMzZMNTQuNTYsNTEuMDR6Ii8+CjwvZz4KPC9zdmc+Cg==');
}

.message-info {
    border-color: lightgrey;
}

.message-success {
    border-color: #3EB54C;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjAuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCAxMTguNzcgMTE4Ljc3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxMTguNzcgMTE4Ljc3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGw6IzNFQjQ0QTt9Cgkuc3Qxe2ZpbGw6IzJEOTk0RDt9Cgkuc3Qye2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU+CjxnPgoJPHBvbHlnb24gY2xhc3M9InN0MCIgcG9pbnRzPSI1OS4zOCwxNC4zOCA2Ny4yMSwxMCA3My4yOSwxNi41OSA4Mi4wOCwxNC44MyA4NS44MywyMi45OCA5NC43NCwyNC4wMyA5NS43OSwzMi45MyAxMDMuOTMsMzYuNjggCgkJMTAyLjE4LDQ1LjQ4IDEwOC43Nyw1MS41NiAxMDQuMzgsNTkuMzggMTA4Ljc3LDY3LjIxIDEwMi4xOCw3My4yOSAxMDMuOTMsODIuMDggOTUuNzksODUuODMgOTQuNzQsOTQuNzQgODUuODMsOTUuNzkgCgkJODIuMDgsMTAzLjkzIDczLjI5LDEwMi4xOCA2Ny4yMSwxMDguNzcgNTkuMzgsMTA0LjM4IDUxLjU2LDEwOC43NyA0NS40OCwxMDIuMTggMzYuNjgsMTAzLjkzIDMyLjkzLDk1Ljc5IDI0LjAzLDk0Ljc0IAoJCTIyLjk4LDg1LjgzIDE0LjgzLDgyLjA4IDE2LjU5LDczLjI5IDEwLDY3LjIxIDE0LjM4LDU5LjM4IDEwLDUxLjU2IDE2LjU5LDQ1LjQ4IDE0LjgzLDM2LjY4IDIyLjk4LDMyLjkzIDI0LjAzLDI0LjAzIDMyLjkzLDIyLjk4IAoJCTM2LjY4LDE0LjgzIDQ1LjQ4LDE2LjU5IDUxLjU2LDEwIAkiLz4KPC9nPgo8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNTEuOTcsNzguOGMtMC4zOCwwLTAuNzUtMC4xMS0xLjA4LTAuMzJsLTEzLjcyLTguODZjLTAuOTMtMC42LTEuMTktMS44NC0wLjYtMi43NwoJYzAuNi0wLjkzLDEuODQtMS4xOSwyLjc2LTAuNmwxMi41Nyw4LjExTDg0LjM0LDUwLjVjMC44OS0wLjY1LDIuMTQtMC40NiwyLjgsMC40M2MwLjY1LDAuODksMC40NiwyLjE0LTAuNDMsMi44TDUzLjE2LDc4LjQxCglDNTIuOCw3OC42Nyw1Mi4zOSw3OC44LDUxLjk3LDc4Ljh6Ii8+CjxnPgoJPHBhdGggY2xhc3M9InN0MiIgZD0iTTUxLjk3LDc4LjY2Yy0wLjUxLDAtMS4wMi0wLjItMS40MS0wLjU5TDM2LjgzLDY0LjM1Yy0wLjc4LTAuNzgtMC43OC0yLjA1LDAtMi44M2MwLjc4LTAuNzgsMi4wNS0wLjc4LDIuODMsMAoJCWwxMi4zMSwxMi4zMWwzMy4xNC0zMy4xNGMwLjc4LTAuNzgsMi4wNS0wLjc4LDIuODMsMGMwLjc4LDAuNzgsMC43OCwyLjA1LDAsMi44M0w1My4zOCw3OC4wOEM1Mi45OSw3OC40Nyw1Mi40OCw3OC42Niw1MS45Nyw3OC42NgoJCXoiLz4KPC9nPgo8L3N2Zz4K');
}