@charset "utf-8";

:root {

	/* Colors */
	--background-color: #FFF2CC;
	--header-background-color: #FFBC00;
	--content-border-color: #707070;
	--content-background-color: #ffffff;
	--nav-tray-background-color: #F3F3F3;

	--instruction-color: #DDF3FB;
	--quiz-instruction-color: #7AE3C7;
	--font-color: #000000;
	--link-color: #227ea8;
	--alert-color: #FF0303;
	--popup-quiz-color: #9683F3;

	--disabled-color: #EBEBEB;
	--disabled-border-color: #9DC0CB;


	/* Text */
	--font-size-h1: 22px;
	--font-size-h2: 20px;
	--font-size-p: 16px;
	--font-size-button: 17px;
	--font-size-sm: 12px;
	--font-size-error: 12px;
	--text-line-height: 19px;



	/* Buttons */
	--border-color: #0098C7;
	--border-radius: 6px;
	--button-color: #F9CB0D;

	--button-menu-color: #ffffff;
	--button-disabled-color: #EBEBEB;

	--audio-button-border: #707070;
	--audio-button-bg: #E0E0E0;

	--button-padding-x: 20px;
	--button-padding-y: 8px;

	--dashboard-border-color: #707070;
	--dashboard-purple-1: #DDD0FF;
	--dashboard-purple-2: #AD8FFD;
	--dashboard-blue-1: #AFE1F1;
	--dashboard-blue-2: #2D97CB;
	--dashboard-green-1: #D0E072;
	--dashboard-green-2: #5EA344;



	/* Grid Colors */
	--grid-color-1: #EF4027;
	--grid-color-2: #7662AB;
	--grid-color-3: #A5B92D;
	--grid-color-4: #2D97CB;
	--grid-color-5: #FF9831;



	/* Page Settings */
	--page-margin: 20px;
	--max-page-width: 740px;
	--min-page-width: 320px;

	--header-height: 55px;
	--navigation-height: 56px;
}

/*------------------------------------------------------------
	html, body
------------------------------------------------------------*/
*,
*:before,
*:after {
	font-family: Roboto, sans-serif;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

html,
body,
p,
label,
option,
select,
input,
input[type="radio"],
input[type="checkbox"] {
	font-family: Roboto, sans-serif;
	color: var(--font-color);
	font-weight: 500;
	font-size: var(--font-size-p);
	scroll-behavior: smooth;
}

/*------------------------------------------------------------
	Buttons
------------------------------------------------------------*/
.standard-button,
#page-navigation.button {
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--button-color);
	text-align: center;
}

/*------------------------------------------------------------
	Icons
------------------------------------------------------------*/
.icon-yield-yellow,
.icon-yield-red,
.icon-checkmark {
	display: grid;
	grid-template-columns: 50px auto;
	align-items: center;
}

.icon-yield-yellow::before {
	content: url(images/icon-yield-yellow-40x40.png);
}

.icon-yield-red::before {
	content: url(images/icon-yield-red-40x40.png);
}

.icon-checkmark::before {
	content: url(images/icon-check-mark.svg);
	max-width: 40px;
}


.image.icon-module-end {
	margin: 60px auto 80px;
}

.image.icon-module-end.completed img {
	max-height: 140px;
}

.image.icon-module-end.incomplete img {
	max-height: 112px;
}

.image.icon-key-steps {
	width: 50%;
	margin: 20px auto;
}

img.icon {
	max-width: 100px;
	max-height: 60px;
}

img.content-icon {
	max-width: 20px;
    max-height: 20px;
    vertical-align: bottom;
}

/*------------------------------------------------------------
	Content
------------------------------------------------------------*/
.content-wrapper {
	position: relative;
	min-height: calc(100vh - var(--header-height) - var(--navigation-height) - var(--page-margin));
	margin: 0 15px 20px;
	padding: 40px 20px 20px;
	border: 1px solid var(--border-color);
	border-top: none;
	background-color: var(--content-background-color);
}

.content-wrapper ul {
	margin: 0 0 20px 20px;
	padding: 0;
}

.content-wrapper ul li {
	padding-bottom: 20px;
}

.content-wrapper ul.checkmark {
	margin: 0 0 20px;
}

.content-wrapper ul.checkmark li {
	padding: 0 0 20px 40px;
	background: url(images/icon-check-mark.svg) no-repeat transparent;
	background-size: 30px;
	list-style-type: none;
}

.content-wrapper ol {
	padding-left: 20px;
}

/*------------------------------------------------------------
	2 Columns
------------------------------------------------------------*/
.content-wrapper > div.content-2-columns ul {
	display: grid;
	grid-template-columns: [col-1] 50% [col-2] 50%;
	margin: 20px 0;
	padding: 0;
	border: 3px solid var(--border-color);
	background-color: var(--border-color);
}

.content-wrapper > div.content-2-columns li {
	display: grid;
	padding: 0;
	border: 3px solid var(--border-color);
	background-color: var(--content-border-color);
	list-style-type: none;
}

.content-wrapper .content-2-columns h3 {
	padding: 10px;
	background-color: var(--content-border-color);
	font-size: 16px;
	color: #fff;
}

.content-wrapper .content-2-columns img {
	display: inline;
	object-fit: cover;
	width: 100%;
	height: 100%;
}

.content-wrapper ul.content-2-columns.icons {
	margin: 20px 0 0;
}

.content-wrapper ul.content-2-columns.icons li {
	display: grid;
	grid-template-columns: [col-1] 90px [col-2] auto;
	column-gap: 20px;
	padding: 20px 0;
	border: none;
	border-top: 2px solid #ccc;
	background-color: transparent;
	list-style-type: none;
}

.content-wrapper ul.content-2-columns.icons li img {
	display: flex;
	align-self: center;
	object-fit: contain;
	max-height: 60px;
}

.content-wrapper ul.content-2-columns.icons li p {
	display: flex;
	align-self: center;
	padding: 0;
}

.content-wrapper ul.content-2-columns.icons li:last-child {
	border-bottom: 2px solid #ccc;
}

/*------------------------------------------------------------
	Header
------------------------------------------------------------*/
#header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	position: relative;
	justify-content: space-between;
	width: 100%;
	height: var(--header-height);
	background: var(--background-color) url(images/header-bg-pattern.svg) repeat-x center;
}

#header .program-title,
.pop-header .program-title {
	z-index: 1;
	position: absolute;
	top: 0;
	left: 0;
	background: url(images/program-title.svg) no-repeat center;
	background-size: 188px;
	width: 100%;
	height: var(--header-height);
}

[lang="es"] #header .program-title,
[lang="es"] .pop-header .program-title {
	background: url(images/program-title-es.svg) no-repeat center;
	background-size: 215px;
}

/*------------------------------------------------------------
	Footer: Navigation
------------------------------------------------------------*/
#footer.navigation {
	position: relative;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	width: 100%;
	height: var(--navigation-height);
	padding: 0px;
	border-top: 1px solid var(--border-color);
	background-color: #e7e7e7;
}

#footer.navigation .button {
	width: 44px;
	height: 44px;
	margin-top: 4px;
}

#footer.navigation .button a {
	background-repeat: no-repeat;
	background-position: center;
}

#footer.navigation .home {
	background: url(images/icon-home.svg) 0 / 39px no-repeat;
}

#footer.navigation .language-en {
	background: url(images/icon-language-en.svg) 0 / 36px no-repeat;
}

#footer.navigation .language-es {
	background: url(images/icon-language-es.svg) 0 / 36px no-repeat;
}

#footer.navigation .tools {
	background: url(images/icon-tools.svg) 0 / 35px no-repeat;
}

#footer.navigation .menu {
	background: url(images/icon-menu.svg) 0 / 28px no-repeat;
}

/*------------------------------------------------------------
	Login
------------------------------------------------------------*/
.language-select-button {
	margin: auto;
	padding: 10px 20px;
	color: #000;
	text-decoration: none;
}

.language-select-block {
	text-align: center;
	margin-bottom: 30px;
	margin-top: -10px
}

.preferred-language-select-block {
	text-align: center;
	margin-bottom: 30px;
	margin-top: 20px
}


/*------------------------------------------------------------
	Dashboard
------------------------------------------------------------*/
#dashboard .tool-container,
#popup-tool-menu.pop-tool-menu .tool-container {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5%;
	margin-bottom: 50px;
	padding: 0px 5%;
}

/*------------------------------------------------------------
	Pop-up Tool Menu
------------------------------------------------------------*/
#popup-tool-menu.pop-tool-menu .tool-container {
	gap: 4px;
}

#popup-tool-menu.pop-tool-menu h2 {
	position: relative;
	top: 67px;
	width: 100%;
	margin-left: var(--page-margin);
	font-size: var(--font-size-p);
	font-weight: 600;
	text-align: left;
}

#popup-tool-menu .popup-tool-menu-content {
	position: relative;
	margin: 60px var(--page-margin) var(--page-margin) var(--page-margin);
	padding: 20px 0px 10px;
	border: 1px solid var(--content-border-color);
	background-color: var(--content-background-color);
}

.pop-menu {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	z-index: 100;
	padding: calc(var(--page-margin) * 3) var(--page-margin) var(--page-margin) var(--page-margin);
	background-color: var(--background-color);

	overflow: hidden;
	overflow-y: auto;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}

.pop-menu-hide {
	display: none !important;
}

.pop-menu-show {
	display: block !important;
}

.pop-tool-menu {
	z-index: 500;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: var(--background-color);

	overflow: hidden;
	overflow-y: auto;
}

.pop-tool-menu-hide {
	display: none !important;
}

.pop-tool-menu-show {
	display: block !important;
}

.pop-menu .pop-header,
.pop-tool-menu .pop-header {
	background: var(--background-color) url(images/header-bg-pattern.svg) repeat-x center;
	width: 100%;
	height: var(--header-height);

	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;

	position: absolute;
	top: 0px;
	left: 0px;
}

.pop-menu .close,
.pop-tool-menu .close {
	position: absolute;
	top: 66px;
	right: calc(var(--page-margin) * 2);
	z-index: 90;
}

.pop-menu ul {
	position: relative;
	top: 38px;
	border: 1px solid var(--content-border-color);
	background-color: var(--content-background-color);
	padding: 0px 10px;
	margin: 0px 0px 40px;
}

.pop-menu ul li {
	position: relative;
	border-top: 1px solid var(--border-color);
	list-style: square url(images/menu-dot-not-visited.png);
	list-style-position: inside;
	word-break: break-word;
	padding: 15px 34px 10px 20px;
	text-indent: -20px;
}

.pop-menu ul li.visited {
	list-style: square url(images/menu-dot-visited.png);
	list-style-position: inside;
}

.pop-menu ul li .bookmark {
	position: absolute;
	right: 5px;
	top: 4px;
	width: 26px;
	height: 35px;
	padding: 5px;
	margin-right: -20px;
}

.pop-menu ul li .bookmark img {
	width: auto;
	height: 100%;
}

.pop-menu ul li:first-child {
	position: absolute;
	top: -45px;
	left: 0px;
	list-style: none;
	font-weight: 600;
}

.pop-menu ul li:nth-child(1),
.pop-menu ul li:nth-child(2) {
	border-top: none;
}

.pop-menu ul li a {
	display: block;
	margin: -15px 0 0 17px;
	text-decoration: none;
	color: var(--font-color);
}

/* For Firefox only. */
@supports (-moz-appearance: none) {

	.pop-menu ul li {
		padding: 10px 34px 8px 20px;
	}

	.pop-menu ul li:first-child {
		top: -40px;
	}

	.pop-menu ul li a {
		margin: -19px 0 2px 17px;
	}
}

/* For iOS devices only. */
@supports (-webkit-touch-callout: none) {

	.pop-menu ul li {
		padding: 10px 34px 10px 20px;
	}

	.pop-menu ul li:first-child {
		top: -40px;
	}

	.pop-menu ul li a {
		margin: 0;
	}
}

/*------------------------------------------------------------
	Recipe
------------------------------------------------------------*/
.content-wrapper .recipe .image {
	margin-bottom: 30px;
}

.content-wrapper .recipe .ingredients {
	margin: 10px 0 30px;
	padding: 16px 15px 0 20px;
	background-color: #e4e4fe;
}

.content-wrapper .recipe .serving {
	margin: 10px 0 30px;
	padding: 16px 15px 0 35px;
	border: 1px solid #ccc;
}

.content-wrapper .recipe .serving ul {
	margin: 0;
}

.content-wrapper .recipe .directions {
	margin-top: 10px;
	padding-top: 2px;
	background-color: var(--instruction-color);
}

.content-wrapper .recipe .directions ol {
	padding: 0 15px 0 35px;
}

.content-wrapper .recipe .directions ol li {
	padding-bottom: 20px;
}
































body[theme='default'] {
	--subheader-color: #C9BFE6;
	--subheader-text-color: #000000;
}

body[theme='learn-more'] {
	--subheader-color: #776CC1;
	--subheader-text-color: #FFFFFF;
	--page-icon: url(images/page-icon-learn-more.svg);
	--close-button: url(images/icon-close-button-black.svg);
}

body[theme='tracker'] {
	--subheader-color: #FED215;
	--subheader-text-color: #000000;
	--page-icon: url(images/page-icon-steps-tracker.svg);
	--close-button: url(images/icon-close-button-black.svg);
}

body[theme='goals'] {
	--subheader-color: #2D97CB;
	--subheader-text-color: #ffffff;
	--page-icon: url(images/page-icon);
	--close-button: url(images/icon-close-button-white.svg);
}

body[theme='coach'] {
	--subheader-color: #D0E072;
	--subheader-text-color: #000000;
	--page-icon: url(images/page-icon-message-coach.svg);
	--close-button: url(images/icon-close-button-black.svg);
}

body[theme='messages'] {
	--subheader-color: #AFE1F1;
	--subheader-text-color: #000000;
	--page-icon: url(images/page-icon-health-messages.svg);
	--close-button: url(images/icon-close-button-black.svg);
}

body[theme='comadres'] {
	--subheader-color: #FF8800;
	--subheader-text-color: #000000;
	--page-icon: url(images/page-icon-compadres.svg);
	--close-button: url(images/icon-close-button-black.svg);
}

body[theme='help'] {
	--subheader-color: #EF4027;
	--subheader-text-color: #ffffff;
	--page-icon: url(images/page-icon-help.svg);
	--close-button: url(images/icon-close-button-white.svg);
}

/* END VARIABLES */



/* SETUP */
body,
#program-wrapper,
.button p,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
	padding: 0px;
	margin: 0px;
}

/*
*,
*:before,
*:after {
	font-family: 'Roboto', sans-serif;
	color: var(--font-color);
	font-size: var(--font-size-p);
	font-weight: 400;

	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;

	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
*/

h1 {
	font-size: var(--font-size-h1);
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: 600;
	padding-bottom: 20px;
}

p {
	font-size: var(--font-size-p);
	line-height: var(--text-line-height);
	padding-bottom: 20px;
}

b,
strong {
	font-weight: 700;
}

a {
	color: var(--link-color);
}

ul.li-checkmarks {
	list-style-type: none;
}

ul.li-checkmarks li:before {
	content: '✓';
	color: var(--border-color);
	margin-right: 10px;
	margin-left: -23px;
}

/*
li {
	line-height: var(--text-line-height);
	padding-bottom: 20px;
}
*/

.instructions {
	padding: 8px 20px;
	margin: 0px 0px 20px;
	background-color: var(--instruction-color);
}

.button {
	position: relative;
}

.button a,
.menu-container ul li a {
	text-decoration: none;
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
}

.button a span {
	position: absolute;
	top: 50%;
	transform: translate(0px, -50%);
	left: 0px;
	width: 100%;
	padding: 5px 20px;
}

body {
	background-color: var(--background-color);
	background-color: #ffffff;
}

.program-wrapper {
	overflow-x: hidden;
	background-color: var(--background-color);
	xwidth: 100vw;
	max-width: var(--max-page-width);
	min-width: var(--min-page-width);
	min-height: 100vh;
	margin: 0px auto;
}

.show {
	opacity: 1 !important;
	-webkit-transition-duration: .4s;
	-webkit-transition-property: all;
	-webkit-transition-timing-function: ease-in-out;
}

.hidden {
	display: none !important;
}

.overflow-hidden {
	overflow: hidden;
}

.menu-hide {
	opacity: 0 !important;
	visibility: hidden !important;
}

.disclaimer,
.disclaimer b {
	font-size: var(--font-size-sm);
}

.disabled {
	cursor: default;

	border-color: #bbbbbb !important;
	background-color: #dddddd !important;

	filter: gray;
	-webkit-filter: grayscale(1);
	filter: grayscale(1);
}

.disabled a {
	pointer-events: none;
}

.disabled a p {
	color: #777777;
}

.debug {
	position: absolute;
	top: 25px;
	right: 10px;
	font-size: var(--font-size-sm);
	text-align: right;
	color: #333333;
	z-index: 1;
	display: none;
}

/* END SETUP */








/* FORM STYLES */

.form-container {
	width: 100%;
	margin: 20px 0px 0px;
}

.form-item {
	width: 100%;
}

.form-item.submit {
	text-align: center;
}

.form-item.button-row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-evenly;
}

.form-item.button-row {}

.form-item label {
	display: block;
	width: 100%;
	text-align: left;
}

.form-item h4 {
	margin-top: 20px;
	margin-bottom: 20px;
}

.form-item input,
.form-item select {
	width: 100%;
	padding: 14px;
	margin: 10px 0px;

	outline: none;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: #ffffff;
}

.form-item input:disabled,
.form-item select:disabled {
	border-color: var(--disabled-border-color);
	background-color: var(--disabled-color);
}

.form-item option {
	border-radius: 0px;
	background-color: #ffffff;
}

.form-item select {
	background: transparent;
	background-image: url(images/select-menu-arrow.png);
	background-repeat: no-repeat;
	background-position-x: 95%;
	background-position-y: 20px;
	color: #777777;
}

.form-item select:after {
	background-color: #8665D2;
}


/* FORM Checkbox Styles */
.checkbox-container {
	position: relative;
	display: block;

	padding: 0px 0px 0px 35px;
	xmargin-bottom: 12px;

	font-size: 22px;
	cursor: pointer;

	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkbox-container input {
	position: absolute;
	top: -0px;
	right: -20px;
	height: 0px;
	width: 0px;
	opacity: 0;
	cursor: pointer;
}

/*
.checkmark {
	position: absolute;
	top: 0px;
	left: 0px;

	height: 25px;
	width: 25px;

	background-color: var(--button-color);
	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
}

.checkbox-container:hover input~.checkmark {
	background-color: var(--button-dash-color);
}

.checkmark:after {
	content: "";
	position: absolute;
	display: none;
}

.checkbox-container input:checked~.checkmark:after {
	display: block;
}

.checkbox-container .checkmark:after {
	left: 5px;
	top: 5px;
	width: 5px;
	width: 11px;
	height: 11px;
	border-radius: 2px;
	border: 3px solid var(--border-color);
	background-color: var(--border-color);
}
*/

.form-item input:focus {
	border: 1px solid var(--border-color);
}

.form-container.error .form-item .text-input,
.form-container.error .form-item select {
	border-color: var(--alert-color) !important;
}

.form-container.error .form-item .text-input::placeholder,
.form-container.error .form-item select {
	color: var(--alert-color) !important;
}

.form-container .error-message,
.form-container .error-message a {
	font-size: var(--font-size-error);
}

.form-container .error-message {
	display: none;
}

.form-container.error .error-message {
	display: block;
	color: var(--alert-color);
}

.form-container.error .error-message a {
	color: var(--alert-color);
}

.form-container .required {
	padding-left: 0px;
	padding-bottom: 50px;
	font-size: var(--font-size-sm);
	text-align: right;
}

.submit {
	text-align: center;
	align-items: center;
	width: 45%;
}

.submit input {
	padding: 8px;
	margin: 40px auto 10px;
	width: 100%;
	max-width: 200px;

	border: 2px solid var(--border-color);
	border-radius: var(--border-radius);
	background-color: var(--button-color);

	cursor: pointer;
}

.bottom-message {
	position: absolute;
	left: 20px;
	right: 20px;
	bottom: 20px;
}

.bottom-message:last-child {
	margin-bottom: 0px;
}

.logout {
	width: 100%;
	padding-top: 20px;
	margin-bottom: 40px;
	text-align: center;
}

.logout #form-btn {
	min-width: 110px;
}

/* END FORM STYLES */




/* DASHBOARD STYLES */
#dashboard .content-wrapper {
	padding: var(--page-margin);
	margin: 0px;
	border: unset;
	background-color: unset;
}

#dashboard h2 {
	text-align: center;
	margin-bottom: 5%;
}

.module-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
	gap: 15px 0px;

	width: 100%;
	margin: 0px 0px 40px 0px;
}

.module-button {
	position: relative;
	width: 46%;
	max-width: 170px;
	height: 105px;

	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);

	background-image: linear-gradient(to bottom, var(--dashboard-purple-1), var(--dashboard-purple-2));

	font-size: var(--font-size-p);
	text-align: center;
}

.module-button p {
	padding: 0 10px;
	font-size: 18px;
}

.in-progress {
	background-image: linear-gradient(to bottom, var(--dashboard-blue-1), var(--dashboard-blue-2));
}

.complete {
	background-image: linear-gradient(to bottom, var(--dashboard-green-1), var(--dashboard-green-2));
}

.module-button img {
	margin: auto;
}

.module-button a {
	display: grid;
	grid-template-rows: 36px;
}

.tool-button a,
.module-button a {
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;

	padding-top: 10px;

	text-decoration: none;
	color: #000000;
}

.module-button.disabled {
	border-color: var(--border-color);
	background-color: #ffffff;
}

.module-button.disabled a {
	color: var(--border-color);
}


.tool-button {
	position: relative;
	text-align: center;
	height: 160px;
}

.tool-button p {
	margin-top: 10px;
}

/* END DASHBOARD STYLES */





/* CONTENT STYLES */
#login .instructions {
	margin-top: 0px;
}

.section-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;

	border-bottom: 1px solid var(--border-color);
	background-color: var(--subheader-color);
	width: 100%;
	height: var(--header-height);
	padding: 15px 30px 0px;
}

.section-header h1 {
	color: var(--subheader-text-color);
}

.section-header .close-button {
	background-repeat: no-repeat;
	background-position: center;
	background-image: var(--close-button);
	width: 30px;
	height: 30px;
}

.section-header .icon {
	background-repeat: no-repeat;
	background-position: center;
	background-image: var(--page-icon);
	width: 40px;
	height: 40px;
	margin-top: -7px;
}

.content-header {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-between;

	width: 100%;
	height: 40px;
	padding: 0px;
	margin: -20px 0px 10px;
}

.image {
	margin: 0px 0px 20px;
	padding: 0px;
}

.image img {
	padding: 0px;
	margin: 0px;
	width: 100%;
	height: auto;

	image-rendering: -moz-crisp-edges;
	/* Firefox */
	image-rendering: -o-crisp-edges;
	/* Opera */
	image-rendering: -webkit-optimize-contrast;
	/* Webkit (non-standard naming) */
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
	/* IE (non-standard property) */
}

.video {
	position: relative;
	padding: 56.25% 0 0;
	margin: 20px 0;
}

.video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.back-button a {
	text-decoration: none;
	background-image: url(images/btn_arrow-l.png);
	background-repeat: no-repeat;
	background-position: 0px 8px;

	padding: 4px 10px 4px 13px;
	cursor: pointer;
}

.bookmark-button {
	position: relative;
	background-image: url(images/icon-page-bookmark-unselected.svg);
	background-repeat: no-repeat;
	background-position: center;

	width: 30px;
	height: 32px;
}

.bookmark-button a {
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

.bookmark-button.selected {
	background-image: url(images/icon-page-bookmark.svg);
}

#page-navigation.button {
	margin: 40px auto 10px;
	width: 100%;
	height: 40px;
}

#page-navigation.button a {
	text-decoration: none;
	text-align: center;
	color: #000000;

	padding-top: 8px;
}

#page-navigation.button a::before {
	content: "";
	position: absolute;

	background-image: url(images/btn_arrow-r.png);
	background-repeat: no-repeat;
	background-position: center;

	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;

	z-index: 0;
	transform: translate(26px, 0px);
}

#page-navigation.button.nav-home a::before {
	transform: translate(30px, 0px);
}

#page-navigation.button.nav-next-es a::before {
	transform: translate(42px, 0px);
}

#login .content-wrapper div:nth-last-child(2) {
	margin-bottom: 90px;
}

#help h2 {
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 10px;
	margin-bottom: 20px;
}

#help h3 {
	padding-bottom: 10px;
}

.tool-page-icon {
	text-align: center;
	margin-bottom: 30px;
}

/* END CONTENT STYLES */



/* INDIVIDUAL PAGE STYLES */
#p10 table {
	border-collapse: separate;
	border-spacing: 10px 40px;

}

#p10 table tr td {
	vertical-align: top;
}

#p10 table tr td:nth-child(1) {
	text-align: center;
}


/* Medium to large screen devices (720px and above) */
@media only screen and (min-width: 720px) {

	.grid-popup.cols-1 span {
		font-size: 4em;
		font-size: var(--font-size-p);
	}

	.grid-popup.cols-2 span {
		font-size: 3.2em;
		font-size: var(--font-size-p);
	}

	.grid-popup.cols-3 span {
		font-size: 2em;
		font-size: var(--font-size-p);
	}

	.grid-popup.cols-4 span {
		font-size: 1.5em;
		font-size: var(--font-size-p);
	}
}




/*------------------------------------------------------------
	Small Screens
------------------------------------------------------------*/
@media only screen and (max-width : 360px) {

	/*------------------------------------------------------------
		Login
	------------------------------------------------------------*/
	#login .content-wrapper div:nth-last-child(2) {
		margin-bottom: 50px;
	}
	
	/*------------------------------------------------------------
		Dashboard
	------------------------------------------------------------*/
	.module-button p {
		font-size: 16px;
	}
}