/*=============================================================================================================
  START Textbox CSS
  ===========================================================================================================*/
/* form starting stylings ------------------------------- */
.group 			  { 
  position:relative; 
  margin-bottom:35px; 
}
input[type="text"],textarea, .dips-email {
  color: #4d6b8a;
  font-size:16px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input[type="text"]:focus,textarea:focus .dips-email:focus	{ outline:none; }

/* LABEL ======================================= */
label.md-textbox-lable 				 {
  color:#999; 
  font-size:16px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}

/* active state */
input[type="text"]:focus ~ label.md-textbox-lable, input[type="text"]:valid ~ label.md-textbox-lable,
.dips-email:focus ~ label.md-textbox-lable, .dips-email:valid ~ label.md-textbox-lable,
textarea:focus ~ label.md-textbox-lable, textarea:valid ~ label.md-textbox-lable {
  top:-20px;
  font-size:14px;
  color:rgb(63, 81, 181);
}

/* BOTTOM BARS ================================= */
.bar 	{ position:relative; display:block; width:300px; }
.bar:before, .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:rgb(63, 81, 181); 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.bar:before {
  left:50%;
}
.bar:after {
  right:50%; 
}

/* active state */
input[type="text"]:focus ~ .bar:before, input[type="text"]:focus ~ .bar:after,
textarea:focus  ~ .bar:before, textarea:focus ~ .bar:after,
.dips-email:focus ~ .bar:before, .dips-email:focus ~ .bar:after{
  width:50%;
}

/* HIGHLIGHTER ================================== */
.dips-highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
input[type="text"]:focus ~ .dips-highlight,
textarea:focus ~ .dips-highlight, .dips-email:focus ~ .dips-highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:rgb(63, 81, 181); }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:rgb(63, 81, 181); }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:rgb(63, 81, 181); }
  to 	{ width:0; background:transparent; }
}

/*=============================================================================================================
  START Radio button CSS
  ===========================================================================================================*/
/* For Radio button click animation. Radio button is in metronic theme */
.md-radio label > span.inc {
    animation: 0.5s ease 0s normal none 1 running growCircleRadio !important;
    background: #bfcad1 none repeat scroll 0 0 !important;
}

/*=============================================================================================================
  START Checkbox button CSS
  ===========================================================================================================*/
/* For Checkbox button click animation. Checkbox button is in metronic theme */
.md-checkbox label > span.inc {
	animation: 0.5s ease 0s normal none 1 running growCircleRadio !important;
    background: #b4eaee none repeat scroll 0 0 !important;
}

.md-checkbox label {
    color: rgb(63, 81, 181);
}

/*=============================================================================================================
  START Dropdown Select tag CSS
  ===========================================================================================================*/
.mdl-select {
    position: relative;
    font-size: 16px;
    display: inline-block;
    box-sizing: border-box;
    width: 300px;
    max-width: 100%;
    margin: 0;
    padding: 20px 0;
}
.mdl-select__input {
    border: none;
    border-bottom: 1px solid #757575;
    display: inline-block;
    font-size: 16px;
    margin: 0;
    padding: 4px 0;
    width: 100%;
    background: 16px;
    text-align: left;
    color: inherit;
}
.mdl-select.is-focused .mdl-select__input {
    outline: none;
}
.mdl-select.is-invalid .mdl-select__input {
    /*border-color: rgb(222, 50, 38);*/
    box-shadow: none;
}
.mdl-select.is-disabled .mdl-select__input {
    background-color: transparent;
    border-bottom: 1px dotted rgba(0, 0, 0, 0.12);
}
.mdl-select__label {
    bottom: 0;
    color: #999;
    font-size: 16px;
    left: 0;
    right: 0;
    pointer-events: none;
    position: absolute;
    top: 20px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-align: left;
    transition: all 0.2s ease 0s;
}
.mdl-select.is-dirty .mdl-select__label {
    visibility: hidden;
}
.mdl-select--floating-label .mdl-textfield__label {
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.mdl-select--floating-label.is-focused .mdl-select__label,
.mdl-select--floating-label.is-dirty .mdl-select__label {
    color: rgb(63, 81, 181);
    font-size: 14px;
    top: 0px;
    visibility: visible;
}
.mdl-select--floating-label.is-focused .mdl-select__expandable-holder .mdl-select__label,
.mdl-select--floating-label.is-dirty .mdl-select__expandable-holder .mdl-select__label {
    top: -16px;
}
.mdl-select--floating-label.is-invalid .mdl-select__label {
    /*color: rgb(222, 50, 38);*/
    font-size: 15px;
}
.mdl-select__label:after {
    background-color: rgb(63, 81, 181);
    bottom: 15px;
    content: '';
    height: 2.7px;
    left: 45%;
    position: absolute;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    visibility: hidden;
    width: 10px;
}
.mdl-select.is-focused .mdl-select__label:after {
    left: 0;
    visibility: visible;
    width: 100%;
}
.mdl-select.is-invalid .mdl-select__label:after {
    background-color: rgb(63, 81, 181);/*rgb(222, 50, 38);*/
}
.mdl-select__error {
    color: rgb(63, 81, 181);/*rgb(222, 50, 38);*/
    position: absolute;
    font-size: 12px;
    margin-top: 3px;
    visibility: hidden;
}
.mdl-select.is-invalid .mdl-select__error {
    visibility: visible;
}
.mdl-select__expandable-holder {
    display: inline-block;
    position: relative;
    margin-left: 32px;
    -webkit-transition-duration: 0.2s;
    transition-duration: 0.2s;
    -webkit-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-block;
    max-width: 0.1px;
}
.mdl-select.is-focused .mdl-select__expandable-holder,
.mdl-select.is-dirty .mdl-select__expandable-holder {
    max-width: 600px;
}
.mdl-select__expandable-holder .mdl-select__label:after {
    bottom: 0;
}