body {background-color: #f5f5f5; color: #536387; font-family: "Roboto";}
button {vertical-align: bottom;}
.wrapper {max-width: 75%; padding: 30px; margin: 50px auto; background-color: #fff; border-radius: 5px; box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);}
.form-field {position: relative; margin-top: 30px;}
.form-control {position: relative; width: 100%; border-radius: 5px; border: 1px solid #dde3ec; outline: 0;}
.form-button {text-align:  right;}
.form-button button {position: relative; display: inline-block; padding: 15px 39px; background: #4285F4; background: -webkit-linear-gradient(to right, #15489F 0%, #4284F4  51%, #15489F  100%); background: -o-linear-gradient(to right, #15489F 0%, #4284F4  51%, #15489F  100%); background: -moz-linear-gradient(to right, #15489F 0%, #4284F4  51%, #15489F  100%); background: linear-gradient(to right, #15489F 0%, #4284F4  51%, #15489F  100%); background-size: 200% auto; box-shadow: 0 0 20px #eee; color: #fff; border: none; width: auto; text-align: center; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; -webkit-transition: all 0.5s; -o-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; cursor: pointer;}
.form-button button:focus {outline: none;}
.form-button button:hover {background-position: right center;}
.form-field:last-child {margin-bottom: 0px;}
.login-form-avatar {display: block; width: 250px; height: 50px; overflow: hidden; margin: 0 auto; margin-bottom: 35px;}
.alert, .restart {text-align: center;}
.alert {font-style: italic;}
.restart {margin-top: 10px;}
.restart a {color: #0000ff; text-decoration: none;}
.restart a:hover {color: #ff0000;}

textarea {height: 400px;}

label {color: #07074D; font-weight: 500; font-size: 14px; line-height: 24px; display: block; margin-bottom: 10px;}
.form-select {padding: 15px 22px; font-size: 16px;}
.form-control:focus {border-color: #76abe3; box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.05);}

.title {
  line-height: 46px;
  font-size: 34px;
  font-weight: 700;
  letter-spacing: 2px;
  color: #4285F4;
  position: relative;
}

.title:before {
  content: "";
  width: 5px;
  height: 100%;
  position: absolute;
  top: 0;
  left: -30px;
  background: #4285F4;
}

.invisible span {
	visibility: hidden;
	opacity: 0;
}

.invisible::after {
	content: "";
	position: absolute;
	width: 1.5rem;
	height: 1.5rem;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border: 0.25em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	-webkit-animation: 0.75s linear infinite spinner-border;
	animation: 0.75s linear infinite spinner-border;
}

@-webkit-keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg) /* rtl:ignore */;
            transform: rotate(360deg) /* rtl:ignore */; } }

@keyframes spinner-border {
  to {
    -webkit-transform: rotate(360deg) /* rtl:ignore */;
            transform: rotate(360deg) /* rtl:ignore */; } }