:root {
	--main-hex-blue: #3B3B74;
	--main-hex-red: #E63946;
	--main-hex-yellow: #E7CF00;
	--main-hex-green: #9fc63d;
	--main-hex-gray: #83809c;
	--main-hex-gray-light: #F3F3F3;
	--main-hex-black: #25272B;
	--main-hex-white: #ffffff;
	--main-hex-calendar: #072c48;
	--main-hex-calendar-details: #2f638a;

	--sec-rgb-gray: rgb(85, 92, 112);

	--blue-alert: #17a2b8;
	--yellow-alert: #ffc107;
	--red-alert: #dc3545;
}

@font-face {
	src: url('../webfonts/HumansRegular.ttf');
	font-family: humansRegular;
}

@font-face {
	src: url('../webfonts/HumansBold.ttf');
	font-family: humansBold;
}

* {
	font-family: Poppins, Arial;
	font-size: 14px;
	line-height: 1;
}

html,
body {
	font-family: Poppins, Arial;
	scroll-behavior: smooth;
}

body {
	counter-reset: section;
	min-height: 100vh;
	color: var(--main-hex-blue);
}

img {

	max-width: 100%;

}

.bg-blue-bpm {
	background-color: var(--main-hex-blue);
	color: var(--main-hex-white);
	border: 1px solid var(--main-hex-white);
}

.bg-blue-outline-bpm {
	background-color: var(--main-hex-white);
	color: var(--main-hex-blue);
	border: 1px solid var(--main-hex-blue);
}



.search {

	/*border-right: 0;*/

}

.search~span {

	position: absolute;

	top: 0;

	right: 25px;

	height: 100%;

	color: var(--main-hex-blue);

}

.no-click {

	pointer-events: none;

	opacity: 0.7;

}

.link-whats {

	position: fixed;

	z-index: 2;

	bottom: 20px;

	right: 20px;

}

.link-whats.active {

	z-index: 2;

	transition-delay: 0s;

}

.link-whats .link-whats-options {

	background: #fff;

	padding: 1rem;

	padding-bottom: 5rem;

	border-radius: 10px;

	opacity: 1;

	bottom: -300px;

	position: absolute;

	z-index: 0;

	transition: 1s;

}

.link-whats .link-whats-options.active {

	opacity: 1;

	bottom: 0;

}

.link-whats .link-whats-writeus {

	z-index: 3;

}

.link-whats .link-whats-writeus>a {

	color: var(--main-hex-blue);

	border-radius: 5px;

	position: relative;

	transition: .5s;

	transition-delay: .9s;

}

.link-whats .link-whats-writeus.active>a {}

.link-whats .link-whats-writeus>a span {

	background: #fff;

	border: 4px solid #fff;

	border-radius: 5px;

	border-top-right-radius: 1em;

	border-bottom-right-radius: 1em;

	margin-right: -50px;

	padding: .4em 1.25em;

	padding-right: 100px;

	z-index: 2;

}

.link-whats .link-whats-writeus>a img {

	max-width: 55px;

	position: relative;

	z-index: 2;

}

.cont-by p {

	margin: 0;

	/*padding-top: 5px;*/

	color: var(--main-hex-gray);

	text-align: right;

}

.cont-social-media {

	/*margin-top: 10px;*/

}

.cont-social-media a {

	margin: 0 10px;

	color: var(--main-hex-blue);

	font-size: 20px;

	background: #fff;

	padding: .25em .55em;

	border-radius: 100%;

}

.accordion .btn-link,
.accordion .btn-link:hover {

	color: #fff;

}

.accordion ul {

	list-style: none;

	margin: 0;

	padding: 0;

}

.accordion ul li a {

	color: var(--main-hex-blue);

}

.accordion .card {

	border: none;

	margin: 15px 0;

}

.accordion .card .card-header {

	padding: 0;

	border-radius: 1rem;

	position: relative;

}

.accordion .card .card-header:before {

	counter-increment: section;

	content: counter(section);

	position: absolute;

	top: 50%;

	left: 0;

	padding: 2em 1em;

	font-weight: 900;

	transform: translateY(-50%);

	height: 100%;

	display: flex;

	flex-direction: column;

	justify-content: center;

}

.accordion .card .card-header h2 button {

	padding-left: 30px;

}

.accordion .card .card-header~div {

	width: 95%;

	margin: 0 auto;

	border: 2px solid var(--main-hex-blue);

	border-radius: 0 0 20px 20px;

}

.form-group .prev-image {

	position: relative;

	width: 100%;

	height: 300px;

	background-position: center;

	background-size: cover;

}

.form-group .prev-image .edit-img {

	position: absolute;

	bottom: 15px;

	right: 15px;

}

.form-group .prev-image .edit-img .fa {

	background: var(--main-hex-red);

	color: var(--main-hex-blue);

	padding: .7em .6em;

	border-radius: 100%;

	font-size: 1.1rem;

	transition: all .2s ease;

	transform-origin: center;

}

.form-group .prev-image .edit-img:hover .fa {

	transform: scale(1.1);

}

.options_user p.p1,
.options_user p.p3 {

	color: var(--blue-alert);

}

.options_user p.p2 {

	color: var(--red-alert);

}

#container-inicio {

	margin-top: 5em;

}

.card-text,
.card-body {

	color: var(--main-hex-blue);

}

.card.card-course .card-title {
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
}

.card.card-course .card-body {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

.card.card-course .card-text {
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.card.card-course .card-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	padding-top: 1rem;
	border-top: 1px solid #e9ecef;
	margin-top: auto;
}

.card.card-course .card-actions .btn-action {
	flex: 1;
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: 6px;
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	transition: all 0.2s ease;
	cursor: pointer;
}

.card-text {

	position: relative;

}

.card-text .card-text-pay {

	font-size: 8em;

}

.card-text .card-text-pay:after {

	content: attr(data-text);

	position: absolute;

	bottom: 0%;

	left: 0;

	width: 100%;

	font-size: .1em;

}

@keyframes pulseText {

	0%,
	100% {

		opacity: 0.6;

		transform: scale(.9);

	}

	50% {

		opacity: 1;

		transform: scale(1);

	}

}

.card-text .card-text-pay.pulse {

	animation-name: pulseText;

	animation-duration: 2s;

	animation-iteration-count: infinite;

	color: red;

	display: block;

}

.name-user {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	background: var(--main-hex-red);

	padding: 15px;

	z-index: 9;

}

.name-user h1 {
	color: var(--main-hex-blue);
}

td {

	position: relative;

}

td a {

	cursor: pointer;

}

.info-trainer {

	display: none;

	position: absolute;

	top: 0;

	left: 0;

	background: #fff;

	border: 1px solid #000;

	border-radius: 5px;

	padding: 15px;

	z-index: 999;

}

.info-trainer .img-trainer {

	margin: 0 auto;

	margin-bottom: 10px;

	width: 80px;

	height: 80px;

	border: 2px solid #ccc;

	border-radius: 50%;

	background: #fff;

	background-size: cover;

	background-position: center;

}

td a:hover~.info-trainer,
.info-trainer:hover {

	display: block;

}

@keyframes pushMessage {

	0% {

		right: -50px;

		opacity: 0;

	}



	100% {

		right: 20px;

		opacity: 1;

	}

}



.card-header {

	background: none;

}

.btn-danger {

	background-color: var(--red-alert);

	border-color: var(--red-alert);

	color: #fff !important;

}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {

	opacity: .9 !important;

	background-color: var(--red-alert) !important;

	border-color: var(--red-alert) !important;

}

.btn-danger:active,
.btn-danger:focus {

	box-shadow: 0 0 0 0.2rem rgba(255, 239, 0, .25);

}

.btn-primary {
	background-color: var(--main-hex-blue);
	border-color: var(--main-hex-blue);
	color: var(--main-hex-white);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-blue);
	color: var(--main-hex-blue);
}

.icon {
	width: 20px;
	aspect-ratio: 1;
	display: block;
}

.icon.icon-lg {
	width: 65px;
}

.icon.icon-sm {
	width: 25px;
}

.btn-primary>.icon {
	color: currentColor;
	width: 1.2rem;
	aspect-ratio: 1;
	position: relative;
	display: inline-block;
}

.btn-primary>.icon svg * {
	stroke: currentColor;
}

.btn-primary.nav-link-left {
	border-color: #fff !important;
}

.activity-card .icon {
	width: 40px;
}

/* CUSTOM BUTTONS */
.btn-blue {
	background-color: var(--main-hex-blue);
	border-color: var(--main-hex-blue);
	color: var(--main-hex-white);
}

.btn-blue:hover,
.btn-blue:active,
.btn-blue:focus {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-blue);
	color: var(--main-hex-blue);
}

.btn-outlined-blue {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-blue);
	color: var(--main-hex-blue);
}

.btn-outlined-blue:hover,
.btn-outlined-blue:active,
.btn-outlined-blue:focus {
	background-color: var(--main-hex-blue);
	border-color: var(--main-hex-blue);
	color: var(--main-hex-white);
}

.btn-yellow {
	background-color: var(--main-hex-yellow);
	border-color: var(--main-hex-yellow);
	color: var(--main-hex-blue);
}

.btn-yellow:hover,
.btn-yellow:active,
.btn-yellow:focus {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-yellow);
	color: var(--main-hex-yellow);
}

.btn-outlined-yellow {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-yellow);
	color: var(--main-hex-yellow);
}

.btn-outlined-yellow:hover,
.btn-outlined-yellow:active,
.btn-outlined-yellow:focus {
	background-color: var(--main-hex-yellow);
	border-color: var(--main-hex-yellow);
	color: var(--main-hex-white);
}

.btn-view {
	background-color: var(--main-hex-blue);
	border-color: var(--main-hex-blue);
	color: var(--main-hex-white);
}

.btn-view:hover,
.btn-view:active,
.btn-view:focus {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-blue);
	color: var(--main-hex-blue);
}

.btn-outlined-view {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-blue);
	color: var(--main-hex-blue);
}

.btn-outlined-view:hover,
.btn-outlined-view:active,
.btn-outlined-view:focus {
	background-color: var(--main-hex-blue);
	border-color: var(--main-hex-blue);
	color: var(--main-hex-white);
}

.btn-edit {
	background-color: var(--main-hex-yellow);
	border-color: var(--main-hex-yellow);
	color: var(--main-hex-white);
}

.btn-edit:hover,
.btn-edit:active,
.btn-edit:focus {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-yellow);
	color: var(--main-hex-yellow);
}

.btn-outlined-edit {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-yellow);
	color: var(--main-hex-yellow);
}

.btn-outlined-edit:hover,
.btn-outlined-edit:active,
.btn-outlined-edit:focus {
	background-color: var(--main-hex-yellow);
	border-color: var(--main-hex-yellow);
	color: var(--main-hex-white);
}

.btn-delete {
	background-color: var(--main-hex-red);
	border-color: var(--main-hex-red);
	color: var(--main-hex-white);
}

.btn-delete:hover,
.btn-delete:active,
.btn-delete:focus {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-red);
	color: var(--main-hex-red);
}

.btn-outlined-delete {
	background-color: var(--main-hex-white);
	border-color: var(--main-hex-red);
	color: var(--main-hex-red);
}

.btn-outlined-delete:hover,
.btn-outlined-delete:active,
.btn-outlined-delete:focus {
	background-color: var(--main-hex-red);
	border-color: var(--main-hex-red);
	color: var(--main-hex-white);
}

.btn-w-icon>.icon {
	color: currentColor;
	width: 1.2rem;
	aspect-ratio: 1;
	position: relative;
	display: inline-block;
}

.btn-w-icon>.icon svg * {
	stroke: currentColor;
}

.btn-w-icon.nav-link-left {
	border-color: #fff !important;
}

.btn-nav-icon {
	color: var(--main-hex-blue);
}

.btn-nav-icon .icon {
	color: currentColor;
	width: 2.5rem;
	aspect-ratio: 1;
	position: relative;
	display: inline-block;
	transition: all .2s ease;
}

.btn-nav-icon:hover {

	.icon {
		transform: scale(1.1);
	}
}

.btn-default {
	background: var(--main-hex-blue);
	color: var(--main-hex-white);
	border-radius: 18px;
	padding: 0.3rem 2rem;
}

.btn-default:hover,
.btn-default:active,
.btn-default:focus {
	background-color: var(--main-hex-white) !important;
	border-color: var(--main-hex-blue) !important;
}

.btn-default.nav-link-left {

	border-color: var(--main-hex-blue) !important;

}

/* CUSTOM BADGE */
.bagde-container {
	background: #dcdcdc;
	padding: 0.5rem 1rem;
	width: 100%;
	border-radius: 0;
	border: 1px solid #ccc;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	transition: all 0.3s ease;
}

.cont-student .card.card-course:hover .bagde-container {
	top: 0px;
}

@media (min-width: 768px) {
	.bagde-container {
		top: -50px;
	}
}


.title_section {

	text-align: center;

}

.welcome {

	text-align: center;

}

.welcome .title {

	font-size: 3rem;

}



.message {

	position: fixed;

	top: 70px;

	/* right: 1%; */

	/*width: 30%;*/

	height: auto;

	padding: 15px;

	z-index: 2;

	background-color: var(--main-hex-red);

	color: var(--main-hex-blue);

	border: 2px solid var(--main-hex-blue);

	animation-name: pushMessage;

	animation-duration: 1s;

	animation-direction: initial;

	animation-fill-mode: forwards;

}

.message.invalid {

	background-color: red;

}

.message h4 {

	margin: 0;

	float: left;

}

.message a {

	float: right;

	margin-left: 15px;

	font-size: 15pt;

	color: var(--main-hex-blue);

}

.message.invalid a {

	float: right;

	font-size: 15pt;

	color: var(--main-hex-blue);

}

.message a i {

	background-color: var(--main-hex-red);

	border: 1px solid var(--main-hex-red);

	border-radius: 100%;

}





#cont_teclado {

	position: fixed;

	bottom: 30px;

	right: 30px;

	height: auto;

	background-color: white;

	border: 1px solid #bbbaba;

	padding: 15px;

	display: none;

}



#cont_teclado * {

	color: white;

	margin: 5px;

}



@font-face {

	font-family: coperlate;

	src: url("../webfonts/coperlate.ttf");



}



body {

	/*font-family: coperlate;*/

}



::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background-color: var(--main-hex-gray-light);
	border-radius: 1rem;
}

::-webkit-scrollbar-thumb {
	background-color: #ccc;
	border-radius: 1rem;
}

::-webkit-scrollbar-button {
	/*background-color: navy;*/
	width: 0;
	height: 0;
}

::-webkit-scrollbar-corner {
	background-color: black;
}

.img-banner {

	height: 40vh;

	background-size: cover;

	background-position: center;

	background-repeat: no-repeat;

	position: relative;

}

.img-banner:after {

	content: '';

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: rgba(0, 0, 0, 0.5);

}

.img-banner .img-banner-text {

	color: white;

	position: absolute;

	left: 50%;

	bottom: 10%;

	transform: translateX(-50%);

	z-index: 1000;

}

.grid-container.grid-videos {

	margin: 50px auto;

	display: grid;

	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));

	grid-column-gap: 10px;

	grid-row-gap: 30px;

	padding: 0 15px;

	max-width: 1140px;

}

.grid-container.grid-videos.grid-admin {

	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

	grid-column-gap: 30px;

	grid-row-gap: 30px;

	padding: 0 15px;

	max-width: 1140px;

}

.card.days-3 {

	background-color: var(--blue-alert);

	color: #fff;

}

.card.days-2 {

	background-color: var(--yellow-alert);

}

.card.days-1,
.card.days-0 {

	background-color: var(--red-alert);

	color: #fff;

}

.card .card-img-top {
	position: relative;
	height: 200px;
	object-fit: cover;
	border-radius: 0;
}

.card {
	color: var(--bs-heading-color);
}

.grid-container.grid-videos.grid-admin .card {

	border: 0;

	box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);

}

.grid-container.grid-videos.grid-admin .card .card-img-top {

	height: 180px;

}

.grid-container.grid-videos.grid-admin .card .card-img-top-admin .cont_type {

	position: absolute;

	left: 0;

	bottom: 0;

}

.grid-container.grid-videos.grid-admin .card .card-img-top-admin .cont_type span {

	background-color: var(--main-hex-blue);

	padding: .5em .75em;

	color: #fff;

}

.card.card-course .card-img-top .btn-play-video {

	opacity: 0;

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: rgba(0, 0, 0, 0.5);

	transition: all ease .5s;

}

.card.card-course .card-img-top .btn-play-video .fas {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	font-size: 3rem;

	color: white;

}

.card.lock .card-img-top .btn-play-video {

	pointer-events: none;

}

.card:not(.lock) .card-img-top:hover .btn-play-video {

	opacity: 1;

}

.card.card-course .card-body .card-title {
	margin: 0;
	text-overflow: ellipsis;
	overflow: hidden;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	-webkit-box-orient: vertical;
}

.card.card-course .card-body .icon-status {

	position: absolute;

	bottom: 10px;

	right: 10px;

	font-size: 1.5rem;

}

.card.card-course .card-body .icon-status.s-check {

	color: green;

}

.card.card-course .card-body .icon-status.s-play {

	color: blue;

}

.card.card-course .card-body .icon-status.s-lock {

	color: red;

}



.menu-left {
	background-color: var(--main-hex-white);
	height: 100vh;
	padding: 20px 0;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 10;
	box-shadow: 0 0 20px -10px #000;
	display: flex;
	flex-direction: column;
}

.menu-left .navbar-left {
	margin-top: 15px;
}

.menu-left .navbar-left .nav-left {
	display: flex;
	flex-direction: column;
	list-style: none;
	padding: 0;
	margin: 0 auto;
	overflow-x: hidden;
	overflow-y: auto;
	width: 90%;
}

.menu-left .navbar-left .nav-left .nav-item-left {

	width: 100%;

	position: relative;

	display: block;

	margin: 3px 0;

}

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left {

	width: 100%;

	padding: .5rem .75rem;

	color: var(--main-hex-black);

	background-color: #fff;

	transition: all .25s;

	display: flex;

	/*justify-content: space-between;*/

	align-items: center;

	text-decoration: none;

	transition: .5s ease;

	position: relative;

	border-radius: 10px;
	text-align: left;
	gap: 8px;

}

/*.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left:after{

	position: absolute;

	top: 0%;

	right: 0;

	z-index: -1;

	content: '';

	display: block;

	border: 8px solid #fff;

	border-bottom-color: transparent;

  	border-right-color: transparent;

  	opacity: 0;

	transition: .1s ease;

}*/

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left.disabled {

	pointer-events: none;

}

.menu-left .navbar-left .nav-left .nav-item-left .nav-subitem-left {

	display: none;

}

.menu-left .navbar-left .nav-left .nav-item-left.active .nav-subitem-left {

	display: block;

}

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left.active,
.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left:not(.logout):not(.active):not(.disabled):hover {

	/*border-top-right-radius: 9%;*/

	background: var(--main-hex-gray-light);

	background-size: 200% 100%;

	background-position: right bottom;

	color: var(--main-hex-black);

	font-weight: 600;

	/*transform: scale(1.05);*/

	width: 100%;

	transform-origin: left;

	/*box-shadow: 0 0 20px #000;*/

	z-index: 1;

	/*pointer-events: none;*/

}

.menu-left .navbar-left .nav-left .nav-item-left:hover {

	z-index: 2;

}

.menu-left .navbar-left .nav-left .nav-item-left .fa {

	position: absolute;

	top: 50%;

	left: 90%;

	transform: translateY(-50%);

}

.menu-left .navbar-left .nav-left .nav-item-left .fa.fa-circle {

	color: #fff;

}

/*.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left.active:after,

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left:not(.logout):not(.active):hover:after{

	opacity: 1;

	top: 100%;

}*/

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left.active .fas {

	opacity: 1;

	transform: translateX(0);

}

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left .icon {
	color: var(--main-hex-black);
	width: 1.5rem;
}

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left .icon-text {
	flex: 1;
}

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left .icon path {
	stroke: currentColor;
}

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left.logout {

	border-radius: 10px;

	border: 0;

}

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left.logout:hover {

	background-color: var(--main-hex-gray-light) !important;

	border: 0;

}

.menu-left .navbar-left .nav-left .nav-item-left .nav-link-left.logout .icon {

	color: #000;

}



.flash {

	position: fixed;

	width: 100%;

	top: 0;

	left: 0;

	z-index: 10;

	text-align: center;

}

.alert {

	font-weight: normal;

}

.alert-eustres {

	background: var(--main-hex-red);

	border-color: var(--main-hex-blue);

	color: var(--main-hex-blue);

}



.contmenus {

	height: auto;

	position: absolute;

	top: 0;

	left: 0;

	padding: 15px;

	z-index: 2;

}



.fa.fa-check-circle {

	color: #00FFEF;



}



.fa.fa-lock {

	color: #FF6862;

}



.fa.fa-play-circle {

	color: #77DD77;

}



.slow {

	left: 0 !important;

}



.btn.disabled {

	cursor: not-allowed;

}

#btn_menu {

	border-radius: 100%;

	background-color: rgb(85, 92, 112);

	color: white;

	font-size: 1.5rem;

	line-height: 1.5;

}



.aturqueza {

	background-color: #00FFEF !important;

	color: rgb(85, 92, 112) !important;

}



.menuright .btn {

	border-radius: 28px;

	padding-right: 25px;

	padding-left: 25px;

}

.band-title {
	border-left-width: 8px;
}

.user-profile .icon {
	display: inline-block;
	width: 25px;
	height: auto;
	aspect-ratio: 1;
}

.user-profile .icon svg * {
	stroke: currentColor;
}

.user-profile a .icon-btn {
	display: inline-block;
	width: 15px;
	height: auto;
	aspect-ratio: 1;
}

.user-profile .icon-btn svg * {
	stroke: currentColor;
}

.profile {
	display: flex;
	flex-wrap: wrap;
	padding: 30px 0;

}

.profile .each-box {

	flex: 1 1 40%;

	margin: 10px 0;

}

.profile .each-box.profile-info {

	flex: 1 1 60%;

}

.profile .each-box .profile-cat {

	width: 60%;

	text-align: center;

	margin: 0 auto;

}

.profile .each-box .profile-cat img {

	border: 5px solid var(--main-hex-blue);

	border-radius: 20px;

}

.profile_photo {
	width: 50px;
	background-color: #fff;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}



.cont_logo_panel {

	position: absolute;

	bottom: 15px;

	left: 50%;

	transform: translateX(-50%);

	width: 80%;

	max-width: 100%;

	display: flex;

	align-items: center;

	justify-content: space-between;

}

#logo_panel {
	align-self: center;
	margin: auto;
	position: relative;
	max-width: 100%;
	width: 180px;
}

.cont_logo_panel #logo_panel {

	position: relative;

	max-width: 100%;

}



.cont_info_user {
	position: relative;
	text-align: center;
	padding: 0 15px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 10px;
}


.list_video {

	margin-top: 30px;

	padding-left: 0;

}



.list_video a {

	color: white;

}



.list_video a.disabled {

	pointer-events: none;

	color: gray;

}



.person_name {
	text-align: center;
	color: var(--main-hex-black);
	margin: 0;
}



.list_video li {

	padding: 10px;

}



.list_video li.active {

	background: forestgreen;

}



.cont_vent_next {

	position: fixed;

	width: 100%;

	height: 100%;

	top: -100%;

	left: 0;

	background-color: rgba(0, 0, 0, 0.7);

	z-index: 5;

	transition-duration: 0.5s;

}



.cont_vent_next.down {

	top: 0 !important;

}



.cont_vent_next .vent_next {

	width: 30%;

	background-color: white;

	padding: 20px;

	border-radius: 5px;

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

}



.cont_vent_next .vent_next h4 {

	margin-bottom: 50px;

}



.cont_vent_next .vent_next .close_vent_next {

	position: absolute;

	top: 0;

	right: 0;

	font-size: 1.5rem;

}



@keyframes bounce {

	0% {

		transform: translateY(0);

	}

	100% {

		transform: translateY(-50%);

	}

}



.cont_notify {

	position: fixed;

	bottom: 15px;

	right: 15px;

}

.cont_notify .cont_notify_nav {

	background-color: white;

	border: 1px solid #ccc;

	box-shadow: 1px 1px 5px black;

	position: absolute;

	bottom: 110%;

	right: 0;

	width: 300px;

	border-radius: 5px;

	display: none;

}

.cont_notify .cont_notify_nav .cont_notify_ul {

	list-style: none;

	margin: 0;

	padding: 0;

}

.cont_notify .cont_notify_nav .cont_notify_li {}

.cont_notify .cont_notify_nav .cont_notify_li a {

	display: block;

	position: relative;

	padding: .5rem .75rem;

}

.cont_notify .cont_notify_nav .cont_notify_li a.unread {

	background-color: rgba(204, 204, 204, .3);

}

.cont_notify .cont_notify_nav .cont_notify_li a.unread:after {

	content: '';

	width: 10px;

	height: 10px;

	background-color: red;

	position: absolute;

	top: 50%;

	right: 15px;

	transform: translateY(-50%);

	border-radius: 100%;

}

.cont_notify .btn_not {

	display: block;

}

.cont_notify .btn_not.true {

	animation-name: bounce;

	animation-iteration-count: infinite;

	animation-direction: alternate;

	animation-duration: .5s;

	animation-timing-function: ease-in-out;

}

.cont_notify .btn_not.false {

	animation-iteration-count: 1;

}

.cont_notify .btn_not .fas {

	font-size: 2rem;

	background-color: #0056b3;

	color: white;

	padding: .75rem .85rem;

	border-radius: 100%;

	box-shadow: 2px 1px 3px black;

	position: relative;

}

.cont_notify .btn_not.true .fas:after {

	content: '';

	width: 10px;

	height: 10px;

	background-color: red;

	position: absolute;

	top: 20%;

	right: 20%;

	border-radius: 100%;

}



/*Pop Ups*/



@keyframes pulse {

	0% {

		transform: scale(1);

	}

	100% {

		transform: scale(1.1);

	}

}



.overlay-popup {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: rgba(0, 0, 0, 0.7);

	z-index: 999;

	/*display: none;*/

}

.overlay-popup .content-popup {

	position: absolute;

	top: 50%;

	left: 50%;

	transform: translate(-50%, -50%);

	height: 60%;

	width: 60%;

	background-color: white;

	padding: 15px;

	border-radius: 5px;

}

.overlay-popup .content-popup .content-popup-title {

	text-align: center;

}

.overlay-popup .content-popup .content-popup-title .content-popup-title-t {}

.overlay-popup .content-popup .content-popup-text {

	text-align: center;

}

.overlay-popup .content-popup .content-popup-text .icon-pay {

	color: #4275d2;

	font-size: 10rem;

	margin: 20px 0;

	animation-name: pulse;

	animation-iteration-count: infinite;

	animation-timing-function: ease-in-out;

	animation-direction: alternate-reverse;

	animation-duration: .5s;

}

.overlay-popup .content-popup .content-popup-text .content-popup-text-p {

	font-size: 1.1rem;

}

.overlay-popup .content-popup .btn-close-popup {

	position: absolute;

	top: 15px;

	right: 15px;

	font-size: 1.5rem;

}

#results {

	overflow: auto;

}

.cont-student {
	padding: 30px 15px;
	padding-bottom: 80px;
	margin: 0 auto;
}

.cont-student .card.card-course {
	background-color: var(--main-hex-white);
	border: none;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	transition: all 0.3s ease;
	overflow: hidden;
}

.cont-student .card.card-course:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
	transform: translateY(-2px);
}

.cont-student .card.card-course .cont-status-video {

	position: absolute;

	top: 25px;

	right: 25px;

	z-index: 9;

}

.cont-student .card.card-course .cont-status-video .icon {

	color: var(--red-alert);
	background: white;
	border-radius: 100%;
}

.cont-student .card.card-course .cont-status-video .icon.active {

	color: #28a745;

}



.card .card-img-top-admin {

	overflow: hidden;

}

.card .card-img-top-admin .cont_btn_options {

	position: absolute;

	right: 0;

	top: 0;

	transform-origin: top right;

	transition: .5s ease-in-out;

}

.card .card-img-top-admin:hover .cont_btn_options {

	transform: scale(1);

}

.card .card-img-top-admin .cont_btn_options form {

	display: flex;

	flex-direction: column-reverse;

}

.card .card-img-top-admin .cont_btn_options form .btn {

	background: transparent;

	border: 0;

	padding: .25em .5em;

	border-radius: 0;

	position: relative;

	display: inline-block;

	transition: .25s ease-in-out;

}

.card .card-img-top-admin .cont_btn_options form .btn.btn_edit {

	/*background-color: #ffc107;*/

	background-color: #fff;

	color: #000;

}

.card .card-img-top-admin .cont_btn_options form .btn.btn_trash {

	background-color: var(--main-hex-red);

	color: #fff;

}

.card .card-img-top-admin .cont_btn_options form .btn.btn_info {

	background-color: var(--main-hex-blue);

	color: #fff;

}

.card .card-img-top-admin .cont_btn_options form .btn.btn_prog {

	background-color: var(--main-hex-yellow);

	color: #000;

}

.card .card-img-top-admin .cont_btn_options form .btn:before {

	content: "";

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: inherit;

	z-index: -1;

	transition: .25s ease-in-out;

}

.card .card-img-top-admin .cont_btn_options form .btn:hover {

	border-bottom-left-radius: 50%;

}

.card .card-img-top-admin .cont_btn_options form .btn:hover:before {

	left: -50%;

	border-bottom-left-radius: 100%;

}

.card .card-img-top-admin .cont_btn_options form .btn:after {

	content: "";

	position: absolute;

	height: 0%;

	bottom: 0%;

	width: 100%;

	height: 400%;

	left: 0%;

	background-color: inherit;

	z-index: -2;

	transition: .25s ease-in-out;

}

.card .card-img-top-admin .cont_btn_options form .btn:hover:after {

	bottom: 100%;

	height: 300%;

	left: -50%;

	z-index: -1;

}



.card .card-img-top-admin {

	position: relative;

	height: 200px;

	background-position: center;

	background-size: cover;

}

.card .card-img-top-admin .overlay {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background-color: rgba(0, 0, 0, 0.5);

	transition: all ease .5s;

}

.card .card-img-top-admin .overlay a {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	color: #fff;

	text-decoration: none;

}

.card .card-img-top-admin .overlay a.lock {

	pointer-events: none;

}

.card .card-img-top-admin .overlay a .fas {

	position: absolute;

	transform: scale(.5);

	opacity: .7;

	top: 15px;

	right: 15px;

	transition: all .5s ease;

}

.card .card-img-top-admin .overlay a:hover .fas {

	opacity: 1;

	transform: scale(1);

}

.card .card-footer {
	border: none;
	background: transparent;
}



.list-answers {

	display: flex;

	flex-wrap: wrap;

}

.list-answers .list-answers-each {

	flex: 0 0 50%;

	border-bottom: 2px solid #ccc;

}

.list-answers .list-answers-each .list-answers-each-ul {}

.list-answers .list-answers-each .list-answers-each-ul .list-answers-each-ul-item {

	width: fit-content;

	padding: .25em .75em;

}

.list-answers .list-answers-each .list-answers-each-ul .list-answers-each-ul-item.active {

	background: #88d888;

}



.epayco-button-render {

	pointer-events: none;

}



.one,
.two,
.three {

	position: absolute;

	margin-top: 25px;

	z-index: 1;

	height: 40px;

	width: 40px;

	border-radius: 25px;



}

.circle_pro {

	display: flex;

	justify-content: center;

	align-items: center;

}

.circle_pro .fa {

	font-size: 1.5rem;

}

.progress {

	border-radius: 1em;

	background: #ccc;

}

.progress-bar {

	background-color: var(--main-hex-blue);

}

.one {

	left: -1%;

}

.two {

	left: 50%;

	transform: translateX(-50%);

}

.three {

	right: -1%;

}

.primary-color {

	background-color: var(--main-hex-blue);

	color: #fff;

}

.second-color {

	background-color: var(--main-hex-red);

	color: var(--main-hex-blue);

}

.success-color {

	background-color: #5cb85c;

	color: #fff;

}

.danger-color {

	background-color: #d9534f;

}

.warning-color {

	background-color: #f0ad4e;

}

.info-color {

	background-color: #5bc0de;

}

.no-color {

	background-color: inherit;

}



.pie {
	position: relative;
	display: inline-block;
	background-image: conic-gradient(rgba(0, 0, 0, 0) calc(3.6deg * var(--percent)), rgba(0, 0, 0, 1) calc(3.6deg * var(--percent)));
	background-blend-mode: overlay;
	background-position: 50% 50%;
	background-size: 150%;
	width: 3.75em;
	height: 3.75em;
	border-radius: 50%;
}



/* show the percentage (thanks to Ana Tudor for the counter() trick) */

.pie--value::after {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	counter-reset: percent var(--percent);
	content: counter(percent) "%";
	color: #fff;
	text-shadow: 1px 1px 1px #000;
}

.pie--disc::before {
	content: '';
	position: absolute;
	top: .5em;
	left: .5em;
	right: .5em;
	bottom: .5em;
	border-radius: 50%;
	background: #fff;
}

.pie--disc::after {
	color: #000;
	text-shadow: none;
}



/* demo styles

----------------------------------------------------- */

/*body::before {color: red;font-size: 150%;background-color: #f1f1f2;content: "This browser doesn't support conical graidents yet";}*/

@supports (background: conic-gradient(red, blue)) {
	body::before {
		content: '';
	}
}

body {
	font: 90%/1.5 Arial;
	background: #f1f1f2;
}

.pie {
	border: .15em solid #fff;
	box-shadow: 0 .075em .2em .05em rgba(0, 0, 0, .25);
	margin: .75rem;
}

.pie:nth-child(1) {
	background-color: #ac0;
}

.pie:nth-child(2) {
	background-color: #fc3;
}

.pie:nth-child(3) {
	background-color: #ac0;
}

.pie:nth-child(4) {
	background-color: #0ac;
}

.pie:nth-child(5) {
	background-color: #d6b;
}

.big {
	font-size: 500%;
}

.med {
	font-size: 150%;
}

.sml {
	font-size: 100%;
}



.calendar {

	border: 1px solid #000;

	width: 100%;

	display: none;

}

.calendar.active {

	display: block;

}

.calendar thead {

	text-align: center;

}



.calendar tbody td div {

	padding-top: 20px;

	font-size: .7rem;

}



.calendar tbody td div a {

	display: block;

}



.calendar tbody td {

	position: relative;

	overflow: hidden;

	transition: all .5s;

	background-color: #ccc;

}

.calendar tbody:hover td {

	transform: scale(1);

}

.calendar tbody td:not(.no_hover):hover {

	transform: scale(1.2);

	border-color: #000;

	z-index: 9;

}



.calendar tbody td:not(.no_hover):hover .appoint_class {

	top: 0;

}



.calendar tbody td .appoint_class {

	position: absolute;

	top: -30px;

	left: 50%;

	transform: translateX(-50%);

	width: 90%;

	text-align: center;

	font-size: .8rem;

	transition: all .5s;

}

/* Contenedor de cursos */
.courses-cat {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* Card de cada curso */
.course-card {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	overflow: hidden;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.course-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Imagen del curso */
.course-img-wrapper {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
}

.course-img-wrapper img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	mask-image: linear-gradient(to bottom, white 50%, transparent);
}

/* Contenido del curso */
.course-content {
	padding: 1.25rem;
}

.course-title {
	font-size: 1.25rem;
	font-weight: 700;
	/* color: #1f2937; */
	margin-bottom: 0.75rem;
	line-height: 1.4;
}

.course-excerpt {
	font-size: 0.9rem;
	color: #6b7280;
	margin-bottom: 1rem;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Barra de progreso */
.course-progress {
	height: 24px;
	background-color: #e5e7eb;
	background-image: linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
	background-size: 1rem 1rem;
	border-radius: 12px;
	margin-bottom: 1rem;
	overflow: hidden;
}

.course-progress .progress-bar {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 24px;
}

/* Estado */
.course-status {
	font-size: 0.9rem;
	color: #374151;
	margin-bottom: 1rem;
}

.course-status b {
	color: #1f2937;
}

.course-status small {
	color: #6b7280;
}

/* Responsive Breakpoints */

/* Mobile First - Por defecto todo es columna */
@media (min-width: 576px) {
	.course-title {
		font-size: 1.35rem;
	}
}

/* Tablet */
@media (min-width: 768px) {
	.course-card-inner {
		display: flex;
		gap: 1.5rem;
	}

	.course-img-col {
		flex: 0 0 200px;
	}

	.course-content-col {
		flex: 1;
	}

	.course-img-wrapper {
		height: 100%;
	}

	.course-img-wrapper img {
		mask-image: linear-gradient(to right, white 50%, transparent);
	}

	.course-content {
		padding: 1rem;
	}
}

/* Desktop */
@media (min-width: 992px) {
	.course-img-col {
		flex: 0 0 240px;
	}

	.course-title {
		font-size: 1.5rem;
	}

	.course-excerpt {
		font-size: 1rem;
	}
}

/* Extra Large */
@media (min-width: 1200px) {
	.course-img-col {
		flex: 0 0 280px;
	}
}

/* Actions buttons container */
.course-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 1rem;
}

.btn-sm-custom {
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
}

.session {
	transition: all 0.3s ease;
	border-radius: 8px;
}

.session:hover {
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 5px #ccc;
}

.gap-10px {
	gap: 10px;
}

.divisor-line {
	position: relative;
	padding-bottom: 5px;
	padding-left: 1.5rem;
}

.divisor-line::before {
	content: "";
	position: absolute;
	top: 0;
	left: 5px;
	background-color: #ccc;
	height: 100%;
	width: 1px;
}

.divisor-line::after {
	content: "";
	position: absolute;
	bottom: 0;
	background-color: #ccc;
	left: 5px;
	width: 20px;
	height: 1px;
}

.session-badge {
	background: white;
	border: 1px solid var(--main-hex-blue);
	background-color: #ccc;
	border-radius: 8px;
	padding: 10px;
}



@media screen and (max-width: 576px) {

	.multi-steps>li {

		font-size: .7rem;

	}

}

/* LIST USERS STYLES */

.results-info {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--gray-600);
	font-size: 1rem;

	.icon {
		width: 20px;
	}
}

/* FORM STYLES */
.form-floating label {
	line-height: 1.5;
}

/* PRIMARY CARD STYLES */
.primary-card-section {
	margin-bottom: 30px;
	background-color: white;
	border-radius: 8px;
	padding: 20px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.primary-card-title {
	border-bottom: 2px solid #f5f5f5;
	padding-bottom: 15px;
	margin-bottom: 20px;
	color: var(--main-hex-blue);
	font-weight: 700;
	font-size: 1.5rem;
}

/* Sessions List */
.primary-card-body {
	display: flex;
	flex-direction: column;
	gap: 15px;
}