input { 
    font-family:   'Roboto' , Verdana, sans-serif;
    font-style: normal;
    //font-weight: normal;
    outline:none;
    //text-decoration: inherit;
    //transition: .3s;
}



.input_icon { 
    position:relative;
    width:100%;
    font-family:   'Roboto' , Verdana, sans-serif;
     margin: 0.5em;
}

.input_icon input {
     width:100%;
     padding: 0.4em;
	 	border:  1px solid #CCC8C8;
	border-radius: 0.4em;
     padding-left: 3.2em;
} 

.input_icon input:focus { 
   border:  1px solid blue;
   box-shadow: 0px 0px 10px  blue;
}
 

.input_icon i {
    position:absolute;
    top: 0.15em;
    left: 0.15em;
    padding: 0.36em 0.8em ;
    //color: #fff;
    //background-color: #aaa;
}
////////////////////////////
///// select 
.input_icon select {
     width: 100% ;
     padding: 0.4em;
     padding-left: 2em;
} 

.input_icon select:focus { 
   border:  1px solid blue;
   box-shadow: 0px 0px 10px  blue;
}

select { 
    font-family:   'Roboto' , Verdana, sans-serif;
    font-style: normal;
       outline:none;
}

.input_icon select  i {
    position:absolute;
    top: 0.15em;
    left: 0.15em;
    padding: 0.36em 0.8em ;
    //color: #fff;
    //background-color: #aaa;
}