.introCustomizado {
    min-width: 500px !important;
    position: absolute;
    top: 0 !important;
    margin-left: 0.5em;
    background-color: rgb(0, 125, 166) !important;
}

.introjs-skipbutton {
    background-color: #F6F6F6;
    position: fixed !important;
    border-radius: 50%;
    left: 90% !important;
    top: 5% !important;
    color: #171717;
}

.introjs-overlay {
    opacity: 1 !important;
}


.flecha-izq {
    position: absolute;
    color: rgb(0, 125, 166) !important;
    left: -0.5em;
    top: 1.5em;
    font-size: 2em;
}

.introjs-arrow {
    display: none !important;
}

.introCustomizado1 {
    min-width: 500px !important;
    position: absolute;
    top: 0 !important;
    left: 26em !important;
    background-color: rgb(0, 125, 166) !important;
}

.flecha-der2 {
    position: absolute;
    color: rgb(0, 125, 166) !important;
    left: -0.5em;
    top: 1.5em;
    font-size: 2em;
}


.introCustomizado2 {
    min-width: 500px !important;
    position: absolute;
    top: 0 !important;
    background-color: rgb(0, 125, 166) !important;
}

.flecha-der {
    position: absolute;
    color: rgb(0, 125, 166) !important;
    right: -0.5em;
    top: 1.5em;
    font-size: 2em;
}


.introCustomizado3 {
    min-width: 500px !important;
    position: absolute;
    top: 0 !important;
    background-color: rgb(0, 125, 166) !important;
}

.introCustomizado4 {
    min-width: 500px !important;
    position: absolute;
    top: 0 !important;
    left: 5em;
    background-color: rgb(0, 125, 166) !important;
}

.introCustomizado5 {
    min-width: 500px !important;
    position: absolute;
    top: 0 !important;
    left: 5em;
    background-color: rgb(0, 125, 166) !important;
}

.introCustomizado6 {
    min-width: 500px !important;
    position: absolute;
    top: 0 !important;
    left: -32em;
    background-color: rgb(0, 125, 166) !important;
}

.introCustomizado7 {
    min-width: 500px !important;
    position: absolute;
    top: 5em !important;
    background-color: rgb(0, 125, 166) !important;
}


.introCustomizado8 {
    min-width: 500px !important;
    position: absolute;
    top: 3em !important;
    left: 15em;
    background-color: rgb(0, 125, 166) !important;
}

.introCustomizado9 {
    min-width: 500px !important;
    position: absolute;
    top: 3em !important;
    left: -15em !important;
    background-color: rgb(0, 125, 166) !important;
}


.flecha-der3 {
    position: absolute;
    color: rgb(0, 125, 166) !important;
    right: -0.5em;
    top: 1.5em;
    font-size: 2em;
}

.flecha-arriba {
    position: absolute;
    color: rgb(0, 125, 166) !important;
    top: -0.8em;
    right: 13em;
    font-size: 2em;
}

.flecha-arriba2 {
    position: absolute;
    color: rgb(0, 125, 166) !important;
    top: -0.8em;
    right: 7.2em;
    font-size: 2em;
}


.intro .saberMas {
    padding-left: 2em;
}



.pendiente {
    color: rgb(255, 51, 0);
}

.despachado {
    color: rgb(0, 125, 166);
}

.icono {
    font-size: 2em;
}




/*

  .introjs-tooltip{
   min-width: 500px !important;
   position: absolute;
   top:0 !important;
   background-color: rgb(0, 125, 166) !important;

}
*/

.introjs-tooltip {
    color: white;
    background-color: #017DA6;
    min-width: 360px !important;
    max-width: 420px !important;
}

@media screen and (min-width: 375px) {
    .introjs-tooltip {
        max-width: 360px !important;
    }
}

@media screen and (min-width: 414px) {
    .introjs-tooltip {
        max-width: 400px !important;
    }
}

@media screen and (min-width: 768px) {
    .introjs-tooltip {
        max-width: 550px !important;
    }
}


.introjs-tooltip-title, .introjs-tooltip-subtitle {
    color: white;
    width: 100%;
    font-weight: 700;
    font-family: "Roboto-Regular";
}

.introjs-tooltip-title {
    font-size: 28px;
}

.introjs-tooltip-subtitle {
    font-size: 18px;
}

.introjs-tooltipReferenceLayer * {
    font-family: 'Roboto-Regular';
}


.introjs-tooltiptext {
    min-width: 290px;
    font-family: "Roboto-Regular";
}

.introjs-helperNumberLayer {
    color: white;
}

.letra {
    font-size: 14px;
}

.introjs-button, .introjs-button:hover, .introjs-button:focus, .introjs-button:active {
    background: none;
    text-shadow: none;
    color: white;
    border: none;
    outline: none;
    text-decoration: none;
    box-shadow: none;
}

.introjs-disabled {
    display: none;
}















@media (-webkit-device-pixel-ratio: 1.25) {
    * {
        zoom: 1;
    }
}

@media (-webkit-device-pixel-ratio: 1.50) {
    * {
        zoom: 1;
    }
}