/* Layout */

.side-container {
	width: 25%;
}

.container-two-third {
	width: 75%;
}

.main-column {
	width: 66.6667%;
}

.additional-column {
	width: 33.3333%;
}

@media screen and (max-width: 1440px){
	.side-container {
		width: 33.3333%;
	}
	.container-two-third {
		width: 66.6667%;
	}
	.main-column {
		width: calc(100% - var(--medium));
	}
	.additional-column {
		display:none;
	}
}
		
@media screen and (max-width: 720px){
	.container-two-third {
		width: 100%;
	}
	.main-column{
		padding: var(--none) !important;
	}
	.side-container {
		display:none;
	}
}

/* Side Container */

.side-container-title {
	font-size: var(--font-size-24);
	line-height: var(--line-height-30);
	font-weight: var(--font-weight-bold);
}

/* Time to read */

#ttr > p::before {
	font-family: "Font Awesome 6 Free"; content: "\f017";
	padding-right: 9.5px;
}

#ttr > p {
	color: var(--text-color-muted);
	font-size: var(--font-size-12);
	line-height: var(--line-height-14);
}


/* Concepts */

#concepts > p {
	color: var(--text-color);
    padding: var(--extra-small);
    background-color: var(--background-surface-alt);
    border-radius: var(--radius-small);
	font-size: var(--font-size-12);
	margin-right: var(--extra-small);
}

/* Content */

main h1,
main h2,
main h3,
main p,
main li {
	color: var(--text-color);
}



main ul, main ol {
	margin-top: var(--medium);
	margin-bottom: var(--medium);
	margin-left: var(--large);
	padding: var(--none);
}

main ul ul, main ol ol {
	margin-top: var(--none);
	margin-bottom: var(--none);
}

main p {
	margin-top: var(--medium);
}

table p {
	margin-top: var(--none);
}


main img {
		max-width: 100%;
}
	


/* Version Select */

.version-title {
	color: var(--text-color);
	font-size: var(--font-size-24);
    line-height: var(--line-height-30);
    font-weight: var(--font-weight-bold);
}


/* Version higlight */
[data-mc-conditions*="EnvironmentVersions.Preview"]:not([data-mc-conditions*="EnvironmentVersions.Production"]),
[data-mc-conditions*="EnvironmentVersions.Acceptance"] {
	border-radius: 8px;
	border: 1px solid var(--border-color-seperator);
	padding-left: 16px;
	margin-left: -16px;
	padding-right: 16px;
	margin-right: -16px;
	margin-top: 16px;
}

[data-mc-conditions*="EnvironmentVersions.Preview"]:not([data-mc-conditions*="EnvironmentVersions.Production"]) {
	background: linear-gradient(135deg, rgba(var(--color-blue-60-RGB), 0.14) 0%, rgba(var(--color-white-RGB), 0.00) 100%);
}

[data-mc-conditions*="EnvironmentVersions.Acceptance"] {
	background: linear-gradient(135deg, rgba(var(--color-green-60-RGB), 0.14) 0%, rgba(var(--color-white-RGB), 0.00) 100%);
}

/* Target the first header (h1, h2, h3, etc.) inside the div with both classes (early-access and coming-soon) */
[data-mc-conditions*="EnvironmentVersions.Acceptance"][data-mc-conditions*="EnvironmentVersions.Preview"] > :is(h1, h2, h3, h4, h5, h6, p):first-child::after {
  content: " (In Preview)";
}

/* Target the first header (h1, h2, h3, etc.) inside the .early-access div (if it doesn't have .coming-soon class) */
[data-mc-conditions*="EnvironmentVersions.Preview"]:not([data-mc-conditions*="EnvironmentVersions.Production"]) > :is(h1, h2, h3, h4, h5, h6, p):first-child::after {
  content: " (In Preview)";
}

/* Target the first header (h1, h2, h3, etc.) inside the .coming-soon div (if it doesn't have .early-access class) */
[data-mc-conditions*="EnvironmentVersions.Acceptance"]:not([data-mc-conditions*="EnvironmentVersions.Preview"]) > :is(h1, h2, h3, h4, h5, h6, p):first-child::after {
  content: " (In Acceptance)";
}