.alert { padding: 40px; background-color: #F5F7F9; color: #4f5b66; text-align: center; font-size: 16px; border-radius:3px; margin-bottom:30px; position:relative; } .alert em { font-weight: bold; color: #2b303b; } .alert i.material-icons { font-size: 42px; display: block; text-align: center; width: 100%; margin-bottom: 20px; } .alert-error { background: #bf616a; color: #fff; line-height:24px; } .alert-success { background: #a3be8c; color: #fff; line-height:24px; } .alert-create-not-found { color: rgba(255,255,255,0.95); background:#59abe3; background: #8fa1b3; outline:none; border:none; width:100%; font-family: Roboto; } .alert-success em, .alert-error em, .alert-create-not-found em { font-weight: bold; color: #fff; font-size: 120%; margin-left:10px; } @-webkit-keyframes delayed-rotate { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes delayed-rotate { 0% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @keyframes delayed-rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .waiting { -webkit-animation-name: delayed-rotate; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -moz-animation-name: delayed-rotate; -moz-animation-duration: 1s; -moz-animation-iteration-count: infinite; -moz-animation-timing-function: ease-in-out; animation-name: delayed-rotate; animation-duration: 1s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }