.msgAlertContainer{font-size:15px; font-family:arial; line-height:18px!important; background-color:#565656; position:absolute; width:100%; z-index:1;} .msgAlertHolder{padding:5px; text-align: center; color:#ffffff; position: relative;} .msgAlertTxtContentIcon{border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 15px solid #FF0; position: relative; top: -18px; right: 3px;} .msgAlertTxtContentIcon::after {content: "!"; position: absolute; left: -0.51em; font-size: 13px; color: black; height: 0.80em; width: 1.077em; font-weight: bold; top: 18px;} .msgAlertTxtTitleContent{font-weight: bold;} .msgAlertTextContentTooltip{display:none; width: 100%; background-color: rgba(0,0,0,.8); color: #fff; text-align: center; padding: 5px; position: absolute; z-index: 1; cursor: pointer;} @media (max-width: 992px) {.msgAlertContainer{cursor: pointer;} .msgAlertHolder{padding:5px; text-align: center; color:#ffffff; position: relative; width:90%; overflow: hidden; text-overflow: ellipsis;} .msgAlertTextContent{text-align: center; color:#ffffff; width:65%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align:middle;} .msgAlertTextContentMore::after {content: "more...";} .msgAlertContainer:hover .msgAlertTextContentTooltip{display:block;}}