.form-outline-green {
    position: relative;
    width: 100%;
    direction: rtl;
}

.form-outline-green .form-control {
    min-height: auto;
    padding: .32rem .75rem;
    border: 0;
    background: transparent;
    transition: all .2s linear;
    /*<-------------------------------------------------->*/
    color: #03825a ;
}

.form-outline-green .form-control~.form-label {
    position: absolute;
    top: 0;
    max-width: 90%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    right: .7rem;
    padding-top: .37rem;
    pointer-events: none;
    transform-origin: 0 0;
    transition: all .2s ease-out;
    color: rgba(0, 0, 0, .6);
    margin-bottom: 0;
    /*<-------------------------------------------------->*/
    color: #03825a
}

.form-outline-green .form-control~.form-notch {
    display: flex;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    max-width: 100%;
    height: 100%;
    /*text-align: right;*/
    pointer-events: none
}

.form-outline-green .form-control~.form-notch div {
    pointer-events: none;
    border: 1px solid #bdbdbd;
    box-sizing: border-box;
    background: transparent;
    transition: all .2s linear
}

/*border hide L or R orginal*/
.form-outline-green .form-control~.form-notch .form-notch-leading {
    left: 0;
    top: 0;
    height: 100%;
    width: .5rem;
    border-left: none;
    border-radius: 0 .25rem .25rem 0
}

.form-outline-green .form-control~.form-notch .form-notch-middle {
    flex: 0 0 auto;
    width: auto;
    max-width: calc(100% - 1rem);
    height: 100%;
    border-right: none;
    border-left: none
}

/*borde L or R for englash or farsi*/
.form-outline-green .form-control~.form-notch .form-notch-trailing {
    flex-grow: 1;
    height: 100%;
    border-right: none;
    border-radius: .25rem 0 0 .25rem
}


.form-outline-green .form-control:focus {
    box-shadow: none !important
}

/*text motin up or fix up*/
.form-outline-green .form-control.active~.form-label,
.form-outline-green .form-control:focus~.form-label {
    transform: translateY(-1.3rem) translateY(.1rem) scale(1);
    color: #03825a
}

/*color text*/
.form-outline-green .form-control:focus~.form-label {
    color: #03825a
}

/*hide line under text*/
/*<-----------------active color------------------------->*/
.form-outline-green .form-control.active~.form-notch .form-notch-middle,
.form-outline-green .form-control:focus~.form-notch .form-notch-middle {
    /*border-right: none;
                border-left: none;*/
    border-color: #0aeaa3;
    box-shadow: 0 1px 0 0 #0aeaa3;
    border-top: 1px solid transparent
}

/*shadow around text*/
.form-outline-green .form-control:focus~.form-notch .form-notch-middle {
    border-color: #0aeaa3;
    box-shadow: 0 1px 0 0 #0aeaa3;
    border-top: 1px solid transparent
}

/*<-----------------active color------------------------->*/
.form-outline-green .form-control.active~.form-notch .form-notch-leading,
.form-outline-green .form-control:focus~.form-notch .form-notch-leading {
    /*border-right: none*/
    border-color: #0aeaa3;
    box-shadow: 1px 0 0 0 #0aeaa3, 0 1px 0 0 #0aeaa3, 0 -1px 0 0 #0aeaa3
}

/*shadow around hide line*/
.form-outline-green .form-control:focus~.form-notch .form-notch-leading {
    border-color: #0aeaa3;
    box-shadow: 1px 0 0 0 #0aeaa3, 0 1px 0 0 #0aeaa3, 0 -1px 0 0 #0aeaa3
}

/*<-----------------active color------------------------->*/
.form-outline-green .form-control.active~.form-notch .form-notch-trailing,
.form-outline-green .form-control:focus~.form-notch .form-notch-trailing {
    /*border-left: none*/
    border-color: #0aeaa3;
    box-shadow: -1px 0 0 0 #0aeaa3, 0 -1px 0 0 #0aeaa3, 0 1px 0 0 #0aeaa3
}

/*shadow of 3D line<>*/
.form-outline-green .form-control:focus~.form-notch .form-notch-trailing {
    border-color: #0aeaa3;
    box-shadow: -1px 0 0 0 #0aeaa3, 0 -1px 0 0 #0aeaa3, 0 1px 0 0 #0aeaa3
}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/



.field-validation-error {
    color: #e80c4d;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
    border-top: none;
    border-right: none;
    border-left: none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}