/*input-group =================================================================================*/
.ig {
    position: relative;
  	margin: 15px 0px 0px;  	   
}

.ig-text ,
.ig-select,
.ig-file{
  font-size: 18px;
  padding: 10px 10px 10px 5px;
  display: block; 
  width:100%;
  border: none;
  border-bottom: 1px solid #757575;
}
.ig-file{
  padding: 20px 10px 20px 30px;
}
.ig-text:focus,
.ig-select:focus,
.ig-file:focus{
  outline: none;
  border-bottom: 0px
}

.ig-label {
  position: absolute;
  color: #999;
  font-size: 18px;
  font-weight: normal;  
  pointer-events: none;
  left: 5px;
  top: 10px;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}
.ig-text:not(.ig-text:placeholder-shown)  ~ .ig-label, 
.ig-text:focus  ~ .ig-label,  
.ig-select:focus ~ .ig-label,
.ig-select:valid ~ .ig-label,
.ig-file:focus ~ .ig-label,
.ig-file:valid ~ .ig-label{
  top: -20px;
  font-size: 14px;
  color: #4285f4;
}

/*
.ig-text:valid  ~ .ig-label, 
.ig-select:valid ~ .ig-label{
  top: -20px;
  font-size: 14px;
  color: #4285f4;
}
*/
.ig-bar {
  position: relative;
  display:block;
  width:100%; 
}

.ig-br{
	dispay:none;
}

.ig-bar:before,
.ig-bar:after {
  content: '';
  height: 2px;
  width: 0;
  bottom: 1px;
  position: absolute;
  background: #4285f4;
  transition: 0.2s ease all;
  -moz-transition: 0.2s ease all;
  -webkit-transition: 0.2s ease all;
}

.ig-bar:before {
  left: 50%;
}

.ig-bar:after {
  right: 50%;
}

.ig-text:focus ~ .ig-bar:before,
.ig-text:focus ~ .ig-bar:after  {
  width: 50%;
}
.ig-select:focus{    
    border: 1px solid blue;
    border-left:1px solid blue;
    border-top:1px solid blue;
    border-right:1px solid blue;
    border-bottom: 1px solid blue;
    border-radius: 4px;
}
.ig-highlight {
  position: absolute;
  height: 60%;
  width: 100px;
  top: 25%;
  left: 0;
  pointer-events: none;
  opacity: 0.5;
}

.ig-text:focus  ~ .ig-highlight {
  -webkit-animation: inputHighlighter 0.3s ease;
  -moz-animation: inputHighlighter 0.3s ease;
  animation: inputHighlighter 0.3s ease;
}

/* animations */
@-webkit-keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
@-moz-keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
@keyframes inputHighlighter {
  from { background: #4285f4; }
  to   { width: 0; background: transparent; }
}
.lbl{
	display: none;
}
.div-center{
	display: flex;
  	justify-content: center;
  	align-items: center;  	
}
.btn-save{
	font-size: 15px;
    font-weight: bold;
    padding:10px;
    text-decoration: none;
    cursor: pointer;
    color:#FFFFFF;     
    box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
    background-color:#4CAF50;
    border: 2px solid  #4CAF50;
    width: 150px;    
}
.btn-save:hover,
.btn-save:focus{
   background-color:#ffffff;
   color:#4CAF50;
   box-shadow:0 8px 16px 0 rgba(0, 255, 0, 0.3),0 6px 20px 0 rgba(0, 255, 0, 0.3);
}
@media (min-width: 1024px) {
	.lbl{
		display: block;
	    padding: 10px 10px 10px 10px;
	    font-size: 14px;
	    float: left;        
	    border: 1px solid white;
	    margin: 0px 0px 0px 50px;	
	    text-align: right;
    	width:200px;
	}
	.ig {
	    position: static;  	 
	  	margin: 0px 0px 0px;	  	  	  
	} 
	.ig-text ,.ig-file {		
	    width: 300px;
	    box-sizing: border-box;  
	    font-size: 14px;
	    background-color: white;
	    background-position: 10px 10px;
	    background-repeat: no-repeat;
	    padding: 10px 10px 10px 10px;
	    -webkit-transition: width 0.4s ease-in-out;
	    transition: width 0.4s ease-in-out;
	    border: 1px solid white;
	    border-bottom: 1px solid blue;
	    margin: 0px 0px 0px 10px;
	}
	
	.ig-label , .ig-highlight ,.ig-bar{
		display: none;
	}
			
	.ig-file{
		padding: 10px 10px 10px 10px;
		border-bottom: 0px;
	}
	.ig-text:focus ,.ig-select:focus{
	    width: 500px;
	    border: 1px solid blue;
	    border-left:1px solid blue;
	    border-top:1px solid blue;
	    border-right:1px solid blue;
	    border-bottom: 1px solid blue;
	    border-radius: 4px;
	}
	
	.ig-select{
	    width: 300px;
	    box-sizing: border-box;    
	    font-size: 14px;
	    background-color: white;
	    background-position: 10px 10px;
	    background-repeat: no-repeat;
	    padding: 10px 10px 10px 10px;
	    -webkit-transition: width 0.4s ease-in-out;
	    transition: width 0.4s ease-in-out;
	    border: 1px solid white;
	    border-bottom: 1px solid blue;
	    margin: 5px 0 0 10px;
	}
	.ig-select:disabled{
	    border-bottom: 1px dashed blue;
	    color:black;
	}	
}