/*
    My desire is for the styles below to be the minimum to handle a form

 */
html {
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

input[type="radio"].a4m_touched:invalid {
/* Safari which is not showing the invalid border on radio buttons. It does show an outline */
    outline: 2px solid rgba(255, 0, 0, 0.5);
}
.a4m_touched:invalid {
    border-color: red;
    box-shadow: 0 0 5px red;
}
.a4m-up_wrapper {
    box-sizing: border-box;
    position: relative;
    font-size: 1rem;
    height: 1em;
    width: 90%;
    border-radius: 0.5em;
    margin-left: auto;
    margin-right: auto;
    background-color: #eee;
    box-shadow: 0 0.1em 0.3em rgba(0, 0, 0, 0.25) inset;
}
.a4m-up_bar {
    width: 100%;
    height: 1em;
    background: #10bf10;
    border-radius: 0.5em;
    box-shadow: -0.0em 0.2em 0.4em 0em rgba(255, 255, 255, 0.80) inset, -0.0em -0.1em 0.3em 0em rgba(0, 0, 0, 0.45) inset;
}
.a4m-up_bar::before {
    content: attr(data-percent);
    font-size: 80%;
    margin-left: -2.05em;
    float: left;
    width: 2.0em;
    height: 1.5em;
    text-align: right;
    overflow: hidden;
}
.validation-error,
.a4m-up_file-size-error,
.a4m-up_oversize {
    color: red;
}
/* .a4m_invalid .validation-error, */
.a4m_touched:invalid ~ .validation-error,
.a4m_file-size-error ~ .a4m-up_file-size-error {
    display: block;
}
.a4m_file-size-error.a4m_touched ~ .validation-error {
    /* turn off generic validation error if we are oversize */
    display: none;
}
.a4m_uploading form.a4m {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    overflow: hidden;
    height: 1px;
    padding-top: 1px;
}
.a4m-up_cancel {
    position: absolute;
    top: 0;
    right: 0;
    margin-right: -0.8em;
    font-size: 1.5em;
    margin-top: -0.28em;
    font-weight: bold;
    cursor: pointer;
}
form.a4m,
.validation-error,
.a4m-up_file-size-error,
.a4m-up_oversize,
.a4m-up_uploading,
.a4m-up_wait,
.a4m-up_abort,
.a4m-up_error,
.a4m-up_load-success,
.a4m-up_load-failure,
.a4m-up_unsupported {
    display: none;
}
.a4m_ready form.a4m,
.a4m_uploading .a4m-up_uploading,
.a4m_size-error .a4m-up_oversize,
.a4m_completed .a4m-up_wait,
.a4m_canceled .a4m-up_abort,
.a4m_error .a4m-up_error,
.a4m_failure .a4m-up_load-failure,
.a4m_success .a4m-up_load-success,
.a4m_unsupported .a4m-up_unsupported {
    display: block;
}
.a4m_ready .a4m-up_initialize,
.a4m_completed .a4m-up_wrapper,
.a4m_canceled .a4m-up_uploading,
.a4m_success .a4m-up_uploading,
.a4m_failure .a4m-up_uploading,
.a4m_loadend .a4m-up_uploading,
.a4m_success .a4m-up_wait,
.a4m_failure .a4m-up_wait,
.a4m_loadend .a4m-up_wait {
    display: none;
}
/* Animate an inderminate div... */
.a4m-up_animated {
    width: 100%;
    height: 1em;
    border-radius: 0.5em;
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(255,255,255,0.6);
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAABBAMAAAA2gHOYAAAAJ1BMVEX///////////////////////////////////////////////////9Ruv0SAAAADXRSTlOXi31uXkopDQI7NxoZI2W7mgAAABVJREFUCNdjaD+21FmRgUHIJDK7AgAcOwPZarBuRAAAAABJRU5ErkJggg==");
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 15%, rgba(255,255,255,0) 70%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(15%,rgba(255,255,255,0.5)), color-stop(70%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 15%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 15%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.5) 15%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.5) 15%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%);
    background-position: left top;
    background-size: 24px 100%;
    background-repeat: no-repeat;
    -webkit-animation: swish 5s ease-out 0s infinite;
    animation: swish 5s ease-out 0s infinite;
}


/* Styles for the File Delete button when uploading multiple files */
		.a4m_file-delete {
			min-width: 12px;
			margin-right: 3px;
			visibility: hidden;
		}
		.a4m_file-delete.a4m_file-selected {
			visibility: visible;
		}
		.a4m_file-delete ~ .a4m_file-delete::before {
				content: "\a";
			white-space: pre;
		}
		.a4m_file-delete::after {
		/*  This does not display in default Windows 7 or Android 4.4 Chrome 59 */
		/*    content: "\1F167"; */
			content: "\2297";
			font-size: 16px;
			cursor: pointer;
		}
		.a4m_file-delete:hover::after {
			color: #000;
		}
		form.a4m input[type=file] {
			width: 96%; /* old browsers */
			width: calc(100% - 20px); /* 20 px equals (min-width + margin) for .a4m_file-delete */
			background: #fff;
			margin-bottom: 5px;
		}
		.add-file-notice {
			display: none;
			font-size: 80%;
			font-style: italic;
		}
		.a4m_file-delete.a4m-file-selected ~ .add-file-notice {
			display: block;
		}



@-webkit-keyframes swish {
    0% {
        background-position: -5%;
    }
    90% {
        background-position: 120%;
    }
    100% {
        background-position: 150%;
    }
}

@keyframes swish {
    0% {
        background-position: -5%;
    }
    90% {
        background-position: 120%;
    }
    100% {
        background-position: 150%;
    }
}