@charset "UTF-8";

@layer Base
{
	a:link, a:visited
	{
		color: #0000FF;
	}

	a:hover, a:active
	{
		color: #000000;
	}

	body
	{
		min-height: 100dvh;
		margin: 0;
	}

	fieldset
	{
		display: flex;
		flex-direction: column;
	}

	fieldset button
	{
		align-self: center;
	}

	form
	{
		background-color: #FFFFFF;
		box-shadow: 0 0.1rem 1rem rgb(0 0 0 / 0.1);
		display: flex;
		flex-direction: column;
		width: min(100%, 32rem);
	}

	form button
	{
		align-self: center;
	}

	h1
	{
		font-size: 1.8rem;
		line-height: 2rem;
	}

	h2
	{
		font-size: 1.4rem;
		line-height: 1.6rem;
	}

	h3
	{
		font-size: 1rem;
		line-height: 1.2rem;
	}

	hr
	{
		border: 0.1rem solid #CCCCCC;
		margin-block: 0.3rem;
	}

	html
	{
		min-height: 100dvh;
	}

	main
	{
		background-color: #FAFAFA;
		padding: 1rem;
	}

	tbody th
	{
		text-align: left;
	}

	.currencyAndCurrencyMinorUnit
	{
		display: grid;
		gap: 1rem;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"currencyLabel currencyMinorUnitLabel"
			"currencyControl currencyMinorUnitControl";

		& select
		{
			width: 100%;
		}

		& .currencyControl
		{
			grid-area: currencyControl;
		}

		& .currencyControl select + div
		{
			margin-block-start: 1rem;
		}

		& .currencyLabel
		{
			grid-area: currencyLabel;
		}

		& .currencyMinorUnitControl
		{
			grid-area: currencyMinorUnitControl;
		}

		& .currencyMinorUnitControl select + div
		{
			margin-block-start: 1rem;
		}

		& .currencyMinorUnitLabel
		{
			grid-area: currencyMinorUnitLabel;
		}
	}

	.countryCodeAndPhoneNumber
	{
		display: flex;
		gap: 0.5rem;

		& .phoneNumber
		{
			flex: 1 1 auto;
			min-width: 0;
		}

		& .phoneNumberCountryCode
		{
			flex: 0 0 auto;
		}
	}

	.date
	{
		font-family: monospace;
	}

	.flowContent
	{
		display: flex;
		flex-direction: column;
		gap: 1.5rem;
	}

	.flowContent > *
	{
		margin: 0;
	}

	.inlineList
	{
		display: flex;
		flex-flow: column;
		gap: 1rem;
		margin: 0 1rem;
		padding: 0;
	}

	.noStyleTable
	{
		border: none;

		& td
		{
			border: none;
			padding: 0.5rem;
		}

		& tr td:first-child
		{
			padding-inline-start: 0;
		}

		& tr td:last-child
		{
			padding-inline-end: 0;
		}

		& tr:first-child td
		{
			padding-block-start: 0;
		}

		& tr:last-child td
		{
			padding-block-end: 0;
		}
	}

	.overflow-x-auto
	{
		overflow-x: auto;
	}

	.overflow-x-auto table
	{
		white-space: nowrap;
	}

	.tableForm
	{
		background-color: inherit;
		box-shadow: none;
		flex-direction: row;
		padding: 0 !important;
		width: auto;
	}

	.valueMissing
	{
		color: #FF0000;
		font-style: italic;
	}

	@media screen and (width <= 600px)
	{
		.flowContentSmallScreen
		{
			display: flex;
			flex-direction: column;
			gap: 1.5rem;
		}

		.flowContentSmallScreen > *
		{
			margin: 0;
		}
	}

	@media screen and (width > 600px)
	{
		.flowBoxesBigScreen
		{
			display: flex;
			flex-wrap: wrap;
			gap: 2rem;
		}

		.inlineList
		{
			display: flex;
			flex-flow: row wrap;
			gap: 0;
			list-style: none;
			margin: 0;
		}

		.inlineList li + li::before
		{
			content: "•";
			margin: 0 0.5rem;
		}
	}
}