.searchApp {
	--main-color: #0071bc;

	label:has(input:disabled) {
		color: #888;
		position: relative;
	}

	label:has(input:disabled):hover .searchApp-tooltip {
		display: block;
	}

	.searchApp-tooltip {
		position: absolute;
		bottom: calc(100% + 5px);
		left: 20px;

		background: #fff;
		color: #000;
		border: 1px solid #ccc;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);

		padding: 6px 8px;
		border-radius: 4px;
		font-size: 0.8em;
		white-space: nowrap;
		display: none;
		pointer-events: none;
	}

	input[name="searchtype"] {
		display: none;
	}

	input[name="searchtype"]:not(:checked)+fieldset {
		display: none;
	}

	.searchApp-tab {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px;
		text-align: center;
	}

	.searchApp-tab label {
		border: 2px solid var(--main-color);
		border-radius: 4px;
		padding: 5px 0;
		cursor: pointer;
		user-select: none;

		&:hover,
		&.selected {
			background-color: var(--main-color);
			color: #fff;
		}
	}

	.searchApp-tabContents {
		border: 2px solid var(--main-color);
		border-radius: 4px;
		padding: 10px 20px;
		margin: 10px 0 0;
	}

	.searchApp-formGroupInputs,
	.searchApp-formGroupInputs>fieldset {
		display: flex;
		flex-wrap: wrap;
		gap: 8px 16px;

		label {
			min-width: calc(4px + 13px + 3px + 5em);
		}

		#searchType2+fieldset & {
			label {
				width: calc(33.3% - 16px);
			}
		}
	}


	label:has(.searchApp-allToggle) {
		width: 100%;
	}

	.searchApp-tabContents>fieldset {
		display: grid;
		grid-template-columns: 160px 1fr;
		align-items: start;
		column-gap: 16px;
		row-gap: 8px;
	}

	fieldset:not(:first-of-type) {
		margin-top: 20px;
	}

	.searchApp-formButtons {
		margin-top: 40px;
	}

	.searchApp-formButtons {
		grid-column: 1 / -1;
		text-align: right;

		>input {
			padding: 5px 10px;
			border: 2px solid var(--main-color);
			border-radius: 4px;
			cursor: pointer;
			background-color: transparent;
		}
	}

	.searchApp-searchResult {
		display: none;
		margin-top: 10px;

		&:has(tbody tr),
		&.searchApp-notFound {
			display: block;
		}
	}

	.searchApp-notes1 {
		display: grid;
		grid-template-columns: 1fr 1fr 1fr 1fr;
		gap: 15px;
		margin-top: 10px;

		img {
			margin-right: 8px;
			float: left;
		}

		> :last-child {
			grid-column: 1 / -1;
		}
	}

	.searchApp-notes2 {
		display: flex;
		gap: 15px;
		margin-top: 15px;

		img {
			margin-right: 8px;
			float: left;
		}
	}

	.searchApp-searchResultCount {
		margin-top: 20px;
	}

	.searchApp-searchResultTable {
		&:not(:has(tbody tr)) {
			display: none;
		}

		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;

		td:first-of-type {
			text-align: center;
			width: 40px;
		}

		td:nth-child(4) {
			width: 5em;
		}

		td:last-of-type {
			white-space: nowrap;
			width: calc(40px * 3 + 41px + 5px * 3);
		}

		td,
		td {
			border: 2px solid #fff;
			background: #d1f3f9;
			padding: 5px;

			img {
				vertical-align: middle;

				&+img {
					margin-left: 5px;
				}
			}
		}
	}

	.searchApp-moreButton {
		border: 2px solid var(--main-color);
		border-radius: 4px;
		padding: 5px 10px;
		cursor: pointer;
		user-select: none;
		margin: 20px auto 0;
		background-color: transparent;

		&:hover {
			background-color: var(--main-color);
			color: #fff;
		}
	}
}