*{
	font-family: 'Montserrat', sans-serif;
	padding: 0;
	margin:0;
}

body{
	background: #dfecf2;
}

.clear{
	clear: both;
}

/* login */
.login{
	background: rgb(59 130 246 / .1);
	height: 100vh;
}

.login .left{
	width: 50%;
	background: #ffffff;
	height: 100%;
	float: left;
	display: table;
}

.left.signup{
	position: absolute;
	left: 0;
	top:0;
	transform: translateX(-100%);
	opacity: 0;
	transition: all .3s ease;
	pointer-events: none;
}

.left.password{
	position: absolute;
	left: 0;
	top:0;
	transform: translateX(-100%);
	opacity: 0;
	transition: all .3s ease;
	pointer-events: none;
}

.login .left .form-login{
	display: table-cell;
	vertical-align: middle;
}

.login .left .form-login .form-content{
	width: 400px;
	max-width: 80%;
	float: right;
	padding: 50px 50px 50px 50px;
}


@media(max-width:800px){
	.login .left{
		width: 90%;
		margin:auto;
		float: none;
		max-width: 420px;
		height: auto;
		padding: 20px 0;
		background: transparent;
	}

	.login .left .form-login{
		width: 100%;
		float: none;
		border-radius: 10px;
		border:solid 1px #1e293e10;
		background: #ffffff;
		box-shadow: 0 10px 30px #1e293e10;
	}
}

.login .left .form-login .logo-login{
	width: 50px;
	margin:0 0 20px 0;
}

.login .left .form-login .logo-login img{
	width: 100%;
}

.login .left .form-login h1{
	color: #1e293e;
	font-size:35px;
	margin:0 0 10px 0;
}


.login .left .form-login h2{
	color: #1e293e;
	font-size:15px;
	margin:0 0 10px 0;
}

.login .left .form-login h2 a{
	color: #2196F3;
	text-decoration: none;
}



.login .left .form-login form{
	margin:30px 0 0 0;
}

.login .left .form-login form p{
	margin:0 0 20px 0;
}

.login .left .form-login form p label{
	display: block;
	font-weight: 600;
	font-size: 17px;
	color: #333333;
	margin:0 0 10px 0;
}

.login .left .form-login form input[type="email"],
.login .left .form-login form input[type="text"],
.login .left .form-login form input[type="password"]{
	padding: 19px 2%;
	width: 96%;
	border:none;
	box-shadow: 0 0 0 2px #1e293e20;
	border-radius: 5px;
	font-size: 20px;
	outline: none;
	color: #444444;
}

.login .left .form-login form input[type="email"]:focus,
.login .left .form-login form input[type="text"]:focus,
.login .left .form-login form input[type="password"]:focus{
	background: #ffffff;
	box-shadow: 0 0 0 2px #1e293e;
	transition: all .3s ease;
}

.login .left .form-login form .checkbox{
	width: 50%;
	float: left;
	padding: 0 0 0 35px;
	position: relative;
	line-height: 30px;
	font-weight: 600;
	font-size: 15px;
	color: #313131;
}

.login .left .form-login form .checkbox input[type="checkbox"]{
	display: none;
}

.login .left .form-login form .checkbox label{
	cursor: pointer;
}

.login .left .form-login form .checkbox label:before{
	content: "";
	width: 30px;
	height: 30px;
	left: 0px;
	display: block;
	position: absolute;
	border-radius: 50%;
	background: #f0f0f0;
	transition: all .3s ease;
}

.login .left .form-login form .checkbox label:hover:before{
	background: #1e293e30;
}



.login .left .form-login form .checkbox label:after{
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	background: transparent;
	top:8px;
	left: 8px;
	border-radius: 50px;
	transition: all .3s ease;
}

.login .left .form-login form input[type="checkbox"]:checked + label:after{
	cursor: pointer;
	background: #1e293e;
}

.login .left .form-login form span a{
	float: right;
	color: #2196F3;
	text-decoration: none;
}

.login .left .form-login form button{
	display: block;
	padding: 18px 2%;
	width: 96%;
	border:none;
	border-radius: 50px;
	background: #1565C0;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
	letter-spacing: 1px;
	outline: none;
	cursor: pointer;
	clear: both;
	margin:20px 0 0 0;
}

.login .left .form-login form button:focus,
.login .left .form-login form button:hover{
	background-color: #10519D;
	transition: all .3s ease;
}

.login .right{
	background: #1e293e;
	width: 50%;
	float: right;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

@media(max-width:800px){
	.login .right{
		display: none;
	}
}

.login .right:before{
	content: "";
	width: 300px;
	height: 300px;
	border:solid 120px rgba(255,255,255,.05);
	border-radius: 50%;
	position: absolute;
	top:-150px;
	left: -150px;
	pointer-events: none;
}

.login .right:after{
	content: "";
	width: 500px;
	height: 500px;
	border:solid 120px rgba(255,255,255,.05);
	border-radius: 50%;
	position: absolute;
	bottom:-300px;
	right: -300px;
	pointer-events: none;
}

.login .right .middle{
	display: table;
	width: 80%;
	padding: 0 10%;
	height: 100%;
}

.login .right .middle .inter{
	vertical-align: middle;
	display: table-cell;
}

.login .right .middle .inter h1{
	font-size: 47px;
	color: rgba(255,255,255,.9);
	margin:0 0 10px 0;
}

.login .right .middle .inter h2{
	font-size: 18px;
	font-weight: 300;
	color: rgba(255,255,255,.5);
	max-width: 80%;
	line-height: 30px;
}

.login .right .middle .inter h3{
	font-size: 15px;
	color: rgba(255,255,255,1);
	max-width: 80%;
	font-weight: 600;
	margin:40px 0 0 0;
}

.login .right .middle .inter p{
	font-size: 16px;
	line-height: 24px;
	font-weight: 300;
	color: rgba(255,255,255,.6);
	max-width: 80%;
	line-height: 30px;
	margin:40px 0 0 0;
}

.login .right .middle .inter p.version{
	font-size: 13px;
	opacity: .6;
}


.respuesta {
	display: none; 
}

.respuesta p{
	padding: 20px;
	margin: 10px 0;
	border-radius: 5px;
	font-size: 18px;
	text-align: center;
}

.responseOk {
	background-color: #d4edda; 
	color: #155724; 
	margin: 10px 0;
	border: 1px solid #c3e6cb;
}

.responseError {
	background-color: #f8d7da;
	color: #721c24;
	margin: 10px 0;
	border: 1px solid #f5c6cb;
}

.responseAlert {
	background-color: #fff3cd; 
	color: #856404; 
	margin: 10px 0;
	border: 1px solid #ffeeba;
}

header{
	width: 65px;
	height: 90vh;
	background: #313131;
	position: fixed;
	top:4vh;
	left: 30px;
	padding: 10px 0;
	border-radius: 10px;
	z-index: 15;
	transition: all .3s ease;
}

header.no-transition, .content.no-transition, .user-options.no-transition {
	transition: none !important;
}


header .logo{
	margin:30px auto 50px auto;
	fill: #ffffff;
	width:50px;
}

header .logo a{
	fill: #ffffff;
}

/* nav */
nav{
	position: relative;
	padding: 0 10px;
}

nav span{
	background: #ffffff;
	line-height: 20px;
	width: 20px;
	height: 20px;
	overflow: hidden;
	display: inline-block;
	border-radius: 50px;
	text-align: center;
	fill: #313131;
	font-size: 12px;
	position: absolute;
	right: -10px;
	top:-10px;
	z-index: 99999;
	box-shadow: 0 5px 10px rgba(0,0,0,.4);
	cursor: pointer;
	transition: all .3s ease;
}
nav > ul > li{
	list-style: none;
	line-height: 50px;
	width: 45px;
	display: block;
	text-align: center;
	position: relative;
	transition: all .3s ease;
	border-radius: 10px;
}


header[style*="width: 200px"] nav > ul > li{
	width:100%;
	text-indent: 20px;
	text-align: left;
	border-radius: 10px;
}

nav > ul > li > a{
	color: #ffffff;
	position: relative;
	display: block;
	fill:#ffffff;
	width: 100%;
}

nav > ul > li > a > svg{
	margin:0 0 -7px 0;
	transition: all .3s ease;
}

nav > ul > li:hover{
	background-color: #dfecf2;
	border-radius: 10px;
}

nav > ul > li > a:hover,
nav > ul > li > a:hover em{
	fill: #212121;
	color: #212121;
}

nav > ul > li > a > em{
	white-space: pre;
	font-style: normal;
	font-size: 14px;
	float: left;
	position: absolute;
	top:0px;
	left: 50px;
	opacity: 0;
	pointer-events: none;
  	max-width: 0px;
}

header[style*="width: 200px"] nav > ul > li > a > em {
  	opacity: 1;
  	pointer-events: all;
  	max-width: 250px;
	transition: all .3s ease;
}

nav > ul > li > a > em > i{
	width: 8px;
	height: 8px;
	position: absolute;
	right: -10px;
	top:50%;
	transform: translateY(-50%);
	background-color: #080;
	border-radius: 10px;
}


nav > ul > li.current-menu-item > a:before{
	content: "";
	position: absolute;
	width: 5px;
	height: 20px;
	background: #ffffff;
	left: -10px;
	top:50%;
	transform: translateY(-50%);
}

/* sub-nav */
nav > ul > li > ul{
	position: absolute;
	top:0;
	left: 100%;
	background: #ffffff;
	width: 200px;
	z-index: 999;
	text-align: left;
	overflow: hidden;
	max-width: 0px;
}

nav > ul > li:hover > ul{
	max-width: 200px;
	transition: all .1s ease;
}

nav > ul > li > ul > li{
	display: block;
}

nav > ul > li > ul > li > a{
	color: #313131;
	padding: 0 10px;
	text-decoration: none;
	font-size: 14px;
	white-space: pre;
}

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

.menu-config a{
	display: block;
	text-decoration: none;
	color: #ffffff;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 50px;
	line-height: 50px;
	margin:0 7px 20px 7px;
	fill: #ffffff;
}

.menu-config a > em{
	white-space: pre;
	font-style: normal;
	font-size: 14px;
	float: left;
	position: absolute;
	top:-7px;
	left: 50px;
	opacity: 0;
	pointer-events: none;
  	max-width: 0px;
  	transition: all .3s ease;
}

header[style*="width: 200px"] .menu-config a > em {
  opacity: 1;
  pointer-events: all;
  	max-width: 250px;
}

/* header-user */
.header-user{
	position: fixed;
	top:0;
	width: 100%;
	background: #dfecf2;
	z-index: 13;
}

.header-user .content-2-column{
	margin:0 40px 0 120px;
	padding: 20px 0;
}

/* content */
.content{
	margin:80px 40px 40px 120px;
	position: relative;
	z-index: 2;
	transition: all .3s ease;
}


/* content-2-column */
.content-2-column{
	display: flex;
	flex-wrap: wrap;
	gap:2%;
	padding: 10px 0;
}

/* margenes */
.mg-t-10{ margin-top:10px !important; }
.mg-t-20{ margin-top:20px !important; }
.mg-t-30{ margin-top:30px !important; }
.mg-t-40{ margin-top:40px !important; }
.mg-t-50{ margin-top:50px !important; }
.mg-t-60{ margin-top:60px !important; }
.mg-t-70{ margin-top:70px !important; }
.mg-t-80{ margin-top:80px !important; }
.mg-t-90{ margin-top:30px !important; }
.mg-t-100{ margin-top:100px !important; }

/* width */
.w-10{ 	width: 10%; }
.w-18{ 	width: 18.4%; }
.w-20{ 	width: 20%; }
.w-23{ 	width: 23%; }
.w-30{ 	width: 30%; }
.w-40{ 	width: 40%; }
.w-48{ 	width: 48%; }
.w-50{ 	width: 50%; }
.w-58{ 	width: 58%; }
.w-60{ 	width: 60%; }
.w-68{ 	width: 68%; }
.w-70{ 	width: 70%; }
.w-75{ 	width: 75%; }
.w-80{ 	width: 80%; }
.w-90{ 	width: 90%; }
.w-100{ width: 100%; }

/* padding */
.pd-10{ padding: 10px; }
.pd-20{ padding: 20px; }
.pd-30{ padding: 30px; }
.pd-40{ padding: 40px; }
.pd-50{ padding: 50px; }

/* alineación */
.align-right{ text-align:right; }


/* user-options */
.user-options{
	position: absolute;
	right: 40px;
}
.user-options ul{
	display: flex;
	justify-content: right;
	line-height: 40px;
	list-style: none;
	height: 40px;
	gap:2%;
}

.user-options ul li{
	position: relative;
}

.user-options ul li a{
	display: block;
	width: 40px;
	text-align: center;
	fill: #313131;
	position: relative;
}

.user-options ul li a img{
	width: 35px;
	height: 35px !important;
	object-fit: cover;
	border-radius: 50px;
	transform: translateY(-5px);
}

.user-options ul li:nth-child(4) a:after{
	position: absolute;
	content: "";
	width: 43px;
	height: 43px;
	left: -1px;
	top:-8px;
	z-index: -1;
	background: #098;
	border-radius: 50px;
	opacity: 0;
	transform: scale(0);
	transition: all .3s ease;
}

.user-options ul li:nth-child(4):hover a:after{
	opacity: 1;
	transform: scale(1);
}


.user-options ul li ul{
	position: absolute;
	z-index: 999;
	background: #ffffff;
	border-radius: 10px;
	width: 200px;
	right: 0;
	height: auto;
	pointer-events: none;
	opacity: 0;
	transition: all .3s ease;
}

.user-options ul li:hover ul{
	opacity: 1;
}

.user-options ul li ul li{
	width: 100%;
	display: block;
}

.user-options ul li ul li a{
	color: #313131;
	font-size: 14px;
	display: block;
	width: 100%;
	line-height: 20px;
	padding: 10px 0;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
}

.user-options ul li ul li a i{
	display: inline-block;
}


/* wellcome */
.wellcome{
	font-size: 25px;
	color: #313131;
	transition: all .3s ease;
}

header[style*="width: 200px"] ~ .header-user .wellcome{
	margin-left: 140px;
}


/* multicolumnas */
.multicolumnas{
	display: flex;
	flex-wrap: wrap;
	gap:2%;
}

.multicolumnas article.resumen{
	width: 23.5%;
	background: #d0e1e9;
	border-radius: 35px;
}

.multicolumnas article.resumen a{
	text-decoration: none;
	padding: 20px 10%;
	display: block;
	position: relative;
}

.multicolumnas article.resumen i:nth-child(1){
	color: #313131;
	line-height: 30px;
	width: 30px;
}

.multicolumnas article.resumen i:nth-child(2){
	float: right;
	line-height: 30px;
	width: 30px;
	text-align: center;
	color: #313131;
	border-radius: 50px;
}

.multicolumnas article.resumen i:nth-child(2).black{
	background: #212121;
	color: #ffffff;
}

.multicolumnas article.resumen h3{
	color: #313131;
	font-weight: 500;
}

.multicolumnas article.resumen p{
	font-weight: 300;
	font-size: 15px;
	max-width: 120px;
	color: #555555;
}
/* highcharts-container */
.highcharts-container{
	border-radius: 20px !important;
	overflow: hidden;
	box-shadow: 0;
}

.highcharts-container {
	padding: 15px 2%;
	max-width: 96% !important;
	background: #d0e1e9;
}

/* single-item-column-1 */
.single-item-column-1{
	width: 90%;
	margin:0 0 4% 0;
	background: #d0e1e9;
	padding: 28px 5%;
	border-radius: 20px;
	color: #313131;
}

.single-item-column-1 a{
	display: block;
	text-decoration: none;
	color: #313131;
}

.single-item-column-1 a:hover{
	color: #777777;
}

.single-item-column-1 h3{
	font-size: 16px;
	margin:0 0 10px 0;
}

.single-item-column-1 .info{
	display: flex;
	gap:2%;
	align-items: center;
}

.single-item-column-1 .info p:nth-child(1){
	font-size: 50px;
	font-weight: 600;
	line-height: 50px;
}

.single-item-column-1 .info p:nth-child(2){
	font-size: 13px;
	font-weight: 300;
	background: #bad6ca;
	color: #408822;
	padding: 3px 10px;
	border-radius: 3px;
	letter-spacing: 1px;
}

/* single-item-column-2 */
.single-item-column-2{
	width: 90%;
	margin:0 0 4% 0;
	background: #313131;
	padding: 30px 5%;
	border-radius: 25px;
	text-align: center;
	color: #ffffff;
}

.single-item-column-2.bg-red{
	background: #e14747;
}

.single-item-column-2 h3{
	font-size: 16px;
}

.single-item-column-2 p{
	font-weight: 300;
	font-size: 14px;
	margin:10px 5% 0 5%;
}

/* backgrounds */
.bg-blue{
	background: #d0e1e9;
}

/* border-radius */
.br-10{ border-radius: 10px; }
.br-20{ border-radius: 20px; }
.br-30{ border-radius: 30px; }
.br-40{ border-radius: 40px; }
.br-50{ border-radius: 50px; }
/* single-item-column-3 */
.single-item-column-3{
	padding:10px 20px;
	background: #d0e1e9;
	margin:10px 0;
	border-radius: 20px;
	transition: all .3s ease;
}

.single-item-column-3:hover{
	background: #ffffff;
}

.single-item-column-3 a{
	display: block;
	text-decoration: none;
	color: inherit;
}

h2.title-section{
	font-size: 16px;
	margin:10px 0 10px 0;
	font-weight: 600;
}


p.subtitle-section{
	font-size: 14px;
	margin:10px 0 10px 0;
	font-weight: 300;
}

.single-item-column-3 .date{
	color: #888888;
	font-size: 12px;
	padding: 0 0 5px 0;
	border-bottom: dotted 1px #999999;
	margin:0 0 5px 0;
}

.single-item-column-3 p{
	font-size: 14px;
	color: #313131;
}

.single-item-column-3.nivel-2{
	background: #313131;
	color: #ffffff !important;
}

.single-item-column-3.nivel-2 .date{
	color: #ffffff !important;
}

.single-item-column-3.nivel-2 p{
	color: #ffffff;
}

.single-item-column-3.nivel-3{
	background: #ffffff;
	padding: 30px;
	color: #313131 !important;
}

.single-item-column-3.nivel-3 .date{
	color: #313131 !important;
}

.single-item-column-3.nivel-3 p{
	color: #777777;
}



/* single-item-column-4 */
.single-item-column-4{
	width: 90%;
	margin:0 0 4% 0;
	background: #d0e1e9;
	border-radius: 20px;
	color: #313131;
}

.single-item-column-4 a{
	display: block;
	text-decoration: none;
	color: #313131;
	padding: 18px 5%;
	border-radius: 20px;
	transition: all .3s ease;
	font-weight: bold;
}

.single-item-column-4 a:hover{
	background-color: #313131;
	color: #ffffff;
}

/* form-1 */
.form-1 p input[type="text"],
.form-1 p textarea{
	width: 98%;
	padding: 18px 1%;
	background: #d0e1e9;
	border:none;
	margin:0 0 10px 0;
	resize: none;
	border-radius: 10px;
	outline: none;
	color: #313131;
	font-size: 16px;
}

.form-1 p input[type="text"]::placeholder,
.form-1 p textarea::placeholder{
	color: #313131;
}

.form-1 button{
	background: #313131;
	color: #ffffff;
	padding: 16px 30px;
	border:none;
	outline: none;
	cursor: pointer;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 500;
	transition: all .3s ease;
}

.form-1 button:hover,
.form-1 button:focus{
	background: #444444;
}

/* form-2 */
.form-2{
	padding: 20px 0 0 0;
}

.form-2 p{
	margin:0 0 20px 0;
}

.form-2 p label{
	font-size: 14px;
	font-weight: 600;
	color: #313131;
	padding: 0 10px;
}

.form-2 input[type="text"],
.form-2 input[type="email"]{
	width: 98%;
	padding: 15px 1%;
	border:none;
	background: #d0e1e9;
	border-radius: 10px;
	outline: none;
}

.form-2 input[type="text"]:focus,
.form-2 input[type="email"]:focus{

}

.form-2 p.radio{
	display: flex;
	flex-wrap: wrap;
	gap:2%;
}

.form-2 p.radio input[type="radio"]{
	display: none;
}


.form-2 p.radio label{
	padding: 10px 1% 10px 7%;
	background: #d0e1e9;
	width: 15.5%;
	display: flex;
	position: relative;
	border-radius: 10px;
	cursor: pointer;
}

.form-2 p.radio label:before{
	content: "";
	position: absolute;
	width: 25px;
	height: 25px;
	background: #ffffff;
	left: 5px;
	border-radius: 50px;
	top:7px;
}

.form-2 p.radio label:after{
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	background: #313131;
	left: 10px;
	border-radius: 50px;
	top:12px;
	opacity: 0;
	transition: all .3s ease;
}

.form-2 p.radio input[type="radio"]:checked + label:after{
	opacity: 1;
}

.form-2 button{
	padding: 14px 40px;
	border:none;
	outline: none;
	cursor: pointer;
	border-radius: 10px;
	font-size: 14px;
	background: #313131;
	color: #ffffff;
	transition: all .3s ease;
}

.form-2 button:hover,
.form-2 button:focus{
	background: #414141;
}


/* title-page */
.title-page{
	padding: 0 0 20px 0;
}

.title-page h2{
	font-size: 20px;
	font-weight: 300;
	color: #313131;
}

/* alertas */
.alert{
	padding: 30px 0;
	width: 100%;
	text-align: center;
	border-radius: 20px;
	font-size: 20px;
	margin:0 0 20px 0;
}
.alert h3{

	font-size: 20px;
	font-weight: 400;
}

.alert p{
	font-weight: 300;
	font-size: 16px !important;
	margin:5px 5% 0 5%;
}

.alert p a{
	text-decoration: none;
	color: inherit;
	font-weight: 600;
}

.alert i{
	display: block;
	width: 50px;
	margin:0 auto 20px auto;
	border-radius: 50px;
	font-size: 24px;
	line-height: 50px;
	border:solid 2px;
}

.alert-login{
	padding: 20px;
	text-align: center;
	border-radius: 20px;
}

.alert-login p{
	font-weight: 300;
	font-size: 20px;
	padding: 20px;
}

.alert-login i{
	display: block;
	width: 50px;
	margin:0 auto 20px auto;
	border-radius: 50px;
	font-size: 24px;
	line-height: 50px;
	border:solid 2px;

}


.alert-1{
	color: #408822;
	background: #40882220;
}

.alert-1{
	color: #408822;
	background: #40882220;
}

.alert-2{
	color: #FF4242;
	background: #FF424220;
}

/* website */
.website{
	overflow: hidden;
	border-radius: 10px;
	position: relative;
	background: #000000;
}

.sidebar-right .website img{
	margin:0 0 -5px 0;
	width: 100%;
	height: 130px;
	object-fit: cover;
}

.website a .masc{
	position: absolute;
	z-index: 99;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 30px;
	color: #ffffff;
	background: rgba(0,0,0,.4);
}

/* botones */
.btn-alt-1{
	line-height: 50px;
	margin:10px 0;
}

.btn-alt-1 a{
	display: block;
	text-decoration: none;
	color: #ffffff;
	background: #313131;
	text-align: center;
	border-radius: 20px;
	font-size: 60px;
	transition: all .3s ease;
	fill:#ffffff;
}

.btn-alt-1 a svg{
	width: 40%;
	padding: 10px 0;
	height: 40px;
	margin:0 0 -3px 0;
}


.btn-alt-1 a:hover{
	background: #444444;
}

.btn-alt-2{
	border:none;
	display: block;
	width: 100%;
	padding: 20px;
	border-radius: 20px;
	outline: none;
	background: transparent;
	font-size: 14px;
	font-weight: 600;
	color: #313131;
	transition: all .3s ease;
	cursor: pointer;
}

.btn-alt-2:hover{
	background: #313131;
	color: #ffffff;
}

.btn-alt-3{
	font-size: 14px;
	text-align: center;
}

.btn-alt-3 a{
	display: block;
	text-decoration: none;
	background: #09a60920;
	color: #09a609;
	padding: 20px;
	border-radius: 15px;
	font-weight: 600;
	font-size: 15px;
	text-transform: uppercase;
}

.btn-alt-3 a:hover{
	background: #414141;
	color: #ffffff;
	transition: all .3s ease;
}

.btn-alt-3 a i{
	display: block;
	font-size: 30px;
	margin:0 0 10px 0;
}

.btn-alt-4{
	display: block;
	width: 100%;
}

.btn-alt-4 a{
	display: inline-block;
	color: #ffffff;
	background: #313131;
	line-height: 50px;
	padding: 0 50px;
	text-decoration: none;
	border-radius: 20px;
	font-weight: 600;
	position: relative;
	overflow: hidden;
}

.btn-alt-4 a i{
	position: absolute;
	top:50%;
	left: 50%;
	transform: translateX(-50%) translateY(-50%) scale(0);
	width: 100%;
	height: 100%;
	background: #313131;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: all .3s ease;
	opacity: 0;
	font-size: 20px;
	pointer-events: none;
}

.btn-alt-4 a:hover i{
	transform: translateX(-50%) translateY(-50%) scale(1);
	opacity: 1;

}

/* a-color */
a.a-blue{
	color: #313131;
	text-decoration: none;
}

a.a-red{
	color: #FF4242;
	text-decoration: none;
}

/* status-pay */
.status-pay-0{
	background: #FF424220;
	color: #FF4242;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 600;
}

.status-pay-1{
	background: #07B2A420;
	color: #07B2A4;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 600;
}

.status-pay-3{
	background: #00000020;
	color: #000000;
	display: inline-block;
	padding: 4px 10px;
	border-radius: 5px;
	font-size: 11px;
	text-transform: uppercase;
	font-weight: 600;
}

.total-payment{
	padding: 10px;
	color: #313131;
	margin:10px 0 0 0;
	border:solid 1px #313131;
	border-radius: 10px;
}


/* table */
.table-1{
	background: #d0e1e9;
	border-radius: 10px;
	overflow: hidden;
	border: solid 1px #313131;
}
.table-1 tr:nth-child(1) td{
	background: #313131;
	color: #ffffff;
	font-weight: bold;
	border-bottom: none;
}

.table-1 tr:last-child td{
	border:none;
}

.table-1 tr:nth-child(even) td{
	background: #dfecf2;
}

.table-1 tr td{
	padding: 10px;
	border-bottom: solid 1px #313131;
	font-size: 14px;
}

.table-1 tr td .btn-add{
	background: #313131;
	color: #ffffff;
	cursor: pointer;
	font-size: 14px;
	border:none;
	padding: 3px 5px;
	border-radius: 5px;
	transition: all .3s ease;
}

.table-1 tr td .btn-add:hover{
	background: #414141;
}

/* calendar */
#calendar {
    max-width:100%;
    margin: 0px auto;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
}

#calendar .header {
    background-color: #313131;
    color: #fff;
    padding: 10px;
    text-align: center;
    font-size: 20px;
}

#calendar .header button {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    width: 100px;

    cursor: pointer;
}

#calendar .days-header {
    display: flex;
    justify-content: space-around;
    padding: 10px;
    font-weight: bold;
}

#calendar .week-row {
    display: flex;
    padding: 30px;
    justify-content: left;
}

#calendar span {
    flex: 1;
    text-align: center;
    padding: 5px;
    max-width: 14% !important;
}

#calendar  .event {
    background-color: #2A879C;
    color: #fff;
    padding: 5px 0;
    margin-bottom: 5px;
}

#calendar  .event h3{
	font-weight: 500;
	font-size: 12px;
}

#calendar  .event p{
	font-size: 14px;
	font-weight: 300;
}

/* tabs */
.tabs-container {
	display: flex;
	margin:0 0 20px 0;
}

.tab {
	cursor: pointer;
	padding: 10px;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 5px;
	background: #d0e1e9;
	border-radius: 10px;
}

.tab-content {
	display: none;
	padding: 20px;
	background: #ffffff;
	border-radius: 10px;
}

.tab-content ul{

}

.tab-content ul li{
	list-style: none;
	margin:0 0 2% 0;
}

.tab-content ul li a{
	display: block;
	background: #313131;
	color: #ffffff;
	padding: 10px;
	font-size: 14px;
	text-decoration: none;
	border-radius: 10px;
	transition: all .3s ease;
}

.tab-content ul li a:hover{
	background: #444444;
}

.active-tab {
	background-color: #313131;
	color: #ffffff;
	transition: all .3s ease;
}

.active-tab-content {
	display: block;
}

/* modal */
.modal{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  transition: all .3s ease;
  z-index: 9999;
}

.modal p{
	color: #ffffff;
	margin:20px 0 0 0;
	font-size: 14px;
	font-weight: 300;
}

.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  text-align: center;
}

.modal-content iframe{
	margin:0 0 -5px 0;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
}

#mensajeError{
	padding: 0 10px;
	border-radius: 5px;
	color: #ff0000;
	background: #ff000015;
	opacity: 0;
	font-size: 14px;
	transition: all .3s ease;
	margin:0 0 20px 0;
	max-height: 0;
	overflow: hidden;
}

#mensajeError.mensaje-show{
	opacity: 1;
	max-height: 100px;
	padding: 10px 10px;
}

/* modal-form */
.modalForm {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0; /* Establecer opacidad inicial en 0 */
}

.modal-content-form {
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  width: 80%;
  max-width: 600px;
  border-radius: 30px;
}

.close-modal-form {
  color: #ffffff;
  float: right;
  font-size: 28px;
  font-weight: bold;
  transform: translateY(-50px) translateX(100%);
}

.close-modal-form:hover,
.close-modal-form:focus {
  color: #ff0000;
  text-decoration: none;
  cursor: pointer;
}


/* planes */
.planes{
	justify-content: center;
	gap:4% !important;
	display: flex;
}

.planes .plan{
	width: 22%;
	background: #ffffff;
	border-radius: 20px;
}

.planes .plan h3{
	font-size: 30px;
	padding: 20px 20px 0 20px;
	color: #313131;
}

.planes .plan p{
	padding: 10px 20px;
}

.planes .plan ul{
	padding: 0 20px;
	list-style: none;
	font-weight: 300;
}

.planes .plan ul li{
	margin:20px 0;
	color: #414141;
	line-height: 20px;
	font-size: 14px;
}

.planes .plan ul li i{
	color: #080;
}

.planes .plan .price{
	text-align: center;
	margin:0 0 20px;
	font-size: 30px;
	font-weight: bold;
	color: #313131;
	padding: 10px 0;
}

.planes .plan .price span{
	font-weight: 300;
	font-size: 15px;
	display: block;
}

.planes .plan .btn-add{
	text-align: center;
	margin:0 0 30px 0;
}

.planes .plan .btn-add a{
	display: inline-block;
	text-decoration: none;
	background: #313131;
	color: #ffffff;
	line-height: 50px;
	padding: 0 30px;
	border-radius: 10px;
	transition: all .3s ease;
}

.planes .plan .btn-add a:hover{
	background: #414141;
}

/* store */
.store{
	justify-content: left;
	gap:1% !important;
	display: flex;
}

.store .item-store{
	width: 24%;
	background: #ffffff;
	border-radius: 20px;
	margin: 0 0 1% 0;
}

.store .item-store h3{
	font-size: 20px;
	padding: 20px 20px 0 20px;
	color: #313131;
}

.store .item-store p{
	padding: 10px 20px;
}

.store .item-store ul{
	padding: 0 20px;
	list-style: none;
	font-weight: 300;
}

.store .item-store ul li{
	margin:10px 0;
	color: #414141;
	line-height: 20px;
	font-size: 14px;
}

.store .item-store ul li i{
	color: #080;
}

.store .item-store .price{
	margin:0 0 20px 20px;
	font-size: 20px;
	font-weight: bold;
	color: #313131;
	padding: 10px 0;
}

.store .item-store .price span{
	font-weight: 300;
	font-size: 15px;
	display: block;
}

.store .item-store .btn-add{
	margin:0 0 30px 20px;
}

.store .item-store .btn-add a{
	display: inline-block;
	text-decoration: none;
	background: #313131;
	color: #ffffff;
	line-height: 40px;
	padding: 0 20px;
	border-radius: 10px;
	transition: all .3s ease;
}

.store .item-store .btn-add a:hover{
	background: #414141;
}

/* resumen-pay */
.resumen-pay{
	padding: 20px;
	background: #d0e1e9;
	border-radius: 10px;
}

.resumen-pay .detail{
	padding: 20px 0;
	font-weight: 600;
	width: 50%;
	margin:auto;

}

.resumen-pay .detail > p{
	padding:15px 0;
	border-bottom: solid 1px #31313130;
}

.resumen-pay .detail p:nth-child(2){
	font-size: 26px;
	padding:0 0 20px 0;
}

.resumen-pay .detail p:nth-last-child(3){
	border:none;
}

.resumen-pay .detail-2{
	font-weight: 400;
	line-height: 24px;
	text-align: justify;
	color: #555555;
}

.resumen-pay .detail .btn-add{
	display: inline-block;
	text-decoration: none;
	color: #ffffff;
	background: #313131;
	padding: 0 40px;
	border-radius: 10px;
	line-height: 50px;
	border:none;
	outline: none;
	cursor: pointer;
	margin:20px 0 0 0;
	font-size: 16px;
	transition: all .3s ease;
}

.resumen-pay .detail .btn-add:hover{
	background: #414141;
}


/* pagos */
.pagos{
	max-width: 700px;
	margin:50px auto;
	background: #d0e1e9;
	border-radius: 20px;
	padding: 20px;
}

.pagos img{
	max-width: 70px;
	margin:0 0 20px 0;
}

.pagos table tr td{
	padding: 10px;
	border-bottom: solid 1px #999999;
	color: #313131;
}

.pagos table tr:last-child td{
	border:none;
}

.cofirm-pay--ok{
	font-weight: 600;
	color: #313131;
	padding: 20px 10px;
	font-size: 20px;
}

.alert-cancel{
	padding: 20px;
	background: #e4434e10;
	color: #e4434e;
	border:solid 1px #e4434e20;
	text-align: center;
	border-radius: 10px;
}

.alert-cancel i{
	display: block;
	text-align: center;
	margin:0 auto 20px auto;
	font-size: 30px;
	border:solid 2px;
	border-radius: 50px;
	width: 50px;
	line-height: 50px;
}

.cofirm-pay--ok{
	padding: 20px;
	background: #2c586f10;
	color: #2c586f;
	border:solid 1px #2c586f20;
	text-align: center;
	border-radius: 10px;
	margin:0 0 20px 0;
}

.cofirm-pay--ok i{
	display: block;
	text-align: center;
	margin:0 auto 20px auto;
	font-size: 30px;
	border:solid 2px;
	border-radius: 50px;
	width: 50px;
	line-height: 50px;
}

.causas{
	padding: 20px;
	background: #e4434e10;
	color: #e4434e;
	border:solid 1px #e4434e20;
	border-radius: 10px;
	margin:20px 0 0 0;
}

.causas ul{
	padding: 20px;
	text-align: left;
}


/* pay-transfer */
.pay-transfer{
	padding: 20px 0;
}

.pay-transfer h2{
	font-size: 20px;
	color: #313131;
	margin:0 0 20px 0;
}

.pay-transfer ul li{
	list-style: none;
	font-weight: 300;
	font-size: 16px;
	color: #313131;
	padding: 5px 0;
}

/* not-user */
.not-user{
	background: #dfecf2;
	position: relative;
	width: 80px;
	height: 30px;
	margin:auto;
	border-radius: 5px;
	margin:100px auto 70px auto;
}

.info-prospects h4{
	color: #313131;
	margin:40px 0 10px 0;
	text-align: center;
}

.info-prospects > p{
	font-weight: 400;
	font-size: 15px;
	color: #414141;
	text-align: center;
	margin:0 20px 100px 20px;
}

.not-user span{
	position: absolute;
}

.not-user span:nth-child(1){
	width: 20px;
	height: 20px;
	background: #ffffff;
	border-radius: 50px;
	top:4px;
	left: 4px;
}


.not-user span:nth-child(2){
	width: 49px;
	height: 7px;
	background: #fff;
	border-radius: 50px;
	top:11px;
	left: 28px;
}

.not-user span:nth-child(3){
	width: 65px;
	height: 15px;
	background: #ffffff;
	border-radius: 7px;
	top:39px;
	left: 8px;
	background: linear-gradient(-45deg, #ffffff 25%, #dfecf2 25%, #dfecf2 50%, #ffffff 50%, #ffffff 75%, #dfecf2 75%, #dfecf2);
  background-size: 20px 20px; 
}

.single-prospect{
	margin:10px;
	background: #ffffff;
	border-radius: 10px;
	padding: 1px 10px;
	text-align: left;
}

.single-prospect h4{
	font-size: 15px;
	color: #313131;
	margin:0;
	text-align: left;
}


.single-prospect ul li{
	list-style: none;
	font-size: 14px;
	color: #777777;
}

/* change-status */
.change-status{
	min-height: 30px;
	margin:10px;
	border:solid 1px #ffffff;
	border-radius: 10px;
	position: relative;
}

.change-status:before{
	line-height: 30px;
	text-align: center;
	display: block;
	font-size: 30px;
	color: #ffffff;
	font-weight: 900;
	position: absolute;
	left: 50%;
	top:50%;
	transform: translateX(-50%) translateY(-50%);

    font: var(--fa-font-solid);
    content: "\f363";
    margin:0 8px 0 0 ;
    font-size: 14px;
}

.showcase article .btn-add a::before {
  }

/* footer */
footer{
	text-align: right;
	font-size: 13px;
	font-weight: 300;
	color: #313131;
	position: fixed;
	bottom: 10px;
	right: 10px;
	opacity: .5;
}