/* Dynamically set when the Help is expanded to avoid horizontal scrolling */
#wpcontent.yoast-help-center-open {
	overflow-x: hidden;
}

.wpseo-tab-video-container {
	margin-bottom: 20px;
	border-bottom: 1px solid #a4286a;
}

.wpseo-tab-video-container__handle {
	width: 100%;
	margin: 0;
	padding: 10px;
	border: none;
	outline: none;
	color: #a4286a;
	background: none;
	line-height: 19px;
	text-align: right;
	cursor: pointer;
}

.wpseo-tab-video-container__handle .toggle__arrow {
	text-decoration: none;
}

.wpseo-tab-video-container__handle:hover,
.wpseo-tab-video-container__handle:focus {
	text-decoration: underline;
}

.wpseo-tab-video-container__handle .dashicons-before:before {
	margin-left: 5px;
}

.wpseotab .wpseo-tab-video-container {
	margin-top: -15px;
}

.wpseo-tab-video-slideout {
	display: none;
	min-height: 320px;
	margin: 0 -9999px;
	/* hide the container bottom border when expanded */
	margin-bottom: -1px;
	padding: 2em 9999px;
	background-color: #a4286a;
	box-shadow: inset 0 10px 10px -5px rgba(123, 30, 80, 0.5), inset 0 -10px 10px -5px rgba(123, 30, 80, 0.5);

	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

.wpseo-tab-video-slideout .contextual-help-tabs-wrap {
	padding: 0;

	flex-basis: 0;
	flex-grow: 1;
	-ms-flex-negative: 1;
	/* do not use the shorthand syntax to avoid the unitless bug in IE 11 */
	-ms-flex-positive: 1;
	-ms-flex-preferred-size: 0;
	flex-shrink: 1;
}

.wpseo-tab-video-slideout a {
	color: white;
}

.wpseo-tab-video-slideout a.button,
.wpseo-tab-video-slideout a.button-primary {
	text-decoration: none;
}

.wpseo-tab-video-slideout h1,
.wpseo-tab-video-slideout h2,
.wpseo-tab-video-slideout h3,
.wpseo-tab-video-slideout h4,
.wpseo-tab-video-slideout h5,
.wpseo-tab-video-slideout h6 {
	margin-top: 0.5em;
	padding-top: 0;
	color: white;
	font-weight: 500;
}

.wpseo-tab-video-slideout .wpseo-tab-video__panel__textarea {
	float: right;
	/* min-width to make two boxes always have the same min width */
	min-width: 234px;
	/* max-width to make two boxes take the same space of the video above: 560px */
	max-width: 242px;
	margin: 0 0 1em 12px;
	padding: 15px 15px 5px;
	border: 1px solid;
	border-color: white;
	border-radius: 30px;
	border-bottom-left-radius: 0;
	color: white;
	background-color: #a4286a;
}

.wpseo-tab-video-slideout .wpseo-tab-video__panel__textarea a,
.wpseo-tab-video-slideout .wpseo-tab-video__panel__textarea a:hover,
.wpseo-tab-video-slideout .wpseo-tab-video__panel__textarea a:focus {
	color: white;
	font-weight: 500;
}

.wpseo-tab-video-slideout .wpseo-tab-video__panel__textarea h3 {
	margin: 0;
}

.wpseo-tab-video-slideout .yoast-help-center-tabs {
	width: 180px;
	padding: 0 0 1em 1em;
	color: white;
	background-color: #a4286a;

	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

.wpseo-tab-video-slideout .yoast-help-center-tabs ul {
	margin: 0;
}

.wpseo-tab-video-slideout .help-tab-content {
	margin: 0;
	color: white;
	font-weight: 300;
}

.wpseo-tab-video-slideout .wpseo-tab-video__panel--video {
	/* In the settings pages is not a children of the flexbox container. */
	float: right;
	margin-left: 1em;
	padding-bottom: 1em;

	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
}

.wpseo-tab-video-slideout .wpseo-tab-video__panel--video iframe {
	/* remove iframe descender space */
	vertical-align: middle;
}

.wpseo-tab-video-slideout .wpseo-tab-video__panel--text {
	min-width: 264px;
	margin: 0 auto;

	flex-basis: 0;
	flex-grow: 1;
	-ms-flex-negative: 1;
	/* do not use the shorthand syntax to avoid the unitless bug in IE 11 */
	-ms-flex-positive: 1;
	-ms-flex-preferred-size: 0;
	flex-shrink: 1;
	/* must be less than a text box min width */
}

.wpseo-tab-video-slideout .wpseo-tab-video__panel--text div:last-child {
	margin-left: 0;
}

/* When it's inside the metabox (posts, terms, media ). */
.postbox .wpseo-tab-video-container {
	margin: -6px -12px 20px;
}

/* When it's inside the metabox (posts, terms, media ). */
.postbox .wpseo-tab-video-slideout {
	margin: 0;
	padding: 2em 12px 15px;
}

.inside .wpseo-tab-video-slideout {
	height: auto;
}

.wpseo-help-center-item {
	display: inline;
}

.wpseo-help-center-item a {
	display: block;
	padding: 10px 12px;
	color: white;
	text-decoration: none;
}

.wpseo-help-center-item a:hover,
.wpseo-help-center-item a:focus {
	text-decoration: underline;
}

.wpseo-help-center-item a.dashicons-before:before {
	margin-left: 3px;
	text-decoration: none;
}

.wpseo-help-center-item.active a {
	color: #a4286a;
	background-color: white;
}