* {
    font-family: sans-serif;
}

/*
div.dtuserpassword {
    background: #f2f2f2;
    width: 100%;
    margin: 4px auto;
    padding: 8px auto;
    box-sizing: border-box;
    font-size: 16px;
    input {
	border: 0;
	outline: 0;
	box-sizing: border-box;
	width: 100%;
	background-color: transparent;
    }
}
*/
div.dtinput {
    background: #f2f2f2;
    width: 100%;
    margin: 4px auto;
    padding: 8px auto;
    font-size: 16px;
    input {
	width: 100%; border: 0; outline: 0;
	background-color: transparent;
	border-bottom: 1px black solid;
    }
    input.error {
	border-width: 0 0 2px;
	border-style: solid;
	border-color: red;
    }
}

/* add to login.css */
.createaccount {
    display: none;
}


/* floating input labels || hover labels */
.float-label {
    /*
      // floating input labels / hover labels
      // usage:
      <div class="float-label">
      <input type="text" id="sometext" placeholder="sometext" />
      <label for="sometext">Sometext</label>
      </div>
   */
    position: relative;
    float:left;
    text-align: left;
    /* To create space for floating label */
    margin-top: 1em;  padding-top: 1em;
    input,label { padding: 0.25em; }
    input {
	&::placeholder { color: transparent; }}
    label {
	position: absolute;
	left: 0;
	pointer-events: none;
	transform-origin: left center;
	transition: transform 250ms;
	color: gray;
	opacity: 50%;
    }
    input:focus + label,
    input:not(:placeholder-shown) + label {
	transform: translateY(-1.25em) scale(0.75);
    }
    input:placeholder-shown + label + .clear {
	display: none;
    }
}


/* Hide Safari's autofill button*/
/*
&::-webkit-contacts-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
    position: absolute;
}
*/