.baseBoxLayer.scaleDown {
	-webkit-animation: boxScaleDown .3s ease both;
	animation: boxScaleDown .3s ease both;
}

.baseBoxLayer.scaleUp {
	-webkit-animation: boxScaleUp .2s ease both;
	animation: boxScaleUp .2s ease both;
}

.baseBoxLayer {
	background: rgba(63, 85, 112, .7);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	overflow: auto;

	perspective: 1200px;
	transform: translate3d(0, 0, 0);
	transform-style: preserve-3d;
}

.baseBoxLayer .verticalWrapper {
	height: 80%;
	margin-top: 10px;
	text-align: center;
}

.baseBoxLayer .verticalWrapper:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 80%;
}

.baseBoxLayer .box {
	display: inline-block;
	vertical-align: middle;
	margin-bottom: 10px;
	text-align: left;
	max-width: 80%;

	box-shadow: 0 0 5px #495c74;
	border-radius: 5px;
}

	.baseBoxLayer .box > .title {
		background: #3f5570;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px 5px 0 0;
		font-weight: bold;
	}

	.baseBoxLayer.error .box > .title {
		background: #dd445a;
	}

		.baseBoxLayer .box > .title > .text {
			float: left;
			padding-top: 10px;
			color: #FFF;
		}

			.baseBoxLayer .box > .title > .text > span.fa {
				margin-right: 10px;
			}

		.baseBoxLayer .box > .title > .close {
			float: right;
			margin-left: 50px;
			padding-top: 7px;
			font-size: 1.7em;
			text-align: right;
			color: #293749;
			cursor: pointer;
		}

		.baseBoxLayer.error .box > .title > .close {
			color: #9b303f;
		}

		.baseBoxLayer .box > .title > .close:hover,
		.baseBoxLayer.error .box > .title > .close:hover {
			color: #FFF;
		}

		.baseBoxLayer .box > .title > .close:active,
		.baseBoxLayer.error .box > .title > .close:active {
			color: #000;
		}

	.baseBoxLayer .box > .body {
		background: #ecf0f1;
		padding: 5px;
		border-radius: 0 0 5px 5px;
		color: #596781;
	}

/* DEFAULT BOX */
.baseBoxLayer .box > .body > #WrapperBoxDefault {
	margin: 5px;
}

.baseBoxLayer .box > .body > #WrapperBoxDefault > .message {
	min-height: 30px;
	min-width: 200px;
	max-width: 500px;
	margin: 5px;
}

	.baseBoxLayer .box > .body > #WrapperBoxDefault > .message > .text {
		margin: 5px;
	}

	.baseBoxLayer .box > .body > #WrapperBoxDefault > .message > .input > input[type="text"],
	.baseBoxLayer .box > .body > #WrapperBoxDefault > .message > .input > input[type="password"],
	.baseBoxLayer .box > .body > #WrapperBoxDefault > .message > .input > input[type="email"] {
		width: 100%;
		padding: 5px;
		border: none;
		border-radius: 3px;
		box-shadow: 1px 1px 3px #d8dee2;
		color: #6f7b91;
	}

	.baseBoxLayer .box > .body > #WrapperBoxDefault > .message > .input > input[type="text"]:hover,
	.baseBoxLayer .box > .body > #WrapperBoxDefault > .message > .input > input[type="password"]:hover,
	.baseBoxLayer .box > .body > #WrapperBoxDefault > .message > .input > input[type="email"]:hover {
		color: #4f96ed;
	}

	.baseBoxLayer .box > .body > #WrapperBoxDefault > .message > .input > input[type="text"]:focus,
	.baseBoxLayer .box > .body > #WrapperBoxDefault > .message > .input > input[type="password"]:focus,
	.baseBoxLayer .box > .body > #WrapperBoxDefault > .message > .input > input[type="email"]:focus {
		color: #000;
	}

.baseBoxLayer .box > .body > #WrapperBoxDefault > .buttons {
	margin-top: 8px;
	text-align: right;
}

	.baseBoxLayer .box > .body > #WrapperBoxDefault > .buttons > button {
		background: #adb5c1;
		border: none;
		padding: 5px 10px;
		border-radius: 5px;
		color: #FFF;
		cursor: pointer;
	}

	.baseBoxLayer .box > .body > #WrapperBoxDefault > .buttons > button[type="submit"] {
		background: #4f96ed;
		padding: 5px 20px;
	}

	.baseBoxLayer.error .box > .body > #WrapperBoxDefault > .buttons > button {
		background: #dd445a;
	}

	.baseBoxLayer .box > .body > #WrapperBoxDefault > .buttons > button:hover,
	.baseBoxLayer.error .box > .body > #WrapperBoxDefault > .buttons > button:hover {
		color: #000;
	}

/* DEFAULT LAYOUT */
.baseBoxLayer .box > .body .element {
	background: #FFF;
	margin: 5px;
	color: #4f96ed;
	font-size: 0.9em;
	border-radius: 5px;
	box-shadow: 1px 1px 3px #d8dee2;
}

.baseBoxLayer .box > .body .element > span.fa {
	padding: 8px;
}

.baseBoxLayer .box > .body .element > span.fa:last-of-type {
	margin-right: 8px;
}

.baseBoxLayer .box > .body .element > input[type="text"],
.baseBoxLayer .box > .body .element > input[type="email"],
.baseBoxLayer .box > .body .element > input[type="password"],
.baseBoxLayer .box > .body .element > input[type="number"],
.baseBoxLayer .box > .body .element > textarea,
.baseBoxLayer .box > .body .element > select {
	background: none;
	width: calc(100% - 30px);
	padding: 8px 0;
	border: none;
	font-size: 0.9em;
	color: #6f7b91;
}

.baseBoxLayer .box > .body .element > input[type="text"]:hover,
.baseBoxLayer .box > .body .element > input[type="email"]:hover,
.baseBoxLayer .box > .body .element > input[type="password"]:hover,
.baseBoxLayer .box > .body .element > input[type="number"]:hover,
.baseBoxLayer .box > .body .element > textarea:hover,
.baseBoxLayer .box > .body .element > select:hover {
	color: #4f96ed;
}

.baseBoxLayer .box > .body .element > input[type="text"]:focus,
.baseBoxLayer .box > .body .element > input[type="email"]:focus,
.baseBoxLayer .box > .body .element > input[type="password"]:focus,
.baseBoxLayer .box > .body .element > input[type="number"]:focus,
.baseBoxLayer .box > .body .element > textarea:focus,
.baseBoxLayer .box > .body .element > select:focus {
	color: #000;
}

.baseBoxLayer .box > .body .element > textarea {
	width: calc(100% - 10px);
	min-width: calc(100% - 10px);
	max-width: calc(100% - 10px);
	padding: 3px;
	margin: 5px;
	font-size: 1.1em;
}

.baseBoxLayer .box > .body .element > select {
	width: calc(100% - 35px);
	padding: 0;
	margin-right: 5px;
}

.baseBoxLayer .box > .body .element.formButtons {
	background: none;
	padding-top: 5px;
	text-align: right;
	box-shadow: none;
}

.baseBoxLayer .box > .body .element > button[disabled] {
	opacity: .5;
	pointer-events: none;
}

.baseBoxLayer .box > .body .element > button {
	background: #adb5c1;
	border: none;
	padding: 5px 10px;
	border-radius: 5px;
	color: #FFF;
	cursor: pointer;
}

.baseBoxLayer .box > .body .element > button.red {
	background: #ed4f59;
}

.baseBoxLayer .box > .body .element > button.green {
	background: #00b25c;
}

.baseBoxLayer .box > .body .element > button[type="submit"] {
	background: #4f96ed;
}

.baseBoxLayer .box > .body .element > button:hover {
	color: #000;
}

.baseBoxLayer .box > .body .element > button:active {
	background: #FFF;
	color: #000;
}