@-moz-document url-prefix() {
  fieldset { display: table-cell; }
}

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

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
	-webkit-appearance: none;
}

.avatar {
	background-image: url('../img/user.png');
	background-size: cover;
	border: 2px solid #aaa;
	border-radius: 100%;
	height: 100px;
	margin: 10px auto 30px;
	width: 100px;
}

.container-background {
	background-image: url('../img/herbalife-background.webp'); 
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

.form-box input {
	background: #fafafa;
	border: 1px solid #ccc;
	height: 40px;
	padding: 10px;
	text-align: center;
	transition:0.2s ease-in-out;
	width: 100%;
}

.form-box input:focus {
	background: #eee;
	outline: 0;
}

.form-box input[type='text'] {
	border-radius: 5px 5px 0 0;
}

.form-box input[type='password'] {
	border-radius: 0 0 5px 5px;
	border-top: 0;
}

.form-box button.login {
	margin-top: 15px;
	padding: 10px 20px;
}

.hide {
	display: none;
}

.login-container {
	background: #fff;
	border: 1px solid #ccc;
	margin: 80px auto;
	padding: 20px 40px 40px;
	position: relative;
	text-align: center;
	width: 300px;
}

.login-container::before, .login-container::after {
	background: #fff;
	border: 1px solid #ccc;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 3.5px;
	width: 100%;
	z-index: -1;
	-webkit-transform: rotateZ(4deg);
	-moz-transform: rotateZ(4deg);
	-ms-transform: rotateZ(4deg);
}

.login-container::after {
	top: 5px;
	z-index: -2;
	-webkit-transform: rotateZ(-2deg);
	-moz-transform: rotateZ(-2deg);
	-ms-transform: rotateZ(-2deg);
}

#block-ui {
	background-color: #fff;
	height: 100%;
	left: 0;
	opacity: 0.8;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999999;
}

#block-ui-img {
	left: 50%;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	border-radius: 50%;
	width: 120px; 
	height: 120px;
}

#block-ui-text {
	left: 50%;
	position: fixed;
	top: 60%;
	transform: translate(-50%, -50%);
	color: #aaa6a4;
	font-size: 19px;
	font-weight: bold;
	height: 30px;
}

#login-form {
	left: 50%;
	position: fixed;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 450px;
}

#output {
	color: #fff;
	left: 0;
	position: absolute;
	top: -75px;
	width: 300px;
}

#output.alert-danger{
    background: rgb(228, 105, 105);
}

/* animations */
.animate-bottom {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: top;
    
    -webkit-animation-name: lower_head;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-play-state: active;
    -webkit-animation-iteration-count: infinite;
}

.animate-top {
    display: -moz-inline-stack;
    display: inline-block;
    zoom: 1;
    *display: inline;
    vertical-align: top;
    
    -webkit-animation-name: upperr_head;
    -webkit-animation-duration: 0.8s;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-delay: 0.2s;
    -webkit-animation-play-state: active;
    -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes upperr_head {
    from {
        margin-top: 0px;
    }
    to {
        margin-top: -1px;
    }
}

@-webkit-keyframes lower_head {
    from {
        margin-top: 0px;
    }
    to {
        margin-top: 1px;
    }
}