/* ==========================================================================
   Author's custom styles
   ========================================================================== */

/**
 * ------------------------------------------------------
 * INTERFACE COLOR SCHEME
 * ------------------------------------------------------
 *
 * 		Blue Grey
 *
 * 500	#607D8B blue-grey
 *
 * 50	#ECEFF1 blue-grey lighten-5	(color: Black#000000)
 * 100	#CFD8DC blue-grey lighten-4	(color: Black#000000)
 * 200	#B0BEC5 blue-grey lighten-3	(color: Black#000000)
 * 300	#90A4AE blue-grey lighten-2	(color: Black#000000)
 * 400	#78909C blue-grey lighten-1	(color: White#FFFFFF)
 * 500	#607D8B blue-grey			(color: White#FFFFFF)
 * 600	#546E7A blue-grey darken-1	(color: White#FFFFFF)
 * 700	#455A64 blue-grey darken-2	(color: White#FFFFFF)
 * 800	#37474F blue-grey darken-3	(color: White#FFFFFF)
 * 900	#263238 blue-grey darken-4	(color: White#FFFFFF)
 *
 * 		#000000 black
 * 		#ffffff white
 * ------------------------------------------------------
 */

@import url(https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i);

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

body {
	background-color: #fff;
	font-family: Roboto;
}



#processing {
	opacity:1;
    position:fixed;
    top: 0px;
	bottom: 0px;
    left:0px;
	right: 0px;
    z-index:10000;
	display: none;
	color: #000;
}

#processing-box {
	position: fixed;
	top: 50%;
	left: 0px;
	right: 0px;
}
#processing-box-box {
	position: relative;
	height: 10em;
	top: -5em;
}

#processing-icon {
	padding-top: 3em;
}


.panel-heading {
    padding: 15px 15px;
}

.login-panel {
	background-color: #fff;
	border: 0 solid transparent;
	border-radius: 0;
	box-shadow: 0px 0px 15px #ccc;
	width: 300px;
	margin: auto;
	margin-top: 100px;
}

.form-group {
    margin-top: 15px;
	height: 45px;
}

#response {
	margin: 12px 12px 24px;
	color: red;
	text-align: center;
}
.login-panel input {
	border: none;
	border-radius: 0;
	border-bottom: 1px solid #ccc;
	box-shadow: none;
}

.login-panel input:focus, .login-panel textarea:focus {
	box-shadow: none;
	border-bottom: 2px solid #1bbcb2;
}

.login-panel label {
	font-weight: normal;
	pointer-events: none;
	position: relative;
	left:12px;
	top:-24px;
	opacity:0.5;
	transition: 0.2s;
	transition-timing-function: ease;
	transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

input:focus + label, input:not(:placeholder-shown) + label {
  opacity:1;
  transform-origin: top left;
  transform: translateY(-24px) translateX(0) scale(0.75);
}

.login-panel .btn {
	border-radius: 0;
}

.btn {
	color: #fff;
	background-color: #1bbcb2;
	border-color: #1bbcb2;
}

.btn:focus, .btn:active:focus {
    color: #fff;
	outline: none;
    outline: 0;
    outline-offset: 0;
}

.btn:hover, .btn:active:focus {
	color: #333;
}

.web_link {
	width: 300px;
	margin: auto;
	color: #1bbcb2;
	text-align: center;
	margin-top: 30px;
}

.web_link a {
	color: #1bbcb2;
}