:root{

  --colorPrincipal:    #317eaf; /* Rojo  */

  --colorSecundario:   #02404b; /* Azul Oscuro  */

  --colorTerciario:    #85bbc5;  /* Azul Claro  */

  --colorCuarternario: #90b9c3;

  --colorGris:         #08838a; /* Azul Gris  */

}


/* Css Color */

.colorPrincipal{

  color: var(--colorPrincipal) !important;
}


.colorSecundario{

  color: var(--colorSecundario) !important;
}



.colorTerciario{

  color:var(--colorTerciario) !important;
}


.colorCuarternario{

  color:var(--colorCuarternario) !important;
}

.colorGris{

  color:var(--colorGris) !important;
}


.backColorTerciario{

background-color:var(--colorTerciario) !important;
border-color: var(--colorTerciario)!important; 

}

.backColorSecundario{

background-color: var(--colorSecundario) !important;

}

.backColor{

background-color: var(--colorPrincipal) !important;

}




/* Colores Boton Info */

 .tooltip .arrow:before {
    border-top-color: var(--colorPrincipal) !important;
}

.tooltip .tooltip-inner {
    background-color: var(--colorPrincipal) ;
}




.arrow{
  font-size:30px;
  color:  var(--colorSecundario) !important;
}

.arrow1{
  font-size:30px;
  color:  var(--colorPrincipal) !important;
}


.anchoPantalla{

  width: 80% !important;
}


@media (max-width: 576px) {
  .anchoPantalla {

   width: 100% !important;
}
}



.botonSecundario{

  color: #fff !important;
  background-color: var(--colorSecundario) !important;
  border-color: var(--colorSecundario) !important;

}



.botonSecundario:hover{

  transform: translate3d(0,10px, 0);

}


.botonTerciario{

  color: #fff !important;
  background-color: var(--colorTerciario) !important;
  border-color: var(--colorTerciario) !important;

}


.botonTerciario:hover{

  transform: translate3d(0,10px, 0);

}

.btn-info:hover{

  transform: translate3d(0,10px, 0);

}

.iconoDenuncias{ 

    background:#17a2b8 !important;  
    font-size: 8px;
    padding: 12px;
    border-radius: 50%;
    color: white !important;
}


.iconoDenuncias:hover{ 

  transform: translate3d(0,10px, 0);
}



.cantidadImagenes{

  color:white;
  bottom: 0;
  position:absolute;
  left:3%;
  z-index:10;
}


.misFavoritos{

  color:white !important;
  bottom: 0;
  position:absolute;
  right: 2%;
  font-size: 24px;
  z-index:10;
}

.misFavoritos:hover{

transform: translate3d(0,8px, 0);;
}

.botonImagenTemp{

    background: var(--colorTerciario);
    font-size: 14px;
    padding: 4px;
    position: absolute;
    color: white !important;
}



.borderEditar{

     border: 8px solid #f9f2f0 !important; 
}





/* Select Anuncios Categorías */


.btn-light:hover{
    color: var(--colorSecundario) !important;
    background-color: #f6fbff !important;
    border-color: var(--colorGris)  !important;
  }

.btn-light{
    color: var(--colorGris)  !important;
    background-color: #fff !important;
    border-color: var(--colorGris)  !important;
  }

.dropdown-item.active, .dropdown-item:active {
background-color: #F1928B !important;
}



/* Pagina de Enlaces */

.tamanoCaja{

  height: 150px;
}

.fuenteLogo{

  width: 60px;
  max-height: 60px;

}



.tituloEnlace{

  font-size: 16px; 
  letter-spacing: 1px;
  color: white;  
}








/* Boton Subir fichero */

.btn-file {
  position: relative;
  overflow: hidden;
}
.btn-file input[type=file] {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 100%;
  min-height: 100%;
  font-size: 100px;
  text-align: right;
  filter: alpha(opacity=0);
  opacity: 0;
  outline: none;
  background: white;
  cursor: inherit;
  display: block;
}


.bordesMenuLateralT{

  border-top: 1px solid var(--colorTerciario);

}


.bordesMenuLateralB{

  border-bottom: 1px solid var(--colorTerciario);

}




/* Login Acceso Admin */


  .form-signin {
    max-width: 400px;
    padding: 15px;
    margin: 0 auto;
  }
  .form-signin .form-signin-heading,
  .form-signin .checkbox {
    margin-bottom: 10px;
  }
  
  .form-signin-heading-color{
  color: #148d96;
  text-align: center;
  }
  
  .form-signin .checkbox {
    font-weight: normal;
  }
  .form-signin .form-control {
    position: relative;
    font-size: 16px;
    height: auto;
    padding: 10px;
    -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
        box-sizing: border-box;
  }
  .form-signin .form-control:focus {
    z-index: 2;
  }
  .form-signin input[type="text"] {
    margin-bottom: -1px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
  .form-signin input[type="password"] {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
  }




/* ANUNCIOS */


.circuloMenuAnuncios {
    border-radius: 50% !important;
    border: solid;
    padding: 8px;
    border: 1px solid var(--colorSecundario);
    color: var(--colorSecundario) !important;
}

.tituloBuscarAnuncio{
color: var(--colorSecundario) !important;

}

.tituloBuscarAnuncio:hover{
color: var(--colorTerciario) !important;

}


.resultadoBusqueda{

    background: white;
    color: var(--colorPrincipal);
    padding: 10px;
    font-size: 20px;
}




.tituloCategoriaAnuncio{

    color: #fdfdfd;
    letter-spacing: 4px;
    background: var(--colorTerciario);
    padding: 10px;
    font-weight: 400;

}

.tituloAnuncio{

    color:  var(--colorGris);
    letter-spacing: 1px;
    font-weight: 500;
    font-family: Roboto;

}

.fechaAnuncio{
    color:  var(--colorGris);
    font-size: 14px;
}



    /* Menu Categorias  */

.noactiveCategoria{
  margin-left: -300px;
}


/* CheckBox  Categorias */

.check{

height: 16px; 
width:20px;
margin-right: 6px;
margin-top: 10px;

}



.recortaTextoAnuncio{
     display: -webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient: vertical;
     overflow: hidden;
     margin: 10px;
     font-family: 'Roboto';
     font-weight: 300;
     line-height: 28px;
}









/* Botón Scroll */

 a.scroll-top {
    color: #fff;
    display: none;
    width: 30px;
    height: 30px;
    position: fixed;
    z-index: 1000;
    bottom: 50px;
    right: 30px;
    font-size: 20px;
    background: var(--colorSecundario);
    border-radius: 20px !important;
    text-align: center;
    border: 1px solid hsla(0, 0%, 78%, 0.3)
}

a.scroll-top i {
    position: relative;

}




/* Formulario Login */



.espacioForm{

   padding-left: 50px!important; 
  }




  .iconoForm{
    
   position: absolute; 
   padding: 10px;  
   pointer-events: none;

  }


/* Botones barra Idiomas*/

.selectIdioma{

float: right !important;
font-size: 12px;
margin-top: 12px;
color: white;

}



.selectIdioma:hover{

color: #fff;
font-size: 16px;

}

.circuloMenu {
 /*   border-radius: 50% !important;
    border: solid;
    padding: 0px;
    border: 1px solid var(--colorSecundario); */
    height: 90px;
    width: 90px;
}



/* Oculta el titulo de la barra de menu */


@media (max-width: 780px) {
.ocultar{
  visibility: hidden;
}
}


.noactive{
  margin-left: -300px;
}


/* Boton ADJUNTO  */


.aBotonAdjunto{

background: #EB5C52; 
font-size: 20px; 
padding: 5px; 
border-radius: 50%; 
float: right;  
}

.aBotonAdjunto:hover{
    background-color: #F1928B  !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
    transform: translate(0%, 10%) rotate(90deg) ;

}


.aBotonAdjuntoAnuncio{

background: #EB5C52; 
font-size: 20px; 
padding: 5px; 
border-radius: 50%; 
 
}

.aBotonAdjuntoAnuncio:hover{
    background-color: #F1928B  !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
    transform: translate(0%, 10%) rotate(90deg) ;

}




.iBotonAdjunto{
color: white; 
margin-left: 2px;
}


.iBotonAdjunto:hover{
color: var(--colorSecundario);
margin-left: 2px;
}



/* Boton + INFO  */


.aBotonInfo{

  background: var(--colorTerciario);
  font-size: 16px;
  padding: 10px;
  border-radius: 50%;

}

.aBotonInfo:hover{
    background-color: var(--colorCuarternario)  !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
    transform: translate(0%, 10%) rotate(90deg) ;

}

.iBotonInfo{
color: white;
margin-top: 30px;

}


.iBotonInfo:hover{
color: var(--colorSecundario);
margin-left: 2px;
}




/* Tamaño imagenes */

.imgTamano{

 margin-top: 14px;
 max-height: 350px;

}



@media (max-width: 576px) {
  .imgTamano {
 margin-top: 14px;
 max-height: 250px;
}
}

/* Css Body  */

.bodyEstilo{

font-family: Roboto; 
background-color: #f9f2f0
}



.recortaTexto{
     display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
     overflow: hidden;
     margin: 10px;
     font-family: 'Roboto';
     font-weight: 300;
     line-height: 28px;
}



/* Titulo Cliente para el formato indexWeb*/

.tituloWeb{

    text-align: center;
    background-color: var(--colorPrincipal);
    color: white;
    margin: 20px;
    padding: 14px;
    font-size: 30px;
    font-weight: 300;
    letter-spacing: 3pt;
}



@media (max-width: 576px) {
  .tituloWeb {
       font-size: 18px;
}
}


@media (max-width: 576px) {
  .hamburguesa {
       font-size: 22px;
}
}


/* CSS BOTONES */







/* Efecto animación Botones */

.btn-raised {
    transition: box-shadow .4s cubic-bezier(.25, .8, .25, 1), transform .4s cubic-bezier(.25, .8, .25, 1);
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, .26);

}



.btn-raised:not([disabled]):active,
.btn-raised:not([disabled]):focus,
.btn-raised:not([disabled]):hover {
    background-color: #d18b49 !important;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .4);
    transform: translate3d(0, 0, 0)
}







/* MENU */


.cerrarMenu{

    color: var(--colorSecundario);
    font-size: 24px;
}


  a {
      color: #007bff;
      text-decoration: none;
      background-color: transparent; }
      a:hover {
        color: #0056b3;
        text-decoration: none !important; }


    a {
      -webkit-transition: .3s all ease;
      -o-transition: .3s all ease;
      transition: .3s all ease;
      color: #3445b4; }

      a:hover, a:focus {
        /* text-decoration: none !important; */
        outline: none !important;
        -webkit-box-shadow: none;
        box-shadow: none;
        }




    .wrapper {
      width: 100%; }

    #sidebar {
      min-width: 300px;
      max-width: 300px;
      background: #ffffff;
      color: #fff;
      -webkit-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      height: 100%;
      position: fixed;
      overflow-x: hidden;
      z-index: 1;}

      #sidebar .h6 {
        color: #fff; }

      #sidebar.active {
        margin-left: 0px; }



      #sidebar h1 {
        margin-bottom: 20px;
        font-weight: 700;
        font-size: 30px; }

      #sidebar h1 .logo {
          color: #fff; }
          #sidebar h1 .logo span {
            font-size: 14px;
            color: #44bef1;
            display: block; }
      #sidebar ul.components {
        padding: 0; }

      #sidebar ul li {
        font-size: 16px; }

        #sidebar ul li > ul {
          margin-left: 10px; }

          #sidebar ul li > ul li {
            font-size: 14px; }

        #sidebar ul li a {
          padding: 10px 0;
          display: block;
          color: var(--colorSecundario);
        }

          #sidebar ul li a span {
            color: var(--colorSecundario) !important;
            padding-left: 10px; }



          #sidebar span:hover {
            color: #var(--colorTerciario);
            padding-left: 10px; }


          #sidebar ul li a:hover {
            color: var(--colorTerciario) ; 

           }

        #sidebar ul li.active > a {
          background: transparent;
          color: var(--colorSecundario); }

      @media (max-width: 991.98px) {
        #sidebar {
          margin-left: -300px; }
          #sidebar.active {
            margin-left: 0; } }

      #sidebar .custom-menu {
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 0;
        margin-right: -20px;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s; }

    @media (prefers-reduced-motion: reduce) {
      #sidebar .custom-menu {
        -webkit-transition: none;
        -o-transition: none;
        transition: none; } }

    #sidebar .custom-menu .btn {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      position: relative; }

      #sidebar .custom-menu .btn i {
        margin-right: -40px;
        font-size: 14px; }

      #sidebar .custom-menu .btn.btn-primary {
        background: transparent;
        border-color: transparent; }
        
        #sidebar .custom-menu .btn.btn-primary:after {
          z-index: -1;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          content: '';
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          background: #3445b4;
          border-radius: 10px; }

   
     #sidebar .custom-menu .btn.btn-primary:hover, #sidebar .custom-menu .btn.btn-primary:focus {
       background: transparent !important;
       border-color: transparent !important; }

     a[data-toggle="collapse"] {
      position: relative; }



        @media (max-width: 991.98px) {
          #sidebarCollapse span {
            display: none; } }

        #content {
          width: 100%;
          padding: 0;
          /*min-height: 100vh;*/
          -webkit-transition: all 0.3s;
          -o-transition: all 0.3s;
          transition: all 0.3s; }





    #sidebarCategoria {
      min-width: 300px;
      max-width: 300px;
      background: #ffffff;
      color: #fff;
      -webkit-transition: all 0.3s;
      -o-transition: all 0.3s;
      transition: all 0.3s;
      height: 100%;
      position: fixed;
      overflow-x: hidden;
      z-index: 2;}

      #sidebarCategoria .h6 {
        color: #fff; }

      #sidebarCategoria.activeCategoria {
        margin-left: 0px; }



      #sidebarCategoria h1 {
        margin-bottom: 20px;
        font-weight: 700;
        font-size: 30px; }

      #sidebarCategoria h1 .logo {
          color: #fff; }
          #sidebarCategoria h1 .logo span {
            font-size: 14px;
            color: #44bef1;
            display: block; }
      #sidebarCategoria ul.components {
        padding: 0; }

      #sidebarCategoria ul li {
        font-size: 16px; }

        #sidebarCategoria ul li > ul {
          margin-left: 10px; }

          #sidebarCategoria ul li > ul li {
            font-size: 14px; }

        #sidebarCategoria ul li a {
          padding: 10px 0;
          display: block;
          color: rgb(8 131 138);
          border-bottom: 1px solid #var(--colorTerciario) ;
          -webkit-box-shadow: 0 0 0 0 rgb(255 255 255 );
        }

          #sidebarCategoria ul li a span {
            color: var(--colorSecundario) ;
            padding-left: 10px; }



          #sidebarCategoria span:hover {
            color: var(--colorTerciario);
            padding-left: 10px; }


          #sidebarCategoria ul li a:hover {
            color: var(--colorTerciario);
            /* box-shadow: 0 4px 8px 0 rgb(0 0 0 / 40%);*/
           }

        #sidebarCategoria ul li.activeCategoria > a {
          background: transparent;
          color: var(--colorSecundario); }

      @media (max-width: 991.98px) {
        #sidebarCategoria {
          margin-left: -300px; }
          #sidebarCategoria.activeCategoria {
            margin-left: 0; } }

      #sidebarCategoria .custom-menu {
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 0;
        margin-right: -20px;
        -webkit-transition: 0.3s;
        -o-transition: 0.3s;
        transition: 0.3s; }

    @media (prefers-reduced-motion: reduce) {
      #sidebarCategoria .custom-menu {
        -webkit-transition: none;
        -o-transition: none;
        transition: none; } }

    #sidebarCategoria .custom-menu .btn {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      position: relative; }

      #sidebarCategoria .custom-menu .btn i {
        margin-right: -40px;
        font-size: 14px; }

      #sidebarCategoria .custom-menu .btn.btn-primary {
        background: transparent;
        border-color: transparent; }
        
        #sidebarCategoria .custom-menu .btn.btn-primary:after {
          z-index: -1;
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          content: '';
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
          background: #3445b4;
          border-radius: 10px; }

   
     #sidebarCategoria .custom-menu .btn.btn-primary:hover, #sidebarCategoria .custom-menu .btn.btn-primary:focus {
       background: transparent !important;
       border-color: transparent !important; }

     a[data-toggle="collapse"] {
      position: relative; }



        @media (max-width: 991.98px) {
          #sidebarCategoriaCollapse span {
            display: none; } }




      /*  AREA PRIVADA */



  .textoTabla{

    font-size: 19px;
    font-family: Roboto;
    font-weight: 400 !important;
    color: white;
    text-align: center;
  }

  .labelPerfil{

    color:  var(--colorSecundario);
    font-size: 19px;

  }

  .modalDescripcionTitulo{

    font-size:24px;
    color:var(--colorPrincipal);
    display:flex; 
    justify-content:center


  }

    .modalDescripcionTexto{

    color:var(--colorSecundario);
    margin: 5px;
    font-size: 16px;


  }



  /* PRIVADO  */

  .textoMenu{

    font-size: 20px; 
    color:#fff;
  }

    .textoMenu:hover{

    font-size: 16px; 
    color:white;
    text-decoration: none !important;
    

  }