body {
}

.tituloPrincipal {
    font-weight: 700;
    font-size: 36px;
    line-height: 44px;
}

.subtituloPrincipal {
    width: 294px;
    height: 29px;
    left: 213px;
    top: 163px;
    font-style: normal;
    color: #8d8d8d;
    font-weight: 700;
}


#tapaReloj {
    background: conic-gradient(#ffffff 0.00% 100%);
    border-radius: 50%;
    width: 70px;
    position: absolute;
    height: 70px;
    margin: 8px;
}

#reloj1-5 {
    background: conic-gradient(#009A4E 0.00% 20%, #D5D5D5 20% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
    -webkit-animation: colorRotate 1.5s linear;
    animation: colorRotate 1.5s linear;
}

#reloj2-5 {
    background: conic-gradient(#009A4E 0.00% 40%, #D5D5D5 40% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
}

#reloj3-5 {
    background: conic-gradient(#009A4E 0.00% 60%, #D5D5D5 60% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
}

#reloj4-5 {
    background: conic-gradient(#009A4E 0.00% 80%, #D5D5D5 80% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
}

#reloj5-5 {
    background: conic-gradient(#009A4E 0.00% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
}

#reloj1-4 {
    background: conic-gradient(#009A4E 0.00% 25%, #D5D5D5 25% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
    -webkit-animation: colorRotate 1.5s linear;
    animation: colorRotate 1.5s linear;
}

#reloj2-4 {
    background: conic-gradient(#009A4E 0.00% 50%, #D5D5D5 50% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
}

#reloj3-4 {
    background: conic-gradient(#009A4E 0.00% 75%, #D5D5D5 75% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
}

#reloj4-4 {
    background: conic-gradient(#009A4E 0.00% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
}


#reloj1-3 {
    background: conic-gradient(#009A4E 0.00% 33%, #D5D5D5 33% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
    -webkit-animation: colorRotate 1.5s linear;
    animation: colorRotate 1.5s linear;
}

#reloj2-3 {
    background: conic-gradient(#009A4E 0.00% 66%, #D5D5D5 66% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
}

#reloj3-3 {
    background: conic-gradient(#009A4E 0.00% 100%);
    border-radius: 50%;
    width: 86px;
    height: 86px;
}

.numerosReloj {
    background: transparent;
    width: 41px;
    position: absolute;
    height: 50px;
    margin: 25px;
    padding-top: 4px;
    font-style: normal;
    font-weight: bold;
    font-size: 28px;
    line-height: 22px;
    text-align: center;
    color: #707070;
}

@-webkit-keyframes colorRotate {
    from {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes colorRotate {
    from {
        -webkit-transform: rotate(270deg);
        transform: rotate(270deg);
    }

    to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

.tituloPaso {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 22px;
    text-align: right;
    color: #525252;
}

.subTituloPaso {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 20px;
    text-align: right;
    color: #525252;
}

.error {
    color: #CF2525 !important;
    font-size: 14px;
}

.codigoCotizacion {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 22px;
    color: #009A4E;
}

.eliminarBTN {
    background-color: white !important;
    width: 40px !important;
    height: 40px !important;
    border: 1px solid #CF2525 !important;
}

.etiquetaTextbox {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 22px;
    color: #8D8D8D;
}

.etiquetaSmall {
    font-style: normal;
    font-weight: normal;
    font-size: 16px;
    line-height: 22px;
    color: #8D8D8D;
    margin: 0px !important;
}

.etiquetaCheckbox {
    font-style: normal;
    font-weight: normal;
    font-size: 18px;
    line-height: 22px;
    color: #8D8D8D !important;
}

.sugerenciaTexto {
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    line-height: 17px;
    color: #8D8D8D;
}

.tituloPaquetes {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    color: #8D8D8D;
}

.tituloPaquetesVerde {
    font-style: normal;
    font-weight: bold;
    font-size: 24px;
    line-height: 29px;
    text-align: center;
    color: #009A4E;
}

.montoPaquetes {
    font-style: normal;
    font-weight: bold;
    font-size: 32px;
    line-height: 39px;
    text-align: center;
    color: #009A4E;
}

.subMontoPaquetes {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    line-height: 39px;
    text-align: center;
    color: #009A4E;
}

.contenidoPaqueteIzquierda {
    border-left: 1px solid #C4C4C4;
}

.contenidoPaqueteDerecha {
    border-right: 1px solid #C4C4C4;
}

.contenidoPaqueteResaltado {
    border: 2px solid #009A4E;
    box-sizing: border-box;
    border-radius: 15px;
}

.contenidoPaqueteResaltadoResumen {
    box-sizing: border-box;
    box-shadow: 2px 0.5rem 1rem rgb(0 0 0 / 15%);
    border-radius: 6px;
}

.paqueteResaltado {
    max-width: 180px;
    width:100%;
    height: 28.97px;
    background: #009A4E;
    color: #ffffff;
    margin-top: -15px;
    text-align: center;
}

.paqueteResaltadoResumen {
    width: 180px;
    height: 28.97px;
    background: #009A4E;
    color: #ffffff;
    margin-top: -15px;
    text-align: center;
    border-radius: 5px;
}

.fade-in-bottom {
    -webkit-animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: fade-in-bottom 0.6s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
}

@-webkit-keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}

@keyframes fade-in-bottom {
    0% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    }

    100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
        opacity: 1;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    }
}

.tarjetaDato {
    background: #F6F6F4;
    box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.4);
    border-radius: 5px;
}

.input2 {
    width: 90% !important;
    display: inline-block;
}

.input-icon {
    display: inline-block;
    height: 22px;
    width: 22px;
    line-height: 33px;
    text-align: center;
    color: #000;
    font-size: 18px;
    font-weight: bold;
}

/* The container */
.containerCheckboxNPV {
    display: block;
    position: relative;
    padding-left: 35px;
    margin-bottom: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    /* Hide the browser's default checkbox */
    .containerCheckboxNPV input {
        position: absolute;
        opacity: 0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        cursor: pointer;
        height: 0;
        width: 0;
    }

/* Create a custom checkbox */
.checkmarkNPV {
    position: absolute;
    top: 0;
    left: 0;
    height: 25px;
    width: 25px;
    background-color: #eee;
}

/* On mouse-over, add a grey background color */
.containerCheckboxNPV:hover input ~ .checkmarkNPV {
    background-color: #67cb9b;
}

/* When the checkbox is checked, add a blue background */
.containerCheckboxNPV input:checked ~ .checkmarkNPV {
    background-color: #009A4E;
}

.containerCheckboxNPV input:checked + label {
    background-color: red;
}

/* When the checkbox is disabled, add a blue background */
.containerCheckboxNPV input:disabled ~ .checkmarkNPV {
    background-color: #8D8D8D;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmarkNPV:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.containerCheckboxNPV input:checked ~ .checkmarkNPV:after {
    display: block;
}

/* Style the checkmark/indicator */
.containerCheckboxNPV .checkmarkNPV:after {
    left: 9px;
    top: 4px;
    width: 6px;
    height: 15px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* Inicia personalización de tablas verticales en mobile */
@media only screen and (max-width: 576px) {
    /* Force table to not be like tables anymore */
    table.tablaVertical,
    .tablaVertical thead,
    .tablaVertical tbody,
    .tablaVertical th,
    .tablaVertical td,
    .tablaVertical tr {
        display: block;
    }

        /* Hide table headers (but not display: none;, for accessibility) */
        .tablaVertical thead tr {
            display: none;
        }

        .tablaVertical tbody tr {
            border: 1px solid #dee2e6;
            padding: 0.5rem;
        }

            .tablaVertical tbody tr:nth-child(odd) {
                background: inherit;
            }

        .tablaVertical tbody td {
            border: none !important;
            text-align: unset !important;
            max-width: none !important;
            padding: 0.5rem;
        }

            .tablaVertical tbody td p {
                margin: 0px;
            }

        .tablaVertical td:before {
            /* Top/left values mimic padding */
            top: 0;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            /*white-space: nowrap;*/
            font-weight: bold;
        }

        /*
		Label the data
    You could also use a data-* attribute and content for this. That way "bloats" the HTML, this way means you need to keep HTML and CSS in sync. Lea Verou has a clever way to handle with text-shadow.
		*/
        .tablaVertical td:nth-of-type(1):before {
            content: attr(data-th)
        }

        .tablaVertical td:nth-of-type(2):before {
            content: attr(data-th)
        }

        .tablaVertical td:nth-of-type(3):before {
            content: attr(data-th)
        }

        .tablaVertical td:nth-of-type(4):before {
            content: attr(data-th)
        }

        .tablaVertical td:nth-of-type(5):before {
            content: attr(data-th)
        }

        .tablaVertical td:nth-of-type(6):before {
            content: attr(data-th)
        }

        .tablaVertical td:nth-of-type(7):before {
            content: attr(data-th)
        }

        .tablaVertical td:nth-of-type(8):before {
            content: attr(data-th)
        }

        .tablaVertical td:nth-of-type(9):before {
            content: attr(data-th)
        }

        .tablaVertical td:nth-of-type(10):before {
            content: attr(data-th)
        }

}
/* Finaliza personalización de tablas verticales en mobile */

.icoPaquete {
    max-width: 111px;
    width: 100%;
}

.btnPaquete {
    max-width: 150px;
    min-width: 0px !important;
    width: 100%;
}

@media screen and (max-width: 1130px) {
    .tituloPaquetes {
        font-size: 17px;
    }

    .paqueteResaltado {
        font-size: 14px;
    }

    .montoPaquetes {
        font-size: 15px;
    }

    .subMontoPaquetes {
        font-size: 10px;
    }

    .etiquetaPrincipal {
        font-size: 16px;
    }
}

@media screen and (max-width: 767.2px) {

    .tituloPaquetes {
        font-size: 24px;
    }

    .paqueteResaltado {
        font-size: unset;
    }

    .montoPaquetes {
        font-size: 32px;
    }

    .subMontoPaquetes {
        font-size: 18px;
    }

    .etiquetaPrincipal {
        font-size: 20px;
    }

    .contenidoPaqueteIzquierda {
        border-left: unset;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 15px;
        margin-bottom: 15px;
        box-shadow: 0px 4px 16px rgba(77, 77, 77, 0.45);
        border-radius: 8px;
    }

    .contenidoPaqueteResaltado {
        border-radius: 8px !important;
        padding-bottom: 20px;
        margin-top: 15px;
        margin-bottom: 15px;
        box-shadow: 0px 4px 16px rgba(77, 77, 77, 0.45);
        border-radius: 8px;
    }

    .contenidoPaqueteDerecha {
        border-right: unset;
        padding-top: 20px;
        padding-bottom: 20px;
        margin-top: 15px;
        margin-bottom: 15px;
        box-shadow: 0px 4px 16px rgba(77, 77, 77, 0.45);
        border-radius: 8px;
    }

}