@import url('../../css/_site.css');

.overlay {
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	z-index: 10;
	display: none;

	&.busy {
		display: block;
		cursor: wait !important;
	}

	&.show {
		display: block;
		cursor: not-allowed !important;
	}
}

button, button * {
	cursor: pointer;
}

.input-group-text {
	width: 7em;
	justify-content: flex-end;
}

.progress-bar {
	height: 2rem;
}

input[type="file"] {
	display: none;
}

.edumper {
	display: grid;
	grid-template-columns: 1fr 4em 1fr;

	#move {
		display: flex;
		flex-direction: column;
		row-gap: 12px;
		justify-content: center;
		align-items: center;
	}

	#files {
		z-index: 20;
	}

	.list {
		.header {
			display: flex;

			.title {
				font-size: 12pt;
				font-weight: bold;
			}
		}
	
		.names {
			height: 30em;
			overflow-y: scroll;

			.name {
				border: 1px solid #f0f0f0;
				padding-left: 6px;
				margin-bottom: 3px;
				overflow: hidden;
				text-wrap: nowrap;
				background: #f0f0f0;
				cursor: pointer;

				&.last {
					border: 1px dashed blue;
				}

				&.invalid {
					background: #f0e0e0;
					cursor: not-allowed;
				}

				span {
					font-family: Courier, monospace;
					font-size: 11pt;
					vertical-align: middle;
				}

				input[type="checkbox"] {
					vertical-align: middle;
				}
			}
		}
	}
}

@media (width < 600px) {
	.edumper {
		.list {
			.names .name span {
				font-size: 10pt;
			}
		}
	}
}