/* Switch-User menu: */
/* Used on Login.aspx and Logout.aspx */

fieldset#switchUsersFieldset {
}
	fieldset#switchUsersFieldset > div {
		/* This <div> is because we can't set <fieldset> to `display: flex;` */
		display: flex;
		justify-content: space-between;
	}
		fieldset#switchUsersFieldset > div > ul#userList {
			flex-basis: 25%;
		}
		fieldset#switchUsersFieldset > div > div#userInputs {
			flex-basis: 75%;
			padding-left: 3em;
			box-sizing: border-box;
		}

ul#userList {
	list-style: none;
	padding: 0;
	margin: 0;

	display: flex;
	flex-direction: column;
}
	ul#userList > li {
		flex-shrink: 1;
		flex-grow: 1;

		margin: 0.25em;
		box-sizing: border-box;
	}
		ul#userList > li:hover {
		}

		ul#userList > li > label {
			display: block;
			font-size: large;
			padding: 0.25em 0.5em;
			border-radius: 5px;
			cursor: pointer;

			border: 1px solid #a9a9a9;
			box-shadow: 1px 1px 4px #ebebeb;

			display: flex;
			align-items: center;
			gap: 0.25em;
			min-height: 27px;
		}
		ul#userList > li > label:hover {
			background-color: var(--color-accent-dark);
		}
			ul#userList > li > label:hover::before {
				background-color: var(--color-accent-text);
			}

	#loginSection  fieldset > div.field,
	#logoutSection fieldset > div.field {
		margin-left: auto;
		margin-right: auto;
	}

	#loginSection  fieldset > div.actions,
	#logoutSection fieldset > div.actions {
		margin: 1em auto 0 auto;
		max-width: 20em;
	}

@media (max-width: 768px) {
	#switchUserSectionHeader,
	#switchUserSection {
		display: none;
	}
}