/**
Define styles for forms 
**/
/*
Form holder section
*/
.formholder { 
    width:100%;
    display:flex;
    min-height:3.438rem;
    height:auto;
    padding:0rem 0.625rem;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: 0.19rem;
    justify-content:flex-start;
    align-content:flex-start;
}
.formholder input,
.formholder select,
.formholder textarea { 
    border: none;
    background:rgba(0,0,0,0)!important;
    padding:0px 5px;
    box-sizing:border-box;

}
.input:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
    border: solid 0.0625rem #0094cc!important;
    background: rgba(0,0,0,0);
    border:none!important;
}
.formholder input:focus:after,
.formholder select:focus:after,
.formholder textarea:focus:after,
.formholder button:focus:after{
    font-family: "Ionicons";
    content:"\f3d0";

}
.formholder input:active,
.formholder select:active,
.formholder textarea:active,
.formholder button:active { 
    background-color:rgba(130, 247, 255, 0.2);
} 

.formholder input,
.formholder select,
.formholder .input,
.formholder .select{ 
    width:100%;
    height: 1.8rem;
    line-height: 1.8rem;
}
.formholder textarea,
.formholder .textarea{ 
    width:100%;
    height:3.124rem;  
}
.formholder .input,
.formholder .select,
.formholder .textarea { 
    border-radius:2px;
    border:solid 1px rgba(0,0,0,.2);
    display:flex;
    flex-wrap:nowrap;
}
.required:after { 
    content: " *";
}
/**
Alignment for forms 
*/
.formholder .row { 
    height:auto;
    width:100%;
    display:flex;
    flex-wrap:wrap;
}

.formholder .row .two-content { 
 margin-right:0.313rem;
 width:40%!important;
}
.formholder .row .three-content { 
    margin-right:0.313rem;
    width:26%!important;
}
.formholder .row .two-content input:focus, .formholder .row .three-content input:focus,
.formholder .row .two-content select:focus, .formholder .row .three-content select:focus,
.formholder .row .two-content textarea:focus, .formholder .row .three-content textarea:focus{
    outline:none!important;
}
/*
Add icon to form usually on the label 
post add after form 
*/
.form-icon, .formholder .Ionicons { 
    line-height:1.8rem!important;
    color: rgba(0,0,0,.4)!important;
    font-size: 1.4rem!important;
}
.with-icon-date input, .with-icon-arrow input, 
.with-icon-date textarea,
.formholder .select{
    width:85%!important;
    padding-right:5px;
}
.with-icon-date:after{ 
    font-family: "Ionicons";
    content:"\f394";
    color: rgba(0,0,0,.4)!important;
}
.with-icon-arrow:after, .select:after{ 
    font-family: "Ionicons";
    content:"\f3d0";
    color: rgba(0,0,0,.4)!important;
}
.formholder select {
 opacity:0!important;
}

.formholder label { 
    text-transform:capitalize;
    color:rgba(0,0,0,0.5)!important;
}

/*
Label Section
*/
.formholder label{ 
   margin-bottom:0.09rem; 
}
.formholder .help, .formholder .error{
    margin-top:-0.09rem;
    color:rgba(0,0,0,0.4);
    font-size:0.6rem;
}
.formholder .select, .formholder .input, .formholder .textarea{
    margin-bottom:0.19rem;
}
.formholder .error {
    color:#c94f7c!important;
}
.error { 
    border-color:#c94f7c!important;
}

/*
Forms
*/