@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=PT+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');


:root {
	/* Font families */
	--font-serif: "PT Serif", serif;
	--font-sans: "Roboto", "Open Sans", sans-serif;
	--font-condensed: "Roboto Condensed", sans-serif;
	--font-mono: Consolas, Menlo, Monaco, "Courier New", monospace;
	
	/* Font sizes */
	--font-size-large: 1.5rem;
	--font-size-base: 1.25rem;
	--font-size-small: 1rem;
	--font-size-smaller: 0.9rem;

	/* Line heights */
	--line-height-code: 1.5;
	--line-height-base: 1.8;
	--line-height-tight: 1.5;
	--line-height-heading: 1.2;
	
	/* Font weights */
	--font-weight-light: 300;
	--font-weight-normal: 400;
	--font-weight-medium: 500;
	--font-weight-bold: 600;
	--font-weight-xbold: 700;
}


/* Root spacing definition - used for some margins and padding */
/***************************************************************/
:root { --space-unit: .75rem; }


/***********************************************************************/
/* Resets                                                              */
/***********************************************************************/

tr { background: none; }
b, strong { font-weight: var(--font-weight-bold); }

/* toolbar icon fix #hack */
.toolbar-tray-horizontal .toolbar-lining .toolbar-toggle-orientation button.toolbar-icon-toggle-vertical::before {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='currentColor' d='M2.5 2h-2.491v12.029h2.491c.276 0 .5-.225.5-.5v-11.029c0-.276-.224-.5-.5-.5zM14.502 6.029h-4c-.275 0-.5-.225-.5-.5v-1c0-.275-.16-.341-.354-.146l-3.294 3.292c-.194.194-.194.513 0 .708l3.294 3.293c.188.193.354.129.354-.146v-1c0-.271.227-.5.5-.5h4c.275 0 .5-.225.5-.5v-3c0-.276-.225-.501-.5-.501z'/%3e%3c/g%3e%3c/svg%3e");
	color: #757575; /* darken color to meet 4.5:1 */
}

.toolbar-tray-vertical .toolbar-lining .toolbar-toggle-orientation button.toolbar-icon-toggle-horizontal::before {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3e%3cg%3e%3cpath fill='currentColor' d='M1.986.019v2.491c0 .276.225.5.5.5h11.032c.275 0 .5-.224.5-.5v-2.491h-12.032zM8.342 6.334c-.193-.194-.513-.194-.708 0l-3.294 3.293c-.194.195-.129.353.146.353h1c.275 0 .5.227.5.5v4.02c0 .275.225.5.5.5h3.002c.271 0 .5-.225.5-.5v-4.02c0-.274.225-.5.5-.5h1c.271 0 .34-.158.145-.354l-3.291-3.292z'/%3e%3c/g%3e%3c/svg%3e");
	color: #757575; /* darken color to meet 4.5:1 */
}

/* remove link style for LTI clean title */
.node__title a[href*="/clean"] {
    text-decoration: none !important;
    color: #000000 !important;
}



/* address toggler focus */
.collapser[role="button"]:focus {
  outline: 2px solid currentColor; 
  outline-offset: 3px;
}


/* Fix for clean module using H2 as page header */
h2.node__title { margin-top: 0 !important; margin-bottom: calc(var(--space-unit) * 1.5) !important;}


/* highilght module styles to implement actual highlight module css */
mark.marker-yellow 	{ background-color: #FDFD77; }
mark.marker-green 	{ background-color: #62F962; }
mark.marker-pink 	{ background-color: #FC7899; }
mark.marker-blue 	{ background-color: #72CCFD; }
mark.pen-red 		{ background: transparent; color: #EB0000; }
mark.pen-green 		{ background: transparent; color: #128A00; }

/*
dl, ol, ul {
	margin-top: calc(var(--space-unit) * 1);
	margin-bottom: calc(var(--space-unit) * 2);

}
	*/

#block-base-course-theme-useraccountmenu > ul {
	margin-top: 0;
}


/***********************************************************************/
/* Screen Readers only - hides text in a span to sighted users         */
/***********************************************************************/
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}


/* Unpublished node background change */
/**************************************/
.node--unpublished {
	background: repeating-linear-gradient(45deg, #ffffff, #ffffff 10px, #fbe7ea 10px, #fbe7ea 20px);
}

.messages__wrapper {
	padding: 40px 20px;
	border: 2px solid #be0000;
	font-weight: var(--font-weight-bold);
	color: #be0000;
}

html, body {
	height: 100%;
	margin: 0;
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

body {
	color: #000;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}


/***********************************************************************/
/* Link coloring                                                       */
/***********************************************************************/

a, .link {
	color: #0033a7;
	word-wrap: break-word;
	overflow-wrap: break-word;
	word-break: normal;
	white-space: normal;
	transition: color 0.2s, border-bottom 0.2s, background-color 0.2s;
}

.main-content a:hover,
.main-content a:focus,
.main-content a:active {
	text-decoration: none;
	color: #660099;
	border-bottom: 2px solid #660099;
}

.main-content a:visited {
	color: #660099;
}

.main-content a {
	text-decoration: underline;
}

.navbar-dark .nav-link {
  color: #fff;
}

/* remove underline from external link icon */
a:hover svg.ext,
svg.ext:hover {
  text-decoration: none !important;
}


/* Inline Links - the links for Add Child Page and Printer-friendly */
/********************************************************************/
.inline__links {
	font-family: var(--font-condensed);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
}

.inline__links .nav { display: block; }
.inline__links .nav-link { padding: 0; }


/***********************************************************************/
/* Grid adjustments                                                    */
/***********************************************************************/

.layout-main-wrapper  {
	margin-top: 50px;
	margin-bottom: 50px;
	padding: 2rem;
}

.layout-main-wrapper .container {
	max-width: 95%;
}

#sidebar_first {
	padding: 1rem; /* was 2 */
}


/***********************************************************************/
/* Main content area - structure and typography                        */
/***********************************************************************/

#main {
	background: #f2f2f2;
}

#main > .row {
	flex-wrap: nowrap;
}

.main-content {
	padding: 2rem;
	border: 1px solid #ccc;
	background: #fff;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	font-weight: var(--font-weight-normal);
	flex: 1 0 auto;
	width: 65%;
}

.node__content {
	font-size: var(--font-size-base);
}

/* changed from .main-content p so may have some effects */
.main-content > p {
	margin-top: 0;
	margin-bottom: calc(var(--space-unit) * 2);
}

.node__content {
	margin-top: 0;
}

.node--unpublished {
	padding: 0;
}

/***********************************************************************/
/* Blockquote changes - lengthy due to the content variability of     */
/* what people put in blockquotes over time                            */
/***********************************************************************/
.main-content blockquote {
	padding: 50px;
	width: 100% !important;
	border-left: 10px solid #999;
	margin-top: calc(var(--space-unit) * 4);
	margin-bottom: calc(var(--space-unit) * 4);
	margin-left: 0;
	margin-right: 0;
	background: #f1f1f1;
	text-align: left;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
}

.main-content blockquote.quote {
	border-left: 10px solid #999;
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1.6;
	overflow: hidden;
}

.main-content blockquote p {
	font-style: italic;
}

.main-content blockquote li {
	font-style: italic;
}

.main-content blockquote > :first-child {
	margin-top: 0;
}

.main-content blockquote.quote footer {
	text-align: right;
	font-style: italic;
	font-weight: var(--font-weight-normal);
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	margin-top: calc(var(--space-unit) * 3);
}

.main-content blockquote.quote footer p {
	margin-bottom: 0;
}

.main-content .card blockquote,
.main-content .card blockquote.quote {
	background: #fff;
}

.main-content blockquote > :last-child {
	margin-bottom: 0;
}

/* Alternate border colors */
.main-content blockquote.red 	{ border-right: 10px solid #eb0000; }
.main-content blockquote.green 	{ border-right: 10px solid #008000; }
.main-content blockquote.blue 	{ border-right: 10px solid #0000ff; }
.main-content blockquote.yellow	{ border-right: 10px solid #ffff00; }

/***********************************************************************/
/* Bootstrap Tabs overrides                                           */
/***********************************************************************/
.bootstrap-tabs {
	margin-bottom: calc(var(--space-unit) * 2);
}

.bootstrap-tabs .nav-tabs li {
	font-family: var(--font-serif);
	font-size: var(--font-size-base) !important;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
}

.bootstrap-tabs .nav-tabs > li.active > a,
.bootstrap-tabs .nav-tabs > li.active > a:hover,
.bootstrap-tabs .nav-tabs > li.active > a:focus {
	color: #555;
	cursor: default;
	background-color: #fff;
	border: 1px solid #939393;
	border-bottom-color: transparent;
}

.bootstrap-tabs .nav-tabs > li > a {
	border: 1px solid transparent;
}

.tab-content > .active {
	display: block;
	border: 1px solid #939393;
	border-top-width: 0;
}

.bootstrap-tabs .nav-tabs {
	border-bottom: 1px solid #939393;
}

.bootstrap-tabs .tab-pane-content {
	padding: 20px;
}


/***********************************************************************/
/* Glossary DL DT DD styling                                           */
/* Note - affects all use of DL DT DD not just glossaries              */
/***********************************************************************/
.main-content dl:not(.ckeditor-accordion) {
	margin-bottom: 20px;
}

.main-content dt:not(.ckeditor-accordion) {
	color: #0058cb;
	font-weight: var(--font-weight-bold);
	font-size: 1.5rem;
}

.main-content dt:not(.ckeditor-accordion) p:first-of-type {
	color: #0058cb;
	margin-bottom: 0;
	font-weight: var(--font-weight-bold);
}

.main-content dd:not(.ckeditor-accordion) {
	margin-bottom: 15px;
	padding-left: 25px;
}

/* CKEditor accordion */
.ckeditor-accordion-container > dl {
	position: relative;
	border: none;
}


/***********************************************************************/
/* Headings - headers, H1, H2, H3, H4, H5, H6                          */
/***********************************************************************/
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: #000;
	font-family: var(--font-condensed);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-heading);
	font-style: normal;
	overflow: hidden;
}


h1, .h1 { 
	font-size: 3.5rem;
	line-height: 1.1;
	margin-bottom: calc(var(--space-unit) * 3.75);
	color: #0033a7;
}

h2, .h2 { 
	font-size: 3.15rem;
	line-height: 1.15;
	margin-top: calc(var(--space-unit) * 3.5);
	margin-bottom: calc(var(--space-unit) * 2);
	background-color: #eee!important;
	padding: 0.25rem 1rem!important;
}

h3, .h3 { 
	font-size: 2.65rem;
	line-height: 1.2;
	margin-top: calc(var(--space-unit) * 3.25);
	margin-bottom: calc(var(--space-unit) * 1.5);
	padding-bottom: 0.3rem!important;
	border-bottom: 2px solid #777;
}

h4, .h4 { 
	font-size: 2.25rem;
	line-height: 1.2;
	margin-top: calc(var(--space-unit) * 3);
	margin-bottom: calc(var(--space-unit) * 1.25);
	border-bottom: 2px dotted #777;
}

h5, .h5 { 
	font-size: 2rem;
	line-height: 1.25;
	margin-top: calc(var(--space-unit) * 2);
	margin-bottom: calc(var(--space-unit) * 1.25);
}

h6, .h6 { 
	font-size: 1.5rem;
	line-height: 1.25;
	margin-top: calc(var(--space-unit) * 1);
	margin-bottom: calc(var(--space-unit) * 1);
	font-style: italic!important;
}

h3:has(> a),
h3:has(a) {
  border: 0;
}

h4:has(> a),
h4:has(a) {
  border: 0;
}


/***********************************************************************/
/* Remove bolding of headers #hack                                     */
/* Resulting from content editors applying bold or strong to a heading */
/***********************************************************************/
h1 b,
h2 b,
h3 b,
h4 b,
h5 b,
h6 b,
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong {
	font-weight: var(--font-weight-medium);
	text-decoration: none;
}

/* Sidebar heading style */
/*************************/
.sidebar h2 {
	background: #dfe2ea;
	padding: 5px;
	font-size: 1.5rem;
	margin-bottom: 10px;
	margin-top: 0;
	background-color: #fff!important;
	padding: 00!important;
}



/* H2 blockquote exception - change background shading */
/*******************************************************/
.main-content blockquote h2,
.main-content div[aria-label="additional content"] h2 {
	border: none;
	background: #d1d1d1;
}


/* Removes any underlining of H3 and H4 so as not to compete with border bottom */
/********************************************************************************/
h3 + u,
h4 + u {
	text-decoration: none;
}

/* H3 and H4 removes applied border when a list item or a link */
/***************************************************************/
h3 a,
h4 a,
li h3,
li h3 a,
li h4,
li h4 a,
.box-note:has(> h4:only-child) > h4 {
	border: 0;
}

.search-block-form {
	padding-top: 0;
	margin-top: 0;
}

aside nav {
	padding-left:10px;
}

aside nav a {
	color: #0033a7;
	word-break: normal;
	overflow-wrap: break-word;
}


/***********************************************************************/
/* TABLES                                                              */
/* includes default table styling and exceptions                       */
/***********************************************************************/

.main-content table,
.table-data,
table-numeric,
.table-checklist,
table.highchart	{
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-normal);
	line-height: var(--line-height-tight);
	text-align: left;
	color: #000;
	border-collapse: collapse;
	background: #fff;
	margin-bottom: calc(var(--space-unit) * 2);
	margin-top: calc(var(--space-unit) * 2);
}

.main-content table thead,
.main-content table thead tr,
.main-content table thead tr th { background: #b1c0e8 ; color: #000;}
.main-content table tbody th	{ background: #d0daef ; color: #000 }

.main-content table th, .main-content table td { border: 1px solid #6a8bcf; padding: 10px; vertical-align: top; }
.main-content table th { font-weight: var(--font-weight-bold); }

.main-content table tbody tr:nth-child(even)	{ background: #eee; }
.no-striping table tbody tr:nth-child(even)		{ background: #fff; }

.main-content table td > :first-child { margin-top: 0; }
.main-content table td > :last-child { margin-bottom: 0; }

.main-content table caption,
.main-content table caption p {
	font-family: var(--font-condensed);
	font-size: var(--font-size-base) !important;
	font-weight: var(--font-weight-medium);
	text-align: center;
	caption-side: top;
	padding: .75rem;
	color: #000;
}

.main-content table ul, .main-content table ol { margin-left: 20px; padding-left: 10px; }

/* align all cells except the first column to the right in table-numeric */
.table-numeric tbody td:not(:first-child) { text-align: right; }

/* Classes for tables of equal columns */
.two-columns th, .two-columns td 		{ width: 50%; }
.three-columns th, .three-columns td	{ width: 33%; }
.four-columns th, .four-columns td		{ width: 25%; }

/* Table Auto Width - creates a table whose width is defined by content */
.table-auto-width { width: auto; table-layout: auto; margin: 0 auto; display: table; }

/* Table row hover */
.main-content table tbody tr:hover { background: #fffde6; }

/* no-hover class to remove table row hover */
.main-content table.no-hover tbody tr:hover { background: inherit !important; }

 
.main-content table img { margin: 0; }

.main-content table th a { color: #000; }

/************************************************************************/
/* Table Footer - caption and credit for table footer                   */
/* until CK Editor allows tfoot tag                                     */
/************************************************************************/
.table-footer {
	margin-bottom: calc(var(--space-unit) * 4);
	margin-top: calc(var(--space-unit) * 2);
	border-bottom: 1px solid #999;
	padding-bottom: 20px;
}
/* remove table margin bottom if table-footer present */
table:has(+ .table-footer) { margin-bottom: 0 !important; }

.main-content table img a:hover { border: 0; }


/***********************************************************************/
/* ANCHOR LINK ICONS                                                   */
/* add icons to links that go to graphics directly                     */
/* remove them for images in tables due to formatting issues           */
/***********************************************************************/
a[href$='.jpg'], a[href$='.gif'], a[href$='.png'], a[href$='.bmp'], a[href$='.jpg'], a[href$='.jpeg'], a[href$='.svg'], a[href$='.eps'] {
	padding: 5px 20px 5px 0;
	background: transparent url(https://www.e-education.psu.edu/meteo101/sites/all/modules/iconizer/files_icons/icon_pic.gif) no-repeat center right;
}

/* Exclude links around images inside <td> #hack */
.image-center a[href$='.jpg'], 
.img-center a[href$='.jpg'], 
td a[href$='.jpg'], 
td a[href$='.gif'], 
td a[href$='.png'], 
td a[href$='.bmp'], 
td a[href$='.jpeg'], 
td a[href$='.svg'], 
td a[href$='.eps'] {
    background: none;
    padding: 0;
}

/* Override lightbox use and remove icons after lightbox images #hack */
a.lightbox {
    background: none !important;
    padding: 0 !important;
}


/***********************************************************************/
/* PRE and CODE styling                                                */
/* these have been used interchangably among all courses               */
/***********************************************************************/
pre,
.code,
.pre {
	-moz-tab-size: 4;
	background: #fdfedc;
	border-left: 4px solid #d1d1d1;
	box-shadow: 0 2px 4px rgba(0,0,0,0.05);
	color: #000;
	font-family: var(--font-mono);
	font-size: var(--font-size-base);
	line-height: var(--line-height-code);
	margin-top: calc(var(--space-unit) * 3);
	margin-bottom: calc(var(--space-unit) * 3);
	max-width: 100%;
	overflow: auto;
    padding: .5rem 1rem 1rem 2rem;
	padding-top: 2px;
    padding-bottom: 2px;
	tab-size: 4;
	white-space: pre;
	word-spacing: normal;
}


/* reset code for cases of <pre><code> */
pre > code {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    font-family: inherit;
    font-size: inherit;
	margin: 0 !important;
}

code[class*=language-], 
pre[class*=language-] {
	font-family: var(--font-mono);
	word-break: break-all;
	word-wrap: break-word;
	line-height: var(--line-height-code);
}

/* Override or adjust properties specifically for span.pre */
span.pre, p > code, td > code, td > p > code {
	background: #f5fab5;
	border-radius: 6px;
	border: 1px solid #9d9d9d !important;
	color: #000;
	display: inline;
	font-family: var(--font-mono);
	font-size: var(--font-size-small) !important;
	line-height: normal;
	margin-top: 0;
	padding: 0.2em 0.4em !important;
	white-space: nowrap;
}


/* PRE default behavior has background, this class is for overriding that */
/*************************************************************************/
pre.no-background {background: none;}

/* PRE inside a PRE will have no background to differentiate it */
/****************************************************************/
pre pre {
	background: none;
}

/* Remove spacing between consecutive language- code blocks (excluding line-numbers) */
.dutton-block-widget 
	pre[class^="language-"]:not([class*="line-numbers"]) + 
	pre[class^="language-"]:not([class*="line-numbers"]) {
		margin-top: 0;
		margin-bottom: 0;
		padding: 0 0 0 1em !important;
		border-top: none;
		border-radius: 0;
		box-shadow: none;
}

/* First code block in a group - round top corner */
.dutton-block-widget 
	pre[class^="language-"]:not([class*="line-numbers"]):not(pre[class^="language-"]:not([class*="line-numbers"]) + 
	pre[class^="language-"]:not([class*="line-numbers"])) {
		border-radius: 4px 4px 0 0;
		padding-top: calc(var(--space-unit) * 1);
}

/* Last code block in a group - round bottom corner */
.dutton-block-widget 
	pre[class^="language-"]:not([class*="line-numbers"]):not(:has(+ pre[class^="language-"]:not([class*="line-numbers"]))) {
    border-radius: 0 0 4px 4px;
    padding-bottom: calc(var(--space-unit) * 1);
    margin-bottom: 50px;
}

/* Single code block - all corners rounded */
.dutton-block-widget 
	pre[class^="language-"]:not([class*="line-numbers"]):not(:has(+ pre[class^="language-"]:not([class*="line-numbers"]))):not(pre[class^="language-"]:not([class*="line-numbers"]) + 
	pre[class^="language-"]:not([class*="line-numbers"])) {
    border-radius: 4px;
}


/* successive PRE fix for CKE 5 pre propagation error */
.dutton-block-widget pre + pre {
    margin-top: 0 !important;
    border-top: none;
    border-radius: 0;
    box-shadow: none;
}

pre {
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Any pre that follows another pre: remove top margin */
pre + pre {
    margin-top: 0;
}

/* Any pre that has another pre after it: remove bottom margin */
pre:has(+ pre) {
    margin-bottom: 0;
}

/* First pre in a group - round top corner */
.dutton-block-widget pre:not(pre + pre) {
    border-radius: 4px 4px 0 0;
    /* margin-top: calc(var(--space-unit) * 1); */
    padding-top: calc(var(--space-unit) * 1);
}

/* Last pre in a group - round bottom corner */
.dutton-block-widget pre:not(:has(+ pre)) {
    border-radius: 0 0 4px 4px;
    /* margin-bottom: calc(var(--space-unit) * 1); */
    padding-bottom: calc(var(--space-unit) * 1);
}

/* Single pre - all corners rounded */
.dutton-block-widget pre:not(:has(+ pre)):not(pre + pre) {
    border-radius: 4px;
}








/* Fourish logo fix */
.flourish-credit img {
	width: 20px !important;
	height: auto !important;
}

/***********************************************************************/
/* Trigger Warning style bod and header                                */
/***********************************************************************/
.trigger-warning {
	background-color:#ffcccc;
	border:2px solid red;
	margin:20px 0;
	padding:15px 30px;
	text-align:center;
}

.trigger-warning h5 {
	font-size:28px;
	margin:0;
	padding:0;
}





/***********************************************************************/
/* Math styling                                                        */
/***********************************************************************/

/* General math element styling */
math {
	font-size: 100% !important;
	line-height: 2 !important;
	margin-bottom: calc(var(--space-unit) * 2);
	text-align: center;
}

math[display="inline"] {
	margin-bottom: 0;
}

/* MathJax Display spacing */
.MathJax_Display {
	margin-top: 0;
	margin-bottom: 0;
	border: none;
}

/* First in a sequence of MathJax_Display within the same parent */
.MathJax_Display:nth-of-type(1) {
	margin-bottom: calc(var(--space-unit) * 2.5);
}

/* Last in a sequence of MathJax_Display within the same parent */
.MathJax_Display:nth-last-of-type(1) {
	margin-top: calc(var(--space-unit) * 2.5);
}

/* Middle elements */
.MathJax_Display:nth-of-type(n+2):nth-last-of-type(n+2) {
	margin-top: calc(var(--space-unit) * 2.5);
	margin-bottom: calc(var(--space-unit) * 2.5);
}

/* PATTERN 1: Legacy standalone structure (no container) */
/*********************************************************/
.box-math {
	float: left;
	width: 83%;
	text-align: center;
	margin-top: calc(var(--space-unit) * 1);
	margin-bottom: calc(var(--space-unit) * 2);
	-webkit-overflow-scrolling: touch;
}

.box-math-caption {
	float: right;
	font-size: var(--font-size-small);
	margin-top: calc(var(--space-unit) * 1);
	min-height: 100%;
	text-align: right;
	width: 16%;
}

/* Clear floats for legacy pattern */
.box-math-clear {
	clear: both;
	display: block;
	width: 100%;
	height: 0;
	line-height: 0;
	visibility: hidden;
	margin-bottom: 1.5rem; /* #hack add margin for improperly nested math */
}

.box-math-clear::after {
	content: "";
	display: table;
	clear: both;
	width: 100%;
}

/* NEW PATTERN: Container-based structure with flexbox */
/*********************************************************/
.box-math-container {
  display: flex;
  align-items: center; 
  gap: 1rem; 
  margin-top: calc(var(--space-unit) * 1);
  margin-bottom: calc(var(--space-unit) * 2);
}

/* Override styles for box-math when inside container */
.box-math-container .box-math {
  float: none; 
  width: auto; 
  flex: 1; 
  margin-top: 0; 
  margin-bottom: 0;
}

/* Override styles for box-math-caption when inside container */
.box-math-container .box-math-caption {
  float: none; 
  width: auto; 
  margin-top: 0; 
  min-height: auto;
  flex-shrink: 0; 
}

/* Clear div not needed in container pattern */
.box-math-container .box-math-clear {
  display: none;
}



/* Reset any MathJax scrolling inside .box-math containers */
/***********************************************************/
/* Only target the specific scrolling properties that are causing issues */
.box-math .MathJax,
.box-math .MathJax_Display,
.box-math span.MathJax {
	overflow-x: visible !important;
	overflow-y: visible !important;
}

/* Remove scrollbars from MathJax inside .box-math */
.box-math span.MathJax::-webkit-scrollbar {
	display: none !important;
}


.box-math-container {
	margin-bottom: calc(var(--space-unit) * 2);
}


.box-copyright {
	border: 2px solid #0033a7;
	padding: 20px;
	background: #e2e8f5;
	font-family: var(--font-sans);
}

.box-copyright p {
	margin-bottom: 0;
}


/* Expression styling without Math                         */
/***********************************************************/

.math-expression {
	font-family: var(--font-serif);
}



/***********************************************************************/
/* Video                                                               */
/***********************************************************************/
video {
	width: 100% !important;
	height: auto !important;
}

.video-wrapper {
	position: relative !important;
	padding-bottom: 56.25% !important;
	height: 0 !important;
	z-index: 499 !important;
	margin-bottom: 20px;
}

.video-wrapper iframe,
.video-wrapper object,
.video-wrapper embed {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
}

.video-wrapper + .img-credit {
	margin-top: calc(var(--space-unit)* 1);
}












/***********************************************************************/
/* Buttons                                                             */
/***********************************************************************/
.btn-primary {
	background: #0572E6;
	border-radius: 0;
	border: none;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-style: normal;
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	margin-bottom: 0;
	padding: 10px 20px;
	white-space: normal;
}

.main-content > .btn-primary {
	margin-bottom: calc(var(--space-unit) * 3);
}


.img-caption .btn-primary > .show {
	margin-bottom: calc(var(--space-unit) * 1);
	text-align: left;
}

.img-center .video-wrapper + .img-caption {
	margin-top: 20px;
}




/***********************************************************************/
/* Image Caption       image-caption is a hack to support its use      */
/***********************************************************************/
.img-caption,
.image-caption {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	padding: 0;
	margin-top: 20px;
	margin-bottom: 0;
	font-family: var(--font-sans);
	text-align: center;
}

.img-caption + .img-caption,
.image-caption + .image-caption {
	  margin-top: 0; /* Set margin-top to 0 for successive elements */
}

/* #hack for toggler button being outside of .image-caption or img-caption */
.img-caption + .btn-primary.collapser,
.image-caption + .btn-primary.collapser {
	  margin-top: 1rem;
}


.img-center > .btn.collapser,
.image-center > .btn.collapser {
  display: block;
  margin: 1em auto;
  width: fit-content;
}

.collapse + p {
	margin-top: calc(var(--space-unit) * 3);
}

.img-credit + .btn-primary,
.image-credit + .btn-primary {
	margin-top: 0;
}

.img-caption b,
.image-caption b,
.img-caption strong,
.image-caption strong
	/* hack to fix double bolding */ {
	font-weight: var(--font-weight-bold);
}

.img-caption p,
.image-caption p {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-bold);
	line-height: var(--line-height-tight);
	padding: 10px 20px 0 20px;
}

.main-content .img-caption p btn {
	margin-bottom: 0;
}

.image-caption + .image-credit,
.img-caption + .img-credit,
.image-caption + .img-credit,
.img-caption + .image-credit {
	margin-top: 20px;
}

.img-caption ul,
.image-caption ul,
.image-center ul /* hack */ {
	text-align: left;
}

div[aria-label="additional content"]	{
	padding: 0 10px;
	text-align: left;
}

div[aria-label="additional content"] > :first-child	{
	margin-top: 0;
}

div[aria-label="additional content"] p	{
	font-weight: normal;
	margin-bottom: calc(var(--space-unit) * 2);
	text-align: left;
	padding: 0px;
}

div[aria-label="additional content"] > :last-child	{
	margin-bottom: 0 !important;
}

div[aria-label="additional content"] ul,
div[aria-label="additional content"] li	{
	text-align: left;
}


.card-body h2	{
	background: #ddd;
}


/***********************************************************************/
/* Boxes                                                               */
/***********************************************************************/

.indent {
	margin-left: 50px
}

.box-note,
.box-note-orange,
.box-reading-required, .box-reading-optional,
.box-activity-required, .box-activity-optional,
.box-image-left, .box-psu-ad, .box-other, .box-bibliography {
	position: relative;
	border: 1px solid #b8c5e5;
	background: #fbfcff;
	border-radius: 0;
	margin: 40px 0;
	padding: 40px 40px 40px 50px;
	overflow: auto;
	display: flow-root; /* clear internal floats */
}

/* If .box-bibliography contains <p>, apply hanging indent to <p> only */
.box-bibliography:has(p) p, .hanging-indent {
	padding-left: 25px;
	text-indent: -25px;
}

/* If .box-bibliography does NOT contain <p>, apply hanging indent to the div itself */
.box-bibliography:not(:has(p, ul, ol)) {
	padding-left: 25px;
	text-indent: -25px;
	display: block; /* Ensure it behaves like a block */
}


.box-note a,
.box-note-orange a,
.box-reading-required a, .box-reading-optional a,
.box-activity-required a, .box-activity-optional a,
.box-image-left a, .box-psu-ad a, .box-other a, .box-bibliography a {
	color: #005485; /* darken link color on blue box background for contrast */
}

.box-note:after, .box-note-orange:after,
.box-reading-required:after, .box-reading-optional:after,
.box-activity-required:after, .box-activity-optional:after,
.box-image-left:after, .box-psu-ad:after, .box-other:after, .box-bibliography:after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 10px;
	background: #b8c5e5;
	border-radius: 0;
}

/* address nesting blockquotes in boxes */
.box-note blockquote,
.box-note-orange blockquote,
.box-reading-required blockquote,
.box-reading-optional blockquote,
.box-activity-required blockquote,
.box-activity-optional blockquote,
.box-note blockquote.quote,
.box-note-orange blockquote.quote,
.box-reading-required blockquote.quote,
.box-reading-optional blockquote.quote,
.box-activity-required blockquote.quote,
.box-activity-optional blockquote.quote {
	background: #ffffff;
	border-right: 1px solid #999;
	border-top: 1px solid #999;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999 !important;
}

/* fix margin-top boxes */

.box-activity-optional > :first-child {
    margin-top: 0;
}




.box-note,
.box-note-orange {
	position: relative;
	border: 1px solid #6a8bcf;
	background: #f7f9ff;
	border-radius: 0;
	margin: 40px 0;
	padding: 40px;
	overflow: auto;
}

.box-note > math:first-child {
	margin: 0;
}

[class^="box-"]:not(.box-casestudy):not(.box-explore):not(.box-keyskill):not(.box-minute):not(.box-motivate):not(.box-prioritize):not(.box-quizyourself):not(.box-read):not(.box-watch):not(.box-wxchallenge) > :first-child {
	margin-top: 0;
}

[class^="box-"] > :last-child {
	margin-bottom: 0;
}

[class^="box-"]:not(.box-casestudy):not(.box-explore):not(.box-keyskill):not(.box-minute):not(.box-motivate):not(.box-prioritize):not(.box-quizyourself):not(.box-read):not(.box-watch):not(.box-wxchallenge) h2 {
	background: #dce5f3;
}

/* pattern for alternate box colors */
.box-note-orange {
	border: 1px solid #f8d49d;
	background: #fef6eb;
}

.box-note-orange:after {
	background: #f8d49d;  /* coordinate with box border color and reset */
	border-radius: 0;
}


/***********************************************************************/
/* Navigation at bottom of content - book-navigation, book-pager       */
/***********************************************************************/
.book-navigation .book-pager {
	background: #fff;
	color: #00529f;
	font-family: var(--font-condensed);
	line-height: 1.4;
	margin-bottom: 50px;
	margin-top: 100px;
	padding: 20px 0 15px !important;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}

.book-navigation > .menu {
	margin-top: calc(var(--space-unit) * 2);
}

.book-navigation .book-pager li {
	font-family: var(--font-condensed);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	line-height: 1.3 !important;
}

.book-navigation .book-pager li a {
	color: #00529f;
}


.book-pager__item--center {
	text-align: center;
	width: 8%;
	padding: 0 !important;
	margin: 0 !important;
}

.book-pager__item--previous,
.book-pager__item--next {
	width:45%;
	max-width:45%;
	border: 0;
	margin: 0 !important;
}

.menu-item--active-trail > a {
	background: #dfdfdf;
	font-weight: var(--font-weight-bold);
	padding: 2px 5px;
	position: relative;
	color: #0033a7;
}

aside .menu a  {
	color: #0033a7;
}

aside .menu a:visited  {
	color: #660099;
}





/***********************************************************************/
/* Navigation at the left of the content - course book navigation      */
/***********************************************************************/
.sidebar_first .block-book-navigation .menu li {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	margin-bottom: 10px;
}

.sidebar_first .block-book-navigation .menu  {
	padding: 0 10px;
}

.sidebar_first .menu-item--expanded > li   {
	padding: 0 20px;
}

.sidebar_first li.menu-item--expanded::before {
	content: "" !important;
}

.sidebar_first .block-book-navigation .menu li .menu {
	margin-left: 20px;
}

.sidebar .block {
	border: none;
	margin: 0 0 2rem;
}

.sidebar .menu-item--expanded:first-of-type ul {
	margin-top: 10px;
}

.search-block-form .form-type-search {
	flex: 1;
}

.search-block-form .form-type-search input,
.search-block-form .form-type-search .form-control,
.form-control
 {
	border: #939393 1px solid !important;
}

.search-block-form .container-inline {
	width: 100%;
	padding-left: 3px;
	padding-right: 3px;
}

.search-block-form .form-submit {
	margin-bottom: 0;
	padding: 6px 20px;
	text-transform: uppercase;
}

.sidebar-links {
	margin: 0;
}

.sidebar-links a {
	color: #0033a7;
}

.sidebar-links ul {
	padding-left: 20px;
	margin: 0;
}

.sidebar-links li,  .sidebar-links li a {
	font-family: var(--font-sans);
 font-size: var(--font-size-small);
	color: #0033a7;
}























/***********************************************************************/
/*   IMAGES AND MATH INSIDE LIST ITEMS                                 */
/***********************************************************************/
/* Add space above image-centered content inside LI */
.main-content li .img-center,
.main-content li .image-center {
	margin-top: calc(var(--space-unit) * 1.5);
}

/* Top margin if a <p> wraps an <img> in a list */
.main-content li > p > img {
	margin-top: calc(var(--space-unit) * 1.5);
}

/* Remove weird spacing from MathML in list items */
.main-content li > math {
	margin: 0;
	margin-bottom: 15px;
}


/***********************************************************************/
/*   LIST DEFINITIONS                                                  */
/***********************************************************************/

/* Legacy Classes Defined - support for previous D7 work  */
/* ------------------------------------------------------ */
.main-content .list-alpha-lower	{ list-style-type: lower-alpha; }
.main-content .list-alpha-upper	{ list-style-type: upper-alpha; }
.main-content .list-roman-lower	{ list-style-type: lower-roman; }
.main-content .list-roman-upper	{ list-style-type: upper-roman; }

/* Default UL unclassed styling based on CMoS, most common use case  */
/* ----------------------------------------------------------------- */
.main-content ul 							{ list-style-type: disc; list-style-position: outside; margin-left: 1.5em; padding-left: 1.5em; }
.main-content ul ul 						{ list-style-type: circle; }
.main-content ul ul ul 						{ list-style-type: square; }
.main-content ul ul ul ul					{  list-style: none;}
.main-content ul ul ul ul > li::before		{  content: "- ";  position: absolute;  margin-left: -1.2em;}
.main-content ul ul ul ul ul				{ list-style-type: disc; }
.main-content ul ul ul ul ul > li::before	{  content: normal;}
.main-content ul li 						{ margin-top: 0.25em; margin-bottom: 0.25em; position: relative; }


/* Default OL unclassed styling based on CMoS, most common use case  */
/* ----------------------------------------------------------------- */
.main-content ol			{ list-style-type: decimal; list-style-position: outside; }
.main-content ol ol			{ list-style-type: lower-alpha; }
.main-content ol ol ol		{ list-style-type: lower-roman; }
.main-content ol ol ol ol 	{ list-style-type: decimal; }
.main-content ol ol ol ol ol { list-style-type: lower-alpha; }
.main-content ol li			{ margin-top: 0.25em; margin-bottom: 0.25em; }


/* Global main content list spacing  */
/* --------------------------------- */
.main-content ol,.main-content ul			{  margin-top: 1em;  margin-bottom: 1em;}
.main-content li > ol,.main-content li > ul	{  margin-top: initial;  margin-bottom: initial;}


/* Roman Upper using Chicago Manual of Style, most common use case */
/* --------------------------------------------------------------- */
ol.roman-upper li::marker { content: normal !important;}
ol.roman-upper { list-style-type: upper-roman !important; list-style-position: outside !important; margin-left: 1.5em; padding-left: 1.5em;}
ol.roman-upper > li > ol { list-style-type: upper-alpha !important;}
ol.roman-upper > li > ol > li > ol { list-style-type: decimal !important;}
ol.roman-upper > li > ol > li > ol > li > ol { list-style-type: lower-alpha !important;}
ol.roman-upper > li > ol > li > ol > li > ol > li > ol { list-style: none !important; counter-reset: level5;}
ol.roman-upper > li > ol > li > ol > li > ol > li > ol > li { counter-increment: level5;}
ol.roman-upper > li > ol > li > ol > li > ol > li > ol > li::before { content: "(" counter(level5, decimal) ") ";}
ol.roman-upper li { margin-top: 0.25em; margin-bottom: 0.25em;}


/* Roman Lower using Chicago Manual of Style, most common use case */
/* --------------------------------------------------------------- */
ol.roman-lower li::marker 											{ content: normal !important;}
ol.roman-lower 														{ list-style-type: lower-roman !important; list-style-position: outside !important; margin-left: 1.5em; padding-left: 1.5em;}
ol.roman-lower > li > ol 											{ list-style-type: lower-alpha !important;}
ol.roman-lower > li > ol > li > ol 									{ list-style-type: decimal !important;}
ol.roman-lower > li > ol > li > ol > li > ol 						{ list-style-type: lower-alpha !important;}
ol.roman-lower > li > ol > li > ol > li > ol > li > ol 				{ list-style: none !important; counter-reset: level5;}
ol.roman-lower > li > ol > li > ol > li > ol > li > ol > li			{ counter-increment: level5;}
ol.roman-lower > li > ol > li > ol > li > ol > li > ol > li::before { content: "(" counter(level5, decimal) ") ";}
ol.roman-lower li 													{ margin-top: 0.25em; margin-bottom: 0.25em;}


/* Alpha-upper using Chicago Manual of Style, most common use case */
/* --------------------------------------------------------------- */
ol.alpha-upper li::marker { content: normal !important; }
ol.alpha-upper { list-style-type: upper-alpha !important; list-style-position: outside !important; margin-left: 1.5em; padding-left: 1.5em; }
ol.alpha-upper > li > ol { list-style-type: decimal !important; }
ol.alpha-upper > li > ol > li > ol { list-style-type: lower-alpha !important; }
ol.alpha-upper > li > ol > li > ol > li > ol { list-style: none !important; counter-reset: level4; }
ol.alpha-upper > li > ol > li > ol > li > ol > li { counter-increment: level4; }
ol.alpha-upper > li > ol > li > ol > li > ol > li::before { content: "(" counter(level4, decimal) ") "; }
ol.alpha-upper > li > ol > li > ol > li > ol > li > ol { list-style: none !important; counter-reset: level5; }
ol.alpha-upper > li > ol > li > ol > li > ol > li > ol > li { counter-increment: level5; }
ol.alpha-upper > li > ol > li > ol > li > ol > li > ol > li::before { content: "(" counter(level5, lower-alpha) ") "; }
ol.alpha-upper li { margin-top: 0.25em; margin-bottom: 0.25em; }


/* Decimal using Chicago Manual of Style, most common use case */
/* ----------------------------------------------------------- */
/* Root: reset counter */
.main-content .decimal {
	counter-reset: section;
}

.main-content .decimal,
.main-content .decimal ol {
	list-style-type: none;
	padding-left: 0;
	margin-left: 0;
}

/* Level 1 */
.main-content .decimal > li {
	counter-increment: section;
	counter-reset: subsection;
	position: relative;
	margin-left: 0;
	padding-left: 2.5em;
}
.main-content .decimal > li::before {
	content: counter(section) ". ";
	position: absolute;
	left: 0;
	width: 2.5em;
	text-align: right;
	padding-right: 0.25em;
}
/* Level 2 */
.main-content .decimal > li > ol > li {
	counter-increment: subsection;
	counter-reset: subsubsection;
	position: relative;
	margin-left: 0;
	padding-left: 3em;
}
.main-content .decimal > li > ol > li::before {
	content: counter(section) "." counter(subsection) ". ";
	position: absolute;
	left: 0;
	width: 3em;
	text-align: right;
	padding-right: 0.25em;
}
/* Level 3 */
.main-content .decimal > li > ol > li > ol > li {
	counter-increment: subsubsection;
	counter-reset: subsubsubsection;
	position: relative;
	margin-left: 0;
	padding-left: 3.5em;
}
.main-content .decimal > li > ol > li > ol > li::before {
	content: counter(section) "." counter(subsection) "." counter(subsubsection) ". ";
	position: absolute;
	left: 0;
	width: 3.5em;
	text-align: right;
	padding-right: 0.25em;
}
/* Level 4 */
.main-content .decimal > li > ol > li > ol > li > ol > li {
	counter-increment: subsubsubsection;
	counter-reset: subsubsubsubsection;
	position: relative;
	margin-left: 0;
	padding-left: 4em;
}
.main-content .decimal > li > ol > li > ol > li > ol > li::before {
	content: counter(section) "." counter(subsection) "." counter(subsubsection) "." counter(subsubsubsection) ". ";
	position: absolute;
	left: 0;
	width: 4em;
	text-align: right;
	padding-right: 0.25em;
}
/* Level 5 */
.main-content .decimal > li > ol > li > ol > li > ol > li > ol > li {
	counter-increment: subsubsubsubsection;
	position: relative;
	margin-left: 0;
	padding-left: 4.5em;
}
.main-content .decimal > li > ol > li > ol > li > ol > li > ol > li::before {
	content: counter(section) "." counter(subsection) "." counter(subsubsection) "." counter(subsubsubsection) "." counter(subsubsubsubsection) ". ";
	position: absolute;
	left: 0;
	width: 4.5em;
	text-align: right;
	padding-right: 0.25em;
}

/* Bottom navigation UL fix */

.pagination .page-item {
	list-style: none;
}

.pagination .page-link {
    font-size: 20px;
    font-family: 'Roboto Condensed';
	padding: 5px 30px;
}




/***********************************************************************/
/* IMAGES (content)                                                    */
/***********************************************************************/

.imgnofloat {
	width: 100%;
	max-width: 100%;
	height: auto;
}

/* left and right image floats */
.img-left,
.image-left,
.img-right,
.image-right {
	background: #fff;
	border: 0;
	max-width: 50%;
	padding: 10px;
	text-align:center;
}

.img-right,
.image-right {
	float: right;
	margin: 0px 0px 30px 30px;
}

.img-left,
.image-left {
	float:  left;
	margin: 0px 30px 30px 0;
}


/* left and right scaled image floats */
.img-left-35,
.image-left-35,
.img-left-45,
.image-left-45,
.img-right-35,
.image-right-35,
.img-right-45,
.image-right-45 {
	background: #fff;
	border: 1px solid #999;
	padding: 10px;
	text-align:center;
	margin-bottom: 10px;
}

.img-left-35,
.image-left-35,
.img-left-45,
.image-left-45 {
	float: left;
	margin: 0 30px 30px 0;
}

.img-right-35,
.image-right-35,
.img-right-45,
.image-right-45 {
	float: right;
	margin: 0 0 30px 30px;
}

.img-left-35,
.image-left-35,
.img-right-35,
.image-right-35 {
	width: 35%;
}

.img-left-45,
.image-left-45,
.img-right-45,
.image-right-45 {
	width: 45%;
}

/* contain scaled images */
img {
	max-width:100%;
	height:auto !important;
}



figure.caption-img.align-left {
	margin-right: 25px;
}

.box-psu-ad .img-left,
.box-psu-ad .image-left {
	border: 0;
	margin-bottom: 15px;
}



/* class names exist in both permutations */
.img-center,
.image-center {
	width: 100%;
	background: #fff;
	border: 1px solid #999;
	border-radius: 0;
	text-align: center;
	margin-top: calc(var(--space-unit) * 1);
	margin-bottom: calc(var(--space-unit) * 1.5);
	display: inline-block;
	padding: 20px; /* try padding here not on contained objects */
}

.box-keyskill iframe,
.img-center iframe,
.image-center iframe {
	display: block;
	margin: 0;
}

.video-wrapper > p:first-child {
	margin: 0;
}

.img-center > :last-child,
.image-center > :last-child {
	margin-bottom: 0 !important;
}

.img-center + p,
.image-center + p,
.img-center + h4,
.image-center + h4 {
	margin-top: calc(var(--space-unit) * 3);
}

.img-center p + .img-credit,
img + .img-credit,
a + .img-credit  {
	margin-top: calc(var(--space-unit) * 3);
}

.img-center > p:first-child > iframe,
.image-center > p:first-child > iframe {
	margin-bottom: 0;
}

.img-center img + img {
	/* hack for two images in a box */
	margin-top: 20px;
}

.img-center  > p:first-child,
.image-center  > p:first-child {
	margin-bottom: 0;
}



.img-credit,
.image-credit {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: initial;
	font-style: italic;
	line-height: var(--line-height-tight);
	padding: 0;
	text-align: center;
 }

.img-center .img-credit,
.img-center  .image-credit,
.img-center  .credit /* #hack */ {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: initial;
	font-style: italic;
	line-height: var(--line-height-tight);
	padding: 0;
	text-align: center;
	margin-bottom: 0;
 }

/* #hack covers multiple spellings of img and image */
.img-center .img-caption .img-credit,
.img-center .image-caption .image-credit {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: initial;
	font-style: italic;
	line-height: var(--line-height-tight);
	padding: 0;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
 }

.img-credit .collapse,
.image-credit .collapse  {
	border-radius: 0;
	font-family: var(--font-condensed);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	margin: 1rem 0 0 0;
	text-align: left;
}

.img-center .collapse + .img-credit,
.image-center .collapse + .image-credit {
	margin-top: calc(var(--space-unit) * 1);
}




.main-content .collapse {
	transition: opacity 6s ease;
	opacity: 0;
}

.main-content .collapse.show {
	opacity: 1;
	margin-top: 1rem;
}

.main-content .collapse:has(+ p) {
	margin-bottom: calc(var(--space-unit) * 2);
}

.main-content .block-system-main-block .card {
	border-radius: 0 !important;
}


.main-content .block-system-main-block .card-body {
	padding: calc(var(--space-unit) * 2);
}



.img-center .card,
.image-center .card {
	border-radius: 0;
	margin: 20px;
	padding: 20px;
	text-align: left;
}


img + .image-credit,
img + .img-credit {
	margin-bottom: calc(var(--space-unit) * 1.5);
	margin-top: calc(var(--space-unit) * 1.5);
}


/* #hack for two images in img-center or image-center */
.image-center > p:nth-of-type(2):has(img),
.img-center > p:nth-of-type(2):has(img) {
	/* has pseudo questionable */
	margin-top: 1rem;
}

.img-center > :last-child:not([class$="caption"]):not([class$="credit"]),
.image-center > :last-child:not([class$="caption"]):not([class$="credit"]),
.img-caption > :last-child,
.image-caption > :last-child,
.img-credit > :last-child,
.image-credit > :last-child {
	margin-bottom: 0;
}




/***********************************************************************/
/* Image Decorative                                                    */
/***********************************************************************/
.image-decorative-100 {
	width: 100%;
	margin-top: calc(var(--space-unit) * 3);
	margin-bottom: calc(var(--space-unit) * 3);
}

.image-decorative {
	margin-top: calc(var(--space-unit) * 3);
	margin-bottom: calc(var(--space-unit) * 3);
}






/***********************************************************************/
/* Book Navigation                                                     */
/***********************************************************************/
.book-navigation {
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-normal);
	margin-bottom: calc(var(--space-unit) * 5);
	margin-top: calc(var(--space-unit) * 5);
	padding-top: 0;
}

.book-navigation .menu {
	padding-bottom: 0;
	padding-top: 0;
}

.book-navigation .menu {
	border-top: 0;
}

.book-navigation li {
	margin-bottom: 0;
	padding-bottom: 0;
}

.book-navigation li a {
	text-decoration: underline;
}
.book-navigation li a:active,
.book-navigation li a:hover,
.book-navigation li a:focus {
	background: #ffffcc;
	text-decoration: none;
	color: #660099;
	border-bottom: 2px solid #660099;
}

.book-navigation li a:visited {
	color: #660099;
}

.book-navigation li a:active .node_is_hidden,
.book-navigation li a:hover .node_is_hidden,
.book-navigation li a:focus .node_is_hidden {
	background: #ffffcc;
	text-decoration: none;
	color: #660099;
	border-bottom: 2px solid #660099;
}

/* fix for hidden nodes css overwrite of edit tabs */
aside .tabs .nav-tabs .nav-item .node_is_hidden {
	  display: block;
	  padding: .5rem 1rem;
	  border: 1px solid transparent;
	  border-top-left-radius: .25rem;
	  border-top-right-radius: .25rem;
	  color: #495057;
	  background-color: #fff;
	  border-color: #dee2e6 #dee2e6 #fff;
}

.menu .menu-item a.node_is_hidden:hover,
.menu .menu-item a.node_is_hidden:active,
.menu .menu-item a.node_is_hidden:visited {
	text-decoration: line-through;
}

ul.menu li.menu-item {
	margin-bottom: 0;
}

#block-oerstatus {
	padding: 40px;
}

#navbar-main {
	background: #4c4c4c;
}

.navbar-brand {
	color: #fff;
}
.navbar {
	padding: .5rem 1rem .5rem 1rem;
}

#edit-submit {
	font-weight: var(--font-weight-xbold);
	margin-left: 5px;
}


/* BREADCRUMBS - override of breadcrumbs.css */
.breadcrumb,
ol.breadcrumb,
.orphanbreadcrumb {
	position: relative;
	display: flex;  /* <- Use regular flex instead */
	flex-wrap: wrap;
	align-items: center;
	padding: 10px 20px!important;
	margin-left: 0 !important;
	margin-top: 0 !important;
	margin-bottom: calc(var(--space-unit) * 3);
	background: #efefef;
	width: 100%;
	list-style: none;
}

.orphanbreadcrumb { list-style: none !important; margin: 0; padding: 0; }

/* Hide the first breadcrumb item (e.g., Home) - temporary #hack */
ol.breadcrumb li.breadcrumb-item:first-child {
    display: none;
}

/* Hide items with empty links */
ol.breadcrumb li.breadcrumb-item a:empty {
    display: none;
}

/* Show first item when there are only 2 items and second is empty */
ol.breadcrumb:has(li:nth-child(2) a:empty) li.breadcrumb-item:first-child {
    display: list-item;
}


/* Remove the slash on the new first visible item */
ol.breadcrumb li.breadcrumb-item:nth-child(2)::before {
	content: none;
}

ol.breadcrumb:has(li.breadcrumb-item:only-child) {
	display: none;
}


li.breadcrumb-item,
li.orphanbreadcrumb-item {
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	padding: 0;
	margin-bottom: 0 !important;
	white-space: nowrap;  /* Prevents text wrapping within items */
	flex-shrink: 0;       /* Prevents items from shrinking */
	margin-right: 0.5rem; /* horizontal spacing only */
}


.breadcrumb-item+.breadcrumb-item {
	padding-left: 0;
}

.breadcrumb-item + .breadcrumb-item::before {
	content: " / ";
	color: #555;
}

/* commented out, affecting navbigation
.content > nav:first-of-type {
	margin-bottom: calc(var(--space-unit) * 3);
}
*/




/* Utility Styles */
.text-highlight { color: #eb0000; }
.background-highlight { background-color: #ffd100; }
.faculty-note { color: #bd0000; background-color: #ffe675; font-size: var(--font-size-large); }
.clearfix { clear:both;}


.box-casestudy,
.box-explore,
.box-keyskill,
.box-minute,
.box-motivate,
.box-prioritize,
.box-quizyourself,
.box-read,
.box-watch,
.box-wxchallenge {
	background: #fff;
	border: 1px solid #0033a7;
	border-radius: 0;
	margin-bottom: 20px;
	padding: 25px 25px 25px 25px;
}

.header-motivate,
.header-prioritize,
.header-read,
.header-explore,
.header-keyskill,
.header-casestudy,
.header-quizyourself,
.header-watch,
.header-minute,
.header-wxchallenge {
	height: 65px !important;
	padding-left: 80px !important;
	margin-top: 10px;
}

.header-motivate { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-motivate-box.png) no-repeat left top !important; border:0; }
.header-prioritize { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-prioritize-box.png) no-repeat left top !important; border:0; }
.header-read { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-reading-box.png) no-repeat left top !important; border:0; }
.header-explore { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-explore-box.png) no-repeat left top !important; border:0; }
.header-keyskill { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-keyskill-box.png) no-repeat left top !important; border:0; }
.header-casestudy { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-casestudy-box.png) no-repeat left top !important; border:0; }
.header-quizyourself { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-quizyourself-box.png) no-repeat left top !important; border:0; }
.header-watch { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-watch-box.png) no-repeat left top !important; border:0; }
.header-minute { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-minute-box.png) no-repeat left top !important; border:0; }
.header-wxchallenge { background:url(https://courseware.e-education.psu.edu/dutton_drupal_theme_images/meteo_icons/icon-wxchallenge-box.png) no-repeat left top !important; border:0; }


figure.align-left.medium_300_copyright {
	border:0px rgb(47, 0, 255) solid;
	min-width: 150px;
	padding: 0;
	margin: 0 40px 60px 0;
	display: inline-block;
}

figure.align-left.medium_300_copyright img {
	width:300px;
}

figure.align-left.medium_300_copyright figcaption,
figure.align-left.medium_300_copyright .license_blurb  {
	max-width: 300px;
	padding: 0;
}

figure.align-left.medium_300_copyright figcaption {
	padding-bottom: 10px;
	font-size: .9em;
}

figure.align-left.medium_300_copyright .license_blurb {
	font-style: italic;
	font-size: .8em;
	padding-bottom: 20px;
	border-bottom: 12px solid #d1d1d1;
	border-bottom-left-radius: 10px 10px;
	border-bottom-right-radius: 10px 10px;
}

.main-content textarea {
	display:block;
	min-height: 40px;
	overflow: auto;
	resize: vertical;
	width: 100%;
	margin-bottom: 10px;
}




figure.align-right.medium_300_copyright  {
	border:0px rgb(47, 0, 255) solid;
	min-width: 150px;
	padding: 0;
	margin: 0 0 60px 40px;
	display: inline-block;
}

figure.align-right.medium_300_copyright img {
	width:300px;
}

figure.align-right.medium_300_copyright figcaption,
figure.align-right.medium_300_copyright .license_blurb  {
	max-width: 300px;
	padding: 0;
}

figure.align-right.medium_300_copyright figcaption {
	padding-bottom: 10px;
	font-size: .9em;
}

figure.align-right.medium_300_copyright .license_blurb {
	font-style: italic;
	font-size: .8em;
	padding-bottom: 20px;
	border-bottom: 12px solid #d1d1d1;
	border-bottom-left-radius: 10px 10px;
	border-bottom-right-radius: 10px 10px;
 }

.align-center.media_image_embed  {
	margin: 60px 0 0 0;
}

.align-center.media_image_embed .field--type-image {
	float:none;
}

.align-center.media_image_embed img {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

figure.align-center.media_image_embed figcaption  {
	padding-bottom: 10px;
	font-size: .9em;
}

.image-center .license_blurb {
	font-style: italic;
	font-size: .8em;
	padding-bottom: 20px;
	border-bottom: 12px solid #d1d1d1;
	border-bottom-left-radius: 10px 10px;
	border-bottom-right-radius: 10px 10px;
	margin-bottom: 60px;
 }

 .main-content .card-body {
	background: #efefef;
	font-style: initial;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: 2rem;
	font-weight: var(--font-weight-normal);
	margin-top: calc(var(--space-unit) * 2);
	margin-bottom: calc(var(--space-unit) * 2);
}


.main-content .card-body p {
	font-style: initial;
	font-family: var(--font-serif);
	font-size: var(--font-size-base)!important;
	line-height: 2rem;
	font-weight: var(--font-weight-normal);
}

.main-content .img-center .card-body,
.main-content .image-center .card-body {
	font-style: initial;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: 2rem;
	font-weight: var(--font-weight-normal);
	margin-bottom: calc(var(--space-unit) * 2);
}

.main-content .img-center .card-body p,
.main-content .image-center .card-body p {
 background: inherit;
 font-style: initial;
 font-family: var(--font-serif);
 font-size: var(--font-size-base);
 line-height: 2rem;
 font-weight: var(--font-weight-normal);
}

.main-content .img-center .card-body blockquote p {
	background: inherit;
 }

 .main-content tr .card-body  {
	background: #fff;
 }


.main-content .card-body p + ul {
	margin-top: calc(var(--space-unit) * 1);
}

.main-content .img-caption .card-body,
.main-content .image-caption .card-body {
	margin-top: calc(var(--space-unit) * 2);
}

.main-content .card-body > :first-child {
	margin-top: 0px;
}

/* Attempt to remove bottom margin from last item in toggler cards */
.main-content .card-body .clicktip > :last-child,
.main-content .card-body > div > :last-child,
.main-content .card-body > :last-child  {
	margin-bottom: 0 !important;
}

.btn + .collapse .card-body {
    margin-top: 0;
}

.main-content .card-body .clicktip > :first-child {
	margin-top: 0;
}

.node .field--type-image {
	margin: 0;
}


/* LEFT NAV */

#block-booknavigation {
	background: #e9ecef;
}

#block-booknavigation .menu,
#block-booknavigation li,
#block-booknavigation li a {
	font-size: 15px;
	line-height: 1.4;
}

#block-booknavigation .menu {
	text-indent: -12px;
	margin-left: 0;
	padding-inline-start: 20px;
	padding-inline-end: 20px;
}

#block-booknavigation li {
	list-style: none;
	list-style-position: outside;
}

#block-booknavigation li.menu-item--collapsed::before {
	content: "\25B8";
}

.sidebar_first li.menu-item--expanded::before {
	content: "\25BE";
}

#block-booknavigation .menu .menu-item--expanded .menu li.menu-item::before {
	content: "\25AA";
}

.site-footer__bottom {
	max-width: 100%;
	padding: 0 50px;
}


/* RESPONSIVE FIXES */
.navbar-brand {
	white-space: inherit;
}

.container-fluid {
	padding-right: 0;
	padding-left: 0;
}


/* BRANDING HEADER */

.header-topbar {
	background: #172f56;
}

#navbar-top {
	background: #172f56;
	min-height: 90px;
}

.header-topbar2 .container  {
	margin-left:auto;
	margin-right:auto;
	position: relative;
	width: 95%;
}

#block-headinbgbranding {
	flex: 1 1 auto;
}

.header-btn-collapse-nav {
	display: none;
}



/* UI header styles */

.course-title {
	font-family: var(--font-sans);
	font-weight: var(--font-weight-light);
	font-size: 24px;
	color: #fff;
}

.course-title a,.course-title a:hover  {
	text-decoration: none;
	color: #fff;
}


/* SVG logos - Penn State EMS, Dutton */

.dutton-logo p a img,
.penn-state-ems-logo p a img {
	width: 202px !important;
	height: auto;
}

.penn-state-ems-logo svg {
	width: 205px !important;
	height: auto !important;
	max-width: 205px;
}

.dutton-logo svg {
	width: 400px !important;
	height: auto !important;
	max-width: 205px;
}

.dutton-logo .pugh-blue,
.penn-state-ems-logo .pugh-blue {
	fill: #96bee6 !important;
}

.dutton-logo .white,
.penn-state-ems-logo .white {
	fill: #fff !important;
}

.dutton-logo .beaver-blue,
.penn-state-ems-logo .beaver-blue {
	fill: #1e407c !important;
}

.dutton-logo .clickable-area,
.penn-state-ems-logo .clickable-area {
	cursor: pointer;
	transition: opacity 0.2s ease;
}

.dutton-logo .clickable-area:hover,
.penn-state-ems-logo .clickable-area:hover {
	opacity: 0.8;
}


/* Invisible hit areas */
.dutton-logo .hit-area,
.penn-state-ems-logo .hit-area {
	fill: transparent;
	cursor: pointer;
}


.search-bar {
	align-items: center; /* Aligns items vertically centered */
	display: flex;
	justify-content: space-between; /* Adjusts spacing between the items */
}

.course-login  {
	color: #fff;
	display: inline;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--font-weight-bold);
	margin-right: 20px;
}

.course-login  a {
	color: #fff;
}
.course-login  a:hover,
.course-login  a:active {
	color: #ffff00;
}

.course-login {
	color: #fff;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--font-weight-bold);
}

.department-title p:first-of-type {
	margin: 0;
	padding: 0;
}

.department-of {
	color: #fff;
	font-family: var(--font-condensed);
	font-size: 20px;
	font-weight: var(--font-weight-light);
	letter-spacing: 5px;
	margin: 0;
	text-align: right;
	text-transform: uppercase;
}

.department-name {
	font-family: var(--font-condensed);
	font-weight: var(--font-weight-normal);
	font-size: 2.25em;
	color: #fff;
	text-align: right;
	margin: 0;
	margin-top: -10px;
}

.department-of a,
.department-name a {
	text-decoration: none;
	color: #fff;
}

.department-of a:hover,
.department-name a:hover {
	text-decoration: none;
	color: #fff;
}

.dutton-logo {
	border: 0;
	padding-left: 25px;
}

.dutton-logo img {
	width: 200px;
	height: auto;
}

.featured-bottom {
	margin-top: calc(var(--space-unit) * 10);
	background: #232e46;
	padding: 25px;
}

.partners-title {
	font-family: var(--font-condensed);
	font-weight: var(--font-weight-medium);
	font-size: 24px;
	color: #fff;
}

.partners {
	text-align: center;
	background: #2a3551;
	padding: 20px;
}

.partners img {
	margin: 0 50px;
}

.course-authors, .oer-statement, .dutton-links, .accessibility-statement,
.course-authors p, .oer-statement p, .dutton-links p, .accessibility-statement p {
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--font-weight-normal);
}

.course-authors, .dutton-links, .oer-statement {
	margin-top: 0;
}

.course-authors p:last-of-type,
.dutton-links p:last-of-type,
.oer-statement p:last-of-type,
.accessibility-statement p:last-of-type {
	margin-bottom: 0;
}

.site-footer {
	background: #14161e;
	bottom: 0;
	display: flow-root; /* clear internal floats */
	flex-shrink: 0;  /* Prevents footer from shrinking */
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

.region-footer-second p a {
	color: #80a9d5;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--font-weight-normal);
	text-decoration: underline;
}

.region-footer-second p a:hover,
.region-footer-second p a:focus,
.region-footer-second p a:active {
	border-bottom: 2px solid #ffff00;
	color: #ffff00 !important;
	text-decoration: none;
}

.region-footer-third {
	padding-right: 25px;
}

.dutton-links p a,
.oer-statement p a {
	color: #80a9d5;
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: var(--font-weight-normal);
	text-decoration: underline;
 }

.oer-footer-image:hover {
	border: 0 !important;
}

#block-base-course-theme-duttonlinks {
	padding-top: 0;
}

.site-footer > .container > .row:first-of-type {
	background: #131e36;
}

.site-footer > .container > .row:last-of-type {
	background: #000;
}

.site-footer__top {
	background: #202634;
}

.site-footer__top .row {
	margin-top: 20px;
}

.site-footer .block {
	margin: 0 20px 20px;
	border: 0;
	padding: 10px;
}

.site-footer {
	padding-top: 20px;
}

.site-footer,
.site-footer .container,
.site-footer .container .row {
	max-width: 100%;
}

.site-footer .container .row {
	margin-left: 0;
	margin-right: 0;
}

.site-footer section {
	padding-top: 20px;
}

.oer-statement img {
	width: 150px;
	height: auto;
}

.department-image img {
	width: 680px;
	height: auto;
}

.site-footer .content {
	color: #fff;
	font-size: var(--font-size-small);
}

.site-footer .container {
	margin: 0;
	max-width: 100% !important;
	padding: 0;
}

.site-footer__bottom {
	border-top: 5px solid #4f5056;
	margin: 0;
	padding: 0;
	width: 100%;
}

.site-footer__bottom .region-footer-fifth {
	margin: 0;
	width: 100%;
}

.region-footer-fifth div {
	margin: 0;
	width: 100%;
}

.penn-state-footer {
	color: #fff;
	display: flex;
	font-family: var(--font-sans);
	font-size: var(--font-size-smaller);
	justify-content: center;
	padding: 30px 0 40px;
}

.penn-state-footer p:last-of-type {
	margin-bottom: 0;
}

.penn-state-footer a {
	text-decoration: underline;
}

.penn-state-footer img {
	margin-right: 20px;
}

.block-simple-blockpenn-state-footer {
	margin: 0 !important;
}

.footer-container {
	align-items: start;
	display: flex;
	justify-content: space-between;
	margin: 0;
	max-width: 80%;
}

.footer-container p {
	margin: 0;
	margin-bottom: 5px;
}

.footer-logo {
	max-width: 300px;
}

.footer-left {
	text-align: left;
	width:45%
}

.footer-right {
	text-align: right;
	width:45%
}

.footer-container a {
	color: #ffffff;
	text-decoration: underline;
}

.site-footer a:hover,
.site-footer a:focus,
.site-footer a:active {
	border-bottom: 2px solid #ffff00;
	color: #ffff00 !important;
	text-decoration: none;
}

.site-footer .dutton-logo a:hover,
.site-footer .dutton-logo a:focus,
.site-footer .dutton-logo a:active {
	border-bottom: 0;
	text-decoration: none;
}


/***********************************************************************/
/* Search Results                                                      */
/***********************************************************************/

.search_exclude_node_search-results {
	padding: 0 !important;
	margin-bottom: calc(var(--space-unit) * 3);
}

.search_exclude_node_search-results .list-group-item {
	border: none !important;
	margin-bottom: calc(var(--space-unit) * 2.5);
	padding: 0;
}

.search_exclude_node_search-results .list-group-item h3 {
	margin: 0;
	background: none;
	padding: 0;
}

.search_exclude_node_search-results .list-group-item h3 a:hover,
.search_exclude_node_search-results .list-group-item h3 a:active,
.search_exclude_node_search-results .list-group-item h3 a:focus {
	border-bottom: none !important;
}

.search_exclude_node_search-results .list-group-item h3:hover,
.search_exclude_node_search-results .list-group-item h3:active,
.search_exclude_node_search-results .list-group-item h3:focus {
	color: #660099 !important;
	text-decoration: none;
}

.js-pager__items li {
	float: left;
}

.main-content .search-form .js-form-submit {
	background: #0572E6;
	border-radius: 0;
	border: none;
	font-family: var(--font-sans) !important;
	font-size: var(--font-size-small);
	font-style: normal;
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	margin-bottom: 0;
	padding: 7px 20px;
	text-transform: uppercase;
	white-space: normal;
}

.details-wrapper {
	background: #efefef;
	padding: 10px 20px;
	margin-top: 10px;
}

.details-wrapper legend {
	font-family: var(--font-sans);
	font-size: 1.5rem;
	font-weight: var(--font-weight-medium);
}

/***********************************************************************/
/* Development Note                                                    */
/***********************************************************************/

.dev-note::before {
	content: "DEVELOPMENT NOTE:";
	font-weight: var(--font-weight-bold);
	color: #ff0000;
	display: block;
	margin-bottom: 20px;
}
.dev-note {
	border: 5px dashed #ff0000;
	padding: 20px;
	margin: 10px 0;
	font-weight: var(--font-weight-bold);
	color: #ff0000;
}

/***********************************************************************/
/* SVG External Link Icon                                              */
/***********************************************************************/

svg.ext {
	padding: 0 4px;
	margin: 0;
	width: 22px;
	height: 22px;
	fill: #000;
	font-weight: 900;
}

.oer-statement svg.ext {
	padding: 0 4px;
	margin: 0;
	width: 22px;
	height: 22px;
	fill: #fff;
	font-weight: 900;
}


/***********************************************************************/
/* Accordions - CKEditor and D7 version                                */
/***********************************************************************/

.ckeditor-accordion-container > dl dt.active > a {
	background-color: #0572E6;
}

/* contents */
.ckeditor-accordion-container > dl dd {
	display: none;
	padding: 10px;
	/* margin: 0; */
}

.ckeditor-accordion-container > dl dd > .img-center,
.ckeditor-accordion-container > dl dd > .image-center {
	margin-top: 0;
	margin-bottom: 0;
}

.main-content .ui-accordion-header,
.ckeditor-accordion-container > dl dt > a,
.ckeditor-accordion-container > dl dt > a:not(.button) {
	font-family: var(--font-condensed);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	font-size: 24px;
	text-decoration: none;
	color: #000;
	display: block;
	padding: 10px 15px 10px 50px;
	background-color: #b8c5e5;
	/* background-color: #0572E6; prev color */
	cursor: pointer;
	-webkit-transition: background-color 300ms;
	transition: background-color 300ms;
	border-bottom: 1px solid #fff;
}

.ui-accordion .ui-accordion-content,
.ckeditor-accordion-container > dl dd {
	border: 1px solid #b8c5e5;
}

.ui-accordion-content ul, 
.ui-accordion-content ul li, 
#page .ui-widget {
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
}

.main-content .ui-accordion-header {
	padding-left: 20px;
}

.main-content .ui-accordion-header:hover,
.ckeditor-accordion-container > dl dt > a:hover,
.ckeditor-accordion-container > dl dt > a:not(.button):hover {
	background-color: #98B0EC;
	color: #000;
	/* background-color: #0256b1; prev color */
}




.main-content .ui-accordion .ui-accordion-header {
	margin: 0;
}

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br,
.ui-corner-left,
.ui-corner-bl,
.ui-corner-top,
.ui-corner-tr,
.ui-corner-tl {
	  border-radius: 0;
}

.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before,
.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:after {
	background: #000;
}


/* Prism css overrides */
/* LINE NUMBERS WORK:
	 Reset the counter for each <pre> element */

pre.line-numbers {
	counter-reset: line;
	position: relative;
	padding-left: 40px; /* Space for the line numbers */
	margin-bottom: calc(var(--space-unit) * 2);
}

/* Style for each <code> line */
pre.line-numbers code {
	display: block;
	white-space: pre-wrap;
	font-family: var(--font-mono);
}

/* Style to bold keywords in python */
.line-numbers .keyword {
	font-weight: var(--font-weight-xbold) !important;
}







div[class^="box-"] > :first-child { margin-top: 0; }
div[class^="box-"] > :last-child { margin-bottom: 0; }

td > :last-child {
	margin-bottom: 0 !important;
}

.main-content iframe + p,
.main-content iframe + script + p {
	margin-top: 20px;
}







/***********************************************************************/
/* Partnerships                                                        */
/***********************************************************************/

/* Parent container */
.partner-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap; /* Allows wrapping for smaller screens */
	padding: 20px;
}

/* Individual logo divs */
.logo-item {
	display: flex;
	justify-content: center; /* Center content horizontally */
	align-items: center; /* Center content vertically */
	padding: 0 15px;
}

.logo-item img {
	max-width: 100%;
	height: auto;
}






/***********************************************************************/
/* Migration review #hacks for helping find issues                    */
/***********************************************************************/
.img-center:empty,
.image-center:empty {
	border:2px solid #008000;
	height: 25px;
	font-size: 14px;
}

.img-center:empty::before,
.image-center:empty::before {
	content: "Empty image center";
}

h3:empty {
	border:2px solid #ff0000;
	height: 25px;
	font-size: 14px;
}

h3:empty::before {
	content: "Empty H3";
}

h4:empty {
	border:2px solid #ff0000;
	height: 25px;
	font-size: 14px;
}

h4:empty::before {
	content: "Empty h4";
}

p:empty {
	border:2px solid purple !important;
	font-size: 14px !important;
	height: 25px !important;
}

p:empty::before {
	content: "Empty P tag";
}

/* Hide the chrome accessibility helper div */
#awebChromeHelper { display: none !important; }



/* Hide div created by Ckeditor escape hack */
.ck-reset_all {
	display:none
}

/* Flex container CSS for multiple vertically aligned top columns */
.flex-container {
    display: flex;
    gap: 1rem;
    margin: 0;
    padding: 0;
    align-items: flex-start;
}

.flex-container > * {
    flex: 1; /* Each child gets equal width automatically */
    box-sizing: border-box;
    padding: 1rem;
    border: none;
    background: none;
}








/************************************************************************/
/* New toggler with details and summary                                 */
/* Still relies on img-center img-caption img-credit                    */
/************************************************************************/

.toggle-container {
  display: flex;
  flex-direction: column;
  gap: 1em;
  margin: 2em auto;
}

.toggle-button {
	background: #0572E6;
	border-radius: 4px;
	border: none;
	color: #fff !important;
	cursor: pointer;
	display: inline-block;   /* <-- this is the key */
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-style: normal;
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	margin-bottom: calc(var(--space-unit) * 2);
	margin-top: calc(var(--space-unit) * 2);
	padding: 10px 20px !important;
	text-decoration: none !important;
	transition: background 0.2s ease;
	white-space: nowrap;    
}

.toggle-button:hover {
	background-color: #0256b1;
	text-decoration: none !important;
	padding: 10px 20px !important;
	border: none !important;
}

.toggle-content {
	background: #efefef;
	border-radius: 0;
	display: none;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	font-style: initial;
	font-weight: var(--font-weight-normal);
	line-height: 2rem;
	margin-bottom: calc(var(--space-unit) * 2);
	margin-top: calc(var(--space-unit) * 2);
	padding: 1em;
}

:target .toggle-content {
	display: block;
}

details > summary.toggle-button:focus-visible {
  outline: 3px solid #111;  
  outline-offset: 3px;
}

details > summary.toggle-button:focus {
  outline: 3px solid #111;
  outline-offset: 3px;
}

details + p {
    margin-top: 20px;
}


/************************************************************************/
/* MEDIA class revamp                                                   */
/************************************************************************/

/* Container set */
.media,
.media-center,
.media-left,
.media-right,
.media-left,
.media-right {
	display: block;
	background: #fff;
	border-radius: 0;
	margin-bottom: calc(var(--space-unit) * 1.5);
}

/* Container set */
.media,
.media-center {
	margin-top: calc(var(--space-unit) * 1);
}

.media-center {
	border: 1px solid #999;
	padding: 0 20px 20px 20px;
}


/* Centers */
.media,
.media-center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* Image floats */
.media-left {
	float: left;
	text-align: center;
	margin-right: 20px;
}

.media-right {
	float: right;
	text-align: center;
	margin-left: 20px;
}

.media-left,
.media-right {
	border: none;
	background: none;
	padding: 0;
}


/* Float width variants */
.media-35 {
	width: 35%;
	border: 1px solid #999;
	padding: 20px;
}

.media-45 {
	border: 1px solid #999;
	padding: 20px;
	width: 45%;
}



/* iFrame sizing */
.media > video,
.media-frame > iframe {
	display: block;
	width: 100%;
	height: auto;
	border: 0;
	margin-left: auto;
	margin-right: auto;
}

.media-frame video {
	width: 100% !important;
	height: auto !important;
}

.media-frame {
	position: relative !important;
	padding-bottom: 56.25% !important;
	height: 0 !important;
	z-index: 499 !important;
}

.media-frame iframe,
.media-frame object,
.media-frame embed {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	min-height: 100% !important;
}



/* Caption & Credits */
.media-caption {
	  font-size: var(--font-size-small);
	  font-weight: var(--font-weight-bold);
	  line-height: var(--line-height-tight);
	  padding: 0;
	  margin-bottom: 0;
	  font-family: var(--font-sans);
	  text-align: center;
}

.media-credit {
	  font-family: var(--font-sans);
	  font-size: var(--font-size-small);
	  font-weight: initial;
	  font-style: italic;
	  line-height: var(--line-height-tight);
	  padding: 0;
	  text-align: center;
	  margin-bottom: 0;
}

/* Nested credit links */
.media-credit a {
	color: inherit;
}

.media-toggle {
	background: #0572E6;
	border-radius: 4px;
	border: none;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-tight);
	padding: 10px 20px;
	text-decoration: none;
	transition: background 0.2s ease;
	white-space: nowrap;
}

.media-toggle:hover {
	background-color: #0256b1;
}

.media-toggle:focus,
.media-toggle:focus-visible {
	outline: 3px solid #111;
	outline-offset: 3px;
}

.media-panel {
	background: #efefef;
	border-radius: 0;
	font-family: var(--font-serif);
	font-size: var(--font-size-base);
	line-height: 2rem;
	padding: 1em;
	text-align: left;
}

.media-panel > *:first-child {
  margin-block-start: 0;
}

.media-panel > *:last-child {
  margin-bottom: 0;
}

.media-caption, .media-credit, .media-disclosure, .media-panel, .media-credit {
	margin-top: 20px;
}



/* Hide disclosure content until opened */
.media-disclosure > .media-panel {
	display: none;
}

.media-disclosure[open] > .media-panel {
	display: block;
}


/************************************************************************/
/* Details and Summary                                                  */
/************************************************************************/

/* Focus accessibility */
details > summary.media-toggle:focus,
details > summary.media-toggle:focus-visible {
	outline: 3px solid #111;
	outline-offset: 3px;
}

/* Summary underline */
details > summary.media-toggle:hover {
	text-decoration: underline;
}

/* Hide marker */
details.media-disclosure > summary.media-toggle::-webkit-details-marker {
	display: none;
}

/* Disclosure open/close transition */
.media-disclosure[open] > .media-panel {
	animation: mediaOpen 0.25s ease-out;
}

@keyframes mediaOpen {
	from { opacity: 0; transform: translateY(-0.25rem); }
	to   { opacity: 1; transform: translateY(0); }
}




/************************************************************************/
/* Responsive Media queries                                             */
/************************************************************************/

/* Reset floats on Mobile to stack */
@media (max-width: 767px) {
	.main-content .media-left,
	.main-content .media-right {
	  float: none;
	  width: 100%;
	  max-width: 100%;
	  margin-left: 0;
	  margin-right: 0;
	}
}

/* Desktop overrides to ensure floats */
@media (min-width: 768px) {
	.main-content .media-left {
	  float: left;
	  margin-right: 30px;
	}

	.main-content .media-right {
	  float: right;
	  margin-left: 30px;
	}

	.main-content .media-35 {
		width: 35%;
		border: 1px solid #999;
	}

	.main-content .media-45 {
	  width: 45%;
		border: 1px solid #999;
	}
}


/************************************************************************/
/* ACCESSIBILITY additions.                                             */
/************************************************************************/

.blank {
  display: inline-block;
  width: 7ch;
  border-bottom: 2px solid #000;
  margin: 0 0.25em;
}








/************************************************************************/
/* MOBILE size responsiveness styles                                    */
/************************************************************************/


/* Screen size 768px and larger                                         */
/************************************************************************/
@media (min-width: 768px) {
	.main-content ol,.main-content ul {  margin-left: 1.5em;  padding-left: 1.5em;}
}
/* end min-width 768px ***************************************************/



/* Screen size 768px and smaller - generally mobile devices             */
/************************************************************************/
@media (max-width: 768px) {
	.layout-main-wrapper {
		margin-top: 20px;
		margin-bottom: 20px;
		padding: 1rem;
	}

	.layout-main-wrapper .container {
		max-width: 100% !important;
	}

	.main-content {
		width: 100%;
		flex: 0 0 100%;
		max-width: 100%;
		margin: 0;
		padding: 1rem;
	}

	.row {
		margin-left: 0;
		margin-right: 0;
	}

	header .navbar {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.region-secondary-menu,
	.navbar-form {
		width: 100%;
		display: flex;
		justify-content: center;
		margin: 10px 0;
	}

	.department-title {
		padding-right: 0;
	}

	.department-name {
		text-align: center;
		padding-right: 0;
		margin-top: 0;
		line-height: normal;
	}

	.department-title p:first-of-type {
		margin-top: 15px;
    	margin-bottom: 10px !important;	
		text-align: center;
		padding-right: 0;
		line-height: normal;
	}

	/* table scroll */
	.main-content table {
		display: block;
		overflow-x: auto;
		width: fit-content;
		max-width: 100%;
		-webkit-overflow-scrolling: touch; /* For older iOS */
		margin-left: auto;
		margin-right: auto;
	}

	.main-content {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.main-content .container .col-md-6 img {
		padding-bottom: 20px;
	}

	.partner-container {
		align-items: center;
		flex-direction: column;
	}

	.logo-item {
		padding: 20px 0;
	}

	.img-right {
		float: none;
		margin: 20px 0;
		max-width: 100%;
		width: 100%;
	}

	.box-activity-optional,
	.box-activity-required,
	.box-bibliography,
	.box-image-left,
	.box-note-orange,
	.box-note,
	.box-other,
	.box-psu-ad,
	.box-reading-optional,
	.box-reading-required {
		padding: 20px;
	}


	.book-navigation {
    	margin-top: calc(var(--space-unit) * 1);
	}

	.book-navigation .book-pager {
		margin-top: 0;
	}

	.book-navigation li {
		margin-bottom: 10px;
		padding-bottom: 0;
		float: none;
		width:100%;
		max-width: 100%;
	}

	.book-pager li {
		text-align: center;
	}

	.site-footer .block {
		margin: 0;
	}

	.site-footer section {
		padding-top: 0;
	}

	.region-footer-first {
		width: 100%;
		max-width: 100%;
		text-align: center;
		display: block;
		margin-top: 20px;
	}

	/* stack two column container vertically */
	.two-column-container {
		flex-wrap: wrap;
	}
	.column-left, .column-right {
		flex: 1 1 100%;
		gap: 0;
	}

	/* Mobile content margin/padding alternations */
	.img-center .card,
	.image-center .card {
		margin: 0;
		padding: 10px;
	}

	.main-content .img-caption .card-body,
	.main-content .image-caption .card-body {
		margin-top: 0;
	}

	.img-center, .image-center {
		padding: 10px;
	}

	.box-note .img-center, .box-note .image-center {
		padding: 0;
		border: none;
	}

	.box-note:after, .box-note-orange:after, .box-reading-required:after, .box-reading-optional:after, .box-activity-required:after, .box-activity-optional:after, .box-image-left:after, .box-psu-ad:after, .box-other:after {
		width: 5px;
	}

	.breadcrumb,
	.breadcrumb
	ol.breadcrumb {
		display: block !important;
		padding: 8px 10px;
		background: #efefef;
		font-family: var(--font-sans);
		font-size: 0.875rem;
		line-height: 1.4;
		margin: 0;
		margin-bottom: calc(var(--space-unit) * 2);
		list-style: none !important;
	}

	li.breadcrumb-item,
	li.orphanbreadcrumb-item {
		display: inline;
		margin: 0;
		padding: 0;
	}

	/* Hide the first breadcrumb item (e.g., Home) - temporary #hack */
	ol.breadcrumb li.breadcrumb-item:first-child {
		display: none;
	}
	
	.breadcrumb-item::before,
	.breadcrumb-item::after {
		content: "" !important;
		display: none !important;
	}

	/* Add separators to the a elements instead */
	.breadcrumb-item a,
	.orphanbreadcrumb-item a {
		color: inherit;
		text-decoration: none !important;
		display: inline;
	}

	.breadcrumb-item:not(:last-child) a::after {
		content: " / ";
		display: inline;
	}

	h1, h2, h3, h4, h5, h6 {
		word-break: keep-all;
		word-break: normal;
	}

	.search-block-form.form-row {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	#search-block-form .js-form-type-search {
		margin-bottom: 0 !important;
	}

	.search-block-form .form-control {
		width: 100%;
		box-sizing: border-box;
	}

	.search-block-form .btn {
		width: 100%;
		box-sizing: border-box;
	}

	.row>* {
		padding-left: 0;
	}
	#sidebar_first {
		padding: 0;
	}
	.sidebar .block {
		padding: 15px 0;
	}
	.search-block-form .container-inline {
		padding-left: 0;
		padding-right: 0;
	}


	.main-content .block-system-main-block .card-body {
		padding: 0;
	}

	/* General list spacing */
	.main-content ol, .main-content ul 				{ margin-top: 1em; margin-bottom: 1em; margin-left: 0.75em; padding-left: 0.75em; }
	.main-content li > ol, .main-content li > ul	{ margin-top: initial; margin-bottom: initial; margin-left: 0.75em; padding-left: 0.75em; }
	
	/* Flatten indentation beyond level 3 due to space */
	.main-content ol li li li, 
	.main-content ul li li li 			{ padding-left: 0.5em; list-style-position: inside; }
	
	.main-content ol li li li li, 
	.main-content ol li li li li li, 
	.main-content ul li li li li, 
	.main-content ul li li li li li 	{ list-style-type: none; padding-left: 0; margin-left: 0; }

	.main-content ul ul ul ul > li::before,
	.main-content ul ul ul ul ul > li::before {
		content: none;
	}

	.main-content ul ul ul ul,
	.main-content ol ol ol ol {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}
	.main-content ul ul ul ul ul,
	.main-content ol ol ol ol ol {
		margin-left: 0 !important;
		padding-left: 0 !important;
	}

	

	/* reduce indent to 25px from 50 */
	.indent {
		margin-left: 25px;
	}

}
/* end max-width 768px ***************************************************/






/* Screen size 1280px and smaller - generally tablets and mobile devices */
/*************************************************************************/
@media (max-width: 1280px) {

	/* #Hack to hide hamburger menu in primary menu area and show log in/log out link */
	/* This was done to avoid having to place the menu in a different block and       */
	/* re-configure the CSS and our theme at the late date.                           */

	.navbar-toggler.collapsed { display: none; }
	.navbar .collapse:not(.show) { display: flex !important; }

	#block-base-course-theme-useraccountmenu .nav .nav-item a.nav-link {
		text-transform: uppercase;
		color: #ffff00;
		text-decoration: underline;
	}

	/* reposiiton navigation below content */
	#main > .row {
		flex-wrap: wrap;
		flex-direction: column-reverse;
	}

	.sidebar-offcanvas {
		position: static;
		top: auto;
		width: 100%;
		order: 2;
	}
	
	.main-content {
		display: flex;
		flex-direction: column;
	}

	.main-content {
		order: 1;
	}

	.sidebar_first,
	.main-content {
		width: 100%;
		align-self: flex-start;
		display: flex;
		padding: 1rem;
	}

	.sidebar .block {
		border: none;
		margin: 0;
	}
	
	/* Stack footer on tablets and phones */
	.sidebar_first aside {
		width: 100%;
	}

	.site-footer .col-sm-12 {
		flex: 0 0 auto;
		width: 100%;
	}
	.site-footer .col-sm-12 {
		flex: 0 0 auto;
		width: 100%;
	}

	.dutton-logo img {
		max-width: 300px;
		margin-bottom: 20px;
		height: auto;
	}
	
	.penn-state-footer img {
		float: none;
		display: block;
		margin-bottom: 10px;
	}
	
	.penn-state-footer img, .penn-state-footer p  {
		text-align: center;
		margin: 0 auto;
		padding-bottom: 20px;
	}

	/* #hack to address iframes without containers */
	iframe[src*="youtube.com"],
	iframe[src*="youtu.be"] {
		max-width: 100%;
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}

	/* @supports for browsers that don't supposet aspect-ratio */
	@supports not (aspect-ratio: 16/9) {
		iframe[src*="youtube.com"],
		iframe[src*="youtu.be"] {
		height: 56.25vw;
		}
	}

	h1, h2, h3, h4, h5, h6 { margin-bottom: 10px; }


	/* Fix to remove floats on image left and image right on mobile */
	.main-content .img-left,
	.main-content .image-left,
	.main-content .img-left-35,
	.main-content .image-left-35,
	.main-content .img-left-45,
	.main-content .image-left-45,
	.main-content .img-right,
	.main-content .image-right,
	.main-content .img-right-35,
	.main-content .image-right-35,
	.main-content .img-right-45,
	.main-content .image-right-45 {
		float: none;
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.main-content .img-left img,
	.main-content .image-left img,
	.main-content .img-right img,
	.main-content .image-right img {
		float: none;
		max-width: 100%;
		height: auto !important; /* #hack override inline height declarations */
		padding: 10px;
	}

	div[aria-label="additional content"] > :first-child {
		margin-top: 15px;
	}

	div[aria-label="additional content"] h3 {
		background: #dce5f3;
	}

	.book-navigation > .menu {
		margin-top: calc(var(--space-unit) * 5);
	}

	span.pre {
		white-space: pre-wrap;
		word-break: break-word;
	}

	/* css rescue overwrites tables with a defined width at tablet size */
	table[style*="width:" i][style*="px" i] {
		width:auto !important;
		max-width: 100% !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: table;
	}

	/* Mobile and tablet Math */
	.box-math-container {
    	flex-direction: column; /* Stack vertically instead of side-by-side */
    	align-items: stretch; /* Full width for both items */
		gap: 0;
		margin-bottom: calc(var(--space-unit) * 4);
		margin-top: calc(var(--space-unit) * 4);
  	}

   .box-math-container .box-math {
    	width: 100%;
    	margin-bottom: 0.5rem;
    	text-align: center;
    	overflow-x: auto;
    	overflow-y: hidden;
    	-webkit-overflow-scrolling: touch;
	  }

    .box-math-container .box-math-caption {
    	width: 100%;
    	text-align: center;
    	margin-top: 0.5rem;
	}

	/* Legacy pattern - stack vertically */
	.box-math + .box-math-caption {
		display: block;
		float: none;
		width: 100%;
		text-align: center;
		margin-top: 0.5rem;
	}
	
	.box-math:has(+ .box-math-caption),
	.box-math {
		display: block;
		float: none;
		width: 100%;
		margin-bottom: 0.5rem;
		text-align: center;
	}

	/* Add margin only to legacy pattern captions */
	.box-math + .box-math-caption {
		margin-bottom: calc(var(--space-unit) * 2);
	}

	/* attempt to add scrollbar to mathjax not put in a container */
	.MathJax_Display {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		padding: 0;
		margin: 0;
	}

	.MathJax_Display:nth-last-of-type(1),
	.MathJax_Display:nth-of-type(1) {
		margin: 0;
	}

	.dutton-logo {
		padding-left: 0;
		margin-bottom: 25px;
	}

	.header-casestudy,
	.header-explore,
	.header-keyskill,
	.header-minute,
	.header-motivate,
	.header-prioritize,
	.header-quizyourself,
	.header-read,
	.header-watch,
	.header-wxchallenge {
		height: 100px !important;
	}


	.department-title, .department-of {
    	text-align: center !important;
	}

    .flex-container {
        flex-direction: column;
    }





}
/* end max-width 1280px */



/* Screen size 1280px and larger - tablets and desktop                   */
/*************************************************************************/
@media (min-width: 1280px) {
	.main-content .container .col-md-6:first-of-type {
		padding-left: 0;
	}
	
	.main-content .container .col-md-6:last-of-type {
		padding-right: 0;
	}

	.layout-main-wrapper .container {
		max-width: 1600px !important;
		margin: 0 auto;
		width: 100%;
	}

	.sidebar_first {
		flex: 0 0 25%;
		width: 25%;
		max-width: 25%;
	}
	
	#main {
		padding-left: 0;
		padding-right: 0;
	}
	
	.main-content {
		flex: 0 0 75%;
		width: 75%;
		max-width: 75%;
		padding: 2rem;
	}


  .box-math,
  .box-math-container .box-math {
		overflow-y: hidden;
		-webkit-overflow-scrolling: auto;
  }


  .box-math > math {
		overflow: visible;
		display: inline-block;
	}



	/* margin support for Codepen (GEOG 863) */
	.cp_embed_wrapper {margin: 2em 0;}
}


/* end min-width 1280px */


/************************************************************************/
/* END of MOBILE size responsiveness styles                             */
/************************************************************************/



/************************************************************************/
/* H5P embeds - keep in normal flow; let H5P JS set height              */
/* No use of !important so as not to interfere with h5p-resizer.js      */
/************************************************************************/

.h5p-embed {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 0 20px 0;
  overflow: visible;
  position: relative; /* normal flow; do not use absolute-ratio hack */
}

.h5p-embed iframe {
  display: block;
  width: 100%;
  height: auto;      /* H5P resizer.js will set inline height */
  border: 0;
  position: static;  /* avoid absolute positioning */
  min-height: 400px; /* prevents initial collapse before JS runs */
}