/*General items, specific app overrides in app.css*/


/*css reset*/

html, body, main, aside, article, section, header, footer, nav, h1, h2, h3, h4, h5, h6, p, img, a {
	position: relative;
	margin: 0;
	padding: 0;
	border: 0;
	-webkit-margin-before: 0;
	-webkit-margin-after: 0;
}

a {
	text-decoration: none;
}


/*flex*/

.flexRow,
.flexColumn {
	position: relative;
	display: -webkit-box;
	display: box;
	display: -webkit-flex;
	display: flex;
}

.flexRow {
	-webkit-box-orient: horizontal;
	box-orient: horizontal;
	-webkit-flex-direction: row;
	flex-direction: row;
}

.flexColumn {
	-webkit-box-orient: vertical;
	box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
}

.flexWrap {
	-webkit-box-lines: multiple;
	box-lines: multiple;
	-webkit-flex-flex-wrap: wrap;
	flex-wrap: wrap;
}

.flexEnd {
	-webkit-box-pack: end;
	box-pack: end;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
}

.flexFull {
	-webkit-box-pack: justify;
	box-pack: justify;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.flexLeft {
	-webkit-box-pack: left;
	box-pack: left;
	-webkit-justify-content: left;
	justify-content: left;
}

.flexCenter {
	-webkit-box-pack: center;
	box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.flexAlignCenter {
	-webkit-box-align: center;
	box-align: center;
	-webkit-align-items: center;
	align-items: center;
}

.flex1 {
	-webkit-box-flex: 1;
	box-flex: 1;
	-webkit-flex: 1;
	flex: 1;
}

.flex2 {
	-webkit-box-flex: 2;
	box-flex: 2;
	-webkit-flex: 2;
	flex: 2;
}

.flex3 {
	-webkit-box-flex: 3;
	box-flex: 3;
	-webkit-flex: 3;
	flex: 3;
}

.flex4 {
	-webkit-box-flex: 4;
	box-flex: 4;
	-webkit-flex: 4;
	flex: 4;
}

.flex5 {
	-webkit-box-flex: 5;
	box-flex: 5;
	-webkit-flex: 5;
	flex: 5;
}

.flex6 {
	-webkit-box-flex: 6;
	box-flex: 6;
	-webkit-flex: 6;
	flex: 6;
}

.flex7 {
	-webkit-box-flex: 7;
	box-flex: 7;
	-webkit-flex: 7;
	flex: 7;
}

.flex8 {
	-webkit-box-flex: 8;
	box-flex: 8;
	-webkit-flex: 8;
	flex: 8;
}

.fullColumn {
	height: 100%;
}

.fullColumn > * {
	position: relative;
}

/*mainElements*/

html,
body {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

main,
header,
#preloader,
.content,
.layer,
.over {
	position: absolute;
	left: 0;
	right: 0;
	overflow: hidden;
}

#preloader,
main,
.layer,
.over {
	top: 0;
	bottom: 0;
}

.layer,
.over {
	background-color: white;
}

.content {
	overflow: auto;
}

.content,
.layer {
	bottom: 0;
}

header {
	position: absolute !important;
	top: 0;
	/*z-index: 10;*/
}

#layer1 {
	z-index: 100;
}

#layer2 {
	z-index: 200;
}

#layer3 {
	z-index: 300;
}

#layer4 {
	z-index: 400;
}

#layer5 {
	z-index: 500;
}

#layer6 {
	z-index: 600;
}

#over {
	z-index: 1000;
	bottom: 0;
}

#preloader {
	z-index: 1100;
	background-color: rgba(255,255,255,0.8);
}

#spinner {
	position: relative;
	width: 100px;
	height: 100px;
}

#spinner div {
	position: absolute;
	width: 10px;
	height: 30px;
	top: 35px;
	left: 45px;
	background-color: black;
	border-radius: 5px;
}

.bar1 {
	opacity: 0.12;
	transform: rotate(0deg) translate(0, 40px);
}

.bar2 {
	opacity: 0.25;
	transform: rotate(45deg) translate(0, 40px);
}

.bar3 {
	opacity: 0.37;
	transform: rotate(90deg) translate(0, 40px);
}

.bar4 {
	opacity: 0.5;
	transform: rotate(135deg) translate(0, 40px);
}

.bar5 {
	opacity: 0.62;
	transform: rotate(180deg) translate(0, 40px);
}

.bar6 {
	opacity: 0.75;
	transform: rotate(225deg) translate(0, 40px);
}

.bar7 {
	opacity: 0.87;
	transform: rotate(270deg) translate(0, 40px);
}

.bar8 {
	opacity: 1;
	transform: rotate(315deg) translate(0, 40px);
}


/*btns*/

.btn {
	position: relative;
	cursor: pointer;
}

.btn:hover {
	opacity: 0.5;
}

.btn > h4,
.btn > p {
	padding-bottom: 0;
}


/*input*/

input[type=text],
input[type=password],
input[type=email],
input[type=number],
input[type=date],
input[type=time],
input[type=checkbox],
select,
option,
textarea,
.checkItemArea {
	position: relative;
}

.checkItem {
	position: absolute;
}

.checkItemArea label {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	cursor: pointer;
}

.labelText {
	pointer-events: none;
}

.clickable {
	cursor: pointer;
}