.start-document {
	@extend .no-select;
	height: 60px;
	background-color: transparent;
	position: relative;
	cursor: pointer;

	> .start-button {
		display: none;
		text-align: center;
		padding-top: 20px;
		color: $color-green;
		font-size: 1rem;
		position: relative;

		> .round-button {
			opacity: 0.6 !important;
		}

		> .label {
			display: inline-block;
			margin-left: 10px;
		}

		> .line {
			display: inline-block;
			height: 1px;
			border: 1px solid $color-green;
			width: 100px;
			margin: 0 20px 0 20px;
			opacity: 0.2;
		}
	}

	&:first-of-type {
		height: 30px;

		> .start-button {
			padding-top: 0;
		}
	}
}

.start-document-empty-state {
	> .start-button {
		display: block;
	}
}

.new-document-wizard {
	@include border-radius(2px);
	margin: 0 0 30px 0;
	padding: 30px;
	border: 1px solid $color-stroke;
	background-color: $color-off-white;
	display: none;

	.document-name {
		font-weight: bold;
		font-size: 1.5rem;
		margin: 0 0 30px 0;
		color: $color-black;
	}

	.import-document-button {
		width: 100%;
		padding: 20px;
		margin: 0 0 30px 0;
		text-align: center;
		color: $color-gray;
		border: 1px solid $color-stroke;
		cursor: pointer;
		font-size: 1rem;
		line-height: 1.7rem;
		@include ease-in();

		&:hover {
			border-color: $color-link;
			color: $color-link;
		}

		 > .dz-preview,
		.dz-processing {
			display: none !important;
		}
	}

	> .list-wrapper {
		// height: 440px;
		// overflow-y: auto;

		> .template-list {
			margin: 0;
			padding: 0;

			> .item {
				@include ease-in();
				@include border-radius(4px);
				list-style: none;
				cursor: pointer;
				display: inline-block;
				border: 1px solid $color-stroke;
				background-color: $color-white;
				margin: 0 20px 20px 0;
				padding: 12px 0 0 20px;
				width: 423px;
				height: 60px;
				position: relative;

				&:hover {
					@include ease-in();
					border-color: $color-link;

					> .template-actions {
						display: block;
					}
				}

				> .template-actions {
					@include ease-in();
					display: none;
					position: absolute;
					top: 10px;
					right: 8px;

					.material-icons {
						color: $color-stroke;
						font-size: 1rem;
					}
				}

				> .details {
					width: 350px;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;

					> .title {
						font-size: 1rem;
						font-weight: normal;
						color: $color-off-black;
						letter-spacing: 0.5px;
						margin-top: 0;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					> .desc {
						color: $color-gray;
						font-size: 0.8rem;
						margin-top: 5px;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}
		}
	}
}