/* SITEMAP TABLE */
#sitemap {
	display: table;
	width: 100%;
	border: 1px solid rgba(black,0.1);
	@include border-radius(5px);
	@include rem(margin-bottom,1.5rem);

  .children {
    width: 100%;
    height: 0%;
    &.hide {
      display: none;
    }
  }
}


.nav-list {
	width: 100%;
	list-style-type: none;
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
  // Demonstrates positioning of actual list elements
  //border: 5px solid rgba(black,0.1); // Remove
  //  margin: 10;
 	//padding: 10;

    &.hide {
      display: none;
    }
	.nav-list-item {
        display: block;
        float: left;
        clear: both;
        width: 100%;
		list-style-type: none;
		margin: 0;
		padding: 0;

		&:before {
			display: none;
		}

		.nav-list-span {
			display: block;
			width: 100%;
			position: relative;
			border-bottom: 1px solid rgba(black,0.1);
			@include rem(padding,0.7rem);
			@include rem(font-size, 1.1rem);

			&:hover {
                cursor: pointer;
  				background: rgba($gray,0.175);

              	.type-icon {
					@include opacity(1);
				}
			}

            &.droppable {
              background: $light-blue;
            }
			&.active {
				background: rgba($gray,0.4);

				.type-icon {
					@include opacity(1);
				}
			}

			.type-icon {
				@include rem(font-size,0.85rem);
				vertical-align: top;
				margin-right: 8px;
				@include opacity(0.8);
				margin-top: 1px;
			}

			&.level-1 {

			}
			&.level-2 {
                padding-left: 30px;
			}
			&.level-3 {
				padding-left: 60px;

			}
			&.level-4 {
				padding-left: 90px;
			}
			&.level-5 {
				padding-left: 120px;
			}
			&.level-6 {
				padding-left: 150px;
			}
			&.level-7 {
				padding-left: 180px;
			}
			&.level-8 {
				padding-left: 210px;
			}
			&.level-9 {
				padding-left: 240px;
			}
			&.level-10 {
				padding-left: 270px;
			}

			&.last-item {
				border-bottom: 0;
			}
		}
	}
}

.edit-group {
	height: 70%;
	position: absolute;
	top: 0;
	//left: 45%;
	right: 15%;
	@include opacity(0);
	@include transition(0.15s);
	list-style-type: none;
	@include border-radius(2px);

	&:hover {
		background: rgba($primary,0.65);
	}

	li {
		display: block;
		float: left;
		height: 100%;
		list-style-type: none;
		padding: 0;
		margin: 0;
		background: rgba($primary,0.7);
		border-top: 1px solid rgba(black,0.1);
		border-bottom: 1px solid rgba(black,0.1);
		border-right: 1px solid rgba(black,0.1);
		@include transition(background 0.2s);

		&:first-child {
			@include border-radius(2px 0 0 2px);
			border-left: 1px solid rgba(black,0.1);
		}
		&:last-child {
			@include border-radius(0 2px 2px 0);
		}

		&:before {
			display: none;
		}

		&:hover {
			background: darken($primary,3%);
		}

		.add-link {
			display: block;
			margin: 0;
			padding: 0 20px;
			height: 100%;
			line-height: 25px;
			margin-left: 0;
			color: white;
			-webkit-font-smoothing: antialiased;
			border: 0;
		}
	}

	.nav-list-span:hover &,
	.nav-list-span:active & {
		@include opacity(1);
	}
}

.permission-group {
	float: right;
	display: inline-block;
	cursor: default;

	.draft {
		color: white;
		text-transform: uppercase;
		background: $danger;
		font-weight: 700;
		padding: 2px 5px;
		@include border-radius(2px);
		@include rem(font-size,0.875rem);
		-webkit-font-smoothing: antialiased;
		display: inline-block;
		vertical-align: top;
	}

	.permission-icon {
		color: $danger;
		@include rem(font-size,0.875rem);
		vertical-align: top;
		margin-left: 10px;
	}
}