/* latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url(/dist/fonts/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

BODY {
    font-family: 'Roboto';
}

input[type=text]:read-only, input[type=number]:read-only {
    background: #eeeeee;
    color: #b0b0b0 !important;
}

.bg-primary {
    background-color: #2B89C7 !important;
}

.bg-primary-light  {
    background-color:#4aa1ff !important;
}

.bg-primary-lighter  {
    background-color:#6eb4ff !important;
}


.bg-info-light  {
    background-color:#c7d6d9 !important;
}

.bg-success-light {
    background-color: rgb(174, 255, 228) !important;
}
.bg-danger-light {
    background-color:rgb(255, 212, 230)  !important;
}




.text-primary {
    color: #2B89C7 !important;
    font-weight: 800 !important;
}


.text-secondary-dark {
    color: #51585C !important;
    font-weight: 500 !important;
}

.text-info-dark {
    color: #0c5a66 !important;
    font-weight: 500 !important;
}

.text-warning-light {
    color: #F8DF8B !important;
    font-weight: 500 !important;
}
.text-info-light {
    color: #b2d0d4 !important;
    font-weight: 500 !important;
}




.border-info {
    border-color: #b6cfd4 !important;
}

.border-primary {
    border-color: #2B89C7 !important;
}

.border-primary-light {
    border-color: #b2d0d4 !important;
}



.btn {
    border-radius: 15px 15px 15px 15px !important;
}

.btn-primary {
    background-color: #2B89C7 !important;
    border-color: #2B89C7 !important;
}


.opacity-0 {
    opacity:0!important;
  }
  .opacity-1 {
    opacity:0.2!important;
  }
  .opacity-2 {
    opacity:0.4!important;
  }
  .opacity-3 {
    opacity:0.6!important;
  }
  .opacity-4 {
    opacity:.8!important;
  }
  .opacity-5 {
    opacity:1!important;
  }
  



@media (min-width: 768px)
{

    .page-link {
        font-size: 18px !important;
        padding: 7px !important;
        margin: 4px;
    }

    .height-xs {
        height: 30px;
    }

    .height-sm {
        height: 40px;
    }

    .height-md {
        height: 60px;
    }

    .height-lg {
        height: 100px;
    }

    .height-xl {
        height: 150px;
    }


    .navbar-brand IMG {  width: auto; }
    
    H1 { font-size: 28px; }
    H2 { font-size: 26px; }
    H3 { font-size: 24px; }

    .ficha-producto .features {
        height: 4.5em;
    }

    .ficha-producto .icono {
        width: 3.5em;
        height: 3.5em;
    }

    .ficha-producto .titulo {
        height: 1.4em;
        font-size: 28px;
    }

    .ficha-producto .empresa {
        height: 1.5em;
        font-size: 17px;
        font-style: italic;
    }


    .ficha-producto .descripcion {
        font-size: 20px;
        line-height: 22px; 
        height: 4em;
    }

    .ficha-producto .feature-badge {
        min-width: 18em;
        height: 3.8em;
        margin-right: 5px;
    }


    .ficha-producto .feature-badge .name {
        white-space: nowrap !important;
        height: 1.6em;
        margin-bottom: 2px;
    }

    .ficha-producto .feature-badge .value {
        min-width: 12em;
        height: 1.7em;
        margin-bottom: 2px;
    }

}


@media (min-width: 411px) and (max-width: 767px)
{

    .page-link {
        font-size: 15px !important;
        padding: 6px !important;
        margin: 4px;
    }

    .height-xs {
        height: 30px;
    }

    .height-sm {
        height: 40px;
    }

    .height-md {
        height: 60px;
    }

    .height-lg {
        height: 100px;
    }

    .height-xl {
        height: 150px;
    }


    BODY {
        font-size: 12px;
    }

    @import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
    label {
        font-size: 20px;
    }

    .navbar-brand IMG {  width: 200px; }
    
    H1 { font-size: 26px; font-weight: bold; }
    H2 { font-size: 24px; font-weight: bold; }
    H3 { font-size: 18px; font-weight: bold; }
    H4 { font-size: 16px; }
    H5 { font-size: 14px; }


    .h1 { font-size: 26px !important; font-weight: bold; }
    .h2 { font-size: 24px !important; font-weight: bold; }
    .h3 { font-size: 18px !important; font-weight: bold; }
    .h4 { font-size: 16px !important; }
    .h5 { font-size: 14px !important; }

    .ficha-producto .features {
        height: 3.8em;
    }

    .ficha-producto .icono {
        height: 2.5em;
        width: 2.5em;
    }

    .ficha-producto .titulo {
        height: 1.4em;
        font-size: 18px;
    }

    .ficha-producto .empresa {
        height: 1.4em;
        font-size: 14px;
        font-style: italic;
    }


    .ficha-producto .descripcion {
        font-size: 16px;
        line-height: 16px; 
        height: 3em;
    }


    .ficha-producto .feature-badge {
        min-width: 14em;
        height: 4em;
        margin-right: 5px;
    }


    .ficha-producto .feature-badge .name {
        white-space: nowrap !important;
        height: 1.8em;
        margin-bottom: 2px;
    }

    .ficha-producto .feature-badge .value {
        min-width: 12em;
        height: 1.7em;
        margin-bottom: 2px;
    }

}



@media (min-width: 300px) and (max-width: 410px)
{
    .page-link {
        font-size: 12px !important;
        padding: 4px !important;
        margin: 3px;
    }

    .navbar-brand IMG {  width: 180px !important; }


}


@media (max-width: 299px)
{
    .page-link {
        font-size: 11px !important;
        padding: 3px !important;
        margin: 2px;
    }

    .navbar-brand IMG {  width: 150px !important; }

}




A {
    color: #2B89C7;
}

A:visited {
    color: #3a6f91;
}

A:hover {
    color: #5bb0e5;
}



.noform { 
    display: none;
}


.vitrina a .btn_colapsar:after {
    content: "⯆";
    float: right;
}
.vitrina a:not(.collapsed) .btn_colapsar:after {
    content: "⯅";
    float: right;
}


.vitrina #list_product_types {
    min-height: 150px !important;
}

.vitrina #list_updated_products {
    min-height: 150px !important;
}



/*  CLASES PARA CADA FEATURE TYPE  */

.num {
    width: 100px !important;
}


.price {
    width: 150px !important;
}

.bool { float: left;}