/* Custom BBCode styles. Kept out of the templates because a <style> element makes s9e drop the tag. */

	details.bbcspoilersecret summary.bbcspoilersecret { user-select: none; outline: 0 !important; background-color: var(--background-color); padding: 1rem 2rem; display: inline-block; border-radius: 0.4rem; margin-top: 2rem; }
	details.bbcspoilersecret summary.bbcspoilersecret .bbctitle { font-weight:bold; padding-left:5px; cursor: pointer; }
	details.bbcspoilersecret summary.bbcspoilersecret::-webkit-details-marker { display: none }
	details.bbcspoilersecret summary.bbcspoilersecret::before{ float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f023"; cursor: pointer; }
	details.bbcspoilersecret[open] summary.bbcspoilersecret::before{ content: "\f023"; }
	details.bbcspoilersecret { margin-bottom: 1rem; }
	details.bbcspoilersecret[open] summary.bbcspoilersecret::after { content: attr(title-open); font-weight:bold; cursor: pointer; padding-left: 1rem; }
	details.bbcspoilersecret:not([open]) summary.bbcspoilersecret::after { content: attr(title-close); font-weight:bold; cursor: pointer; padding-left: 1rem; }
	details.bbcspoilersecret .bbccontent.bbcspoilersecret { user-select: none; background-color: var(--light-grey); padding: 1rem; margin: 1rem 0; border: 1px solid var(--border-color); border-left: 2px solid var(--black); border-top-right-radius: 0.4rem; border-bottom-right-radius: 0.4rem; }

	details.bbcyoutube summary { user-select: none; outline: 0 !important; cursor: pointer; display: inline-block; margin-top: 2rem; position: relative; }
	details.bbcyoutube summary .bbctitle { font-weight:bold; padding-left:5px; cursor: pointer; }
	details.bbcyoutube summary::-webkit-details-marker { display: none }
	details.bbcyoutube:not([open]) summary::before { cursor: pointer; content: ""; position: absolute; background-color: rgba(0, 0, 0, 0.7); top: 0; left: 0; right: 0; bottom: 0; }
	details.bbcyoutube:not([open]) summary img { max-width: 100%; object-fit: contain; }
	details.bbcyoutube:not([open]) summary::after { content: attr(title-open); font-weight:bold; cursor: pointer; position: absolute; left: 50%; transform: translate(-50%, -50%); color: white; top: calc(50% + 6rem); text-align: center; width: 36rem; }
	details.bbcyoutube summary .fa { position: absolute; color: rgba(255, 255, 255, 0.9); top: calc(50% - 1rem); left: 50%; transform: translate(-50%, -50%); font-size: 10rem; }
	details.bbcyoutube { margin-bottom: 1rem; }
	details.bbcyoutube[open] summary img { display: none; }
	details.bbcyoutube[open] summary .fa { display: none; }

	details.bbcspoilersimple summary.bbcspoilersimple { user-select: none; outline: 0 !important; background-color: var(--background-color); padding: 1rem 2rem; display: inline-block; border-radius: 0.4rem; margin-top: 2rem; }
	details.bbcspoilersimple summary.bbcspoilersimple .bbctitle { font-weight:bold; padding-left:5px; cursor: pointer; }
	details.bbcspoilersimple summary.bbcspoilersimple::-webkit-details-marker { display: none }
	details.bbcspoilersimple summary.bbcspoilersimple::before{ float: left; padding-left:1px; font-family: "FontAwesome"; content: "\f055"; cursor: pointer; }
	details.bbcspoilersimple[open] summary.bbcspoilersimple::before{ content: "\f056"; }
	details.bbcspoilersimple { margin-bottom: 1rem; }
	details.bbcspoilersimple[open] summary.bbcspoilersimple::after { content: attr(title-open); font-weight:bold; cursor: pointer; padding-left: 1rem; }
	details.bbcspoilersimple:not([open]) summary.bbcspoilersimple::after { content: attr(title-close); font-weight:bold; cursor: pointer; padding-left: 1rem; }
	details.bbcspoilersimple .bbccontent.bbcspoilersimple { background-color: var(--light-grey); padding: 1rem; margin: 1rem 0; border: 1px solid var(--border-color); border-left: 2px solid var(--black); border-top-right-radius: 0.4rem; border-bottom-right-radius: 0.4rem; }