/* stylelint-disable keyframes-name-pattern */

/* ESTILO DE UBICACION */
.integra2_location1 {
  left: 0;
  bottom: 60px;
}

.integra2_location2 {
  left: 0;
  top: 60px;
}

.locationc1 {
  display: block;
  box-sizing: border-box;
  background: url("img/positiondownleft.svg") no-repeat;
  width: 40px;
  height: 40px;
}

.locationc2 {
  display: block;
  box-sizing: border-box;
  background: url("img/positionupleft.svg") no-repeat;
  width: 40px;
  height: 40px;
}

.bloque_hablando {
  outline: dashed 3px #cc0000 !important;
  background: #ff0000 !important;
  color: #000000 !important;
  transition-duration: 0.1s;
}

/* CONTRASTE */
.integra2-contrast-1 {
  background: #000000 !important;
}

.integra2-contrast-1,
.integra2-contrast-1-ff {
  filter: invert(100%);
}

.integra2-contrast-2,
.integra2-contrast-2 a,
.integra2-contrast-2 a:hover {
  background-color: #000000 !important;
}

.integra2-contrast-2 a {
  border-color: #ffffff !important;
  color: #fcff3c !important;
}

.integra2-contrast-2 abbr,
.integra2-contrast-2 article,
.integra2-contrast-2 aside,
.integra2-contrast-2 b,
.integra2-contrast-2 big,
.integra2-contrast-2 body,
.integra2-contrast-2 button,
.integra2-contrast-2 div,
.integra2-contrast-2 em,
.integra2-contrast-2 footer,
.integra2-contrast-2 form,
.integra2-contrast-2 h1,
.integra2-contrast-2 h2,
.integra2-contrast-2 h3,
.integra2-contrast-2 h4,
.integra2-contrast-2 h5,
.integra2-contrast-2 h6,
.integra2-contrast-2 header,
.integra2-contrast-2 i,
.integra2-contrast-2 input,
.integra2-contrast-2 label,
.integra2-contrast-2 li,
.integra2-contrast-2 main,
.integra2-contrast-2 nav,
.integra2-contrast-2 p,
.integra2-contrast-2 select,
.integra2-contrast-2 small,
.integra2-contrast-2 span,
.integra2-contrast-2 strong,
.integra2-contrast-2 td,
.integra2-contrast-2 textarea,
.integra2-contrast-2 th,
.integra2-contrast-2 ul {
  border-color: #ffffff !important;
  color: #50d0a0 !important;
}

.integra2-contrast-2 a:hover {
  color: #ffffff !important;
}

.integra2-contrast-3 {
  background-color: #ffffff !important;
}

.integra2-contrast-3 a {
  border-color: #000000 !important;
}

.integra2-contrast-3 abbr,
.integra2-contrast-3 article,
.integra2-contrast-3 aside,
.integra2-contrast-3 b,
.integra2-contrast-3 big,
.integra2-contrast-3 body,
.integra2-contrast-3 button,
.integra2-contrast-3 div,
.integra2-contrast-3 em,
.integra2-contrast-3 footer,
.integra2-contrast-3 form,
.integra2-contrast-3 h1,
.integra2-contrast-3 h2,
.integra2-contrast-3 h3,
.integra2-contrast-3 h4,
.integra2-contrast-3 h5,
.integra2-contrast-3 h6,
.integra2-contrast-3 header,
.integra2-contrast-3 i,
.integra2-contrast-3 input,
.integra2-contrast-3 label,
.integra2-contrast-3 li,
.integra2-contrast-3 main,
.integra2-contrast-3 nav,
.integra2-contrast-3 p,
.integra2-contrast-3 select,
.integra2-contrast-3 small,
.integra2-contrast-3 span,
.integra2-contrast-3 strong,
.integra2-contrast-3 td,
.integra2-contrast-3 textarea,
.integra2-contrast-3 th,
.integra2-contrast-3 ul {
  color: #000000 !important;
  border-color: #000000 !important;
}

.integra2-contrast-3 a:hover,
.integra2-contrast-3.integra2-contrast-3-3 [role="link"]:hover,
.integra2-contrast-3.integra2-contrast-3-3 a:hover {
  color: #000000 !important;
  background-color: #ffffff !important;
}

.integra2-contrast-3 a,
.integra2-contrast-3.integra2-contrast-3-3 [role="link"],
.integra2-contrast-3.integra2-contrast-3-3 [role="link"] *,
.integra2-contrast-3.integra2-contrast-3-3 a,
.integra2-contrast-3.integra2-contrast-3-3 a * {
  color: #0000d3 !important;
  background-color: #ffffff !important;
}

.integra2-contrast-4-black {
  background-color: #888888 !important;
  color: #ffffff !important;
}

.integra2-contrast-4-light {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.integra2-contrast-4 {
  filter: grayscale(100%) !important;
}

/* APAGA TRANSICIONES */
.apagatransition1 * {
  transition: none !important;
  animation: none !important;
}

/* BARRA DE LECTURA */
#readline {
  position: absolute;
  background: black;
  border-top: 4px solid yellow;
  border-bottom: 4px solid yellow;
  width: 100%;
  height: 10px;
  display: none;
  z-index: 20000000000 !important;
}

/* FOCUS */

.integra2_elfocus a:focus,
.integra2_elfocus input:focus,
.integra2_elfocus div:focus {
  outline: dashed 3px #cc0000 !important;
  background: #ffff00 !important;
  color: #000000 !important;
  transition-duration: 0.1s;
}

/* TAMAñO DE LETRA */
.integra2_size1 {
  font-size: 15px;
}

.integra2_size2 {
  font-size: 25px;
}

.integra2_size3 {
  font-size: 35px;
}

.integra2_size4 {
  font-size: 45px;
}

.integra2_size_step1 {
  margin: 30% 0%;
  position: absolute;
  background: #2196f3;
  width: 20%;
  height: 5px;
  bottom: -40px;
}

.integra2_size_step2 {
  margin: 30% 0%;
  position: absolute;
  background: #2196f3;
  width: 40%;
  height: 5px;
  bottom: -40px;
}

.integra2_size_step3 {
  margin: 30% 0%;
  position: absolute;
  background: #2196f3;
  width: 60%;
  height: 5px;
  bottom: -40px;
}

.integra2_size_step4 {
  margin: 30% 0%;
  position: absolute;
  background: #2196f3;
  width: 80%;
  height: 5px;
  bottom: -40px;
}

/* TEXTO LEGIBLE */
.integra2_legible1 {
  font-family: Arial, Helvetica, sans-serif;
}

/* ESPACIO DE CARACTERES */
.integra2_linespace1 {
  letter-spacing: 0;
}

.integra2_linespace2 {
  letter-spacing: 3px;
}

.integra2_linespace3 {
  letter-spacing: 5px;
}

.integra2_linespace4 {
  letter-spacing: 7px;
}

/* CAMBIO DE PUNTERO */
.integra2_pointer1 {
  cursor: url("img/pointer.png"), auto;
}

/* ILUMINA LINKS */
.integra2_linkcolor:link {
  background-color: black;
  color: yellow;
  padding: 0.5em 0.5em;
  text-decoration: none;

  /* text-transform: uppercase; */
  border-style: solid;
  border-color: yellow;
}

.integra2_linkcolor:visited {
  background-color: black;
  color: yellow;
  padding: 0.5em 0.5em;
  text-decoration: none;
  border-style: solid;
  border-color: yellow;
}

.integra2_linkcolor:hover {
  background-color: black;
  color: yellow;
  padding: 0.5em 0.5em;
  text-decoration: none;
  border-style: solid;
  border-color: yellow;
}

.integra2_linkcolor:active {
  background-color: black;
  color: yellow;
  padding: 0.5em 0.5em;
  text-decoration: none;
  border-style: solid;
  border-color: yellow;
}

/* FIN ILUMINA LINKS */

/* = = = = = = = = = INICIA CSS DE MODAL  = = = = = = = = =  */

/* ICONO DEL MODAL */
.fab {
  background: #003d68;
  width: 65px;
  height: 65px;
  border-radius: 0%;
  text-align: center;
  box-shadow: 0 0 3px rgb(0 0 0 / 50%), 3px 3px 3px rgb(0 0 0 / 25%);
  position: fixed;
  bottom: 60px;
  right: 0;
  display: inline-block;
  cursor: default;
  padding: 5px;
  z-index: 10000000000 !important;
}

.fab span {
  vertical-align: middle;
}

/* FONDO DEL MODAL */
.integra2_modale {
  font-family: Verdana, sans-serif;
  font-size: 12px;
  display: none;
  position: fixed;
  z-index: 999999999999;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  animation-name: fadeIn;
  animation-duration: 0.4s;
}

/* CONTENIDO DEL MODAL */
.integra2_modale-content {
  position: fixed;
  bottom: 0;
  right: 0;
  background-color: #fefefe;
  width: 300px;
  height: auto;
  animation-name: slideIn;
  animation-duration: 0.4s;
  border: solid #e3e6e9 1px;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 0 50px rgb(0 0 0 / 15%);
}

/* CIERRE DEL MODAL (BOTON) */
.integra2_close {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  font-size: 16px;
  float: right;
  color: white;
}

.integra2_close:hover,
.integra2_close:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}

.integra2_modale-header {
  font-family: Verdana, sans-serif;
  font-weight: bolder;
  font-size: 12px;
  text-align: left;
  padding: 5px;
  background-color: #003d68;
  color: white;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  height: 5%;
}

.integra2_modale-body {
  padding: 16px;
  height: 75%;
  overflow-y: auto;
}

.integra2_modale-footer {
  font-family: Verdana, sans-serif;
  font-weight: bolder;
  font-size: 10px;
  text-align: left;
  padding: 8px;
  background-color: #003d68;
  color: white;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  cursor: pointer;
}

/* ANIMACIóN */
@keyframes slideIn {
  from {
    bottom: -300px;
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    right: -300px;
    opacity: 0;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media only screen and (max-width: 1024px) {
  #pointerx {
    display: none;
  }

  #readlinex {
    display: none;
  }

  #focusx {
    display: none;
  }
}

/* INICIO RESPONSIVE */

/*
  error estilo invalido, creo que le falta un *
  {
    box-sizing: border-box;
  }
*/

/* SE CREAN COLUMNAS FLOTANTES */
.integra2_column {
  float: left;
  width: 50%;
  outline: 1px solid #e3e6e9;
}

.integra2_column_single {
  float: left;
  width: 100%;
  outline: 1px solid #e3e6e9;
}

.integra2_column_small {
  float: left;
  width: 50%;
  height: 20%;
  outline: 1px solid #e3e6e9;
}

.optioon_single {
  height: 40px;
  color: #3c4564;
  cursor: pointer;
  position: relative;
  display: flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-direction: column;
}

.optioon_small {
  height: 20px;
  color: #3c4564;
  cursor: pointer;
  position: relative;
  display: flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-direction: column;
}

.optioon {
  height: 80px;
  color: #3c4564;
  cursor: pointer;
  position: relative;
  display: flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  flex-direction: column;
}

.divhover:hover {
  background-color: #f7f8f9;
}

.div:focus {
  background-color: #ca4a1f;
}

.activatedcell {
  outline-color: #2196f3;
  outline-width: 1px;
}

.iconchecked {
  width: 10px;
  height: 10px;
  background: url("img/check.png");
}

.integra2_row::after {
  content: "";
  display: table;
  clear: both;
}

/* FONDO DEL MODAL DE LINKS */
.integra2_modale2 {
  font-family: Verdana, sans-serif;
  font-size: 12px;
  display: none;
  position: fixed;
  z-index: 999999999999;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  animation-name: fadeIn;
  animation-duration: 0.4s;
}

/* CONTENIDO DEL MODAL de LINKS */
.integra2_modale-content2 {
  position: fixed;
  float: left;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fefefe;
  width: 500px;
  height: 80%;
  animation-name: slideIn;
  animation-duration: 0.4s;
  border: solid #e3e6e9 1px;
  border-radius: 10px 10px 10px 10px;
  box-shadow: 0 0 50px rgb(0 0 0 / 15%);
  overflow-x: scroll;
}

/* CIERRE DEL MODAL (BOTON) DE LINKS */
.integra2_close2 {
  font-family: Verdana, sans-serif;
  font-weight: bold;
  font-size: 16px;
  margin-left: 80px;
  color: white;
}

.integra2_close2:hover,
.integra2_close2:focus {
  color: #000000;
  text-decoration: none;
  cursor: pointer;
}

.integra2_modale2-footer {
  font-family: Verdana, sans-serif;
  font-weight: bolder;
  font-size: 10px;
  text-align: left;
  padding: 8px;
  background-color: #003d68;
  color: white;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  cursor: pointer;
}

/* = = = = = = = = = FIN CSS DE MODAL  = = = = = = = = =  */

#integra2_myBtn {
  cursor: pointer;
}

#integra2_myBtn__img {
  content: url("img/wheel-chair.png");
  width: 50px;
  height: 50px;
  padding: 5px;
}

#focusx__img {
  content: url("img/2491699.svg");
  width: 40px;
  height: 40px;
}

#voice__img {
  content: url("img/1599620.svg");
  width: 40px;
  height: 40px;
}

#contrastview__img {
  content: url("img/1512808.svg");
  width: 40px;
  height: 40px;
}

#integra2_linkcolor__img {
  content: url("img/660666.svg");
  width: 40px;
  height: 40px;
}

#size__img {
  content: url("img/1512835.svg");
  width: 40px;
  height: 40px;
}

#letterspace__img {
  content: url("img/705218.svg");
  width: 40px;
  height: 40px;
}

#apagatransition__img {
  content: url("img/1512831.svg");
  width: 40px;
  height: 40px;
}

#legible__img {
  content: url("img/1095817.svg");
  width: 40px;
  height: 40px;
}

#pointerx__img {
  content: url("img/2491639.svg");
  width: 40px;
  height: 40px;
}

#readlinex__img {
  content: url("img/660512.svg");
  width: 40px;
  height: 40px;
}

#optioon__div {
  background-image: url("img/modallinks.svg");
  width: 40px;
  height: 40px;
}

#imgpos {
  background-image: url("img/positiondownright.svg");
  width: 40px;
  height: 40px;
}

#imgpos.imgpos--positiondownleft {
  background-image: url("img/positiondownleft.svg");
}

#resetb__img {
  content: url("img/777876.svg");
  width: 20px;
  height: 20px;
}

.integra2_modale-footer div,
.integra2_modale2-footer div {
  color: #ffffff;
  text-align: center;
}