/*	myAlert CSS - v1.1 - May 2, 2020
 	Copyright 2019 myAlert by Biboy Langomez II; Licensed Web Developer
 */

@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins|Source+Code+Pro&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins|Sen|Source+Code+Pro&display=swap');
@keyframes fadeIn { from { opacity: .1; } to { opacity: 1; } }@keyframes fadeOut { from { opacity: 1; } to { opacity: .1;} }@keyframes glowIn {0% { transform: scale(.4); } 10% { transform: scale(.5); } 20% { transform: scale(.6); }30% { transform: scale(.7); } 40% { transform: scale(.8); } 50% { transform: scale(.9); }60% { transform: scale(1); } 70% { transform: scale(1.1); } 80% { transform: scale(1.2); }90% { transform: scale(1.1); } 100% { transform: scale(1); }} @keyframes glowOut {0% { transform: scale(1); } 10% { transform: scale(1); } 20% { transform: scale(.9); }30% { transform: scale(.8); } 40% { transform: scale(.7); } 50% { transform: scale(.6); }60% { transform: scale(.5); } 70% { transform: scale(.4); } 80% { transform: scale(.3); }90% { transform: scale(.2); } 100% { transform: scale(.1); }} @keyframes shake {0% { transform: translate(2px, 2px) rotate(0deg); }10% { transform: translate(-2px, -3px) rotate(-2deg); }20% { transform: translate(-4px, 0px) rotate(2deg); }30% { transform: translate(4px, 3px) rotate(0deg); }40% { transform: translate(2px, -2px) rotate(2deg); } 50% { transform: translate(-2px, 3px) rotate(-2deg); } 60% { transform: translate(-4px, 2px) rotate(0deg); }70% { transform: translate(4px, 2px) rotate(-2deg); }80% { transform: translate(-2px, -2px) rotate(12deg); }90% { transform: translate(2px, 3px) rotate(0deg); }100% { transform: translate(2px, -3px) rotate(-2deg); }}.myalert-container {width: 100%; height: 100vh; position: fixed; background: rgba(0,0,0,.2); top: 0; left: 0; z-index: 9999999;	animation: fadeIn .3s; display: none;} .myalert-panel {width: 400px; background: #fff; border-radius: 7px; box-shadow: 3px 3px 5px rgba(0,0,0,.1); top: 50%; left: 50%; position: fixed;padding: 50px 0; animation: glowIn .3s; margin: -200px 0px 0px -195px;} .myalert-panel #icon-panel {margin: 0 auto; width: 60px; height: 60px; border-radius: 50%; font-family: 'Source Code Pro', monospace; text-align: center;font-size: 43px; animation: shake .5s;} .myalert-panel #alert-title {	width: 90%; text-align: center; padding: 0; font-weight: bold; font-family: 'Sen', sans-serif; color: #5A6374; font-size: 20px; float: left; margin: 10px 0px 10px 5%;} .myalert-panel #alert-subject {	width: 90%; text-align: center; padding: 0; font-family: 'Sen', sans-serif; color: #7B8495; margin-top: 0;font-size: 18px; float: left; margin: 0px 0px 20px 5%;} .myalert-panel #alert-btn {	padding: 7px 30px; border: none; background: #1784D4; color: #fff; font-family: 'Poppins', sans-serif; border-radius: 5px;font-weight: bold; font-size: 15px; cursor: pointer; outline: none; margin-right: 3px;} .myalert-panel #alert-btn:active {	transform: scale(.95);} .myalert-panel #alert-btn:hover {	background: #268EDA;} .myalert-panel #cancel-btn {padding: 7px 30px; border: none; background: #E45A53; color: #fff; font-family: 'Poppins', sans-serif; border-radius: 5px;font-weight: bold; font-size: 15px; cursor: pointer; outline: none; margin-left: 3px;} .myalert-panel #cancel-btn:active {transform: scale(.95);} .myalert-panel #cancel-btn:hover {background: #EF6962;}