/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
															   .buttonRevealedUl
																  A wT component
	An a11y focused equivalent to a SELECT if you don't have a FORM (and so
	should be avoiding FORM specific tags to do with data choice
	(SELECT) or data input (INPUT)

	HTML
	<div class="btnRevealUl __selectLike __matchWidth" id="yourId">
							Optional class __selectLike styles the otherwise
							plain UL to look more like a SELECT

							Optional class __matchWidth takes the width of the
							BUTTON and uses it to style the width of the
							UL so it is the same width
	CSS
	.btnRevealUl .btnIcon {
		padding-left: 1.62em;
							Make space for icon
							Todo in some use case maybe we need a LH margin so
							LH edge of icon is not up against button LH edge?
	.btnRevealUl.__selectLike ul a:hover {
		background: #902A8C;
		color: #fff;
							Todo these colours should be component agnostic,
							set them via an ID rule.
							Todo have an ID rule set set aside for customizing
							the otherwise standard components.
	TODO
		focus
		some colours need making more generic
	- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
		.btnRevealUl ul.open {
			display: block !important;
			padding-left: 0;
		}

		.btnRevealUl .btnIcon {
			position: relative;
			padding-left: 1.62em;
		}

		.btnRevealUl button[aria-expanded="false"] .btnIcon::before,
		.btnRevealUl button[aria-expanded="true"] .btnIcon::before {
			content: "\e147";
			font-family: "Material Icons";
			font-size: 162%;
			position: absolute;
			top: -0.22em;
			left: -0.2em;
		}

		.btnRevealUl button[aria-expanded="true"] .btnIcon::before {
			content: "\e15c";
			font-family: "Material Icons";
		}

		.btnRevealUl.__selectLike ul {
			list-style: none;
			margin: 0;
			border: 1px solid;
		}

		.btnRevealUl.__selectLike ul a {
			color: #000;
			display: block;
			border-bottom: none;
			padding: 0.2em 0.38em;
			text-decoration: none;
			background: rgba(0, 0, 0, 0.05);
			border-bottom: 2px solid #fff;
		}

		.btnRevealUl.__selectLike ul li:last-child a {
			border-bottom: none;
		}

		.btnRevealUl.__selectLike ul a:hover {
			background: #902A8C;
			color: #fff;
		}

		/*Case specific rules IN SEPARATE STYLESHEET target by #ID, like this:
			.btnRevealUl#YourUniqueId {
				margin-bottom: 0;
				width: 100%;
				etc
			}
		*/



/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
															   .a11y202211161157
																	  .row1_1157
Not part of web team components, but they are somewhat sidelined here so a
useful place to put these rules.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/*	row1, row2*/
	.a11y202211161157 .row1_1157,
	.a11y202211161157 .row2_1157,
	.a11y202211161157 .row3_1157,
	.a11y202211161157 .row4_1157 {
		display: flex;
		flex-wrap: nowrap;
	}

	.a11y202211161157 .row1_1157 > div:nth-of-type(1) {
		width: 40%;
		margin-right: 1%;
	}

	.a11y202211161157 .row1_1157 > div:nth-of-type(2) {
		width: 58%;
		margin-left: 1%;
	}

	.a11y202211161157 .row1_1157 > div:nth-of-type(2) img {
		margin: 2.62em auto;
		display: block;
	}

	@media only screen and (max-width: 1100px){/* - - - - - - - - - - - - - - -*/
		.a11y202211161157 .row1_1157 > div:nth-of-type(2) img {
			margin: 1.38em auto;
		}
	}/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - end-of-1100px*/
	@media only screen and (max-width: 950px){/* - - - - - - - - - - - - - - -*/
		.a11y202211161157 .row1_1157 {
			display: inherit;
			flex-wrap: inherit;
		}
		.a11y202211161157 .row1_1157 > div:nth-of-type(1),
		.a11y202211161157 .row1_1157 > div:nth-of-type(2) {
			width: 100%;
			margin-right: 0;
			margin-left: 0;
		}
		.a11y202211161157 .row1_1157 > div:nth-of-type(1) {
			text-align: center;
		}
	}/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - end-of-950px*/
	.a11y202211161157 .teal {
		color: #008080;
	}

	.a11y202211161157 .magenta {
		color: #5F497A;
	}

/*row2*/
	.a11y202211161157 .row2_1157 img {
		width: 48%;
	}

	.a11y202211161157 .row2_1157 img:nth-of-type(1) {
		margin-right: 1%;
	}

	.a11y202211161157 .row2_1157 img:nth-of-type(2) {
		margin-left: 1%;
	}

/*row3, row4*/
	.a11y202211161157 .row3_1157 {
		margin-top: 2.62em;
	}

	.a11y202211161157 .row4_1157 {
		margin-top: 2.62em;
		margin-bottom: 2.62em;
	}

	.a11y202211161157 .row3_1157 > div:nth-of-type(1),
	.a11y202211161157 .row4_1157 > div:nth-of-type(1) {
		width: 49%;
		margin-right: 1%;
	}

	.a11y202211161157 .row3_1157 > div:nth-of-type(2),
	.a11y202211161157 .row4_1157 > div:nth-of-type(2) {
		width: 49%;
		margin-left: 1%;
	}

	@media only screen and (max-width: 950px){/* - - - - - - - - - - - - - - -*/
	/*row2*/
		.a11y202211161157 .row2_1157 {
			display: inherit;
			flex-wrap: inherit;
			text-align: center;
		}
		.a11y202211161157 .row2_1157 img {
			width: inherit;
/*			max-width: 500px;*/
		}
		.a11y202211161157 .row2_1157 img:nth-of-type(1) {
			margin-right: 0;
		}
		.a11y202211161157 .row2_1157 img:nth-of-type(2) {
			margin-left: 0;
		}
	/*row3, row4*/
		.a11y202211161157 .row3_1157,
		.a11y202211161157 .row4_1157 {
			display: inherit;
			flex-wrap: inherit;
		}
		.a11y202211161157 .row3_1157 img,
		.a11y202211161157 .row4_1157 img {
			margin-left: auto;
			margin-right: auto;
			display: block;
		}
		.a11y202211161157 .row3_1157 > div:nth-of-type(1),
		.a11y202211161157 .row4_1157 > div:nth-of-type(1) {
			width: 100%;
			margin-right: 0;
		}
		.a11y202211161157 .row3_1157 > div:nth-of-type(2),
		.a11y202211161157 .row4_1157 > div:nth-of-type(2) {
			width: 100%;
			margin-left: 0;
		}
	}/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - end-of-950px*/

	.blockOr {
		display: block;
		text-transform: lowercase;
		line-height: 2.62;
	}