.success_message {
	position: fixed;
    top: 20px;
    right: 20px;
	width: 360px;
    min-height: 60px;
    -webkit-box-shadow: -9px 9px 15px 1px rgba(34, 60, 80, 0.2);
    -moz-box-shadow: -9px 9px 15px 1px rgba(34, 60, 80, 0.2);
    box-shadow: -9px 9px 15px 1px rgba(34, 60, 80, 0.2);
    border-radius: 16px;
    background: #fff;
    border: 1px solid var(--lightGrey);
    transition: 0.5s;
    opacity: 0;
    z-index: -10;
    transform: translateY(-160px);
	display: flex;
    align-items: center;
	padding: 20px 20px 25px 20px;
}
.success_message.show {
	z-index: 100;
	opacity: 1;
	transform: translateY(0);
}
.success_message .content {
	display: flex;
    align-items: center;
    margin: auto;
    font-size: 24px;
    width: max-content;
	gap: 10px;
}
.success_message .content .title {
	font-size: 1.3rem;
    line-height: 1.5rem;
    margin: auto;
}

.success_message .content .icon-success {
	width: 50px;
	height: 50px;
	background-size: contain;
	background-position:center;
	background-repeat: no-repeat;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --%3e%3csvg fill='%233dd400' width='800px' height='800px' viewBox='-1.56 -1.56 55.12 55.12' data-name='Layer 1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' stroke='%233dd400' stroke-width='0.0005200000000000001'%3e%3cg id='SVGRepo_bgCarrier' stroke-width='0'/%3e%3cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3e%3cg id='SVGRepo_iconCarrier'%3e%3cpath d='M26,52A26,26,0,1,1,52,26,26,26,0,0,1,26,52ZM26,4A22,22,0,1,0,48,26,22,22,0,0,0,26,4Z'/%3e%3cpath d='M23,37.6A2,2,0,0,1,21.59,37l-9.2-9.19A2,2,0,0,1,15.22,25l9.19,9.19A2,2,0,0,1,23,37.6Z'/%3e%3cpath d='M23,37.6a2,2,0,0,1-1.41-3.42L36.78,19a2,2,0,0,1,2.83,2.83L24.41,37A2,2,0,0,1,23,37.6Z'/%3e%3c/g%3e%3c/svg%3e");
}
.success_message .content .icon-error {
	width: 50px;
	height: 50px;
	background-size: contain;
	background-position:center;
	background-repeat: no-repeat;	
	background-image: url("data:image/svg+xml;charset=UTF-8,%3c!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3e%3c!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --%3e%3csvg xmlns:dc='http://purl.org/dc/elements/1.1/' xmlns:cc='http://creativecommons.org/ns%23' xmlns:rdf='http://www.w3.org/1999/02/22-rdf-syntax-ns%23' xmlns:svg='http://www.w3.org/2000/svg' xmlns='http://www.w3.org/2000/svg' xmlns:sodipodi='http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd' xmlns:inkscape='http://www.inkscape.org/namespaces/inkscape' width='800px' height='800px' viewBox='-8 -8 416.00 416.00' id='svg2' version='1.1' inkscape:version='0.91 r13725' sodipodi:docname='error.svg' fill='%23fc0202' stroke='%23fc0202'%3e%3cg id='SVGRepo_bgCarrier' stroke-width='0'/%3e%3cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round' stroke='%23CCCCCC' stroke-width='2.4'/%3e%3cg id='SVGRepo_iconCarrier'%3e%3cdefs id='defs4'/%3e%3csodipodi:namedview id='base' pagecolor='%23ffffff' bordercolor='%23fc0202' borderopacity='1.0' inkscape:pageopacity='0.0' inkscape:pageshadow='2' inkscape:zoom='0.98994949' inkscape:cx='244.49048' inkscape:cy='180.68004' inkscape:document-units='px' inkscape:current-layer='layer1' showgrid='false' units='px' showguides='true' inkscape:guide-bbox='true' inkscape:window-width='1920' inkscape:window-height='1056' inkscape:window-x='1920' inkscape:window-y='24' inkscape:window-maximized='1'%3e%3csodipodi:guide position='200.71429,121.42857' orientation='1,0' id='guide23298'/%3e%3c/sodipodi:namedview%3e%3cmetadata id='metadata7'%3e%3crdf:rdf%3e%3ccc:work rdf:about=''%3e%3cdc:format%3eimage/svg+xml%3c/dc:format%3e%3cdc:type rdf:resource='http://purl.org/dc/dcmitype/StillImage'/%3e%3cdc:title%3e%3c/dc:title%3e%3c/cc:work%3e%3c/rdf:rdf%3e%3c/metadata%3e%3cg inkscape:label='Capa 1' inkscape:groupmode='layer' id='layer1' transform='translate(0,-652.36216)'%3e%3cpath style='color:%23fc0202;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:%23fc0202;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;baseline-shift:baseline;text-anchor:start;white-space:normal;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:%23fc0202;solid-opacity:1;fill:%23fc0202;fill-opacity:1;fill-rule:nonzero;stroke-width:0.004;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate' d='M 200,652.36214 C 89.691101,652.36214 -5e-7,742.05324 -5e-7,852.36214 -5e-7,962.67104 89.691101,1052.3622 200,1052.3622 c 110.3089,0 200,-89.69116 200,-200.00006 0,-110.3089 -89.6911,-200 -200,-200 z m 0,25 c 96.7979,0 175,78.2021 175,175 0,96.7979 -78.2021,175.00006 -175,175.00006 -96.7979,0 -175,-78.20216 -175,-175.00006 0,-96.7979 78.2021,-175 175,-175 z m -92.4785,64.8438 -17.677799,17.6777 92.478499,92.4785 -92.478499,92.4785 17.677799,17.6778 92.4785,-92.4785 92.4785,92.4785 17.6777,-17.6778 -92.4785,-92.4785 92.4785,-92.4785 -17.6777,-17.6777 L 200,834.68444 Z' id='error' inkscape:connector-curvature='0' sodipodi:nodetypes='ssssssssssccccccccccccc'%3e%3ctitle id='title23607'%3eerror%3c/title%3e%3c/path%3e%3c/g%3e%3c/g%3e%3c/svg%3e");
}
.err-message {
	position: absolute;
    bottom: -13px;
    font-size: 13px;
    left: 10px;
    color: #ff0000;
}

.shake {
    animation: shake .3s;
    animation-iteration-count: infinite;
}
@keyframes shake{
	0% {
		transform: translate(1px);
	}
	10% {
		transform: translate(-1px);
	}
	20% {
		transform: translate(-3px);
	}
	30% {
		transform: translate(3px);
	}
	40% {
		transform: translate(1px);
	}
	50% {
		transform: translate(-1px);
	}
	60% {
		transform: translate(-3px);
	}
	70% {
		transform: translate(3px);
	}
	80% {
		transform: translate(-1px);
	}
	90% {
		transform: translate(1px);
	}
	100% {
		transform: translate(1px);
	}
}