@import 'public/variables.less';
@import 'public/global.less';
// @import 'public/layout.less';

body {
    display: flex;
    flex-direction: column;
}

header {
    color: #FFF;

    .ui.inverted.menu {
        width: 100%;
        border: 0;
    }
}

main {
    flex: 1 0;
    padding: 20px 0;
    margin-bottom: 50px;
}

footer {
    padding: 20px 0;
    background: rgba(0,0,0,.3);
    font-size: .8rem;
    color: @grey;
    display: table;
    width: 100%;
}

body.login,
body {
    background: rgb(2,20,40); /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(2,20,40,1) 0%, rgba(1,92,171,1) 52%, rgba(0,156,109,1) 81%, rgba(182,219,114,1) 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(2,20,40,1) 0%,rgba(1,92,171,1) 52%,rgba(0,156,109,1) 81%,rgba(182,219,114,1) 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(2,20,40,1) 0%,rgba(1,92,171,1) 52%,rgba(0,156,109,1) 81%,rgba(182,219,114,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#021428', endColorstr='#b6db72',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
    background-attachment: fixed;
}

.ui.secondary.menu .dropdown.item > .menu, 
.ui.text.menu .dropdown.item > .menu {
	margin-top: 0;
	box-shadow: 0px 0px 0px 0px rgba(0,0,0,0);
}

.ui.dropdown.icon.item {
	.icon.user {
		margin-right: 5px;
	}
}

.ui.cards > .card.horz {
	-webkit-box-direction: row;
	flex-direction: row;
	-webkit-box-orient: horizontal;
	box-shadow: 0px 1px 3px 0px rgba(0,0,0,.5);
	border-radius: 0 !important;

	.image {
		float: left;
		width: 120px;
		height: 120px;
		text-align: center;
		vertical-align: middle;
		line-height: 110px;
		border-radius: 0 !important;
		i.icon { 
			color: #FFF !important; 
			vertical-align: middle;
		}
		&.orange { background: @orange; }
		&.green { background: @green; }
		&.blue { background: @blue; }
		&.olive { background: @olive; }
		&.teal { background: @teal; }
		&.pink { background: @pink; }
		&.red { background: @red; }
		&.purple { background: @purple; }
		&.violet { background: @violet; }
		&.yellow { background: @yellow; }
		&.brown { background: @brown; }
		&.grey { background: @grey; }
		&.black { background: @black; }
	}	

	.content {
		padding: 10px;

		&.extra {
			padding: 0;
		}
	}

	> .content {
		margin-left: 0px;
	}

	@media only screen and (max-width: 991px) and (min-width: 768px) {
		width: calc( 48%  -  2em ) !important;
	}
	@media only screen and (max-width: 768px) {
		> .content {
			margin-left: 120px;
			padding: 10px 10px 0;
		}
	}
}

h1.ui.header > .ui.left.floated.button {
	margin-right: 20px;
}

.ui.attached.basic.segment {
	border: 0;
}

.no-padding.column {
	padding: 0 !important;
}

.ui.selection.list {
	a.item {
		padding: 0.75em;
		line-height: 1.3em;
	}
	.header {
		margin-bottom: 5px;
	}
	a.active.item,
	a.active.item:hover,
	a.active.item:focus {
		background: #eee;
	}
}

.ui.header > small {
	font-size: 0.6em;
	margin-right: 15px;
	color: @grey;
	vertical-align: middle;
}

#sales-overview {
	.content {
		max-height: 500px;
		overflow-x: hidden;
		overflow-y: auto;
	}
}
.ui.styled.accordion, 
.ui.styled.accordion .accordion {
	.content {
		padding-left: 0;
		padding-right: 0;
		padding-bottom: 0;
	}
}

.circular.inverted.level {
	width: 2em;
	height: 2em;
	color: #FFF;
	padding: .5em;
	background: @blue;
	border-radius: 50%;
}

.ui.level.list {
	.item {
		position: relative;
	}
	.content {
		padding-left: 0.1em;

		> a {
			display: inline-block;
			padding: 3px;
			border-radius: 3px;
			margin-top: -5px;

			&.active,
			&.active:hover,
			&.active:focus {
				background: #e3e3e3;
			}
		}
	}

	.list {
		.item:before {
			content: "";
			position: absolute;
			width: 26px;
			height: 1px;
			left: -27px;
			border-top: 1px dotted #C3C3C3;
			top: 12px;
		}
		.content:before {
			content: "";
			position: absolute;
			display: block;
			top: -20px;
			left: -27px;
			width: 1px;
			height: 100%;
			border-left: 1px dotted #C3C3C3;
		}
	}
}

#project_level {
	max-height: 550px;
	overflow: auto;
}

.ui.statistics {
	display: inline-block;
	width: 100%;
}

.field.center {
	margin: 0 auto !important;
}

.ui.large.center.form {
	margin-bottom: 50px;
}
