@font-face {
    font-family: 'Urbanist';
    src: url("../fonts/Urbanist-Light.woff2");
    font-weight: 300;
    font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url("../fonts/Urbanist-Regular.woff2");
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url("../fonts/Urbanist-Medium.woff2");
    font-weight: 500;
    font-display: swap;
}
@font-face {
    font-family: 'Urbanist';
    src: url("../fonts/Urbanist-SemiBold.woff2");
    font-weight: 600;
    font-display: swap;
}
html {
    scroll-behavior: smooth !important;
}
body {
    font-family: 'Typo Round', 'Open Sans', sans-serif !important;
    color: #454d5b;
    text-rendering: optimizeLegibility;
    background-color: #fafafa;
}
h1, h2, h3, h4, h5, h6 {
    font-family: 'Urbanist', sans-serif;
    font-weight: 500;
    letter-spacing: 0px;
}
.h1, h1 {
    font-size: 3.50rem;
    font-weight: 400;
    /* color: #62b2e8;*/
    color: #62b2e8;
}
h2 {
    color: #203b60;
    font-size: 1.95rem;
}
p, ul {
    font-weight: 300;
}
ul.navbar-nav {
    line-height: 1.2 !important;
}
.check-ul {
    list-style: none
}
.check-ul > li {
    margin: 0 0 1em 0
}
.check-ul > li:before {
    content: "\2714";
    color: #62b2e8;
    font-weight: 700;
    display: inline-block;
    width: 1em;
    margin-left: -1em
}
.display-4 {
    font-size: 1.5rem !important;
    font-weight: 800 !important
}
.text-primary {
    color: #203b60 !important
}
.text-secondary {
    color: #454d5b !important;
}
.btn-md {
    text-transform: uppercase;
    padding-right: 2rem;
    padding-left: 2rem;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-weight: 400;
    font-size: .9rem;
    letter-spacing: .1rem
}
.btn-xl {
    text-transform: uppercase;
    padding: 1.5rem 3rem;
    font-size: .9rem;
    font-weight: 500;
    letter-spacing: .1rem
}
.bg-blue {
    background-color: #203b60 !important
}
.bg-white {
    background-color: #fff
}
.rounded-pill {
    border-radius: 5rem
}
.navbar-custom {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: rgba(18, 43, 76, .74)
}
.scrolled {
    background-color: rgba(222, 225, 228, .74) !important;
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: .5s
}
.scrolled #navbarResponsive > ul > li > a {
    color: #203b60 !important
}
.navbar-custom .navbar-brand {
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .1rem;
    font-weight: 700
}
.navbar-custom .navbar-nav .nav-item .nav-link {
    text-transform: uppercase;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1rem
}
header.masthead {
    position: relative;
    overflow: hidden;
    padding-top: calc(7rem + 0px);
    padding-bottom: 8rem;
    background: url(../img/webp/header_new.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: scroll;
    background-size: cover;
    background-color: #ffffff !important
}
header.masthead .masthead-content {
    z-index: 1;
    position: relative
}
header.masthead .masthead-content .masthead-heading {
    font-size: 3rem;
    font-weight: 600 !important
}
header.masthead .masthead-content .masthead-subheading {
    font-size: 1.5rem;
    font-weight: 600 !important
}
.card-ul {
    text-align: left
}
.btn-action {
    background-color: #d93831;
    border-color: #d93831 !important;
    text-transform: uppercase;
    color: #fff !important;
    font-size: .8em !important;
    font-family: 'Open Sans', sans-serif !important;
    border-radius: 32px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important
}
.btn-action-blue:hover .btn-md:hover, .btn-action-secondary:hover, .btn-action:hover, .btn-primary:hover {
    /*-webkit-box-shadow: 10px 10px 5px 0 rgba(255, 255, 255, .2);
    -moz-box-shadow: 10px 10px 5px 0 rgba(255, 255, 255, .2);
    box-shadow: 0 1px 6px 5px rgba(255, 255, 255, .5);*/
    border-color: #203b60 !important
}
.btn-action-white:hover {
    -webkit-box-shadow: 10px 10px 5px 0 rgba(150, 160, 182, .2) !important;
    -moz-box-shadow: 10px 10px 5px 0 rgba(150, 160, 182, .2) !important;
    box-shadow: 0 1px 6px 5px rgba(150, 160, 182, .5) !important;
    border-color: #203b60 !important
}
.btn-action-blue {
    background-color: #1f395d !important
}
.btn-action-secondary {
    background-color: #aea29c !important;
    border-color: transparent !important;
    text-transform: uppercase;
    color: #fff !important;
    font-size: .8em !important;
    font-family: 'Open Sans', sans-serif !important;
    border-radius: 32px !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    width: 100%
}
/*.btn-shadow {
    -webkit-box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, .12) !important;
    -moz-box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, .12) !important;
    box-shadow: 5px 4px 2px -2px rgba(0, 0, 0, .5) !important
}*/
/*.btn-shadow:hover {
    -webkit-box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, .12) !important;
    -moz-box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, .12) !important;
    box-shadow: 5px 4px 2px -2px #000 !important
}*/
.btn-primary {
    background-color: #203b60;
    border-color: #203b60;
}
.btn-primary:active, .btn-primary:focus, .btn-primary:hover {
    background-color: #2b4b76;
    /*  -webkit-box-shadow: 10px 10px 5px 0 rgba(255, 255, 255, .2);
    -moz-box-shadow: 10px 10px 5px 0 rgba(255, 255, 255, .2);
    box-shadow: 0 1px 6px 5px rgba(255, 255, 255, .5)*/
}
.btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle {
    background-color: #203b60;
    border-color: #203b60;
}
.btn-secondary {
    background-color: #ff6a00;
    border-color: #ff6a00
}
.btn-secondary:active, .btn-secondary:focus, .btn-secondary:hover {
    background-color: #c50 !important;
    border-color: #c50 !important
}
.btn-secondary:focus {
    box-shadow: 0 0 0 .2rem rgba(255, 106, 0, .5)
}
.btn-top {
    background-color: #62b2e8;
    border-color: #62b2e8
}
.btn-top:active, .btn-top:focus, .btn-top:hover {
    background-color: #4fa6e0 !important;
    border-color: #4fa6e0 !important
}
.btn-top:focus {
    box-shadow: 0 0 0 .2rem rgba(79, 166, 224, .5)
}
.fade-in {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1s
}
@keyframes fadeInOpacity {
    0% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}
.labtype-services {
    background-image: url(../img/header_new.jpg);
    background-position: center;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover
}
div.menu-footer ul.text-white.text-uppercase {
    list-style: none;
    border-left: 1px solid #485f7e
}
div.menu-footer ul.text-white.text-uppercase li {
    margin-bottom: 8px;
    font-size: 14px
}
div.menu-footer ul.text-white.text-uppercase li a {
    color: #fff
}
.service-container {
    background-color: #fff;
    padding: 1.5rem;
    text-align: center;
    width: 100%;
    -webkit-box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, .12);
    -moz-box-shadow: 10px 10px 5px 0 rgba(0, 0, 0, .12);
    box-shadow: 5px 4px 2px -2px rgba(0, 0, 0, .12);
    border-radius: 4px
}
.service-header {
    /*border-bottom: 1px solid rgba(17, 79, 135, 0.16);*/
    margin-bottom: .5rem;
}
.service-price {
    border-bottom: 1px solid rgba(17, 79, 135, 0.16);
    padding-bottom: 1.5rem
}
.flow-graph-container {
    overflow: hidden;
    max-height: 400px;
    height: 400px;
    padding-left: 1.5rem;
    padding-right: 1.5rem
}
.flow-graph-container > div {
    display: none
}
.hidden {
    display: none
}
#loading {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: url(../img/enviando.gif) 50% 50% no-repeat rgb(249, 249, 249, .8)
}
.qc-landing {
    background-image: url(../img/webp/qc-landing.webp) !important
}
.services-landing {
    background-image: url(../img/webp/header-laboratorio-servicios.webp) !important;
    color: #000 !important
}
/****************  Gray to Color   *******************/
.grey-to-color:hover {
    transition: opacity .3s ease-in-out;
    filter: saturate(100%);
    -webkit-filter: saturate(100%);
    -moz-filter: saturate(100%);
    opacity: 1.00;
}
.grey-to-color {
    transition: opacity .3s ease-in-out;
    filter: saturate(0%) url(#grey-blue);
    -webkit-filter: saturate(0%) url(#grey-blue);
    -moz-filter: saturate(0%) url(#grey-blue);
    opacity: 0.85;
}
.box-shadow-cards {
    border-radius: 0.75rem;
    -webkit-box-shadow: 0 3px 12px -1px rgba(7, 10, 25, .125), 0 22px 27px -30px rgba(7, 10, 25, .125);
    box-shadow: 0 3px 12px -1px rgba(7, 10, 25, .125), 0 22px 27px -30px rgba(7, 10, 25, .125);
}
.text-shadow {
    text-shadow: 0 0 25px rgba(255, 255, 255, .50), 0 0 10px rgba(255, 255, 255, .50);
}
.lead {
    font-size: 1.45rem;
}
.bg-celeste {
    background-color: #d3e9fe;
}
.opacity-1 {
    opacity: 1;
}
::placeholder {
    color: #454d5b !important;
    opacity: 0.6 !important;
}
.form-control {
    color: #454d5b !important;
    border: 1px solid #b4cfea;
}
.form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(11, 113, 173, .25);
}
select:invalid {
    color: #454d5b !important;
    opacity: 0.6 !important;
}
.px-6 {
    padding-left: 6rem;
    padding-right: 6rem;
}
.px-7 {
    padding-left: 10rem;
    padding-right: 10rem;
}
.mask-hex {
    mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' baseProfile='basic' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 301.6 263.9' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2350F400;%7D%0A%3C/style%3E%3Cpath class='st0' d='M221.2,0H80.4c-3.6,0-6.9,1.9-8.7,5L1.3,126.9c-1.8,3.1-1.8,6.9,0,10l70.4,121.9c1.8,3.1,5.1,5,8.7,5h140.8 c3.6,0,6.9-1.9,8.7-5l70.4-121.9c1.8-3.1,1.8-6.9,0-10L229.9,5C228.1,1.9,224.8,0,221.2,0z'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' baseProfile='basic' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 301.6 263.9' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2350F400;%7D%0A%3C/style%3E%3Cpath class='st0' d='M221.2,0H80.4c-3.6,0-6.9,1.9-8.7,5L1.3,126.9c-1.8,3.1-1.8,6.9,0,10l70.4,121.9c1.8,3.1,5.1,5,8.7,5h140.8 c3.6,0,6.9-1.9,8.7-5l70.4-121.9c1.8-3.1,1.8-6.9,0-10L229.9,5C228.1,1.9,224.8,0,221.2,0z'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask-size: contain;
}
hr {
    border-top: 1px solid rgba(17, 79, 135, 0.16);
}
.isologo-svg {
    filter: drop-shadow(-1px 2px 10px rgb(255 255 255 / 1));
}
strong {
    font-weight: 600;
}
/***********************  Gráficos  **********************/
.App {
    transform: scale(0.90) translate(30px) !important;
}
#lims_flow {
    margin-top: -50px !important;
}
.btn-grafico {
    margin-top: -30px !important;
}
path[class*="draw-line-"] {
    stroke: #62b2e8;
    stroke-width: 1.75px;
}
.flow-node {
    background-color: #047cbf !important;
}
.tooltip-button {
    background-color: #203b60 !important;
}
.tooltip-container {
    margin-top: 49px !important;
    padding-bottom: 35px !important;
    border-radius: 0.75rem !important;
    -webkit-box-shadow: 0 3px 12px -1px rgba(7, 10, 25, .125), 0 22px 27px -30px rgba(7, 10, 25, .125) !important;
    box-shadow: 0 3px 12px -1px rgba(7, 10, 25, .125), 0 22px 27px -30px rgba(7, 10, 25, .125) !important;
    height: auto !important;
}
.tooltip-title {
    color: #203b60 !important;
}
.tooltip-title::before {
    content: "\276F";
    padding-right: 5px;
    color: #62b2e8;
}
p.tooltip-body {
    font-family: 'Typo Round', 'Open Sans', sans-serif !important;
    font-weight: 300 !important;
    color: #454d5b !important;
    text-rendering: optimizeLegibility !important;
    margin-bottom: 25px !important;
}
.btn-primary:focus, .btn-primary:active {
    outline: none !important;
    box-shadow: none !important;
}
.btn-primary:active {
    transform: scale(.95);
}
a {
    color: rgba(4, 144, 222, 1);
}
#features {
    margin-top: 77px !important;
}
.features .icon-box {
    display: flex;
    align-items: center;
    padding: 20px;
    /*background: #e2f2fe;*/
    /*background: #e6f4fe;*/
    background: rgba(230, 244, 254, 0.9);
    transition: ease-in-out 0.35s;
}
.features .icon-box:hover {
    /*background: #c7e6fc;*/
    /*background: #d3eafb;*/
    background: rgba(211, 234, 251, 0.9);
}
.features .icon-box h3 {
    font-weight: 600;
    margin: 0;
    padding: 0;
    line-height: 1;
    font-size: 19px;
}
.features .icon-box i img {
    width: 64px;
    padding-right: 10px;
    height: auto;
}
.ri-bar-chart-box-line::before {
    content: "\ea98";
}
.features ::after, .features ::before {
    box-sizing: border-box;
}
.features a {
    color: #203b60;
}
.features a:hover {
    text-decoration: none;
}
#top, .offset-top {
    padding-top: 90px !important;
    margin-top: -90px !important;
}
.btn-top {
    font-size: 32px;
    line-height: 44px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    transform: rotate(-90deg);
    padding-left: 19px;
    padding-right: 19px;
}
#privacy-policy .text-muted {
    color: #62b2e8 !important;
    opacity: 0.9;
}
#privacy-policy h2 {
    margin-top: 4rem;
}
#privacy-policy h2:has(+h2.text-muted) {
    margin-top: 5rem;
    margin-bottom: 0rem;
}
#privacy-policy h2:has(+p) {
    margin-top: 4.5rem;
    margin-bottom: 1rem;
}
#privacy-policy h2.text-muted {
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

button#confirm:disabled {
  cursor: not-allowed;
  opacity: 0.6; 
  background-color: #999999;
  border-color: #999999 !important;
  transform: scale(1);
}
/*********************** / Gráficos  **********************/
@media (min-width:992px) {
    header.masthead {
        padding-top: calc(9rem + 0px);
        padding-bottom: 10rem
    }
    header.masthead .masthead-content .masthead-heading {
        font-size: 3rem;
        font-weight: 600 !important
    }
    header.masthead .masthead-content .masthead-subheading {
        font-size: 2rem;
        font-weight: 600 !important
    }
    .display-4 {
        font-size: 3rem !important;
        font-weight: 400 !important
    }
    .card-ul {
        margin-left: 3rem
    }
}
@media (max-width:992px) {
    .px-7 {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    .tns-horizontal.tns-subpixel > .tns-item {
        vertical-align: bottom !important;
    }
    .h1, h1 {
        font-size: 2.50rem;
    }
    h2 {
        font-size: 1.40rem;
    }
    #privacy-policy .h5 {
        font-size: 1rem;
    }
}