/* **************** */
/* INPUT UNDERLINE */
/* **************** */

/* form starting stylings ------------------------------- */
.input_underline_group 			  { 
  position:relative; 
  margin-bottom:45px; 
}
.input_underline_group input {
  font-size: 15px;
  padding:10px 10px 10px 5px;
  display:block;
  width:280px;
  border:none;
  border-bottom:1px solid #757575;
}
.input_underline_group input:focus 		{ outline:none; }

/* LABEL ======================================= */
.input_underline_group label 				 {
  color:#999; 
  font-size: 15px;
  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_underline_group input:focus ~ label, .input_underline_group input:valid ~ label 		{
  top:-20px;
  font-size:14px;
  color:#5264AE;
}

/* BOTTOM BARS ================================= */
.input_underline_bar 	{ position:relative; display:block; width:300px; }
.input_underline_bar:before, .input_underline_bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background:#5264AE; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.input_underline_bar:before {
  left:50%;
}
.input_underline_bar:after {
  right:50%; 
}

/* active state */
.input_underline_group input:focus ~ .input_underline_bar:before, .input_underline_group input:focus ~ .input_underline_bar:after {
  width:50%;
}

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

/* active state */
.input_underline_group input:focus ~ .input_underline_highlight {
  -webkit-animation:inputHighlighter 0.3s ease;
  -moz-animation:inputHighlighter 0.3s ease;
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */
@-webkit-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background:#5264AE; }
  to 	{ width:0; background:transparent; }
}

.input_underline_error_text{
  color: red;
  font-size: 12px;
}

.input_underline_error_text:empty
{
  display: none;
}

.input_underline_error_text::before{
  content: "Error: "
}

/* **************** */
/* **************** */
/* INPUT BORDER */
/* **************** */
/* **************** */

/*
A material design form field
Expects this html (note the required attribute on the input):
<div class="md-input">
<input type="text" required/>
<label class="md-input-label">Form field title</label>
</div>
*/
.md-input{
  font-family: 'Roboto', sans-serif;
  font-size:14px;
  position:relative;
  display:block;
  color: "#000000";
  padding: 25px 0 10px 0;
}
  .md-input::after{
    content:"\00A0";
    display:block;
    color: "#d50000";
    font-size:12px;
    padding-top:5px;
  }

  .md-input-label{
    position:absolute;
    display:block;
    top: 35px;
    left: 0px;
    transition:0.2s ease all; 
    -moz-transition:0.2s ease all; 
    -webkit-transition:0.2s ease all;
    pointer-events:none;
    cursor:text;
  }

  .md-input input{
    padding: 10px 0  10px 0;
    display:block;
    width:100%;
    border:none;
    font-size:14px;
    color: #000000;
    border-bottom:1px solid #000;
    outline:none;
  }

  /* input:invalid{
      outline:none;
      box-shadow: none;
  } */

  input:focus ~ .md-input-label{
      top: 10px;
      font-size:12px;
    }

  input:valid ~ .md-input-label{
      top: 10px;
      font-size:12px;
    }

.md-input input:focus{
    outline:none;
    color: #3f51b5;
    padding-bottom: 8px;
    border-bottom-width:3px;
    border-bottom-color: #3f51b5;
}

.md-input input ~ .md-input-label{
  color: #3f51b5;
}
      


/* INPUT SWITCH */
.input-switch {
  z-index: 0;
  position: relative;
  display: inline-block;
  color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.87);
  font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
  font-size: 16px;
  line-height: 1.5;
}

/* Input */
.input-switch > input {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  z-index: -1;
  position: absolute;
  right: 6px;
  top: -8px;
  display: block;
  margin: 0;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
  outline: none;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  transition: opacity 0.3s 0.1s, transform 0.2s 0.1s;
}

/* Span */
.input-switch > span {
  display: inline-block;
  width: 100%;
  cursor: pointer;
}

/* Track */
.input-switch > span::before {
  content: "";
  float: right;
  display: inline-block;
  margin: 5px 0 5px 10px;
  border-radius: 7px;
  width: 36px;
  height: 14px;
  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
  vertical-align: top;
  transition: background-color 0.2s, opacity 0.2s;
}

/* Thumb */
.input-switch > span::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 16px;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background-color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  transition: background-color 0.2s, transform 0.2s;
}

/* Checked */
.input-switch > input:checked {
  right: -10px;
  background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
}

.input-switch > input:checked + span::before {
  background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
}

.input-switch > input:checked + span::after {
  background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
  transform: translateX(16px);
}

/* Hover, Focus */
.input-switch:hover > input {
  opacity: 0.04;
}

.input-switch > input:focus {
  opacity: 0.12;
}

.input-switch:hover > input:focus {
  opacity: 0.16;
}

/* Active */
.input-switch > input:active {
  opacity: 1;
  transform: scale(0);
  transition: transform 0s, opacity 0s;
}

.input-switch > input:active + span::before {
  background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
}

.input-switch > input:checked:active + span::before {
  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
}

/* Disabled */
.input-switch > input:disabled {
  opacity: 0;
}

.input-switch > input:disabled + span {
  color: rgb(var(--pure-material-onsurface-rgb, 0, 0, 0));
  opacity: 0.38;
  cursor: default;
}

.input-switch > input:disabled + span::before {
  background-color: rgba(var(--pure-material-onsurface-rgb, 0, 0, 0), 0.38);
}

.input-switch > input:checked:disabled + span::before {
  background-color: rgba(var(--pure-material-primary-rgb, 33, 150, 243), 0.6);
}