.messageContainer { text-align: center; max-width: 100% !important; position: fixed !important; right: 0; bottom: 0; z-index: 1000; /* over .modalLayer, under sideMenu */ width: 100%; } .messageContainer > tbody > tr > td { vertical-align: bottom; } .messageContainer > tbody > tr > td > .messageBox { animation-name: expandUp; animation-duration: 0.7s; animation-timing-function: ease; padding: 0 20px 0 20px; margin: 5px 0 0 0; overflow: hidden; transition: all 350ms cubic-bezier(0.1, 0.2, 0.1, 1); box-shadow: 0 5px 10px #000000, 0 0 15px rgba(255, 255, 255, 0.2) inset; color: white; border: none; position: relative; background-color: #1b1b1b; border-radius: 0; height: 70px; line-height: 70px; font-size: 11px; } .messageContainer > tbody > tr > td > .messageBox::before { font-family: "Font Awesome 5 Free", sans-serif; position: absolute; top: 0; font-size: 18px; width: 50px; background-color: rgba(0, 0, 0, 0.2); left: 0; height: 100%; } .messageContainer > tbody > tr > td > .messageBox::after { position: absolute; cursor: pointer; pointer-events: all; font-size: 20px; font-family: "Font Awesome 5 Free", sans-serif; font-weight: 900; content: "\f00d"; color: rgba(255, 255, 255, 0.5); top: 10px; right: 15px; line-height: initial; } .messageContainer > tbody > tr > td > .messageBox.success { background-color: #8CC152; } .messageContainer > tbody > tr > td > .messageBox.success::before { font-weight: 900; content: "\f00c"; /* check mark */ } .messageContainer > tbody > tr > td > .messageBox.success .type::before { content: "ERFOLG"; } .messageContainer > tbody > tr > td > .messageBox.info { background-color: #4A89DC; } .messageContainer > tbody > tr > td > .messageBox.info::before { font-weight: 900; content: "\f129"; /* info "i" */ } .messageContainer > tbody > tr > td > .messageBox.info .type::before { content: "INFO"; } .messageContainer > tbody > tr > td > .messageBox.warning { background-color: #e68035; } .messageContainer > tbody > tr > td > .messageBox.warning::before { font-weight: 900; content: "\f071"; /* warning sign */ } .messageContainer > tbody > tr > td > .messageBox.warning .type::before { content: "WARNUNG"; } .messageContainer > tbody > tr > td > .messageBox.error { background-color: #e74c3c; } .messageContainer > tbody > tr > td > .messageBox.error::before { font-weight: 900; content: "\f071"; /* warning sign */ } .messageContainer > tbody > tr > td > .messageBox.error .type::before { content: "FEHLER"; } .messageContainer > tbody > tr > td > .messageBox .type::before { position: absolute; top: -10px; text-align: left; left: 70px; font-family: OpenSansBold, sans-serif; font-size: 14px; } .messageContainer > tbody > tr > td > .messageBox .message { left: 70px; top: 35px; line-height: initial; text-align: left; position: absolute; max-width: calc(100% - 105px); } @media (max-height: 767px) { .messageContainer > tbody > tr > td > .messageBox { margin-top: 2px;height: 35px; line-height: 35px; } .messageContainer > tbody > tr > td > .messageBox::before { width: 30px; } .messageContainer > tbody > tr > td > .messageBox::after { top: 7px; right: 10px; } .messageContainer > tbody > tr > td > .messageBox .type { display: none; } .messageContainer > tbody > tr > td > .messageBox .message { max-width: calc(100% - 70px);left: 40px; top: 10px; } }