@-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0) } to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .custom-alert-msg-wrap { padding: 15px; padding-left: 70px; position: relative; min-width: 450px; max-width: 600px } .custom-alert-msg-wrap .close-btn { font-size: 35px; right: 10px; top: 0 } .custom-alert-msg-wrap .alert-icon { width: 40px; height: 40px; position: absolute; display: inline-block; left: 15px; top: 50%; transform: translateY(-50%) } .custom-alert-msg-wrap .alert-icon img { max-width: 100%; max-height: 100% } .custom-alert-msg-wrap .title-name { display: block } .custom-alert-msg-wrap .alert-mesg { display: block } .custom-alert-msg-wrap.alert-success { background-color: #def2d6; border-color: #cfdcc7 } .custom-alert-msg-wrap.alert-danger { background-color: #ebc8c4; border-color: #d5b2b0 } .custom-alert-msg-wrap.alert-warning { background-color: #f8f3d6; border-color: #e6e3cb } .custom-alert-msg-wrap.alert-info { background-color: #cce8f4; border-color: #b2cdd7 } .custom-alert-msg-wrap { -webkit-animation-name: fadeInUp; animation-name: fadeInUp } .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite }