/*
* Skeleton V2.0.4
* Copyright 2014, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 12/29/2014
*/


/* Table of contents
––––––––––––––––––––––––––––––––––––––––––––––––––
- Base Styles
- Grid
- Typography
- Links
- Buttons
- Forms
- Lists
- Code
- Tables
- Spacing
- Utilities
- Clearing
- Media Queries
*/

/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––– */

@font-face {

  font-family: 'Raleway';
  src: url('/lib_ext/font-raleway/Raleway-Regular.ttf');
}
html {
  font-size: 10px;
  overflow-x: hidden;
}
body {
  font-size: 1.4em; /* currently ems cause chrome bug misinterpreting rems on body element */
  line-height: 1.5em;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
  font-weight: 400;
  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #222; }

div {
  box-sizing: border-box;
}

img {
  pointer-events: none;
}

sysmsg {
  display: none;
}

/* Grid
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.container {
  width: 100%;
  margin-right: auto;
  margin-left: auto;
  box-sizing: border-box; }
.row {
  padding: 5px 3px;
  width: 100%;
  box-sizing: border-box; }
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
  width: 100%;
  float: left;
  box-sizing: border-box; }

.p-0{padding:0 !important}
.pt-0{padding-top:0 !important}
.pb-0{padding-bottom:0 !important}
.pl-0{padding-left:0 !important}
.pr-0{padding-right:0 !important}
.pt-1{padding-top:0.5rem!important}
.pb-1{padding-bottom:0.5rem!important}
.pl-1{padding-left:0.5rem!important}
.pr-1{padding-right:0.5rem!important}
.pt-2{padding-top:1rem!important}
.pb-2{padding-bottom:1rem!important}
.pl-2{padding-left:1rem!important}
.pr-2{padding-right:1rem!important}
.pt-3{padding-top:2rem!important}
.pb-3{padding-bottom:2rem!important}
.pl-3{padding-left:2rem!important}
.pr-3{padding-right:2rem!important}
.pt-4{padding-top:3rem!important}
.pb-4{padding-bottom:3rem!important}
.pl-4{padding-left:3rem!important}
.pr-4{padding-right:3rem!important}
.pt-5{padding-top:4.5rem!important}
.pb-5{padding-bottom:4.5rem!important}
.pl-5{padding-left:4.5rem!important}
.pr-5{padding-right:4.5rem!important}

.m-0{margin:0 !important}
.mt-0{margin-top:0 !important}
.mb-0{margin-bottom:0 !important}
.ml-0{margin-left:0 !important}
.mr-0{margin-right:0 !important}
.mt-1{margin-top:0.5rem!important}
.mb-1{margin-bottom:0.5rem!important}
.ml-1{margin-left:0.5rem!important}
.mr-1{margin-right:0.5rem!important}
.mt-2{margin-top:1rem!important}
.mb-2{margin-bottom:1rem!important}
.ml-2{margin-left:1rem!important}
.mr-2{margin-right:1rem!important}
.mt-3{margin-top:2rem!important}
.mb-3{margin-bottom:2rem!important}
.ml-3{margin-left:2rem!important}
.mr-3{margin-right:2rem!important}
.mt-4{margin-top:3rem!important}
.mb-4{margin-bottom:3rem!important}
.ml-4{margin-left:3rem!important}
.mr-4{margin-right:3rem!important}
.mt-5{margin-top:4.5rem!important}
.mb-5{margin-bottom:4.5rem!important}
.ml-5{margin-left:4.5rem!important}
.mr-5{margin-right:4.5rem!important}

/* For larger screens */
@media (min-width: 700px) {
  html {
    font-size: 10px;
    overflow-x: hidden;
    margin-right: calc(-1 * (100vw - 100%));
    padding-right: 12px;
    margin-left: 2px;
  }
  .row {
    padding: 7px 5px;
    box-sizing: border-box;
    width: 100%; }

  .col-lg-1                    { width: 8.33333333333%; }
  .col-lg-2                    { width: 16.6666666666%; }
  .col-lg-3                    { width: 25%;            }
  .col-lg-4                    { width: 33.3333333333%; }
  .col-lg-5                    { width: 41.6666666666%; }
  .col-lg-6                    { width: 50%;            }
  .col-lg-7                    { width: 58.3333333333%; }
  .col-lg-8                    { width: 66.6666666666%; }
  .col-lg-9                    { width: 75%;            }
  .col-lg-10                   { width: 83.3333333333%; }
  .col-lg-11                   { width: 91.6666666666%; }
  .col-lg-12                   { width: 100%; margin-left: 0; }

  /* Offsets */
  .offset-by-one.column,
  .offset-by-one.columns          { margin-left: 8.66666666667%; }
  .offset-by-two.column,
  .offset-by-two.columns          { margin-left: 17.3333333333%; }
  .offset-by-three.column,
  .offset-by-three.columns        { margin-left: 26%;            }
  .offset-by-four.column,
  .offset-by-four.columns         { margin-left: 34.6666666667%; }
  .offset-by-five.column,
  .offset-by-five.columns         { margin-left: 43.3333333333%; }
  .offset-by-six.column,
  .offset-by-six.columns          { margin-left: 52%;            }
  .offset-by-seven.column,
  .offset-by-seven.columns        { margin-left: 60.6666666667%; }
  .offset-by-eight.column,
  .offset-by-eight.columns        { margin-left: 69.3333333333%; }
  .offset-by-nine.column,
  .offset-by-nine.columns         { margin-left: 78.0%;          }
  .offset-by-ten.column,
  .offset-by-ten.columns          { margin-left: 86.6666666667%; }
  .offset-by-eleven.column,
  .offset-by-eleven.columns       { margin-left: 95.3333333333%; }

  .offset-by-one-third.column,
  .offset-by-one-third.columns    { margin-left: 34.6666666667%; }
  .offset-by-two-thirds.column,
  .offset-by-two-thirds.columns   { margin-left: 69.3333333333%; }

  .offset-by-one-half.column,
  .offset-by-one-half.columns     { margin-left: 52%; }

}

/* For go up anchor */

#goup{
	background:#333333;
  color:#FFF;
	bottom:60px;
	display: block;
	position: fixed;
	right:10px;
  border-radius: 5px;
  outline: none;
  font-size: 18px;
  padding: 10px;
  opacity: 0;
  z-index: 10000;
  -webkit-transition: .5s all ease-in-out;
  -o-transition: .5s all ease-in-out;
  transition: .5s all ease-in-out;
}


/*  Styles for tasks grid elements
----------------------------------------------------- */

.task_grid {
  display: grid;
  counter-reset: grid-items;
  grid-gap: 12px;
}

.task_grid--auto-fit {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.task_grid_item {
  border-radius: 8px;
  border: 1px solid #BBB;
  padding: 10px 10px 30px 10px;
  list-style-type: none;
  height: max-content;
  max-height: 370px;
  overflow-y: auto;

}

.task_grid_item li {
  border-top: 1px solid #BBB;
  padding: 10px 0;
}

.task_grid_item li:first-child {
  border-top: 0;
}

/*
.task_grid ul:before{
    line-height: 40px;
    margin-left: 7px;
    content:attr(aria-label);
    font-size:1.5em;
    font-weight:bold;
}
*/


/* Gallery styles for images
-------------------------------------------------- */

.gallery_row {
  display: flex;
  flex-wrap: wrap;
}

/* Create four equal columns that sits next to each other */
.gallery_element {
  flex: 25%;
  max-width: 25%;
  position: relative;
}

.gallery_element img {
  vertical-align: middle;
}

.gallery_img_tag_TL {
  background-color: #000;
  color: #fff;
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  position: absolute;
  left: 0;
  top: 0;
}

.gallery_img_tag_BR {
  background-color: #000;
  color: #fff;
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  position: absolute;
  right: 0;
  bottom: 0;
}

/* Responsive layout - makes a three gallery_element-layout instead of four gallery_elements */
@media (max-width: 1280px) {
  .gallery_element {
    flex: 33.3333333%;
    max-width: 33.3333333%;
  }
}

/* Responsive layout - makes a two gallery_element-layout instead of four gallery_elements */
@media (max-width: 900px) {
  .gallery_element {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the one gallery_element stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .gallery_element {
    flex: 100%;
    max-width: 100%;
  }
}


/* Print styles for printer and screen
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* ---- Ocultar elementos en pantalla que solo se mostraran en impresion ----*/
.only_print
{
	display:none;
  visibility: hidden;
}

/* ---- Estilo para mostrar por pantalla un documento a imprimir ---- */
.page_print, .page_print_last
{
	font-family:Arial, sans-serif;
	font-size: 9pt;
	color: #000000 !important;
	line-height: 1.1em;
	width:680px;
  height: 100%;
/*	height: 1080px; */
/*	page-break-inside: avoid; */
  page-break-after: always;
	float:left;
	display:block;
	margin:7mm 0 10mm 20mm;
  position: relative;
  letter-spacing: 0;
}
.page_print, .page_print_last a {
  text-decoration: none;
	color:#000000;
}
.page_print, .page_print_last a:hover {
  text-decoration: none;
	color:#000000;
}

.ticket_print, .ticket_print_last
{
	font-family: Arial, Helvetica, sans-serif;
  font-size: 12pt;
  color: #000000 !important;
	page-break-inside: avoid;
  float:left;
	display:block;
  position:relative;
  letter-spacing: 0;
  margin:0;
}
.ticket_print_last
{
	page-break-inside: avoid;
}

/* ---- Estilo para barra de cabecera de la pagina (espacio entre manu y contenido, de cada pagina) ---- */
.div_head {
	display: flex;
  align-items: stretch;
  margin:10px 0;
}
.div_head_title {
	flex-grow: 1;
  padding:10px;
  white-space: nowrap;
  font-size: 2.5rem;
/*  line-height: 1.5em; */
  letter-spacing: -.05rem;
}
.div_head_buttons {
	flex-grow: 8;
  padding:10px 0;
  text-align:center;
}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, h2, h3, h4, h5, h6 {
  margin-top: 1rem;
  margin-bottom: 0.7rem;
  font-weight: 300; }
h1 { font-size: 4.0rem; line-height: 1.2;  letter-spacing: -.09rem;}
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.08rem; }
h3 { font-size: 3.0rem; line-height: 1.3;  letter-spacing: -.07rem; }
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.06rem; }
h5 { font-size: 1.8rem; line-height: 1.5;  letter-spacing: -.05rem; }
h6 { font-size: 1.5rem; line-height: 1.55;  letter-spacing: 0; }

/* Larger screens */
@media (min-width: 700px) {
  h1 { font-size: 5.0rem; }
  h2 { font-size: 4.2rem; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3.0rem; }
  h5 { font-size: 2.4rem; }
  h6 { font-size: 2rem; }
}

.center {
	text-align:center;
}
.left {
	text-align:left;
}
.right {
	text-align:right;
}
.justify {
	text-align:justify;
  text-justify:inter-word;
}
.semi-opac {
  opacity: 40%;
}
.b {
	font-weight:bold;
}
.s {
	text-decoration: line-through;
}
.p {
	display:block;
}
.u {
	text-decoration: underline;
}
.hidden {
  display: none;
}
.pointer {
  cursor: pointer;
}
.text_link {
  color: #1EAEDB;
}
.text_green {
	color: #009900;
}
.text_green_mint {
	color: #47E4C2;
}
.text_blue {
	color: #0c66c0;
}
.text_red {
	color: #FE2E2E;
}
.text_orange {
	color:#FF4900;
}
.text_amber {
	color:#FFC107;
}
.text_grey {
	color: #888888;
}
.text_light_green {
	color: #8BC34A;
}
.text_teal {
  color:#009688;
}
.text_white {
	color: #FFFFFF;
}
.text_lilac {
	color: #BCAEFD;
}
.text_black {
	color: #222222;
}
.em60 {
	font-size:0.6em;
  line-height:1em;
}
.em80 {
	font-size:0.8em;
  line-height:1em;
}
.em90 {
	font-size:0.9em;
  line-height:1em;
}
.em110 {
	font-size:1.1em;
  line-height:1.1em;
}
.em125 {
	font-size:1.25em;
  line-height:1.2em;
}
.em150 {
	font-size:1.5em;
  line-height:1.2em;
}
.em175 {
	font-size:1.75em;
  line-height:1.2em;
}
.em200 {
	font-size:2em;
  line-height:1.2em;
}
.em250 {
	font-size:2.5em;
  line-height:1.2em;
}
.em300 {
	font-size:3em;
  line-height:1.2em;
}

.circle_number {
  display: inline-block;
  border-radius: 50%;
  border: 2px solid;
  font: 25px Arial, sans-serif;
}
.circle_number:before,
.circle_number:after {
  content: '\200B';
  display: inline-block;
  line-height: 0px;
  padding-top: 50%;
  padding-bottom: 50%;
}
.circle_number:before {
  padding-left: 8px;
}
.circle_number:after {
  padding-right: 8px;
}
.circle_number_small {
  display: inline-block;
  border-radius: 50%;
  border: 1px solid;
  font: 14px Arial, sans-serif;
  line-height: normal;
  width: 17px;
  height: 17px;
  line-height: 17px;
  text-align: center;
}
.blink_me {
  animation: blinker 2s linear infinite;
}
@keyframes blinker {
  50% {
    opacity: 0;
  }
}

/* Backgrounds
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.bg_grey {
	background-color:#BDBDBD;
}
.bg_dark_grey {
	background-color:#616161;
}
.bg_light_grey {
	background-color:#e0e0e0;
}
.bg_light_green {
	background-color:#8BC34A;
}
.bg_green {
	background-color:#4CAF50;
}
.bg_green_mint {
	background-color: #C0FFEE;
}
.bg_teal {
	background-color:#009688;
}
.bg_cyan {
	background-color:#00BCD4;
}
.bg_pink {
	background-color:#F03CA2;
}
.bg_purple {
	background-color:#9C27B0;
}
.bg_lilac {
	background-color: #BCAEFD;
}
.bg_yellow {
	background-color:#FFEB3B;
}
.bg_amber {
	background-color:#FFC107;
}
.bg_orange {
	background-color:#FF9800;
}
.bg_lime {
	background-color:#CDDC39;
}
.bg_blue {
	background-color:#027FD9;
}
.bg_light_blue {
	background-color:#03A9F4;
}
.bg_red {
	background-color:#F44336;
}
.bg_light_red {
	background-color:#E57373;
}
.bg_blue_grey {
	background-color:#607D8B;
}
.bg_indigo {
	background-color:#3F51B5;
}
.bg_black {
	background-color:#333333;
}
.bg_white {
	background-color:#FFFFFF;
}
.bg_palid_stone {
	background-color:#F2EFE8;
}
.bg_palid_green {
	background-color:#DBE9D8;
}
.bg_50 {
	opacity: 0.5;
}
.bg_30 {
	opacity: 0.3;
}
.bg_resalt_line {
	background-color:#cfdc3966;
}


div.dark-on-over:hover {
  filter: brightness(85%);
}
td.dark-on-over:hover {
  filter: brightness(85%);
}
tr.dark-on-over:hover {
  filter: brightness(85%);
}

/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
  text-decoration: none;
  color: #1EAEDB;
}
a:hover {
  text-decoration: none;
}

a.greylink{
  text-decoration: none;
  color: #C9C9C9;
}
a.greylink:hover {
  color: #1EAEDB;
  transition: all 0.3s ease-out;
}

/* Fieldset and legend
–––––––––––––––––––––––––––––––––––––––––––––––––– */
fieldset {
  border-radius: 8px;
  border: 1px solid #CCCCCC;
}
legend {
  color: #777777;
  font-size:1.4em;
}

/* Buttons
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
  display: inline-block;
  min-height: 32px;
  padding: 3px 14px;
  color: #555;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  line-height: 28px;
  letter-spacing: .1rem;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  background-color: transparent;
  border-radius: 4px;
  border: 1px solid #bbb;
  cursor: pointer;
  box-sizing: border-box;
  margin: 10px 15px 10px 15px; }
.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
.button:focus,
button:focus,
input[type="submit"]:focus,
input[type="reset"]:focus,
input[type="button"]:focus {
  outline: none;
  border-color: #9ecaed;
  box-shadow: 0 0 10px #9ecaed; }
.button.button-primary,
button.button-primary,
input[type="submit"].button-primary,
input[type="reset"].button-primary,
input[type="button"].button-primary {
  color: #FFF;
  background-color: #33C3F0;
  border-color: #33C3F0; }
  .button.button-primary,
button.button-alert,
input[type="submit"].button-alert,
input[type="reset"].button-alert,
input[type="button"].button-alert {
  outline: none;
  background-color: #FFC107;
  border-color: #FFC107; }
.button.button-active,
button.button-active,
input[type="submit"].button-active,
input[type="reset"].button-active,
input[type="button"].button-active {
  outline: none;
  border-color: #9ecaed;
  box-shadow: 0 0 10px #9ecaed; }
.button.button-primary:hover,
button.button-primary:hover,
input[type="submit"].button-primary:hover,
input[type="reset"].button-primary:hover,
input[type="button"].button-primary:hover,
.button.button-primary:focus,
button.button-primary:focus,
input[type="submit"].button-primary:focus,
input[type="reset"].button-primary:focus,
input[type="button"].button-primary:focus {
  outline: none;
  border-color: #9ecaed;
  box-shadow: 0 0 10px #9ecaed; }
button:disabled {
    background-color: #e0e0e0;
    color: #7a7a7a;
    cursor: not-allowed;
  }
/* Forms
–––––––––––––––––––––––––––––––––––––––––––––––––– */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
  padding: 2px 3px;
  background-color: transparent;
  border-bottom: 1px solid #D1D1D1;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  box-shadow: none;
  box-sizing: border-box;
  vertical-align: middle; }
textarea {
  border-right: 1px solid #D1D1D1;
}
/* Removes awkward default styles on some inputs for iOS */
input[type="email"],
input[type="number"],
input[type="search"],
input[type="text"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none; }
input[type="email"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #9ecaed;
  box-shadow: 0 0 10px #9ecaed; }
input[type="email"]:required,
input[type="number"]:required,
input[type="search"]:required,
input[type="text"]:required,
input[type="tel"]:required,
input[type="url"]:required,
input[type="password"]:required,
textarea:required,
select:required {
  border-color:red;
   }
label{
/*  pb-2: .5rem; */
  font-weight: 1.15rem;
/*  padding: 5px 0px 0 10px; */
}

input[type="checkbox"],
input[type="radio"] {
  display: inline; }
label > .label-body {
  display: inline-block;
  margin-left: .5rem; }
input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
  vertical-align: middle;
  width: 25px;
  content: "\f096";
}
input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */

[contenteditable=true]:empty:before{ /* placeholder workaround for contenteditable elements (before first type) */
  content: attr(placeholder);
  color:grey;
  pointer-events: none;
  display: block; /* For Firefox */
}

/* Lists
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* dar formato a las listas ul para usar como menu del sistema */

.menu {
  width:100%;
  position:relative;
  color: #fff;
  z-index: 9000;
}
/* Fondo animado como capa ::before */
.menu::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: linear-gradient(270deg, #b502d9, #027FD9);
  background-size: 400% 400%;
  animation: fondoCargando 2s ease infinite;
  transition: opacity 1s ease-in-out;
  z-index: -1;
}

/* Al cargar, se desvanece la capa animada */
.menu.loaded::before {
  opacity: 0;
}
/* Final menu after complete load of the page*/
.menu.loaded {
  animation: none;
  background: #027FD9 !important;
}
@keyframes fondoCargando {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.menu ul {
  text-align: left;
  white-space:nowrap;
  display: inline;
  margin: 0;
  padding: 0px 0px 10px 0px;
  list-style: none;
  z-index:9001;
}
.menu ul li {
  text-align: left;
  white-space:nowrap;
  height:16px; /* 10px */
  color: #FFFFFF;
  display: inline-block;
  position: relative;
  padding: 13px; /* 15px */
  cursor: pointer;
  z-index:9001;
}
.menu ul li:hover {
  background: #555555;
  color: #FFFFFF;
  z-index:9002;
}
.menu ul li ul {
  text-align: left;
  white-space:nowrap;
  padding: 0;
  position: absolute;
  top: 40px;
  left: 0;
/*  width: 210px; */
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  z-index:9003;
}
.menu ul li ul li {
  text-align: left;
  white-space:nowrap;
  background: #555555;
  display: block;
  color: #FFFFFF;
  z-index:9004;
}
.menu ul li ul li:hover {
  background: #777777;
  z-index:1004;
}
.menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
  z-index:9003;
}

/*Style 'show menu' label button and hide it by default*/
#menu-mobile {
	text-decoration: none;
	text-align: center;
	padding: 8px 15px;
	display: none;
}

/*Show menu when invisible checkbox is checked*/
#show-menu-desktop:checked ~ .menu ul{
    display: block;
}

/*Adapt menu to screen size: on small screens menu on top button*/
@media screen and (max-width : 700px){
	/*Make dropdown links appear inline*/
	.menu ul {
		position: static;
		display: none;
	}
	/*Make all menu links full width*/
	.menu ul li {
		width: 100%;
    display: block;
	}
	/*Display 'show menu' link*/
	#menu-mobile {
		display:block;
	}
}


/* Side menu for a page
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.sidebar {
    display: none;
    position: fixed !important;
    overflow: auto;
    padding-right: 5px;
    background-color: #EEEEEE;
    width: 250px;
    z-index: 9001; /*one over the blanket*/
}
.margin_sidebar {
    padding-left:0px;
    transition: padding-left .4s;
}
/* Style the links inside the navigation bar */
.sidebar a {
    display: block;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
    text-align: left;
    padding: 8px 16px;
    color: #222;
}
/* Change the color of links on hover */
.sidebar a:hover {
    background-color: #DDDDDD;
}
/* Style the "active" element to highlight the current page */
.sidebar a.active {
    background-color: #5CDB95;
}

.topbar {
    display: block;
    position: static !important;
    height: 35px;
    padding-right: 5px;
    background-color: #999999;
    text-align: right;
}

/* For larger screens */
@media (min-width: 700px) {
  .topbar {
    display: none;
  }
  .sidebar {
      display: block;
      background-color: #FFFFFF;
      z-index: 8999; /*one behind the blanket for larger screens*/
  }
  .margin_sidebar {
      padding-left:250px;
  }
}


/* Code
–––––––––––––––––––––––––––––––––––––––––––––––––– */
code {
  padding: .2rem .5rem;
  margin: 0 .2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #F1F1F1;
  border: 1px solid #E1E1E1;
  border-radius: 4px; }
pre > code {
  display: block;
  padding: 1rem 1.5rem;
  white-space: pre; }


/* Tables
–––––––––––––––––––––––––––––––––––––––––––––––––– */
th,
td {
  padding: 5px;
  text-align: left;
  border-bottom: 1px solid #E1E1E1; }
th:first-child,
td:first-child {

}
th:last-child,
td:last-child {

}
tr:last-child td{
  border-bottom: 0;
}

.no-border-table td {
  border-bottom: 0;
}

/* Tabs
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Style the tab */
/* Style the buttons inside the tab */
.tab button {
    cursor: pointer;
    transition: 0.3s;
		border-bottom:0;
		border-radius: 4px 4px 0 0;
		margin:0;
    background-color: #FFFFFF;
}

/* Create an active/current tab class */
.tab button.active {
		border-color: #2196F3;
}
.tab button:not(.active)
{
	color: #AAAAAA;
  background-color: #F5F5F5;
}

/* Style the tab content */
.tabcontent {
    padding: -16px 0px;
		border-color: #2196F3;
		border-radius: 0 8px 8px 8px;
		margin: 0;
}

/* *******************************************  Usage of tabs
<div class="tab">
  <button class="tabs" onclick="openTAB(event, 'Tab1')">Title</button>
  <button class="tabs" onclick="openTAB(event, 'Tab2')">Title</button>
</div>
<div id="tab1" class="tabcontent"> ... </div>
<div id="Tab2" class="tabcontent"> ... </div>
*/


/* Spacing
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
button,
.button {
  pb-2: 0.5rem; }
input,
textarea,
select {
  pb-2: 0.5rem; }
pre,
blockquote,
dl,
figure,
table,
p,
ul,
ol,
form {
  pb-2: 0.5rem; }

*/
/* Misc
–––––––––––––––––––––––––––––––––––––––––––––––––– */
hr {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-width: 0;
  border-top: 1px solid #E1E1E1; }

/* Utilities
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.width_90{
  width: 90%;
  box-sizing: border-box; }
.width_max_90{
  max-width: 90%;
  box-sizing: border-box; }
.height_full{
  height: : 100%;
  box-sizing: border-box; }
.width_full{
  width: 100%;
  box-sizing: border-box; }
.width_max_full{
  max-width: 100%;
  box-sizing: border-box; }
.pull-right {
  float: right; }
.pull-left {
  float: left; }
.va-top {
  vertical-align: top; }
.va-mid {
  vertical-align: middle; }
.va-bot {
  vertical-align: bottom; }
.text-one-line-full {
  white-space:nowrap;
 }
.text-one-line-hidden {
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  }
  /*Monospace to match exact size of inputs*/
  .monospace {
    font-family:monospace;
  }


  /* ---- TITLES ON CHAINED/ARROW STYLING ---- */

.arrow-pointer
{
	height: 50px;
	position: relative;
	text-align: center;
	line-height: 50px;
}
.arrow-pointer:after
{
	content: "";
	position: absolute;
	left: 0; bottom: 0; width: 0; height: 0;
	border-left: 13px solid #FFFFFF;
	border-top: 26px solid transparent;
	border-bottom: 26px solid transparent;
}
.arrow-pointer:before
{
	content: "";
	position: absolute;
	right: 0;	bottom: 0;	width: 0;	height: 0;
	border-left: 13px solid transparent;
	border-top: 26px solid #FFFFFF;
	border-bottom: 26px solid #FFFFFF;
}


/* ---- poptext Styles (inside common_JS.js.php)---- */
#htmlpop{
	position:absolute;
	width:150px;
	border:1px solid #0000FF;
	padding:2px;
	font-size:11px;
	color: #000000;
	box-shadow: 4px 4px 4px #888;
	border-radius: 4px;
	padding: 4px 4px 4px 8px;
	background:#D3DEFF;
	opacity:0.95;
	visibility:hidden;
	z-index:9002;
}

/* ---- csspopup Styles  (inside common_JS.js.php ---- */

#blanket {
  background-color:#AAA;
  opacity: 0.7;
  position: fixed;
  z-index: 9002; /*over almost all elements of content div*/
  top:0px;
  left:0px;
  width:100%;
	height:100%;
}
#popUpDiv {

  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  width: fit-content;
  height: fit-content;
  max-height: calc(100vh - 60px);
  padding: 30px;
  text-align: center;
  z-index: 9003; /*one over blanket*/

  /*
	position: fixed;
	background-color:#FFFFFF;
  width: fit-content;
  min-width: 500px;
  left:calc(25%);
  min-height: 500px;
  top: 50px;
  height: calc(100vh - 60px);
  padding:10px;
	text-align:center;
	z-index: 9003;
  */
}

/* ---- DROPDOWN MENU STYLING ---- */

.menu-dropdown {
  position: relative;
  display: inline;
}

.menu-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 9002;
}

.menu-dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
	text-align: left;
}

.menu-dropdown-content a:hover {background-color: #f1f1f1;}

.menu-dropdown:hover .menu-dropdown-content {
  display: block;
}

/* ---- SUGGESTED FIELDS ---- */

.sugg_lista
{
	position: absolute;
	border: 1px solid #d4d4d4;
	z-index: 1;
	display: none;
	padding: 3px;
  background-color: #FFFFFF;
}

.sugg_lista div
{
  text-align: left;
  padding: 10px;
  cursor: pointer;
  border-bottom: 1px solid #d4d4d4;
}

.sugg_resaltado
{
	background-color: #d4d4d4;
}

.sugg_normal
{
	background-color: none;
}


/* ---- AUTOCOMPLETE FIELDS ---- */

.autocomplete {
  position: relative;
  display: inline-block;
/*  width: 100%; */
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

.autocomplete-items div {
  padding: 10px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}

/* ---- ALERT RELATED CLASS (START) (inside common_JS.js.php  ---- */

.alert-area {
  max-height: 100%;
  position: fixed;
  bottom: 5px;
  left: 20px;
  right: 20px;
  transition: opacity 0.5s ease-in;
}

.alert-area.hide {
  opacity: 0;
}

.alert-box {
  font-size: 17px;
  color: #FFFFFF;
  line-height: 1.3em;
  padding: 10px 30px 10px 15px;
  margin: 5px 10px;
  position: relative;
  border-radius: 5px;
  transition: opacity 0.5s ease-in;
}

.alert-box.hide {
  opacity: 0;
}

.alert-close {
  background: transparent;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 15px;
  right: 15px;
}

.alert-close:before,
.alert-close:after {
  content: '';
  width: 17px;
  border-top: solid 2px white;
  position: absolute;
  top: 5px;
  right: -1px;
  display: block;
}

.alert-close:before {
  transform: rotate(45deg);
}

.alert-close:after {
  transform: rotate(135deg);
}

.alert-close:hover:before,
.alert-close:hover:after {
  border-top: solid 3px #FFFFFF;
}

/* ---- DROPDOWN MENU RELATED CLASS  ---- */

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 8px 8px 17px 0px rgba(0,0,0,0.4);
  z-index: 1;
}

.dropdown-content a {
  padding: 12px 16px;
  text-decoration: none;
  display: block;
	text-align: left;
  white-space: nowrap;
}

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content {
  display: block;
}

@media (max-width: 767px) and (min-width: 481px) {
  .alert-area {
    left: 100px;
    right: 100px;
  }
}

@media (min-width: 768px) {
  .alert-area {
    width: 420px;
    left: auto;
    right: 0;
  }
}

/* Clearing
–––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Self Clearing Goodness */
.container:after,
.row:after,
.u-cf {
  content: "";
  display: table;
  clear: both; }


/* Media Queries
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/*
Note: The best way to structure the use of media queries is to create the queries
near the relevant code. For example, if you wanted to change the styles for buttons
on small devices, paste the mobile query code up in the buttons section and style it
there.
*/
.only_desktop{
display:none; }
.only_phone{
display:none; }

/* SCREEN PHONE : Larger than small mobile */
@media (min-width: 200px) {
  .only_desktop{
  display:none; }
  .only_phone{
  display:inline; }
}

/* SCREEN DESKTOP: Larger than tablet */
@media (min-width: 700px) {
 .only_desktop{
 display:inline; }
 .only_phone{
 display:none; }
}




/*
Para sustituir los checkbox del sistema
------------

<input type="checkbox" id="switch" value="1" /><label for="switch">Toggle</label>
-----------------
input[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

label {
	cursor: pointer;
	text-indent: -9999px;
	width: 40px;
	height: 25px;
	background: grey;
	display: block;
	border-radius: 25px;
	position: relative;
}

label:after {
	content: '';
	position: absolute;
	top: 5px;
	left: 5px;
	width: 15px;
	height: 15px;
	background: #fff;
	border-radius: 15px;
	transition: 0.3s;
}

input:checked + label {
	background: #bada55;
}

input:checked + label:after {
	left: calc(100% - 5px);
	transform: translateX(-100%);
}

label:active:after {
	width: 15px;
}

// centering
body {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
}

*/