@import (less) "./colors.less";

.page-container{
	position: relative;
	clear: both;
	width: 100%;
	height: 27px;
	margin-bottom: 20px;
	background-color: @COLOR_PRIMARY_DARK;
	color: #FFFFFF;

	.page-elements-amount-container{ float: right; position: relative; right: 8px; }
	.page-link-container{ float: left; position: relative; left: 8px; }

	.page-elements-amount-container div, .page-link-container div{
		float: left;
		padding: 4px;
		&.page-elements-amount, &.page-link{ 
			cursor: pointer; 
			&.selected{
				font-weight: bold;
				text-decoration: underline;
			}
		}
	}

	.page-link-container{
		& > i{ float: left; height: 27px; line-height: 27px; cursor: pointer; }
		& > p{ float: left; margin: 0;height: 27px; line-height: 27px; padding: 0 8px; }
	}
}

.loading-container{
	position: absolute;
	width: 100%;
	height: 100%;

	left: 0;
	top: 0;

	background-color: #FFFFFF;
    border: 1px solid #DDDDDD;
    box-sizing: border-box;

	z-index: 99998;

	cursor: default;

	& > i{
		position: absolute;
		left: ~"calc( 50% - 9px )";
		top: ~"calc( 50% - 8px )";

		color: @COLOR_PRIMARY_DARK;

		z-index: 99999;
	}
}

.alu-button{
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;

	background-color: @COLOR_SECONDARY;
	color: #FFFFFF;

	text-align: center;
	cursor: pointer;
}

.alu-select{
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 12px;

	box-sizing: border-box;
	border: 1px solid @COLOR_PRIMARY_LIGHT;

	outline: none;

	option{
		padding: 4px 0;
	}
}

.alu-input{
	letter-spacing: 1px;
	font-size: 12px;

	box-sizing: border-box;
	border: 1px solid @COLOR_PRIMARY_LIGHT;

	outline: none;
}