$small_device: 800px; /* tested out via audio tab */


.modal .settings_audio {
	display: flex;
	flex-direction: column;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	margin: 3px;

	> div {
		margin: 2px;
	}

	a {
		align-self: center;
	}

	.settings-device-error {
		display: none;
	}

	.group_box {
		display: flex;
		flex-direction: column;
		flex-shrink: 0;

		&.sound {
			flex-shrink: 1;

			.content {
				display: block;
				flex-direction: column;
			}
		}
	}

	.settings-device {
		display: flex;
		flex-direction: row;
		justify-items: stretch;

		.settings-device-select {
			flex-grow: 1;
			flex-shrink: 1;

			display: flex;
			flex-direction: row;
			justify-content: stretch;

			margin-right: 5px;

			> div {
				flex-grow: 1;
				flex-shrink: 1;
			}

			select {
				flex-grow: 1;
				margin-left: 5px;
				width: 100%;
			}
		}
	}

	.settings-speaker .container-master-volume {
		display: flex;
		flex-direction: row;
		justify-content: stretch;

		.key {
			flex-grow: 0;
			max-width: 150px;
			margin-right: 5px;
		}

		.value {
			flex-grow: 1;
			flex-shrink: 1;

			display: flex;
			flex-direction: row;
			justify-content: stretch;

			a {
				flex-grow: 0;
				flex-shrink: 0;

				margin-left: 5px;
			}

			/* added by materialize */
			span {
				min-width: 100px;

				flex-grow: 1;
				flex-shrink: 1;

				padding: 0;
			}

			input {
				width: 100%;
			}
		}
	}

	.settings-vad-container {
		display: flex;
		margin-top: 5px;
		min-height: 150px;
		flex-direction: column;
		width: 100%;

		> div {
			width: 100%;

			flex-grow: 1;
			flex-shrink: 1;
		}

		/* for "normal" devices */
		@media (min-width: $small_device) {
			flex-direction: row;

			> div {
				width: unset;
			}
		}

		.group_box {
			min-width: 250px;
		}

		.content {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
		}

		fieldset {
			input {
				vertical-align: text-bottom;
			}
		}

		.settings-vad {
			display: flex;
			flex-direction: column;
		}

		.settings-vad-impl {
			.setting-vad-ppt {
				@media (min-width: $small_device) {
					margin-bottom: -35px;
				}
			}

			display: flex;
			justify-content: space-around;
			padding: 5px;

			> div {
				align-self: center;
			}

			.settings-vad-impl-entry {
				display: none;
			}

			.setting-vad-vad {
				.vad_vad_bar {
					position: relative;
					width: 100%;
					height: 20px;

					background-image: linear-gradient(to right, green, yellow, red);
					background-repeat: no-repeat;
					background-size: 100%;
					background-position: 0 100%;

					display: flex;
					flex-direction: column;

					.bmd-form-group {
						display: flex;
						padding: 0px;
					}

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

						display: flex;
						flex-direction: row-reverse;

						.hider {
							width: 50%;
							height: 100%;

							background-color: grey;
						}
					}
				}

				/* The slider itself */
				.vad_vad_slider {
					margin: 0;
					background-color: gray;
					-webkit-appearance: none; /* Override default CSS styles */
					appearance: none;
					width: 100%;
					height: 100%;
					outline: none;
					opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
					-webkit-transition: .2s; /* 0.2 seconds transition on hover */
					transition: opacity .2s;
				}

				/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
				.vad_vad_slider::-webkit-slider-thumb {
					-webkit-appearance: none; /* Override default look */
					appearance: none;
					width: 2px; /* Set a specific slider handle width */
					height: 20px; /* Slider handle height */
					background: #000000FF; /* Green background */
					cursor: pointer; /* Cursor on hover */
				}

				.vad_vad_slider::-moz-range-thumb {
					width: 2px; /* Set a specific slider handle width */
					height: 100%; /* Slider handle height */
					background: #000000FF; /* Green background */
					cursor: pointer; /* Cursor on hover */
				}
			}
		}

		.property {
			display: flex;
			flex-direction: row;

			.key {
				width: 120px;
				margin-right: 5px;
			}

			&.ppt-key {
				.key {
					align-self: center;
				}

				button {
					min-width: 100px;
				}
			}

			&.ppt-delay {
				margin-top: 5px;

				.value {
					display: inline-block;
					position: relative;

					&:after {
						position: absolute;
						top: 1px;
						right: .5em;
						transition: all .05s ease-in-out;
					}

					&:hover::after {
						right: 1.5em;
					}

					&::after {
						content: 'ms';
					}
				}
			}
		}
	}

	.sound-settings {
		display: flex;
		flex-direction: column;
		justify-content: stretch;

		.property {
			width: 100%;
			flex-shrink: 0;
			flex-grow: 0;

			display: flex;
			flex-direction: row;
			justify-content: stretch;

			.key {
				/*
				width: 250px;

				&.muted-sounds {
					width: 230px;
				}
				*/
				margin-right: 10px;
			}

			.value {
				display: flex;
				flex-direction: row;
				justify-content: stretch;

				flex-shrink: 1;
				flex-grow: 1;

				&.master-volume {
					input {
						width: 100%;
					}

					a {
						margin-left: 5px;
						width: 50px;
						text-align: right;
					}
				}

				.bmd-form-group {
					padding: 0;

					label {
						margin: 0;
						top: -7px;
					}

					.bmd-switch-track {
						top: 0;
					}
				}
			}
		}

		.sound-list {
			margin-top: 5px;

			display: flex;
			flex-grow: 1;
			flex-direction: column;
			justify-content: stretch;

			.column {
				&.sound-name {
					width: calc(100% - 150px);
				}

				&.sound-activated {
					width: 150px;
					flex-grow: 0;

					.bmd-form-group {
						padding: 0;

						label {
							margin: 0 0 0 75px;
							top: -7px;
						}

						.bmd-switch-track {
							top: 0;
						}
					}
				}
			}

			.sound-list-header {
				flex-grow: 0;
				flex-shrink: 0;
				display: flex;
				flex-direction: row;
				align-items: center;

				.column {
					border: 1px solid lightgray;
					text-align: center;
				}
			}

			.sound-list-entries-container {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				justify-content: start;
				overflow-y: auto;

				min-height: 400px;
				max-height: 400px;

				.entry {
					display: flex;
					flex-direction: row;

					.column {
						margin-left: 2px;
					}

					cursor: pointer;

					&.selected {
						background-color: blue;
					}

					&:hover {
						background-color: #00000022;
					}

					.button-playback:hover {
						background-color: #00000022;
					}
				}

				&.scrollbar {
					.column {
						&.sound-name {
							width: calc(100% - 150px + 60px)
						}
					}
				}
			}
		}

		/*
		.sound-list-filter {
			margin-top: 3px;

			display: flex;
			flex-direction: row;
			justify-content: stretch;

			input {
				flex-grow: 1;
				flex-shrink: 1;
			}

			a {
				margin-right: 8px;
			}
		}
		*/
	}
}

.modal .container-tabname-translations {
	display: flex;
	flex-direction: row;

	.country {
		align-self: center;
		margin-left: 3px;
	}
}

.modal .settings-translations {
	margin: 5px;

	.setting-list {
		user-select: none;

		display: flex;
		flex-direction: column;

		.list {
			display: flex;
			flex-direction: column;
			justify-content: start;

			overflow-y: auto;

			border: solid 1px lightgray;
			padding: 2px;
			background: #33333318;

			height: 50%;
			min-height: 50%;
			max-height: 50%;

			.entry {
				display: flex;
				flex-direction: row;
				justify-content: stretch;

				.default {
				}

				.name {
					flex-grow: 1;
					flex-shrink: 1;
				}

				&.translation:not(.default) {
					padding-left: 15px;
				}

				&.translation {
					cursor: pointer;
				}

				&.repository {
					.name {
						font-weight: bold;
					}
				}

				&.selected {
					background: #0000FF77;
				}


				.button {
					cursor: pointer;

					&:hover {
						background-color: #00000010;
					}
				}

				.country {
					align-self: center;
					margin-right: 5px;
					margin-left: 5px;
				}
			}
		}

		.management {
			width: 100%;

			display: flex;
			flex-direction: row;
			justify-content: stretch;

			margin-top: 5px;
			float: right;

			.space {
				flex-grow: 1;
			}
		}

		.restart-note {
			width: 100%;

			display: flex;
			flex-direction: row;
			justify-content: space-between;

			margin-top: 5px;

			p {
				margin: 0;
			}
		}
	}
}

/* The info modal for the translations */
.entry-info-container {
	display: flex;
	flex-direction: column;

	.property {
		display: flex;
		flex-direction: row;
		justify-content: stretch;

		.key {
			width: 100px;
		}

		.value {
			display: flex;
			flex-direction: row;
			flex-grow: 1;
		}

		&.property-repository {
			p {
				margin: 0;
			}

			.button {
				cursor: pointer;

				display: flex;
				flex-direction: column;
				justify-content: center;

				margin-right: 5px;

				&:hover {
					background: #00000011;
				}
			}
		}

		&.property-contributors {
			.value {
				display: flex;
				flex-direction: column;
			}

			.contributor {
				display: block;
			}
		}
	}
}

.modal .settings-general {
	padding: 5px;

	.not-connected {
		/* display: none; */
	}

	.connected {
		display: flex;
		flex-direction: column;
		justify-content: stretch;

		.connected-info {
			color: green;
		}

		.property {
			display: flex;
			flex-direction: row;
			justify-content: stretch;

			.key {
				flex-grow: 0;
				flex-shrink: 0;
				width: 140px;
			}

			&.premium {
				.premium {
					color: green;
				}

				.non-premium {
					color: red;
				}
			}
		}

		.container-info-action {
			display: flex;
			flex-direction: row;
			justify-content: stretch;

			.divider {
				flex-grow: 0;
				flex-shrink: 0;
				width: 2px;

				background: lightgray;
			}

			.container-info, .container-actions {
				flex-grow: 1;
				flex-shrink: 1;
				width: 50%;

				display: flex;
				flex-direction: column;
				justify-content: stretch;
			}

			.container-actions {
				display: flex;
				flex-direction: column;
				justify-content: center;

				button {
					width: 150px;

					align-self: center;
				}
			}
		}
	}
}

.modal .settings-profiles {
	margin: 5px;

	> div:not(:first-of-type) {
		margin-top: 5px;
	}

	.profile-status-container {
		display: flex;
		flex-direction: row;

		justify-content: space-between;
	}

	.error-message {
		color: red;
	}

	.profile-list {
		user-select: none;

		display: flex;
		flex-direction: column;

		.list {
			display: flex;
			flex-direction: column;
			justify-content: start;

			overflow-y: auto;

			border: solid 1px lightgray;
			padding: 2px;
			background: #33333318;

			height: 50%;
			min-height: 50%;
			max-height: 50%;

			.entry {
				display: flex;
				flex-direction: row;
				justify-content: stretch;
				cursor: pointer;

				&.default {
					.name {
						font-weight: bold;
					}
				}

				.name {
					flex-grow: 1;
					flex-shrink: 1;
				}

				&.selected {
					background: #0000FF77;
				}


				.button {
					cursor: pointer;

					&:hover {
						background-color: #00000010;
					}
				}
			}
		}

		.management {
			width: 100%;

			display: flex;
			flex-direction: row;
			justify-content: stretch;

			margin-top: 5px;
			float: right;

			.space {
				flex-grow: 1;
			}

			button:not(:first-of-type) {
				margin-left: 5px;
			}
		}
	}

	.general-settings {
		display: flex;
		flex-direction: column;
		justify-content: start;

		.setting {
			&:not(:first-of-type) {
				margin-top: 5px;
			}

			display: flex;
			flex-direction: row;
			justify-content: stretch;

			.key {
				flex-grow: 0;
				flex-shrink: 0;
				width: 200px;
			}

			input, div {
				flex-grow: 1;
				flex-shrink: 1;
			}
		}
	}

	.identity-settings {
		display: none;

		&.active {
			display: block;
		}

		&.identity-settings-teaforo {
			/*
			.connected, .disconnected {
				display: none
			}
			*/
		}

		&.identity-settings-teamspeak {
			.level {
				padding-right: 5px;
				padding-left: 5px;

				display: flex;
				flex-direction: row;
				justify-content: stretch;

				.container-input {
					flex-grow: 1;
					flex-shrink: 1;

					display: flex;
					flex-direction: row;
					justify-content: stretch;

					margin-right: 10px;
				}
			}

			.property {
				&:not(:first-of-type) {
					margin-top: 5px;
				}

				display: flex;
				flex-direction: row;
				justify-content: stretch;

				.key {
					width: 200px;
				}

				.value {
					flex-grow: 1;
					flex-shrink: 1;

					input {
						width: 100%;
					}
				}
			}

			.identity-undefined {
				text-align: center;
			}

			.manage {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				margin-top: 5px;
			}
		}
	}
}

.container-teamspeak-import {
	.error {
		color: red;
		/* margin-bottom: 5px; */
	}

	.success {
		color: green;
	}

	.input-file {
		display: none;
	}

	.load-data {
		display: flex;
		flex-direction: column;
		justify-content: stretch;

		.buttons {
			flex-grow: 1;
			flex-shrink: 1;
			display: flex;
			flex-direction: row;
			justify-content: end;

			button:not(:first-of-type) {
				margin-left: 20px;
			}
		}
	}

	.footer {
		margin-top: 5px;
		text-align: right;
		margin-bottom: 5px;

		.button-import {
			width: 100px;
		}
	}
}

.container-teamspeak-improve {
	display: flex;
	flex-direction: column;

	.bmd-label-static {
		display: flex;
		flex-direction: row;
	}

	.form-row {
		margin-right: 0!important;
		margin-left: 0!important;
		justify-content: space-between;
	}

	.buttons {
		margin-top: 5px;
		margin-bottom: 5px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;

		button {
			width: 100px;
		}
	}

	.help-tip-container {
		margin-left: 5px;
	}
}