/* CODIGO FINAL*/

@charset "UTF-8";

:root {
	--dynamic-color-1: #046380; /* Default color */
    --dynamic-color-2: #002F2F; /* Default color */
	--dynamic-color-3: rgb(254, 247, 237); /* Default color */
}


/*Fuentes*/
@font-face {
	font-family: "Exo2";
	src: url("../font/Exo2-VariableFont_wght.ttf");
}

body {
	font-family: "Exo2";
	background: #046380;
}

/*limpiar estilos*/
* {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* error */

.error-box-container {
	display: flex;
	justify-content: center;
	margin-top: 5rem;
}

.error-box-info {
	background: #EFECCA;
	width: 50%;
	align-self: center;
	padding: 50px;
	border-radius: 15px;
	box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	-webkit-box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	-moz-box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	margin-left: auto;
	margin-right: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.error-box-info h4 {
	margin-bottom: 2rem;
	text-align: center;
}

.error-box-info p {
	text-align: center;
}

/* FAQS */

.terms-contenedor .search_courses_home {
	margin-top: 0;
    padding-top: 0;
	position: sticky;
	top: 100px;
	padding-top: 1rem;
}

.container-faqs {
	display: flex;
	flex-direction: column;
	margin-top: 2rem;
	align-self: center;
	justify-content: center;
	margin-bottom: 2rem;
}

.container-FAQ {
	display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin-left: 3rem;
    margin-right: auto;
}

.terms-container-faq h4 {
	color: #046380;
	margin: 1rem;
	font-size: 1rem;
	cursor: pointer;
}

.terms-container-faq h4:hover {
	opacity: 0.8;
}

.container-FAQ p {
	color: #002F2F;
	margin: 1rem;
}

.hidden-faq-container {
	display: none;
	flex-direction: column;
}

.hidden-faq-container ul {
	margin-left: 2rem;
	margin-bottom: 0.5rem;
}

.title-faqs {
	margin-top: 110px;
	top: 100px;
	width: 100%;
	padding-top: 1rem;
	background: #046380;
	z-index: 1000;
}
.title-faqs h3 {
	color: #E6E2AF;
	padding-bottom: 1.2rem;
}

.terms-container-faq {
	background: #EFECCA;
	width: 70%;
	height: auto;
	align-self: center;
	padding: 50px;
	border-radius: 15px;
	box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	-webkit-box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	-moz-box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	margin-bottom: 7rem;
}



/* TERMS AND CONDITIONS */

.terms-contenedor header {
	position: fixed;
	top: 0;
	height: 100px;
    display: flex;
    justify-content: center;
    flex-direction: column;
	z-index: 1000;
}

.terms-contenedor header a:hover {
	opacity: 0.6;
}

.title-terms {
	position: sticky;
	top: 100px;
	width: 100%;
	padding-top: 1rem;
	background: linear-gradient(
        to top, 
        rgba(4, 99, 128, 0.8) 0%,
        rgba(4, 99, 128, 1) 10%, 
        rgba(4, 99, 128, 1) 100% 
    );
}

.terms-contenedor .landing-footer {
	position: relative;
	margin-bottom: 0;
}

.terms-contenedor {
    min-height: 100vh;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    background: #046380;
    background-size: cover;
    position: relative;
}

.terms-box {
	display: flex;
	flex-direction: column;
	margin-top: 8rem;
	align-self: center;
	justify-content: center;
	margin-bottom: 2rem;
}

.terms-box h3 {
	color: #E6E2AF;
}

.terms-box h4 {
	color: #002F2F;
	margin-bottom: 2rem;
	margin-top: 2.5rem;
}

.terms-box p {
	color: #002F2F;
	margin-left: 2rem;
}

.title-terms p {
	color: #A7A37E;
	text-align: center;
	margin: 0;
	margin-top: -30px;
	margin-bottom: 30px;
}

.terms-box ul {
	color: #002F2F;
	margin-left: 4rem;
}

.address-dmca ul {
	margin-left: 8rem;
}

.terms-box li {
	color: #002F2F;
	margin-top: 0.5rem;
	list-style-type: disc;
}

.address-dmca li {
	list-style-type: none;
}

.terms-container {
	background: #EFECCA;
	width: 70%;
	height: auto;
	align-self: center;
	padding: 50px;
	border-radius: 15px;
	box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	-webkit-box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	-moz-box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	margin-bottom: 2rem;
	margin-bottom: 7rem;
}

/* LANDING */
.about-us-main-container {
	display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    background-position: center;
	justify-content: center;
}

.about-us-logo-cont {
	display: flex;
	width: 100%;
	height: 80px;
	justify-content: space-evenly;
    align-items: center;
	position: fixed;
    top: 0;
	left: 0;
	background: #002F2F;
	z-index: 4;
}

.about-us-logo-cont .login {
	color: #EFECCA;
	cursor: pointer;
	text-decoration: none;
	margin-right: 3rem;
	opacity: 0.8;
}

.about-us-logo-cont .login:hover {
	color: #EFECCA;
	cursor: pointer;
	text-decoration: underline;
	margin-right: 3rem;
	opacity: 1;
}


.video-background {
	overflow: hidden;
	width: 100%;
	height: 100%;
  }
  
.video-background video {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.video-background::after {
	content: '';
	background-color: rgb(0, 47, 47, 0.7);
	width: 100%;
	height: 100%;
	z-index: -1;
	position: fixed;
}

.video-background img {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -1;
}

.about-us-text-container {
    display: flex;
    flex-direction: row;
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: flex-start;
}

.about-us-text-container h1 {
    color: #A7A37E;
	text-align: center;
	font-size: 4rem;
	margin-top: 2rem;
	font-weight: 800;
	margin-bottom: 5rem;
}

.about-us-text-container h3 {
    color: #EFECCA;
	text-align: center;
	font-size: 2rem;
	margin-top: 2rem;
	font-weight: 600;
	margin-bottom: 5rem;
}

.about-us-text-container h4 {
    color: #A7A37E;
	text-align: center;
	font-size: 1.2rem;
	margin-top: 3rem;
	font-weight: 600;
}

#movingElement {
	transition: transform 0.01s ease-out
}

.landing-main-container {
	display: flex;
    flex-direction: column;
    background-image: 
		linear-gradient(rgba(0, 47, 47, 0.6), 
		rgba(0, 47, 47, 0.6)), 
		url(/images/landing/landing-bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    height: 100vh;
    background-position: center;
	justify-content: center;
}

a.header-content, a.header-content:hover {
	text-decoration: none;
}

.header-content {
	color: #EFECCA;
	transition: opacity 0.5s ease;
	display: flex;
	flex-direction: row;
	cursor: pointer;
  }

.header-content-logo {
	display: flex;
	justify-content: center;
	cursor: pointer;
	margin: auto;
}

.header-content p {
	color: #EFECCA;
	margin: auto;
	margin-left: 1rem;
  }


.landing-user-type {
	transition: opacity 0.5s ease;
  }

.problems-container {
	display: flex;
    flex-direction: column;
    width: 90%;
	height: 100%;
	margin: auto;
}

.problems-container h1 {
    color: #EFECCA;
	text-align: center;
	font-size: 3rem;
	margin-top: 2rem;
	font-weight: 500;
}

.problems-container h2 {
    color: #002F2F;
	text-align: center;
	padding: 1.5rem;
	margin: auto;
}

.problems-landing {
	display: flex;
    flex-direction: row;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
	margin: auto;
	margin-bottom: 35vh;
    margin-top: 3rem;
}

.prob-def-landing {
	display: flex;
	flex-direction: column;
	width: 16.8rem;
	height: 30rem;
    align-content: center;
    align-items: center;
	justify-content: center;
	border-radius: 10px;
	background-color: rgb(167, 163, 126, 0.9);
}

.prob-def-landing img {
	width: 100%;
	height: 100%;
}

.prob-def-landing h2 {
	font-size: 1.5rem;
}

.login-icon-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 4rem;
}

.login-icon-button p {
	color: #EFECCA;
	text-align: center;
}

.login-icon-button a {
	color: #A7A37E;
	font-weight: 600;
}

.external-circle-login {
	display: flex;
    justify-content: center;
    margin: auto;
    width: 20%;
    min-width: 260px;
	max-width: 260px;
    height: 3.5rem;
    border: 1px solid rgb(239, 236, 202, 0.8);
    padding-left: 9px;
    border-radius: 50px;
    font-weight: 500;
    background-color: rgb(0, 47, 47, 0.3);
    margin: auto;
    color: rgb(239, 236, 202, 0.9);
    margin-bottom: 5rem;
    align-self: center;
    padding: 0 0.2rem 0 0.2rem;
    align-content: center;
}

.opacity-mobile {
	opacity: 1;
}

.login-icon-button button {
	margin: auto;
	display: inline-block;
	width: 100%;
	min-width: 250px;
	max-width: 250px;
	height: 3rem;
	border: 1px solid rgb(239, 236, 202, 0.8);
	padding: 7px;
	border-radius: 50px;
	font-weight: 500;
	background-color: rgb(0, 47, 47, 0.1);
	margin: auto;
	color: rgb(239, 236, 202, 0.9);
	align-self: center;
	transition: opacity 0.5s ease-in-out;
}

.login-icon-button button:hover {
	border: 1px solid rgb(239, 236, 202, 1);
	background-color: rgb(0, 47, 47, 0.7);
	color: rgb(239, 236, 202, 1);
}

.login-icon-button button:hover .external-circle-login {
	border: 1px solid rgb(239, 236, 202);
}

.problem-creator-button {
	position: relative;
	width: 100%;
}

.problem-creator-button button {
	margin: auto;
	display: inline-block;
	width: 40%;
	min-width: 150px;
	height: 2.5rem;
	border: none;
	padding: 7px;
	border-radius: 8px;
	font-weight: 500;
	background-color: #002F2F;
	margin: auto;
	color: #EFECCA;
	position: absolute;
    bottom: 4.5rem;
    left: 30%;
}

.problem-creator-button button:hover {
	opacity: 0.8;
}


.landing-user-type {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
}

.landing-user-newspace {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    flex-wrap: nowrap;
    align-items: center;
	padding-top: 10rem;
	padding-bottom: 20rem;
}

.landing-learner {
	position: relative;
	background: rgba(226, 225, 213, 0.7);
	color: #002F2F;
	font-weight: 500;
	width: 100%;
	height: 100vh;
	display: flex;
}

.landing-learner::before {
    content: '';
    position: absolute; /* Position the ::before element absolutely */
    top: 0;
    left: 0;
    background-color: rgba(0, 47, 47, 0.7);
    width: 100%;
    height: 100%;
    z-index: -1; /* Send the ::before element behind the content */
}

.textContainerPX {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-left: -2rem;
	width: 100%;
}

.landing-creator, .landing-learner-two {
	display: flex;
	flex-direction: column;
	width: 45%;
	height: 23rem;
    align-content: center;
    align-items: center;
	justify-content: space-between;
	border-radius: 10px;
}

.landing-creator p, .landing-learner-two p {
	margin-top: auto;
	margin-bottom: auto;
	flex: 1;
	text-align: center;
}

.landing-learner-two p {
	color: rgba(226, 225, 213, 0.85);
}

.screensPaigetx {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	width: 40%;
	height: 100%;
    margin: auto;
}

.titlePaigetX {
	text-align: center;
	margin-bottom: 1.5rem;
}

.screensPaigetx p {
	margin-top: auto;
	margin-bottom: auto;
	flex: 1;
	text-align: left;
	margin-left: 2rem;
	font-size: 1.2rem;
    line-height: 2rem;
}



.landing-creator {
	background: #efeccad9;
	color: #002F2F;
	font-weight: 600;
}

.landing-learner-two {
	background: rgba(4, 99, 128, 0.85);
	color: #002F2F;
	font-weight: 600;
}

.landing-icon-learner {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-self: center;
	margin: auto;
	flex: 2;
}

.landing-icon-creat {
	display: flex;
	flex-direction: row-reverse;
	justify-content: center;
	align-self: center;
	flex: 2;
	margin: auto;
}

.landing-icon-creator, .landing-icon-learner-two {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-self: center;
	margin-bottom: auto;
	margin-top: auto;
	flex: 2;
}

.landing-icon-creator {
	padding-top: 4rem;
	margin-bottom: 2rem;
}

.landing-learner video {
	width: 316.5px;
	height: auto;
	border-radius: 25px;
	margin: auto;
}

.paigetCreators video {
	width: 720px;
	height: auto;
	border-radius: 25px;
	margin: auto;
	margin-left: -3rem;
}

.landing-creator img {
	width: 250px;
	height: 83px
}

.landing-icon-learner-two img {
	width: 300px;
	height: 181px;
}

.landing-icon-learner-button {
	flex: 2;
	margin: auto;
	margin-top: 2rem;
}

.landing-icon-creator-button, .landing-icon-learner-two-button {
	flex: 2;
	margin: auto;
	margin-bottom: 1rem;
}

.landing-user-space-content  {
	width: 100%;
	height: 80vh;
}

.space-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: auto;
	width: 80%;
	height: 100%;
}

.space-content h1 {
	color: rgba(226, 225, 213, 1);
    text-align: center;
    font-size: 4rem;
    font-weight: 600;
}

.space-content h3 {
    color: #A7A37E;
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
}

.landing-icon-learner-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.landing-icon-learner-button p {
	text-align: center;
	margin: auto;
}

.landing-icon-creator-button button, .landing-icon-learner-button button, .landing-icon-learner-two-button button {
	display: inline-block;
	min-width: 150px;
	height: 2.5rem;
	border: none;
	padding: 7px;
	padding-left: 15px;
	padding-right: 15px;
	border-radius: 25px;
  	margin-bottom: 2rem;
	font-weight: 600;
	margin-top: 2rem;
	z-index: 5;
}

.landing-icon-learner-button button {
	margin-top: 3.5rem;
}

.landing-icon-creator-button button {
	background: #A7A37E;
	color: #002F2F
}

.landing-icon-learner-two-button button {
	background: rgb(239, 236, 206, 0.85);
	color: #002F2F
}

.landing-icon-learner-button button {
	background: rgba(226, 225, 213, 0.1);
	color: #002F2F;
	border: 1px solid #002F2F;
}

.landing-icon-learner-button button:hover {
	background: #002F2F;
	color: #A7A37E;
}

.landing-icon-creator-button button:hover {
	background: #002F2F;
	color: #A7A37E;
}

.landing-icon-learner-two-button button:hover {
	background: #002F2F;
	color: #EFECCA;
}

.landing-footer {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100px;
	justify-content: space-between;
    align-items: center;
	position: fixed;
    bottom: 0;
	background-color: #002F2F;
	overflow: hidden;
	z-index: 1000; 
}

.landing-learn-more {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	color: #EFECCA;
	width: 50%;
	margin-left: 1rem;
}

.landing-links {
	display: flex;
	flex-direction: row;
	align-self: flex-start;
	margin-bottom: 0.4rem;
}

.landing-learn-more a {
	text-decoration: none;
	color: #EFECCA;
	cursor: pointer;
	opacity: 1;
	line-height: 1.5rem;
	text-align: left;
	margin-left: 1rem;
	border-right: 1px solid #EFECCA;
	padding-right: 1rem;
	font-weight: 300;
}

.landing-learn-more a:hover {
	opacity: 0.8;
}

.landing-learn-more a.disabled {
	cursor: auto;
	opacity: 0.6;
}


.landing-contact-social {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	height: 100%;
}

.landing-address {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #EFECCA;
	width: 12rem;
	position: relative;
	margin-left: 1rem;
}

.landing-address::after {
	content: '';
	position: absolute;
	height: 70%;
	border-left: 1px solid #EFECCA;
	opacity: 1;
}

.landing-address p {
	margin: 0;
	padding: 0;
	margin-left: 2rem;
}

.landing-address a {
	text-decoration: none;
	color: #EFECCA;
}

.landing-social {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	margin-left: 1rem;
	margin-right: 2rem;
}

.image-social {
	width: 25px;
	margin-left: 1rem;
}

.image-social:hover {
	opacity: 0.8;
}

.image-social img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.modal-waitlist {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	background: rgb(0, 47, 47, 0.5);
	display: none;
	z-index: 10000;
	flex-direction: column;
}

.waitlist-modal-container {
	background: #046380;
	overflow: hidden;
	margin: 6% auto;
	width: 50%;
	padding: 40px 20px;
	position: relative;
	border-radius: 10px;
  	z-index: 1;
	box-shadow: 7px 6px 12px -3px rgba(0, 0, 0, 0.57);
	-webkit-box-shadow: 7px 6px 12px -3px rgba(0, 0, 0, 0.57);
	-moz-box-shadow: 7px 6px 12px -3px rgba(0, 0, 0, 0.57);
}

.form-waiting {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: stretch;
	width: 100%;
	margin-top: 3rem;
	margin-bottom: 3rem;
}
.waitlist-modal-container h5 {
	color: #EFECCA;
	text-align: center;
	margin-top: 2rem;
}

.close-modal-waiting {
	position: absolute;
	right: 5px;
	top: 0;
}

input#accept-waitlist-terms, input#registered {
    display: none;
}

.check-container-waiting {
	align-self: center;
	margin-top: 0.5rem;
}

.checkbox-waiting {
    position: relative;
    padding-left: 25px;
    cursor: pointer;
    display: inline-block;
    line-height: 20px;
	text-align: left;
	color: #E6E2AF;
	font-weight: 300;
}

.checkbox-waiting::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border: 2px solid #EFECCA;
    border-radius: 3px;
    background-color: #EFECCA;
}

/* When the checkbox is checked, add a checkmark */
input[type="checkbox"]:checked + .checkbox-waiting::before {
    content: '✓';
    display: flex;
    align-items: center;
    justify-content: center;
	font-weight: 600;
    color: #002F2F;
}

.waiting-button {
	margin-top: 3rem;
}

/*HOME--------------------------------------------*/


/*contenedor*/
.contenedor {
    min-height: 100vh;
    width: 100%;
    max-width: 2000px;
    margin: 0 auto;
    background: #046380;
    background-size: cover;
    position: relative;
    overflow: hidden;
    padding-bottom: 20px;
}

/*header*/
header {
	background: #046380;
	height: 80px;
	padding: 10px 0;
	width: 100%;
}

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

.logo-header img, .landing-logo-cont img, .about-us-logo-cont img {
	width: 10%;
	min-width: 162px;
	min-height: 53px;
	height: auto;
}

.img-landing-header img {
	width: 30px;
	min-width: 20px;
	min-height: auto;
	height: auto
  }

/*seccion logo*/

.main-container-home {
	background-color: #046380 !important;
	padding-top: 5rem;
}



/* LOGIN SECTION */

/*seccion formulario*/

h3 {
	color: #283149;
	font-size: 27px;
	margin-bottom: 37px;
	text-align: center;
	width: 100%;
}

::-webkit-input-placeholder {
	color: #ccc;
}

:-ms-input-placeholder {
	color: #ccc;
}

::placeholder {
	color: #ccc;
}

.login-box {
	display: flex;
	margin-top: 5%;
	align-self: center;
	justify-content: center;
}

.formulario-inicio {
	background: #EFECCA;
	width: 50%;
	align-self: center;
	padding: 50px;
	border-radius: 15px;
	box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	-webkit-box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	-moz-box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22)
}

.field-box {
	width: 100%;
	background: #FFF;
	border-radius: 25px;
	padding: 5px;
	overflow: hidden;
	margin-bottom: 21px;
}

.field {
	width: 100%;
	background: #FFF;
	border: solid 1px #A7A37A;
	border-radius: 25px;
	overflow: hidden;
}

.field label {
  margin: 0;
  float: left;
  padding: 4px 2px 6px 8px;
}

.field input {
	background: none;
	border: none;
	width: 80%;
	float: left;
	font-size: 18px;
	outline: none;
	padding: 6px 0 0 0;
}


.password-box {
	width: 100%;
	background: #FFF;
	border-radius: 25px;
	padding: 5px;
	overflow: hidden;
	margin-bottom: 21px;
}


.password {
	width: 100%;
	background: #FFF;
	border: solid 1px #A7A37A;
	border-radius: 25px;
	overflow: hidden;
}

.password label {
    margin: 0;
    float: left;
    padding: 4px 2px 6px 8px;
}

.password input {
	background: none;
	border: none;
	width: 80%;
	float: left;
	outline: none;
	font-size: 18px;
	padding: 6px 0 0 0;
}

.boton-enviar {
	font-family: "Exo2";
	font-size: 18px;
	text-align: center;
	color: #002F2F;
	font-weight: 600;
	margin: 0 auto;
	margin-top: 2rem;
	background: #A7A37A;
	border: none;
	padding: 8px;
	display: block;
	border-radius: 5px;
	width: 270px;
	margin-bottom: 5px;
	transition: 0.7s;
}

.boton-enviar:hover {
	background-color: #002F2F;
	color: #EFECCA;
}

.boton-registro {
	font-family: "Exo2";
	font-size: 18px;
	text-align: center;
	color: #A7A37A;
	margin: 0 auto;
	background: #002F2F;
	border: none;
	padding: 8px;
	display: block;
	border-radius: 5px;
	width: 181px;
}

a.recordar-password {
	color: #002F2F;
	text-align: center;
	display: block;
	width: 270px;
	padding-bottom: 5px;
	margin: 0 auto;
	padding-bottom: 1rem;
	border-bottom: 1px solid #A7A37A;
	font-family: sans-serif;
	font-size: 12px;
	text-decoration: none;
}

a.soporte {
	color: #A7A37A;
	text-align: center;
	display: block;
	width: 270px;
	padding-bottom: 5px;
	margin: 0 auto;
	font-family: sans-serif;
	font-size: 12px;
	text-decoration: none;
}

.no-tienes-cuenta {
	padding: 5px;
	margin: 0 auto;
	margin-top: 1rem;
	font-family: sans-serif;
	text-align: center;
	font-size: 12px;
	color: #A7A37A;
}

.more-info-login {
	padding: 5px;
	margin: 0 auto;
	margin-top: 1rem;
	font-family: sans-serif;
	text-align: center;
	font-size: 12px;
	color: #002F2F;
}


/* SELECT PLAN */
.plans-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 12rem;
	font-family: 'Roboto';
}

.type-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	color: #E6E2AF;
	margin-bottom: 1rem;
	margin-left: 5%;
}

.type-container p {
	margin-left: 5rem;
	margin-right: 5rem;
	font-weight: 800;
	text-align: center;
}

.type-container .inactive {
	text-decoration: none;
	cursor: pointer;
	border: none;
	margin-bottom: 1.5rem;
	opacity: 0.5;
	margin-bottom: 1rem;
}

.type-container .active {
	text-decoration: none;
	border-bottom: 1px solid #E6E2AF;
	color: #E6E2AF;
	cursor: default;
	opacity: 1;
	margin-bottom: 1rem;
}

.select-plan-container {
	margin-top: 1rem;
	padding: 1.5rem;
}

.free-trial-msg {
	display: flex;
	flex-direction: row;
	justify-content: center;
	background-color: #EFECCA;
	color: #002F2F;
	position: fixed;
	top: 5rem;
	width: 100%;
	height: 2rem;
	align-items: center;
	z-index: 4;
}

.free-trial-msg p {
	margin: 0;
}


/* CREATE COURSE & PROFILE FORMS*/

.create-course-form, .create-profile-form {
	background: #EFECCA;
	width: 70%;
	align-self: center;
	padding: 50px;
	border-radius: 15px;
	box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	-webkit-box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
	-moz-box-shadow: -6px 5px 11px 0px rgba(0, 0, 0, 0.22);
}

.create-course-form {
	margin-top: 5rem;
}

.create-course-form p {
	text-align: center;
	margin-top: 1rem;
	color: #046380;
}

.create-profile-form {
	margin-top: 10rem;
}

.danger-zone {
	display: flex;
	justify-content: center;
}

.danger-zone p {
	text-align: center;
	color: #A7A37e;
	font-size: 0.9rem;
	margin-top: 0.5rem;
	font-weight: 300;
	cursor: pointer;
}

#d-b-c {
	color: #002f2f;
	background-color: #A7A37E;
	opacity: 1;
}

#d-b-c:hover {
	color: #002f2f;
	background-color: #A7A37E;
	opacity: 0.8;
}


#d-b-c:disabled {
	background-color: #002f2f;
	lighting-color: #A7A37E;
	color: rgb(167, 163, 126, 0.6);
	cursor:auto;
	opacity: 1;
}

#d-b-c:disabled:hover {
	background-color: #002f2f;
	lighting-color: #A7A37E;
	color: rgb(167, 163, 126, 0.6);
	cursor:auto;
	opacity: 1;
}

.create-profile-form h3 {
	color: #046380;
    align-items: center;
    display: flex;
	margin: 0;
	margin-left: 2rem;
}

.create-course-form h3 {
	color: #046380;
    text-align: center;
	margin-bottom: 2rem;
}

.field-create,
.field-create-duration,
.field-create-considerations {
	width: 100%;
	background: #FFF;
	border: solid 1px #A7A37A;
	border-radius: 25px;
	overflow: hidden;
}

.field-create label,
.field-create-duration label {
	margin: 0;
  	float: left;
  	padding: 4px 8px 6px 12px;
	font-size: 18px;
}

.field-create-considerations label {
	margin: 0;
	margin-top: 0.8rem;
  	float: left;
  	padding: 4px 8px 6px 12px;
	font-size: 18px;
}

.field-create input, .field-create select, .field-create textarea {
	background: none;
	border: none;
	width: 80%;
	float: left;
	font-size: 18px;
	outline: none;
	padding: 4px 8px 6px 5px;
	color: #046380;
}

.field-create select {
	appearance: none;
}

.field-create-duration input {
	background: none;
	border: none;
	width: 7%;
	float: left;
	font-size: 18px;
	outline: none;
	padding: 4px 8px 6px 5px;
	color: #046380;
}

.field-create-considerations textarea {
	background: none;
	border: none;
	width: 100%;
	height: 100px;
	float: left;
	font-size: 18px;
	outline: none;
	padding: 4px 8px 6px 5px;
	color: #046380;
}

.btn-save-profile {
	float: right;
	margin-top: 0.5rem;
	width: 20%;
}

.btn-logout {
	width: 10%;
    background-color: #E6E2AF;
    border: 1px solid #E6E2AF;
    font-family: "Exo2";
    font-size: 14px;
    text-align: center;
    color: #002F2F;
    font-weight: 500;
    margin: 0 auto;
    border-radius: 5px;
    transition: 0.6s;
}

.btn-logout:hover {
	background-color: #002F2F;
	color: #EFECCA;
}

.box-header-container {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	margin-bottom: 2rem;
}


.table-tokens {
	background-color: #046380;
	padding-top: 6rem;
}


.tokens-data {
	display: flex;
	flex-wrap: wrap;
	align-content: center;
	justify-content: center;
	text-align: center;
  	width: 80%;
	margin: 0 auto;
}

.tokens-data-image img {
	width: auto;
	height: 2.6rem;
	margin-top: 0.2rem;
}

.tokens-data-total,
.tokens-data-remaining,
.tokens-data-used,
.tokens-data-pending,
.tokens-data-image {
	padding: 20px;
	color: #E6E2AF;
	font-size: 18px;
}

.tokens-data-total h5, 
.tokens-data-remaining h5, 
.tokens-data-used h5,
.tokens-data-pending h5,
.tokens-data-image h5 {
	font-size: 32px;
	color: #A7A37E;
}

.tokens-data-total h5 {
	font-weight: 600;
}


.visitas-recibidas h5 {
	color: #00CCFF;
}

.puntaje-pharmatime h5 {
	color: #F87523;
}

.bonus h5 {
	color: #BBCD43;
}

/*Registro--------------------------------------------*/

.contenedor-modal {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	min-height: 100%;
	background: rgba(238, 238, 239, 0.9);
  display: none;
  z-index: 10000;
}

.cuadro-modal {
	background: #fff;
	overflow: hidden;
	margin: 0 auto;
	width: 35%;
	margin-top: 8%;
	padding: 40px 20px;
	position: relative;
	border-radius: 10px;
  z-index: 1;
	box-shadow: 7px 6px 12px -3px rgba(0, 0, 0, 0.57);
	-webkit-box-shadow: 7px 6px 12px -3px rgba(0, 0, 0, 0.57);
	-moz-box-shadow: 7px 6px 12px -3px rgba(0, 0, 0, 0.57);
}

.boton-cerrar {
	position: absolute;
	right: 5px;
	top: 30px;
}

.boton-cerrar2{
  position: absolute;
	right: 5px;
	top: 10px;
}

.boton-cerrar img {
	width: 56px;
}

.boton-cerrar:hover {
	opacity: 0.5;
	cursor: pointer;
}

.titulo-modal h5 {
	font-family: "Exo2";
	font-weight: 100;
	font-size: 25px;
	color: #283149;
	border-bottom: 2px solid #283149;
	padding-bottom: 20px
}

.formulario-modal {
	width: 100%;
}

.formulario-modal label {
	display: block;
	font-size: 18px;
	width: 100%;
	color: #606060;
	padding: 5px 0;
}

.formulario-modal input {
	margin: 0 0 5px 0;
	padding-left: 10px;
	width: 98%;
	height: 36px;
	outline: none;
	border-radius: 5px;
	border: solid 2px #283149;
}

.boton-de-registro {
	width: 50%;
	margin: 20px auto 0;
}

.boton-enviar-registro {
	border: none;
	color: #fff;
	font-size: 18px;
	background: #283149;

}

.boton-enviar-registro:hover {
	opacity: 0.5;
	cursor: pointer;
}

.error-registro {
	background: #E6E2AF;
	padding: 10px;
	color: #002F2F;
	margin-top: 20px;
	border-radius: 5px;
	font-size: 14px;
}

/*Registro correcto--------------------------------------------*/
.display-registro-correcto {
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
	width: 60%;
  	max-width: 2000px;
	margin-top: 100px;
	margin-left: 20%;
	border-radius: 12px;
	background: #E6E2AF;
	color: #002F2F;
	text-align: center;
	padding: 5px;
	position: absolute;
	top: 0;
	left: 0;
 	z-index: 101;
}

.display-registro-correcto img {
	display: inline;
	width: 25px;
	align-self: center;
    margin-left: 1rem;
}

.display-registro-correcto ul {
	width: 100%;
	display: flex;
	align-self: center;
}

.display-registro-correcto li {
	display: inline;
	width: 100%;
  	padding-left: 20px;
}

.display-registro-correcto #dismiss_error {
	border: none;
	margin-left: 0.8rem;
	margin-right: 0.8rem;
	color: #A7A37E;
	font-weight: 800;
	font-size: 1.3rem;
	background: inherit;
}

.display-registro-correcto #dismiss_error:hover {
	opacity: 0.8;
	border: none;
	margin-left: 0.8rem;
	margin-right: 0.8rem;
	color: #A7A37E;
	font-weight: 800;
	font-size: 1.3rem;
	background: inherit;
}

.display-registro-correcto #dismiss_error:focus {
	outline: none;
}
/*Registro incorrecto--------------------------------------------*/

.display-registro-incorrecto {
	width: 100%;
	background: #E6E2AF;
	color: #002F2F;
	text-align: center;
	padding: 5px;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.display-registro-incorrecto img {
	width: 20px;
	padding-right: 10px;
}

.display-registro-incorrecto p {
	height: 25px;
}





/*MENU PRINCIPAL------*/

.menu-principal {
	width: 4.5rem;
	overflow: hidden;
	position: absolute;
	right: -5px;
	top: 19.7rem;
	display: block;
	height: 300px;
	z-index: 2000;
  }
  
  .menu-principal h4 {
	color: #606060;
	position: absolute;
	right: 5px;
	top: 20px;
	font-size: 18px;
  }
  
  .btn-home {
	  position: absolute;
	  background: url("../images/home/iconos-menu/home_vF.svg") no-repeat;
	  background-size: 35px;
	  background-position: 12px 10px;
	  background-color: #EFECCA;
	  right: -97px;
	  top: 40px;
	  opacity: 0.83;
  }
  
  .btn-home:hover {
	  right: -20px;
	  animation: anim-btn-home 0.2s;
	  opacity: 0.9;
  }
  
  @keyframes anim-btn-home {
	  from {
		  right: -97px;
		  opacity: 0.7;
	  }
  
	  to {
		  right: -20px;
		  opacity: 0.9;
	  }
  }
  
  .btn-pt {
	  position: absolute;
	  background: url("../images/home/iconos-menu/createcourse.svg") no-repeat;
	  background-size: 38px;
	  background-position: 10px 10px;
	  background-color: #EFECCA;
	  right: -171px;
	  top: 110px;
	  opacity: 0.83;
  }
  
  .btn-pt:hover {
	  right: -20px;
	  animation: anim-btn-pt 0.2s;
	  opacity: 0.9;
  }
  
  @keyframes anim-btn-pt {
	  from {
		  right: -171px;
		  opacity: 0.7;
	  }
  
	  to {
		  right: -20px;
		  opacity: 0.9;
	  }
  }
  
  .btn-income {
	  position: absolute;
	  background: url("../images/home/iconos-menu/managecourses.svg") no-repeat;
	  background-size: 35px;
	  background-position: 12px 10px;
	  background-color: #EFECCA;
	  right: -142px;
	  top: 180px;
	  opacity: 0.83;
  }
  
  .btn-income:hover {
	  right: -20px;
	  animation: anim-btn-income 0.2s;
	  opacity: 0.9;
  }
  
  @keyframes anim-btn-income {
	  from {
		  right: -142px;
		  opacity: 0.7;
	  }
  
	  to {
		  right: -20px;
		  opacity: 0.9;
	  }
  }

  
  .menu-principal li {
	  overflow: hidden;
	  border: 0px solid;
	  border-radius: 15px;
	  margin: 13px;
  }
  
  .menu-principal a {
	display: block;
	width: 100%;
	padding: 13px 30px 13px 60px;
	text-decoration: none;
	color: #A7A37A;
	font-size: 20px;
  }
  
  
  .btn-balance img {
	  left: -69px;
  }
  
  .menu-principal:hover {
	  width: 3000px;
  }
  



/* HOME - COURSES */

.no-courses {
	color: #A7A37A;
	font-weight: 300;
	margin-top: 10rem;
}

.no-courses a {
	color: #EFECCA;
	font-weight: 300;
}
.course-box {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	align-content: center;
	flex-wrap: wrap;
	background-color: #EFECCA;
	margin-left: 5%;
	width: 90%;
	border-radius: 15px;
	padding: 2%;
	margin-top: 4rem;
	margin-bottom: 10rem;
}

.container-course, .container-course-home {
	flex-basis: 20%;
	margin-left: 1rem;
	margin-top: 2rem;
	background: #F2F4F3;
	padding: 1rem;
	border-radius: 10px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 16px;
	box-sizing: border-box;
	min-width: 380px;
	max-width: 380px;
	margin-bottom: 2.5rem;
	min-height: 550px;
}

.processing-course {
	position: relative;
}

.processing-course::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 2; /* Below the ::after pseudo-element */
	border-radius: 10px;
	background: linear-gradient(270deg, #002F2F, #ccc, #002F2F, #002F2F);
	background-size: 200% 300%, cover; /* Separate size for gradient and image */
	animation: moveGradient 20s ease infinite;
  }
  
  
  @keyframes moveGradient {
	0% {
	  background-position: 0% 100%;
	}
	50% {
	  background-position: 200% 100%;
	}
	100% {
	  background-position: 0% 100%;
	}
  }

.processing-course::after {
	content: 'Generating course...';
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	border-radius: 10px;
	background: url('/images/login/logo-grande.png') no-repeat center;
	background-size: 70% auto;
	color: #002F2F; /* Text color */
	font-size: 20px; /* Adjust as needed */
	padding-top: 50%; /* Adjust based on your image size to push the text below the image */
	box-sizing: border-box;
	text-align: center;
	opacity: 1; /* Start fully transparent */
	animation: scanImage2 40s ease infinite;
}

@keyframes scanImage2 {
	0%, 100% {
	  opacity: 1;
	}
	25%, 75% {
	  opacity: 0; 
	}
	50% {
	  opacity: 1;
	}
  }

.complete-processing::before {
	content: 'Generating course...';
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	border-radius: 10px;
	background: url('/images/login/logo-header.png') no-repeat center;
	background-size: 70% auto;
	color: #EFECCA; /* Text color */
	font-size: 20px; /* Adjust as needed */
	padding-top: 50%; /* Adjust based on your image size to push the text below the image */
	box-sizing: border-box;
	text-align: center;
	opacity: 0; /* Start fully transparent */
	animation: scanImage 40s ease infinite;
  }
  
  @keyframes scanImage {
	0%, 100% {
	  opacity: 0;
	}
	25%, 75% {
	  opacity: 0.9; /* Fully visible */
	}
	50% {
	  opacity: 0;
	}
  }

  .complete-processing::after {
	content: '';
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100%;
	width: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	border-radius: 10px;
	background: url('/images/login/logo-header.png') no-repeat center;
	background-size: 71% auto;
	color: #EFECCA; /* Text color */
	opacity: 1; /* Start fully transparent */
	animation: scanImage2 40s ease infinite;
  }


.course-container, .course-container-home {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	border-radius: 10px;
	min-height: 100%;
	border: 1px solid #A7A37E;
}

.course-container-home {
	position: relative;
}

.course-image-tile {
	overflow: hidden;
    border-radius: 10px;
    width: 90%;
    margin: 1rem auto;
	max-height: 311.39px;
}


.course-image-tile img {
	width: 100%;
	height: 100%;
	min-width: 100%;
	object-fit: cover;
}

  .course-info-home {
	display: none;
	flex-direction: column;
	justify-content: center;
	color: #002F2F;
	height: auto;
	z-index: 3;
	flex-grow: 1;
}

.course-duration {
	font-size: 1rem;
    line-height: 1.48;
    margin: 0.5rem;
	margin-left: 1rem;
    transition: all 0.4s ease 0s;
	text-align: center;
}

.course-description {
	font-size: 1rem;
    line-height: 1.48;
    margin: 0.8rem;
	margin-left: 1rem;
	text-align: center;
}

.course-container-content {
	display: flex;
	flex-direction: column;
}

.course-title {
	display: flex;
    justify-content: center;
    min-height: 110px;
    align-items: center;
	width: 100%;
}

.course-container-content h4 {
	display: flex;
	font-size: 1.5rem;
    line-height: 1.48;
    transition: all 0.4s ease 0s;
	padding: 0.5rem;
	text-align: center;
	min-height: 7rem;
	align-items: center;
	font-weight: 300;
	color: #A7A37E;
	padding-bottom: 2rem;
	height: auto;
}

.course-container-content-home h4 {
	display: flex;
	font-size: 1.5rem;
    line-height: 1.48;
	padding: 0.5rem;
	text-align: center;
	min-height: 5rem;
	align-items: center;
	font-weight: 300;
	color: #A7A37E;
	padding-bottom: 2rem;
	height: auto;
}

.course-title h4 {
    position: relative; /* Add this line */
}

.course-title h4::after {
    content: "";
    position: absolute;
    left: 50%;
	height: 100%;
    bottom: 0; /* Adjust as needed */
    transform: translateX(-50%);
    width: 15rem; /* Adjust the width of the border */
    border-bottom: 1px solid #A7A37E; /* Style for the bottom border */
}

.icon-course-home {
	width: 3rem;
	height: auto;
	margin-bottom: 1rem;
	align-self: center;
	cursor: pointer;
	opacity: 1;
}

.icon-course-home img {
	width: 3rem;
	height: auto;
	object-fit: cover
}

.icon-course-home:hover {
	opacity: 0.9;
}

.course-info {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	color: #002F2F;
	height: auto;
}

.course-info-icons {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}


.btn-course-container {
	display:flex;
	align-items: center;
	margin-bottom: 1rem;
	flex-direction: column;
	height: 100%;
	margin-top: auto;
}

.btn-course-tile {
	display: flex;
	max-width: 10rem;
	align-self:center;
}

.btn-go-course {
	margin-top: 1rem;
	display: inline-block;
	width: 100%;
	border: none;
	color: #002f2f;
	padding: 7px;
	border-radius: 8px;
  	margin-bottom: 20px;
	background-color: #E6E2AF;
	font-weight: 500;
}

.btn-go-course:hover {
	background-color: #002f2f;
	color: #E6E2AF;
}

.btn-publish-home {
	border: none;
	background-color: inherit;
}

.btn-publish-home:focus {
	outline: none;
}


/* HEADER NOTIFICATION */

.header-principal {
    position: fixed;
    width: 100%;
    z-index: 200;
    top: 0;
	display: flex;
	justify-content: center;
}

.header-botones a {
	text-decoration: none;
	color: #EFECCA;
	margin-left: 0.5rem;
}

.header-botones a:hover, .cerrar-sesion:hover, .mi-perfil:hover, .my-subscription:hover, .tutorials-nav:hover {
	opacity: 0.7;
}

#image-notifications {
	cursor: pointer;
}

#image-notifications.disable {
	pointer-events: none; /* Disables all click, hover, and cursor options */
	cursor: default; /* Makes the cursor appear as the default arrow */
	opacity: 0.5; /* Makes the image appear faded; you can adjust as needed */
  }

.boton-notificaciones {
    position: absolute;
	top: 0;
	right: 0;
}

.boton-notificaciones img {
	width: 50px;
    height: 50px;
    position: absolute;
    top: 0;
    margin: 10px 37px 15px 20px;
    right: 0;
}



.notification-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px; 
	height: 20px; 
	position: absolute;
	top: 1rem; 
	right: 2.6rem; 
	background-color: #A7A37E;
	color: #002F2F;
	border-radius: 50%;
	font-size: 0.7rem;
	font-weight: 600;
  }

.notifications_menu {
	background: rgb(86, 147, 154);
	border-radius: 5px;
	right: 0;
	width: 350px;
	float: right;
	margin: 7px 25px 0 0;
	position: absolute;
	display: none;
	z-index: 100000;
	box-shadow: 7px 6px 12px -3px rgba(0, 47, 47, 0.57);
	-webkit-box-shadow: 7px 6px 12px -3px rgba(0, 47, 47, 0.57);
	-moz-box-shadow: 7px 6px 12px -3px rgba(0, 47, 47, 0.57);
}

.boton-notificaciones::before {
	content: "";
	position: absolute;
    top: 3.6rem;
    right: 3.3rem;
    margin-top: -5px;
    border-width: 0.6rem;
    border-style: solid;
    border-color: transparent transparent rgb(86, 147, 154) transparent;
}

.hide-arrow::before {
	display: none;
}


.menuDesplegable {
	display: flex;
}

.notifications_list {
	display: flex;
	flex-direction: column-reverse;
}

.my-notifications {
	display: flex;
	flex-direction: row;
	border-top: 3px solid #046380;;
	overflow: hidden
}

.notification-msg {
	display: flex;
	flex-direction: column;
	width: 90%;
	align-items: self-start;
	align-self: center;
	margin: 0.7rem;
	margin-left: 0.7rem;
	color: #fef7ed;
	font-weight: 300;
}

.delete-notification {
	text-align: end;
	align-self: center;
	margin: 1rem
}

a.delete-notification {
	font-size: 2rem;
}

.notifications_list li:last-child {
	border: none;
}

a.link-notification {
	margin-left: 0;
}



/* HEADER USUARIO */


.foto-usuario img {
	width: 40px;
	height: 40px;
	position: absolute;
	top: 0;
	margin: 15px;
	right: 84px;
	cursor: pointer;
	object-fit: cover;
}

.user-view {
	position: absolute;
	top: 10px;
	margin: 15px 36px;
	left: 10px;
	color: #EFECCA;
}

.nombre-de-usuario {
	position: absolute;
	top: 10px;
	margin: 15px 36px;
	right: 124px;
	color: #EFECCA;
}

.menu-usuario {
	background: rgb(86, 147, 154);
	border-radius: 5px;
	width: 200px;
	float: right;
	margin: 7px 80px 0 0;
	position: absolute;
	right: 0;
	display: none;
	z-index: 100000;
	box-shadow: 7px 6px 12px -3px rgba(0, 47, 47, 0.57);
	-webkit-box-shadow: 7px 6px 12px -3px rgba(0, 47, 47, 0.57);
	-moz-box-shadow: 7px 6px 12px -3px rgba(0, 47, 47, 0.57);
}

.menu-usuario::before {
	content: "";
    position: absolute;
    top: -6.5%;
    right: 14%;
    margin-top: 0px;
    border-width: 0.6rem;
    border-style: solid;
    border-color: transparent transparent rgb(86, 147, 154) transparent;
}

.menuDesplegable {
	display: flex;
	flex-direction: column;
	width: 200px;
}

.menu-usuario li {
	border-top: 3px solid #046380;
	overflow: hidden
}

.menu-usuario li:first-child {
	border: none;
}

.mi-perfil {
	background: url("../images/icons/profile.svg") no-repeat;
	background-size: 40px;
	background-position: 15px 13px;
}

.my-subscription {
	background: url("../images/icons/subscription.svg") no-repeat;
	background-size: 40px;
	background-position: 15px 13px;
}

.tutorials-nav {
	background: url("../images/icons/tutorials_light.svg") no-repeat;
	background-size: 40px;
	background-position: 15px 13px;
}

.cerrar-sesion {
	background: url("../images/icons/logout.svg") no-repeat;
	background-size: 40px;
	background-position: 15px 13px;
}

.menu-usuario a {
	display: block;
	width: 100%;
	padding: 20px 0 20px 60px;
}


/*EACH COURSE MAIN*/

.user-view .disabled {
	opacity: 0.8;
	cursor: default;
}

.user-view .disabled:hover {
	opacity: 0.8;
	cursor: default;
}

.course-header {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch; /* Added this line to stretch child elements to the same height */
    margin-bottom: 5rem;
	margin-top: 5rem;
}

.course-header-hidden {
	transition: opacity 0.6s ease; /* This is the line you add */
}

.course-header-info {
    display: flex;            /* Setting this as a flex container */
    flex-direction: column;   /* Setting direction to column to stack children vertically */
    justify-content: flex-end;/* Pushing content to the bottom */
    background: #F2EFE9;
    width: 67%;
    padding-bottom: 25px;    /* Adjust as needed for desired space from bottom */
    padding-left: 30px;
	flex-grow: 2;
}


.course-header-info h2, .course-header-info h4, .course-header-info p {
	margin: 0; /* Resetting margins to keep things tight and neat */
	margin-left: 2rem;
    padding: 0.5em 0; /* Add some padding to space out the text elements */
}

.course-header-info p {
    max-width: 50%;
    text-align: left;
	margin-bottom: 0.5rem;
	margin-top: 1rem;
	color: var(--dynamic-color-2)
}

.course-header-info h2, .course-header-info h4  {
	color: var(--dynamic-color-2);
}

.published-header {
	margin-top: 0;
}

/* Hide the sticky title by default */
.sticky-title, .sticky-title-studyHall {
    display: block;
    position: fixed;
    top: 120px; 
    left: 0;
    width: 100%;
    padding: 0.5em;
    text-align: center;
    z-index: 300; /* Higher z-index to make sure it's above .header-principal */
	transition: opacity 0.4s ease; /* This is the line you add */
	opacity: 0; /* This will make it initially invisible */
    pointer-events: none; 
	color: var(--dynamic-color-2);
    font-weight: 600;
	text-align: left;
	padding-left: 4rem;
	z-index: 3;
}

.sticky-title-studyHall {
	top: 80px;
}

.sticky-title-published {
	top: 0px;
	height: 105px;
	display: flex;
    align-items: center; /* Vertical alignment */
}

.sticky-title a {
	color: #002F2F;
	font-weight: 400;
}

/* Show the sticky title when the .visible class is added */
.sticky-title.visible {
	opacity: 1;
    pointer-events: auto; /* Reset to default when visible */
}

.sticky-title.visible h2 {
	color: var(--dynamic-color-2)
}

.sticky-title.hidden {
    opacity: 0;
}

.course-image {
    align-items: center;
    width: 33%;
	max-width: 510px;
	flex-shrink: 2;
	max-height: 512px;
    overflow: hidden;
}

.course-image img {
    width: 512px;
}

.course-modules {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: wrap;
	background: #F2EFE9;
	margin-top: -5.5rem;
    padding-top: 5rem;
    padding-bottom: 3rem;
}

.container-module-container {
	flex-basis: 20%;
	margin-left: 1rem;
}

.link-modules-curriculum a {
	color:#046380;
	text-decoration: none;
}

.link-modules-curriculum a:hover {
	color:#002F2F;
	text-decoration: none;

}

.link-chapters a {
	color:#002F2F;
	text-decoration: none;
}

.link-chapters a:hover {
	color:#046380;
	text-decoration: none;
}


.module-container {
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
	box-sizing: border-box;
	background: rgb(255,255,255);
	border-radius: 8px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 16px;
	max-width: 350px;
}

.module-image {
	max-height: 200px;
	overflow: hidden;
}

.module-image img {
	max-width: 350px;
	border-radius: 8px;
}


.module-container-content {
	padding-top: 2rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
}

.module-container-content h4 {
	font-size: 1.5rem;
    line-height: 1.48;
    transition: all 0.4s ease 0s;
	padding: 0.5rem;
	margin-bottom: 1rem;
	text-align: center;
	background: #fff8f8;
	min-height: 5rem;
	justify-content: center;
}

.module-container-content h5 {
	font-size: 1rem;
    line-height: 1.48;
	margin-left: 1rem;
	margin-right: 1rem;
    transition: all 0.4s ease 0s;
	text-align: left;
}

.module-container-content p {
	font-size: 0.8rem;
    line-height: 1.48;
    margin: 0.5rem;
	margin-left: 1rem;
    transition: all 0.4s ease 0s;
	text-align: left;
}

.duration p {
	font-size: 0.8rem;
    line-height: 1.48;
    transition: all 0.4s ease 0s;
	margin-bottom: 1.5rem;
	margin-top: -0.5rem;
	text-align: left;
	margin-left: 2rem;
}


/* EACH MODULE */

.course-chapter-container {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: wrap;
	background: #F2F4F3;
	margin-top: -7.5rem;
    padding-top: 5rem;
}

.module-chapters {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
	align-items: center;
	background: #F2F4F3;
}

.phone-container {
	position: relative;
	margin-top: 2rem;
}

.scroller {
	position: relative;
}

.left-scroll {
	width: 50px;
	height: auto;
	position: absolute;
	top: 25rem;
	left: -50%;
    transform: translateX(100%);
	cursor: pointer;
}

.right-scroll {
	width: 50px;
	height: auto;
	position: absolute;
	top: 25rem;
	right: -48%;
    transform: translateX(-100%);
	cursor: pointer;
}

.down-scroll {
    width: 50px;
    height: auto;
    position: absolute;
    top: 39rem;
	left: 50%;
    transform: translateX(-50%);
    z-index: 3;
	cursor: pointer
}

.up-scroll {
    width: 50px;
    height: auto;
    position: absolute;
    top: 1rem;
	left: 50%;
    transform: translateX(-50%);
    z-index: 3;
	cursor: pointer;
}

.phone-img {
	width: 391px;
	height: auto;
}

.phone-img img {
	width: 100%;
	height: 746px;
}

.chapter_title h2 {
	margin: 0;
    color: #046380;
    margin-top: 3rem;
    margin-bottom: 2rem;
    font-weight: 400;
}

.container-iframe {
    width: 100%;
	flex: 1; /* This will ensure it takes up the full height remaining in the pagination-chapter */
    overflow: hidden; /* Prevent scrollbars */
    position: relative; /* For absolute positioning the iframe */
}

.container-iframe iframe {
    width: 100%;
    border: none;
    overflow: hidden;
}

.contentInfo_chapter {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
}

.chapter, .activity-main {
	font-size: 1.2rem;
	color: #002F2F;
}

.topic h4 {
	margin-bottom: 1.2rem;
	margin-top: 2rem;
	font-weight: 600;
}

.contentInfo h5 {
	color: #545454;
	margin-top: 1.8rem;
	margin-bottom: 1rem;
}

.chapter h5 {
	margin-top: 3.5rem;
	margin-bottom: 1.5rem;
}

.highlight {
	margin-left: 2rem;
}

.best-practices {
	width: 85%;
}



.best-practices::before {
	content: "#pro-tip";
	display: block;
	color: #EFECCA;
  }

.card ul {
	padding: 0; /* Remove default padding */
	margin-left: 0.5rem;
	font-size: 1rem;
  }
  
.card li {
	line-height: 1.6;
	padding-left: 1.875rem; /* Space for the checkmark icon */
	position: relative; /* To position the checkmark icon */
	margin-bottom: 0.625rem; /* Space between list items */
  }

  .img-txt-edit-cont {
	display: flex;
	flex-direction: row;
  }

  .example, .best-practice {
	width: 80%;
}
  
  .example::before {
	content: "#irl";
	display: block;
  }
  

  .chapter ol.content_list, .example ol.content_list, .best-practice ol.content_list, .example ol {
	list-style-type: decimal !important; /* Remove default bullets */
	padding-left: 0; /* Remove default padding */
	margin-bottom: 1.5rem; /* Space between the list and following content */
	margin-left: 1.5rem;
	width: 90%;
  }

  .chapter ol.content_list li, .example ol.content_list li, .best-practice ol.content_list li {
	list-style: decimal;
	line-height: 1.6;
	position: relative;
	padding-left: 0.5rem; 
	margin-bottom: 0.5rem;
	margin-left: 1.5rem;
  }

  .chapter ol.content_list li::before, .example ol.content_list li::before, .best-practice ol.content_list li::before {
	content: ''
}

  ul.content_list {
	list-style-type: none; /* Remove default bullets */
	padding-left: 0; /* Remove default padding */
	margin-bottom: 1.5rem; /* Space between the list and following content */
	margin-left: 1.5rem;
	width: 90%;
  }
  
  ul.content_list li {
	line-height: 1.6;
	padding-left: 1.875rem; /* Padding for custom bullet */
	position: relative; /* Relative positioning for custom bullet */
	margin-bottom: 0.5rem; /* Space between list items */
  }
  
  ul.content_list li::before {
	content: '\2713'; /* Information Source symbol */
	position: absolute;
	left: 0; /* Position the custom bullet at the start of the list item */
	font-size: 1.3rem; /* Match bullet size with text */
	color: #046380; /* Medium Blue bullet color */
  }

  .code-example, .ql-code-block {
	background-color: #000;
	color: #fff;
	padding: 2rem;
	border-radius: 8px;
	width: 85%;
    margin: auto;
    text-wrap: wrap;
    text-align: left;
  }

  .inline-tag-example {
	font-size: 105%;
	font-weight: 550;
	word-wrap: break-word;
	color: #002F2F;
  }

.chapter-individual {
	display: flex;
	flex-direction: column;
	width: 100%;
  }


.footer-sticky {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: space-around; /* Distributes the buttons equally across the width */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* Optional: adds a subtle shadow at the top of the footer */
    z-index: 1000; /* Ensures the footer stays on top of other content */
	opacity: 0;
	min-height: 4rem;
}


/* Show the sticky title when the .visible class is added */
.footer-sticky.visible {
	opacity: 1;
    transition: 0.4s ease-in-out;
	pointer-events: auto; /* Reset to default when visible */
}

.footer-sticky.hidden {
    opacity: 0;
}

.footer-sticky a {
    text-decoration: none;
}

.footer-sticky button {
    background-color: inherit;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    transition: background-color 0.5s;
	width: 100%;
	font-weight: 800;
	color: var(--dynamic-color-2);
}
    /* Optional: Add styles for button hover effect */
.footer-sticky button:hover {
        filter: brightness(85%);
    }

.footer-sticky button:active {
		border: none;
		outline: none;
		filter: brightness(70%);
	}

.footer-sticky button:focus {
		border: none;
		outline: none;
		filter: brightness(70%);
	}

.footer-sticky button:disabled {
	pointer-events: none;  /* Prevents clicking on the link */
	filter: grayscale(100%) opacity(50%);
  	cursor: not-allowed;
}

.footer-sticky button img {
	width: 20px;
	height: 20px;
	margin-right: 0.5rem;
	margin-left: 0.5rem;
}


/* MAIN ACTIVITY STYLE */

.activity-main {
    color: #EFECCA;
    margin: auto;
	display: flex;
}

.content-info-chapter-edit .activity-main {
	display: block;
}

.activity-title h1 {
	text-align: center;
    margin-bottom: 2rem;
    color: #EFECCA; /* Dark teal text for emphasis */
    font-size: 2.5rem; /* Making it larger */
    letter-spacing: 1px; /* Slightly spaced letters */
    font-weight: 500; /* Not too bold, but giving it a bit of weight */
    border-bottom: 2px dashed #EFECCA; /* Thicker Blue underline */
    padding-bottom: 2rem;
    max-width: 80%; /* Limiting the width for longer titles */
    margin-left: auto; /* Centering the title */
    margin-right: auto; /* Centering the title */
}

.header-activity {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.header-activity p {
	font-size: 1rem;
	margin: auto;
}

.header-activity-image {
	width: 50%;
	position: relative; /* Ensure that the absolute positioning is relative to this container */
	margin-bottom: 2rem;
	align-self: center;
}

.header-activity-image::before {
  content: "";
  display: block;
  padding-top: 100%; /* This makes the height equal to the current width of the container */
}

.header-activity-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50% 50% 0%;
}

.title-prob-activity {
	width: 75%;
	align-self: flex-end;
}

.inner-activity-main h1 {
    text-align: left;
    margin-bottom: 2rem;
    color: #002F2F; /* Dark teal text for emphasis */
    font-size: 2.5rem; /* Making it larger */
    letter-spacing: 1px; /* Slightly spaced letters */
    font-weight: 500; /* Not too bold, but giving it a bit of weight */
    border-bottom: 2px dashed #E0E2E1; /* Thicker Blue underline */
    padding-bottom: 2rem;
    max-width: 80%; /* Limiting the width for longer titles */
    margin-left: auto; /* Centering the title */
    margin-right: auto; /* Centering the title */
}

/* Styling for the h3 (Problem) */
.activity-main h3, .inner-activity-main h3 {
    color: #046380; /* Blue color for consistency */
    font-size: 1.4rem; /* Slightly bigger */
    margin-top: 30px;
    margin-bottom: 2rem;
    max-width: 80%; /* Wrapping text to the next line if too long */
    margin-left: auto; /* Centering the problem */
    margin-right: auto; /* Centering the problem */
	font-weight: 300;
	text-align: left;
}

.activity-main h2, .inner-activity-main h2 {
    font-size: 1.2rem;
	margin-top: 2rem;
	margin-left: 1rem;
    margin-bottom: 2rem;
    border-bottom: 2px solid #A7A37E;
    padding-bottom: 1.3rem;
	font-weight: 300;
	color: #EFECCA;
}

.activity-main label {
	display: inline-block;
    margin: 5px auto;
    padding: 5px 20px;
    border: 3px dashed #A7A37E;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    transition: 0.3s;
	min-height: 54px;
	min-width: 95%;
	max-width: 95%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.activity-main label:hover {
    background: #A7A37E;
	border: 3px solid #EFECCA;
	color: #002F2F;
}

.activity-main label:focus {
    background: #046380;
    color: #EFECCA;
	border:  3px solid #A7A37E;
	outline: none;
    box-shadow: none;
}

.activity-main input[type="radio"] {
    display: none;
}

.activity-main input[type="radio"]:checked + label {
    background: #046380;
    color: #EFECCA;
	border:  3px solid #046380;
}


.activity-main button {
    display: block;
    background-color: #046380; /* Dark teal button */
    color: #002F2F; /* Cream text */
    border: none;
    padding: 10px 20px;
    margin: 30px auto;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}

.activity-main button:hover {
    background-color: #A7A37E; /* Blue on hover */
}


.activity-main button:disabled {
    background-color: #002F2F; /* Blue on hover */
	border: 1px solid #A7A37E;
	cursor: default;
	color: #EFECCA;
}

.content-info-chapter-edit .case-level1::after {
	content: 'Case L1';
	position: absolute;
	font-size: 3rem;
	font-weight: 600;
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
	left: 0;
}

.content-info-chapter-edit .case-level2::after {
	content: 'Case L2';
	position: absolute;
	font-size: 3rem;
	font-weight: 600;
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
	left: 0;
}

.content-info-chapter-edit .case-level3::after {
	content: 'Case L3';
	position: absolute;
	font-size: 3rem;
	font-weight: 600;
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
	left: 0;
}
.content-info-chapter-edit .case-level-feedback .new-decision-level3 {
		display: none;
	}

.content-info-chapter-edit .case-level3 .activity-case-level3, .content-info-chapter-edit .case-level3 .new-cases-l2 {
			display: none;
}

.content-info-chapter-edit .case-level2 .activity-case-level2, .content-info-chapter-edit .case-level2 .new-cases-l1 {
			display: none;
		}

.content-info-chapter-edit	.case-level1 .activity-case-level1 {
		display: none;
	} 

.content-info-chapter-edit .case-level-feedback::after {
	content: 'Feedback';
	position: absolute;
	font-size: 3rem;
	font-weight: 600;
	width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0;
	left: 0;
}

.case-level1 {
	height: 100%;
	margin: auto;
}

.activity-case-level1 {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	cursor: pointer;
	height: 100%;
	width: 90%;
	margin: auto;
}

.case-level2, .case-level3 {
	height: 90%;
	width: 90%;
	margin: auto;
}

.activity-case-level3, .activity-case-level2 {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	cursor: pointer;
	height: 50%;
	margin: auto;
}

.activity-case-options-level3 p, .activity-case-options-level2 p, .activity-case-options-level1 p {
	text-align: center;
	margin: 0;
}

.new-cases-l3 h2, .new-cases-l2 h2, .new-cases-l1 h2 {
    margin-bottom: 2rem;
    border-bottom: 2px solid #E0E2E1;
    padding-bottom: 1.3rem;
    font-weight: 300;
    color: #002F2F;
    width: 90%;
    margin-left: 5%;
	font-size: 1rem;
}

.new-cases-l3 h2 {
    border-bottom: none;
	margin-top: 2.5rem;
}

.new-decision-level3 h1 {
	margin-top: 3rem;
	width: 90%;
	margin-left: 5%;
	margin-bottom: 2rem;
}

.mini-card-case-cont {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
}

.mini-card-case {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	width: 325px;
	height: 450px;
	background-color: #fef7ed;
	border-radius: 10px;
	margin-bottom: 2rem;
}

.mini-card-feedback {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	width: 325px;
	height: 450px;
	background-color: #fef7ed;
	border-radius: 10px;
	margin: 0 0.5rem 2rem 0.5rem;
}

.mini-card-case label, .mini-card-feedback label {
	align-self: center;
	margin: auto;
	width: 90%;
	text-align: center;
}


.mini-card-case textarea {
	width: 90%;
	height: 100px;
	border: 1px solid #A7A37A;
	border-radius: 8px;
	margin: auto;
	text-align: center;
	padding: 1rem 0.5rem;
	overflow: auto; /* Ensures scrollbars appear if the text exceeds the element's bounds */
    resize: none; /* Optional: prevents resizing */
}

.mini-card-feedback textarea {
	width: 90%;
	min-height: 250px;
	max-height: 250px;
	border: 1px solid #A7A37A;
	border-radius: 8px;
	margin: auto;
	text-align: center;
	padding: 1rem 0.5rem;
	overflow: auto; /* Ensures scrollbars appear if the text exceeds the element's bounds */
    resize: none; /* Optional: prevents resizing */
}


.cards-container-phone .inner-activity-main {
	display: flex;
	flex-direction: row;
}

/* CREATE COURSE */


.create-course-main-container {
	margin-top: 2rem;
}




.tagstags {
  width: 100%;
  margin-bottom: 20px;
}

.tagsContainer {
  border-bottom: 2px solid #ccc;
  padding: 0 0 15px 0;
  display: flex;
}

.tagstags .tags {
  padding: 5px;
  margin: 5px 0;
  margin-right: 10px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  background: #1AB4B2;
  color: #fff;
  cursor: default;
}

.tags i {
  font-size: 12px;
  margin-left: 5px;
  margin-top: 3px;
  font-family: sans-serif;
  font-weight: bold;
  font-style: normal;
}

.tags i:hover {
    cursor: pointer;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.file-upload {
	background-color: #046380;
    border-radius: 25px;
    width: 50%;
    height: 3rem;
    margin: auto;
    /* margin-top: 1rem; */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #EFECCA;
    font-weight: 500;
    cursor: pointer;
    outline: solid 1px #A7A37A;
    outline-offset: -5px;
    opacity: 0.8;
    position: relative;
}

.file-upload:hover {
	opacity: 1;
}

/* profile picture*/



.profilePhoto {
  height: 150px;
  width: 150px;
}

.profilePhotoContainer {
  border-radius: 50%;
  height: 162px;
  width: 162px;
  overflow: hidden;
}

.profile-image-header {
  vertical-align: middle;
  width: 35px;
  height: 35px;
  border-radius: 50%;
}






/* MANAGE COURSES */

.main-container-manage-courses {
	background-color: #046380 !important;
	margin-bottom: 5rem;
}

.search-box {
	width: 100%;
	background: #fef7ed;
	border-radius: 25px;
	padding: 3.5px;
	overflow: hidden;
	margin-bottom: 21px;
}

.search-field {
	width: 100%;
	background: #fef7ed;
	border: solid 1px #A7A37A;
	border-radius: 25px;
	overflow: hidden;
	padding-top: 0.6rem;
}

.search-field label {
	margin-left: 1rem;
}
.search-field img {
	width: 25px;
	margin-right: 1rem;
}

.search_courses_home {
    width: 100%;
	padding-top: 6rem;
	padding-bottom: 1.5rem;
    position: sticky;
    top: 2.5rem;
    z-index: 3;
	background: linear-gradient(
        to top, 
        rgba(4, 99, 128, 0.8) 0%,
        rgba(4, 99, 128, 1) 10%, 
        rgba(4, 99, 128, 1) 100% 
    );
}

.search-box-home {
	width: 80%;
	background: #fef7ed;
	border-radius: 25px;
	padding: 3.5px;
	overflow: hidden;
	margin-bottom: 21px;
	margin-left: auto;
	margin-right: auto;
}

.search_courses_manage {
	width: 80%;
	margin: 0 auto;
	overflow: hidden;
	padding-top: 4rem;
	padding-bottom: 2rem;
	position: sticky;
	margin-left: 12.5%;
}

.buscadorCourses input#myInput, .buscadorCourses input#table-enrollments-m  {
	width: 50%;
	background-color: #fef7ed;
	border: none;
}

.buscadorCourses input#myInput:focus, .buscadorCourses input#table-enrollments-m:focus {
	border: none;
	outline: none;
}
.search_courses_manage .buscadorCourses {
	width: 94%;
	float: left;
}

p.learner-view {
	color: #A7A37E;
	text-align: center;
	margin: auto;
	padding: 0.5rem;
	font-weight: 600;
}

.course-score-card-container {
    flex-basis: 20%;
    margin-left: 1rem;
    margin-top: 2rem;
    background: #F2F4F3;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 16px;
    box-sizing: border-box;
    min-width: 380px;
    max-width: 380px;
    margin-bottom: 2.5rem;
    min-height: 450px;
}

.course-title-dash {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.title-dash a, .title-dash h4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Limit to two lines */
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%; /* Ensure there's a width constraint */
    white-space: normal;
	max-height: 6rem;
}

.course-title-dash h4 {
	margin: auto;
	padding: 1.2rem;
	color: #002F2F;
}

.title-dash {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: auto;
	align-items: inherit;
}

.title-dash a {
	text-decoration-color: #002F2F;
}

.course-info-dash {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	color: #002F2F;
	margin-top: 0.5rem;
	font-weight: 300;
	width: 100%;
}

.course-info-dash p {
	width: 100%;
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1; /* Limit to two lines */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
	margin: auto;
	text-align: center;
}

.course-scores {
	display: flex;
	flex-direction: row;
	width: 100%;
	flex-wrap: wrap;
	justify-content: space-evenly;
	margin: 2rem auto;
	position: relative;
}

.course-scores::after {
	content: '';
	bottom: 0;
	width: 15rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #A7A37E;
}

.score-card-item {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: auto;
	width: 50%;
}

.score-card-item h3 {
	color: #A7A37E;
	font-weight: 700;
	font-size: 3rem;
	margin: auto;
}

.score-card-item p {
	color: #A7A37E;
	text-align: center;
}

.course-info-icons-dash {
	padding: 1rem 0;
}

.course-box-dash {
	margin-top: 0;
	border-radius: 0 10px 10px 10px;
	position: absolute;
}

.tabs-dashbord {
	width: 90%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	margin: 12rem auto -2rem auto;
}

.tab-dash {
	background-color: #EFECCA;
	border-radius: 10px 10px 0 0;
	width: 12rem;
	margin: auto 1rem;
	padding-bottom: 2rem;
	text-align: center;
	color: #002F2F;
}

.tab-dash h5 {
	margin-top: 0.5rem;
}

.tab-general-dash {
	margin-left: 0;
}

.tab-disabled {
	background-color: #A7A37E;
	cursor: pointer;
	z-index: 0;
}

.score-cards-content {
	width: 100%;
}

.score-cards-container {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin: auto;
    justify-content: space-around;
}

.dash-disabled {
	display: none;
}

.time-frame-dash {
	display: flex;
	flex-direction: row;
	justify-content: center;
	color: #002F2F;
	margin: auto;
}

.time-frame-dash .line-dash {
	color: #A7A37A;
	font-weight: 600;
}

.time-frame-dash h5 {
	padding: 2rem;
	font-weight: 300;
}

.time-frame-dash .inactive {
	color: #A7A37E;
	cursor: pointer;
	opacity: 0.5;
}

.time-frame-dash .inactive:hover {
	opacity: 1;
}

.data-cards-container {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: space-evenly;
	margin: 2rem auto;
}

.data-card-box {
	position: relative;
	min-width: 20rem;
	min-height: 20rem;
	flex-basis: 20%;
    margin-left: 1rem;
    margin-top: 2rem;
    background: #F2F4F3;
    padding: 1rem;
    border-radius: 10px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 0px 16px;
    box-sizing: border-box;
}

.data-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 10px;
	border: 1px solid #A7A37E;
	width: 100%;
	height: 100%;
}

.disc-data-card {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
	flex-wrap: wrap;
	margin: 1rem auto;
	color: #A7A37E;
	font-weight: 700;
}

.ind-data-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-width: 7rem;
}

.ind-data-card h5 {
	font-size: 2rem;
	text-align: center;
	font-weight: 700;
	color: #A7A37E;
}

.total-data-card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin: 1rem auto;
	font-weight: 800;
	position: relative;
}

.total-data-card::after {
	content: '';
	width: 15rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #A7A37E;
}

.total-data-card h4 {
	font-size: 3rem;
	text-align: center;
	font-weight: 800;
}

.not-enough-info-dash {
	position: relative;
	text-align: center;
}

.not-enough-info-dash::after {
	display: flex;
	justify-content: center;
	align-items: center;
	content: "We don't have enough data to display your Paiget and Learning Scores";
	position: absolute;
	top: 1rem;
	left: 1rem;
	width: 90%;
	height: 90%;
	background-color: #f2f4f3e6;
	color: #002F2F;
	font-weight: 500;
	font-size: 1.1rem;
	border-radius: 10px;
	margin: auto;
}

.table-enr-head-m {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	width: 80%;
	margin: auto;
	border-bottom: 1px solid #A7A37E;
}

.table-enr-head-m .title, .table-enr-row-m .title  {
	width: 50%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.table-enr-row-m {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: space-around;
	width: 80%;
	margin: 1rem auto;
}

.tooltip-dash-cont {
	position: relative;
}

.account-dash {
	width: 100%;
}

.account-config-dash {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #A7A37E;
	width: 100%;
    margin: auto;
	min-height: 20rem;
}

.account-config-dash h4 {
	color: #A7A37E;
	margin-top: 3rem;
	text-align: center;
}

.account-config-dash p {
	color: #002F2F;
	margin-top: 2rem;
	text-align: center;
	width: 60%;
}

#edit-account-form {
	width: 60%;
	margin: 3rem auto;
}

.btn-create-account {
	float: right;
	margin-top: 0.5rem;
	width: 20%;
}

.btn-create-account:disabled {
	color:#002F2F;
	background-color: #A7A37E;
	opacity: 0.6;
}

.email-account-match {
	display: flex;
	justify-content: center;
	margin: 0;
	color: #A7A37E;
	position: relative;
}

.email-account-match p {
	display: none;
	text-align: center;
	position: absolute;
	top: -7rem;
	color: #A7A37E;
	opacity: 0.8;
}

.manage-payments {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 20rem;
	align-items: center;
	width: 90%;
	z-index: 2;
}

.access-payment-dash {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 30rem;
	align-items: center;
	width: 100%;
	z-index: 2;
}

.payments-dashboard {
	width: 90%;
	height: 40rem;
	background-color: #f2f4f3;
	background-image: url('/images/dash/dashboard_payments.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	border-radius: 10px;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.payments-dashboard::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 40rem;
	background-color: rgb(242, 244, 243, 0.9);
	border-radius: 10px;
	z-index: 1;
}

.access-payment-dash button:disabled, .access-payment-dash button:disabled:hover {
	opacity: 0.3;
	cursor: auto;
	color: #002F2F;
	background-color: #A7A37E;
}

/* LIGHTBOX EDIT */

.lightbox-edit {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 85%;
    height: 80%;
	margin-top: 5%;
	margin-left: 7.5%;
    overflow: auto;
    background-color: rgba(2, 5, 20, 0.9); 
	border-radius: 15px;
	color: #dcd4c7;
}

.close-edit {
    color: #dcd4c7;
    font-size: 56px;
    margin-right: 2rem;
    font-weight: 800;
	text-align: center;
	width: 3rem;
	height: 3rem;
	float: right;
}

.close-edit:hover,
.close-edit:focus {
    color: #fef7ed;
    text-decoration: none;
    cursor: pointer;
}

.container-publishing {
    max-width: 100%;
    margin: 0 auto;
	margin-top: 5rem;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.publishing-title {
	text-align: center;
	color: #dcd4c7;
	margin-bottom: 3.5rem;
}

.box-copy {
    margin-bottom: 20px;
}

.box-copy-publish {
    margin-bottom: 20px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
}

.submit-forms .box-copy {
    margin-bottom: auto;
	margin-top: auto;
}

.group-copy {
    display: flex;
    justify-content: space-between;
    align-items: center;
	margin-left: 2rem;
}

.box-copy textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #fef7ed;
    border-radius: 4px;
    font-family: monospace;
    resize: vertical;
	flex-grow: 1;
    margin-right: 10px; 
}

.box-copy label {
    margin-bottom: 5px;
}

.box-copy-button {
	background-color: #046380;
    color: #fef7ed;
}

.box-copy button, .box-copy-publish button {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 5px;
	float: right;
	margin-bottom: 5px;
	width: 10rem;
}

.box-copy-publish button {
	width: 12rem;
}

.box-copy-button:hover, .unpublished-course:hover {
    background-color: #002F2F;
	color:#fef7ed;
}

.box-copy button:focus {
	outline: none;
}


.publishing-buttons {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 5rem;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}

.publish-box {
	display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.publish-box button.box-copy:disabled {
	cursor: auto;
	background-color: #002F2F;
	lighting-color: #EFECCA;
	color: rgb(167, 163, 126, 0.8)
}

.published-course {
	background-color: #fef7ed;
	color: #020514;
}

.published-course:hover {
	background-color: #dcd4c7;
	color: #046380;
}

.unpublished-course {
	background-color: #046380;
	color: #fef7ed;
}



/* PUBLISH SETTINGS */

.publish-settings {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 60%;
	margin: 10rem auto;
	background-color: #EFECCA;
	padding-top: 2rem;
	border-radius: 10px;
}

.publish-settings p {
	color: #002F2F;
}

.publishing-course-title {
	text-align: center;
	color: #002F2F;
	margin: auto;
	align-self: center;
}

.table-publish-settings {
	width: 70%;
	margin: auto;
	font-size: 1.1rem;
	color: #002F2F;
	font-weight: 500;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-bottom: 5rem;
}

.toggle-column {
	min-width: 10rem;
	display: flex;
	justify-content: center;
}

.toggle-question-column {
	width: 10rem;
	text-align: left;
}

.toggle-switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 40px;
	margin: auto;
  }

.freevssubs .toggle-switch {
	margin-left: 2rem;
	margin-right: 0;
  }
  
  /* Hide the default checkbox */
  .toggle-switch input {
	opacity: 0;
	width: 0;
	height: 0;
  }
 

.toggle-switch label {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(254, 247, 237);
	border-radius: 25px;
	-webkit-transition: .4s;
	transition: .4s;
	border: 1px solid rgb(4, 99, 128, 0.6);
  }
  
  .toggle-switch label:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 2px;
	background-color: gray;
	border-radius: 50%;
	-webkit-transition: .4s;
	transition: .4s;
	opacity: 0.6;
  }
  
  .toggle-switch input:checked + label {
	background-color: #fef7ed;
	opacity: 1;
  }
  
  .toggle-switch input:focus + label {
	box-shadow: 0 0 1px #fef7ed;
  }
  
  .toggle-switch input:checked + label:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
	background-color: #046380;
	opacity: 1;
  }

  .help-toggle-publish {
	position: absolute;
	bottom: 50%;
	right: -2rem;
	transform: translateY(25%);
	cursor: help;
	z-index: 3;
  }

  .help-add-file {
	position: absolute;
	bottom: 40%;
	left: 76%;
	transform: translateY(25%);
	cursor: help;
	z-index: 3;
  }

  .second-level-publish {
	margin-left: 2rem;
	text-align: center;
  }

  .fa-question-circle {
	color: #002F2F;
	font-size: 0.8rem;
  }

  .main-trs p {
	margin: 0;
	text-align: left;
	font-weight: 500;
	color: #002F2F;
  }

  .second-toggle_publish_sh, .third-toggle_publish_sh  {
	margin-top: 1.5rem;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	transition: opacity 0.3s ease-in-out;
	z-index: 1;
	opacity: 1;
	position: relative;
  }

  .second-toggle-publish-link  {
	margin-top: 1.5rem;
	height: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	transition: opacity 0.3s ease-in-out;
	z-index: 1;
	opacity: 1;
	position: relative;
  }

  .second-level-publish-link {
	margin-left: 2rem;
	width: 100%;
  }

  .second-toggle_publish_sh p, .third-toggle_publish_sh p  {
	color: #002F2F;
  }

  .disabled-row-publish {
	position: relative;
	pointer-events: none; /* Prevents mouse clicks */
	opacity: 0.5;
	z-index: 1;
	}
  
.disabled-row-publish::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transition: opacity 0.3s ease-in-out;
	background-color: #EFECCA; /* Light gray background */
	color: #ccc; /* Dimmed text color */
	z-index: 1;
  }

.disabled-row-publish::before {
	opacity: 0.7; /* Overlay becomes visible */
  }

  .main-trs {
	display: flex;
	flex-direction: row;
	border-bottom: 1px solid #A7A37E;
	margin-bottom: 1rem;
	margin-top: 4rem;
	position: relative;
  }

  .charge_paiget_sh {
	width: 50%;
	display: flex;
	justify-content: flex-start;
	position: relative;
  }

  .charge_paiget_sh_price {
	width: 100%;
	display: flex;
	justify-content: flex-start;
	position: relative;
  }

  .charge-price-field-box {
	width: 50%;
	margin-left: 5rem;
  }

  .charge-price-field-box input {
	width: 50%;
  }

  .update-price {
	background-color: #EFECCA;
    color: #002F2F;
    border: none;
    text-decoration: underline;
    font-size: 0.9rem;
    text-align: left;
    top: 0.7rem;
    right: 2rem;
    position: absolute;
  }

.update-price:disabled {
	opacity: 0.5;
	text-decoration: none;
  }

  .upgrade-tooltip {
	position: relative;
	align-self: center;
  }
 
  .title-publish {
	display: flex;
	flex-direction: row;
	align-items: center;
  }

  .prompt-cr-acc {
	position: relative;
  }

  .comment-create-account {
	display: none;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: -15rem;
	left: 0;
	width: 80%;
	margin: auto 10%;
	font-weight: 600;
	font-size: 1.2rem;
  }

  .comment-create-account p {
	text-align: center;
	color: #002F2F;
	opacity: 1;
	z-index: 3;
  }

  .reference_cont {
	position: relative;
  }

  .reference_cont input {
	width: 90%;
  }

  .cont-image-add-ref {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	position: absolute;
	right: 8.5rem;
	top: 7.5px;
	z-index: 9999;
  }

  .cont-image-add-ref img, .cont-image-remove-ref img {
	width: 30px;
	height: auto;
	cursor: pointer;
	opacity: 0.8;
  }

  .cont-image-add-ref img:hover, .cont-image-remove-ref img:hover {
	opacity: 1;
  }

/* EDIT COURSE CURRICULUM */

.banner-edit-curriculum  {
	width: 100%;
	height: 4rem;
	background-color: #020514;
	color: #dcd4c7;
	margin-top: -2rem;
	position: fixed;
	z-index: 5;
}

.content-to-edit .course-header {
	margin-top: 5rem;
}

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

.banner-edit-mode  {
	display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Align items vertically */
	width: 100%;
	height: 4rem;
	background-color: #020514;
	color: #dcd4c7;
	margin-top: 5rem;
	position: fixed;
	z-index: 5;
}

.banner-edit-mode p {
	text-align: center;
}

.banner-edit-mode button {
	position: absolute;
    right: 0; /* Aligns the button to the right */
    top: 50%; /* Aligns the button vertically */
    transform: translateY(-50%); /* Ensures vertical centering */
	background-color: #046380;
    color: #dcd4c7;
	padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-right: 2rem;
}

.banner-edit-mode button:hover {
	background-color: #dcd4c7;
    color: #046380;
}

.course-delete, .chapter-delete {
	position: absolute;
	top: 7rem;
	right: 2rem;
	width: 3rem;
	height: 3rem;
	z-index: 5;
	background-color: #A7A37E;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	opacity: 0.5;
}

.chapter-delete {
	top: 14rem;
    right: 1rem;
    position: fixed;
}

.course-delete:hover, .chapter-delete:hover {
	opacity: 1;
}

.course-delete img, .chapter-delete img {
	width: 80%;
	height: auto;
}

.editable {
    position: relative;
    cursor: pointer;
}

.editable:hover::after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(218, 217, 200, 0.85);
    color: #dcd4c7;
    z-index: 3;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	background-image: url('/images/edit-chapt-header/edit_icon.svg'); /* Specify the path to your image */
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    background-size: 3rem; /* Adjust this value as needed */
	background-blend-mode: multiply;
}

.add-chapter {
	display: flex;
	justify-content: center;
	padding-top: 1rem;
	padding-bottom: 1rem;
	margin-top: auto;
	border-top: 1.5px solid #dcd4c7;
}

.add-chapter img {
	width: 2.7rem;
}

.add-chapter {
    position: relative;
    cursor: pointer;
}

.add-chapter:hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(218, 217, 200);
    color: #dcd4c7;
    z-index: 3;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
    display: flex;
	border-radius: 0px 0px 10px 10px;
	border: 1px solid rgba(218, 217, 200);
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	background-image: url('/images/nav-edit-bar/add-box.svg'); /* Specify the path to your image */
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    background-size: 3rem; /* Adjust this value as needed */
	background-blend-mode: multiply;
}

.add-module {
	display: flex;
	justify-content: center;
	padding-top: 2rem;
	padding-bottom: 1rem;
	margin-top: auto;
	border-top: 1.5px solid #dcd4c7;
	background-color: #F2EFE9;
	margin-top: -3rem;
	padding-bottom: 2rem;
}

.add-module img {
	width: 2.7rem;
}

.add-module {
    position: relative;
    cursor: pointer;
}

.add-module:hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background-color: rgba(218, 217, 200);
    color: #dcd4c7;
    z-index: 3;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	background-image: url('/images/nav-edit-bar/add-box.svg'); /* Specify the path to your image */
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    background-size: 3rem; /* Adjust this value as needed */
	background-blend-mode: multiply;
}


.edit-chapter {
    position: relative;
    cursor: pointer;
}

.edit-chapter:hover::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 105%;
    height: 150%;
    background-color: rgba(218, 217, 200, 0.85);
    color: #dcd4c7;
    z-index: 3;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	background-image: url('/images/edit-chapt-header/edit_icon.svg'); /* Specify the path to your image */
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    background-size: 2.5rem; /* Adjust this value as needed */
	background-blend-mode: multiply;
}

.editing-lb {
	width: 70%;
	margin-left: 15%;
	background-color: #F2EFE9;
}

.editing-lb input, .editing-lb label, .editing-lb textarea, .create-editing-lb {
	background-color: #F2EFE9;
	
}

.editing-lb textarea {
	height: 80%;
}

.editing-lb label, .editing-lb input  {
	padding-top: 6px;
	padding-bottom: 6px;
}

.container-editing {
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container-editing h2 {
	margin-top: 6rem;
	margin-bottom: 2.5rem;
	text-align: center;
	font-size: 1.8rem;
}

.edit-cdcbc {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 70%;
	margin-left: 15%;
}

.edit-cdcbc input {
	width: 20%;
}

.editing-duration {
	margin-left: auto;
	padding-bottom: 0;
}

.editing-duration label {
	padding-bottom: 7px;
}

.editing-banner-color {
	margin-right: auto;
}

.edit-bc-lb {
	height: 2.5rem;
}

.editing-lb-button-container {
	display: flex;
	justify-content: space-around;
	width: 70%;
	margin-left: 15%;
}

.editing-lb-button {
	width: 8rem;
}

.restore-editing:disabled{
	cursor: default;
	opacity: 0.5;
}

.restore-editing:disabled:hover{
	background-color: #046380;
	color: #F2EFE9;
}

.display-registro-correcto a {
	text-decoration: none;
	color: #046380;
	font-weight: 500;
}

.display-registro-correcto a:hover {
	text-decoration: none;
	color: #046380;
	font-weight: 600;
}




/* edit image & videos*/
.edit-images, .edit-videos, .edit-audios {
	display: flex;
	flex-direction: row;
	width: 100%;
}

.container-gen-image, .container-gen-video, .container-gen-audio {
	display: flex;
	flex-direction: column;
	width: 70%;
	border-right: 1px solid #dcd4c7;
	margin-left: -5%;
}

.container-gen-video, .container-gen-audio {
	border: none;
}

.container-gen-image p, .container-gen-video p, .container-gen-audio p {
	text-align: center;
	margin-bottom: 1rem;
}

.image-gen, .video-gen, .audio-gen {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2rem;
}

.image-gen img  {
	width: 150px;
	height: auto;
	border-radius: 5px;
}

.audio-gen audio  {
	margin-bottom: 1rem;
}

.video-gen video {
	width: 350px;
	height: auto;
	border-radius: 5px;
}

.my-images, .my-audios {
	display: flex;
	flex-direction: column;
	width: 30%;
	margin-left: 2%;
}

.my-videos {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: center;
	width: 30%;
	margin-left: 7.5%;
	margin-right: 7.5%;
}

.my-images p, .my-videos p, .my-audios p {
	text-align: center;
}


.editing-image-input-button-container, .editing-video-input-button-containe, .editing-audio-input-button-container {
 display: flex;
 justify-content: center;
 margin: auto;
}

.upload-file-container-create {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: baseline;
	margin-bottom: 2rem;
	position: relative;
}

.upload-file-container {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: baseline;
	margin-bottom: 2rem;
}

.custom-file-upload {
	background-color: #fef7ed;
    color: #020514;
	padding: 8px 15px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	width: 50%;
	display: flex;
	justify-content: center;
	overflow: hidden;
	flex-basis: 50%;
	margin: auto;
}

.custom-file-upload:hover {
	background-color: #dcd4c7;
    font-weight: 500;
}

.button-upload-image:disabled, .button-upload-video:disabled, .button-upload-audio:disabled {
	cursor: default;
	opacity: 0.5;
}

.button-upload-image:disabled:hover, .button-upload-video:disabled:hover, .button-upload-audio:disabled:hover {
	background-color: #046380;
	color: #F2EFE9;
}

#imageInput, #videoInput, #audioInput, #fileInput {
    display: none;
}

.my-images-box, .my-videos-box, .my-audios-box {
	margin: 0;
}

.images-list-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	align-items: center;
	border: 1px solid #dcd4c7;
	max-height: 19rem;
	min-height: 19rem;
	height: 19rem;
	overflow: auto;
	border-radius: 5px;
	margin-bottom: 1rem;
}

.videos-list-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 70%;
	margin-left: 15%;
	justify-content: center;
	align-items: center;
	border: 1px solid #dcd4c7;
	max-height: 25rem;
	min-height: 25rem;
	height: 25rem;
	overflow: auto;
	border-radius: 5px;
	margin-bottom: 1rem;
}

.audios-list-box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	width: 100%;
	justify-content: center;
	align-items: center;
	border: 1px solid #dcd4c7;
	max-height: 19rem;
	min-height: 19rem;
	height: 19rem;
	overflow: auto;
	border-radius: 5px;
	margin-bottom: 1rem;
}

.images-list-box  p, .videos-list-box p, .audios-list-box p {
	display: flex;
	align-items: center;
	color: #046380;
}

.single-image-box img, .single-video-box video {
	max-width: 6rem;
	max-height: 6rem;
	overflow: hidden;
}

.single-image-box img {
	max-width: 6rem;
	margin: 0.2rem;
}

.single-video-box video {
	max-width: 15rem;
	margin: 0.2rem;
}

.single-audio-box audio {
	max-width: 90%;
}

.editable-mini-image, .editable-mini-video, .editable-mini-audio, .add-activity-container {
    position: relative;
    cursor: pointer;
}

.editable-mini-audio {
	display: flex;
	flex-direction: row;
	align-items: center;
	color: #002F2F;
	text-decoration: none;
	background-color: #EFECCA;
	max-width: 90%;
	min-width: 90%;
	width: 90%;
	height: 54px;
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
	border-radius: 25px;
}

.editable-mini-audio p {
	color: #002F2F;
	width: 15rem;
    text-align: left;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
	margin: 0.3rem;
	margin-left: 1rem;
}

.editable-mini-audio img {
	width: 2rem;
	height: auto;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
}

.editable-mini-image:hover::before, .editable-mini-video:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-color: #020514;
	opacity: 0.6; 
    z-index: 4;
}

.add-activity-container:hover {
    opacity: 1; 
}


.editable-mini-audio:hover::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
	background-color: #020514;
	opacity: 0.6; 
    z-index: 4;
}

.editable-mini-image:hover::after, .editable-mini-video:hover::after, .editable-mini-audio:hover::after {
    content: 'Select';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #dcd4c7;
	font-size: 1rem;
    z-index: 5;
}

.images-list-box .selected::before, .videos-list-box .selected::before  {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background-color: #020514;
	opacity: 0.6; 
    z-index: 4;
}

.audios-list-box .selected::before  {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
	background-color: #020514;
	opacity: 0.6; 
    z-index: 4;
}

.add-activity-container.selected  {
	opacity: 1;
}

.add-activity-container.selected::before  {
	content: '';
    position: absolute;
    left: -25%;
    width: 150%;
    height: 150%;
    background-color: #002f2f;
    border: 7px solid #EFECCA;
    opacity: 0.8;
    z-index: 4;
    border-radius: 8px;
}

.images-list-box .selected::after, .videos-list-box .selected::after, .audios-list-box .selected::after, .add-activity-container.selected::after {
	content: '\2713'; /* Unicode checkmark character */
	position: absolute;
	top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #dcd4c7;
	font-size: 2.5rem;
    z-index: 5;
}

.add-activity-container.selected::after {
	font-size: 5rem;
	opacity: 1;
}

.create-editing-lb input {
	border: none;
}

.button-select-image:disabled, .button-select-video:disabled, .button-select-audio:disabled, .button-gen-activity:disabled {
	cursor: default;
	opacity: 0.5;
	z-index: 10;
}

.button-select-image:disabled:hover, .button-select-video:disabled:hover, .button-select-audio:disabled:hover, .button-gen-activity:disabled:hover {
	background-color: #046380;
	color: #f2efe9;
}

#loader-edit {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    background: rgba(4, 99, 128, 0.5);
    display: flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
	color: #f2efe9;
	font-weight: 800;
}

.error-body {
	background-color: #F2F4F3;
	height: 100%;
	margin-top: 6rem;
	display: flex;
	padding-bottom: 10%;
}


.chapter-error {
	color: #046380;
	width: 70%;
	margin-left: 15%;
	margin-top: 6rem;
}

.chapter-error h4 {
	color: #046380;
	margin-bottom: 3rem;
	text-align: center;
}

.chapter-error p {
	color: #002F2F;
	margin-bottom: 1.5rem;
}

.add-chapters-tokens {
	text-align: center;
}



/* Edit Chapter */

.banner-edit-chapter  {
	width: 100%;
	height: 4rem;
	background-color: #020514;
	color: #dcd4c7;
	margin-top: 5rem;
	position: fixed;
	z-index: 5;
}


.banner-edit-chapter h4 {
	text-align: center;
	font-size: 1.2rem;
	font-weight: 600;
	border-bottom: 1px solid rgba(220, 212, 199, 0.35);
	padding-left: 20%;
	padding-right: 20%;
	padding-bottom: 1.4rem;

}

.banner-edit-chapt-info {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 95%;
	margin-left: 2.5%;
	margin-top: 1rem;
	align-items: baseline;
	position: fixed;
}

.tokens-edit-banner {
	display: flex;
	flex-direction: row;
	align-items: baseline;
    justify-content: center;
}

.tokens-edit-banner p {
	align-self: center;
}

.tokens-edit-banner img {
	width: 1.5rem;
	height: auto;
	margin-right: 0.5rem;
}

.banner-edit-chapter button, .banner-edit-curriculum button {
	background-color: #020514;
    color: #dcd4c7;
	padding: 4px 15px;
    border: none;
    cursor: pointer;
    margin-right: 2rem;
}

.banner-edit-chapter button:hover, .banner-edit-curriculum button:hover {
	border-left: 1px solid rgb(220, 212, 199, 0.35);
	border-right: 1px solid rgb(220, 212, 199, 0.35);
}

.banner-edit-chapter button:focus, .banner-edit-curriculum button:focus {
    outline: none;
	border-left: 1px solid rgb(220, 212, 199, 0.35);
	border-right: 1px solid rgb(220, 212, 199, 0.35);
}

.banner-edit-subhead {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 60%;
	margin-left: 20%;
	margin-right: 20%;
	position: fixed;
}

.container-return-course {
	display: flex;
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	z-index: 5;
}

.container-return-course:hover, .container-cards-style:hover, .close-select-template:hover {
	opacity: 0.8;
	cursor: pointer;
}

.container-cards-style {
	display: flex;
	width: 50px;
	height: 50px;
	position: fixed;
	bottom: 6rem;
	right: 1rem;
	z-index: 10;
}

.container-return-course img, .container-cards-style img, .close-select-template img {
	width: 100%;
	height: auto;
}


.edit-chap-icons-container {
	display: flex;
	flex-direction: row;
	width: 100%;
	justify-content: space-around;
	background-color: #020514;
	position: fixed;
	z-index: 4;
	top: 80px;
}

.banner-edit-chapt-basics {
	display: flex;
	flex-direction: row;
	width: 90%;
	justify-content: space-around;
	margin-top: 2rem;
	margin-bottom: 1rem;
	margin-left: 2.5%;
}

.icon-ed-chap-basic {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.icon-ed-chap-basic:hover {
	opacity: 0.8;
	cursor: pointer;
}

.icon-ed-chap-basic.active {
	border-bottom: 1px solid #dcd4c7;
	opacity: 0.8;
	cursor: default;
	pointer-events: none;
}

.icon-ed-chap-basic p {
	font-size: 0.7rem;
	font-weight: 300;
	color: #dcd4c7;
}

.icon-ed-chap-basic img {
	width: 2.7rem;
	opacity: 1;
}


.content-info-chapter-edit {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	height: 100%;
	margin-top: 14rem;
}

.edit-add-element {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	margin: auto
}

.edit-add-element img {
	width: 2.7rem;
	padding-top: 2rem;
	padding-bottom: 2rem;

}

.edit-chapter-title-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 55%;
}

.edit-chapter-title-container h2 {
	margin: 0;
    color: #046380;
    margin-top: 1rem;
    padding-bottom: 2rem;
    font-weight: 400;
	width: 100%;
	text-align: center;
	padding-top: 2rem;
}

.audio-body-chapter {
	width: 90%;
	margin: auto;
}

.audio-body-chapter audio {
	width: 100%;
	border-radius: 25px;
}

.content-info-chapter-edit .card:hover::after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(218, 217, 200, 0.95);
    color: #dcd4c7;
    z-index: 3;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	background-image: url('/images/edit-chapt-header/edit_icon.svg'); /* Specify the path to your image */
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    background-size: 3rem; /* Adjust this value as needed */
	background-blend-mode: multiply;
	border-radius: 10px;
}

.content-info-chapter-edit .card-txt-img .selected-txt-img {
	display: none;
}

/*
.content-info-chapter-edit .card-txt-img .chapter-image-text {
 position: relative;
}

.content-info-chapter-edit .card-txt-img .chapter-body-image:hover::after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: rgba(218, 217, 200, 0.95);
    color: #dcd4c7;
    z-index: 3;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
	background-image: url('/images/edit-chapt-header/edit_icon.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 3rem;
	background-blend-mode: multiply;
	border-radius: 10px;
}



.content-info-chapter-edit .card-txt-img .edit-paragraph:hover::after {
	content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-color: rgba(218, 217, 200, 0.95);
    color: #dcd4c7;
    z-index: 3;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
	background-image: url('/images/edit-chapt-header/edit_icon.svg');
    background-repeat: no-repeat;
    background-position: center; 
    background-size: 3rem;
	background-blend-mode: multiply;
	border-radius: 10px;
}*/


.content-info-chapter-edit .card-innactive {
	display: none;
}

.content-info-chapter-edit .card .video-body-chapter:hover::after {
	height: 84%;
	margin-bottom: 16%;
	border-radius: 8px 8px 0 0;
}

.content-info-chapter-edit .audio-body-chapter:hover {
	background: inherit;
}

.content-info-chapter-edit .activity-edit-paragraph:hover::after {
	height: 140%;
	top: -20%;
	width: 90%;
	left: 5%;
}

.content-info-chapter-edit .edit-add-element:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(218, 217, 200);
    color: #dcd4c7;
    z-index: 2;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	background-image: url('/images/nav-edit-bar/add-box.svg'); /* Specify the path to your image */
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    background-size: 2.7rem; /* Adjust this value as needed */
	background-blend-mode: multiply;
	border-radius: 10px;
}


.content-info-chapter-edit .edit-paragraph.selected, .content-info-chapter-edit .topic.selected, .content-info-chapter-edit .example.selected, .content-info-chapter-edit .best-practices.selected {
    display: none;
}

.content-info-chapter-edit .activity-title.selected::after, .content-info-chapter-edit .chapter-body-image.selected::after, .content-info-chapter-edit .editable-chapter-title.selected::after, .content-info-chapter-edit .act-learn-zone-nav-bar.selected::after, .content-info-chapter-edit .activity-case-options-level1-container.selected::after, .content-info-chapter-edit .activity-label-edit-paragraph.selected::after, .content-info-chapter-edit .activity-edit-paragraph.selected::after, .content-info-chapter-edit .header-activity-image.selected::after, .content-info-chapter-edit .audio-body-chapter.selected::after, .content-info-chapter-edit .video-body-chapter.selected::after, .content-info-chapter-edit .edit-add-element.selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #dad9c8;
    color: #dcd4c7;
    z-index: 2;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	background-image: url('/images/nav-edit-bar/check_box.svg'); /* Specify the path to your image */
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    background-size: 3rem; /* Adjust this value as needed */
	background-blend-mode: multiply;
	border-radius: 10px;
}

.content-info-chapter-edit .chapter-body-image.selected::after, .content-info-chapter-edit .act-learn-zone-nav-bar.selected::after, .content-info-chapter-edit .activity-case-options-level1.selected::after, .content-info-chapter-edit .activity-label-edit-paragraph.selected::after, .content-info-chapter-edit .activity-edit-paragraph.selected::after, .content-info-chapter-edit .header-activity-image.selected::after, .content-info-chapter-edit .video-body-chapter.selected::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(218, 217, 200, 0.95);
    color: #dcd4c7;
    z-index: 2;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	background-image: url('/images/nav-edit-bar/check_box.svg'); /* Specify the path to your image */
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    background-size: 3rem; /* Adjust this value as needed */
	background-blend-mode: multiply;
	border-radius: 10px;
}

.content-info-chapter-edit .video-body-chapter.selected::after {
	height: 84%;
	margin-bottom: 16%;
	border-radius: 8px 8px 0 0;
}

.content-info-chapter-edit .audio-body-chapter:hover::after, .content-info-chapter-edit .audio-body-chapter.selected::after {
	width: 79%;
	margin-left: 14%;
	border-radius: 0 25px 25px 0;;
}

.icon-ed-chap-basic.not-selected {
    opacity: 0.4; /* Make content appear inactive */
    cursor: default; /* Change cursor to default */
    /* Any other styles to indicate inactivity */
	pointer-events: none;
}

.icon-ed-chap-basic.not-selected::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(2, 5, 20, 0.7); /* Semi-transparent background */
    color: #dcd4c7;
    z-index: 10;
    font-size: 5rem;
    font-weight: 600;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    /* Remove cursor pointer from ::after pseudo-element */
    cursor: default;
	pointer-events: none;
}

.editor-q-page {
	align-self: center;
}

.editor-q-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 60%;
	background-color: #F2F4F3;
	color: #002F2F;
	margin-left: 20%;
	border-radius: 5px;
	height: 100%;
}

.editor-q {
	border-radius: 0px 0px 5px 5px;
	border: none;
	color: #002F2F;
	background-color: #F2F4F3;
}

.ql-toolbar.ql-snow {
	border-radius: 5px 5px 0px 0px;
	border: none;
	color: #046380;
	background-color: #F2F4F3;
}

.ql-editor {
	height: 120%;
}

.container-editing-chapter {
    margin: 0 auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.container-editing-chapter h2 {
	margin-top: 6rem;
	margin-bottom: 2.5rem;
	text-align: center;
	font-size: 1.8rem;
}

.editable-chapter-title.edit-active {
	width: 100%;
}

.content-info-chapter-edit .edit-paragraph.edit-active:hover, 
.content-info-chapter-edit .topic.edit-active:hover,
.content-info-chapter-edit .editable-chapter-title.edit-active:hover {
    background-color: transparent; /* Resets background to transparent */
	cursor: auto;
}

.content-info-chapter-edit .edit-paragraph.edit-active:hover::after,
.content-info-chapter-edit .topic.edit-active:hover::after, 
.content-info-chapter-edit .example.edit-active:hover::after, 
.content-info-chapter-edit .best-practices.edit-active:hover::after, 
.content-info-chapter-edit .editable-chapter-title.edit-active:hover::after {
    content: none; /* Removes the 'Click to edit' text */
    background-color: transparent; /* Resets background to transparent */
    color: inherit; /* Resets text color to inherit from parent */
    z-index: auto; /* Resets z-index to default */
    font-size: inherit; /* Resets font size to inherit */
    font-weight: inherit; /* Resets font weight to inherit */
    cursor: auto; /* Resets cursor to default */
    display: none; /* Hides the pseudo-element */
}

.content-info-chapter-edit .best-practices.edit-active li::before, .content-info-chapter-edit .example.edit-active li::before {
	content: ''; /* Unicode checkmark character */
  }

.edit-active {
	width: 90%;
	position: initial;
	margin: auto;
	background: none;
}

.edit-chapter-title-container .editor-q-page {
	width: 80%;
}

.editing-box-chap-button-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	margin: auto;
}

.editing-box-chap-button-container button {
	background-color: #046380;
    color: #dcd4c7;
	padding: 6px 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
	font-size: 1rem;
}

.editing-box-chap-button-container button:hover {
	background-color: #dcd4c7;
    color: #046380;
}

.editing-box-chap-button-container button:focus {
	outline: none;
	opacity: 0.8;
}

.nav-edit-bar {
	position: absolute;
	right: -8rem;
	top: 40%;
	display: flex;
	flex-direction: column;
	width: 3rem;
	justify-content: space-around;
	border: 1px solid rgb(167, 163, 126, 0.6);
	border-radius: 23px;
	padding: 0.5rem 0.5rem 0rem 0.5rem;
	transform: translateY(-50%);
}

.icon-nav-bar {
	margin-bottom: 0.5rem;
	display: inline-flex;
    align-items: center;
	position: relative;
}

.icon-nav-bar img {
	width: 2rem
}

.icon-nav-bar:hover {
	cursor: pointer;
	opacity: 0.8;
}

.custom-tooltip, .custom-tooltip-publish {
    visibility: hidden;
    min-width: 150px; /* Adjust based on content */
    background-color: #002F2F;
    color: #dcd4c7;
    text-align: center;
    padding: 5px 10px;
    border-radius: 4px;
	font-size: 0.8rem;
    
    /* Position the tooltip to the right of the icon */
    position: absolute;
    z-index: 1;
    left: calc(100% + 10px); /* Adjust based on desired distance */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.custom-tooltip-publish {
	width: 250px;
	z-index: 3;
}

.custom-tooltip-left {
    visibility: hidden;
    min-width: 150px; /* Adjust based on content */
    background-color: #002F2F;
    color: #dcd4c7;
    text-align: center;
    padding: 5px 10px;
    border-radius: 4px;
	font-size: 0.8rem;
    
    /* Position the tooltip to the right of the icon */
    position: absolute;
    z-index: 1;
    right: calc(100% + 10px); /* Adjust based on desired distance */
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.custom-tooltip::before, .custom-tooltip-publish::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 100%; /* Position the arrow on the left side of the tooltip */
	margin-top: -5px; /* Adjust this value to move the arrow up or down */
	border-width: 5px;
	border-style: solid;
	border-color: transparent #002f2f transparent transparent;
}

.custom-tooltip-left::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%; /* Position the arrow on the left side of the tooltip */
	margin-top: -5px; /* Adjust this value to move the arrow up or down */
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent transparent #002f2f;
}

.icon-nav-bar:hover .custom-tooltip, .info-course-fees:hover .custom-tooltip, .course-delete:hover .custom-tooltip-left, .chapter-delete:hover .custom-tooltip-left, .container-return-course:hover .custom-tooltip-left, .container-cards-style:hover .custom-tooltip-left, .help-toggle-publish:hover .custom-tooltip-publish, .help-add-file:hover .custom-tooltip-publish,
.close-select-template:hover .custom-tooltip-left {
    visibility: visible;
    opacity: 1;
}

#add-below-edit-nav-bar {
	rotate: 180deg;
}

.chapter-body-image {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.chapter-body-image img {
	width: 100%;
	height: 100%;
    object-fit: cover;
	border-radius: 8px;
	margin: auto;
} 

.video-body-chapter {
	display: flex;
	flex-direction: row;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 8px;
}

.video-body-chapter video {
	width: 100%;
	height: 100%;
    object-fit: contain;
	border-radius: 8px;
	margin: auto;
} 


.alert-delete-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 5rem;
	width: 70%;
	margin-left: 15%;
	margin-right: 15%;
}

.alert-delete-container .alert-img, .alert-delete-container .text-alert-delete {
	display: flex;
	justify-content: center;
	margin-bottom: 2rem;
	overflow: hidden;
}

.alert-delete-container .alert-img img {
	width: 100px;
	height: auto;
}

.alert-delete-container .text-alert-delete p {
	font-size: 1.5rem;
	text-align: center;
}

.alert-delete-container .alert-buttons {
	margin-top: 3rem;
}

.alert-delete-container .alert-buttons .proceed-delete {
	background-color: #A7A37A;
	color: #002F2F;
}

.alert-delete-container .alert-buttons .proceed-delete:hover {
	opacity: 0.8;
	color: #002F2F;

}

.fade-out {
	animation: fadeOut 3s forwards;
  }
  
  @keyframes fadeOut {
	to {
	  opacity: 0;
	}
  }

.chapter-image-text, .chapter-image-text-template  {
	display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: flex-start;
    height: 100%;
    margin: auto;
	position: relative;
}

.chapter-image-text .chapter-body-image, .chapter-image-text-template .chapter-body-image-template {
	width: 100%;
	height: 350px;
}

.chapter-image-text .chapter-body-image .nav-edit-bar {
	top: 50%;
}

.chapter-image-text .left-nav-bar .nav-edit-bar {
	right: 27rem;
	z-index: 4;
}

.chapter-image-text .chapter-image-text-image {
	width: 350px;
	height: 350px;
    object-fit: cover;
	margin: auto;
}

.chapter-image-text .edit-paragraph, .chapter-image-text .topic  {
	width: 90%;
	margin: auto;
}

.chapter-image-text .editor-q-page {
	margin-right: 1rem;
	max-width: 400px;
}

.tokens-charge-expand-concept {
	text-align: center;
}

.select-activity {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	margin-top: 8rem;
	margin-bottom: 5rem
}

.add-activity-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 150px;
	height: 150px;
	align-items: center;
	opacity: 0.7;
	margin: 0 10rem;
}

.add-activity-container img {
	width: 100%;
	height: auto;
}


.arrows-ed-act {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	position: relative;
}

.arrows-ed-act img {
	width: 35px;
	height: auto;
}

.arrows-ed-act-next {
	position: absolute;
	right: 1rem;
	top: 10rem;
	cursor: pointer;
}

.arrows-ed-act-prev {
	position: absolute;
	left: 1rem;
	top: 10rem;
	cursor: pointer;
}

.arrows-ed-act .not-active {
	cursor: default;
}

.activity-edit-case-container {
	margin-top: 7rem;
}

.activity-edit-case-container .editing-lb-button-container {
	margin-top: 5rem;
}

.edit-questions-lables {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;
}

.edit-options-labels {
	width: 100%;
}

.edit-correct-ans-labels {
	width: 50%;
	align-self: center;
}

.levels-container-edit {
	display: flex;
	flex-direction: row;
	margin: 0;
	justify-content: space-between;
	flex: 1;
}

.left-column-levels, .right-column-levels {
	flex: 1;
	width: 100%;
}

.left-column-levels .editing-lb, .right-column-levels .editing-lb {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
	width: auto;
}

.left-column-levels .level2 {
	margin-left: 1.5rem;
}

.left-column-levels .level3 {
	margin-left: 2.5rem;
}

.screens-container {
	position: relative;
    width: 100%;
    overflow: hidden; 
}

.card-templates-container {
	position: absolute; /* Fixed positioning relative to the viewport */
    top: 12rem; /* Align top */
    right: -100%; /* Start off the screen to the right */
    width: 100%; /* Width of the lightbox */
    transition: right 0.5s ease-in-out; /* Smooth transition for sliding */
    z-index: 2; /* Ensure it's above other content */
	display: flex;
	background-color: #002F2F;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 5rem;
	padding-bottom: 15rem;
}


.card-template-style {
	display: flex;
    flex-direction: row;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
    margin: auto;
	position: relative;
}

.card-template-style:hover::after {
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(218, 217, 200, 0.7);
    color: #dcd4c7;
    z-index: 3;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	/*background-image: url('/images/nav-edit-bar/check_box.svg'); /* Specify the path to your image */
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    background-size: 3rem; /* Adjust this value as needed */
	background-blend-mode: multiply;
	border-radius: 10px;
}

.selected-template::after, .selected-template:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(218, 217, 200, 0.95);
    color: #dcd4c7;
    z-index: 2;
	font-size: 1.5rem;
	font-weight: 600;
    cursor: pointer;
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
	background-image: url('/images/nav-edit-bar/check_box.svg'); /* Specify the path to your image */
    background-repeat: no-repeat;
    background-position: center; /* Center the background image */
    background-size: 3rem; /* Adjust this value as needed */
	background-blend-mode: multiply;
	border-radius: 10px;
}

.close-select-template {
	display: none;
	position: fixed;
    bottom: 11rem;
    right: 1rem;
    color: #EFECCA;
	cursor: pointer;
	z-index: 3;
	width: 50px;
	height: 50px;
}

.references {
    width: 85%;
    text-align: justify;
}

.references h4 {
    text-align: center;
	margin-bottom: 2rem;
}

/* HOME CONTINUE */


/*PROFILE---------------------------------------------------------------*/

.photo-prof-pic {
	display: flex;
    justify-content: center;
    position: absolute;
    margin-top: -12rem;
    left: 50%;
    right: 50%;
}

#imagePreview {
	max-width: 200px;
    max-height: 200px;
    min-width: 200px;
    min-height: 200px;
    display: block;
    cursor: pointer;
    border: 8px solid #A7A37E;
    background-color: #A7A37E;
    border-radius: 45px;
    margin-top: 2rem;
}

.photo-prof-pic img {
	width: 100%;
	height: 100%;
    object-fit: cover;
	border-radius: 8px;
	margin: auto;
}

.photo-prof-pic label[for="profilepicture"] {
    display: inline-block; /* Adjust based on your layout */
    cursor: pointer; /* Re-iterate cursor pointer to emphasize interactivity */
}

.edit-profile-form {
	margin-top: 6.5rem;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	width: 100%;
}

.edit-profile-columns {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: baseline;
	margin-bottom: 3rem;
}

.edit-prof-left, .edit-prof-right {
	display: flex;
    flex-direction: column;
    align-items: first baseline;
    justify-content: center;
    width: 90%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

.edit-profile-form .field-create input {
	width: 65%;
	color: #002F2F;
}

.edit-profile-form .field-create select {
	width: 65%;
	color: #002F2F;
	cursor: pointer;
}

.responsive-profile-fields {
	display: none;
}

.edit-prof-left .field-create, .edit-prof-left .field-box {
	border-radius: 25px 0px 0px 25px;
}

.edit-prof-right .field-create, .edit-prof-right .field-box {
	border-radius: 0px 25px 25px 0px;
}

.edit-prof-right .field-box, .edit-prof-left .field-box {
	margin-bottom: 2rem;
}

.pregunta-disponibilidad {
	color: #046380;
	opacity: 0.8;
	display: block;
	font-size: 18px;
	margin: 20px 0;
}

.edit-profile-columns .pregunta-disponibilidad {
	font-weight: 600;
}

.label-edit-prof-img {
	width: 2rem;
	height: auto;
	margin-top: 0.2rem;
}

.container-editing-prof-pic {
	display: flex;
    flex-direction: column;
    width: 80%;
    margin-left: 10%;
    justify-content: center;
    margin-top: 5rem;
    align-items: center;
}

.container-cropper-prof {
	max-height: 350px;
	max-width: 350px;
	border-radius: 8px;
	overflow: hidden;
	margin-top: 4rem;
	margin-bottom: 4rem;
}


#croppingContainer {
	max-height: 350px;
	max-width: 350px;
	border-radius: 8px;
}

.cropped-img-btn {
	width: 12rem;
}


/* HOME */

.free-course-home, .paid-course-home {
	position: absolute;
	top: 1.5rem;
	right: 1.5rem;
	width: 30px;
	height: auto;
}


.free-course-home img, .paid-course-home img {
	width: 100%;
	height: auto;
}

.info-course-fees {
	position: relative;
}

.card, .card-temp, .card-txt-img, .card-template {
	width: 375px;    /* Width of the card resembling the screen width of a typical smartphone */
    height: 667px;   /* Height of the card, maintaining a common aspect ratio */
    border: 1px solid #fef7ed; /* Optional, adds a border to define the card */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional, adds a shadow for better visualization */
    margin: 20px;    /* Optional, adds margin for spacing around the card */
	border-radius: 10px;
}

.card-temp {
	position: relative;
}

.cards-sessions {
	position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    width: 375px;
    border: none;
    height: 700px;
    border-radius: 25px 25px 0 0;
    overflow: hidden;
    background-color: #002F2F;
}

.cards-columns {
	display: flex;
	flex-direction: column;
	width: auto;
	height: auto;
	margin-bottom: 2rem;
}

.cards-columns .chapter {
	display: flex;
	flex-direction: row;
}

.cards-container-phone {
	display: flex;
	flex-direction: row;
	width: 375px;
    border: none;
    height: 667px;
}

.phone-container .card, .phone-container .card-temp {
	min-width: 375px;
	max-width: 375px;
	height: 667px;
	border: none;
	margin: 0;	
}

.phone-container form {
	display: flex;
	flex-direction: row;
}

.phone-container h1 {
	margin: auto;
	text-align: center;	
}

.fotter-app-mock {
	position: absolute;
    bottom: 0.7rem;
    left: 0.4rem;
    background-color: #002F2F;
    width: 97%;
    display: flex;
    height: 4rem;
    flex-direction: row;
    margin: auto;
    justify-content: space-around;
    align-items: center;
    border-radius: 0 0 35px 25px;
    border-top: 1px solid #A7A37E66;
}

.footer-app-mock-cont {
	width: 35px;
	height: 35px;
}

.footer-app-mock-cont img {
	width: 100%;
	height: auto;
	margin: auto;
}

.footer-app-mock-cont-photo {
	width: 35px;
	height: 35px;
	border-radius: 25px;
	overflow: hidden;
	border: 2px solid #A7A37E;
}

.footer-app-mock-cont-photo img {
	width: 100%;
	height: auto;
	object-fit: cover;
}


/* TEMPLATES */

.card, .card-temp, .card-txt-img  {
    font-family: var(--d-font-family);
    font-size: var(--d-font-p);
    color: var(--d-primary);
    text-align: var(--d-text-alignment);
    position: relative;
    border-radius: 10px;
    background-color: var(--d-background);
    background: var(--d-url);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    outline: var(--d-outline);
    outline-offset: var(--d-outline-offset);
}

.chapter-title h2 {
    text-align: var(--d-title-alignment);
    color: var(--d-secondary);
    font-size: var(--d-font-title);
    letter-spacing: 1px;
    font-weight: var(--d-title-weight);
    padding-bottom: 2rem;
    width: var(--d-widht);
    margin: auto;
}

.activity-title h1 {
    text-align: var(--d-title-alignment);
    margin-bottom: 2rem;
    color: var(--d-secondary);
    font-size: 2.5rem;
    letter-spacing: 1px;
    font-weight: var(--d-title-weight);
    border-bottom: 2px dashed var(--d-secondary);
    padding-bottom: 2rem;
    max-width: var(--d-widht);
    margin-left: auto;
    margin-right: auto;
}

.header-activity,  h2 {
    color: var(--d-secondary)
}

.activity-label-edit-paragraph {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: var(--d-line-height);
}

.activity-main h2 {
    font-size: large;
    font-weight: var(--d-subtitle-weight);
    text-align: var(--d-title-alignment);
    color: var(--d-secondary);
    width: var(--d-widht);
    margin: 2rem auto;
    border: none;
    flex: 0.5;
}

.activity-main label {
    display: flex;
    margin: 5px auto;
    padding: 5px 20px;
    border: 1.9px dashed var(--d-primary);
    border-radius: var(--d-border-radius-label);
    cursor: pointer;
    position: relative;
    transition: 0.3s;
    min-height: 50px;
    min-width: var(--d-widht);
    max-width: var(--d-widht);
    line-height: 1.5;
    align-self: center;
    text-align: center;
    font-size: small;
    font-weight: var(--d-p-weight);
}

.activity-main button {
    display: block;
    background-color: var(--d-secondary); 
    color: var(--d-background); 
    border: none;
    padding: 13px 40px;
    margin: 30px auto;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s, transform 0.3s;
}
    
.activity-main button:hover {
    background-color: var(--d-tertiary); 
}
        
.activity-main button:disabled {
    background-color: var(--d-secondary); 
    border: 1px solid var(--d-primary);
    cursor: default;
    color: var(--d-primary);
}

.topic {
    width: var(--d-widht);
    font-size: var(--d-font-title);
    font-weight: var(--d-title-weight);
    margin: 0;
    padding: 0;
    text-align: var(--d-title-alignment);
    color: var(--d-secondary)
}

.topic h4 {
    font-size: var(--d-font-subtitle);
    font-weight: var(--d-title-weight);
}

.edit-paragraph {
    width: var(--d-widht);
    font-size: var(--d-font-p);
    font-weight: var(--d-p-weight);
    margin: 0;
    padding: 0;
    text-align: var(--d-text-alignment);
    line-height: var(--d-line-height);
}


.example {
    width: var(--d-widht);
    height: auto;
    padding: 0;
    margin: auto;
    text-align: var(--d-text-alignment);
    font-weight: var(--d-p-weight);
    line-height: var(--d-line-height);
    font-size: var(--d-font-p);
}

.example::before {
    content: "#irl";
    display: block;
    color: var(--d-secondary);
    font-size: var(--d-font-title);
    font-weight: var(--d-title-weight);
    margin-bottom: 1rem;
    text-align: var(--d-title-alignment);
}

.example ul, .best-practices ul {
	width: var(--d-widht);
}

.card .content_list {
    width: var(--d-widht);
}

.card ul {
    height: auto;
    padding: 0;
    font-weight: var(--d-p-weight);
    line-height: var(--d-line-height);
    margin: auto;
}

.card li {
    line-height: var(--d-line-height);
    padding-left: 1.875rem;
    position: relative;
    margin-top: 1rem;
}

.card li::before, .card ul.content_list li::before {
    content: var(--d-list-type);
    font-weight: var(--d-p-weight);
    position: absolute;
    left: 0;
    font-size: var(--d-font-p);
    color: var(--d-primary);
}

.best-practices-title, .example-title {
    font-weight: var(--d-title-weight);
    font-size: var(--d-font-title);
}

.best-practices::before {
    content: "#pro-tip";
    display: block;
    color: var(--d-secondary);
    font-size: var(--d-font-title);
    font-weight: var(--d-title-weight);
    margin-bottom: 1rem;
    text-align: var(--d-title-alignment);
}

.references {
    width: var(--d-widht);
    font-size: var(--d-font-p);
    font-weight: var(--d-p-weight);
}

.chapter-image-text {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    position: relative;
    align-items: center;
    margin-top: 1.1rem;
}

.chapter-image-text h1 {
    width: var(--d-widht);
}

.chapter-image-text .chapter-image-text-image {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: auto;
    border-radius: var(--d-border-radius-img)
}

.chapter-body-image img {
    width: var(--d-width-full-img);
    height: var(--d-height-full-img);
    object-fit: cover;
    border-radius: var(--d-border-radius-img)
} 

.chapter-image-text .chapter-body-image {
    width: var(--d-imagetxt-widht);
    height: 350px;
    object-fit: cover;
    margin: 0;
    margin-top: var(--d-img-margin-top);
    border-radius: var(--d-border-radius-img)
}


.chapter-image-text .edit-paragraph {
    width: var(--d-widht);
    font-size: var(--d-font-p);
    font-weight: var(--d-p-weight);
    margin: 0;
    padding: 0;
    text-align: var(--d-text-alignment);
    position: initial;
    margin-top: var(--d-img-margin-top-p);
    line-height: var(--d-line-height);
}

.video-body-chapter {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: var(--d-width-full-img);
    height: var(--d-height-full-img);
    margin: auto;
    border-radius: var(--d-border-radius-img);
}
    
.video-body-chapter video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    margin: auto;
} 


.audio-body-chapter {
    width: var(--d-widht);
    margin: auto;
}

.audio-body-chapter audio {
    width: 100%;
    border-radius: 25px;
}

.course-title-image {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 50%;
    align-self: center;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    overflow: hidden;
    margin-top: 2.5rem;
}

.course-title-image img {
    width: var(--d-imagetxt-widht);
    height: auto;
    object-fit: cover;
    margin: auto;
}

.activity-case-options-level3, .activity-case-options-level2, .activity-case-options-level1 {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-around;
    width: var(--d-widht);
    padding: 1rem;
    border-radius: 10px;
    border: 3px dashed var(--d-secondary);
    margin: auto;
	margin-bottom: 0.25rem;
	font-size: 0.8rem;
	width: 100%;
}


.header-activity {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.header-activity p {
    font-size: var(--d-font-p);
    margin: auto;
    padding: 0 1rem;
    font-weight: var(--d-p-weight);
    line-height: var(--d-line-height);
}

.header-activity-image {
    width: 50%;
    position: relative;
    margin-bottom: 2rem;
    align-self: center;
}

.header-activity-image::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.header-activity-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50% 50% 0%;
}

.activity-main label:hover {
    background: var(--d-secondary);
    border: 3px solid var(--d-secondary);
    color: var(--d-background);
}

.activity-main label:focus {
    background: var(--d-primary);
    color: var(--d-secondary);
    border:  3px solid var(--d-tertiary);
    outline: none;
    box-shadow: none;
}

.activity-main input[type="radio"] {
    display: none;
}

.activity-main input[type="radio"]:checked + label {
    background: var(--d-primary);
    color: var(--d-tertiary);
    border:  3px solid var(--d-tertiary);
}

.activity-case-options-level3:hover, .activity-case-options-level2:hover, .activity-case-options-level1:hover {
    background: var(--d-background);
	border: 3px solid var(--d-secondary);
    color: var(--d-primary);
}

.activity-case-options-level3:focus, .activity-case-options-level2:focus, .activity-case-options-level1:focus {
    background: var(--d-secondary);
    color: var(--d-background);
	border:  3px solid var(--d-secondary);
	outline: none;
    box-shadow: none;
}

.activity-case-options-level3.checked, .activity-case-options-level2.checked, .activity-case-options-level1.checked {
    background: var(--d-secondary);
    color: var(--d-background);
	border:  3px solid var(--d-secondary);
}

.new-cases-l2 h2, .new-cases-l1 h2 {
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--d-secondary);
    padding-bottom: 1.3rem;
    font-weight: var(--d-p-weight);
    color: var(--d-secondary);
    width: var(--d-widht);
    margin-left: var(--d-margin-left-activity);
}

.new-cases-l3 h2 {
    font-weight: var(--d-subtitle-weight);
    color: var(--d-secondary);
    width: var(--d-widht);
    margin-left: var(--d-margin-left-activity);
}

.new-decision-level3 h1 {
    font-weight: var(--d-title-weight);
    color: var(--d-primary);
    width: var(--d-widht);
	margin-left: var(--d-margin-left-activity);
}


/* TEMPLATE */


.card-template, .card-temp-template, .card-txt-img-template  {
font-family: var(--d-font-family);
font-size: var(--d-font-p);
color: var(--d-primary);
text-align: var(--d-text-alignment);
position: relative;
border-radius: 10px;
background: var(--d-url);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
outline: var(--d-outline);
outline-offset: var(--d-outline-offset)
}

.chapter-title-template h2 {
text-align: var(--d-title-alignment);
color: var(--d-secondary);
font-size: var(--d-font-title);
letter-spacing: 1px;
font-weight: var(--d-title-weight);
padding-bottom: 2rem;
width: var(--d-widht);
margin: auto;
}

.topic-template {
width: var(--d-widht);
font-size: var(--d-font-title);
font-weight: var(--d-title-weight);
margin: 0;
padding: 0;
text-align: var(--d-title-alignment);
color: var(--d-secondary)
}

.topic-template h4 {
font-size: var(--d-font-subtitle);
font-weight: var(--d-title-weight);
}

.edit-paragraph-template {
width: var(--d-widht);
font-size: var(--d-font-p);
font-weight: var(--d-p-weight);
margin: 0;
padding: 0;
text-align: var(--d-text-alignment);
line-height: var(--d-line-height);
}


.chapter-image-text-template {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: auto;
    position: relative;
    align-items: center;
    margin-top: 1.1rem;
}

.chapter-image-text-template h1 {
    width: var(--d-widht);
}

.chapter-image-text-template .chapter-image-text-image-template {
    width: 100%;
    height: auto;
    object-fit: cover;
    margin: auto;
    border-radius: var(--d-border-radius-img);
    margin-top: var(--d-img-margin-top-template)
}

.chapter-body-image-template img {
    width: var(--d-width-full-img);
    height: var(--d-height-full-img);
    object-fit: cover;
    border-radius: var(--d-border-radius-img)
} 

.chapter-image-text-template .chapter-body-image-template {
    width: var(--d-imagetxt-widht);
    height: 350px;
    object-fit: cover;
    margin: 0;
    margin-top: var(--d-img-margin-top);
    border-radius: var(--d-border-radius-img)
}


.chapter-image-text-template .edit-paragraph-template {
    width: var(--d-widht);
    font-size: var(--d-font-p);
    font-weight: var(--d-p-weight);
    margin: 0;
    padding: 0;
    text-align: var(--d-text-alignment);
    position: initial;
    margin-top: var(--d-img-margin-top-p);
    line-height: var(--d-line-height);
}



/* ---- CREATORS FUND ----- */

.about-us-cf-main-container {
	display: flex;
    flex-direction: column;
    width: 100%;
    background-position: center;
	justify-content: center;
}

.creatorsfund-text-container {
    position: relative;
	display: flex;
    flex-direction: row;
    width: 100%;
	height: auto;
    margin-left: auto;
    margin-right: auto;
    justify-content: center;
    flex-wrap: nowrap;
    align-items: center;
	background-color: rgba(226, 225, 213, 0.8);
	margin-top: 5rem;
	padding-top: 2rem;
    padding-bottom: 5rem;
}

.creatorsfund-text-container::before {
    content: '';
    position: absolute; /* Position the ::before element absolutely */
    top: 0;
    left: 0;
    background-color: rgba(0, 47, 47, 0.7);
    width: 100%;
    height: 100%;
    z-index: -1; /* Send the ::before element behind the content */
}

.creatorsfund-text-container h1 {
    color: #046380;
	text-align: center;
	font-size: 4rem;
	margin-top: 2rem;
	margin-bottom: 3rem;
	font-weight: 600;
}

.creatorsfund-text-container h3 {
    color: #002F2F;
	text-align: center;
	font-size: 2rem;
	margin-top: 2rem;
	font-weight: 800;
}

.creatorsfund-text-container h4 {
    color: #046380;
	text-align: center;
	font-size: 1.2rem;
	margin-top: 1rem;
	font-weight: 600;
}

.creatorsfund-text-container p {
    color: #002F2F;
	text-align: left;
	font-size: 1.2rem;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	font-weight: 500;
	width: 70%;
}

.cf-images-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-wrap: wrap;
	width: 80%;
	margin: auto;
	margin-top: 5rem;
}

.cf-image-cont {
	width: 15%;
	height: auto;
	margin: 1rem;
	display: flex;
	justify-content: center;
}

.cf-image-cont img {
	width: 150px;
	height: auto;
}

.logincf-icon-button {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-top: 4rem;
}

.externalcf-circle-login {
	display: flex;
    justify-content: center;
    margin: auto;
    width: 20%;
    min-width: 260px;
	max-width: 260px;
    height: 3.5rem;
    border: 1px solid rgb(0, 47, 47, 0.8);
    padding-left: 9px;
    border-radius: 50px;
    font-weight: 500;
    background-color: rgb(0, 47, 47, 0.1);
    margin: auto;
    color: rgb(0, 47, 47, 0.9);
    margin-bottom: 5rem;
    align-self: center;
    padding: 0 0.2rem 0 0.2rem;
    align-content: center;
}

.logincf-icon-button button {
	margin: auto;
	display: inline-block;
	width: 100%;
	min-width: 250px;
	max-width: 250px;
	height: 3rem;
	border: 1px solid rgb(0, 47, 47, 0.8);
	padding: 7px;
	border-radius: 50px;
	font-weight: 500;
	background-color: rgba(0, 47, 47, 0.8);
	margin: auto;
	color: rgba(226, 225, 213, 1);
	align-self: center;
	transition: opacity 0.5s ease-in-out;
}

.logincf-icon-button button:hover {
	border: 1px solid #046380;
	background-color: #046380;
	color: rgb(239, 236, 202, 1);
}




  /*RESPONSIVE--------------------------------------------*/
  /*PHONES*/

  

  @media (max-width: 600px) {

			/* LANDING PAGE */
		.landing-main-container {
			height: auto;
		}

		.landing-logo-cont {
			position: fixed;
			top: 0;
			margin: auto;
			background-color: rgb(0, 47, 47);
			z-index: 6;
		}

		.landing-user-type {
			flex-direction: column-reverse;
			margin-top: 10rem;
			margin-bottom: 5rem;
		}

		.landing-footer {
			display: flex;
			flex-direction: column;
			width: 100%;
		}

		.landing-learner, .landing-creator {
			width: 90%;
			margin-bottom: 3rem;
		}

		.landing-learn-more {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			justify-content: center;
			width: 100%;
			margin-top: 0.5rem;
		}

		.landing-learn-more a {
			font-size: 0.8rem;
		}

		.landing-contact-social {
			display: flex;
			flex-direction: row;
			justify-content: center;
			height: 100%;
			margin: auto;
			margin-bottom: 0.5rem;
		}

		.landing-address {
			display: none;
		}

		.modal-waitlist {
			position: fixed;
			margin: auto;
		}

		.waitlist-modal-container {
			width: 90%;
			margin: auto;
		}


		.editing-lb label {
			display: none;
		}

		/* CREATE COURSE */

		.create-course-form {
			width: 90%;
			margin: auto;
			margin-top: 5rem;
			margin-bottom: 5rem;
		}

		.field-create input {
			width: 100%;
			align-self: center;
		}

		.field-create-duration input {
			width: 100%;
		}

		.nombre-de-usuario {
			display: none;
		}

		.user-view {
			top: 4.9rem;
			left: 0;
			margin: auto;
			width: 100%;
			margin-right: auto;
			background: #046380;
			padding-top: 2px;
		}
		.header-principal {
			justify-content: flex-start;
			padding-left: 0.5rem;
		}

		.free-trial-msg {
			top: 8rem;
		} 

		.container-course-home {
			margin-left: 0;
			min-width: 350px;
			max-width: 350px;
		}

		.logo-header {
			text-align: left;
		}

		.content-to-edit .course-header {
			display: flex;
			flex-direction: column;
		}

		.course-image, .course-header-info {
			width: 100%;
		}

		.add-module {
			margin-bottom: 5rem;
		}

		.footer-sticky.visible {
		bottom: 5rem;
		}

		.chapter, .activity-main {
			width: 90%
		}

		.example, .best-practices, .inner-activity-main, .inner-activity-main, .activity-main h1, .inner-activity-main h1, .activity-main h3, .inner-activity-main h3 {
			width: 100%;
			margin-left: 0;
			padding: 2px;
		}

		.chapter_title h2 {
			text-align: center;
		}

		.header-activity {
			flex-direction: column;
		}

		.header-activity-image {
			width: 70%;
			margin-bottom: 1rem;
			margin-top: 1rem;
		}

		.activity-case-level3, .activity-case-level2, .activity-case-level1 {
			flex-direction: column;
		}

   
  	/* ------------------ MENU RESPONSIVE -----------------------*/


  	.menu-principal {
  		display: none;
  	}

  	.menu-responsive {
  		display: block;
  		position: fixed;
  		bottom: 0;
		left: 0;
  		width: 100%;
  		height: 80px;
  		background: #002f2f;
  		z-index: 10000;
  	}

  	.btn-home-activo {
  		opacity: 1;
  	}

  	.menu-responsive h4 {
  		position: absolute;
  		bottom: 32px;
  		left: 5%;
  		color: #fff;
  	}


	/* LANDING */

	.external-circle-login {
		width: 50%;
		min-width: 260px;
	}

	.external-circle-login button {
		width: 100%;
		min-width: 250px;
		font-weight: 700;
	}

	.about-us-text-container {
		width: 90%;
	}

	.about-us-text-container h1, .titlePaigetX h1, .space-content h1 {
		font-size: 2rem;
	}

	.about-us-text-container h3, .titlePaigetX h3, .space-content h3 {
		font-size: 1.5rem;
		margin-top: 0;
	}

	.login-icon-button {
		margin-top: 2rem;
	}

	.problems-landing {
		flex-direction: column;
	}
	
	.prob-def-landing {
		width: 90%;
		margin-bottom: 2rem;
	}

	.header-content {
		position: absolute;
		background: #002F2F;
		width: 100%;
		top: 4.9rem;
		margin: auto;
		padding-bottom: 0.5rem;
	}

	.header-content-learner {
		position: absolute;
		left: 0;
		flex-direction: row;
		width: 60%;
		padding-left: 0.5rem;
	  }

	  .header-content-creator {
		position: absolute;
		right: 0;
		padding-right: 0.5rem;
		flex-direction: row-reverse;
		width: 60%;
	  }

	  .header-content p {
		margin: 0;
		align-self: center;
		margin-left: 0.5rem;
		margin-right: 0.5rem;
	  }

	  .img-landing-header img {
		width: 30px;
		min-width: 20px;
		min-height: 24px;
		height: 24px;
	  }

	  .landing-learner-two, .landing-learner, .landing-creator {
        width: 100%;
        margin-bottom: 3rem;
        height: auto;
	  }

	  .screensPaigetx {
		width: 100%;
		height: auto;
	  }

	  .landing-icon-learner, .landing-icon-creat {
		flex-direction: column;
	  }

	  .textContainerPX {
		margin: auto;
	  }

	  .paigetCreators video {
		width: 95%;
		margin-left: auto;
		margin-top: 2rem;
		margin-bottom: 2rem;
	  }

	  .landing-learner video {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}


	  .landing-user-newspace {
		flex-direction: column-reverse;
		flex-wrap: wrap;
		width: 95%;
		padding-bottom: 5rem;
	  }

	  .screensPaigetx p {
		font-size: 1rem;
		line-height: 2rem;
	  }


	/* PROFILE */

	.login-box {
		margin-top: 30%;
		margin-bottom: 30%;
	}

	.lightbox-edit {
		margin-top: 35%;
	}

	.create-profile-form {
		width: 95%;
	}

	.responsive-profile-fields-hide {
		display: none;
	}

	.responsive-profile-fields {
		display: flex;
	}

	.edit-profile-columns {
		flex-direction: column;
	}

	.edit-prof-left, .edit-prof-right {
		width: 100%;
		margin: auto;
	}

	.create-profile-form {
		padding: 1rem;
	}

	.edit-prof-left input, .edit-prof-right input {
		min-width: 50%;
	}

	.edit-prof-left .field-box, .edit-prof-right .field-box {
		margin-bottom: 1rem;
		border-radius: 25px;
	}

	.edit-prof-left .field-create, .edit-prof-right .field-create {
		border-radius: 25px;
	}


	/* MENU NAV BAR RESPONSIVE */

    .menu-responsive ul {
      width: 99%;
      padding-right: 0;
      padding-top: 18px;
      text-align: right;
      display: flex;
	  flex-direction: row;
	  justify-content: space-around;
    }

  	.btn-home,
  	.btn-pt,
  	.btn-medication,
  	.btn-income,
  	.btn-balance,
    .btn-informacion,
    .btn-benefits
     {
  		position: static;
  		display: inline-block;
  		width: 40px;
  		margin: 0 2%;
  		height: 40px;
  		overflow: hidden;
  	}

  	.btn-home:hover,
  	.btn-pt:hover,
  	.btn-medication:hover,
  	.btn-income:hover,
  	.btn-balance:hover,
    .btn-informacion:hover,
    .btn-benefits:hover {
  		border: none;
  	}

  	.btn-home {
  		top: 30px;
  		right: -115px;
  		background: url("../images/home/iconos-menu/home_vF.svg") no-repeat;
		cursor: pointer;
  	}

  	.btn-pt {
  		top: 80px;
  		right: -184px;
  		background: url("../images/home/iconos-menu/createcourse.svg") no-repeat;
		cursor: pointer;
  	}

  	.btn-income {
  		top: 130px;
  		right: -140px;
  		background: url("../images/home/iconos-menu/managecourses.svg") no-repeat;
		cursor: pointer;
  	}


	/* DASHBOARD */

	.tab-dash h5 {
		font-size: 1rem;
		font-weight: 600;
	}

	.time-frame-dash h5 {
		padding: 0.3rem;
		padding-top: 0.8rem;
	}

	.data-card-box {
		margin-left: 0;
	}

	.general-dash-content {
		padding-bottom: 10rem;
	}

	.table-enr-head-m h5 {
		font-size: 1rem;
		font-weight: 600;	
	}

	.course-score-card-container {
		margin-left: 0;
		min-width: 98%;
    	max-width: 98%;
	}

	.score-cards-container {
		margin-bottom: 10rem;
	}

	.account-config-dash p {
		width: 90%;
	}

	#edit-account-form {
		width: 95%;
	}

	.account-config-dash {
		margin-bottom: 10rem;
	}



	/* PUBLISH COURSE */

	.publish-settings {
		width: 90%;
		margin: auto;
		margin-top: 40%;
		padding-top: 2rem;
		padding-bottom: 2rem;
	}

	.title-publish h3 {
		font-size: 2rem;
		font-weight: 600;
	}

	.help-toggle-publish {
		display: none;
	}
	
	.table-publish-settings {
		width: 90%;
	}

	.second-level-publish {
		margin: auto;
	}

	.third-toggle_publish_sh {
		margin-top: 1rem;
		justify-content: space-around;
		align-items: baseline;
		width: 90%;
		margin-left: 5%;
	}

	.freevssubs .toggle-switch {
		margin: auto;
	}

	.freevssubs {
		margin-top: 3rem;
	}

	/* CREATORS FUND */

	.cf-images-container {
		margin: auto;
		width: 70%;
		margin-top: 3rem;
	}

	.cf-image-cont {
		width: 40%;
		margin: auto;
		margin-bottom: 2rem;
	}

	.logincf-icon-button {
		margin-top: 1rem;
	}

	.creatorsfund-text-container h1 {
		font-size: 2rem;
        margin: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
        width: 90%;
	}
	
	.creatorsfund-text-container h3 {
		font-size: 1.2rem;
	}
	
	.creatorsfund-text-container p {
		font-size: 1rem;
		width: 80%;
	}

	.form-waiting .editing-lb {
		width: 100%;
		margin-left: auto;
	}

	.form-waiting .editing-lb-button-container {
		display: flex;
		justify-content: center;
		width: 100%;
		margin: auto;
		margin-top: 1rem;
	}

	.checkbox-waiting {
		font-size: 0.8rem;
	}
}