@font-face{
  font-family:Fuente-BAHNSCHRIFT;
  src: url(Fuente-BAHNSCHRIFT/BAHNSCHRIFT.TTF);
}

@font-face{
  font-family:FF-Mark-Light;
  src: url(fuente-ff-mark/Mark-Book.ttf);
}

body{
  font-family: 'Fuente-BAHNSCHRIFT';
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Fuente-BAHNSCHRIFT';
    font-weight: bold;
    letter-spacing: 1px;
}

a{
  text-decoration: none;
  font-family: 'Fuente-BAHNSCHRIFT';
  letter-spacing: 1px;
}
span {
    font-family: 'Fuente-BAHNSCHRIFT';
    letter-spacing: 1px;
    font-size: 14px;
    line-height: 20px;
}

.shadow{
    -moz-box-shadow: 5px 5px 5px gray;
    -webkit-box-shadow: 5px 5px 5px gray;
    box-shadow: 5px 5px 5px gray; /* For IE 8 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#cccccc')"; /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Shadow(Strength = 4, Direction = 135, Color = '#cccccc');
}

.EtiquetaError{
  display:none;
  padding:5px;
  width:100%;
  background-color:orange;
  }

.DivOpcionesConfiguracion {
  border-radius: 25px;
  background:#024959;
  width: 200px;
  height: 50px;  
  float:left;
  margin:10px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
}

.DivInterior {
  position:absolute;
  text-align: center;
  width:100%;
  margin:0px;
  top:50%;
  transform: translateY(-50%);

}

.DivInterior span{
  font-size: 40px;
}

.DivOpcionesConfiguracion:hover{
  background:#037E8C;
  color:yellow;
}

@font-face {
    font-family: 'EscritaAMano';
    src: url('../fuentes/LucidaHandwritingItalic.ttf'); 
}

@font-face {
    font-family: 'EstiloPregunta';
    src: url('../fuentes/Comic.ttf'); 
}

label {
	font: 90%/1.4 Verdana, Arial, Helvetica, sans-serif;
}

input {
	font: 90%/1.4 Verdana, Arial, Helvetica, sans-serif;
	color:gray;
	opacy:1;
}

.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{
      color: gray;
      font-family: 'EstiloPregunta';
      font-size: 16px;
      font-weight: bold;
}

#DivOuterRespuestaPregunta {
    overflow-y:hidden;
    width:90%; 
   /* height:170px;*/
    margin:10px;
}
#DivInnerRespuestaPregunta {
    overflow: auto; 
    width:100%; 
    /*height:187px;*/
    padding:10px;
}

#DivOuterResultadoBusqueda {
    overflow-y:hidden;
    overflow-x:hidden;
    width:100%; 
   /* height:170px;*/
 
}
#DivInnerResultadoBusqueda {
    overflow-y: auto; 
    overflow-x: hidden; 
    width:100%; 
    /*height:187px;*/
    padding:10px;
}



#DivContenedorOuterListaDePreguntas {
    overflow-y:hidden;
    width:30%; 
    height:390px;

}
#DivContenedorInnerListaDePreguntas {
    overflow: auto; 
    width:100%; 
    height:397px;
    padding:10px;
    background-image: url("../imagenes/SeccionHojaCuaderno3.png");
    background-attachment:local;
    background-repeat: repeat-y;

}

#DivOuterRespuestaDeOtros {
    overflow-y:hidden;
    width:90%; 
    /*height:250px;*/
    margin:10px;
}
#DivInnerRespuestaDeOtros {
    overflow: auto; 
    width:100%; 
    /*height:267px;*/
    padding:10px;
}

#DivOuterContenidoQuienesSomos {
    overflow-y:hidden;
    width:100%; 
    height:350px;
    margin:10px;
}
#DivInnerContenidoQuienesSomos {
    overflow: auto; 
    width:100%; 
    height:367px;
    padding:10px;
}

#DivOuterContenidoTerminosYcondiciones {
    overflow-y:hidden;
    width:100%; 
    height:350px;
    margin:10px;
}
#DivInnerContenidoTerminosYcondiciones {
    overflow: auto; 
    width:100%; 
    height:367px;
    padding:10px;
}

#DivOuterContenidoTerminosYcondicionesPromotor {
    overflow-y:hidden;
    width:100%; 
    height:350px;
    margin:10px;
}
#DivInnerContenidoTerminosYcondicionesPromotor {
    overflow: auto; 
    width:100%; 
    height:367px;
    padding:10px;
}

#DivOuterContenidoQueEsUnPromotor {
    overflow-y:hidden;
    width:100%; 
    height:350px;
    margin:10px;
}
#DivInnerContenidoQueEsUnPromotor {
    overflow: auto; 
    width:100%; 
    height:367px;
    padding:10px;
}

#DivOuterContenidoAvisoPrivacidad {
    overflow-y:hidden;
    width:100%; 
    height:350px;
    margin:10px;
}
#DivInnerContenidoAvisoPrivacidad {
    overflow: auto; 
    width:100%; 
    height:367px;
    padding:10px;
}

footer {
  position: fixed;
  background-color: black;
  bottom: 0;
  width: 100%;
  height: 60px;
  color: white;
  vertical-align: middle;
  z-index: 2;
}

#DivFullScreenRespuestaDePregunta {
    position: fixed !important;
    min-width: 0px !important;
    max-width: none !important;
    min-height: 0px !important;
    max-height: none !important;
    width: 100% !important;
    height: 100% !important;
    left: 0px !important;
    top: 0px !important;
    transform: none !important;
    margin: 0px !important;
    padding: 0px !important;
    border-width: 0px !important;
    border-style: initial !important;
    border-color: initial !important;
    border-image: initial !important;
    z-index: 2147483647 !important;
  }

#DivControlesFullScreenRespuestaDePregunta {
    opacity: 0.0;
    transition: opacity 2s ease-out;
    -moz-transition: opacity 2s ease-out;
    -webkit-transition: opacity 2s ease-out;
    -o-transition: opacity 2s ease-out;
}

#DivControlesFullScreenRespuestaDePregunta:hover {
    opacity: 1;
}

.ui-state-highlight { height: 1.5em; line-height: 1.2em; background-color: red;}

.DivBotoneraHome
{
    text-align:center;
    float:left;
    cursor:pointer;
}

div.DivBotoneraHome:hover {
    background-color:orange;
}


.DivBorderHome
{
    border-radius: .5em;
    border: 2px solid #cccccc;

    -webkit-transition: border linear .2s, box-shadow linear .2s;
    -moz-transition: border linear .2s, box-shadow linear .2s;
    -o-transition: border linear .2s, box-shadow linear .2s;
    transition: border linear .2s, box-shadow linear .2s;
}

div.DivBorderHome:hover
{
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted \9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px     rgba(82,168,236,.6);
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
}

h1{color:#0C0C0C;}
h2{color:#0C0C0C;}
h3{color:#0C0C0C;}

.DivBotonesExterior {
  /*border-radius: 3px;
  background-image: linear-gradient(to bottom right, blue, lightblue);*/
  background-color: #0070C0;
  border: none;
  width: 35px;
  height: 35px;  
  color: #ffffff; /* Color de texto en contraste */
  /*padding: 10px 20px;*/
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  font-size: 150%;
  cursor: pointer;
}

.DivBotonesExterior:not(:disabled):hover{
  background-image: linear-gradient(to bottom right, orange, yellow);
  color:yellow;
}

.DivBotonesExterior:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:#0C0C0C;
}

.DivBotonesExteriorLargos {
  /*border-radius: 3px;
  background-image: linear-gradient(to bottom right, blue, lightblue);*/
  background-color: #0070C0;
  border: none;
  width: 200px;
  height: 35px;  
  float:left;
  margin-right:5px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
  font-size: 120%
}

.DivBotonesExteriorLargos:not(:disabled):hover{
  background-image: linear-gradient(to bottom right, orange, yellow);
  color:white;
}

.DivBotonesExteriorLargos:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:white;
}

.DivBotonesExcel {
  border-radius: 3px;
  background-image: linear-gradient(to bottom right, white, white);
  width: 35px;
  height: 35px;  
  float:left;
  margin-right:5px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:#107C41;
  font-size: 150%
}

.DivBotonesExcel:not(:disabled):hover{
  background-image: linear-gradient(to bottom right, #107C41,  #8EF0BA);
  color:yellow;
}

.DivBotonesExcel:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:#0C0C0C;
}

.DivBotonesNavegador {
  border-radius: 3px;
  background-image: linear-gradient(to bottom right, white, white);
  width: 25px;
  height: 25px;  
  float:left;
  margin-right:5px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:black;
  font-size: 100%
}

.DivBotonesNavegador:not(:disabled):hover{
  background-image: linear-gradient(to bottom right, black,  lightgray);
  color:white;
}

.DivBotonesNavegador:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:#0C0C0C;
}

#slider .ui-slider-range { background: #729fcf; }

.DivBotonesProbabilidadNula {
  border-radius: 3px;
  background-image: linear-gradient(to bottom right, white, black);
  
  width: 20px;
  height: 20px;  
  float:left;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
  font-size: 150%
}

.DivBotonesProbabilidadNula:not(:disabled):hover{
  background-image: linear-gradient(to bottom left, lightgray, black);
  color:yellow;
}

.DivBotonesProbabilidadNula:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:#0C0C0C;
}

.DivBotonesProbabilidadBaja {
  border-radius: 3px;
  background-image: linear-gradient(to bottom right, white, red);
  width: 20px;
  height: 20px;  
  float:left;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
  font-size: 150%
}

.DivBotonesProbabilidadBaja:not(:disabled):hover{
  background-image: linear-gradient(to bottom left, pink, red);
  color:yellow;
}

.DivBotonesProbabilidadBaja:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:#0C0C0C;
}

.DivBotonesProbabilidadMedia {
  border-radius: 3px;
  background-image: linear-gradient(to bottom right, white, orange);
  width: 20px;
  height: 20px;  
  float:left;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
  font-size: 150%
}

.DivBotonesProbabilidadMedia:not(:disabled):hover{
  background-image: linear-gradient(to bottom left, yellow, orange);
  color:yellow;
}

.DivBotonesProbabilidadMedia:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:#0C0C0C;
}


.DivBotonesProbabilidadAlta {
  border-radius: 3px;
  background-image: linear-gradient(to bottom right, white, green);
  width: 20px;
  height: 20px;  
  float:left;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
  font-size: 150%
}

.DivBotonesProbabilidadAlta:not(:disabled):hover{
  background-image: linear-gradient(to bottom left, lightgreen, green);
  color:yellow;
}

.DivBotonesProbabilidadAlta:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:#0C0C0C;
}

.DivBotonesProbabilidadYaAparecido {
  	 border-style: solid;
  	 border-color: blue;
  	 border-width: 3px;
}

.DivBotonesPremiadosAnteriormente {
  border-radius: 3px;
  background-image: linear-gradient(to bottom right, white, gray);
  width: 20px;
  height: 20px;  
  float:left;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
	font-size: 150%;
  border-style: solid;
	border-color: blue;
  border-width: 3px;
}

.DivBotonesPremiadosAnteriormente:not(:disabled):hover{
  background-image: linear-gradient(to bottom left, gray, white);
  color:yellow;
  border-style: solid;
	border-color: blue;
  border-width: 3px;
}

.DivBotonesProbabilidadMedia:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:#0C0C0C;
  border-style: solid;
	border-color: black;
  border-width: 3px;
}

.DivBotonesSeleccionadosSoloPorMi {
  border-radius: 3px;
  background-color: white;
  width: 20px;
  height: 20px;  
  float:left;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
	font-size: 150%;
  border-style: solid;
	border-color: green;
  border-width: 3px;
}

.DivBotonesSeleccionadosSoloPorMi:not(:disabled):hover{
  border-style: solid;
	border-color: lightgreen;
  border-width: 3px;
}

.DivBotonesSeleccionadosSoloPorMi:disabled{
  border-style: solid;
	border-color: black;
  border-width: 3px;
}

.DivBotonesSeleccionadosSoloPorAlguienMas {
  border-radius: 3px;
  background-color: white;
  width: 20px;
  height: 20px;  
  float:left;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
	font-size: 150%;
  border-style: solid;
	border-color: red;
  border-width: 3px;
}

.DivBotonesSeleccionadosSoloPorAlguienMas:not(:disabled):hover{
  border-style: solid;
	border-color: pink;
  border-width: 3px;
}

.DivBotonesSeleccionadosSoloPorAlguienMas:disabled{
  border-style: solid;
	border-color: black;
  border-width: 3px;
}

.DivBotonesSeleccionadosSoloPorMiYAlguienMas {
  border-radius: 3px;
  background-color: white;
  width: 20px;
  height: 20px;  
  float:left;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
	font-size: 150%;
  border-style: solid;
	border-color: orange;
  border-width: 3px;
}

.DivBotonesSeleccionadosSoloPorMiYAlguienMas:not(:disabled):hover{
  border-style: solid;
	border-color: yellow;
  border-width: 3px;
}

.DivBotonesSeleccionadosSoloPorMiYAlguienMas:disabled{
  border-style: solid;
	border-color: black;
  border-width: 3px;
}

.DivBotonesNoSeleccionados {
  border-radius: 3px;
  background-color: white;
  width: 20px;
  height: 20px;  
  float:left;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
	font-size: 150%;
  border-style: solid;
	border-color: gray;
  border-width: 1px;
}

.DivBotonesNoSeleccionados:not(:disabled):hover{
  border-style: solid;
	border-color: lightgray;
  border-width: 1px;
}

.DivBotonesNoSeleccionados:disabled{
  border-style: solid;
	border-color: gray;
  border-width: 1px;
}

.DivBotonesLargos {
  border-radius: 10px;
  background-image: linear-gradient(to bottom right, #024959, gray);
  width: 150px;
  height: 35px;  
  float:left;
  margin-right:5px;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
  font-size: 90%
}

.DivBotonesLargos:not(:disabled):hover{
  background-image: linear-gradient(to bottom right, white, gray);
  color:yellow;
}

.DivBotonesLargos:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:#0C0C0C;
}

.ElementoNoSeleccionable{

 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -o-user-select: none;
 -ms-user-select: none;
 user-select: none;

}

.DivelementoBusqueda {
  cursor:pointer;
  margin:2px; 
  width:20px;
  height:20px; 
  border: 2px solid gray;
  text-align: center; 
  color:gray;
  font-size:80%;
}

.DivelementoBusqueda:not(:disabled):hover{
  border-style: solid;
	border-color: orange;
  border-width: 3px;
  color:red;
}

.ImagenLocaliza {
        width: 40px;
        height: 40px;
        margin:3px;
        background: url("../imagenes/binoculars_32.png") no-repeat;
        background-color:lightgray;
        display: inline-block;
    }
    
.ImagenLocaliza:hover {
    background: url("../imagenes/binoculars_32_h.png") no-repeat;
    background-color:lightgray;
}

.ImagenLocaliza:disabled {
    background: url("../imagenes/binoculars_32_d.png") no-repeat;
}

.DivelementoGane {
  cursor:pointer;
  margin:2px; 
  width:20px;
  height:20px; 
  border: 2px solid gray;
  text-align: center; 
  color:gray;
  font-size:80%;
}

.DivelementoGane:not(:disabled):hover{
  border-style: solid;
	border-color: orange;
  border-width: 3px;
  color:red;
}

.DivelementoReduccion {
  cursor:pointer;
  margin:2px; 
  width:20px;
  height:20px; 
  border: 2px solid gray;
  text-align: center; 
  color:gray;
  font-size:80%;
}

.DivelementoReduccion:not(:disabled):hover{
  border-style: solid;
	border-color: orange;
  border-width: 3px;
  color:red;
}

.DivelementoResultado {
  cursor:pointer;
  margin:2px; 
  width:20px;
  height:20px; 
  border: 2px solid gray;
  text-align: center; 
  color:gray;
  font-size:80%;
}

.DivelementoResultado:not(:disabled):hover{
  border-style: solid;
	border-color: orange;
  border-width: 3px;
  color:red;
}

.DivelementoConfirmacion {
  cursor:pointer;
  margin:2px; 
  width:20px;
  height:20px; 
  border: 2px solid gray;
  text-align: center; 
  color:gray;
  font-size:80%;
}

.DivelementoConfirmacion:not(:disabled):hover{
  border-style: solid;
	border-color: orange;
  border-width: 3px;
  color:red;
}

.action-button-largo {
    width: 200px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

.action-button-largo:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

.action-button-mediano {
    width: 150px;
    background: #27AE60;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 10px 5px;
    margin: 10px 5px;
}

.action-button-mediano:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

.pull-right {
    @extend .float-right;
}
.pull-left {
    @extend .float-left;
}

.rdio {
  position: relative;
  input[type="radio"] {
    opacity: 0;
  }
  label {
    padding-left: 10px;
    cursor: pointer;
    margin-bottom: 7px !important;
    &:before {
      width: 18px;
      height: 18px;
      position: absolute;
      top: 1px;
      left: 0;
      content: '';
      display: inline-block;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      border: 1px solid gray;
      background: #fff;
    }
  }
  input[type="radio"] {
      margin:0px;
    &:disabled + label {
      color: #999;
      &:before {
        background-color: gray;
      }
    }
    &:checked + label::after {
      content: '';
      position: absolute;
      top: 5px;
      left: 4px;
      display: inline-block;
      font-size: 11px;
      width: 10px;
      height: 10px;
      background-color: gray;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
    }
  }
}

.rdio-default input[type="radio"]:checked + label:before {
  border-color: gray;
}

.rdio-primary input[type="radio"]:checked + label {
  &:before {
    border-color: gray;
  }
  &::after {
    background-color: gray;
  }
}

.radio {
  position: relative;
  input[type="radio"] {
    opacity: 0;
  }
  label {
    padding-left: 10px;
    cursor: pointer;
    margin-bottom: 7px !important;
    &:before {
      width: 18px;
      height: 18px;
      position: absolute;
      top: 1px;
      left: 0;
      content: '';
      display: inline-block;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
      border: 1px solid gray;
      background: #fff;
    }
  }
  input[type="radio"] {
      margin:0px;
    &:disabled + label {
      color: #999;
      &:before {
        background-color: gray;
      }
    }
    &:checked + label::after {
      content: '';
      position: absolute;
      top: 5px;
      left: 4px;
      display: inline-block;
      font-size: 11px;
      width: 10px;
      height: 10px;
      background-color: gray;
      -moz-border-radius: 50px;
      -webkit-border-radius: 50px;
      border-radius: 50px;
    }
  }
}

.radio-default input[type="radio"]:checked + label:before {
  border-color: gray;
}

.radio-primary input[type="radio"]:checked + label {
  &:before {
    border-color: gray;
  }
  &::after {
    background-color: gray;
  }
}

.ui-autocomplete
    {
        position:relative;
        cursor:default;
        z-index:9999 !important;
    }
    
.DivBotonesRedSocial {
  border-radius: 3px;
  border:0px;
  width: 23px;
  height: 23px;  
  background-color: #1877F2;
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  color:white;
  font-size: 70%;
  cursor: pointer;
  padding-top:2px;
  margin-top:5px;
  padding-left:4px;
  
}

.DivBotonesRedSocial:not(:disabled):hover{
  padding-top:0px;
}

.DivBotonesRedSocial:disabled{
  background-color: #0C0C0C;
  color:#0C0C0C;
}

.DivListaNegocios {
    width: 100%;
    color: #0C0C0C;
    /*border: 1px solid lightgray;*/
    border-radius: 5px;
    cursor: pointer;
    padding: 10px 10px;
    margin: 10px 5px;
    cursor:pointer;
    vertical-align: top;
}

.DivListaNegocios:hover, focus {
		border: 1px solid lightblue;
    box-shadow: 0 0 0 2px gray, 0 0 0 3px #27AE60;
}

.ClaseIconoSearch{
		cursor:pointer;
		font-size:140%;
		color:#0070C0;
}

.ClaseIconoSearch:hover, focus {
		font-size:150%;
}


.DivClaseIcono span{
  cursor:pointer;
  font-size:160%;
  color:#0070C0;
  padding:9px;
  float:left;
}

.DivClaseIcono:hover span{
    color:orange;
}

.DivClaseIconoDesabilitado span{
    cursor:default;
    color:silver;
    font-size:160%;
    padding:9px;
    float:left;
}

.DivClaseIconoDesabilitado:hover span{
    color:silver;
}


.ClaseIcono{
  cursor:pointer;
  font-size:160%;
  color:#0070C0;
}

.ClaseIcono:hover{
    color:orange;
}

.ClaseIcono:disabled {
    color:silver;
}

#ajaxOcupado{
	display:none;
	margin:0px;
	padding-left:0px;
	padding-right:0px;
	padding-top:0px;
	padding-bottom:0px;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-50px;
	margin-left:-50px;
	width:100px;
	height:100px;
}


.EnlaceBusquedaAlfabetica {
	cursor:pointer;
	margin:5px;
	font-size:80%;
	color:blue !important;;
  
}

.EnlaceBusquedaAlfabetica:not(:disabled):hover, focus{
  font-size:100%;
  color:orange !important;;
}

.DivBotonesExterior:disabled{
  font-size:80%;
	color:lightgray !important;;
}

.icono_youtube{
  -webkit-text-fill-color: black;
  /*-webkit-text-stroke: 1px white;*/
}

.icono_youtube:hover{
  -webkit-text-fill-color: red;
  /*-webkit-text-stroke: 1px white;*/
}

.btn_new_tutorial{
  background: #239BAA;
  color: #FFF;
  padding: 5px 25px;
  border-radius: 4px;
  margin: 20px;
  cursor: pointer;
  }

.btn_new_tutorial:hover{
  background: #239BAB;
  color: blue;
  padding: 7px 27px;
  border-radius: 4px;
  margin: 20px;
  cursor: pointer;
  }

.btn_new{
	display:inline-block;
	background: #239BAA;
	color: #FFF;
	padding: 5px 25px;
	border-radius: 4px;
	margin: 20px;
	}
	
.btn_new:disabled{
	background-color: silver;
	color: darkgray;
	}
	
.btn_new:disabled:hover{
	background-color: silver;
	color: darkgray;
	}

.btn_new_cancelar{
	display:inline-block;
	background: red;
	color: #FFF;
	padding: 5px 25px;
	border-radius: 4px;
	margin: 20px;
	}

.tableListados{
	border-collapse:collapse;
	font-size: 10pt;
	font-family:'FF-Mark-Light';
	width:100%;
}

.tableListados th{
	text-align:left;
	padding:10px;
	background: #3D7BA8;
	color: #FFF;
	text-align:center;
}

.tableListados  tr th { 
            position: sticky;
            top: 0;
            z-index: 10;
        }

.tableListados tr:nth-child(odd){
	background: lightgray;
}

.tableListados td{
	padding:10px;
	text-align:center;
	font-size:90%
}

#map-canvas-DomicilioNegocio {
	width: 100%;
	height: 300px;
	margin-bottom:20px;
}

#map-canvas-DetalleNegocio {
	width: 100%;
	height: 450px;
	margin-bottom:20px;
}

#map-canvas-DomicilioEditarPublicacion {
	width: 100%;
	height: 300px;
	margin-bottom:20px;
}

#map-canvas-Ubicacion-Publicacion {
  width: 100%;
  height: 400px;
  margin-bottom:20px;
}

#MapaMiUbicacionPublicacion{
  width: 100%;
  max-width: 400px;
  height: 400px;
  margin-bottom:20px;
}

.ClassDialogoConfirmacion{
	border:2px solid #239BAA;
	}

.ColorHeaderDialogo{	
	background: #239BAA;
}

#div-cookies {
    position: fixed;
    bottom: 60px;
    left: 0px;
    width: 100%;
    background-color: white;
    box-shadow: 0px -5px 15px gray;
    padding: 7px;
    text-align: center;
    z-index: 99;
    opacity:0.9;
}

.ClassBotonValidaExistenciaVigente{
    width: 200px;
    height: 30px;
    background: green;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 5px 5px;
    margin: 10px 5px; 
}

.ClassBotonValidaExistenciaVigente:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

.ClassBotonValidaExistenciaPorVencer{
    width: 200px;
    height: 30px;
    background: orange;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 5px 5px;
    margin: 10px 5px; 
}

.ClassBotonValidaExistenciaPorVencer:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

.ClassBotonValidaExistenciaVencido{
    width: 200px;
    height: 30px;
    background: red;
    font-weight: bold;
    color: white;
    border: 0 none;
    border-radius: 1px;
    cursor: pointer;
    padding: 5px 5px;
    margin: 10px 5px; 
}

.ClassBotonValidaExistenciaVencido:hover {
    box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

#DropAreaImagenJoin{
  width:300px;
  height:300px;
  padding:30px;
  background:#fff;
  text-align: center;
  border-radius: 20px;
}

#DropAreaImagenJoin.active{
  background-color: #b8d4fe;
  color:black;
  border: 2px dashed #618ac9;
}


#ImageViewerJoin{
  width:100%;
  height:100%;
  border-radius: 20px;
  border:2px dashed #bbb5ff;
  background: #f7f8ff;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

#ImageViewerJoin img{
  width:100px;
}

#ImageViewerJoin span{
  display:block;
  font-size:12px;
  color: #777;
  margin-top:15px;
}

#DropAreaVideoImagenPublicacion{
  width:300px;
  height:300px;
  padding:30px;
  background:#DAE3F3;
  text-align: center;
  border-radius: 20px;
}

#DropAreaVideoImagenPublicacion.active{
  background-color: #b8d4fe;
  color:black;
  border: 2px dashed #618ac9;
}


#VideoImagenViewerPublicacion{
  width:100%;
  height:100%;
  border-radius: 20px;
  border:2px dashed #bbb5ff;
  background: #f7f8ff;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:10px;
}

#VideoImagenViewerPublicacion img{
  width:100px;
}

#VideoImagenViewerPublicacion span{
  display:block;
  font-size:12px;
  color: #777;
  margin-top:15px;
}

#DropAreaImagenGrupo{
  width:300px;
  height:300px;
  padding:30px;
  background:#DAE3F3;
  text-align: center;
  border-radius: 20px;
}

#DropAreaImagenGrupo.active{
  background-color: #b8d4fe;
  color:black;
  border: 2px dashed #618ac9;
}


#ImagenViewerGrupo{
  width:100%;
  height:100%;
  border-radius: 20px;
  border:2px dashed #bbb5ff;
  background: #f7f8ff;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:10px;
}

#ImagenViewerGrupo img{
  width:100px;
}

#ImagenViewerGrupo span{
  display:block;
  font-size:12px;
  color: #777;
  margin-top:15px;
}

#GeneralEditarBanner h1{
  font-size:35px;
  display:inline-block;
}

#DivGeneralBanners h1{
  font-size:35px;
  display:inline-block;
}

.botonTextoBanner{
  display:inline-block;
  background: lightgray;
  color: black;
  padding: 7px 5px;
  border-radius: 4px;
  margin:10px;
  height: 30px;
  width: 30px;
  border: 1px solid silver;
  cursor: pointer;
  float: left;
  }

  .botonTextoBanner:disabled{
  background-color: gray;
  color: white;
  }

.activeButton, .botonTextoBanner:hover{
  background-color: #666;
  color: white;
}

.activeButton, .botonTextoBanner:hover span{
  color: white;
  padding: 7px 5px;
}

.activeButton, .botonTextoBanner span{
  color: white;
}

#SliderAnchoBannerEditarBanner .ui-slider-range { background: #729fcf; }
#SliderAltoBannerEditarBanner .ui-slider-range { background: #729fcf; }
#SliderOpacidadLetraTextoEditarBanner .ui-slider-range { background: #729fcf; }

#SliderInclinacionTextoEditarBanner .ui-slider-range { background: #729fcf; }
#SliderAlineacionHorizontalTextoEditarBanner .ui-slider-range { background: #729fcf; }
#SliderAlineacionVerticalTextoEditarBanner .ui-slider-range { background: #729fcf; }
#SliderTamanoLetraTextoEditarBanner .ui-slider-range { background: #729fcf; }

#SliderAnguloDegradadoEditarBanner .ui-slider-range { background: #729fcf; }

#SliderDuracionTextoEditarBanner .ui-slider-range { background: #729fcf; }

#SliderAnchoImagenTextoEditarBanner .ui-slider-range { background: #729fcf; }
#SliderAltoImagenTextoEditarBanner .ui-slider-range { background: #729fcf; }

#SliderDuracionEditarBanner .ui-slider-range { background: #729fcf; }

#ListaOrdenableBannermanagement{
  border: 1px solid silver;
  border-radius: 4px;
  min-height: 20px;
  list-style-type: none;
  margin: 10px;
  padding: 5px 0 0 0;
  width:90%;
  margin-right: 10px;
  max-height:300px;
  overflow-y:scroll;
}
#ListaOrdenableBannermanagement li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size:80%
}

.DivCatalogoEmociones{
  float:left;
  padding:10px;
  cursor:pointer;
  border-radius: 5px;
  margin:5px;
}

.DivCatalogoEmociones:hover{
  background-color: orange;
}

.DivCatalogoEmocionSeleccionada{
  float:left;
  padding:10px;
  cursor:pointer;
  border-radius: 5px;
  background-color: lightblue;
  margin:5px;
}


.BotonPublicacion {
  /*border-radius: 3px;
  background-image: linear-gradient(to bottom right, blue, lightblue);*/
  background-color: #0070C0;
  border: none;
  width: 35px;
  height: 35px;  
  color: #ffffff; /* Color de texto en contraste */
  /*padding: 10px 20px;*/
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  font-size: 150%;
  cursor: pointer;
}

.BotonPublicacion:hover{
  background-image: linear-gradient(to bottom right, orange, yellow);
  color:yellow;
}

.circle {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 100%; /* Esto crea la forma circular */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para ocultar cualquier parte de la imagen que se salga del círculo */
}

/* Estilos para la imagen */
.circle img {
  max-width: 130%;
  max-height: 130%;
  border-radius: 100%; /* Asegura que la imagen se ajuste al círculo */
}

.circleGrupo {
  width: 100px;
  height: 100px;
  background-color: #fff;
  border-radius: 100%; /* Esto crea la forma circular */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para ocultar cualquier parte de la imagen que se salga del círculo */
}

/* Estilos para la imagen */
.circleGrupo img {
  max-width: 100%;
  max-height: 100%;
  border-radius: 100%; /* Asegura que la imagen se ajuste al círculo */
}


.SmallCircle {
  width: 50px;
  height: 50px;
  background-color: #fff;
  border-radius: 100%; /* Esto crea la forma circular */
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* Para ocultar cualquier parte de la imagen que se salga del círculo */
}

/* Estilos para la imagen */
.SmallCircle img {
  max-width: 130%;
  max-height: 130%;
  border-radius: 100%; /* Asegura que la imagen se ajuste al círculo */
}


.botoneraPrincipal-container {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
  background-color: white;
  padding: 10px;
  padding-right: 20px;
}

.botonPrincipal {
  display: inline-block;
  height:30px;
  width:200px;
  margin: 0;
  background-color: white;
  color: gray;
  text-align: center;
  text-decoration: none;
  font-size: 80%;
  cursor: pointer;
  border: 1px solid gray;
  transition: background-color 0.3s, color 0.3s;
  position: relative; /* Agregado */
}

.botonPrincipal:hover {
      background-image: linear-gradient(to bottom right, orange, yellow);
      color: white;
    }

.botonPrincipal-selected {
  background-color: #45a049;
  color: white;
  z-index: 1; /* Agregado */
}


/*.slideshowVisualizadorImagenPublicacion {
    position: relative;
    margin: auto;
}*/

.slideshowVisualizadorImagenPublicacion {
      display: flex; /* Contenedor flexible para las imágenes */
      transition: transform 0.5s ease; /* Transición suave al cambiar la posición de las imágenes */
    }

 #slider-container {
      overflow: hidden;
      width: 600px; /* Ancho del contenedor del slider */
    }

.SlideVisualizador {
    display: block;
    position:relative;
}

.prevVisualizadorImagenPublicacion,
.nextVisualizadorImagenPublicacion {
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -22px;
    font-size: 20px;
    cursor: pointer;
}

.prevVisualizadorImagenPublicacion {
    left: 0;
}

.nextVisualizadorImagenPublicacion {
    right: 0;
}


.boton-mensajes {
    background-color: #0070C0;
    border: none;
    width: 35px;
    height: 35px;  
    color: #ffffff; /* Color de texto en contraste */
    /*padding: 10px 20px;*/
    position: relative;
    text-align: center;
    vertical-align: middle;
    cursor:pointer;
    font-size: 150%;
    cursor: pointer;
}

.boton-mensajes::after {
    content: attr(data-numero-mensajes);
    position: absolute;
    top: 0;
    right: 0;
    background-color: #e74c3c; /* Color de fondo del círculo rojo */
    color: yellow; /* Color del texto en el círculo */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

.boton-mensajes[data-numero-mensajes="0"]::after {
    display: none; /* Oculta el círculo cuando no hay mensajes */
}

.boton-mensajes:not(:disabled):hover{
  background-image: linear-gradient(to bottom right, orange, yellow);
  color:yellow;
}

.boton-mensajes:disabled{
  background-image: linear-gradient(to bottom right, gray, white, gray);
  color:#0C0C0C;
}

.DivBotonesComentario {
  background-color: none; /* Color de fondo del círculo rojo */
  border: none;
  width: 35px;
  height: 35px;  
  color: #0070C0; 
  position: relative;
  text-align: center;
  vertical-align: middle;
  cursor:pointer;
  font-size: 150%;
  cursor: pointer;
}

.square-button {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

/* Estilos para la imagen dentro del botón */
.square-button img {
  display: block;
  width: 100%;
  height: auto;
}

/* Estilos para la capa de superposición (hover effect) */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* Ajusta la opacidad según tu preferencia */
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Estilos para el texto dentro de la capa de superposición */
.overlay p {
  color: #fff;
  font-size: 16px;
  text-align: center;
}

/* Efecto de animación al pasar el ratón sobre el botón */
.square-button:hover .overlay {
  opacity: 1;
}