@import url(https://fonts.googleapis.com/css?family=Nunito);

* {
  font-family: 'Nunito Sans', sans-serif;
}

html, body {
          margin:0;
          background-color: #38393B;
      }
      

      .card{
          border:0;
          margin-top: 10px;
      }
      .card-header,.card-body{
          background-color: #EAEDF6;
      }

      .notificaciones{
          margin-top: 10px;
      }
      .boton-formulario{
          margin-top: 10px;
      }
      .label-m-top{
          margin-top: 10px;
      }
      .m-top-20{
          margin-top: 20px;
      }

      /*USUARIOS*/
      .imagen-usuario{
          align-content: center;
          border-radius: 10px;
          max-height: 250px;
          max-width: 250px;
      }

      .img-usuario{
          align-content: center;
          border-radius: 10px;
          width: 100%; /* Full width */
      }

      .img-usuario-container{
        position: relative;
        max-width: 400px; /* Maximum width */
        margin: 0 auto; /* Center it */
      }

      .img-usuario-texto{
         position: absolute; /* Position the background text */
        bottom: 0; /* At the bottom. Use top:0 to append it to the top */
        background: rgb(0, 0, 0); /* Fallback color */
        background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
        color: #f1f1f1; /* Grey text */
        width: 100%; /* Full width */
        padding: 20px; /* Some padding */
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }

      /*COLORES*/

      .imagen-colores{
          align-content: center;
          border-radius: 10px;
          width: 100%; /* Full width */
      }

      .img-colores-container{
        position: relative;
        max-width: 800px; /* Maximum width */
        margin: 0 auto; /* Center it */
      }

      .img-colores-texto{
         position: absolute; /* Position the background text */
        bottom: 0; /* At the bottom. Use top:0 to append it to the top */
        background: rgb(0, 0, 0); /* Fallback color */
        background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
        color: #f1f1f1; /* Grey text */
        width: 100%; /* Full width */
        padding: 20px; /* Some padding */
        border-bottom-right-radius: 10px;
        border-bottom-left-radius: 10px;
      }

      /*PRODUCTOS*/
      .imagen-producto{
          box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          align-content: center;
          border-radius: 5px;
          position: relative;
          display: block;
          width: 100%;
          height: auto;
          overflow: hidden;
          -webkit-backface-visibility: hidden;
      }

      img .imagen-producto-modal{
        max-height: 200px;
        width: 100%;
      }

      /* Galeria slide del inicio) */

      * {
        box-sizing: border-box;
      }

      /* Position the image container (needed to position the left and right arrows) */
      .container {
        position: relative;
      }

      .container-img{
          margin-top: 20px;
      }

      /* Hide the images by default */
      .mySlides {
        display: none;
      }

      /* Add a pointer when hovering over the thumbnail images */
      .cursor {
        cursor: pointer;
      }

      /* Next & previous buttons */
      .prev,
      .next {
        cursor: pointer;
        position: absolute;
        top: 40%;
        width: auto;
        padding: 16px;
        margin-top: -50px;
        color: white;
        font-weight: bold;
        font-size: 20px;
        border-radius: 0 3px 3px 0;
        user-select: none;
        -webkit-user-select: none;
      }

      /* Position the "next button" to the right */
      .next {
        right: 0;
        border-radius: 3px 0 0 3px;
      }

      /* On hover, add a black background color with a little bit see-through */
      .prev:hover,
      .next:hover {
        background-color: rgba(0, 0, 0, 0.8);
      }

      /* Number text (1/3 etc) */
      .numbertext {
        color: #f2f2f2;
        font-size: 12px;
        padding: 8px 12px;
        position: absolute;
        top: 0;
      }

      /* Container for image text */
      .caption-container {
        text-align: center;
        background-color: #222;
        padding: 2px 16px;
        color: white;
      }

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

      /* Six columns side by side */
      .column {
        float: left;
        width: 16.66%;
      }

      /* Add a transparency effect for thumnbail images */
      .demo {
        opacity: 0.6;
      }

      .active,
      .demo:hover {
        opacity: 1;
      }

      /* Oculto las flechas del input number*/
      input[type=number]::-webkit-inner-spin-button, 
      input[type=number]::-webkit-outer-spin-button { 
        -webkit-appearance: none; 
        margin: 0; 
      }
    input[type=number] { -moz-appearance:textfield; }

    .pagination {
      justify-content: center !important;
    }