/*Estilos generales*/
#divTarificador { padding-bottom: 80px }
#divTarificador a { text-decoration: none }
#divTarificador .divBotonera { text-align: center; padding: 16px 0; border-top: 1px solid rgba(0,0,0,.12); margin-top: 80px }
#divTarificador .btn-tarificador { background-color: #254061; color: #fff; display: inline-block; font-size: 16px; text-decoration: none; -webkit-appearance: none; border-radius: 3px; text-transform: uppercase; letter-spacing: 1px; border: none; line-height: 32px; padding: 8px ; cursor: pointer; font-weight: lighter; transition: background-color .1s; -webkit-appearance: none; font-weight:600 }
#divTarificador .btn-tarificador:hover { background-color: #03a9f4; box-shadow: 2px 3px 5px rgba(0,0,0,.1) }
#divTarificador .btn-tarificador:active { transform: scale(1.01) }

/*Buscador*/
#secBuscador { text-align: center; }
#secBuscador input[type=search] { border: none; outline: none; border-bottom: 1px solid rgba(0,0,0,.12); display: block; font-size: 20px; line-height: 40px; margin: 0; padding: 18px 4px 0 4px; width: 100%; background-color: rgba(0,0,0,.012); text-align: left; color: inherit; transition: background-color .1s; -webkit-appearance: searchfield !important; }
#secBuscador input[type=search i]:enabled:read-write:-webkit-any(:focus, :hover)::-webkit-search-cancel-button { opacity: 1 !important; pointer-events: auto !important; -webkit-appearance:auto!important}
#secBuscador input[type=search]::-webkit-search-cancel-button { -webkit-appearance: auto!important; }

/*H2 del formulario*/
#divTarificador h2 { color: #254061; border-bottom: 2px solid rgba(0,0,0,.12); font-weight: bold; margin-bottom: 16px; text-align: left; font-size: 24px; }

.oculto { display:none; }

/*Packs*/
#secPacks { font-size: 0; padding-top: 70px }
#secPacks .divPack { box-sizing: border-box; padding-top: 10px; padding-bottom: 10px; vertical-align: top }
#secPacks .divPack:hover > div { box-shadow: 0 0 20px rgba(0,0,0,.15) }
#secPacks .divPack:hover > div > div { background-color: #f2f5f7; cursor: default }
#secPacks .divPack > div { border-radius: 8px; overflow: hidden; transition: box-shadow .1s }
#secPacks .divPack > div > div { padding: 16px; background-color: #eceff1; font-size: 14px; transition: background-color .1s }
#secPacks .divPack strong { color: #fff; text-align: center; padding: 16px; font-size: 20px; white-space: nowrap; display: block; text-overflow: ellipsis; overflow: hidden; background-color: #000; background-image: linear-gradient(transparent,rgba(0,0,0,.5)), url(/img/fondo-packs.jpg); background-repeat: no-repeat; background-size: cover; padding-top: 80px; background-position: center center; text-shadow: 1px 2px 3px rgb(0 0 0 / 40%); }
#secPacks .divPack .btn-tarificador { display: block; margin-top: 16px; text-align: center }
#secPacks .divPack .divPrecioPack { display: block; font-size: 48px; text-align: center; color: #254061; line-height: 48px; font-weight: 600; }
#secPacks .divPack .divPrecioPack > span { display: block; font-size: 12px; line-height: 24px; font-weight: normal; }
#secPacks .divPack ol { font-size: 20px; list-style-image: url(/img/checked.png); color: #263238; height: 110px; overflow-y: auto; }
#secPacks .divPack ol li { padding-bottom: 8px }

/*Tarifas*/
#secTarifas { font-size: 0; padding-top: 70px }
#secTarifas .divTarifa { box-sizing: border-box; padding-bottom: 10px; vertical-align: top }
#secTarifas .divTarifa:hover > div { box-shadow: 0 0 20px rgba(0,0,0,.15) }
#secTarifas .divTarifa:hover > div > div { background-color: #f2f5f7; cursor: default }
#secTarifas .divTarifa > div { border-radius: 8px; overflow: hidden; transition: box-shadow .1s }
#secTarifas .divTarifa > div > div { padding: 8px; background-color: #eceff1; font-size: 14px; transition: background-color .1s; }
#secTarifas .divTarifa strong {color: #fff;text-align: center;font-size: 20px;display: table;width: 100%;background-color: #000;background-repeat: no-repeat;background-size: cover;background-position: center center;text-shadow: 1px 2px 3px rgb(0 0 0 / 40%);}
#secTarifas .divTarifa label { line-height: 32px; cursor: pointer; position: relative; display: block; font-size: 15px; margin-bottom: 2px }
#secTarifas .divTarifa label:active { transform: scale(1.02); box-shadow: 2px 3px 5px rgba(0,0,0,.1) }
#secTarifas .divTarifa label:active input:not(:disabled):not(:read-only) ~ span { background: #03a9f4 !important; color: #fff; }
#secTarifas .divTarifa label > span { display: table; border-radius: 4px; font-size: 14px; font-weight: bold; color: #666; width: 100% }
#secTarifas .divTarifa label:hover > span {  background: rgba(0,0,0,.03) }
#secTarifas .divTarifa label > span > span { display: table-cell; vertical-align: middle }
#secTarifas .divTarifa label > span > span:first-child { width: 99%; padding: 4px; line-height: 24px }
#secTarifas .divTarifa#divTarifaInternet strong { background-image: linear-gradient(transparent,rgba(0,0,0,.5)), url(/img/fondo-internet.jpg); }
#secTarifas .divTarifa.divTarifaFijo strong { background-image: linear-gradient(transparent,rgba(0,0,0,.5)), url(/img/fondo-fijo.jpg); }
#secTarifas .divTarifa.divTarifaMovil strong { background-image: linear-gradient(transparent,rgba(0,0,0,.5)), url(/img/fondo-movil.jpg); }
#secTarifas .divTarifa label .spanPrecioTarifa { font-weight: bold; color: #fff; border-radius: 4px; background: #7cadd3; padding: 0 8px; line-height: 24px; margin-top: 4px; font-size: 13px; }
#secTarifas .divTarifa label .spanPromocionTarifa { display: inherit; background-color: rgba(0,0,0,.2); padding: 0px 4px; border-radius: 4px; font-size: 10px; color: #fff; line-height: 14px; }
#secTarifas .divTarifa label .spanCobertura {display: inherit; background-color: rgba(0,0,0,.2); padding: 0px 4px; border-radius: 4px; font-size: 10px; color: #fff; line-height: 14px; }
#secTarifas .divTarifa label .spanAlta {display: inherit; background-color: #7cadd3; padding: 0px 4px; border-radius: 4px; font-size: 10px; color: #fff; line-height: 14px; }
#secTarifas .divTarifa label .spanPermanencia { display: inline-block; background-color: #7cadd3; padding: 0px 4px; border-radius: 4px; font-size: 10px; color: #fff; line-height: 14px; }
#secTarifas .divTarifa label input { display: none }
#secTarifas .divTarifa label input:checked ~ span { background: #004b6e; color: #fff; }
#secTarifas .divTarifa label input:not(:checked):disabled ~ span, #secTarifas .divTarifa label input:not(:checked):read-only ~ span { color: #103a5d !important; cursor: not-allowed !important; pointer-events: none !important; font-weight: normal; }
#secTarifas #btnLineaAdicional { margin-top: 16px; display: block; text-align: center }
#secTarifas #btnLineaFijoAdicional { margin-top: 16px; display: block; text-align: center }
#secTarifas #btnLineaAdicional.desactivarBtnLineaAdicional{background-color:grey}
#secTarifas #btnLineaFijoAdicional.desactivarBtnLineaAdicional{background-color:grey}
#secTarifas .btnLineaAdicionalCancelar { margin-top: 16px; display: block; text-align: center; background-color:grey }
#secTarifas .btnLineaAdicionalCancelar:hover { background-color: #A9A9A9 }

#secTarifas .divTarifa label input:checked ~ span .spanPrecioTarifa { background: #103a5d; color: #fff; }
#secTarifas .divTarifa label input:checked ~ span .noContrata { background: #103a5d; color: #fff; }
#secTarifas .divTarifa label input:checked ~ span .spanAlta, #secTarifas .divTarifa label input:checked ~ span .spanPermanencia { background: #103a5d; color: #fff; }

.spanNombreServicioAdicional { display:inline-block}

#olTuTarifa .resumenPermanencia { display: block; margin-top: 8px; font-size: 12px }

.noContrata { border-radius: 4px; color: #fff; background-color: rgba(124, 173, 211, 0.5) }

/*Scroll tarificador*/
.divTarifa div::-webkit-scrollbar { width: auto; height: auto; }
.divTarifa div::-webkit-scrollbar-corner,
.divTarifa div::-webkit-scrollbar-track { background-color: #eee }
.divTarifa div::-webkit-scrollbar-thumb { background-color: #103a5d; background-clip: padding-box;}
.divTarifa div::-webkit-scrollbar-button:single-button { background-color: #eee; display: block; background-size: 10px; background-repeat: no-repeat; }
.divTarifa div::-webkit-scrollbar-button:single-button:vertical:decrement { height: 12px; width: 16px; background-position: center 4px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(16, 58, 93)'><polygon points='50,00 0,50 100,50'/></svg>"); }
.divTarifa div::-webkit-scrollbar-button:single-button:vertical:increment { height: 12px; width: 16px; background-position: center 2px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='rgb(16, 58, 93)'><polygon points='0,0 100,0 50,50'/></svg>"); }

/*Tu tarifa*/
#divTuTarifa > div { padding: 8px; background: #03a9f4; color: #fff; border-radius: 8px }
#divTuTarifa > div h2 { text-align: center; text-transform: uppercase; letter-spacing: 2px; font-size: 18px; font-weight: bold; color: #fff; margin: 16px 0; }
#divTuTarifa > div strong#precioFinal { display: block; font-size: 60px; text-align: center; }
#divTuTarifa > div span#precioFinalDetalle { display: block; font-size: 13px; text-align: center; color: #e1f5fe; padding-bottom: 24px; padding-top: 24px; }
#divTuTarifa > div ol { font-size: 15px; list-style-image: url(/img/checked.png); color: #fff; padding-left: 8px }
#divTuTarifa > div ol li { padding-bottom: 8px }

/*Formulario final*/
#secFormularioFinal { padding-top: 70px }
#secFormularioFinal #divBtnRegistro { padding: 16px 0 0 0; text-align: center; }
#secFormularioFinal #divPoliticaPrivacidad { text-align: center }
#secFormularioFinal #btnPolitica:hover { text-decoration: underline; }
#secFormularioFinal #btnPolitica { font-weight: bold; color: #000; }

#secFormularioFinal #divAntesDeEnvio { text-align:center;padding:8px; }

#secFormularioFinal h2 { color: #254061; border-bottom: 2px solid rgba(0,0,0,.12); font-weight: bold; margin-bottom: 16px; }
#secFormularioFinal h2:not(:first-child){margin-top:32px}

.campo-portabilidad:not(.activo) { display: none }

/*Mensaje datos grabados*/
#secMensajeDatosGrabados h2 { color: #254061; border-bottom: 2px solid rgba(0,0,0,.12); font-weight: bold; margin-bottom: 16px;  }
#secMensajeDatosGrabados input { text-align: center}


#secTarifas #divTarifaServiciosAdicionales.divTarifa strong > span {
    display: table-cell;
}

#secTarifas .divTarifa strong > span {
    display: table-cell;
    height: 100px;
    padding: 16px;
    width: 100%;
    vertical-align: bottom;
}

@media only screen and (min-width:801px) { /*Packs*/
    #secPacks .divPack ol { font-size: 16px; }

    /*Tarifas*/
    #secTarifas .divTarifa > div > div { overflow-y: auto; height: 300px; }
}

@media only screen and (min-width:801px) and (max-width:1080px) {
    /*Packs*/
    #secPacks #divPacks .divPack { display: inline-block; width: 50%; }
    #secPacks #divPacks .divPack:nth-child(2n+1) { padding-right: 8px }
    #secPacks #divPacks .divPack:nth-child(2n+2) { padding-left: 8px }

    /*Tarifas*/
    #secTarifas .divTarifa { display: inline-block; width: 50%; }
    #secTarifas .divTarifa:nth-child(2n+1) { padding-right: 8px }
    #secTarifas .divTarifa:nth-child(2n+2) { padding-left: 8px }


}

@media only screen and (min-width:1081px) {
    /*Packs*/
    #secPacks .divPack { display: inline-block; width: 33.33%; }
    #secPacks .divPack:nth-child(3n+1) { padding-right: 8px }
    #secPacks .divPack:nth-child(3n+2) { padding-left: 4px; padding-right: 4px; }
    #secPacks .divPack:nth-child(3n+3) { padding-left: 8px }

    /*Tarifas*/
    #secTarifas .divTarifa { display: inline-block; width: 25%; }
    #secTarifas .divTarifa:nth-child(4n+1) { padding-right: 8px }
    #secTarifas .divTarifa:nth-child(4n+2) { padding-right: 8px; }
    #secTarifas .divTarifa:nth-child(4n+3) { padding-right: 8px;}
    #secTarifas .divTarifa:nth-child(4n+4) { padding-right: 8px }
    #secTarifas > #divTarifasDatos { display: table; width: 100% }
    #secTarifas > #divTarifasDatos > div { display: table-cell; vertical-align: top }
    #secTarifas #divTuTarifa { width: 20%; padding-left: 8px }

}