@font-face{
	font-family: TitilliumWeb-Regular;
	src: url(../fuentes/TitilliumWeb-Regular.ttf);
}
@font-face{
	font-family: Chivo-Regular;
	src: url(../fuentes/Chivo-Regular.ttf);
}
@font-face{
	font-family: SourceSansPro-Regular;
	src: url(../fuentes/SourceSansPro-Regular.ttf);
}

/*FONTS PAGE*/
.Titillium{
	font-family: TitilliumWeb-Regular;
}
.Chivo{
	font-family: Chivo-Regular;
}
.Source{
	font-family: SourceSansPro-Regular;
}
/*FONTS PAGE*/

/*COLOR PALETTE*/
	:root{
		--ocean-1: #4168e9;
		--ocean-2: #2f8de7;
		--ocean-3: #00c0fe;
		--ocean-4: #89d2ee;

		--blue-1: #03045e;
		--blue-2: #023E8A;
		--blue-3: #0077B6;
		--blue-4: #00B4D8;
		--blue-5: #48CAE4;
		--blue-6: #90E0EF;
		--blue-7: #ADE8F4;
		--blue-8: #CAF0F8;


		--night: #383838;
		--cloud-1: #A1A1A1;
		--cloud-2: #B8B8B8;
		--cloud-3: #f6f6f6;
		--mirror: #FFFFFF;
	}

	.color-ocean-1{
		color: var(--ocean-1);
	}
	.color-ocean-2{
		color: var(--ocean-2);
	}
	.color-ocean-3{
		color: var(--ocean-3);
	}
	.color-ocean-4{
		color: var(--ocean-4);
	}
	.color-night{
		color: var(--night);
	}
	.color-cloud-1{
		color: var(--cloud-1);
	}
	.color-cloud-2{
		color: var(--cloud-2);
	}
	.color-cloud-3{
		color: var(--cloud-3);
	}
	.color-mirror{
		color: var(--mirror);
	}

	.color-blue-1{
		color: var(--blue-1);
	}
	.color-blue-2{
		color: var(--blue-2);
	}
	.color-blue-3{
		color: var(--blue-3);
	}
	.color-blue-4{
		color: var(--blue-4);
	}
	.color-blue-5{
		color: var(--blue-5);
	}
	.color-blue-6{
		color: var(--blue-6);
	}
	.color-blue-7{
		color: var(--blue-7);
	}
	.color-blue-8{
		color: var(--blue-8);
	}


	.bg-ocean-1{
		background-color: var(--ocean-1);
	}
	.bg-ocean-2{
		background-color: var(--ocean-2);
	}
	.bg-ocean-3{
		background-color: var(--ocean-3);
	}
	.bg-ocean-4{
		background-color: var(--ocean-4);
	}

	.bg-blue-1{
		background-color: var(--blue-1);
	}
	.bg-blue-2{
		background-color: var(--blue-2);
	}
	.bg-blue-3{
		background-color: var(--blue-3);
	}
	.bg-blue-4{
		background-color: var(--blue-4);
	}
	.bg-blue-5{
		background-color: var(--blue-5);
	}
	.bg-blue-6{
		background-color: var(--blue-6);
	}
	.bg-blue-7{
		background-color: var(--blue-7);
	}
	.bg-blue-8{
		background-color: var(--blue-8);
	}

	.bg-night{
		background-color: var(--night);
	}
	.bg-cloud-1{
		background-color: var(--cloud-1);
	}
	.bg-cloud-2{
		background-color: var(--cloud-2);
	}
	.bg-cloud-3{
		background-color: var(--cloud-3);
	}
	.bg-mirror{
		background-color: var(--mirror);
	}
/*COLOR PALETTE*/

/*COPYRIGHT*/
.copy-coex{
	color: var(--mirror);
	transition: 0.6s;
	text-decoration: none;
}
.copy-coex:hover{
	color: var(--blue-8);
	text-decoration: none;
	transition: 0.6s;
}
/*COPYRIGHT*/

/*BUTTONS*/
	.btn-ocean-1-rounded{
		background-color: var(--mirror);
		color: var(--ocean-1);
		border: var(--ocean-1) 2px solid;
		transition: 0.8s;
	}
	.btn-ocean-1-rounded:hover{
		background-color: var(--ocean-1);
		color: var(--mirror);
		border: var(--ocean-1) 2px solid;
		transition: 0.8s;
	}

	.btn-ocean-3-rounded{
		background-color: var(--mirror);
		color: var(--ocean-3);
		border: var(--ocean-3) 2px solid;
		transition: 0.8s;
	}
	.btn-ocean-3-rounded:hover{
		background-color: var(--ocean-3);
		color: var(--mirror);
		border: var(--ocean-3) 2px solid;
		transition: 0.8s;
	}

	.btn-blue-1-rounded{
		border: var(--blue-5) 2px solid;
		color: var(--blue-5);
		transition: 0.6s;
	}

	.btn-blue-1-rounded:hover{
		background-color: var(--blue-5);
		color: var(--mirror);
		transition: 0.6s;
	}


	.btn-close-session{
		background-color: var(--ocean-4);
		color: var(--ocean-4);
		transition: 0.7s;
	}
	.btn-close-session:hover{
		background-color: var(--blue-8);
		color: var(--ocean-1);
		transition: 0.7s;
		box-shadow: rgba(202,240,248, 0.8) 0px 0px 10px;
	}

	.btn-ocean-cobrar{
		background-color: var(--ocean-1);
		color: var(--cloud-3);
		transition: 0.6s;
	}
	.btn-ocean-cobrar:hover{
		background-color: var(--ocean-2);
		color: var(--cloud-3);
		transition: 0.6s;
	}

	.btn-ocean-ver{
		background-color: var(--ocean-2);
		color: var(--cloud-3);
		transition: 0.6s;
	}
	.btn-ocean-ver:hover{
		background-color: var(--ocean-1);
		color: var(--cloud-3);
		transition: 0.6s;
	}

	.btn-cloud-baja{
		background-color: var(--cloud-1);
		color: var(--cloud-3);
		transition: 0.6s;
	}
	.btn-cloud-baja:hover{
		background-color: var(--night);
		color: var(--cloud-3);
		transition: 0.6s;
	}

	.btn-cloud-eliminar{
		background-color: var(--night);
		color: var(--cloud-3);
		transition: 0.6s;
	}
	.btn-cloud-eliminar:hover{
		background-color: var(--cloud-1);
		color: var(--cloud-3);
		transition: 0.6s;
	}

	.btn-editar{
		border: var(--ocean-2) 2px solid;
		color: var(--ocean-2);
		transition: 0.6s;
	}
	.btn-editar:hover{
		border: var(--ocean-2) 2px solid;
		background-color: var(--ocean-2);
		color: var(--cloud-3);
		transition: 0.6s;	
	}

	.btn-guardar{
		background-color: var(--ocean-1);
		border: var(--ocean-1) 2px solid;
		color: var(--cloud-3);
		transition: 0.6s;
	}
	.btn-guardar:hover{
		border: var(--ocean-1) 2px solid;
		background-color: var(--cloud-3);
		color: var(--ocean-1);
		transition: 0.6s;	
	}

	.btn-cancelar{
		border: var(--night) 2px solid;
		color: var(--night);
		transition: 0.6s;
	}
	.btn-cancelar:hover{
		border: var(--night) 2px solid;
		background-color: var(--night);
		color: var(--cloud-3);
		transition: 0.6s;	
	}

	.btn-imprimir-ticket{
		border: var(--ocean-4) 2px solid;
		color: var(--ocean-2);
		transition: 0.6s;
	}
	.btn-imprimir-ticket:hover{
		border: var(--ocean-1) 2px solid;
		background-color: var(--ocean-1);
		color: var(--cloud-3);
		transition: 0.6s;	
	}

	.btn-ingreso{
		border: var(--ocean-2) 2px solid;
		color: var(--ocean-2);
		transition: 0.6s;
	}

	.btn-ingreso:hover{
		border: var(--ocean-2) 2px solid;
		background-color: var(--ocean-2);
		color: var(--cloud-3);
		transition: 0.6s;
	}

	.btn-egreso{
		border: var(--night) 2px solid;
		color: var(--night);
		transition: 0.6s;
	}
	.btn-egreso:hover{
		border: var(--night) 2px solid;
		background-color: var(--night);
		color: var(--cloud-3);
		transition: 0.6s;
	}

	.btn-pagar{
		border: var(--blue-5) 2px solid;
		color: var(--blue-5);
		transition: 0.6s;
	}
	.btn-pagar:hover{
		border: var(--blue-3) 2px solid;
		background-color: var(--blue-3);
		color: var(--cloud-3);
		transition: 0.6s;
	}

	.btn-reporte{
		background-color: var(--blue-1);
		color: var(--mirror);
		transition: 0.6s;
	}
	.btn-reporte:hover{
		background-color: var(--blue-6);
		color: var(--blue-1);
		transition: 0.6s;
	}
/*BUTTONS*/


/*GRADIENTS*/

.gradient-blue-v1{
	background-image: linear-gradient(to right, #03045e, #011167, #001d70, #002778, #003180, #003a88, #00438f, #004c96, #00579f, #0062a7, #006caf, #0077b6);
}

.gradient-night-v1{
	background-image: linear-gradient(to right, #1c1c1c, #212121, #262626, #2c2c2c, #313131, #353535, #3a3a3a, #3e3e3e, #424242, #464646, #4b4b4b, #4f4f4f);
}

.gradient-blue-v2{
	background-image: linear-gradient(to right, #4168e9, #4168e9, #4168e9, #4168e9, #4168e9, #3c6be9, #386fea, #3472ea, #2d79ea, #2980ea, #2a87e9, #2f8de7);
}

.gradient-blue-v3{
	background-image: linear-gradient(to right, #00b4d8, #00b4d8, #00b4d8, #00b4d8, #00b4d8, #00b1db, #00afdd, #00acdf, #00a5e3, #009ee6, #0d96e7, #2f8de7);
}

.gradient-blue-v4{
	background-image: linear-gradient(to right, #2f8de7, #2f8de7, #2f8de7, #2f8de7, #2f8de7, #2795ea, #239dec, #24a4ed, #37b4ee, #53c4ef, #71d2ee, #90e0ef);
}


/*GRADIENTS*/


/*STYLES IMAGES*/
.img-login{
	width: 60px;
	height:60px;
	opacity: 60%; 
}

.img-perfil-settings{
	width: 100%;
}
/*STYLE IMAGES*/

/*STYLE TABLERO*/
.info-card-night{
	/*background-color: var(--night);*/
	color: var(--cloud-1);
	transition: 0.6s;
}
.info-card-night:hover{
	box-shadow: rgba(0,0,0,0.0) 0px 0px 20px;
	background-color: var(--night);
	color: var(--cloud-3);
	transition: 0.6s;
}
/*STYLE TABLERO*/

/*FUNCTION ELEMENTS*/
.display-none{
	display: none;
}
/*FUNCTION ELEMENTS*/

.eyePassword{
	cursor: pointer;
}

/*STYLE LOGIN*/
	.text-backup-password{
		color: var(--night);
		transition: 0.6s;
	}
	.text-backup-password:hover{
		color: var(--ocean-3);
		/*text-decoration: none;*/
		transition: 0.6s;
	}

	.form-login-style{
		background-image: linear-gradient(to top, #caf0f8, #d6f2fd, #e3f4ff, #eef7ff, #f7faff, #fafbff, #fdfdff, #ffffff, #ffffff, #ffffff, #ffffff, #ffffff);
		opacity: 0.9;
		box-shadow: rgba(255,255,255,0.4) 0px 0px 28px;
	}


	input {
      width: 100%;
      padding: 10px;
      outline: 0;
      border: 2px solid green;
  	}
  	input:invalid {
      border-color: red;
  	}

/*STYLE LOGIN*/

/*STYLE OPTION MAIN TOP*/

/*STYLE OPTION MAIN TOP*/

/*STYLE CALENDAR DATEPICKER*/
thead tr:nth-child(2) {
    background-color: var(--ocean-1) !important;
}

thead tr:nth-child(3) th {
    /*font-weight: bold !important;*/
    padding: 10px 10px !important;
    color: var(--ocean-2) !important;
}

tbody tr td {
    /*padding: 10px !important*/
}

tfoot tr:nth-child(2) th {
    /*padding: 10px !important;*/
    border-top: 1px solid #CFD8DC !important
}

.cw {
    /*font-size: 14px !important;*/
    background-color: var(--cloud-3) !important;
    color: var(--night);
    border-radius: 0px !important;
    padding: 0px 20px !important;
    margin-right: 10px solid #fff !important
}

.old,
.day,
.new {
    width: 30px !important;
    height: 30px !important;
    border-radius: 0px !important
}

.day.old,
.day.new {
    color: #E0E0E0 !important
}

.day.old:hover,
.day.new:hover {
    border-radius: 50% !important
}

.old-day:hover,
.day:hover,
.new-day:hover,
.month:hover,
.year:hover,
.decade:hover,
.century:hover {
    border-radius: 50% !important;
    background-color: #eee
}

.range-start,
.range-end {
    border-radius: 50% !important;
    background-image: linear-gradient(#1976D2, #1976D2) !important
}

.range {
    background-color: #E3F2FD !important
}

.prev,
.next,
.datepicker-switch {
    border-radius: 0 !important;
    /*padding: 10px 10px 10px 10px !important;*/
    /*font-size: 18px;*/
    opacity: 0.7;
    color: #fff
}

.prev:hover,
.next:hover,
.datepicker-switch:hover {
    background-color: inherit !important;
    opacity: 1
}

@media screen and (max-width: 726px) {
    .datepicker-dropdown.datepicker-orient-right:before {
        right: calc(50% - 6px)
    }

    .datepicker-dropdown.datepicker-orient-right:after {
        right: calc(50% - 5px)
    }
}
/*STYLE CALENDAR DATEPICKER*/


/*BREAKPOINTS*/

@media (min-width: 378px) {
	#background-login{
		background-image: url(../imagenes/1280x720/1280x720_login_movil.jpg); 
		background-position: center; 
		background-repeat: no-repeat; 
		background-size: cover;
		background-attachment: fixed;
	}

	.img-perfil-settings{
		display: none;
	}

	.mt-movil-view{
		margin-top: 100px;
	}

	.mb-movil-view{
		margin-bottom: 180px;
	}

}


@media (min-width: 768px) {

}


@media (min-width: 992px) {
	.img-perfil-settings{
		display: block;
	}
}


@media (min-width: 1200px) {
	#background-login{
		background-image: url(../imagenes/1920x1080/1920x1080_login_3.jpg); 
		background-position: center; 
		background-repeat: no-repeat; 
		background-size: cover;
		background-attachment: fixed;
	}


	.img-perfil-settings{
		display: block;
	}

	.mt-movil-view{
		margin-top: 0px;
	}

	.mb-movil-view{
		margin-bottom: 0px;
	}

}
/*BREAKPOINTS*/