/*
sass scss/login.scss css/login.css
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,600,700");
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono");
* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

html, body {
  height: 100%;
  font-family: "Open Sans", sans-serif;
}

body {
  min-height: 100%;
  background: #eee;
}

h1, h2, h3, h4, h5, h6 {
  /*font-family: 'Blacker Display Italic';*/
}

h3, h4 {
  color: #1b0094;
  font-size: 38px;
  margin-bottom: 24px;
}
@media all and (max-width: 800px) {
  h3, h4 {
    font-size: 32px;
  }
}

h4 {
  font-size: 30px;
  line-height: 40px;
}
@media all and (max-width: 800px) {
  h4 {
    font-size: 20px;
    line-height: 30px;
  }
}

p {
  color: #444;
}

ul {
  margin-left: 20px;
}

li {
  color: #706b70;
  font-size: 18px;
  line-height: 1.5;
  margin-bottom: 18px;
}

a {
  outline: none;
  text-decoration: none;
}

.highlight {
  color: #1b0094;
}

.bold {
  font-weight: bold;
}

.italic {
  font-style: italic;
}

.unstyle {
  font-style: normal;
}

.unbold {
  font-weight: 400;
}

.center {
  text-align: center;
}

.hidden {
  display: none;
}

#wrapper-login.hidden {
  display: none;
}

.disabled {
  opacity: 0.5;
}

.clear-fix {
  clear: both;
}

.float-left-elem {
  float: left;
  width: 100%;
}

.overflow-hidden {
  overflow: hidden;
}

.spacer-10 {
  height: 10px;
}

.spacer-30 {
  height: 30px;
}

.margin-top-10 {
  margin-top: 10px;
}

#spinner-overlay,
#reload-overlay {
  position: fixed;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  display: grid;
}
#spinner-overlay.hidden,
#reload-overlay.hidden {
  display: none;
}

#spinner {
  display: block;
  margin: auto;
  height: 60px;
  -webkit-transition: all 0.25s ease;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
#spinner.hidden {
  height: 0;
}

.blur {
  -webkit-filter: blur(2px) !important;
  -moz-filter: blur(2px) !important;
  -ms-filter: blur(2px) !important;
  filter: url("data:image/svg+xml;utf8,<svg xmlns='https://www.w3.org/2000/svg'><filter id='blur'><feGaussianBlur stdDeviation='2' /></filter></svg>#blur");
  filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="2");
}

#reload-content-box {
  position: relative;
  z-index: 9999;
  padding: 10px;
  max-width: 520px;
  margin: 100px auto;
}

#reload-content {
  padding: 20px;
  background: #FFF;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

#reload-text {
  margin-bottom: 20px;
  text-align: center;
  color: #ff584d;
}

.form {
  margin: 20px auto;
  width: 400px;
}

.form-invalid-data {
  color: #F00;
  margin-bottom: 10px;
}

.form-invalid-data-input {
  -webkit-box-shadow: 0 0 3px #F00;
  -moz-box-shadow: 0 0 3px #F00;
  box-shadow: 0 0 3px #F00;
}

.form input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 16px;
  background: #fff;
  border: 1px solid #888;
  border-radius: 6px;
  margin-bottom: 10px;
  outline: none;
}

input {
  display: block;
  padding: 8px 12px;
  font-size: 14px;
  border: none;
  -webkit-box-shadow: 0 0 3px #888;
  -moz-box-shadow: 0 0 3px #888;
  box-shadow: 0 0 3px #888;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline-color: #3e3699;
}

input[type=number] {
  -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.select-wrapper {
  background: #fff;
  margin: 0 0 10px 0;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 3px #888;
  -moz-box-shadow: 0 0 3px #888;
  box-shadow: 0 0 3px #888;
  position: relative;
  color: #666;
}
.select-wrapper .select-arrow {
  position: absolute;
  z-index: 1999;
  right: 14px;
  top: 13px;
  min-width: 8px;
  height: 6px;
  background-image: url(../images/arrow-down.svg);
}

select {
  background: transparent;
  border: none;
  width: 100%;
  font-size: 14px;
  padding: 8px 26px 8px 17px;
  position: relative;
  z-index: 2000;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline-color: #3e3699;
}

.button {
  display: block;
  padding: 8px 30px;
  max-width: 130px;
  margin: auto;
  border: 2px solid #3e3699;
  border-radius: 30px;
  background: transparent;
  color: #3e3699;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  outline: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}
.button:hover {
  background: #3e3699;
  color: #fff;
  cursor: pointer;
}
.button:disabled {
  opacity: 0.5;
  cursor: default;
}
.button.red {
  border: 2px solid #993636;
  color: #993636;
}
.button.red:hover {
  background: #993636;
  color: #fff;
}
.button.hidden {
  display: none;
}

#wrapper-login {
    height: 100%;
    display: -ms-grid;
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: auto;
    align-items: center;
    justify-content: center;
}
    .inner-wrapper-login {
        min-width: 300px;
        padding: 20px;
        -webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
		-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
		box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
        background: #FFF;
        text-align: center;
	}
		.login-input {
            -webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
            width: 100%;
            margin: 0 0 24px 0;
		}

		.fake-checkbox-label {
			height: auto;
			float: left;
			user-select: none;
		}
			.fake-checkbox-label .hidden-checkbox {
				position: absolute;
					left: 0;
				opacity: 0;
				width: 1px;
			}
			.fake-checkbox-label .fake-checkbox {
				width: 30px;
				height: 30px;
				border: 1px solid #666;
				margin-right: 15px;
				float: left;
			}
			.fake-checkbox-label .fake-checkbox-text {
				height: auto;
				width: calc(100% - 50px);
				float: left;
				line-height: normal;
				color: #FFF;
			}
				.fake-checkbox-label .fake-checkbox-link {
					color: #3e3699;
				}

        #login-msg, #register-msg, #forgot-msg {
            text-align: center;
            margin: 15px 0;
            color: #ff584d;
		}

		#register-form {
			display: none;
		}
		#forgot-form {
			display: none;
		}

		#login-toggler {
			display: none;
		}
		.toggler-btn {
			font-size: 14px;
			color: #3e3699;
		}