:root {
	/* ? ------------------- ? */
	/* ? ------ fonts ------ ? */
	/* ? ------------------- ? */
	--title-font: var(--ff-headers);

	--unidade-numero-font: var(--ff-headers);
	--unidade-nome-font: var(--ff-headers);

	--ff-headers: "ubuntu", sans-serif;
	--ff-text: "Open Sans", sans-serif;

	--letter-spacing-lighter: 0.04em;

	/* ? ------------------- ? */
	/* ? ------ sizes ------ ? */
	/* ? ------------------- ? */
	--topbar-height: 62px;
	--sidebar-width: 72px;
	--button-size: 42px;
	--max-width: 960px;

	--header-2-icon-size: 80px;

	/* ? -------------------- ? */
	/* ? ----- layering ----- ? */
	/* ? -------------------- ? */
	--bg-z-index: -1;
	--header-z-index: 2;
	--content-z-index: 5;
	--sidebar-z-index: 8;
	--topbar-z-index: 11;
	--access-z-index: 12;
	--badge-z-index: 20;

	--light-shadow: 0 0 0 2px var(--uc-c-grey-light);

	/* ? ---------------- ? */
	/* ? ---- colors ---- ? */
	/* ? ---------------- ? */
	--uc-c-dark: #333;
	--uc-c-dark-light: #666;
	--uc-c-grey: #555;
	--uc-c-grey-light: #e6e6e6;
	--uc-c-grey-lighter: #fcfcfc;
	--uc-c-white: #ffffff;

	/* ? ------------------- ? */
	/* ? ---- gradients ---- ? */
	/* ? ------------------- ? */
	--gradient-button: var(--uc-g-51);
	--gradient-button-hover: var(--uc-g-21);

	--uc-g-21: linear-gradient(to bottom right, var(--uc-ca-2), var(--uc-ca-1));
	--uc-g-32: linear-gradient(to bottom right, var(--uc-ca-3), var(--uc-ca-2));
	--uc-g-42: linear-gradient(to bottom right, var(--uc-ca-4), var(--uc-ca-2));
	--uc-g-51: linear-gradient(to bottom right, var(--uc-ca-5), var(--uc-ca-1));
	--uc-g-52: linear-gradient(to bottom right, var(--uc-ca-5), var(--uc-ca-2));
	--uc-g-52-see: linear-gradient(
		to bottom right,
		var(--uc-ca-5-see),
		var(--uc-ca-2-see)
	);
	--uc-g-52-dark-see: linear-gradient(
		to bottom right,
		var(--uc-ca-5-dark-see),
		var(--uc-ca-2-dark-see)
	);
	--uc-g-53: linear-gradient(to bottom right, var(--uc-ca-5), var(--uc-ca-3));

	/* ? ------------------- ? */
	/* ? ---- color accents ---- ? */
	/* ? ------------------- ? */
	--uc-ca-1: #30acff;
	--uc-ca-1-dark: #185580;
	--uc-ca-1-light: #99d6ff;

	--uc-ca-2: #587cf0;
	--uc-ca-2-dark: #2e4280;
	--uc-ca-2-light: #a8b9f0;

	--uc-ca-3: #9c7eff;
	--uc-ca-3-dark: #4e3f80;
	--uc-ca-3-light: #cebfff;

	--uc-ca-4: #f4b0fa;
	--uc-ca-4-dark: #7c5a80;
	--uc-ca-4-light: #fcd9ff;

	--uc-ca-5: #ca63ff;
	--uc-ca-5-dark: #643180;
	--uc-ca-5-light: #e5b3ff;

	/* versoes das cores see-through ou transparente */
	/* para gradientes e sombras */
	--uc-ca-2-see: #587cf080;
	--uc-ca-2-shadow: #587cf032;

	--uc-ca-5-see: #cb63ffd3;
	--uc-ca-2-see: #587cf0c5;
	--uc-ca-5-dark-see: #592874e5;
	--uc-ca-2-dark-see: #2c49a1d5;

	--uc-ca-5-trans: #cb63ff00;
	--uc-ca-2-trans: #587cf010;

	--text-color-on-accent: #fff;

	--diffuse-light-shadow: 0px 0px 3.6px -14px rgba(0, 0, 0, 0.035),
		0px 0px 10px -14px rgba(0, 0, 0, 0.05),
		0px 0px 24.1px -14px rgba(0, 0, 0, 0.065),
		0px 0px 80px -14px rgba(0, 0, 0, 0.1);
}

html,
body {
	margin: 0;
	padding: 0;
	background: var(--uc-c-grey-lighter);
}

* {
	box-sizing: border-box;
}

.bg-light {
	background: #f0f0f0;
}

.blue-gradient-0 {
	background: var(--uc-g-53);
	color: white;
}

.blue-gradient-1 {
	background: var(--uc-g-52);
	color: white;
}

.blue-gradient-2 {
	background: var(--uc-g-51);
	color: white;
}

.blue-gradient-3 {
	background: var(--uc-g-51);
	color: white;
}

.blue-gradient-4 {
	background: var(--uc-g-21);
	color: white;
}

.blue-gradient-5 {
	background: var(--uc-g-21);
	color: white;
}

picture,
video {
	max-width: 100%;
}

h1,
h2,
h3 {
	margin: 0;
	font-weight: bold;
	color: var(--uc-c-grey);
	font-family: var(--ff-headers);
}

iframe {
	border: none;
	background: transparent;
}

html {
	scroll-behavior: smooth;
}

body {
	position: relative;
	min-height: 100%;
	max-width: 100vw;
	font-family: var(--ff-text);
	overflow-x: hidden;
}

a:focus {
	outline: 2px solid var(--unicesumar-a3);
	background: rgba(0, 0, 0, 0.1);
	border-radius: 0;
}

p:focus,
span:focus,
h3:focus,
.text-large:focus,
img:focus,
.subheader:focus {
	outline: 2px solid var(--uc-c-grey);
	outline-offset: 8px;
}

a span:focus {
	outline: none;
}

span:focus,
img:focus {
	outline-offset: 0;
}

#topbar {
	position: fixed;
	top: 0;
	left: 0;
	height: var(--topbar-height);
	width: 100vw;
	background: var(--uc-c-dark);
	color: var(--uc-c-white);
	z-index: var(--topbar-z-index);
	padding: 6px;
	box-sizing: border-box;
	box-shadow: 0 0 0 2px var(--uc-c-dark);
}

.topbar-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 8px;
	overflow: hidden;
}

.top-menu-toggle {
	position: fixed;
	left: 16px;
	top: 8px;
	height: var(--button-size);
	width: var(--button-size);
	cursor: pointer;
	border-radius: 50%;
	color: var(--uc-c-white);
	z-index: var(--access-z-index);
}

#material-intro,
.content-wide.bg-white ~ .content-wide.bg-light {
	display: none;
}

.material-desc {
	padding: 0 20px;
	box-sizing: border-box;
}

.menu-side-item {
	cursor: pointer;
	border-radius: 5px;
	margin: 2px 4px;
	padding: 0 8px 8px;
	font-size: 12px;
	border: 2px solid #eee;
}

.menu-side-item.disabled {
	opacity: 0.5;
}

.menu-side-item.disabled img {
	filter: saturate(40%);
}

.menu-side-item.disabled .material-icons {
	position: absolute;
	top: 8px;
	right: 8px;
}

.menu-side-item:hover {
	border-color: var(--uc-c-dark-light);
}

.top-uniwrapper {
	display: flex;
	width: 100%;
	height: calc(100% + 6px);
	justify-content: center;
}

.top-unidade {
	margin-right: 20px;
	height: 100%;
	padding: 0 20px 6px 20px;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	user-select: none;
	cursor: pointer;
}

.top-unidade.selected,
.top-unidade.selected .top-antes,
.top-unidade.selected .top-depois {
	background: var(--unicesumar-accent);
	visibility: visible;
}

.top-unidade:hover {
	background: var(--uc-c-grey);
}

.top-unidade:hover .top-antes,
.top-unidade:hover .top-depois {
	visibility: visible;
	background: var(--uc-c-grey);
}

.top-antes {
	visibility: hidden;
	height: 10px;
	width: 10px;
	position: relative;
	left: -30px;
	bottom: -26px;
	background: var(--uc-c-grey);
	overflow: hidden;
}

.top-antes:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	background: var(--uc-c-dark);
	border-radius: 100%;
	bottom: 0;
	right: 0;
}

.top-depois {
	visibility: hidden;
	height: 10px;
	width: 10px;
	position: relative;
	right: -30px;
	bottom: -26px;
	background: var(--uc-c-grey);
	overflow: hidden;
}

.top-depois:before {
	position: absolute;
	content: "";
	height: 20px;
	width: 20px;
	background: var(--uc-c-dark);
	border-radius: 100%;
	bottom: 0;
	left: 0;
}

#sidebar {
	position: fixed;
	top: 0;
	left: 0;
	width: 300px;
	height: 100vh;
	background-color: var(--uc-c-white);
	overflow-y: auto;
	z-index: var(--sidebar-z-index);
	transition: transform 200ms ease;
	transform: translateX(-100%);
}

#sidebar.no-animation,
#sidebar.no-animation + .content-page {
	transition: none;
}

#header-bg {
	position: absolute;
	top: 0;
	left: 0;
	height: 00px;
	width: 100%;
	background: #2c7198;
	z-index: var(--header-z-index);
}

#sidebar .wrapper {
	box-sizing: border-box;
	padding: 16px;
	padding-bottom: 60px;
	height: auto;
}

.sidebar-group {
	width: 100%;
	margin: 8px 0;
	/* padding-bottom: 12px; */
	/* border-bottom: 1px solid rgba(0, 0, 0, 0.1); */
}

.sidebar-title {
	font-family: var(--ff-headers);
	padding: 12px 16px;
	border-radius: 8px;
	background: var(--uc-c-grey-light);
	letter-spacing: 0.4px;
}

.sidebar-item,
#sidebar .accessibility-item {
	position: relative;
	display: grid;
	grid-template-columns: 40px 1fr;
	place-items: center start;

	margin: 0.5em 0 0.5em 1em;
	padding: 12px 16px;
	border-radius: 8px;

	text-align: left;
	cursor: pointer;

	height: auto;
	width: auto;

	font-family: var(--ff-headers);
	/* font-size: 1.2em; */
}

.sidebar-item.subitem {
	margin-left: 2em;
}

.sidebar-item span {
	display: flex;
	align-items: center;
}

.sidebar-item.selected {
	background: var(--uc-ca-2);
	color: var(--text-color-on-accent);
}

.sidebar-item.selected img {
	filter: invert(100%) brightness(200%);
}

.sidebar-item:hover,
#sidebar .accessibility-item:hover {
	background: var(--uc-c-grey-light);
	color: #333;
}

.sidebar-item img {
	margin: 0;
}
.sidebar-item img,
.accessibility-item .material-icons {
	color: #373737;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sidebar-progress {
	position: absolute;
	left: 0;
	bottom: 0;
	height: 6px;
	width: 100%;
	overflow: hidden;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
}

.text-center {
	text-align: center;
}

.text-large {
	font-size: 1.4em;
	line-height: 1.4em;
}

.hover-darken {
	transition: background 200ms ease;
	padding: 20px;
}

.hover-darken:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

.clickable {
	cursor: pointer;
}

.header.header-gradient {
	background: -webkit-linear-gradient(var(--uc-ca-2), var(--uc-ca-3));
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.header {
	font-family: var(--ff-headers);
	font-weight: 600;
	font-size: 3em;
	color: white;
	padding: 20px;
}

.header-unidade {
	padding: 100px 40px;
}

body.preview .header-unidade {
	background: var(--uc-g-52-see), url(../img/capas/capa4.jpg) no-repeat center;
	background-size: cover;
}

.header-unidade .header-wrapper {
	max-width: var(--max-width);
	margin: auto;
	position: relative;
}

.header-unidade h1,
.header-unidade h2 {
	color: var(--uc-c-white);
}

.header-unidade h2 {
	font-size: 42px;
	margin-bottom: 16px;
	text-shadow: 2px 2px var(--uc-ca-4-dark);
}

.header-unidade h1 {
	text-shadow: 2px 2px var(--uc-ca-4-dark);
}

.header-unidade .numero {
	position: absolute;
	right: -160px;
	bottom: -54px;

	font-size: 160px;
	line-height: 0;

	font-family: var(--ff-headers);
	font-weight: bold;

	color: var(--uc-c-grey-lighter);
	text-shadow: 4px 4px var(--uc-ca-2-dark);
}

.header-unidade.bg-a .numero {
	display: none;
}

.has-grade {
	position: relative;
	width: calc(100% + 80px);
}
.has-grade .grade {
	display: flex;
	align-items: center;
	justify-content: center;
	/* box-shadow: 0 3px 5px 2px rgba(0, 0, 0, 0.1); */
	padding: 8px 16px;
	background: hsl(0, 0%, 90%);
	color: var(--uc-c-dark);
	animation: grade-slide-in 1s ease;
}
.has-grade .grade > * {
	margin: 8px;
}
.has-grade .grade-bar {
	height: 42px;
	width: 42px;
	margin: 8px;
	position: relative;
	flex-shrink: 0;
}
.grade-bar .progressbar-text {
	display: block;
}
@keyframes grade-slide-in {
	from {
		opacity: 0;
		max-height: 0;
		/* transform: translateX(20px) translateY(-50%) */
	}
	to {
		opacity: 1;
		max-height: 100px;
		/* transform: translateX(0) translateY(-50%) */
	}
}

.subheader {
	font-family: var(--body-font);
	font-size: 1.2em;
	letter-spacing: 3px;
	line-height: 1.5em;
	text-transform: uppercase;
	text-align: center;
	text-align-last: center;
}

.content-page {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	z-index: var(--content-z-index);
	transition: 200ms ease;
}

.content-section {
	max-width: calc(var(--max-width) + 80px);
	width: 100%;
	margin: auto;
	margin-bottom: 40px;
	border-radius: 20px;
	padding: 40px;
	padding-bottom: 60px;
	background-color: var(--uc-c-white);
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
}

.content-section.blue-border {
	box-shadow: 0 0 3px var(--uc-ca-2-shadow);
	margin-top: 40px;
}

.content-section.transparent {
	background: transparent;
	box-shadow: none;
}
.content-wide {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	padding: 40px 20px;
}

.wide-wrapper {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	line-height: 1.5em;
	max-width: var(--max-width);
	margin: auto;
	padding: 0 20px;
}

.wide-wrapper > div {
	max-width: 60%;
	border-radius: 20px;
}

.wide-wrapper .objeto {
	max-width: calc(90vh / 0.9115);
}

.wide-wrapper.column > div {
	max-width: 100%;
	text-align: var(--text-alignment);
}

.wide-wrapper .content-section {
	max-width: 100%;
	padding: 20px 40px 40px 40px;
}

.videos .wide-wrapper {
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	display: grid;
	grid-template-columns: 1fr;
	width: 100%;
	box-sizing: border-box;
}

.videos .wide-wrapper div {
	max-width: initial;
}
.videos .wide-wrapper .content-text {
	margin: 1em 0;
}
.videos .wide-wrapper .video {
	margin: 0;
}

.videos .wide-wrapper:last-of-type {
	border: none;
}

.content-text {
	width: 100%;
	max-width: var(--max-width);
	margin: 0 auto;
	margin-bottom: 20px;
	line-height: 2;
	text-align: var(--text-alignment);
}

.content-text + .content-text {
	margin-bottom: 0;
}

.content-text span.blue-bg {
	padding: 2px 6px;
	background: var(--uc-g-51);
	border-radius: 8px;
	color: var(--text-color-on-accent);
}

.content-text span.blue-bg-2 {
	padding: 2px 6px;
	background: var(--uc-g-42);

	border-radius: 8px;
	color: var(--text-color-on-accent);
}

.content-text span.blue-bg-3 {
	padding: 2px 6px;
	background: var(--uc-g-32);

	border-radius: 8px;
	color: var(--text-color-on-accent);
}
.content-text span.blue-bg-4 {
	padding: 2px 6px;
	background: var(--uc-g-21);

	border-radius: 8px;
	color: var(--text-color-on-accent);
}

.title-big {
	font-family: var(--title-font);
	font-weight: bold;
	font-size: 56px;
	color: var(--uc-c-white);
	padding: 80px 40px;
	margin: 0 auto;
	min-height: 80vh;
	text-align: center;
	text-align-last: center;
	letter-spacing: 0.04em;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.title-big span {
	max-width: 800px;
	animation: slide-in-right 800ms ease forwards;
}
.title-big span.tagline {
	background: var(--uc-ca-2-see);
	text-transform: uppercase;
	padding: 16px;
	font-size: 0.6em;
	border-radius: 10px;
}

@keyframes slide-in-right {
	from {
		opacity: 0;
		transform: translateX(100px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.bgv {
	background: var(--uc-g-52-dark-see), url(../img/video.jpg) no-repeat center;
	background-size: cover;
}

.bgo {
	background: var(--uc-g-52-dark-see), url(../img/obj.jpg) no-repeat center;
	background-size: cover;
}

.content-text img {
	max-width: 100%;
}

.wide-icon {
	width: 100%;
}

.video {
	width: 100%;
	max-width: calc(90vh / 0.5625);
	max-width: var(--max-width);
	margin: 1em 0;
}

.video-large {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video-large > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: 80vh;
	border-radius: 10px;
}

.atividade {
	width: 100%;
	/* max-height: 90vh; */
	max-width: var(--max-width);
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	border-radius: 10px;
	background-color: #f5f5f5;
}

.atividade > p {
	font-size: 16px;
	background-color: var(--unicesumar-accent);
	margin: 0;
	color: #fff;
	border-radius: 10px 10px 0 0;
	padding: 10px;
	font-weight: bold;
	font-family: Montserrat;
	letter-spacing: 1.5px;
	text-align: center;
}

.atividade-large {
	position: relative;
	margin: auto;
	/* margin-top: 20px; */
	padding-bottom: 91.15%;
	overflow: hidden;
}

.atividade-large > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* max-height: 90vh; */
}

.objeto {
	position: relative;
	width: 100%;
	max-height: calc(100vh - var(--topbar-height));
	max-width: var(--max-width);
	margin: 2em 0;
	border: 2px solid #eee;
	padding: 56px 1px 1px;
}

.objeto:fullscreen {
	margin: 0;
	background: var(--uc-c-grey-lighter);
	padding: 56px 8px 32px 8px;
}

.objeto:fullscreen .objeto-tall {
	height: 100%;
}
.objeto:fullscreen .tall-wrapper {
	top: 50%;
	transform: translateY(-50%);
}

.objeto-large,
.objeto-wide {
	position: relative;
	margin: auto;
	padding-bottom: 91.25%;
	/* overflow: hidden; */
}

.objeto::before {
	content: "Recurso Interativo";
	font-size: 16px;
	position: absolute;
	left: 0;
	padding-left: 64px;
	padding-bottom: 16px;
	top: 20px;
	z-index: 2;
	width: calc(100% - 64px);
	border-bottom: 2px solid #eee;
}
.objeto::after {
	content: url("../img/ico/type/ra.svg");
	position: absolute;
	left: 12px;
	top: 8px;
	box-sizing: border-box;
	height: 40px;
	width: 40px;
	opacity: 0.8;
	border-radius: 50%;
	z-index: 2;
}

/* na pagina de objetos */
.content-objetos .objeto-large::before,
.content-objetos .tall-wrapper::before,
.content-objetos .objeto-wide::before,
.content-objetos .objeto-large::after,
.content-objetos .tall-wrapper::after,
.content-objetos .objeto-wide::after {
	content: "";
	display: none;
}

.objeto-tall {
	width: min(100%, calc((100vh - var(--topbar-height)) / 1.25));
	max-width: 600px;
	margin: auto;
}

.tall-wrapper {
	position: relative;
	/* overflow: hidden; */
	padding-bottom: 125%;
}

.objeto-wide {
	padding-bottom: 56.25%;
}

.objeto iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height: 90vh;
}

.enquete {
	width: 100%;
	max-width: var(--max-width);
	margin: auto;
}

.enquete-large {
	position: relative;
	width: 100%;
	margin: auto;
	margin-top: 20px;
	padding-bottom: 51%;
	height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.enquete-large > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.video-select {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 60px;
	margin-top: 10px;
}

.video-option {
	padding: 10px 20px;
	margin: 12px;
	user-select: none;
	cursor: pointer;
	border-radius: 5px;
	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
	border: 2px solid var(--unicesumar-yellow);
}

.video-option:hover {
	background: var(--unicesumar-yellow);
	color: var(--uc-c-dark);
}

.video-option.selected {
	background: var(--unicesumar-yellow);
	color: var(--uc-c-dark);
}

.material-icons.icon-large {
	font-size: 36px;
	border: 3px solid;
	border-radius: 50%;
	padding: 10px;
	margin-bottom: 10px;
}
.home-unit-wrapper {
	padding: 0 40px;
}

.content-unidade {
	position: relative;
	max-width: calc(var(--max-width) + 80px);
	width: 100%;
	margin: 16px auto;
	border-radius: 10px;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	padding: 24px;
	background-color: var(--uc-c-grey-lighter);
	box-shadow: inset 1px 1px 3px rgba(255, 255, 255, 0.4),
		1px 2px 7px 1px rgba(0, 0, 0, 0.16);
	cursor: pointer;
	font-weight: bold;
}

.content-unidade:visited,
.button-group .button-wrapper a:visited {
	color: #fff;
}

.unidade-numero {
	font-family: var(--unidade-numero-font);
	font-size: 1em;
	color: #fff;
	padding: 8px 0;
	opacity: 0.9;
}

.unidade-numero:only-child {
	opacity: 1;
	font-size: 2em;
}

.unidade-nome {
	font-family: var(--unidade-nome-font);
	font-size: 2em;
	box-sizing: border-box;
	padding: 0.5em 1em 0.5em 0;
}

.unidade-go {
	cursor: pointer;
	height: 60px;
	width: 60px;
}

.content-wide .wide-wrapper .video {
	width: 100%;
	max-width: calc(90vh / 0.5625);
}

.toggle-height {
	position: relative;
	width: 100%;
	padding: 40px;
	margin: 20px;
	color: var(--uc-c-dark);
	box-sizing: border-box;
}

.toggle-height.dicas .content-link:hover {
	background: #88d913;
	color: var(--uc-c-dark);
}

.toggle-height.saiba .content-link:hover {
	background: #30b92a;
	color: var(--uc-c-dark);
}

.toggle-height.saiba hr {
	border: 1px solid #30b92a;
}

.toggle-height.dicas {
	box-shadow: 0 1px 0px 2px #88d913;
}

.toggle-height.modelos .content-link:hover {
	background: #f0e100;
	color: var(--uc-c-dark);
}

.toggle-height.modelos {
	box-shadow: 0 1px 0px 2px #f0e100;
}

.toggle-height.videos {
	box-shadow: 0 1px 0px 2px #2c71dc;
}

.toggle-height.saiba {
	box-shadow: 0 1px 0px 2px #30b92a;
}

.toggle-height img {
	height: 80px;
	border-radius: 50%;
	position: absolute;
	right: -40px;
	top: -40px;
	background: #f0f0f0;
}

.toggle-desc {
	font-size: 1.6em;
	margin-bottom: 20px;
}

.toggle-content {
	position: relative;
	width: 100%;
}

.toggle-content.videos {
	display: flex;
	justify-content: space-around;
	flex-wrap: wrap;
}

.content-footer {
	margin-top: 40px;
	padding: 40px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: var(--uc-c-grey-lighter);
	border-top: 2px solid var(--uc-c-grey-light);
}

.footer-marca {
	display: grid;
	gap: 16px;
}

.footer-marca img {
	width: fit-content;
	height: 100%;
	max-height: 60px;
	object-fit: contain;
}

.footer-links {
	display: grid;
	gap: 16px;
}

.footer-links a {
	text-decoration: underline;
	text-underline-position: under;
	padding: 4px;
	border-radius: 4px;
	line-height: 1.5;
	text-align: left;
	text-align-last: left;
}

.footer-links a img {
	height: 1.6em;
	margin-right: 1em;
	margin-bottom: -0.4em;
}

.footer-links a:hover {
	box-shadow: 0 0 0 2px;
	text-decoration: none;
}

.footer-marca-texto {
	font-weight: bold;
	font-family: "neo-sans", sans-serif;
}

.flex-c.social-wrapper {
	display: none;
}

.button-wrapper {
	margin: 10px;
	font-size: 16px;
}

.button-next,
.button-top {
	display: flex;
	justify-content: center;
	align-items: center;
	background: var(--gradient-button);
	/* box-shadow: 0 0 0 2px var(--uc-c-grey-light); */
	border-radius: 10px;
	padding: 12px 16px;
	box-sizing: border-box;
	cursor: pointer;
	color: var(--text-color-on-accent);
}

.button-next:hover,
.button-top:hover {
	background: var(--gradient-button-hover);
	/* box-shadow: 0 0 0 2px var(--uc-c-dark); */
}

.button-next {
	min-width: 185px;
}

.content-link:first-of-type {
	margin-top: 20px;
}

.content-link {
	margin: 1em 0;
	padding: 16px 24px;
	border-radius: 8px;
	cursor: pointer;
	box-shadow: 0 0 0 2px hsl(0, 0%, 95%);
	width: 100%;
}

.content-link.flex-c {
	justify-content: start;
}

.content-link:hover,
.content-link:hover button .material-icons {
	box-shadow: initial;
	background: var(--uc-ca-1);
	color: white;
}

.content-link span {
	color: inherit;
	text-decoration: none;
	margin-left: 20px;
	flex-grow: 1;
}

.content-link button {
	height: 40px;
	width: 40px;
	border: 0;
	background: transparent;
	cursor: pointer;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.content-link button:hover {
	box-shadow: 0 0 0 2px white;
}

.content-link button .material-icons.true,
.content-link[data-viewed] button .material-icons.false {
	display: none;
}

.content-link[data-viewed] button .material-icons.true,
.content-link button .material-icons.false {
	display: flex;
}

.content-link .material-icons.true {
	color: forestgreen;
}

*::selection {
	background: var(--uc-ca-1);
	color: var(--text-color-on-accent);
}

.header-gradient::selection,
.content-footer *::selection {
	background: none;
}

.wrapper {
	height: 100%;
	width: 100%;
	position: relative;
}

.flex-c {
	display: flex;
	align-items: center;
	justify-content: center;
}

.spacer-40 {
	height: 40px;
}

.column {
	flex-direction: column;
}

.row {
	flex-direction: row;
}

br,
img {
	user-select: none;
}

.materiais {
	box-shadow: 0 2px 3px rgba(0, 0, 0, 1) !important;
}

#sidebar #accessibility-toggle {
	display: none;
}

a,
a:visited {
	color: inherit;
	text-decoration: none;
	/* text-align: center; */
}

a.humanas {
	text-decoration: underline;
	color: #4a70ed !important;
}

::-webkit-scrollbar-track {
	background-color: var(--uc-c-white);
}

::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-thumb {
	background-color: var(--uc-c-grey);
}

#sidebar::-webkit-scrollbar-track {
	background-color: var(--uc-c-white);
	width: 4px;
}

#sidebar::-webkit-scrollbar {
	width: 4px;
}

#sidebar::-webkit-scrollbar-thumb {
	background-color: var(--uc-c-grey-light);
}

.saiba-mais,
.dica-leitura,
.video-c,
.capsula-conhecimento,
.master-class {
	position: relative;
	box-shadow: 0 1px 0px 2px var(--uc-ca-2-shadow);
	padding: 40px;
	border-radius: 10px;
	margin: 3em 0 4em;
	width: 100%;
	box-sizing: border-box;
	text-align: var(--text-alignment);
	text-align-last: var(--text-alignment-last);
}

.capsula-conhecimento {
	box-shadow: 0 0 0 2px var(--unicesumar-yellow);
}

.master-class {
	box-shadow: 0 0 0 2px var(--unicesumar-cyan);
}

.video-c + br,
.dica-leitura + br {
	display: none;
}

.saiba-mais > *:last-child,
.dica-leitura > *:last-child,
.capsula-conhecimento > *:last-child,
.master-class > *:last-child,
.video-c > *:last-child {
	margin-bottom: 0;
}

.dica-leitura > p,
.video-c > p {
	width: 100%;
}

.dica-leitura a span {
	text-align-last: left;
	text-align: left;
}

.saiba-mais img,
.dica-leitura > img,
.capsula-conhecimento > img,
.master-class > img,
.video-c img {
	height: 80px;
	border-radius: 50%;
	position: absolute;
	right: -40px;
	top: -40px;
	background: var(--uc-c-grey-lighter);
}

.video-c .video,
.capsula-conhecimento .video,
.master-class .video {
	width: 100%;
}
.capsula-conhecimento .video iframe,
.master-class .video iframe {
	border-radius: 10px;
}

.itens-essenciais {
	display: flex;
	flex-wrap: wrap;
	margin: auto;
	margin-bottom: 60px;
	justify-content: space-around;
	max-width: calc(var(--max-width) + 160px);
}

.item-essencial {
	display: flex;
	flex-direction: column;
	align-content: center;
	justify-content: flex-start;
	align-items: center;
	margin: 5px;
	padding: 20px;
	border-radius: 20px;
	width: 10%;
	min-width: 140px;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
	background: white;
	flex-grow: 1;
}

.essencial-icone {
	height: 200px;
}

.item-essencial img {
	height: 100%;
	width: auto;
	user-select: none;
}

.essencial-nome {
	font-family: var(--itemessencial-font);
	margin-bottom: 20px;
	font-size: 1.3em;
	font-weight: 600;
	text-align: center;
}

.essencial-desc {
	text-align: center;
	line-height: 1.4em;
}

#header-ap {
	box-shadow: none !important;
}

.hidden {
	display: none;
}

.button-group {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 20px;
}

.no-shadow {
	box-shadow: none;
}

.content-avalia {
	box-sizing: content-box;
	margin-top: 40px;
	font-size: 0.8em;
	width: 100%;
}

.content-avalia hr {
	height: 2px;
	width: 50%;
	border: none;
	background: #ffdd00;
	margin-bottom: 20px;
}

.classificador-wrapper {
	margin-top: 20px;
	flex-direction: row-reverse;
}

.classificador {
	height: 60px;
	width: 60px;
	color: var(--uc-c-grey-lighter);
	text-shadow: 0 0 2px #000;
	cursor: pointer;
	transition: 200ms ease;
}

.classificador .material-icons {
	font-size: 36px;
}

.classificador:hover,
.classificador:hover ~ .classificador {
	color: #ffdd00;
	text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

.popup-livro-warning,
.popup-seminario {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	backdrop-filter: blur(2px);
	background: rgba(0, 0, 0, 0.6);
	z-index: 100;
	align-items: center;
	justify-content: center;
	line-height: 1.5;
}
.popup-livro-warning.visible,
.popup-seminario.visible {
	display: flex;
}
.popup-livro-warning .balao,
.popup-seminario .balao {
	background: #fafafa;
	max-width: 440px;
	border-radius: 10px;
	box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
	padding: 24px;
}

.popup-seminario .balao {
	max-height: 80vh;
	max-width: 600px;
	overflow: auto;
}

.popup-livro-warning h3 {
	font-size: 32px;
	margin-bottom: 1em;
}

.popup-livro-warning .livrod {
	display: inline-block;
	background: var(--unicesumar-accent);
	padding: 0 4px;
	border-radius: 4px;
	color: #fafafa;
}

.popup-livro-warning .buttons {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 40px;
}

.popup-livro-warning .buttons a,
.popup-seminario button {
	display: block;
	padding: 8px 24px;
	background: #eee;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
	cursor: pointer;
}
.popup-livro-warning .buttons a:hover {
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
}

.popup-livro-warning a.livrop {
	font-weight: bold;
	/* background: hsl(0, 0%, 85%); */
}

.content-page.content-videos .wrapper,
.content-page.content-objetos .wrapper {
	min-height: 100vh;
	padding-bottom: 160px;
}
.content-page.content-videos .content-footer,
.content-page.content-objetos .content-footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin-top: 100px;
}

.content-page.content-videos .title-big,
.content-page.content-objetos .title-big {
	font-size: 32px;
	padding: 40px;
	min-height: 0;
	margin: 0;
}

.content-page.content-videos .title-big .subheader,
.content-page.content-objetos .title-big .subheader {
	font-family: var(--title-font);
	letter-spacing: 0.04em;
	max-width: var(--max-width);
	width: 100%;
	text-align: left;
	text-align-last: left;
	text-transform: none;
}

.content-page.content-videos .content-section,
.content-page.content-objetos .content-section {
	display: none;
}

.content-page.content-videos .content-text,
.content-page.content-objetos .content-text {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--max-width);
	margin: 40px auto;
	padding: 40px;
	background: #eeeeee;
	border-radius: 10px;
}

.content-page.content-videos .content-text h2,
.content-page.content-objetos .content-text h2 {
	margin: 0;
	padding: 0;
}

.video-playlist-wrapper {
	margin: 3em auto;
	max-width: var(--max-width);
	padding: 0 20px;
}

.content-videos .video-playlist-wrapper:nth-last-child(2) {
	margin-bottom: 240px;
}

.video-playlist-wrapper .page-titulo,
.content-objetos .page-titulo {
	margin-bottom: 24px;
	font-weight: bold;
	font-family: var(--title-font);
	letter-spacing: 0.02em;
}

.content-objetos .page-titulo {
	max-width: var(--max-width);
	margin: 3em auto;
}

.content-objetos .objeto {
	margin: 1em auto;
}

/* menu de acessibilidade legado */

#accessibility-menu {
	position: fixed;
	top: 0;
	right: -44px;
	z-index: var(--access-z-index);
	height: calc(var(--topbar-height) - 8px);
	background: var(--uc-c-dark);
	color: var(--uc-c-white);
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 6px;
	padding-right: 60px;
	box-sizing: border-box;
	border-radius: 36px;
	width: 314px;
	transform: translateX(200px);
	transition: all 200ms ease;
	user-select: none;
}

#sidebar #accessibility-menu {
	position: initial;
	display: initial;
	top: auto;
	left: auto;
	background: initial;
	color: initial;
	width: auto;
	padding: initial;
	transform: none;
}

#accessibility-menu.active {
	transform: translateX(10px);
}

#accessibility-menu.active .accessibility-item:first-of-type {
	color: var(--uc-c-dark);
	background: var(--unicesumar-yellow);
}

.accessibility-item {
	height: var(--button-size);
	width: var(--button-size);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.accessibility-item:hover {
	background: var(--uc-c-grey);
}

.accessibility-item:first-of-type {
	margin-right: 15px;
}

/* ? ------------------------------- */
/* ? -------- div de retorno ------- */
/* ? ------------------------------- */

.retorno {
	position: fixed;
	bottom: 20px;
	right: 10px;
	background: var(--uc-c-grey-lighter);
	border-radius: 10px;
	box-shadow: 0 0 0 2px var(--contorno);
	z-index: var(--badge-z-index);
	box-shadow: 1px 2px 5px 2px rgba(0, 0, 0, 0.1);
	opacity: 0;
	animation: slide-in-from-right 600ms ease 200ms forwards;
}

@keyframes slide-in-from-right {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.retorno .wrapper {
	position: relative;
}

.retorno .close-retorno {
	position: absolute;
	top: -20px;
	right: -5px;
	min-height: 40px;
	height: 40px;
	width: 40px;
	border-radius: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	border: 0;
	background: var(--uc-ca-1);
	color: #fff;
	box-shadow: var(--default-shadow);
	cursor: pointer;
}

.retorno a {
	display: block;
	padding: 24px;
	text-decoration: none;
	border-radius: 10px;
}

.retorno a p {
	margin: 0;
}

.retorno .onde-parou {
	padding: 16px;
	margin-top: 10px;
	box-shadow: var(--light-shadow);
	background: var(--uc-c-white);
	border-radius: 5px;
}

.retorno .parou-data {
	font-size: 0.8em;
}

/* !-------------------- */
/* media queries */

@media only screen and (max-width: 1430px) {
	.content-page .header-wrapper .numero {
		display: none;
	}
}
@media only screen and (max-width: 1100px) {
	#sidebar.show + .content-page {
		left: 0;
		width: 100%;
	}
}
@media only screen and (max-width: 918px) {
	/* acessibilidade legado */
	#accessibility-menu {
		height: 56px;
		width: 254px;
		transform: translateX(140px);
	}

	#accessibility-menu.active {
		transform: translateX(0);
	}

	.accessibility-item {
		height: 40px;
		width: 40px;
	}

	.accessibility-item:first-of-type {
		margin-right: 5px;
	}
	/* ------------------- */
	.title-big {
		font-size: 42px;
	}

	.content-page {
		left: 0;
		width: 100%;
	}

	.spacer-40 {
		height: 40px;
	}

	.text-large {
		font-size: 1.2em;
	}

	.unidade-nome {
		font-size: 1.6em;
	}

	.top-unidade {
		padding: 0;
		font-size: 0.9em;
		height: calc(100% - 4px);
	}

	.top-antes {
		left: -10px;
		bottom: -23px;
	}

	.top-depois {
		right: -10px;
		bottom: -23px;
	}

	.top-unidade.selected {
		display: flex;
	}

	.top-uniwrapper {
		top: 0;
		left: 0;
		height: calc(100% + 10px);
	}

	.content-wide {
		padding: 20px;
	}

	.topbar-progress {
		height: 6px;
	}

	.progressbar-text {
		display: none;
	}
}

@media only screen and (max-width: 718px) {
	.top-unidade {
		font-size: 0.7em;
	}
}

@media only screen and (max-width: 600px) {
	.title-big {
		font-size: 32px;
	}

	.header {
		font-size: 9vw;
	}

	.content-section {
		width: 100%;
		border-radius: 0;
		margin: 0;
		box-sizing: border-box;
		padding: 32px;
	}

	.spacer-40 {
		height: 0;
	}

	.wide-icon {
		width: 30%;
	}

	.wide-wrapper {
		flex-direction: column;
		padding: 20px;
	}

	.wide-wrapper > div {
		max-width: 100%;
		padding: 10px 0;
	}

	.wide-wrapper .flex-c {
		padding: 20px 0;
		width: 100%;
		justify-content: space-between;
	}

	.wide-wrapper > div:last-child {
		padding-bottom: 0;
	}

	.wide-wrapper > div:first-child {
		padding-top: 0;
	}

	.text-large {
		flex-grow: 2;
	}

	.text-center {
		flex-grow: 1;
	}

	.video,
	.objeto,
	.atividade {
		margin: 1em 0;
		width: calc(100% + 80px);
	}

	.content-videos .video,
	.content-objetos .objeto,
	.dica-leitura .video {
		width: 100%;
	}

	.content-objetos .page-titulo {
		margin: 3em 1em;
	}
	.objeto-large::before,
	.tall-wrapper::before,
	.objeto-wide::before {
		left: 0;
		left: max((calc(100vh - 570px) * -0.4), 8px);
	}
	.objeto-large::after,
	.tall-wrapper::after,
	.objeto-wide::after {
		left: 8px;
		left: max((calc(100vh - 570px) * -0.4 + 8px), 16px);
	}
	.atividade {
		max-height: none;
	}

	.atividade-large {
		padding-bottom: 140%;
	}

	.atividade-large > iframe {
		max-height: none;
	}

	.content-unidade {
		margin: 10px 25px;
		padding: 15px;
		border-radius: 10px;
		width: calc(100% - 50px);
		box-sizing: border-box;
		font-size: 0.8em;
	}

	.content-unidade:first-of-type {
		margin-top: 40px;
	}

	.content-unidade .unidade-go {
		display: none;
	}

	.content-wide {
		padding: 20px;
	}

	.content-wide .video {
		width: calc(100% + 40px) !important;
	}

	.content-wide .content-section {
		max-width: calc(100% + 40px) !important;
		width: calc(100% + 40px);
		margin-top: 20px;
		border-radius: 0;
		padding: 40px !important;
		box-sizing: border-box;
		margin-bottom: -40px;
	}

	.wide-wrapper.column .toggle-height {
		max-width: 100%;
	}

	.content-footer {
		flex-direction: column;
		align-items: flex-start;
	}
	.footer-links {
		margin-top: 2em;
	}

	.top-unidade,
	.top-antes,
	.top-depois {
		display: none;
	}

	.top-unidade.selected {
		font-size: 1em;
		justify-content: center;
		background: transparent;
		margin: 0;
	}

	.top-uniwrapper {
		top: 0;
		left: 0;
		height: 100%;
	}

	#topbar-atuacao {
		display: block;
		position: absolute;
		top: calc(var(--topbar-height) + 8px);
		background: var(--uc-c-grey);
		padding: 8px 16px;
		height: auto;
		margin: 0;
		font-size: 1em;
		border: 2px solid var(--uc-c-dark);
		border-radius: 10px;
	}
	#topbar-atuacao::before {
		content: "📲";
		margin-left: -8px;
		margin-right: 8px;
	}
	#topbar-atuacao:hover {
		background: #cccccc;
	}

	#sidebar {
		width: 100%;
		max-width: 300px;
	}

	.button-group {
		flex-direction: column;
	}

	.button-wrapper {
		margin: 4px 0;
	}

	.button-next {
		min-width: 240px;
	}

	#nav-prev {
		padding: 1em 2em;
	}

	#nav-next {
		padding: 1em 2em;
	}

	.button-wrapper > div {
		width: 70%;
		box-sizing: border-box;
	}

	.wide-wrapper.complementar {
		padding: 0;
	}

	.complementar .content-text {
		padding: 0 20px;
		box-sizing: border-box;
	}

	.toggle-height img {
		height: 50px;
		right: -20px;
		top: -20px;
	}

	.toggle-height.videos {
		padding: 0;
	}

	.videos .wide-wrapper .content-text {
		margin: 0 auto;
		padding: 0;
		box-sizing: border-box;
	}

	.videos .wide-wrapper {
		padding: 20px;
	}

	.videos .wide-wrapper .video {
		width: 100% !important;
	}

	.enquete-large {
		padding-bottom: 150%;
	}

	#material-menu {
		display: none;
	}

	.menu-side-item {
		height: 48px;
		padding: 0 8px 0 0;
		box-sizing: border-box;
		flex-shrink: 0;
		display: flex;
		align-items: center;
		border-radius: 48px;
	}
	.menu-side-item img {
		height: 100%;
		width: auto;
	}

	.toggle-content {
		padding: 20px;
		padding-top: 0;
		box-sizing: border-box;
	}

	.content-link {
		padding: 10px !important;
		box-sizing: border-box;
	}

	.toggle-desc {
		font-size: 1.4em;
		text-align: center;
		padding: 20px;
		margin-bottom: 0;
	}

	.dica-leitura {
		padding: 32px 16px 16px;
		margin: 2em -16px;
		width: calc(100% + 32px);
		box-sizing: border-box;
	}

	.dica-leitura .dica-header {
		right: 12px;
		top: -28px;
	}
	.dica-leitura .dica-header img {
		width: calc(var(--header-2-icon-size) / 3 * 2);
		height: calc(var(--header-2-icon-size) / 3 * 2);
	}
	.dica-leitura .dica-header span {
		padding: 8px 24px 8px 8px;
	}

	.dica-leitura > img.icon,
	.exercicios-wrapper img.icon {
		height: 60px;
		border-radius: 50%;
		position: absolute;
		right: -8px;
		top: -24px;
		background: var(--uc-c-grey-lighter);
	}

	.dica-leitura p:first-of-type {
		margin-top: 0;
	}

	.button-top {
		display: none;
	}
}

/* ! ------------------------------ */
/* ! att - disciplina digital v1.0  */
/* ! ------------------------------ */

.objetivos-da-disciplina {
	margin: 2em auto;
	border-radius: 10px;
	position: relative;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
	padding: 40px 0;
	background: var(--uc-c-white);
}

.objetivos-da-disciplina .objetivos-icon {
	position: absolute;
	height: var(--header-2-icon-size);
	right: 0;
	top: -40px;
	z-index: 2;
}

.content-text .objetivos-da-disciplina h2 {
	position: absolute;
	top: -1.25em;
	margin: 0;
	width: calc(100% - 40px);

	background: var(--uc-g-32);
	padding: 8px 40px;
	color: var(--uc-c-grey-lighter);
	border-radius: 10px 10px 0 0;
}

.objetivos-da-disciplina p,
.objetivos-da-disciplina ul {
	padding: 0 40px;
}

.objetivos-da-disciplina > *:first-child {
	margin-top: 0;
}

.objetivos-da-disciplina ul {
	list-style-type: none;
}

.objetivos-da-disciplina li {
	position: relative;
	margin: 1.2em 0 1.2em 48px;
}

.objetivos-da-disciplina li::after {
	content: "";
	background-image: url("../img/ico/check.svg");
	background-size: 32px;
	background-repeat: no-repeat;
	background-position: center;
	height: 32px;
	width: 32px;
	position: absolute;
	top: 0px;
	left: -48px;
}

li {
	margin: 1em auto;
}

.content-text p {
	margin: 2em auto;
}

.content-text h2 {
	margin: 2em auto 3em auto;
	padding-top: 2em;
	position: relative;
	line-height: 1.4;
}

.content-text .div-destaque h2 {
	margin: 0 auto;
	padding: 0;
}

.content-text .div-destaque:not(.destaque-grey) h2,
.content-text .div-destaque:not(.destaque-grey) h3,
.content-text .div-destaque:not(.destaque-grey) h4 {
	color: var(--text-color-on-accent);
}

.content-text .ca-3 {
	color: var(--uc-c-white);
	border-radius: 10px;
	padding: 8px 24px;
	font-weight: bold;
	background: var(--uc-g-52);
}

.content-text > h2.with-icon:nth-of-type(3n)::before {
	content: "";
	background: url(../img/ico/title/inicie_sua_jornada.svg) no-repeat center;
	background-size: cover;
	width: var(--header-2-icon-size);
	height: var(--header-2-icon-size);
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translateY(1em);
}

.content-text > h2.with-icon:nth-of-type(3n + 1)::before {
	content: "";
	background: url(../img/ico/title/desenvolva_seu_potencial.svg) no-repeat
		center;
	background-size: cover;
	width: var(--header-2-icon-size);
	height: var(--header-2-icon-size);
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translateY(1em);
}

.content-text > h2.with-icon:nth-of-type(3n + 2)::before {
	content: "";
	background: url(../img/ico/title/desenvolva_seu_potencial.svg) no-repeat
		center;
	background-size: cover;
	width: var(--header-2-icon-size);
	height: var(--header-2-icon-size);
	position: absolute;
	right: 0;
	bottom: 0;
	transform: translateY(1em);
}

h3.referencias-header {
	position: relative;
}

h3.referencias-header::after {
	content: "";
	background: url(../img/ico/title/referencias.svg) no-repeat center;
	background-size: cover;
	width: calc(var(--header-2-icon-size) / 2);
	height: calc(var(--header-2-icon-size) / 2);
	position: absolute;
	right: 0;
}

/* fonte das referencias */
h3.referencias-header ~ p {
	font-family: "Courier New", Courier, monospace;
	overflow-wrap: break-word;
}

.with-icon {
	display: grid;
	grid-template-columns: 1fr 80px;
	align-items: center;
	gap: 16px;
	position: relative;
}

.content-text > .with-icon::after {
	content: "";
	position: absolute;
	left: -16px;
	bottom: -8px;
	width: 100%;
	height: 4px;
	background: linear-gradient(
		to right,
		var(--uc-ca-3),
		var(--uc-ca-5-trans) 80%
	);
}

.dual-columns {
	display: grid;
	margin: 0;
	gap: 40px;
	place-items: center;
}

.dual-columns.r-1by3 {
	grid-template-columns: 1fr 3fr;
}
.dual-columns.r-1by2 {
	grid-template-columns: 1fr 2fr;
}
.dual-columns.r-3by1 {
	grid-template-columns: 2fr 1fr;
}

.dual-columns.r-2by1 {
	grid-template-columns: 2fr 1fr;
}

.dual-columns.r-1by3 .first,
.dual-columns.r-3by1 .second {
	font-size: 1.1em;
}
.dual-columns.r-2by1 .second,
.dual-columns.r-1by2 .first {
	font-size: 1.2em;
}

.dual-columns .column-item > *:only-child {
	margin: 0;
}

.dual-columns.r-1by2 .cards-wrapper .card {
	display: flex;
	align-items: center;
	margin: 1em 0;
}
.cards-wrapper .card .icon {
	font-size: 36px;
	width: 80px;
	height: 80px;
	border-radius: 50px;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
}

.card .material-icons {
	font-size: 36px;
}

.cards-wrapper .card .text {
	margin-left: -32px;
	padding: 16px 16px 16px 40px;
	width: 100%;
	z-index: -1;
	border-radius: 10px 10px;
	font-size: 1.1em;
}
.cards-wrapper .card.step-1 .text {
	background: hsl(300, 90%, 88%);
}
.cards-wrapper .card.step-2 .text {
	background: hsl(260, 90%, 88%);
}
.cards-wrapper .card.step-3 .text {
	background: hsl(220, 90%, 88%);
}
.cards-wrapper .card.step-4 .text {
	background: hsl(180, 90%, 88%);
}
.cards-wrapper .card.step-5 .text {
	background: hsl(140, 90%, 88%);
}

.timeline {
	display: flex;
}

.timeline-wrapper {
	margin: 4em auto;
	overflow: auto;
}

.timeline-bg {
	width: 3300px;
	height: 80px;
	background: #000;
	background: url(../img/bg-timeline.png) no-repeat bottom left;
	background-size: contain;
	margin: -16px 0 16px;
}

.timeline-item {
	min-width: 300px;
	display: grid;
	grid-template-rows: auto 1fr 48px;
	place-items: center;
	gap: 16px;
}

.timeline-item .ano {
	font-family: var(--ff-headers);
	font-size: 1.2em;
	font-weight: bold;
	margin: 0;
	padding: 2px 8px;
	border-radius: 10px;
}

.timeline-item .text {
	display: grid;
	grid-template-rows: 60px 1fr;
	gap: 40px;
	padding: 24px;
	background: #fff;
	margin: 12px;
	border-radius: 10px;
	box-shadow: 1px 1px 5px var(--uc-ca-2-shadow);
	height: 100%;
}

.timeline-item .text .material-icons {
	font-size: 80px;
	text-align: center;
}

.timeline-item .text p {
	margin: 0;
}

.timeline-item .line {
	height: 20px;
	width: 100%;
	background: #000;
	margin-bottom: 40px;
}

.timeline-item .map-placement .material-icons {
	font-size: 40px;
}

.step-1 .line,
.step-1 .ano {
	background: hsl(40, 80%, 80%);
}
.step-1 .text .material-icons {
	color: hsl(40, 80%, 60%);
}
.step-1 .map-placement .material-icons {
	color: hsl(26, 100%, 40%);
}

.step-2 .line,
.step-2 .ano {
	background: hsl(60, 80%, 80%);
}
.step-2 .text .material-icons {
	color: hsl(60, 80%, 60%);
}
.step-2 .map-placement .material-icons {
	color: hsl(46, 100%, 40%);
}

.step-3 .line,
.step-3 .ano {
	background: hsl(80, 80%, 80%);
}
.step-3 .text .material-icons {
	color: hsl(80, 80%, 60%);
}
.step-3 .map-placement .material-icons {
	color: hsl(66, 100%, 40%);
}

.step-4 .line,
.step-4 .ano {
	background: hsl(100, 80%, 80%);
}
.step-4 .text .material-icons {
	color: hsl(100, 80%, 60%);
}
.step-4 .map-placement .material-icons {
	color: hsl(86, 100%, 40%);
}

.step-5 .line,
.step-5 .ano {
	background: hsl(120, 80%, 80%);
}
.step-5 .text .material-icons {
	color: hsl(120, 80%, 60%);
}
.step-5 .map-placement .material-icons {
	color: hsl(106, 100%, 40%);
}

.step-6 .line,
.step-6 .ano {
	background: hsl(140, 80%, 80%);
}
.step-6 .text .material-icons {
	color: hsl(140, 80%, 60%);
}
.step-6 .map-placement .material-icons {
	color: hsl(126, 100%, 40%);
}

.step-7 .line,
.step-7 .ano {
	background: hsl(160, 80%, 80%);
}
.step-7 .text .material-icons {
	color: hsl(160, 80%, 60%);
}
.step-7 .map-placement .material-icons {
	color: hsl(146, 100%, 40%);
}

.step-8 .line,
.step-8 .ano {
	background: hsl(180, 80%, 80%);
}
.step-8 .text .material-icons {
	color: hsl(180, 80%, 60%);
}
.step-8 .map-placement .material-icons {
	color: hsl(166, 100%, 40%);
}

.step-9 .line,
.step-9 .ano {
	background: hsl(200, 80%, 80%);
}
.step-9 .text .material-icons {
	color: hsl(200, 80%, 60%);
}
.step-9 .map-placement .material-icons {
	color: hsl(186, 100%, 40%);
}

.step-10 .line,
.step-10 .ano {
	background: hsl(220, 80%, 80%);
}
.step-10 .text .material-icons {
	color: hsl(220, 80%, 60%);
}
.step-10 .map-placement .material-icons {
	color: hsl(206, 100%, 40%);
}

.step-11 .line,
.step-11 .ano {
	background: hsl(240, 80%, 80%);
}
.step-11 .text .material-icons {
	color: hsl(240, 80%, 60%);
}
.step-11 .map-placement .material-icons {
	color: hsl(226, 100%, 40%);
}

/* carrossel */

.exercicios-wrapper {
	margin: 1em auto;
	width: 100%;
	max-width: var(--max-width);
	box-sizing: border-box;
	position: relative;
}

.exercicios-wrapper .exercicio-icone {
	height: 80px;
	border-radius: 50%;
	position: absolute;
	right: -40px;
	top: -24px;
	background: var(--uniasselvi-light);
	z-index: 100;
}

.carroussel {
	width: 100%;
	background: transparent;
	border-radius: 10px;
	position: relative;
	overflow: hidden;
	padding: 16px 40px;
	margin: 1em 0;
	display: grid;
	grid-template-rows: 1fr auto;
	grid-template-columns: 100%;
	grid-template-areas:
		"item"
		"footer";
	box-sizing: border-box;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
	line-height: 2;
	gap: 16px;
}

.carroussel.noborder {
	box-shadow: none;
	padding: 0;
}

.carroussel * {
	box-sizing: border-box;
}

.carroussel .um-item {
	grid-area: item;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	margin-right: 40px;
	transition: 200ms ease;
	transform: translateX(calc(100% + 40px));
	background: var(--uniasselvi-light);
	overflow: hidden;
	padding: 2px;
}

.um-item h2 {
	margin: 0 0 1em;
	border-bottom: 2px solid var(--unicesumar-accent-2);
}

.carroussel .um-item:first-of-type {
	transform: translateX(0);
}
.ex-alts {
	width: 100%;
	margin-top: 20px;
	margin-bottom: 10px;
}

.uma-alt {
	padding: 0 20px;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-radius: 10px;
	margin: 4px 0;
}

.uma-alt:hover {
	border-radius: 0;
	background: rgba(0, 0, 0, 0.1);
}

.uma-alt label {
	height: 100%;
	width: 100%;
	margin: 0;
	margin-left: 20px;
	padding: 10px 0;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.uma-alt input {
	height: 16px;
	width: 16px;
}

.ex-footer {
	padding-top: 10px;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.ex-enviar {
	padding: 10px;
	border-radius: 40px;
	width: 200px;
	text-align: center;
	text-align-last: center;
	cursor: pointer;
	box-shadow: 0 0 0 2px;
	/* border: 1px solid; */
	transition: 200ms ease;
	display: none;
	user-select: none;
}

.ex-enviar:hover {
	background: forestgreen;
	/* border: 1px solid transparent; */
	/* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); */
	color: white;
}

.ex-enviar.visible {
	display: block;
}

.ex-fb-correto,
.ex-fb-incorreto {
	display: none;
}

.ex-fb-correto.visible,
.ex-fb-incorreto.visible {
	display: block;
	width: 100%;
	padding: 16px;
	box-shadow: 0 0 0 2px forestgreen;
	border-radius: 10px;
	box-sizing: border-box;
}

.ex-fb-incorreto.visible {
	box-shadow: 0 0 0 2px tomato;
}

.carroussel-footer {
	grid-area: footer;
	width: 100%;
	box-sizing: border-box;
	display: flex;
	justify-content: space-between;
	font-size: 12px;
}

.carroussel-indicator {
	display: flex;
}

.carroussel-footer .material-icons {
	height: 40px;
	width: 40px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
}

.carroussel-footer .material-icons:hover {
	background: rgba(0, 0, 0, 0.2);
}

.ex-enun.center {
	text-align: center;
	text-align-last: center;
}

.ex-enun img {
	max-height: 50vh;
	max-width: 100%;
	height: auto;
	width: auto;
}

@media only screen and (max-width: 600px) {
	:root {
		--objetivos-icon-gap: 8px;
	}

	.objetivos-da-disciplina {
		margin: 1em -16px 0;
		width: calc(100% + 32px);
		padding: 16px 0;
	}

	.objetivos-da-disciplina .objetivos-icon {
		width: calc(var(--header-2-icon-size) / 3 * 2);
		height: calc(var(--header-2-icon-size) / 3 * 2);
		border-radius: 50%;
		box-shadow: 0 0 0 var(--objetivos-icon-gap) var(--uc-c-grey-lighter);
		right: calc(16px + var(--objetivos-icon-gap));
		top: -32px;
	}

	.objetivos-da-disciplina p,
	.objetivos-da-disciplina ul {
		padding: 0 16px;
	}

	.content-text .objetivos-da-disciplina h2 {
		padding: 8px 16px;
		width: 100%;
	}

	.exercicios-wrapper {
		margin: 1em -16px;
		width: calc(100% + 32px);
		line-height: 1.5;
	}

	.carroussel {
		padding: 40px 20px;
	}

	.dual-columns {
		grid-template-rows: 1fr auto;
		grid-template-areas:
			"main"
			"side";
	}

	.dual-columns.r-1by3,
	.dual-columns.r-1by2,
	.dual-columns.r-3by1,
	.dual-columns.r-2by1 {
		grid-template-columns: 1fr;
	}

	.dual-columns.r-2by1 .second,
	.dual-columns.r-1by2 .first,
	.dual-columns.r-1by3 .first,
	.dual-columns.r-3by1 .second {
		grid-area: side;
	}
	.dual-columns.r-2by1 .first,
	.dual-columns.r-1by2 .second,
	.dual-columns.r-1by3 .second,
	.dual-columns.r-3by1 .first {
		grid-area: main;
	}
}

.carroussel .um-item h2 {
	background: var(--uc-ca-2);
	border: 0;
	width: fit-content;
	padding: 8px 16px;
	color: var(--uc-c-white);
	border-radius: 10px;
	margin: 0 0 -1em;
	z-index: 3;
	box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.1);
	position: relative;
}

.ex-enun img {
	max-height: none;
	margin: 0 16px;
	width: calc(100% - 32px);
	border-radius: 10px;
}

.um-item .legenda {
	position: relative;
	z-index: 3;
	width: 90%;
	margin: -80px auto 0;
	background: var(--uc-c-grey-lighter);
	padding: 16px;
	border-radius: 10px;
	box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1), 0 3px 9px rgba(0, 0, 0, 0.05);
}

.atividades .um-item p {
	margin: 1em auto;
	box-shadow: none;
	background: transparent;
	width: auto;
	padding: 0;
}

/* custom */
@media screen and (max-width: 780px) {
	.dual-columnss {
		grid-template-columns: 1fr;
		place-items: center;
	}
}

div.div-destaque {
	position: relative;
	overflow: hidden;
	padding: 16px;
	margin: 1em -16px;
	border-radius: 10px;
	box-shadow: var(--diffuse-light-shadow);
}

.destaque-grey {
	background: var(--uc-c-grey-light);
}

div.destaque-g-51 {
	background: var(--uc-g-51);
	color: var(--text-color-on-accent);
}

div.destaque-g-52 {
	background: var(--uc-g-52);
	color: var(--text-color-on-accent);
}
div.destaque-g-21 {
	background: var(--uc-g-21);
	color: var(--text-color-on-accent);
}

span.span-destaque {
	border-radius: 4px;
	padding: 2px 4px;
	color: var(--text-color-on-accent);
}

span.destaque-g-21 {
	background: var(--uc-g-21);
}
span.destaque-g-51 {
	background: var(--uc-g-51);
}
span.destaque-g-52 {
	background: var(--uc-g-52);
}
span.destaque-g-53 {
	background: var(--uc-g-32);
}

.quote-r::before {
	content: "\201F";
	position: absolute;
	top: -0.6em;
	left: 0;
	font-size: 32px;
	color: inherit;
}
.quote-l::before {
	content: "\201D";
	position: absolute;
	top: -0.6em;
	right: 0;
	font-size: 32px;
	color: inherit;
}
.quote-r {
	position: relative;
	text-align: right;
	font-weight: bold;
	font-size: 1.1em;
	padding-left: 80px;
	width: 100%;
}
.quote-l {
	position: relative;
	text-align: left;
	font-weight: bold;
	font-size: 1.1em;
	padding-right: 80px;
	width: 100%;
}

/* roxa */
.quote-r-1,
.quote-l-1 {
	color: var(--uc-ca-3-dark);
}
/* azul */
.quote-r-2,
.quote-l-2 {
	color: var(--uc-ca-2-dark);
}
/* neutra */
.quote-r-3,
.quote-l-3 {
	color: var(--uc-c-dark);
}

.dica-header {
	position: absolute;
	right: -4px;
	padding: 4px;
	top: -44px;
	display: flex;
	align-items: center;
	background: var(--uc-c-grey-lighter);
	border-radius: 40px;
}

.dica-header img {
	height: var(--header-2-icon-size);
	width: var(--header-2-icon-size);
}

.dica-header span {
	display: block;
	margin-right: -16px;
	border-radius: 10px;
	background: var(--uc-g-42);
	color: var(--text-color-on-accent);
	font-weight: bold;

	font-family: var(--ff-headers);

	padding: 12px 24px;
	line-height: 1;
}

.table-wrapper {
	width: 100%;
	overflow: auto;
}

.table-wrapper table {
	border-collapse: collapse;
	width: 100%;
}

.table-wrapper table th {
	background: var(--uc-ca-2-light);
	padding: 16px;
}

.table-wrapper table td {
	padding: 16px;
	border: 1px solid var(--uc-c-grey-light);
}

.table-wrapper table tr:nth-child(even) {
	background: hsl(0, 0%, 98%);
}

.unit-group .unit-toggle {
	padding: 8px 16px;
	font-size: 1em;
	border: 0;
	border-radius: 4px;
	margin: 1em 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: #fafafa;
	cursor: pointer;
}

.unit-toggle img {
	height: 24px;
	width: 24px;
	object-fit: contain;
}

.unit-toggle div {
	display: flex;
	align-items: center;
	gap: 16px;
}

.unit-group .sidebar-item {
	display: none;
}

.unit-group.active .sidebar-item {
	display: grid;
}

.unit-group .sidebar-item.no-icon.active {
	background: hsl(204, 100%, 97%);
	box-shadow: 0 0 0 1px hsl(204, 100%, 87%);
}

.unit-group .sidebar-item.no-icon {
	grid-template-columns: 1fr;
}