﻿mf-input-state {
    padding: 0px !important;
    width: 20px !important;
    border: 0px !important;
    height: 100% !important;
    background: transparent!important;
}
/*mf-input-state span:first-child{
	width: 100%;
	height: 100%;
	display: block;
    position: absolute;
}*/
mf-input-state span.bg-none,
mf-input-state span.bg-danger{
    /*background-color: transparent;*/
    background-color: green;
}
mf-input-state span.bg-success{
    background-color: green;
}
.mf-invalid.mf-invalid-length mf-input-state span,
.mf-invalid.mf-invalid-pattern mf-input-state span {
    background-color: #ff0000;
}
mf-input-state span:last-child {
    display: block;
    /*background-position: -17px -16px;*/
    background-position: 50% 50%;
    background-repeat: no-repeat;
    height: 100%;
    /*float: right;*/
    width: 20px;
    /*left: 100%;*/
    /*margin-left: -10px;*/
    transform: translate(0%, -50%);
    top: 50%;
    position: absolute;
}
.mf-invalid.mf-invalid-required mf-input-state span:last-child {
    background-image: url('Asterisk.png');
    background-position-y: -13px;
    background-color: #ff0000;
}
.mf-invalid.mf-invalid-length mf-input-state span:last-child,
.mf-invalid.mf-invalid-pattern mf-input-state span:last-child {
    background-image: url('Exclamation.png');
    /*background-position: -17px -11px;*/
}
.mf-valid.mf-dirty mf-input-state span:last-child {
    background-image: url('Pass.png');
    /*background-position: -17px -11px;*/
    background-position: 50% 45%;
    height: 17px;
}
.mf-form-input-balloon >div{
	right: 5px!important;
	left: auto!important;
}