/*position of elements in container form-control*/
.form-label-group {
    position: relative;
    margin-top: 12px;
    margin-bottom: 12px;
}

.form-label-group > input/* ,
.form-label-group > label */ {
    height: 56px;
    padding-left: 16px;
}

/*Styles for label when label be float*/
.form-label-group > label {
    padding-top: 19px;
    padding-bottom: 15px;
    position: absolute;
    top: 0;
    left: 16px;
    display: block;
    width: 100%;
    margin-bottom: 0;
    pointer-events: none;
    cursor: text; /* Match the input under the label */
    transform-origin: 0 0;
    transition: transform 150ms cubic-bezier(0.4,0,0.2,1),
    opacity 150ms cubic-bezier(0.4,0,0.2,1);
    font-family: 'OpenSans-Regular', sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000;
}

.form-label-group input ~ small {
    display: none;
    position: absolute;
    top: 10px;
    right: 18px;
    transition: all .1s cubic-bezier(.25,.8,.25,1); 
    font-family: 'SantanderText-Regular',sans-serif;
    font-size: 12px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: 1.33;
    letter-spacing: normal;
    color: #999;
}

/*Styles for input when label be float*/
.form-label-group input {
    padding-top: 28px;
    padding-bottom: 10px;
    padding-right: 35px;
    border: solid 1px #999;
    border-radius: 2px;
    font-family: 'OpenSans-Regular', sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #000;
}

/*style when element have class form-control  and is in focus*/
.form-control:focus {
    border: solid 1px #000;
    -moz-box-shadow: 0 5px 12px 0 #e5e5e5;
    -webkit-box-shadow: 0 5px 12px 0 #e5e5e5;
    box-shadow: 0 5px 12px 0 #e5e5e5;
    padding-right: 35px;
}

/*style when input and label  is in focus*/
.form-label-group input:focus ~ label,
.form-label-group input:valid ~ label{
    padding-top: 10px;
    transform: scale(.85);
    font-family: 'SantanderText-Regular',sans-serif;
    line-height: 1.29;
    color: #999;
}

/*style when input is in disabled*/
.form-label-group input[readonly]:focus ~ label,
.form-label-group input[readonly]:not([value=""]):valid ~ label{
    padding-top: 10px;
    transform: scale(.85);
    font-family: 'SantanderText-Regular',sans-serif;
    line-height: 1.29;
    color: #999;
}

/*style when select and label  is in focus*/
.form-label-group select:focus ~ label,
.form-label-group select:not([value=""]):valid ~ label{
    padding-top: 10px;
    transform: scale(.85);
    font-family: 'SantanderText-Regular',sans-serif;
    line-height: 1.29;
    color: #999;
}

/*style when select is in disabled*/
.form-label-group select:disabled:focus ~ label,
.form-label-group select:disabled:not([value=""]) ~ label{
    padding-top: 10px;
    transform: scale(.85);
    font-family: 'SantanderText-Regular',sans-serif;
    line-height: 1.29;
    color: #999;
}

.form-label-group input:focus ~ small,
.form-label-group input:valid ~ small {
    display: block;
}

/*Style for top form-label-group*/
.form-label-group .label-top{
    padding-top: 10px;
    transform: scale(.85);
    font-family: 'SantanderText-Regular',sans-serif;
    line-height: 1.29;
    color: #999;
}

/*styles to show errors in the inputs*/
/*Styles for input.error when label be float*/
.form-label-group input.error {
    border: solid 1px #990000;
    color: #990000;
}

.form-label-group input.error ~ small,
.form-label-group input.error ~ small {
    color: #990000;
}

.form-label-group input.error ~ label{
    color: #990000;
}

/* Style for devices max-width 768px */
/* Margin bottom for general title and password title*/
@media screen and (max-width: 767px) {
    .p-title{
        margin-bottom: 12px;
    }
    
    .p-reg-pass{
        margin-bottom: 11px;
    }
}

/* Style for devices max-width 350px */
/* Line height and width of label*/
@media screen and (max-width: 350px) {
    .form-label-group select + label{
		line-height: 15px;
    	width: 78%;
	}
}