/* @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700&display=swap'); */

@font-face {
    font-family: "lato Semibold";
    font-style: normal;
    font-weight: 600;
    src: local("lato Semibold"), local("lato Semibold"), url("/fonts/lato/Lato-Semibold.woff2") format("woff2"), url("/fonts/lato/Lato-Semibold.woff") format("woff");
}

@font-face {
    font-family: "lato Bold";
    font-style: normal;
    font-weight: 600;
    src: local("lato Bold"), local("lato Bold"), url("/fonts/lato/Lato-Bold.woff2") format("woff2"), url("/fonts/lato/Lato-Bold.woff") format("woff");
}

@font-face {
    font-family: "lato medium";
    font-style: normal;
    font-weight: 400;
    src: local("lato medium"), local("lato medium"), url("/fonts/lato/Lato-Medium.woff2") format("woff2"), url("/fonts/lato/Lato-Medium.woff");
}

@font-face {
    font-family: "lato light";
    font-style: normal;
    font-weight: 300;
    src: local("lato light"), local("lato light"), url("/fonts/lato/Lato-Light.woff2") format("woff2"), url("/fonts/lato/Lato-Light.woff") format("woff");
}

@font-face {
    font-family: "lato black";
    font-style: normal;
    font-weight: 300;
    src: local("lato black"), local("lato black"), url("/fonts/lato/Lato-Black.woff2") format("woff2"), url("/fonts/lato/Lato-Black.woff") format("woff");
}

@font-face {
    font-family: "lato Heavy";
    font-style: normal;
    font-weight: 300;
    src: local("lato Heavy"), local("lato Heavy"), url("/fonts/lato/Lato-Heavy.woff2") format("woff2"), url("/fonts/lato/Lato-Heavy.woff") format("woff");
}





/* login */
.text-danger {
    color: #e37f7f;
}
.error-response {
    margin: 2px 0 0 24px;
}
/* end login */
.material-icons {
    font-family: 'Material Icons';
    color: #FF8B00;
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-feature-settings: 'liga';
    font-feature-settings: 'liga'
}

* {
    margin: 0px;
    padding: 0px;
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important
}

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

::-webkit-scrollbar-thumb {
    background-color: #EE8000
}

html {
	scroll-behavior: smooth;
}

body {
    width: 100%;
    background-color: #fefefe;
    font-family: 'lato light';
}

main {
    margin-top: 70px;
}

section {
    width: 100%;
    display: flex
}

input,
textarea {
    font-family: 'lato light';
}

input:focus,
textarea:focus {
    outline: none
}

a {
    text-decoration: none;
    word-wrap: break-word;
}

.btn{
	/* border-radius: 15px; 
	border: 1px solid #606060;
	padding: 0 10px;
	text-decoration: none;
	color: #606060; */
	font-size: 24px !important;
    border: 1px solid #7C7C7C;
    color: #7C7C7C;
    border-radius: 20px;
    padding: 3px 30px;
    transition: ease all 0.3s;
}

.content-title-section {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 30px 0px;
}

.content-title-section>h4, .content-title-section>h1{
	color: #606060;
	font-size: 12px;
	text-align: center;
}

.content-title-section>h4>span:first-child, .content-title-section>h1>span:first-child{
	font-size: 16px;
	letter-spacing: 3px;
    font-family: "lato medium";
	color: #000;
}

.content-title-section>h4>span:last-child, .content-title-section>h1>span:last-child{
    font-family: "lato Bold";
	margin-left: 5px;
}

.content-breadcrumbs {
	width: 100%;
	display: flex;
	justify-content: start;
	align-items: center;
	padding: 0px 30px;
	margin: 50px 0px;
}

.content-breadcrumbs>div {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: start;
	align-items: center;
}

.content-breadcrumbs>div a.breadcrumbs-active {
	color: #FF8B00;
}

.content-breadcrumbs>div a {
	height: 40px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #7C7C7C;
	transition: ease all 0.3s;
}

.content-breadcrumbs>div a:hover {
	transform: scale(1.05);
	color: #FF8B00;
}

.content-breadcrumbs>div a>svg{
	width: 20px;
	margin-right: 10px;
}

.content-breadcrumbs>div svg path {	
	fill: #7C7C7C;
}

.line-bottom {
	width: 90%;
	height: 1px !important;
	padding: 0px!important;
	background-color: #DADADA;
	box-shadow: none!important;
	margin: 100px 0px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
}

ul,
ol {
	font-size: 14px;
	line-height: 22px;
	font-family: 'lato medium';
	color: #606060;
}

/* ul>li,
ol>li {
	margin: 10px 0px !important
} */

@media screen and (min-width: 992px) {
    main {
        margin-top: 0px;
    }

	main {
		margin-top: 100px;
	}

	.content-title-section>h4{
		width: 100%;
		font-size: 16px;
	}

	/* .content-title-section {
		margin: 0px 0px 40px;
	} */

	.content-title-section>h4>span:first-child{
		letter-spacing: 5px;
	}

	.content-title-section>h4>span:last-child{
   	 	font-family: "lato Bold";
	}
}


/* ------------------------- popup login------------------------ */


#popup-container.active{
	display: flex;
	background: #ffffffbc;
}
#popup-container{
	display: none;
}
#popup-login.active{
	display: flex;
}

#popup-login{
	position: fixed;
	top: 0;
	left:0;
	width: 100%;
	height: 100vh;
	background-color: rgba(0,0,0,0.7);
	display: none;
	align-items: center;
	z-index: 100;
	flex-wrap: wrap;
	overflow: scroll;
}

#popup-login h2{
	flex: 0 0 100%;
	text-align: center;
	font-size: 24px;
	letter-spacing: 4px;
}

#login-container, .login-container{
	height: 100%;
	flex: 0 0 100%;
	display: flex;
	flex-wrap: wrap;
	box-shadow: 0 4px 5px 0 rgb(0 0 0 / 14%), 0 1px 10px 0 rgb(0 0 0 / 12%), 0 2px 4px -1px rgb(0 0 0 / 30%);
	border-radius: 0px;
	overflow: hidden;
}

/* #login-container .col,.login-container .col{
	flex: 0 0 100% ;
	height: 100%;
	display: flex;
    flex-direction: column;
    justify-content: center;
} */

.login-container .col-izq{
	flex: 0 0 100% ;
	height: 100%;
	display: flex;
    flex-direction: column;
    justify-content: center;
	background-image: linear-gradient(#277980a1,#8f7930c4),url(/img/index/bg-login.png);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	position: relative;
	padding: 40px;
	display: none;
}

.login-container .col-izq a, .login-container .col-izq p{
	position: relative;
	z-index: 100;
	color: #fff;
	font-size: 14px;
	margin-bottom: 20px;
	letter-spacing: 1px;
	font-family: "lato medium";
	font-size: 14px !important;
}

.login-container .col-izq .layer{
	position: absolute;
	top: 0;
	left: 0;
	padding: 10px;
	width: 100%;
	height: 100%;
	/* background: rgb(38,121,128);
	background: linear-gradient(209deg, rgba(38,121,128,0.49933476808692223) 0%, rgba(126,139,91,0.5) 47%, rgba(229,159,49,0.5) 100%); */
	border-radius: 25px;
}

.btn-signup, .btn-login{
	background: #E59F31;
	padding: 5px 10px !important;
	color: #fff !important;
	border-radius: 25px !important;
	font-size: 28px !important;
	text-align: center;
	letter-spacing: 1px;
	font-family: "lato medium";
}

.btn-log-resta {
    display: flex;
    justify-content: center;
	width: 225px !important;
    margin: 50px 0px;
	font-size: 14px !important;
}

.btn-signup{
	width: 180px;
}
.btn-login{
	width: 250px;
}
.img-container {
	width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-around;
}
.img-container .titulo{
	font-weight: 700;
	color: #CACACA;
	margin: 20px auto;
}
.login-container .col-der{	
	flex: 0 0 100% ;
	height: 100%;
	display: flex;
    flex-direction: column;
    justify-content: space-evenly;
	background: #fff;
}
/*.login-container .col-der input{	*/
/*    margin: 20px 0px !important;*/
/*}*/

.col-der .img-container .item{
	width: auto !important;
	/* margin: 0 auto; */
	display: flex;
    flex-direction: column;
	justify-content: center;
	align-items: center;
}

.col-der .img-container .item img, .col-der .img-container .item span{
	margin: 0 auto;
	width: 100%;
	text-align: center;
}

.col-der .img-container .item span{
	color: #CACACA !important;
	font-size: 14px;
	margin-top: 15px;
}
.col-der .img-container .item:hover span,
.col-der .img-container .item.active span{
	color: #E59F31 !important;
}

.input-container input{
	width: 80%;
	margin: 10px auto;
}

#forgot-password{
	text-align: start;
	margin: 10px;
	margin-left: 60px;
	color: #C3C3C3;
	font-size: 16px;
	font-family: 'lato medium';
	margin-bottom: 20px;
	transition: ease all .2s;
}

#forgot-password:hover{
	color: #267980;
}

#btn-login , #btn-sign-up, #btn-confirm-password{
	background: #267980;
	color: #fff;
	border-radius: 25px;
	text-align: center;
	margin: 0 auto;
	padding: 5px 10px;
	font-size: 14px !important;
	width: 230px;
	font-size: 16px !important;
	width: 290px;
}

button#btn-confirm-password {
    margin: 34px auto 0;
    display: block;
    cursor: pointer;
}

#btn-reset {
    background: #267980;
    color: #fff;
    border-radius: 25px;
    text-align: center;
    margin: 0 auto;
    padding: 5px 10px;
    font-size: 14px !important;
    width: 230px;
    display: flex;
    text-align: center;
    justify-content: center;
}

#password-reset {
    display: none;
}

#signup-container{
	display: none;
}

#password-change{
	display:none
}

span.error-password-confirm.text-danger {
    width: 100%;
    display: block;
    margin: 0;
    padding: 0;
    clear: both;
    margin: -15px 0px 8px 0;
}

.login-container .col .input-container{
    width: 100%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	padding: 0px 25px;
}

.login-container .col .input-container h1{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	line-height: 40px;
	font-family: 'lato bold';
	margin-bottom: 40px;
	border-bottom: 2px solid #26797F;
	font-size: 18px;
	font-family: 'lato bold';
	color: #606060;
	letter-spacing: 4px;
}

.login-container .col .input-container p{
	width: 100%;
	text-align: start;
	margin: 10px;
	margin-left: 60px;
	color: #C3C3C3;
	font-size: 14px;
	font-family: 'lato medium';
	margin-bottom: 20px;
	transition: ease all .2s;
}

.login-container .col .input-container input::placeholder{
	color: #C3C3C3;
	font-family: 'lato medium';
}
.login-container .col .input-container input, .login-container .col .input-container .password{
	width: 94%;
	border: 2px solid #CACACA;
	color: #C3C3C3;
	font-family: 'lato medium';
	font-size: 16px;
}

.login-container .col .input-container .password input{
	width: 100%;
}

.password{
	border: none !important;
}

.login-container .col .input-container #registrar-nombres, .login-container .col .input-container #registrar-apellidos{
	flex: 0 0 43%;
}

.btn-cerrar-login{
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: #ffffff;
	position: absolute;
	cursor: pointer;
	font-size: 30px;
	top: 10px;
	right: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	transition: ease all .2s;
}

.btn-cerrar-login:hover{
	transform: rotate(180deg);
}

#login-container .img-container .item img{
	cursor: pointer;
}

button[type='submit']{
		cursor: pointer;
}

.content-icon-log {
	width: 80px;
	height: 80px;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	padding: 10px;
	box-shadow: 0 2px 2px 0 rgb(0 0 0 / 14%), 0 3px 1px -2px rgb(0 0 0 / 12%), 0 1px 5px 0 rgb(0 0 0 / 20%);
	border-radius: 50%;
}

#login-container .col .img-container .item svg {
    width: 60px;
    height: 60px;
    pointer-events: none;
}

#login-container .content-icon-log{
	pointer-events: none;
}

#login-container #correo{
	display:none
}

.login-container form{
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.password{
	position: relative;
}

.password img{
	position:absolute;
	top: calc(50% - 7.5px);
	right: 12px;
	width: 24px;
	height: 15px;
}

#login-container .col .img-container .item svg.svg-cliente path,#login-container .col .img-container .item svg.svg-cliente polygon, #login-container .col .img-container .item svg.svg-cliente rect{
	fill: #CACACA !important;
}
#login-container .col .img-container .item:hover svg.svg-cliente path,#login-container .col .img-container .item:hover svg.svg-cliente polygon, #login-container .col .img-container .item:hover svg.svg-cliente rect,
#login-container .col .img-container .item.active svg.svg-cliente path,#login-container .col .img-container .item.active svg.svg-cliente polygon, #login-container .col .img-container .item.active svg.svg-cliente rect{
	fill: #267980 !important;
}
.login-btn{
	margin: 0px 10px;
}

.login-btn img{
	width: 30px;
	height: 30px;
}

.dashboard-btn{
	margin: 0px 10px;
}

.dashboard-btn img{
	width: 30px;
	height: 30px;
}

.input-container input, .input-container select, .input-container select option, .input-container textarea{
	font-size: 20px;
	margin: 10px auto;
}
.input-container input{
	width: 100%;
}
.input-container input, .input-container textarea, .input-container select{
	border-radius: 25px;
	outline: 0;
	border: solid 0.1px #B4B4B4;
	color: #606060;
	padding: 5px 10px;
}

/* .content-title-section>h4>span:first-child {
	text-transform: uppercase;
} */



@media screen and (min-width: 1024px) {
	#login-container, .login-container{
		flex: 0 0 58%;
		height: 65%;
	}

	.col-der .img-container .item span{
		font-size: 14px;
		font-family: 'lato medium';
		margin-top: 20px;

	}

	#login-container .col,.login-container .col{
		flex: 0  0 50% !important;
	}

	.login-container{
		height: 70%;
	}
	.btn-cerrar-login{
		top: 10%;
    	right: 10%;
	}
	#popup-login{
		justify-content: center;
	}
	.input-container input{
		font-size: 18px;
		padding: 5px 20px;
	}

	.content-title-section>h4>span:first-child {
		font-size: 30px;
	}
}

/* #login-container, .login-container{
	min-height: 80%;
} */

@media screen and (max-height: 768px){
	#login-container, .login-container{
		min-height: 90%;
	}

}

@media screen and (max-height: 1024px){
	#login-container, .login-container{
		min-height: 90%;
		/*flex: 0 0 90%;*/
	}

	.btn-cerrar-login {
		top: 0px;
		right: 0px;
	}

	.login-container .col .input-container input {
		margin: 0px;
	}

	.login-container .col .input-container p {
		margin: 5px !important;
	}

}

/* -----------------------popup JEFF----------------------------------- */
.popup {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 111;
}

.popup.showing {
    display: flex;
}

.popup .popup-container {
    width: 40%;
    max-height: 90%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
	background-color: #fff;
	border-radius: 20px;
}

.popup .popup-container .btn-close-popup {
    width: 32px;
    height: 32px;
    cursor: pointer;
    background-color: #ffffff;
    border: none;
    border-radius: 50%;
    position: absolute;
    right: 0px;
    top: -50px;
}

.popup-content {
	width: 100%;
}

.popup-content-form {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.popup-content-form>div {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 20px;
}

.popup-content-form>div>img {
	width: 25%;
}

.popup-content-form>div>div {
	width: 75%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.popup-content-form>div>div>h4 {
	font-family: 'lato Heavy';
	font-size: 22px;
	color: #267980;
	border-bottom: 1px solid #267980;
	padding-bottom: 3px;
	margin-bottom: 20px;
}

.popup-content-form>div>div>p {
	font-size: 20px;
	color: #606060;
	font-family: 'lato Bold';
}

.popup-content-form>div>div>p:last-child {
	font-family: 'lato medium';
}

@media screen and (min-width: 992px){
    .btn-log-resta {
        display: none;
    }
    
	.popup .popup-container .btn-close-popup {
		top: 10px !important;
		right: 20px !important;
	}

	#login-container, .login-container{
		border-radius: 25px !important;
	}	

	.login-container .col-izq{
		display: flex;
	}
	
	.img-container {
	    width: 94%;
		margin: 20px 15px;
	}

	.content-icon-log {
		width: 100px;
		height: 100px;
	}

	#btn-login , #btn-sign-up{
		width: 230px;
	}

	#forgot-password{
		font-size: 14px;
	}
	
	.login-container .col .input-container input, .login-container .col .input-container .password{
		font-size: 14px;
	}
	
	.login-container .col-der{	
        justify-content: center;
    }
}


.form-group {
    display: block;
    width: 100%;
    margin: 3px 0;
}
/* loader */

#loader{
	position: fixed;
	width:100%;
	height: 100%;
	background:#65656545;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 102;
	/* display: none */
}

#loader .animation {
position: absolute;
width: 50px;
height: 50px;
/* background: green; */
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}

.loader {
width: 48px;
height: 48px;
border-radius: 50%;
display: inline-block;
position: relative;
border: 3px solid;
border-color: #267980 #FFF transparent transparent;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
.loader::after,
.loader::before {
content: '';  
box-sizing: border-box;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
border: 3px solid;
border-color: transparent transparent #E59F31 #E59F31;
width: 40px;
height: 40px;
border-radius: 50%;
box-sizing: border-box;
animation: rotationBack 0.5s linear infinite;
transform-origin: center center;
}
.loader::before {
width: 32px;
height: 32px;
border-color: #FFF #FFF transparent transparent;
animation: rotation 1.5s linear infinite;
}

@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} 
@keyframes rotationBack {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(-360deg);
}
}
/* end loader */

.content-info {
	padding: 0px  20px 40px !important;
}

.bnn {
	width: 50px;
	height: 50px;
	cursor: pointer;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	position: absolute;
	bottom: 20px;
	z-index: 1;
}

#bnn-der {
	right: 25;
	display: flex;
}

#bnn-izq {
	right: 60px;
	display: flex;
}

#mgm_total_gastos3>div>div {
	width: 100%;

}

#btn-header-ingles {
	display: none !important;
}

span.tituloss {
    color: #267980;
    font-weight: bold;
    text-align: center;
    display: flex;
    align-items: center;
    margin: auto;
    display: block;
    margin: 23px 0 0;
    font-size: 19px;
}


/* RESPONSIVE */


@media(max-width:767px){
	.popup .popup-container {
		width: 85%;
		max-width: 95%;
	}
}

@media screen and (max-width: 1024px) {
	.slide-newsletter {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
	}

	.slide-newsletter img{
		width: 100%;
	}

	.popup-principal .content {
		width: 90%;
	}
}