@charset "utf-8";
/* CSS Document */

:root {
	--fondo-principal: #1a8400;
	--fondo-secundario: #1e578a;

	--translucido-rojo: rgba(255, 0, 0, 0.5);
	--translucido-verde: rgba(40, 255, 0, 0.5);
	--translucido-amarillo: rgba(255, 255, 0, 0.5);
	--translucido-naranja: rgba(255, 165, 0, 0.5);
	--translucido-negro: rgba(0, 0, 0, 0.5);
	--translucido-azul: rgba(0, 0, 255, 0.5);
	--translucido-blanco: rgba(255, 255, 255, 0.5);
	--translucido-plata: rgba(192, 192, 192, 0.5);

	--fluor-rojo: rgba(255, 0, 0, 1);
	--fluor-verde: rgba(40, 255, 0, 1);
	--fluor-amarillo: rgba(255, 255, 0, 1);
	--fluor-naranja: rgba(255, 165, 0, 1);
	--fluor-negro: rgba(0, 0, 0, 1);
	--fluor-azul: rgba(0, 0, 255, 1);
	--fluor-blanco: rgba(255, 255, 255, 1);
	--fluor-plata: rgba(192, 192, 192, 1);
}

.pantalla-login {
	background-color: var(--fondo-principal);
	position: fixed;
	display: flex;
	align-items: center;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
}

.pantalla-login-black {
	background-color: black;
	position: fixed;
	display: flex;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	overflow: auto;
}

/*************************************************************************************************
* menú footer
*************************************************************************************************/
.div-menu-footer {
	position: fixed;
	bottom: 0px;
	width: 100%;
	z-index: 1200;
	background-color: white;
	font-size: 1.3rem;
	font-weight: 500;
	border-top:	solid;
	border-top-width: 1px;
	border-top-color: #dee2e6;
	padding: 0;
	margin-bottom: 0;
	height: 55px;
}

.btn-menu-footer {
	cursor: pointer;
	font-size: 1.5rem;
	padding: 5px 0px 5px 0px;
	background-color: transparent; width: 100%;
	border: none;
	outline: none !important;
	padding-top: .5rem;
	padding-right: 0;
	padding-bottom: .5rem;
	padding-left: 0;
}

.btn-menu-footer:hover {
	background: whitesmoke;
}

.btn-menu-footer-prompt {
	font-size: .6rem;
	font-weight: 700;
}

/*************************************************************************************************
* modales laterales
*************************************************************************************************/
.modal-side {
	position: fixed;
	z-index: 1100;
	top: 0px;
	left: -100%;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

.modal-side-header {
	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
	height: 60px;
	background-color: var(--fondo-principal);
	color: white;
	width: 100%;
}

.modal-side-body {
	position: relative;
	left: 0px;
	right: 0px;
	width: 100%;
}

.modal-side-footer {
	position: relative;
	left: 0px;
	right: 0px;
	width: 100%;
}

/*************************************************************************************************
* Loader
 ************************************************************************************************/
.preloader{
	width: 70px;
	height: 70px;
	display: none;
	margin-left: auto;
	margin-right: auto;
	border: 5px solid #eee;
	border-top: 5px solid #666;
	border-radius: 50%;
	animation-name: girar;
	animation-duration: 1s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}

@keyframes girar {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/*************************************************************************************************
* gradientes
 ************************************************************************************************/
.linear-gradiente-rojo {
	color: #fff;
	background-image: linear-gradient(red, orange, red);
}

.radial-gradiente-rojo {
	color: #fff;
	background-image: radial-gradient(#ff0000, #d20000);
}

.radial-gradiente-verde {
	color: #fff;
	background-image: radial-gradient(#28ff00, #1ebf00);
}

.radial-gradiente-amarillo {
	color: #fff;
	background-image: radial-gradient(#ffff00, #d4d400);
}

.radial-gradiente-naranja {
	color: #fff;
	background-image: radial-gradient(#ffa500, #e89600);
}

.radial-gradiente-negro {
	color: #fff;
	background-image: radial-gradient(#606060, #000000);
}

.radial-gradiente-azul {
	color: #fff;
	background-image: radial-gradient(#0000ff, #0000a7);
}

.radial-gradiente-blanco {
	color: #4c4c4c;
	background-image: radial-gradient(#ffffff, #eaeaea);
}

.radial-gradiente-plata {
	color: #fff;
	background-image: radial-gradient(#c0c0c0, #969696);
}

/*************************************************************************************************
* los switches que nos pidieron en rojo
 ************************************************************************************************/
.switchrojo {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 35px;
}

.switchrojo input {
	opacity: 0;
	width: 0;
	height: 0;
}

.sliderrojo {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.sliderrojo:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .sliderrojo {
	background-color: #f90404;
}

input:focus + .sliderrojo {
	box-shadow: 0 0 1px #ccc;
}

input:checked + .sliderrojo:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
	background-color: white;
}

/* Rounded sliders */
.sliderrojo.round {
	border-radius: 34px;
}

.sliderrojo.round:before {
	border-radius: 50%;
}

/*************************************************************************************************
* los switches que nos pidieron en verde fluor
*************************************************************************************************/
.switchverdefluor {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 35px;
}

.switchverdefluor input {
	opacity: 0;
	width: 0;
	height: 0;
}

.sliderverdefluor {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.sliderverdefluor:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .sliderverdefluor {
	background-color: var(--fluor-verde);
}

input:focus + .sliderverdefluor {
	box-shadow: 0 0 1px #ccc;
}

input:checked + .sliderverdefluor:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.sliderverdefluor.round {
	border-radius: 34px;
}

.sliderverdefluor.round:before {
	border-radius: 50%;
}

.header {
	position: fixed;
	top: 0px;
	left: 0px;
	right: 0px;
	z-index: 1000;
	height: 60px;
	background-color: var(--fondo-principal);
	display: flex;
	align-items: center;
	color: white;
	width: 100%;
}

/*************************************************************************************************
* switches lg
 ************************************************************************************************/
/*rojo*/
.switchrojo-lg {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 35px;
}

.switchrojo-lg input {
	opacity: 0;
	width: 0;
	height: 0;
}

.sliderrojo-lg {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.sliderrojo-lg:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .sliderrojo-lg {
	background-color: #f90404;
}

input:focus + .sliderrojo-lg {
	box-shadow: 0 0 1px #ccc;
}

input:checked + .sliderrojo-lg:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
	background-color: white;
}

/* Rounded sliders */
.sliderrojo-lg.round {
	border-radius: 34px;
}

.sliderrojo-lg.round:before {
	border-radius: 50%;
}

/*verde fluor*/
.switchverdefluor-lg {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 35px;
}

.switchverdefluor-lg input {
	opacity: 0;
	width: 0;
	height: 0;
}

.sliderverdefluor-lg {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.sliderverdefluor-lg:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .sliderverdefluor-lg {
	background-color: var(--fluor-verde);
}

input:focus + .sliderverdefluor-lg {
	box-shadow: 0 0 1px #ccc;
}

input:checked + .sliderverdefluor-lg:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* Rounded sliders */
.sliderverdefluor-lg.round {
	border-radius: 34px;
}

.sliderverdefluor-lg.round:before {
	border-radius: 50%;
}

/*************************************************************************************************
* switches sm
*************************************************************************************************/
/*rojo*/
.switchrojo-sm {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 17px;
	margin-top: .7rem;
}

.switchrojo-sm input {
	opacity: 0;
	width: 0;
	height: 0;
}

.sliderrojo-sm {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

.sliderrojo-sm:before {
	position: absolute;
	content: "";
	height: 15px;
	width: 15px;
	top: 1px;
	left: 1px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .sliderrojo-sm {
	background-color: #f90404;
}

input:focus + .sliderrojo-sm {
	box-shadow: 0 0 1px #ccc;
}

input:checked + .sliderrojo-sm:before {
	-webkit-transform: translateX(17px);
	-ms-transform: translateX(17px);
	transform: translateX(17px);
}

/* Rounded sliders */
.sliderrojo-sm.round {
	border-radius: .5rem;
}

.sliderrojo-sm.round:before {
	border-radius: 50%;
}

/*verde fluor*/
.switchverdefluor-sm {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 17px;
	margin-top: .7rem;
}

.switchverdefluor-sm input {
	opacity: 0;
	width: 0;
	height: 0;
}

.sliderverdefluor-sm {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	outline: 1px solid #0000004a;
}

.sliderverdefluor-sm:before {
	position: absolute;
	content: "";
	height: 15px;
	width: 15px;
	top: 1px;
	left: 1px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
}

input:checked + .sliderverdefluor-sm {
	background-color: var(--fluor-verde);
	outline: 1px solid #0edb08;
}

input:focus + .sliderverdefluor-sm {
	box-shadow: 0 0 1px #ccc;
}

input:checked + .sliderverdefluor-sm:before {
	-webkit-transform: translateX(17px);
	-ms-transform: translateX(17px);
	transform: translateX(17px);
}

/* Rounded sliders */
.sliderverdefluor-sm.round {
	border-radius: .5rem;
}

.sliderverdefluor-sm.round:before {
	border-radius: 50%;
}
/*fin botones switch*/

.parrafo {
	margin-left: 5px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-right: 5px;
}

/*************************************************************************************************
* menú principal
 ************************************************************************************************/
.contenedor-menu {
	position: fixed;
	top: 60px;
	bottom: 0px;
	left: -100%;
	width: 300px;
	background-color: var(--fondo-principal);
	color: white;
	font-family: 'Roboto', sans-serif;
	line-height: 18px;
}

.contenedor-menu a {
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	color: white;
}

.contenedor-menu .menu{
	width: 100%;
	padding: 0px;
}

.contenedor-menu ul {
	list-style: none;
}

.contenedor-menu .menu li a {
	color: white;
	display: block;
	padding: 5px 10px;
	text-decoration: none;
}

.contenedor-menu .menu li ul {
	padding: 0px;
}

.contenedor-menu .menu li a:hover {
	background: whitesmoke;
	color: #494949;
}

.contenedor-menu .menu .icono {
	font-size: 12px;
	line-height: 18px;
}

.contenedor-menu .menu .icono.izquierda {
	float: left;
	margin-right: 10px;
}

.contenedor-menu .menu .icono.derecha {
	float: right;
	margin-left: 10px;
}

.contenedor-menu .menu ul {
	display: none;
}

.contenedor-menu .menu ul li a {
	background: #156d00;
	width: 100%;
}

.contenedor-menu .menu .activado > a {
	background: whitesmoke;
	color: #494949;
}

/*************************************************************************************************
| inputs
 ************************************************************************************************/
.input-underline {
	border: none !important;
	width: 100% !important;
	background: none !important;
	box-shadow: none !important;
	outline: none !important;
	border-radius: 0 !important;
	border-bottom-style: solid !important;
	border-bottom-width: 1px !important;
	font-size: 1rem !important;
}

.input-grid {
	font-weight: 400;
	font-size: 80%;
	width: 100%;
	border-color: darkgray;
	border-width: 1px;
}

/*************************************************************************************************
| div flotante
 ************************************************************************************************/
.div-flotante {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--translucido-azul);
	color: white;
	cursor: pointer;
}

/*************************************************************************************************
* automcomplete
 ************************************************************************************************/
.ui-autocomplete {
	position: absolute;
	cursor: default;z-index:1100 !important;
	max-height: 200px;
	overflow-y: scroll;
	overflow-x: hidden;
}

/*************************************************************************************************
* fonts
 ************************************************************************************************/
.font-size-large {
	font-size: large;
}

.font-size-larger {
	font-size: larger;
}

.font-size-xlarge {
	font-size: x-large;
}

.font-size-xxlarge {
	font-size: xx-large;
}

.font-size-xxxlarge {
	font-size: xxx-large;
}

.font-size-small {
	font-size: small;
}

.font-size-smaller {
	font-size: smaller;
}

.font-size-xsmall {
	font-size: x-small;
}

.font-size-xxsmall {
	font-size: xx-small;
}

/*************************************************************************************************
* scroll bar
 ************************************************************************************************/
.user-scrollbar::-webkit-scrollbar {
    width: 8px;     /* Tamaño del scroll en vertical */
    height: 8px;    /* Tamaño del scroll en horizontal */
    /*display: none;  /* Ocultar scroll */
}

/* Ponemos un color de fondo y redondeamos las esquinas del thumb */
.user-scrollbar::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 4px;
}
/* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
.user-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #b3b3b3;
    box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
}
/* Cambiamos el fondo cuando esté en active */
.user-scrollbar::-webkit-scrollbar-thumb:active {
    background-color: #999999;
}

/* Ponemos un color de fondo y redondeamos las esquinas del track */
.user-scrollbar::-webkit-scrollbar-track {
    background: #e1e1e1;
    border-radius: 4px;
}
/* Cambiamos el fondo cuando esté en active o hover */
.user-scrollbar::-webkit-scrollbar-track:hover,
.user-scrollbar::-webkit-scrollbar-track:active {
  background: #d4d4d4;
}

/*************************************************************************************************
* miscelaneous
 ************************************************************************************************/
/*input::placeholder {
	font-weight: 400;
	font-size: .8rem;
}*/

 .image-height {
	max-height: 100%;
	max-width: 100%;
}

.line-height-0 {
	line-height: 0rem;
}

.row-flex {
	height: 100%;
	align-items: center;
}


body{
    position:relative;
    padding: 0;
    width: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: 100% auto;
    background-attachment: fixed;
}

.bg-body{
    height:100%;
}

.cursor-pointer {
	cursor: pointer;
}

.pointer-events-none {
	pointer-events: none;
}

.text-silver {
	color: silver;
}

.text-gold {
	color: gold;
}

/*
new css class
*/

.font-size-05 {
	font-size: .5rem !important;
}

.font-size-06 {
	font-size: .6rem !important;
}

.font-size-07 {
	font-size: .7rem !important;
}

.font-size-08 {
	font-size: .8rem !important;
}

.font-size-09 {
	font-size: .9rem !important;
}

.font-size-10 {
	font-size: 1rem !important;
}

.font-size-11 {
	font-size: 1.1rem !important;
}

.font-size-12 {
	font-size: 1.2rem !important;
}

.font-size-13 {
	font-size: 1.3rem !important;
}

.font-size-14 {
	font-size: 1.4rem !important;
}

.font-size-15 {
	font-size: 1.5rem !important;
}

.font-size-16 {
	font-size: 1.6rem !important;
}

.font-size-17 {
	font-size: 1.7rem !important;
}

.font-size-18 {
	font-size: 1.8rem !important;
}

.font-size-19 {
	font-size: 1.9rem !important;
}

.font-size-20 {
	font-size: 2.0rem !important;
}

.font-weight-300 {
	font-weight: 300 !important;
}

.font-weight-400 {
	font-weight: 400 !important;
}

.font-weight-500 {
	font-weight: 500 !important;
}

.font-weight-600 {
	font-weight: 600 !important;
}

.font-weight-700 {
	font-weight: 700 !important;
}

.font-weight-800 {
	font-weight: 800 !important;
}

.font-weight-900 {
	font-weight: 900 !important;
}

.app-default-input {
	border: solid 1px silver;
	width: 100%;
	outline: none;
	text-align: center;
	font-size: 1rem;
}

.avatar-xxl {
	height: 300px;
	width: 300px;
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	border: solid 2px silver;
}

.avatar-xl {
	height: 250px;
	width: 250px;
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	border: solid 2px silver;
}

.avatar-lg {
	height: 200px;
	width: 200px;
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	border: solid 2px silver;
}

.avatar-md {
	height: 100px;
	width: 100px;
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	border: solid 2px silver;
}

.avatar-sm {
	height: 75px;
	width: 75px;
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	border: solid 2px silver;
}

.avatar-xsm {
	height: 50px;
	width: 50px;
	background-size: cover;
	background-position: center;
	border-radius: 50%;
	border: solid 2px silver;
}

.canvas {
	display: none;
}

.qr-modal {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: white;
	z-index: 1600;
}

.qr-content {
	align-items: center;
	justify-content: center;
	display: flex;
	height: 100%;
}

.my-close {
	position: absolute;
	top: 15px;
	right: 15px;
}

/* inner shadow */
.shadow-inner-md {
	-webkit-box-shadow: inset 0px 0px 25px -1px rgba(0,0,0,0.59);
	box-shadow: inset 0px 0px 25px -1px rgba(0,0,0,0.59);
}

/* flip card */
.scene {
  display: inline-block;
  width: 100%;
  height: 100%;
/*   border: 1px solid #CCC; */
  margin: 0;
  perspective: 600px;
}

.flip-card {
  position: relative;
  width: 100%;
  height: 100%;
  /* cursor: pointer; */
  transform-style: preserve-3d;
  transform-origin: center right;
  transition: transform 1s;
  background-color: transparent;
}

.flip-card.is-flipped {
  transform: translateX(-100%) rotateY(-180deg);
}

.card__face {
  position: absolute;
  width: 100%;
  height: 100%;
  line-height: normal;
  /* color: transparent; */
  text-align: center;
  font-weight: bold;
  /* font-size: 40px; */
  backface-visibility: hidden;
}

.card__face--front {
  /* position: relative; */
  background: transparent;
}

.card__face--back {
  position: relative;
  background: transparent;
  transform: rotateY(180deg);
}




.app-input {
    border: 1px solid silver;
    width: 100%;
    font-size: 1rem;
    outline: none;
    height: 26px;
}

.app-label {
    font-size: .7rem;
    font-weight: 500;
    margin: 0 !important;
    padding: 0 !important;
}




/* flip card */
.flip {
    backface-visibility:             hidden;
        -moz-backface-visibility:    hidden;
        -ms-backface-visibility:     hidden;
        -o-backface-visibility:      hidden;
        -webkit-backface-visibility: hidden;
    border: 1px solid black;
    height: 105px;
    font: normal 14px helvetica, arial, san serif;
    padding: 10px;
    position: absolute;
    transform-origin:             50% 50% 0px;
        -moz-transform-origin:    50% 50% 0px;
        -ms-transform-origin:     50% 50% 0px;
        -o-transform-origin:      50% 50% 0px;
        -webkit-transform-origin: 50% 50% 0px;
    transition: all 3s;
        -moz-transition:    all 3s;
        -ms-transition:     all 3s;
        -o-transition:      all 3s;
        -webkit-transition: all 3s;
    width: 300px;
}

#side-1 {
    transform:             rotateY( 0deg );
        -moz-transform:    rotateY( 0deg );
        -ms-transform:     rotateY( 0deg );
        -o-transform:      rotateY( 0deg );
        -webkit-transform: rotateY( 0deg );
}

#side-2 {
    transform:             rotateY( 180deg );
        -moz-transform:    rotateY( 180deg );
        -ms-transform:     rotateY( 180deg );
        -o-transform:      rotateY( 180deg );
        -webkit-transform: rotateY( 180deg );
}

.flip-side-1 {
    transform:             rotateY( 0deg ) !important;
        -moz-transform:    rotateY( 0deg ) !important;
        -ms-transform:     rotateY( 0deg ) !important;
        -o-transform:      rotateY( 0deg ) !important;
        -webkit-transform: rotateY( 0deg ) !important;
}

.flip-side-2 {
    transform:             rotateY( 180deg ) !important;
        -moz-transform:    rotateY( 180deg ) !important;
        -ms-transform:     rotateY( 180deg ) !important;
        -o-transform:      rotateY( 180deg ) !important;
        -webkit-transform: rotateY( 180deg ) !important;
}