.form{
	position:relative;
}
.form.working::before{
	content: "";
    background-image: url('/static/DynamicRegistrationForm/ICSJSFramework/images/loading.png');
    width: 90px;
    height: 90px;
    position: absolute;
    top: calc(50% - 95px);
    left: calc(50% - 50px);
    opacity: .8;
    filter: saturate(60%);
    animation-name: loading;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    background-size: 100%;
	
}
.form.working::after{
	content: "Please wait...";
    position: absolute;
    top: calc(50% + 10px);
    left: calc(50% - 150px);
    width: 300px;
    text-align: center;
}

@keyframes loading{
	0%{transform:rotate(0deg);}
	100%{transform:rotate(359deg);}
}

.form > div{
	transition:opacity .15s;
}

.form.working > div{
	opacity:.2;
}

.form input[type='text'],
.form input[type='password']{
	padding: 7px;
    border-radius: 3px;
    border: 1px solid #a1abb5;
    font-weight: 400;
    box-shadow: 0px 0px 15px -6px #000000;
    color: #7d858c;
}

.form .note + .single-input{
	margin-top:6px;
}
	
/*

Custom Radio and Check Boxes

*/

.form input[type='radio'],
.form input[type='checkbox']{
	opacity:0;
	position: absolute;
    top: -2px;
    left: 0;
    height: 22px;
    width: 22px;
}

.form .custom-radio{
	position: absolute;
    top: -2px;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #e6e6e6;
	border-radius: 20px;
}

.form .custom-checkbox{
	position: absolute;
    top: 0px;
    left: 0;
    height: 22px;
    width: 22px;
    border: 3px solid #eaeaea;
    border-radius: 3px;
}

.form .single-input-selectable,
.form .single-input-selectable label{
	cursor:pointer;
}

/* Radio */
.form .single-input-selectable:hover .custom-radio{
	background-color: #8be3ef;
}

.form input[type='radio']:checked ~ .custom-radio{
	background-color: #00a5bb;
}

.form input[type='radio']:checked ~ .custom-radio::after{
	content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    height: 12px;
    width: 12px;
    background-color: #ffffff;
    border-radius: 20px;
}

/* Check Box */
.form .single-input-selectable:hover .custom-checkbox::after{
	content: "";
    position: absolute;
    top: 0px;
    left: 4px;
    height: 13px;
    width: 8px;
    background-color: transparent;
    border-right: 4px solid #eaeaea;
    border-bottom: 4px solid #eaeaea;
    transform: rotate(45deg);
}

.form input[type='checkbox']:checked ~ .custom-checkbox{
	border-color: #a3c6e2;
}

.form input[type='checkbox']:checked ~ .custom-checkbox::after{
	content: "";
    position: absolute;
    top: 0px;
    left: 4px;
    height: 13px;
    width: 8px;
    background-color: transparent;
    border-right: 4px solid #326792;
    border-bottom: 4px solid #326792;
    transform: rotate(45deg);
}

.form .custom-checkbox ~ label,
.form .custom-radio ~ label{
	font-size:inherit;
	font-weight:inherit;
	color:inherit;
	margin-left:32px;
}

.form .input-container-outer{
    position:relative;
	margin-right: 20px;
    margin-bottom: 10px;
}

.form .input-container-outer .label{
	text-transform: uppercase;
    font-size: .8em;
    margin-bottom: 6px;
	padding:0;
	font-weight: 600;
    font-size: .9em;
}

.form .input-container-outer .label.required::after{
	content: "*";
    margin-left: 4px;
    font-weight: bold;
    color: #fd7777;
    font-size: 1.5em;
    position: absolute;
    top: -3px;
}

.form .input-container-outer .error{
	margin: 4px 0 0 0;
	min-height:20px;
}

.form .input-group .input-container-outer{
	vertical-align:top;
	display:inline-block;
}

.form .button-group{
	padding-top:20px;
	border-top: 1px solid #c7ced4;
}

.form .input-group .note{
	font-size:.8em;
	margin-bottom:4px;
}

.form .input-container-inner .single-input{
	position: relative;
    display: inline-block;
    margin-right: 20px;
}

/* Error States */
.form .input-container-outer.error input[type='text'],
.form .input-container-outer.error input[type='password']{
	background-color: #ffe9e9;
    color: #d81313;
    font-weight: 500;
	border-color: #d81313;
}
.form .input-container-outer .error{
	display: block;
    color: #d81313;
    font-size: .8em;
    text-transform: uppercase;
}

/*

USER FORM

*/

.user-form input[name='email']{
	width:300px;
}

/*

CONSUMER FORM

*/

.consumer-form input[name='name'],
.consumer-form input[name='email']{
	width:300px;
}