/* CSS Document */
@font-face {
  font-family: FuenteQlogistic;
  /*src: url("../font/calibri.ttf") format("truetype");*/
  src: url("../font/verdana.ttf") format("truetype");
  font-style:normal;
  font-weight:lighter;
/*
  font-family: "Calibri";
  src: url("font/calibri.ttf") format("truetype");
*/
}
:root {
  /*--colorPrincipal: #2589ce;*/
  --colorPrincipal: #585757;
}
body,
html {
  margin-left: 0px;
  margin-top: 0px;
  font-family: FuenteQlogistic !important;
  font-size: 13px !important;
  font-style: normal !important;
  font-weight: normal !important;
  height: 90%;
  /*background-image: url(https://qlogistic.cl/qa/cl/imagenes/background.jpg);*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  background-color: #FFFFFF;
  /*
  /*background-size:95% 95%;*/
}
fontNormal {
  font-family: FuenteQlogistic;
  font-size: 10px;
  height: 100%;
}
#divCabecera {

  width: 100%;
  height: 90px;
  top: 0px;
  left: 0px;
  position: absolute;
  background-color: #FFFFFF; /*#F5F5F5;*/
  border-bottom-color: none; /* #ff0000; */
  border-bottom-width: none;
  border-bottom-style: solid;
}
#divPie {
  width: 100%;
  height: 0px; /* 32*/
  position: absolute;
  top: 660;
  text-align: center;
  background-color: #ffffff;
}
#lineaSuperior {
  width: 100%;
  height: 29px;
  background-color: #fff;
  position: absolute;
}
#divLogo {
  width: 100% !important;
  min-width: 100% !important;
  max-height: 60px;
  height: 60px;
  top: 30px;
  position: absolute;
  text-align: left;
  vertical-align: middle;
  float: left;
	border-top: 1px solid #EC503A;
	border-bottom: 1px solid #EC503A;
  padding: 0px;
 background-color: #FFFF00;
 background-image: url(https://qa.qlogistic.cl/cl/imagenes/fondo.jpg);
 background-size: cover;
 background-position: right;
 background-repeat: no-repeat;
}

#divLogo img {
  padding: 0px;
  margin-right: -5px;
  overflow: none !important;
  height: 58px;
  width: auto;
  text-align: left;
  vertical-align: middle;
}

#imgAvatar {
  height: 48px !important;
  width: 48px !important;
  border-radius: 50%;
  border: thin solid #EC503A;
  background-color: #FFFFFF;
  margin-left: 75%;
}
#divLogo2 {
  width: 15% !important;
  max-width: 15% !important;
  height: 60px;
  top: 30px;
  /*width: 100px;*/
  position: relative;
  text-align: right;
  vertical-align: middle;
  float: right;
  /*background-image: url(./imagenes/background.jpg);*/
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  background-color: #FFFFFF;
	border-top: 1px solid #EC503A;
	border-bottom: 1px solid #EC503A;
}
#divLogo2 img {
  overflow: none !important;
  height: 100%;
  width: auto;
  text-align: right;
}
/*-- Arreglar para ver bien los logos --*/
/*@media only screen and (max-width: 800px) {
    #divLogo {
        width: 100% !important;
    }
    #divLogo img {
        max-width: 150px;
        height: auto;
    }
}*/

#imgLogo {
  width: 186px;
  height: 64px;
  left: 20px;
}
#divCuerpo {
  width: 100%;
  min-height: 350px;
  height: 100%;
  /*	background-color:#FFFFFF; /*#CCCCCC;*/
  position: relative;
  margin: 0 auto 0 auto;
  top: 100px;
  text-decoration: none;
  font-size: 13px;;
}
#divCuerpo2 {
  width: 96%;
  min-height: 500px;
  height: 1500px;
  /*	background-color:#FFFFFF; /*#CCCCCC;*/
  position: relative;
  margin: 0 auto 0 auto;
  top: 100px;
}
#divCuerpoTransparente {
  width: 96%;
  min-height: 500px;
  height: 1024px;
  /*	background-color:#FFFFFF; /*#CCCCCC;*/
  position: relative;
  margin: 0 auto 0 auto;
  top: 100px;
}
#divCuerpoPDF {
  width: 100%;
  max-width: 100%;
  height: 800px;
  position: absolute;
  top: 100px;
  left: 0px;
  border-bottom-color: #f90;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
#divBotonera {
  width: 100%;
  height: 29px;
  background-color: #000;
  position: absolute;
}
.tListaMant {
  width: 100%;
  top: 30px;
  border-color: #333;
  border-width: 1px;
  border-style: solid;
  position: relative;
  font-size: 12px;
  background-color: #999;
}
.tListaMant th {
  color: #fff;
  background-color: #333;
}
.tListaMant tr {
  background-color: transparent;
}
.tListaMant tr:hover {
  background-color: #f90;
}

/*--------------------------------------------------------------------------------------------------------------*/
/*-- BOTONES ----------------------------------------------------------------------------------------------------*/
button {
  min-width: 100px !important;
  height: 32px !important;
  line-height: 32px;
  margin: 0 4px;
  color: #404040;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  display: inline-block !important;
  outline: none !important;
  border-radius: 0px !important;
  border: 0px solid #FAFAFA;
  background: #FAFAFA;
  /*text-transform: uppercase !important;*/
  font-size: 13px !important;

}

button:hover {
  /*
    background-color:#FF9900;
    font-size: bolder;
*/
  background: #EBEBEB;
}
button:active {
  background: #DCDCDC;

}
button * {
  vertical-align: middle;
}
button:disabled {
  background: #adb5bd;
  opacity: 0.3;
}

button[id~="bAprobar"]:enabled {
}
button[id~="bAprobar"]:hover {
}
button[id^="bGuardar"]:enabled {
}
button[id~="bGuardar"]:hover {
}

button[id^="bAgregar"]:enabled {
}
button[id~="bAgregar"]:hover {
}

button[id~="bRechazar"]:enabled {
}
button[id~="bRechazar"]:hover {
}

button[id^="bCancelar"]:enabled {
}
button[id^="bCancelar"]:hover {
}

button2 {
}
button2 hover {
}
/*--------------------------------------------------------------------------------------------------------------*/
select {
  border: 1px solid #c4c4c4 !important;
  color: #000 !important;
  transition: all 0.3s ease !important;
  font-size: 13px !important;
}
select:hover {
  border: 1px solid #0095d7;
  background: #fff;
  color: #0095d7;
}
input {
  border: 1px solid #c4c4c4;
  color: #000;
  transition: all 0.3s ease;
  font-size: 13px !important;
}
input:hover {
  border: 1px solid #0095d7;
  background: #fff;
  color: #0095d7;
}
textarea {
  border: 1px solid #c4c4c4;
  color: #000;
  transition: all 0.3s ease;
}
textarea:hover {
  border: 1px solid #0095d7;
  background: #fff;
  color: #0095d7;
}
::file-selector-button {
  min-width: 100px !important;
  height: 32px !important;
  line-height: 32px;
  margin: 0 4px;
  color: #404040;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  position: relative !important;
  display: inline-block !important;
  outline: none !important;
  border-radius: 0px !important;
  border: 0px solid #FAFAFA;
  background: #FAFAFA;
  /*text-transform: uppercase !important;*/
  font-size: 13px !important;
}
::file-selector-button:hover {
  /*
    background-color:#FF9900;
    font-size: bolder;
*/
  background: #EBEBEB;
}
::file-selector-button:active {
  background: #DCDCDC;

}
/*--------------------------------------------------------------------------------------------------------------*/
#titulo {
  height: 32px;
  background-color: #767676;
  color: #FFFFFF;
  font-weight: bold;
  font-size: 13px;
  text-align: left;
}
#tblDetalle {
  border-color: #c4c4c4; /*var(--colorPrincipal); */
  border-width: 1px;
  border-style: solid;
  background-color: #FFFFFF;
  border-radius: 5px;
  font-size: 13px;
}
#tblDetalle th, td {
  height: 32px;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 10px;
  padding-right: 10px;
}
.detalle {
  width: 100%;
  font-family: FuenteQlogistic;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  margin: 0 auto 0 auto;
  border-color: #c4c4c4; /*var(--colorPrincipal); */
  border-width: 1px;
  border-style: solid;
  border-spacing: 0;
}
.detalle th {
  background-color: #F4F4F4;
  color: #000;
  height: 30px;

}
.detalle td {
  background-color: #FFFFFF; /*#FFEDD1;*/
  height: 30px;
}
.detallePDF {
  min-width: 100%;
  max-width: 100%;
  font-family: FuenteQlogistic;
  font-size: 11px;
  font-style: normal;
  font-weight: normal;
  background-color: #b6c7d1; /*#F90;*/
  /*margin:0 auto 0 auto;*/
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
.detallePDF td {
  background-color: #e0eff9; /*#FFEDD1;*/
  word-wrap: break-word;
}
.detalle100 {
  font-family: FuenteQlogistic;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
  width: 100%;
  background-color: #000000; /*#B6C7D1;*/
  margin: 0 auto 0 auto;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
.detalle100 td {
  background-color: #e0eff9; /*#FFEDD1;*/
  text-decoration: none;
}
.detalle100_normal {
  color: #000;
  background-color: #b6c7d1;
  text-decoration: none;
}
.detalle100_azul {
  color: #fff;
  background-color: #006;
  text-decoration: none;
}
.detalle100_celeste {
  color: #fff;
  background-color: #09f;
  text-decoration: none;
}
.detalle100_azulclaro {
  color: #fff;
  background-color: #00f;
  text-decoration: none;
}
.ventana {
  width: 100%;
  background-color: #fff;
  border-color: #646464;
  border-width: 0px;
  border-style: solid;
  border-spacing: 1;
	/*
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
	*/
}
.tablaVentana {
  width: 100%;
  font-size: 12px;
}
.tablaVentana th {
  color: #fff;
  background-color: #646464;
}
#divGrafico {
  width: 700px;
  height: 450px;
  margin: 20 20 20 20;
  border: 1px solid #a4bed4;
  background-color: #fff;
}
.thumbnail {
  position: relative;
  z-index: 0;
  font: 12px verdana;
}
.thumbnail:hover {
  background-color: transparent;
  z-index: 500;
}
.thumbnail span {
  position: absolute;
  background-color: #eaeaea;
  padding: 5px;
  left: -1000px;
  border: 1px dashed #999;
  visibility: hidden;
  color: #c4c4c4;
  text-decoration: none;
}
.thumbnail span img {
  border-width: 0;
  padding: 2px;
}
.thumbnail:hover span {
  visibility: visible;
  top: -350;
  left: -550px;
}
#divSemVerde {
  /*	background-image:url(./imagenes/semaforo_1.png);*/
  font-family: FuenteQlogistic;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  height: 32px;
  width: 32px;
  text-align: center;
  vertical-align: central;
  position: relative;
  left: 35%;
}
#divSemVerde a {
  color: #000000;
  font-family: FuenteQlogistic;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}
#divSemAmarillo {
  /*	background-image:url(./imagenes/semaforo_2.png);*/
  font-family: FuenteQlogistic;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  height: 32px;
  width: 32px;
  text-align: center;
  vertical-align: central;
  position: relative;
  left: 35%;
}
#divSemAmarillo a {
  color: #000000;
  font-family: FuenteQlogistic;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}
#divSemRojo {
  /*	background-image:url(./imagenes/semaforo_3.png);*/
  font-family: FuenteQlogistic;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  height: 32px;
  width: 32px;
  text-align: center;
  vertical-align: central;
  position: relative;
  left: 35%;
}
#divSemRojo a {
  color: #000000;
  font-family: FuenteQlogistic;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}
#divSemGris {
  /*	background-image:url(./imagenes/semaforo_4.png);*/
  font-family: FuenteQlogistic;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  height: 32px;
  width: 32px;
  text-align: center;
  vertical-align: central;
  position: relative;
  left: 35%;
}
#divSemGris a {
  color: #000000;
  font-family: FuenteQlogistic;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  text-decoration: none;
}
input[disabled] {
  /*input[type="text"][disabled] {*/
  background-color: #ccc;
  color: #000000;
}
select[disabled] {
  /*input[type="text"][disabled] {*/
  background-color: #ccc;
  color: #000000;
}
textarea[disabled] {
  /*input[type="text"][disabled] {*/
  background-color: #ccc;
  color: #000000;
}
#enlaceBlanco {
  color: #ffffff;
  text-decoration: none;
  cursor: hand;
}
#enlaceNegro {
  color: #000000;
  font-size: 12px;
  text-decoration: none;
  cursor: hand;
}
.sombra {
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
#tablaMenu {
  width: 100%;
}
#tablaMenu tr {
  border-bottom-color: #666666;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}
#tablaMenu td {
  text-align: center;
  vertical-align: top;
  border-bottom-color: #cccccc;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}
#divCuerpoMenu {
  width: 96%;
  min-height: 350px;
  height: 800px;
  /*	background-color:#FFFFFF; /*#CCCCCC;*/
  position: relative;
  margin: 0 auto 0 auto;
  top: 140px;
  text-decoration: none;
  background: rgba(254, 254, 254, 1);
  background: -moz-linear-gradient(
    top,
    rgba(254, 254, 254, 1) 0%,
    rgba(209, 209, 209, 1) 49%,
    rgba(219, 219, 219, 1) 50%,
    rgba(226, 226, 226, 1) 100%
  );
  background: -webkit-gradient(
    left top,
    left bottom,
    color-stop(0%, rgba(254, 254, 254, 1)),
    color-stop(49%, rgba(209, 209, 209, 1)),
    color-stop(50%, rgba(219, 219, 219, 1)),
    color-stop(100%, rgba(226, 226, 226, 1))
  );
  background: -webkit-linear-gradient(
    top,
    rgba(254, 254, 254, 1) 0%,
    rgba(209, 209, 209, 1) 49%,
    rgba(219, 219, 219, 1) 50%,
    rgba(226, 226, 226, 1) 100%
  );
  background: -o-linear-gradient(
    top,
    rgba(254, 254, 254, 1) 0%,
    rgba(209, 209, 209, 1) 49%,
    rgba(219, 219, 219, 1) 50%,
    rgba(226, 226, 226, 1) 100%
  );
  background: -ms-linear-gradient(
    top,
    rgba(254, 254, 254, 1) 0%,
    rgba(209, 209, 209, 1) 49%,
    rgba(219, 219, 219, 1) 50%,
    rgba(226, 226, 226, 1) 100%
  );
  background: linear-gradient(
    to bottom,
    rgba(254, 254, 254, 1) 0%,
    rgba(209, 209, 209, 1) 49%,
    rgba(219, 219, 219, 1) 50%,
    rgba(226, 226, 226, 1) 100%
  );
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e2e2e2', GradientType=0 );
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
#divPieMenu {
  width: 100%;
  height: 32px;
  position: relative;
  top: 660;
  text-align: center;
}
.diaNormal {
  background-color: #ffffcc;
  font-family: FuenteQlogistic;
  font-size: 12px;
  color: #000000;
  cursor: hand;
}
.diaFeriado {
  background-color: #ff0000;
  color: #ffffff;
  font-family: FuenteQlogistic;
  font-size: 12px;
  cursor: hand;
}
.diaFeriadoEspecial {
  /*background-color:#FF0000;*/
  color: #ffffff;
  font-family: FuenteQlogistic;
  font-size: 12px;
  cursor: hand;
}
.diaEvento {
  background-color: #ffffaf;
  font-family: FuenteQlogistic;
  font-size: 12px;
  color: #000000;
}
.diaHoy {
  background-color: #fc3;
  color: #000;
}
.diaMesAnterior {
  background-color: #ccc;
  font-family: FuenteQlogistic;
  font-size: 12px;
  color: #000000;
}
.diaFeriadoGlobal {
  background-color: #333333;
  font-family: FuenteQlogistic;
  font-size: 12px;
  color: #ffffff;
}
#divMenu {
  width: 100%;
  display: inline-table;
  /*z-index:1;*/
}
#ls1 {
  width: 100%;
  display: inline-table;
  z-index: 1;
}
#ls2 {
  width: 30%;
  display: inline-table;
  z-index: 0;
}
.ui-dialog-osx {
  -moz-border-radius: 0 0 8px 8px;
  -webkit-border-radius: 0 0 8px 8px;
  border-radius: 0 0 8px 8px;
  border-width: 0 8px 8px 8px;
}
div.ui-tooltip {
  max-width: 600px;
  padding: 0;
  box-shadow: 5px 5px 5px #aaa;
  border-radius: 50px;
  border: 5px solid #444;
  width: 600px;
}
div.ui-tooltip-content {
  position: relative;
  padding: 20px;
}
div.ui-tooltip-content::after {
  position: absolute;
  border-style: solid;
  display: block;
  width: 0;
}
/*
.right .ui-tooltip-content::after { 
  top: 20px; 
  left: -15px;
}
.left .ui-tooltip-content::after { 
  top: 20px; 
  right: -15px;
}
.top .ui-tooltip-content::after { 
  bottom: -12px; left: 85px;
  border-color:blue transparent; 
  border-width: 12px 12px 0; 
}
.bottom .ui-tooltip-content::after { 
  top: -12px; 
  left: 85px;
  border-color: blue transparent; 
  border-width: 0 12px 12px; 
}*/

/*------------------------------------------------------------*/
/*-- PARA NUEVO HISTORIAL                                   --*/
/*------------------------------------------------------------*/
#divSeguimiento {
  float: left;
  width: 100%;
  overflow: hidden;
  height: 203px;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
}

#divSeguimiento .left-arrow {
  position: absolute;
  left: 10px;
  z-index: 1;
  top: 50%;
  margin-top: -9px;
}

#divSeguimiento .right-arrow {
  position: absolute;
  right: 10px;
  z-index: 1;
  top: 50%;
  margin-top: -9px;
}

.classSeguimiento {
  width: 2000px;
  left: 0px;
  position: absolute;
  z-index: 0;
}

.classSeguimiento > div {
  float: left;
  height: 200px;
  margin-right: 5px;
  width: 195px;
  text-align: center;
  border-radius: 15px;
}

.classSeguimiento img {
  cursor: pointer;
}

.classEtapa {
  border: #cccccc 1px solid;
}

.classEtapa img {
  width: 32px;
  height: 32px;
  text-align: center;
  margin-top: 10px;
  /*line-height: 1.5;*/
}

.classEtapa h1 {
  font-size: 10px;
  line-height: 1.0;
}

.classEtapa h2 {
  font-size: 10px;
  line-height: 0.5;
}

.classEtapa h3 {
  font-size: 9px;
  font-weight: bold;
  line-height: 0.5;
}

.classEtapa h5 {
  font-size: 9px;
  text-align: justify;
  padding-left: 5px;
  padding-right: 5px;
}

.classEtapa div {
  width: 95%;
  height: 40%;
  overflow: auto;
  font-size: 9px;
  text-align: justify;
  padding: 0 5 0 5;
}

.classEtapa hr {
  width: 70px;
  height: 2px;
  background-color: #ffffff;
  border-radius: 15px;
}

.classEtapaPasada {
  background-color: #8b8b8b;
}

.classEtapaActiva {
  background-color: #f37800;
}

.classEtapaRealizada {
  background-color: #00960c;
  color: #ffffff;
}

.classEtapaRechazadaEnTerreno {
  background-color: #f0ff00;
}

.classEtapaRechazada {
  background-color: #ff0000;
  color: #ffffff;
}

/*------------------------------------------------------------*/
/*------------------------------------------------------------*/

#divSeguimiento2 {
  float: left;
  width: 100%;
  overflow: hidden;
  height: 203px;
  position: relative;
  margin-top: 20px;
  margin-bottom: 20px;
  background-color: #ffffff;
  border-radius: 5px;
}

/*------------------------------------------------------------*/
.btn-whatsapp {
  display: block;
  width: 70px;
  height: 70px;
  color: #fff;
  position: fixed;
  right: 10%;
  bottom: 10%;
  border-radius: 50%;
  line-height: 80px;
  text-align: center;
  z-index: 999;
}

#barra_qa {
  text-align: center;
  vertical-align: middle !important;
  font-family: FuenteQlogistic;
  font-size: 31px;
  font-style: normal;
  font-weight: normal;
  color: #000;
  background: rgb(247, 227, 0, 0.8);/* rgb(249, 115, 42, 0.8); /*#FF0000;*/
  position: fixed; /*El div será ubicado con relación a la pantalla*/
  left: 40%; /*A la derecha deje un espacio de 0px*/
  right: 40%; /*A la izquierda deje un espacio de 0px*/
  bottom: 50px; /*Abajo deje un espacio de 0px*/
  width: 20%;
  height: 50px; /*alto del div*/
  z-index: 1000;
  border-radius: 10px;
  border: 2px solid rgb(0, 0, 0, 1);
  padding-top: 0px;
}

.cookies {
  width: 100%;
  height: 40px;
  bottom: 50px;
  left: 0px;
  background-color: #000000;
  vertical-align: middle;
  padding-top: 5px;
  padding-bottom: 5px;
  position: fixed;
  z-index: 1001;
}

.tbCookies {
  width: 100%;
  height: 100%;
  color: #ffffff;
  font-family: FuenteQlogistic;
  font-size: 18px;
  font-style: normal;
  font-weight: normal;
}

.imgPreview {
  border-radius: 10px;
  border: 1px #c4c4c4;
}

.divTrabajando {
	display:none;
	text-align:center;
	vertical-align: middle;
	position:absolute;
	top:50%;
	left:50%;
	width:300px;
	height:50px;
	margin-top:-25px;
	margin-left:-150px;
	z-index:99999;
	background-color: #FFFFFF;
	border: 2px solid var(--colorPrincipal);
}

.classColorPrincipal {
  background-color: var(--colorPrincipal);
  color: #ffffff;
}

.classBanner {
  width: auto;
  height: 64px;
  text-align: center;
  border: none;
}

.imgProducto {
  width: 32px;
  height: 32px;
  border-radius: 5px;
  border-color: #c8c8c8;
  border-width: 1px;
}

/* Add Fontawesome style */
/* -- Fontawesome -- */
/* ----------------- */

  /* custom styling for all icons */
  .fa-solid,
  .fa-brands,
  .fa-sharp-solid {
    /*
    background-color: papayawhip;
    border-radius: 0.2em;
    padding: 0.3em;
    */
    color: #F5772F !important;
   
  }

  /* custom styling for specific icons */
  /*
  .fa-fish {
    color: salmon;
  }

  .fa-frog {
    color: green;
  }

  .fa-user-ninja.vanished {
    opacity: 0.2;
  }

  .fa-facebook {
    color: rgb(59, 91, 152);
  }
  */

  .tituloBarraSecundaria {
    color: #F5772F /*#FFFF00*/;
  }
  .tituloBarraTercera {
    color: #FFCC00 /*#FFFF00*/;
  }
  /*-- LOADER --*/
.loader {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        position: relative;
        animation: rotate 1s linear infinite
      }
      .loader::before , .loader::after {
        content: "";
        box-sizing: border-box;
        position: absolute;
        inset: 0px;
        border-radius: 50%;
        border: 5px solid #FFF;
        animation: prixClipFix 2s linear infinite ;
      }
      .loader::after{
        inset: 8px;
        transform: rotate3d(90, 90, 0, 180deg );
        border-color: #FF3D00;
      }

      @keyframes rotate {
        0%   {transform: rotate(0deg)}
        100%   {transform: rotate(360deg)}
      }

      @keyframes prixClipFix {
          0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
          50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
          75%, 100%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      }
/* CH 29/04 WEB RESPONSIVE */

/* Laptop chica: 1025px ¡ú 1440px */
@media (min-width: 1025px) and (max-width: 1440px) {
  #divLogo img {
    height: 50px;
    width: auto;
    top: 15px;
  }

  #imgAvatar {
    margin-left: 68%;
  }

  #divMenu {
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* 1711px ¡ú 1920px */
@media (min-width: 1711px) and (max-width: 1920px) {
  #imgAvatar {
    margin-left: 75%;
  }

  #divLogo img {
    height: 54px;
    top: 15px;
  }
}

/* hasta 1710px */
@media (min-width: 1441px) and (max-width: 1710px) {
  #imgAvatar {
    margin-left: 65%;
  }

  #divMenu {
    overflow-x: auto;
    white-space: nowrap;
  }
}
/* Fix avatar entre tablet y laptop chica */
@media (min-width: 1024px) and (max-width: 1240px) {

  #divLogo {
    position: relative;
  }

  #imgAvatar {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 0 !important;
  }

}

/* TABLET: 768px ¡ú 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
  #divLogo img {
    height: 48px;
    width: auto;
    top: 15px;
  }

  #imgAvatar {
    margin-left: 40%;
  }

  #divMenu {
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* CH 29/04 MOBILE RESPONSIVE*/ 

/* Celular grande / mobile general: 429px a 767px */
@media (min-width: 429px) and (max-width: 767px) {
  #divLogo img {
    height: 42px !important;
    width: auto;
  }

  #divLogo img:first-child {
    margin-left: 45px;
  }

  #imgAvatar {
    margin-left: 18% !important;
    margin-top: 5px;
  }

  #logoMobile {
    display: block !important;
    /*height: auto !important;*/
    width: 300px !important;
  }
}

/* Celular mediano: 361px a 428px */
@media (min-width: 361px) and (max-width: 428px) {
  #divLogo img {
    height: 40px !important;
    width: auto;
    top: 25px;
  }

  #divLogo img:first-child {
    margin-left: 42px;
  }

  #imgAvatar {
    margin-left: 10% !important;
  }

  #logoMobile {
    display: block !important;
    /*height: auto !important;*/
    width: 250px !important;
  }
}

/* Celular chico: hasta 360px */
@media (max-width: 360px) {
  #divLogo img {
    height: 36px !important;
    width: auto;
    top: 25px;
  }

  #divLogo img:first-child {
    margin-left: 40px;
  }

  #imgAvatar {
    margin-left: 5% !important;
  }

  #logoMobile {
    display: block !important;
    /*height: auto !important;*/
    width: 230px !important;
  }
}

/*CH 29/04 MENU HAMBURGUESA*/ 
#btnMenuMobile {
  display: none !important;
}

@media (max-width: 1024px) {
  #lineaSuperior {
    height: 0 !important;
    min-height: 0 !important;
    background-color: transparent;
    position: relative;
    z-index: 10000;
  }

  #btnMenuMobile {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 42px !important;
    width: 42px !important;
    height: 40px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: #F5772F !important;
    font-size: 26px !important;
    z-index: 10002;
    position: absolute;
    top: 30px !important;
    left: 8px;
  }

  #menuHamburguesa {
    color: #ffffff !important;
  }

  #divMenu {
    display: block !important;
    position: fixed !important;
    top: 0;
    left: -280px;
    width: 250px !important;
    height: 100vh !important;
    background-color: #fff !important;
    z-index: 10001;
    overflow-y: auto;
    overflow-x: hidden;
    white-space: normal;
    transition: left 0.25s ease;
    box-shadow: 4px 0 12px rgba(0,0,0,0.05);
    padding-top: 50px;
  }

  #lineaSuperior.menu-abierto #divMenu {
    left: 0;
  }

  #divMenu .dhtmlxMenu_material_Middle,
  #divMenu .sub_item {
    width: 100% !important;
  }

  #divMenu .dhtmlxMenu_material_TopLevel_Item_Normal {
    display: block !important;
    float: none !important;
    width: 100% !important;
    height: 42px !important;
    line-height: 42px !important;
    clear: both !important;
  }

  #divMenu .top_level_text {
    display: block !important;
    padding-left: 14px !important;
    font-size: 15px !important;
  }
}

/*Esto es para el logo mobile*/
@media (max-width: 767px) {
  #divLogo {
    max-height: 90px !important;
    height: 90px !important;
    display: flex !important;
    /*align-items: center;*/
    justify-content: center;
    position: relative;
    top: 0;
  }

  /* oculta SOLO las imagenes existentes */
  #divLogo img:not(#logoMobile):not(#imgAvatar) {
    display: none !important;
  }

  /* muestra el logo mobile */
  /*#logoMobile {
    display: block !important;
    height: 70px !important;
    width: 300px !important;
  }*/

  /* boton hamburguesa */
  #btnMenuMobile {
    color: #ffffff !important;
    position: absolute;
    left: 10px;
    top: 55px;
    z-index: 10120;
  }

  /* avatar (no se toca estructura) */
  #imgAvatar {
    position: absolute;
    right: 10px;
    margin-left: 0 !important;
  }
}

/* SUBMENUS */
@media (max-width: 1024px) {
  .dhtmlxMenu_material_SubLevelArea_Polygon,
  .dhtmlxMenu_material_SubLevelArea {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 250px !important;
    height: 100vh !important;
    background: #fff !important;
    z-index: 10080 !important;
    box-shadow: 4px 0 12px rgba(0,0,0,0.05) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    transform: none !important;
    padding-top: 50px !important;
  }
}

@media (max-width: 767px) {
  .dhtmlxMenu_material_SubLevelArea_Polygon .sub_item,
  .dhtmlxMenu_material_SubLevelArea .sub_item {
    width: 100% !important;
    height: 42px !important;
    line-height: 42px !important;
    font-size: 15px !important;
    padding-left: 22px !important;
    box-sizing: border-box !important;
  }
}

/*sub-submenu */
@media (max-width: 1024px) {
  .dhtmlxMenu_material_SubLevelArea_Polygon[style*="display: block"],
  .dhtmlxMenu_material_SubLevelArea[style*="display: block"] {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 250px !important;
    height: 100vh !important;
    background: #fff !important;
    box-shadow: 4px 0 12px rgba(0,0,0,0.05) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-top: 50px !important;
    transform: none !important;
  }

  .dhtmlxMenu_material_SubLevelArea_Polygon .sub_item,
  .dhtmlxMenu_material_SubLevelArea .sub_item {
    display: block !important;
    width: 100% !important;
    min-height: 42px !important;
    line-height: 42px !important;
    box-sizing: border-box !important;
  }
}
/* CH 8/05 */ /*
@media (min-width: 1226px) {

    .dhtmlxMenu_material_SubLevelArea,
    .dhtmlxMenu_material_SubLevelArea_Polygon {
        display: none !important;
        visibility: hidden !important;
    }

    .dhtmlxMenu_material_SubLevelArea.dhtmlxMenu_material_SubLevelArea_Active,
    .dhtmlxMenu_material_SubLevelArea_Polygon.dhtmlxMenu_material_SubLevelArea_Active {
        display: block !important;
        visibility: visible !important;
    }

}*/
/* Esto es para tablet cuando se revise probeblemete deba cambiarse */
/*@media (min-width: 768px) {

    .dhtmlxMenu_material_SubLevelArea,
    .dhtmlxMenu_material_SubLevelArea_Polygon {
        display: none !important;
        visibility: hidden !important;
    }

    .dhtmlxMenu_material_SubLevelArea.dhtmlxMenu_material_SubLevelArea_Active,
    .dhtmlxMenu_material_SubLevelArea_Polygon.dhtmlxMenu_material_SubLevelArea_Active {
        display: block !important;
        visibility: visible !important;
    }

}*/