@charset "UTF-8";
        @import "//fonts.googleapis.com/css?family=Open+Sans";
        .steps {
        list-style: none;
        margin: 0;
        padding: 0;
        display: table;
        table-layout: fixed;
        width: 100%;
        color: #929292;
        height: 4rem;
        }
        .steps > .step {
        position: relative;
        display: table-cell;
        text-align: center;
        font-size: 0.875rem;
        color: #6D6875;
        }
        .steps > .step:before {
        content: attr(data-step);
        display: block;
        margin: 0 auto;
        background: #ffffff;
        border: 2px solid #ff6633;
        color: #ff6633;
        width: 3rem;
        height: 3rem;
        text-align: center;
        margin-bottom: -5.2rem;
        line-height: 2.9rem;
        border-radius: 100%;
        position: relative;
        z-index: 1;
        font-weight: 700;
        font-size: 1rem;
        }
        .steps > .step:after {
        content: "";
        position: absolute;
        display: block;
        background: #ff6633;
        width: 100%;
        height: 0.125rem;
        top: 1.5rem;
        left: 50%;
        }
        .steps > .step:last-child:after {
        display: none;
        }
        .steps > .step.is-complete {
        color: #6D6875;
        }
        .steps > .step.is-complete:before {
        content: "✓";
        color: #ff6633;
        background: #fef0e2;
        border: 2px solid #ff6633;
        }
        .steps > .step.is-complete:after {
        background: #ff6633;
        }
        .steps > .step.is-active {
        font-size: 1.5rem;
        }
        .steps > .step.is-active:before {
        color: #FFF;
        border: 2px solid #ff6633;
        background: #ff6633;
        margin-bottom: -5.9rem;
        }
        @media (min-width: 751px){
            .titulo_aros{
                    
                    font-size: 1.9em;
                }
                .img{
                    width: 80%; 
                    height: auto;
                }
                .img_inicio{
                    width: 80%; 
                    height: auto;
                }
                .titulo_instrucciones{
                    font-size: 1.5em !important;
                }
                .card_d{
                    left: 25%;
                }
                .card_h{
                    left: 25%;
                }
                .margen{
                    margin-top: 5%;
                }
                .izquierda{
                    left: 15%;
                }
                .derecha{
                    left: 20%;
                }
                .swal-dim {
                    height: auto;
                    width: 50% !important;
                }
                select.input-params{
                    width: 30%;
                }
        }
        @media (max-width: 750px){
            .titulo_aros{
                max-width: 100%;
                font-size: 1.1em;
            }
            .img{
                width: 100%; 
                height: auto;
            }
            .img_inicio{
                width: 100%; 
                height: auto;
            }
            .titulo_instrucciones{
                font-size: 1em !important;
            }
            .bullet{
                font-size: 0.8em;
            }
            .input-params{
                width: 85%;
            }
            .margen{
                margin-top: 15%;
            }
        }
        /* .img{
            border-radius: 30px;
        }
        .img_aros{
            border-radius: 15px;
        } */
        .img_aros.selected{
            border: 2px solid #ff6633;
        }
        .titulo_aros{
            font-family: "VAGRoundedStd-Light";
            color: #ff6633;
            /* letter-spacing: 2px;
            text-transform: uppercase; */
            font-weight: bold;

        }
        .titulo_instrucciones{
            font-family: "VAGRoundedStd-Light";
            color: #898989;
        }
        .bullet{
            color: #898989;
        }
        .button_iniciar{
            background-color: #ff6633;
            border-radius: 60px;
            width: 150px;
            height: 50px;
            color: white;
            font-size: 1em;
        }
        .button_anterior{
            border: 1px solid #ff6633;
            border-radius: 60px;
            width: 150px;
            height: 50px;
            color: #ff6633;
            font-size: 1em;
            background-color: #ffffff !important;
        }
        .box_shadow{
            box-shadow: 20px 20px 30px 1px rgb(0 0 0 / 18%);;
        }
        .card_h{
            box-shadow: 20px 20px 30px 1px rgb(0 0 0 / 18%);;
            border-radius: 15px;
        }
        .card_d{
            box-shadow: 20px 20px 30px 1px rgb(0 0 0 / 18%);;
            border-radius: 15px;
        }
        .input-params{
            font-family: "VAGRoundedStd-Thin";
            color: #7f7f80;
            border-bottom: 1px solid #7f7f80 !important;
            padding: 10px;
            font-size: 1em;
        }
        .hideContent{
            overflow: hidden;
            line-height: 1em;
            max-height: 1130px;
        }
        .showContent {
            line-height: 1em;
            height: auto;
        }
        .imagen{
            padding-bottom: 3%;
        }
        .importantRule{
            border: 1px solid #ff6633 !important;
        }
        
        .swal2-confirm{
            background-color: #ff6633 !important;
            border-radius: 60px !important;
            width: 150px !important;
            height: 50px !important;
            color: white !important;
            font-size: 1em !important;
        }
        .swal2-cancel{
            border: 1px solid #ff6633 !important;
            border-radius: 60px !important;
            width: 150px !important;
            height: 50px !important;
            color: #ff6633 !important;
            background-color: #ffffff !important;
            font-size: 1em !important;
        }
        .card_s{
            box-shadow: 20px 20px 30px 1px rgb(0 0 0 / 18%);
            border-radius: 50px;
            background-color: #e9e9e9;
            padding-top: 2%;
            padding-bottom: 2%;
            width: 70%;
            margin-bottom: 5%;
        }
        .tooltip {
            position: relative;
            display: inline-block;
            border-bottom: 1px dotted black;
        }
          
        .tooltip .tooltiptext {
        visibility: hidden;
        width: 11em !important;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        left: 0 !important;
        margin-left: -80px !important;
        
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        }
          
        .tooltip:hover .tooltiptext {
        visibility: visible;
        }