.wai-settings_header {
	width: calc(100% + 40px);
	padding-top: 1rem;
	margin: -10px 0 1rem -20px;
	text-align: center;
	background: #fff;
	border-bottom: 1px solid #dcdcde;
}

.wai-settings_title-section {
	display: flex;
	align-items: center;
	justify-content: center;
	clear: both;
	padding-top: 8px;
}

.wai-settings_title-section h1 {
	display: inline-block;
	font-weight: 600;
	margin: 0 .8rem 1rem;
	font-size: 23px;
	padding: 9px 0 4px;
	line-height: 1.3;
}

.wai-settings_tabs-wrapper {
	display: -ms-inline-grid;
	-ms-grid-columns: 1fr 1fr;
	vertical-align: top;
	display: inline-grid;
	grid-template-columns: 1fr 1fr;
}

.wai-settings_tab {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: .5rem 1rem 1rem;
	margin: 0 1rem;
}

.wai-settings_general-tab-active .wai-settings_general-tab,
.wai-settings_cogs-tab-active .wai-settings_cogs-tab {
	box-shadow: inset 0 -3px #3582c4;
	font-weight: 600;
}

.wai-settings_header ~ form .form-table {
	margin-bottom: 2rem;
}


/**
 * The main input of a wai-flex-container should have a width of 300px, except
 * on mobiles, which is the maximum width the input can be so that the 20em wide
 * tooltop will not overflow the page at a 783px screen width, where 783px is
 * the width at which WordPress stops applying the mobile layout.
 */
.wai-flex-container .wai-input + .wai-input {
	width: 300px;
}

/**
 * WordPress has a desktop first layout.
 */
@media screen and (max-width: 782px) {
	.form-table td.wai-flex-container {
		display: flex;
		align-items: center;
	}
	.wai-flex-container .wai-input[type=checkbox], .wai-tooltip {
		flex-shrink: 0;
	}
	.wai-flex-container .wai-input + .wai-input {
		flex-grow: 1;
		width: unset;
	}
}


/**
 * The width is set to 1em to emulate a full-width text glyph as you'd expect to
 * see when using icons from a font-family, but here we are using an SVG instead
 * and the line-height is set to 1.3em to match the line-height of the cell
 * of the admin page layout. The cursor is only effective when hovering on the
 * element so we don't need to make a seperate hover selector. Position relative
 * is important to ensure the pseudo elements are aligned correctly within.
 */
.wai-tooltip {
	position: relative;
	display: inline-block;
	vertical-align: middle;
	cursor: help;
	width: 1em;
	height: 1.3em;
	margin-left: 1em;
}

.wai-tooltip::before, .wai-tooltip::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
}

.wai-tooltip::before {
	bottom: 0;
	right: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.496 6.033h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286a.237.237 0 0 0 .241.247m2.325 6.443c.61 0 1.029-.394 1.029-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94 0 .533.425.927 1.01.927z' fill='%23666'/%3E%3C/svg%3E");
}

.wai-tooltip:hover::after, .wai-tooltip:focus::after {
	content: attr(aria-label);
	position: absolute;
	cursor: default;
	top: 100%;
	left: -10em;
	width: 21em;
	padding: .5em;
	color: #fff;
	border-radius: .5em;
	background-color: #3c434a;
	box-shadow: 0 0 9px -3px #666;
	z-index: 1;
}

@media screen and (max-width: 782px) {
	.wai-tooltip:hover::after, .wai-tooltip:focus::after {
		left: -21em;
	}
}

@media screen and (max-width: 375px) {
	.wai-tooltip:hover::after, .wai-tooltip:focus::after {
		left: -18em;
		width: 18em;
	}
}