* {
    outline: none !important;
    text-decoration: none !important;
    font-family: 'DIN Pro';
}

html {  
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin:0;
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #666;
}
::-moz-placeholder { /* Firefox 19+ */
    color: #666;
}
:-ms-input-placeholder { /* IE 10+ */
    color: #666;
}
:-moz-placeholder { /* Firefox 18- */
    color: #666;
}

.tituloIco2 {
    margin: 1% auto 2% !important;
    color: #333;
    text-align: center;
    font-family: 'DIN Pro';
}

.ui-widget .ui-state-focus,
.ui-widget.ui-state-focus{
    box-shadow: 0 0 4px 0 rgba(241, 11, 11, 0.7) !important;
}

.ui-widget.ui-state-active .ui-button-text.ui-c {
    color: #fff !important;
}

.ui-selectonemenu.ui-state-focus,
.ui-selectcheckboxmenu.ui-state-focus,
.ui-paginator-page.ui-state-focus,
.ui-paginator-next.ui-state-focus,
.ui-paginator-prev.ui-state-focus,
.ui-paginator-last.ui-state-focus,
.ui-paginator-first.ui-state-focus,
.ui-paginator-rpp-options.ui-state-focus{border:solid 1px #c00 !important;}

.ui-selectonemenu.ui-state-hover,
.ui-selectcheckboxmenu:hover{border-color:#c00 !important;}

.ui-selectonemenu-panel .ui-state-highlight, .ui-selectcheckboxmenu-panel .ui-state-highlight{color:#333 !important; background-color:#fff;}

.topData {
    float: right; 
    border-style: none !important;
    right: 5% !important;
    position: absolute;
    top: 60px;
    border: 0px solid #fff !important;
    z-index: 99;
}

.topData tbody tr td {
    border: 0px solid #fff !important;
}

.topData tbody tr td label {
    color: #ac1409 !important;
}

.wrapper {
    flex: 1 0 auto;
}

#nonAjaxLoad {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 30px;
    right: 30px;
}

body:before {
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    bottom: 0;
    left: 0;
    background: linear-gradient(to bottom, #fff, #fff 44vh, #ccc 44vh);
    background-attachment: fixed;
    background-repeat: no-repeat;
}

body:after {
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    bottom: 0;
    left: 0;
    background: url('/javax.faces.resource/img/bg_logo_d.png.xhtml') left bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 50%;
}

#desktopMenu {
    width: 100%;
    height: 80px;
    background: #f7121c;
    background: -moz-linear-gradient(left, #f7121c 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121c 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121c 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121c', endColorstr='#a61407',GradientType=1 );
    box-shadow: inset 0px -3px 5px 0px #a61407;
}

#desktopMenu nav {
    max-width: 1300px;
    margin: 0 auto;
    position: relative;
    height: 80px;
    width: 90%;
}

#desktopMenu nav .mobileMenu {
    display: none;
    width: 40px;
    height: 40px;
    border: 0px solid;
    background: transparent;
    cursor: pointer;
}

#desktopMenu nav .mobileMenu i {
    color: #fff;
    font-size: 2em;
    font-family: FontAwesome;
    font-style: normal;
}

#desktopMenu nav .headLogo {
    width: 160px;
    position: absolute;
}

#desktopMenu nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: right;
    width: 100%;
    display: inline-block;
    height: 80px;
    line-height: 80px;
}

#desktopMenu nav ul li {
    display: inline-block;
    margin: 0 0 0 1%;
    font-family: FontAwesome;
    font-style: normal;
}


#desktopMenu nav ul li a {
    color: #fff;
    font-family: 'DIN Pro Medium';
    font-size: 1.1em
}
#desktopMenu nav ul li a.activeMenu {
    font-family: 'DIN Pro Black';
}
#desktopMenu nav ul li a.ui-widget.ui-commandlink, 
#desktopMenu nav ul li a:visited,
#desktopMenu nav ul li a:focus,
#desktopMenu nav ul li a:active,
#desktopMenu nav ul li a {  
    color: #fff !important;
    font-family: 'DIN Pro Medium' !important;
    font-size: 1.1em !important;
}

#sidebarMenu {
    display: none;
}

#sm-topmenu li {
    background-image: none !important;
    height: auto !important;
}
#sm-topmenu li a {
    color: #333 !important;
    display: block;
    line-height: 1 !important;
    margin: 0 0 !important;
    width: 100% !important;
    text-align: center;
    text-indent: 0 !important;
    height: 30px !important;
}

.tripleSaldoTablet, .tripleSaldoMobile {
    display: none;
}

#footerSlider {
    overflow: hidden;
    position: relative;
}

#footerSlider .slick-arrow {
    position: absolute;
    top: 45%;
    z-index: 99;
    border:0px solid #fff;
    background: transparent;
    width: 35px;
    height: 35px;
    text-align: center;
    cursor: pointer;
}

#footerSlider .slick-arrow i{
    color: #fff;
    font-size: 2em;
    font-family: FontAwesome;
    font-style: normal;
}

#footerSlider .slick-prev {
    left: 0;
}

#footerSlider .slick-next {
    right: 0;
}


.tripleSaldoDesktop {
    width: 100%;
}

.Container96 {
    width: 95%;
    height: 25px;
    line-height: 25px;
    display: block;
}
.Container96 label {
    color: #ac1409 !important;
}

.ui-growl-image-error ~ .ui-growl-message {
    color:#ff0000;
}

#sidebarMenu p {
    width: 100%;
    height: 70px;
    text-align: center;
    line-height: 90px;
    font-size: 3em;
    font-family: 'DIN Pro Bold';
    margin: 0;
}

#sidebarMenu ul {
    padding: 0;
    list-style: none;
    width: 85%;
    margin: 20px auto 0;
}

#sidebarMenu ul li {
    /*padding: 25px 0;*/
    border-bottom: 2px solid #999;
    text-indent: 20px;
    position: relative;
    height: 75px;
}

#sidebarMenu ul li .reporteria {
    background: url('/javax.faces.resource/img/ico-reportes.png.xhtml') no-repeat left center;
}

#sidebarMenu ul li .recargasMenu {
    background: url('/javax.faces.resource/img/ico-recargas.png.xhtml') no-repeat left center;
}

#sidebarMenu ul li .inicioMenu {
    width: 50px;
    background: url('/javax.faces.resource/img/ico-inicio.png.xhtml') no-repeat left center;
}

#sidebarMenu ul li .activacionesMenu {
    background: url('/javax.faces.resource/img/ico-activaciones.png.xhtml') no-repeat left center;
}

#sidebarMenu ul li .cambioPin {
    background: url('/javax.faces.resource/img/ico-ajustes.png.xhtml') no-repeat left center;
}

#sidebarMenu ul li .paquetesMenu {
    background: url('/javax.faces.resource/img/ico-paquetes.png.xhtml') no-repeat left center;
}

#sidebarMenu ul li .serviciosMenu {
    background: url('/javax.faces.resource/img/ico-servicios.png.xhtml') no-repeat left center;
}

#sidebarMenu ul li .chatMenu{
    background: url('/javax.faces.resource/img/ico-chats.png.xhtml') no-repeat left center;
}

#sidebarMenu ul li .ajustesMenu{
    background: url('/javax.faces.resource/img/ico-ajustes.png.xhtml') no-repeat left center;
}

#sidebarMenu ul li .descargarApp {
	background: url('/javax.faces.resource/img/ico-paquetes.png.xhtml') no-repeat left center;
}

.icoPromtion {
	background: url('/javax.faces.resource/img/icons8-sms-50.png.xhtml') no-repeat left center !important;
}

.align-item-promotion {
    display: flex;
    justify-content: right;
}

#sidebarMenu ul li:last-child {
    border-bottom: 0px solid #666;
}

#sidebarMenu ul li a {
    color: #000;
    font-size: 1.1em;
    font-family: 'DIN Pro Medium';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-indent: 60px;
    line-height: 75px;
}

#sidebarMenu .closeMenuBtn {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 36px;
    margin-left: 50px;
    width: 45px;
    height: 45px;
    line-height: 1;
    background: transparent;
    border: 1px solid #999;
    color: #666;
    border-radius: 50%;
    cursor: pointer;
}

#sidebarMenu .closeMenuBtn i {
    font-family: FontAwesome;
    font-style: normal;
}

#sidebarMenu .logoutBtn {
    font-size: 1.1em;
    font-family: 'DIN Pro Medium';
    margin: 20px auto 0;
    display: block;
    border: 0px solid;
    background: transparent;
    color: #999;
}

.myframe {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.myframe iframe {
    border-width: 0px;
}

.login-page h1 {
    color: #f7121d;
    text-align: center;
    font-weight: 900;
    font-family: 'DIN Pro Bold';
    font-size: 3.3em;
    margin: 30px auto 5px;
}

.login-page h2 {
    color: #000;
    text-align: center;
    font-family: 'DIN Pro Medium';
    font-size: 2.5em;
    margin:0;
}

.login-page h3 {
    color: #000;
    text-align: center !important;
    font-family: 'DIN Pro Medium';
    font-size: 1.5em;
    margin:0;
}

.loginForm {
    width: 36%;
    height: auto;
    background: #a4a4a4;
    margin: 3% auto;
    border: 5px solid #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
}

.loginForm label {
    width: 80%;
    margin: 5px auto;
    display: block;
    text-align: left;
    font-size: 1.3em;
}

.loginForm input {
    width: 80%;
    margin: 0 auto;
    display: block;
    padding: 10px;
    border: 0px solid #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 1.3em;
}
.loginForm select {
    width: 85%;
    margin: 0 auto;
    display: block;
    padding: 10px;
    border: 0px solid #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 1em;
}
.loginForm a {
    color: red !important;
    font-size: 1.3em;
    text-decoration: underline !important;
}
.loginForm input[type=submit],
.loginForm input[type=button] {
    width: 36%;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Bold';
    border: 0px solid #00000000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
}
.popUpOk,
.loginForm input[type=submit],
.loginForm input[type=button] {
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 15px auto 20px;
    min-width: 150px;
    border: 0px solid #fff;
    height: 46px; 
    color: #fff;
    border-radius: 15px;
    font-size: 1em;
    font-family: 'DIN Pro Bold';
    cursor:pointer;
}

.loginForm input.crear-cuenta {
    background: #515151;
    background: -moz-linear-gradient(left, #515151 0%, #272727 100%);
    background: -webkit-linear-gradient(left, #515151 0%,#272727 100%);
    background: linear-gradient(to right, #515151 0%,#272727 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#272727',GradientType=1 );
    margin: 10px auto;
}

/**********************/
.modalForm {
    width: 80%;
    max-width: 600px;
    height: auto;
    background: #00000035;
    margin: 3% auto;
    border: 5px solid #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
}
.modalForm table tbody,
.modalForm table tbody tr,
.modalForm table tbody tr td,
.modalForm table {
    width: 100%;
    display: block;
}


.modalForm label {
    width: 80%;
    margin: 5px auto;
    display: block;
    text-align: left;
    font-size: 1.3em;
}

.modalForm input {
    width: 80%;
    margin: 0 auto;
    display: block;
    padding: 10px;
    border: 0px solid #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 1.3em;
}
.modalForm select {
    width: 85%;
    margin: 0 auto;
    display: block;
    padding: 10px;
    border: 0px solid #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 1em;
}
.modalForm a {
    color: #000;
    font-size: 1.3em;
}
.modalForm input[type=submit],
.modalForm input[type=button] {
    width: 200px;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Bold';
    border: 0px solid #00000000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
}
.modalForm input[type=submit],
.modalForm input[type=button] {
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 15px auto 20px;
}

.modalForm input.cancelar {
    background: #515151;
    background: -moz-linear-gradient(left, #515151 0%, #272727 100%);
    background: -webkit-linear-gradient(left, #515151 0%,#272727 100%);
    background: linear-gradient(to right, #515151 0%,#272727 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#272727',GradientType=1 );
    margin: 10px auto;
}
/*********************************/
a.regresarPagina,
button.regresarPagina {
    display: none;
    border: 0px solid #fff;
    background: #0000;
    color: #666;
    font-size: 1em;
    position: absolute;
    left: 7%;
    cursor: pointer;
    z-index: 99;
    top: 65px;
}
a.regresarPagina i,
button.regresarPagina i {
    font-family: FontAwesome;
    font-style: normal;
}

.tituloIco {
    text-align: center;
    vertical-align: middle;
    position: relative;
    margin: 3% auto;
}

.tituloIco img {
    display: inline-block;
    position:relative;
    vertical-align: middle;
}

.tituloIco .chatImg {
    display: inline-block;
    position:relative;
    vertical-align: middle;
    width: 50px;
    height: 50px;
}

.tituloIco h1 {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 50px;
    vertical-align: middle;
    font-family: 'DIN Pro Black';
}

.tituloIco .chat {
    display: inline-block;
    margin: 0;
    padding: 0;
    height: 30px;
    vertical-align: middle;
    font-size: 18px;
    font-family: 'DIN Pro Black';
}

.disponibleRecargas {
    font-family: 'DIN Pro Bold';
    text-align: center;
    font-size: 1.3em;
    display: block;
}

.disponibleSaldoPorta {
    font-family: 'DIN Pro Bold';
    text-align: center;
    font-size: 1.3em;
    display: grid !important;
}

.disponibleRecargasSaldo{
    font-family: 'DIN Pro Bold';   
}

.disponibleRecargas span {
    font-family: 'DIN Pro Bold';
}

.formRecargas {
    width: 40%;
    height: 100%;
    margin: 2% auto;
}

.formRecargas label {
    width: 80%;
    margin: 5px auto;
    display: block;
    text-align: left;
    font-size: 1.3em;
}

.formRecargas input {
    width: 80%;
    margin: 0 auto;
    display: block;
    padding: 10px;
    border: 0px solid #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 1.3em;
    background: #f3f3f2;
}

.formRecargas .selectmenu{
    width: 80%;
    margin: 0 auto;
    display: block;
    padding: 10px;
    border: 0px solid #fff;    
    text-align: center;
    font-size: 1.3em;
    background: #f3f3f2;
}

.formRecargas .formRecargasBtn {
    width: 30%;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Bold';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 25px auto 0;
    box-shadow: 0px 0px 0px #000 !important;
}

.formRecargas button.formRecargasBtn span {
    border:0px solid #fff !important;
    padding: 0px !important;
    background: #0000;
    box-shadow: 0px 0px 0px #000 !important;
    font-size: 1em;
}

.formRecargasConfirmar {
    max-width: 1000px;
    margin: 0 auto 50px;
    display: none;
}

.recargarNumero {
    width: 45%;
    background: #fff;
    margin: 80px auto 25px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
}

.recargarNumero p {
    font-family: 'DIN Pro Medium';
    font-size: 1.3em;
    text-indent: 35px;
}

.recargarNumero label {
    font-family: 'DIN Pro';
    font-size: 1.3em;
    width: 100%;
    display:block;
}

.confirmarRecarga {
    width: 45%;
    background: #fff;
    margin: 0 auto 25px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 20px;
}

.confirmarRecarga p {
    font-family: 'DIN Pro Medium';
    font-size: 1.3em;
    text-indent: 35px;
}

.confirmarRecarga label {
    font-family: 'DIN Pro';
    font-size: 1.3em;
    width: 100%;
    display:block;
}

.formRecargasConfirmar input.volver {
    float: left;
    background: #515151;
    background: -moz-linear-gradient(left, #515151 0%, #272727 100%);
    background: -webkit-linear-gradient(left, #515151 0%,#272727 100%);
    background: linear-gradient(to right, #515151 0%,#272727 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#272727',GradientType=1 );
    width: 150px;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Bold';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
}

.formRecargasConfirmar input.recargar {
    float: right;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    width: 150px;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Bold';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
}

.modalClaro {
    width: 600px;
    height: auto;
    background: #00000035;
    margin: 3% auto;
    border: 5px solid #fff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
}

.modalClaro img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 50px auto;
}

.modalClaro.recargaFallida img {
    margin: 35px auto;
}

.modalClaro p {
    font-family: 'DIN Pro Bold';
    font-size: 1.3em;
    width: 90%;
    margin: 0px auto 30px;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 20px #666;
}
.modalClaro p span {font-family: 'DIN Pro Bold';}

.modalClaro.recargaFallida p {
    width: 80%;
    margin: 0 auto 30px;
}

.modalClaro input[type=button] {
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 15px auto 20px;
    width: 36%;
    display: block;
    padding: 7px 0;
    color: #fff;
    font-family: 'DIN Pro Bold';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
}

.activacionRealizada, .activacionFallida, .recargaRealizada, .recargaFallida {
    display: none;
}

.formPaquetes {
    width: 65%;
    height: 330px;
    margin: 2% auto 2%;
    max-width: 1000px;
}

.formPaquetes label {
    width: 60%;
    margin: 5px auto;
    display: block;
    text-align: left;
    font-size: 1.3em;
}

.formPaquetes input {
    width: 60%;
    margin: 0 auto;
    display: block;
    padding: 13px;
    border: 0px solid #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 1.3em;
    background: #f3f3f2;
}

.formPaquetes input.recargar {
    width: 30%;
    min-width: 150px;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 25px auto 0;
}

.formPaquetes .wrapperTipoPaquete {
}

.formPaquetes .wrapperTipoPaquete p {
    font-size: 1.1em;
}

.formPaquetes .wrapperTipoPaquete .contBtnPaquete {
}

.formPaquetes .wrapperTipoPaquete .contBtnPaquete input {
    display:inline-block;
    border: 2px solid #fff;
    width: 23.666%;
    margin: 0 0.6666667%;
    height: 50px;
    border-radius: 9px;
    font-size: 1em;
    box-shadow: 1px 1px 10px #00033333;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: left center;
    background-color: #fff;
    background-size: contain;
    transition: all 0.3s ease;
}

.formPaquetes .wrapperTipoPaquete .contBtnPaquete input.seleccionado {
    border: 2px solid #f7121d;
}

.formPaquetes .wrapperTipoPaquete .contBtnPaquete input.paquete-voz {
    background-image: url('/javax.faces.resource/ico-paquete-voz.png.xhtml?ln=img');
}

.formPaquetes .wrapperTipoPaquete .contBtnPaquete input.paquete-datos {
    background-image: url('/javax.faces.resource/ico-paquete-datos.png.xhtml?ln=img');
}

.formPaquetes .wrapperTipoPaquete .contBtnPaquete input.paquete-mensaje {
    background-image: url('/javax.faces.resource/ico-paquete-mensajes.png.xhtml?ln=img');
}

.formPaquetes .wrapperTipoPaquete .contBtnPaquete input.paquete-todo {
    background-image: url('/javax.faces.resource/ico-paquete-todo.png.xhtml?ln=img');
}

.radioContainer {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    cursor: pointer;
    font-size: 1.1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.radioContainer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkmark {
    position: absolute;
    top: 1px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 0;
    border: 1px solid #666;
}

.radioContainer:hover input ~ .checkmark {
    background-color: #ccc;
}
.radioContainer input.checked ~ .checkmark,
.radioContainer input:checked ~ .checkmark {
    background-color: #000;
}

.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}
.radioContainer input.checked ~ .checkmark:after,
.radioContainer input:checked ~ .checkmark:after {
    display: block;
}

.radioContainer .checkmark:after {
    top: 9px;
    left: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #000;
}

.formSeleccionPaquete {
    max-width: 991px;
    width: 90%;
    margin: 0 auto 25px;
    clear: both;
    position: relative;
    overflow: hidden;
}

.formSeleccionPaquete label {
    width: 100%;
    display: block;
    font-size: 1em;
    color: #000;
}

.formSeleccionPaquete .ui-panelgrid-cell select {
    width: 100% !important;
    text-align: left;
    text-indent: 5px;
    font-size: 1em;
}

.formSeleccionPaquete .ui-panelgrid-cell div:first-child {
    width: 100%;
    background: #fff;
    padding: 0 !important;
}

.descPaqueteWrap .ui-panel {
    border: 0px solid #fff;
}

.ui-selectonemenu .ui-selectonemenu-trigger, .ui-selectcheckboxmenu .ui-selectcheckboxmenu-trigger{
    background: -webkit-linear-gradient(top, #c00 0%, #c00 100%) !important;
    border: 1px solid #c00 !important  ;
    box-shadow: inset 0 0 0 1px #c00 !important;
    top: 0 !important;
    height: 49px;
}
.formSeleccionPaquete select {
    width: 100%;
    margin: 0 auto 0px;
    display: block;
    padding: 10px 0;
    border: 0px solid #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 1.3em;
    background: #f3f3f2;
}

.formSeleccionPaquete input {
    width: 98%;
    margin: 0 auto 0px;
    display: block;
    padding: 10px 0;
    border: 0px solid #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 1.3em;
    background: #f3f3f2;
}

.confirmacionCompraPaquete .controllerPaquetes, .formSeleccionPaquete .controllerPaquetes {
    width: 95%;
    height: 50px;
    float: left;
    clear: both;
    margin: 10px 0 0;
}

.confirmacionCompraPaquete .controllerPaquetes input,
.formSeleccionPaquete .controllerPaquetes input {
    border: 0px solid #fff;
    color: #fff;
    font-family: 'DIN Pro Black';
    height: 50px;
    border-radius: 10px;
    margin: 15px 0;
    font-weight: bold;
    width: 150px;
    margin: 0 0;
    font-size: 1.1em;
    cursor: pointer;
}

.confirmacionCompraPaquete .controllerPaquetes input.volver,
.formSeleccionPaquete .controllerPaquetes input.volver {
    float: left;
    clear: left;
    background: #515151;
    background: -moz-linear-gradient(left, #515151 0%, #272727 100%);
    background: -webkit-linear-gradient(left, #515151 0%,#272727 100%);
    background: linear-gradient(to right, #515151 0%,#272727 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#272727',GradientType=1 );
}

.controllerPaquetes input.recargar,
.formSeleccionPaquete .controllerPaquetes input.recargar {
    float: right;
    clear: right;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 0 0;
}

.formSeleccionPaquete .paquetesDisponibles {
    width: 45%;
    float: left;
    clear: right;
    position: relative;
}

.formSeleccionPaquete .paquetesDisponibles p {
    font-size: 1.2em;
    font-weight: bold;
}

#accordionPaquetes .ui-accordion-content label {
    margin: 25px auto;
    width: 270px;
}

.formSeleccionPaquete .descPaquete {
    width: 45%;
    float: right;
    clear: right;
}

.formSeleccionPaquete .descPaquete strong {
    width: 100%;
    display: block;
    font-size: 1.1em;
}

.formSeleccionPaquete.propuestaSeleccion2 .descPaquete strong {
    width: 100%;
    display: block;
    font-size: 1.1em;
    margin: 40px 0 0;
}

.formSeleccionPaquete .descPaquete strong span {
    float: right;
}

.formSeleccionPaquete .descPaquete input.seguir {
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    border: 0px solid #fff;
    color: #fff;
    font-family: 'DIN Pro Bold';
    height: 45px;
    border-radius: 10px;
    float: right;
    margin: 15px 0;
    font-weight: bold;
    width: 80%;
    font-size: 1.1em;
    cursor: pointer;
}

.formSeleccionPaquete .descPaquete .descPaqueteWrap {
    border: 1px solid #999;
    border-radius: 10px;
    background: #fff;
    padding: 15px 25px;
    margin: 0 0 15px;
}

.formSeleccionPaquete.propuestaSeleccion2 .descPaquete .descPaqueteWrap {
    border: 1px solid #999;
    border-radius: 10px;
    padding: 15px 25px;
    margin: 0 0 15px;
    height: 430px;
}

.formSeleccionPaquete .descPaquete .descPaqueteWrap h3 {
    font-size: 1.2em;
    font-weight: bold;
}

.formSeleccionPaquete .descPaquete .descPaqueteWrap ul {
}

.formSeleccionPaquete .descPaquete .descPaqueteWrap ul li {
    font-size: 1.1em;
}

.formSeleccionPaquete .descPaquete .descPaqueteWrap ul li p {
    margin: 0 0 5px;
    font-weight: bold;
    font-size: 1.1em;
}

.formSeleccionPaquete .descPaquete .descPaqueteWrap ul li span {
    display: block;
    font-size: 1.1em;
}

.confirmacionCompraPaquete {
    max-width: 1000px;
    margin: 0 auto 50px;
    display: none;
}

.confirmacionCompraPaquete .descPaquete {
    width: 45%;
    background: #fff;
    margin: 0 auto 25px;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 30px;
}

.confirmacionCompraPaquete strong {
    width: 45%;
    margin: 10px auto 15px;
    display: block;
}

.confirmacionCompraPaquete strong span {
    float: right;
}

#accordionPaquetes {
}

#accordionPaquetes h3 {
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: left center;
    background-color: #f3f3f2;
    background-size: contain;
    padding: 0;
    height: 50px;
    line-height: 50px;
    text-indent: 50px;
    margin: 10px 0 0;
    border: 0px solid;
    font-family: 'DIN Pro Bold';
}

#accordionPaquetes h3:first-child {
    margin: 0 0;
}

#accordionPaquetes h3[aria-selected=true] {
    color: #000;
}

#accordionPaquetes h3.tituloPaqueteVoz {
    background-image: url('/javax.faces.resource/ico-paquete-voz.png.xhtml?ln=img');
}

#accordionPaquetes h3.tituloPaqueteDatos {
    background-image: url('/javax.faces.resource/ico-paquete-datos.png.xhtml?ln=img');
}

#accordionPaquetes h3.tituloPaqueteMensajes {
    background-image: url('/javax.faces.resource/ico-paquete-mensajes.png.xhtml?ln=img');
}

#accordionPaquetes h3.tituloPaqueteTodo {
    background-image: url('/javax.faces.resource/ico-paquete-todo.png.xhtml?ln=img');
}

#accordionPaquetes h3 span {
    display: none;
}

#accordionPaquetes div {
    overflow: hidden;
    padding: 0 !important;
    margin: 0 0 10px;
    height: 0px;
    transition:all 0.5s ease-in-out;
}

#accordionPaquetes div.ui-accordion-content-active {
    height: 260px !important;
}

.bannerTripleSaldo {
    flex-shrink: 0;
}

.seleccionTipoActivacion {
    max-width: 1100px;
    margin: 0 auto;
    width: 80%;
}

.seleccionTipoActivacion p {
    font-size: 2.3em;
    margin: 10px 1%;
}

.seleccionTipoActivacion .contBtnActivaciones {
    position: relative;
}

.seleccionTipoActivacion .contBtnActivaciones.large a {
    width: 30% !important;
}

.seleccionTipoActivacion .contBtnActivaciones a,
.seleccionTipoActivacion .contBtnActivaciones input {
    background-repeat: no-repeat !important;
    background-position: left center !important;
    background-color: #f3f3f2 !important;
    background-size: contain !important;
    border: 0px solid !important;
    border-radius: 10px !important;
    box-shadow: 1px 1px 10px #00033333 !important;
    cursor: pointer !important;
    font-family: 'DIN Pro Medium' !important;
    height: 50px !important;
    line-height: 50px !important;
    margin: 10px 1% 0 !important;
    padding: 0 !important;
    text-align: left !important;
    text-indent: 50px !important;
    vertical-align: top !important;
    width: 23% !important;
    display: inline-block;
    color: #333  !important;
}
.seleccionTipoActivacion .contBtnActivaciones a:last-child,
.seleccionTipoActivacion .contBtnActivaciones input:last-child {
    overflow: hidden;
    white-space: normal;
    text-indent: 0px;
    padding: 0 0 0 50px;
}

.seleccionTipoActivacion .contBtnActivaciones .kit {
    background-image: url('/javax.faces.resource/activaciones-kit.png.xhtml?ln=img');
}

.seleccionTipoActivacion .contBtnActivaciones .portabilidad {
    background-image: url('/javax.faces.resource/img/activaciones-portabilidad.png.xhtml');
}

.seleccionTipoActivacion .contBtnActivaciones .sim {
    background-image: url('/javax.faces.resource/img/activaciones-sim.png.xhtml');
}

.seleccionTipoActivacion .contBtnActivaciones .recarga {
    background-image: url('/javax.faces.resource/img/ico-titulo-recargas-paquetes.png.xhtml');
    background-size: 20px;
}

.seleccionTipoActivacion .contBtnActivaciones .modem {
    background-image: url('/javax.faces.resource/activaciones-modem.png.xhtml?ln=img');
}

.seleccionTipoActivacion .contBtnActivaciones .renovacion {
    background-image: url('/javax.faces.resource/activaciones-renovacion.png.xhtml?ln=img');
}

.scannerSIM {
    width: 80%;
    height: 60vh;
    margin: 0 auto;
    max-width: 1100px;
}

.scannerSIM p {
    font-size: 1.3em;
    margin: 10px auto;
    width: 75%;
}

.scannerSIM div {
    height: 60%;
    width: 75%;
    background: #000;
    margin: 0 auto;
}

.scannerSIM input {
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    width: 30%;
    min-width: 170px;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    margin: 25px auto;
}

.formWrapper {
    max-width: 1100px;
    margin: 0 auto;
    width: 80%;
}

.formWrapper p {
    font-size: 1.2em;
    margin: 2% 1.333%;
}

.formWrapper .formActivaciones {
    position: relative;
    vertical-align: top;
}

.formWrapper .formActivaciones label {
    width: 30%;
    display: inline-block;
    vertical-align: top;
    margin: 0 1.333% 20px;
    font-size: 1.2em;
    position: relative;
}

.formWrapper .formActivaciones .labelCheck {
    width: auto !important;
    display: inline-block;
    vertical-align: top;
    margin: 0 17px 20px -10px;
    font-size: 1.2em;
    position: relative;
}

.formWrapper .formActivaciones .checkbox {
    margin-left: 13px;
    width: 32px;
    height: 20px;
}

.formWrapper .formActivaciones label select, 
.formWrapper .formActivaciones label input, 
.formWrapper .formActivaciones label div.ui-selectonemenu{
    width: 100%;
    background-color: #f3f3f2;
    border: 0px solid;
    height: 50px;
    text-indent: 15px;
    border-radius: 5px;
    margin: 5px 0 0;
}

.formWrapper .formActivaciones label div.ui-selectonemenu {
    width: 100%;
    line-height: 35px;
    text-indent: 0;
    padding: 0 !important;
}

.formWrapper .formActivaciones label div.ui-selectonemenu label {
    width: 90%;
    background: #f3f3f2;
}

.formWrapper .formActivaciones label select {
    background: url('/javax.faces.resource/flecha.png.xhtml?ln=img') no-repeat 95% center #f3f3f2;
    background-size: 15px;
    -webkit-appearance: none;
    appearance: none;
}
.formWrapper .formActivaciones input[type=button],
.formWrapper .formActivaciones button {
    width: 200px;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 10px auto 30px;
}


.formActivaciones .portar{
    width: 200px;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 10px auto 30px;
}

.formWrapper .formActivaciones label .solicitarNip{    
    display: block;
    padding: 10px 0;
    color: #f7121d;
    font-family: 'DIN Pro Black';
    border: 0.1px solid #f7121d;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f3f3f2 0%, #ffffff 100%);
    background: -webkit-linear-gradient(left, #f3f3f2 0%,#ffffff 100%);
    background: linear-gradient(to right, #f3f3f2 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f2', endColorstr='#ffffff',GradientType=1 );    
}

.formWrapper .formActivaciones label .solicitarNip:disabled, .solicitarNip[disabled]{    
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0.1px solid #c4c4c4;
    border-radius: 10px;
    cursor: not-allowed;
    font-size: 1.3em;    
    background: #f7121d;
    background: -moz-linear-gradient(left, #bababa 0%, #bababa 100%);
    background: -webkit-linear-gradient(left, #bababa 0%,#bababa 100%);
    background: linear-gradient(to right, #bababa 0%,#bababa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#bababa',GradientType=1 );    
}


.wrapperTerminos .termsController input.portabilidadSig:disabled{
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0.1px solid #c4c4c4;
    border-radius: 10px;
    cursor: not-allowed;
    font-size: 1.3em;    
    background: #f7121d;
    background: -moz-linear-gradient(left, #bababa 0%, #bababa 100%);
    background: -webkit-linear-gradient(left, #bababa 0%,#bababa 100%);
    background: linear-gradient(to right, #bababa 0%,#bababa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#bababa',GradientType=1 );    
}

.formWrapper .formActivaciones input.activar{
    width: 200px;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 10px auto 30px;
}

.formWrapper .formActivaciones input.validar{
    width: 250px;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 10px auto 30px;
}

.miniformRenovacionPrepago {
    max-width: 1100px;
    width: 80%;
    margin: 0 auto;
}

.miniformRenovacionPrepago p {
    margin: 0 auto 15px;
    width: 95%;
}

.miniformRenovacionPrepago label {
    width: 45%;
    display: inline-block;
    margin: 0 2.33333333%;
    font-size: 1.3em;
}

.miniformRenovacionPrepago label input {
    width: 100%;
    padding: 10px;
    border: 0px solid #fff;
    border-radius: 5px;
    text-align: center;
    font-size: 1.3em;
    background: #f3f3f2;
    margin: 10px 0 25vh;
}

.miniformRenovacionPrepago .miniformController {
    width: 95%;
    margin: 0 auto;
}
.wrapperTerminos .termsController input,
.wrapperTerminos .termsController button,
.miniformRenovacionPrepago .miniformController button {
    border: 0px solid #fff;
    color: #fff;
    font-family: 'DIN Pro Black';
    height: 50px;
    border-radius: 10px;
    margin: 15px 0;
    font-weight: bold;
    width: 150px;
    margin: 0 0;
    font-size: 1.1em;
    cursor: pointer;
}
.wrapperTerminos .termsController input.volver,
.wrapperTerminos .termsController input.volver,
.miniformRenovacionPrepago .miniformController input.volver {
    float: left;
    clear: left;
    background: #515151;
    background: -moz-linear-gradient(left, #515151 0%, #272727 100%);
    background: -webkit-linear-gradient(left, #515151 0%,#272727 100%);
    background: linear-gradient(to right, #515151 0%,#272727 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#272727',GradientType=1 );
}

.wrapperTerminos .termsController input.portabilidadSig, .wrapperTerminos .termsController input.recargar, .miniformRenovacionPrepago .miniformController input.recargar {
    float: right;
    clear: right;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 0 0;
}

.wrapperTerminos {
    max-width: 1100px;
    margin: 0 auto 90px;
    width: 80%;
    text-align: justify;
}

.wrapperTerminos h1 {
    font-size: 1em;
}

.wrapperTerminos .termsController {
    width: 100%;
    margin: 0 auto;
}

.seleccionTipoServicio {
    max-width: 1100px;
    width: 80%;
    margin: 0 auto;
}

.seleccionTipoServicio p, .seleccionTipoServicio .contBtnServicios {
    width: 580px;
    margin: 0 auto 15px;
    display: block;
}

.seleccionTipoServicio .contBtnServicios input {
    background-repeat: no-repeat;
    background-position: left center;
    background-color: #f3f3f2;
    background-size: contain;
    border: 0px solid;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #00033333;
    cursor: pointer;
    font-family: 'DIN Pro Medium';
    height: 50px;
    line-height: 1;
    margin: 10px 1% 0;
    text-align: left;
    padding: 0 0 0 50px;
    vertical-align: top;
    width: 48%;
}

.seleccionTipoServicio .contBtnServicios input.bloqueo {
    background-image: url('/javax.faces.resource/activaciones-bloqueo.png.xhtml?ln=img');
}

.seleccionTipoServicio .contBtnServicios input.consulta {
    background-image: url('/javax.faces.resource/activaciones-consulta.png.xhtml?ln=img');
}

.seleccionAjuste {
    width: 500px;
    margin: 0 auto 15px;
    display: block;
}

.seleccionAjuste p {
    font-family: 'DIN Pro Medium';
}

.seleccionAjuste .contBtnAjustes {
}

.seleccionAjuste .contBtnAjustes button {
    background-repeat: no-repeat;
    background-position: left center;
    background-color: #f3f3f2;
    background-size: contain;
    border: 0px solid;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #00033333;
    cursor: pointer;
    font-family: 'DIN Pro Medium';
    height: 50px;
    line-height: 1;
    margin: 10px 1% 0;
    text-align: left;
    padding: 0 0 0 50px;
    vertical-align: top;
    width: 46%;
}

.seleccionAjuste .contBtnAjustes button[name=actualizar] {
    background-image: url('/javax.faces.resource/ajustes-actualizar.png.xhtml?ln=img');
}

.seleccionAjuste .contBtnAjustes button[name=cambiar] {
    background-image: url('/javax.faces.resource/ajustes-cambiar.png.xhtml?ln=img');
}

.seleccionReporte {
    max-width: 1100px;
    width: 80%;
    margin: 0 auto;
}

.seleccionReporte p {
    font-size: 1.3em;
}

.seleccionReporte .contBtnReportes {
    width: 100%;
    position: relative;
    margin: 0 auto 25px;
}

.seleccionReporte .contBtnReportes input {
    background-repeat: no-repeat;
    background-position: left center;
    background-color: #f3f3f2;
    background-size: contain;
    border: 0px solid;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'DIN Pro Medium';
    height: 50px;
    line-height: 1;
    margin: 10px 1.666%;
    text-align: left;
    padding: 0 0 0 50px;
    vertical-align: top;
    width: 30%;
}

.seleccionReporte .contBtnReportes input.ventas {
    background-image: url('/javax.faces.resource/img/reportes-ventas.png.xhtml');
}

.seleccionReporte .contBtnReportes input.sim {
    background-image: url('/javax.faces.resource/img/reportes-sim.png.xhtml');
}

.seleccionReporte .contBtnReportes input.inventarios {
    background-image: url('/javax.faces.resource/img/reportes-inventarios.png.xhtml');
}

.seleccionReporte .contBtnReportes input.proyeccion {
    background-image: url('/javax.faces.resource/reportes-proyeccion.png.xhtml?ln=img');
}

.seleccionReporte .contBtnReportes input.dias {
    background-image: url('/javax.faces.resource/reportes-dias.png.xhtml?ln=img');
}

.seleccionReporte .contBtnReportes input.incentivos {
    background-image: url('/javax.faces.resource/reportes-incentivos.png.xhtml?ln=img');
}

.controllerReportes {
    max-width: 1100px;
    width: 80%;
    display: block;
    margin: 0px auto 20px;
}

.controllerReportes p {
}

.controllerReportes select {
    width: 30%;
    background-color: #f3f3f2;
    border: 0px solid;
    height: 50px;
    padding: 0 15px;
    border-radius: 5px;
    margin: 5px 0 0;
    background: url('/javax.faces.resource/flecha.png.xhtml?ln=img') no-repeat 95% center #f3f3f2;
    font-family: 'DIN Pro Bold';
    background-size: 15px;
    -webkit-appearance: none;
    appearance: none;
}

.tablaReporte {
    margin: 0 auto;
    max-width: 1100px;
    width: 100%;
}

.tablaReporte table {
    border: 2px solid #fff;
    margin: 0;
    padding: 0;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
.tablaReporte table tbody input {
    text-align: center;
    background: #f7121d;
    color: #fff;
    padding: 0 15px;
    height: 40px;
    line-height: 40px;
    border: 0px solid;
    border-radius: 10px;
    cursor:pointer;
}
.tablaReporte table tfoot input {
    text-align: center;
    background: #f7121d;
    color: #fff;
    width: 160px;
    height: 40px;
    line-height: 40px;
    border: 0px solid;
    border-radius: 10px;
    cursor:pointer;
}

.tablaReporte table tr {
    border: 1px solid #ddd;
    padding: 0px;
}

.tablaReporte table tbody tr {
    background:#fff;
}
.tablaReporte table tbody tr:nth-child(2n+1) {
    background: #f3f3f2;
}
.ui-datatable table thead tr th,
.tablaReporte table th {
    padding: 10px !important;
    text-align: center;
    text-align: center;
    background: #f7121d !important;
    color: #fff !important;
}

.tablaReporte table td {
    padding: 10px;
    text-align: center;
    text-align: center;
    border-left: 1px solid #000;
}


.tablaReporte table th {
    font-size: 14px;
    letter-spacing: 0px;
    border-left: 1px solid #000;
}

.tablaReporte table td:first-child, .tablaReporte table th:first-child {
    border-left: 0px solid #000;
}

.controllerExportacion {
    margin: 20px auto 100px;
    max-width: 1100px;
    width: 65%;
}
tfoot input,
.controllerExportacion button {
    border: 0px solid #fff;
    color: #fff;
    font-family: 'DIN Pro Black';
    height: 50px;
    border-radius: 10px;
    margin: 15px 0;
    font-weight: bold;
    width: 190px;
    margin: 0 0;
    font-size: 1.1em;
    cursor: pointer;
}
tfoot input.volver,
.controllerExportacion button[name=volver] {
    float: left;
    clear: left;
    background: #515151 !important;
    background: -moz-linear-gradient(left, #515151 0%, #272727 100%) !important;
    background: -webkit-linear-gradient(left, #515151 0%,#272727 100%) !important;
    background: linear-gradient(to right, #515151 0%,#272727 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#515151', endColorstr='#272727',GradientType=1 ) !important;
}
tfoot input.exportar,
.controllerExportacion button[name=exportar] {
    float: right;
    clear: right;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 0 0;
}

.splash {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: url('/javax.faces.resource/splash.png.xhtml?ln=img') no-repeat center /cover;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    z-index: 9999999;
}

.splashMask {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: #ff000085;
    opacity: 1;
    transition: all 0.5s ease-in-out;
    z-index: 9999999;
}

.chatWrapper {
    width: 95%;
    height: 80vh;
    margin: 0 auto 25px;
    background: #000;
}

.seleccionAdmin {
    width: 75%;
    display:block;
    margin: 0 auto;
    max-width: 1100px;
}
.seleccionAdmin form a {
    width: 31.333%;
    display: inline-block;
    color: #666;
    background-repeat: no-repeat;
    background-position: 5px center;
    background-color: #f3f3f2;
    background-size: auto 85%;
    border: 0px solid;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #00033333;
    cursor: pointer;
    font-family: 'DIN Pro Medium';
    height: 50px;
    line-height: 50px;
    margin: 10px 1% 0;
    padding: 0;
    text-align: center;
}
.seleccionAdmin form a.adminNoticias {
    background-image: url('/javax.faces.resource/ico-reportes.png.xhtml?ln=img');
}
.seleccionAdmin form a.adminAdmin {
    background-image: url('/javax.faces.resource/ico-ajustes.png.xhtml?ln=img');
}
.seleccionAdmin form a.adminPaquetes {
    background-image: url('/javax.faces.resource/ico-paquetes.png.xhtml?ln=img');
}

table.formSeleccionPaquete {}
table.formSeleccionPaquete tr {}
table.formSeleccionPaquete tr td {
    float: left;
    width: 100%;
    position: relative;
    margin: 0 0 15px;
}
table.formSeleccionPaquete tr td label {
    cursor:pointer;
}
table.formSeleccionPaquete tr td input {
    display:none;
}

 .confirmacionCompraPaquete button {
    float: right;
    clear: right;
    background: #f7121d !important;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%) !important;
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%) !important;
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 0 0;
    border: 0px solid #fff;
    color: #fff !important;
    font-family: 'DIN Pro Black';
    height: 50px;
    border-radius: 10px;
    margin: 15px 0;
    font-weight: bold;
    width: 150px;
    margin: 0 0;
    font-size: 1.1em;
    cursor: pointer;
}

.confirmacionCompraPaquete .ui-button .ui-button-text {
    background: 0 !important;
    border-style: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'DIN Pro Black' !important;
    font-size: 1.2em !important;
}

.ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    margin-top: 100% !important;
}

.controllerReportes .ui-selectonemenu .ui-selectonemenu-trigger .ui-icon {
    margin-top: 50% !important;
}

.formWrapper .formActivaciones label input {
    padding: 0 !important;
    background: #f3f3f2;
}

.reporteLabelMobile {
    display: none;
}
.ui-datepicker .ui-datepicker-header {
    border: solid 1px #871717 !important;
    background: #c91515;
    background: -moz-linear-gradient(top, #c91515 0%, #b10b0b 100%) !important;
    background: -webkit-gradient(left top, left bottom, color-stop(0%, #c91515), color-stop(100%, #b10b0b)) !important;
    background: -webkit-linear-gradient(top, #c91515 0%, #b10b0b 100%) !important;
    background: -o-linear-gradient(top, #c91515 0%, #b10b0b 100%) !important;
    background: -ms-linear-gradient(top, #c91515 0%, #b10b0b 100%) !important;
    background: linear-gradient(to bottom, #c91515 0%, #b10b0b 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c91515', endColorstr='#b10b0b', GradientType=0 ) !important;
}

.ui-datepicker:hover, .ui-datepicker:focus {
    border: solid 1px #E12727 !important;
}

.consultaReporte, .consultaReporte span.ui-button-text {
    float: right;
    clear: right;
    background: #f7121d !important;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%) !important;
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%) !important;
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%) !important;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 ) !important;
    margin: 0 0;
    border: solid 0px #a83232;
    box-shadow: none;
    text-shadow: none;
}
.ui-button.ui-state-hover .ui-button-text, .ui-buttonset .ui-state-hover .ui-button-text{color:#fff;}

#dlgDet .ui-dialog-titlebar,
.ui-paginator.ui-paginator-top {
    display: none;
}

.ui-datatable .ui-paginator .ui-state-active, .ui-datatable .ui-paginator .ui-paginator-pages .ui-state-active {
    background-color: #E12727 !important;
    color: #ffffff !important;
    background-repeat: no-repeat;
    border: solid 1px #e12727 !important;
}
.ui-datepicker-header .ui-datepicker-prev-hover{
    background-color: #e12727; 
    left:3px; 
    top:3px;
}
.ui-datepicker-header .ui-datepicker-next-hover{
    background-color: #e12727; 
    right:3px; 
    top:3px;
}
.ui-datatable:hover, .ui-datagrid:focus {
    border: solid 1px #E12727 !important;
}

.ui-inputfield.ui-state-hover, .ui-inputfield.ui-state-focus{
    border:solid 1px #E12727; color:#E12727 !important;
}

.alignReport {
    max-width: 1100px;
    display: block;
    margin: 0 auto;
}

.alignIncentiveReport {
   max-width: 75%;
   display: flex;
   flex-direction: column;
   margin: 0 auto;
}

.rango1 input, .rango2 input {
    width: 130px;
    display: block;
    margin: 0 auto;
}
.RedButton .ui-button-text {
    box-shadow: none;
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%) !important;
    border: 0px solid #fff;
}

.RedButton.ui-button-icon-only .ui-icon.fa {
    margin-top: -6px !important;
}

.selectIncentiveContainer {
    padding-right: 10px;
    padding-left: 10px;
    display: flex;
    flex-direction: column
}

.selectIncentiveContainer select {
    width: 100%;
}

.myLittleMenu .ui-corner-right {
    height: 31px;
}

.myLittleMenu .ui-corner-right .ui-icon {
    margin-top: 8px !important;
}

#dlgDet {
    width: 100% !important;
    margin: 0;
    border-radius: 0;
    top: 0 !important;
}

#solNIP {
    width: 100% !important;
    margin: 0;
    border-radius: 0;
    top: 0 !important;
}

.excelLabel {
    vertical-align: top;
    cursor:pointer;
}  
.formSeleccionPaquete .paquetesDisponibles label {
    margin-left: 0px;
    width: 90%;
    height: 49px;
    line-height: 49px;
    padding: 0 10px !important;
}

.formSeleccionPaquete .paquetesDisponibles label.text-label-left {
    height: 20px;
    line-height: 1;
}

.DispFlex {
    display: flex;
}

.flexRow {
    flex-direction: row;
}

.flexColumn {
    flex-direction: column;
}

.justifyCenter {
    justify-content: center;
}

.alignCenter {
    align-items: center;
}

.margin10{
    margin-right: 10px;
}

.background-gradient {
    background: linear-gradient(to right, #f7121c 0%,#a61407 100%);
}

.box-estimate {
    padding: 10px;
    border-radius: 10px;
}

.box-estimate label {
    color: white;
    font-weight: bold !important;
}

/******************* Responsive media queries*/

@media (max-width: 2600px) {
    .tripleSaldoDesktop {
        width: 100%;
        bottom: -5px;
        margin: 0;
        position: relative;
        max-height: 200px;
    }
    .confirmacionCompraPaquete {
        max-width: 70%;
        margin: 0 auto 100px;
    }

    #desktopMenu {
        height: 75px;
    }

    #desktopMenu nav {
        max-width: 1200px;
        height: 60px;
        width: 100%;
    }

    #desktopMenu nav .headLogo {
        width: 120px;
    }

    #desktopMenu nav ul {
        height: 60px;
        line-height: 60px;
    }

    #desktopMenu nav ul li a {
        font-size: 1.1em;
    }

    .loginForm {
        width: 45%;
        margin: 2% auto;
    }

    .login-page h1 {
        font-size: 3em;
        margin: 20px auto 0px;
    }

    .login-page h2 {
        font-size: 2em;
    }

    .scannerSIM button, .seleccionReporte p, .seleccionReporte .contBtnReportes button, .miniformRenovacionPrepago label, .miniformRenovacionPrepago label input, .miniformRenovacionPrepago .miniformController button, .formWrapper .formActivaciones label, .formWrapper .formActivaciones label select, .formWrapper .formActivaciones label input, .formWrapper .formActivaciones button, .seleccionTipoActivacion p, .confirmarRecarga p, .confirmarRecarga label, .formRecargasConfirmar button[name=volver], .formRecargasConfirmar button[name=recargar], .loginForm label, .loginForm input, .loginForm button, .loginForm a {
        font-size: 1.1em;
    }

    .formRecargasConfirmar {
        max-width: 70%;
        margin: 0 auto 100px;
    }
}

@media (max-width: 1200px) {
    .tablaReporte {
        margin: 0 auto;
        max-width: 1100px;
        width: 90%;
    }
    .formPaquetes {
        width: 80%;
    }

    .tituloIco {
        margin: 5% auto;
    }

    #desktopMenu nav ul li {
        margin: 0 0 0 2%;
    }

    #desktopMenu nav {
        max-width: 1100px;
        height: 60px;
        width: 90%;
    }

    #desktopMenu nav .headLogo {
        width: 120px;
    }

    #desktopMenu nav ul {
        height: 60px;
        line-height: 60px;
    }

    #desktopMenu nav ul li a {
        font-size: 1.1em;
    }

    .loginForm {
        width: 45%;
        margin: 2% auto;
    }

    .login-page h1 {
        font-size: 3em;
        margin: 20px auto 0px;
        background: #fff;
    }

    .login-page h2 {
        font-size: 2em;
    }

    .controllerExportacion button, .loginForm label, .loginForm input, .loginForm button, .loginForm a {
        font-size: 1em;
    }

    button[name=regresarPagina] {
        left: 10%;
    }
}

@media (max-width: 1024px) {
    .formSeleccionPaquete label {
        font-size: 1em;
    }
    .seleccionAdmin {
        width: 85%;
        display: block;
        margin: 0 auto;
    }
    .controllerReportes select {
        width: 40%;
    }
    .controllerExportacion {
        width: 80%;
    }
    .controllerExportacion button {
        width: 170px;
    }

    .tituloIco {
        margin: 6% auto;
    }

    .formRecargas {
        width: 60%;
        height: 375px;
        margin: 2% auto;
    }
    .scannerSIM button,
    .controllerExportacion button,
    .seleccionReporte p,
    .seleccionReporte .contBtnReportes button,
    .miniformRenovacionPrepago label,
    .miniformRenovacionPrepago label input,
    .miniformRenovacionPrepago .miniformController button,
    .formWrapper .formActivaciones label,
    .formWrapper .formActivaciones label select,
    .formWrapper .formActivaciones label input,
    .formWrapper .formActivaciones button,
    .seleccionTipoActivacion p,
    .confirmarRecarga p,
    .confirmarRecarga label,
    .formRecargasConfirmar button[name=volver],
    .formRecargasConfirmar button[name=recargar],
    .loginForm label,
    .loginForm input,
    .loginForm button,
    .loginForm a,
    .radioContainer,
    .formSeleccionPaquete
    .paquetesDisponibles p,
    .formSeleccionPaquete .descPaquete strong,
    .formSeleccionPaquete .descPaquete input.seguir,
    .confirmacionCompraPaquete .controllerPaquetes input,
    .formSeleccionPaquete .controllerPaquetes input,
    .formSeleccionPaquete .descPaquete .descPaqueteWrap h3,
    .formSeleccionPaquete .descPaquete .descPaqueteWrap ul li,
    .formSeleccionPaquete .descPaquete .descPaqueteWrap ul li p,
    .formSeleccionPaquete .descPaquete .descPaqueteWrap ul li span {
        font-size: 1em;
    }
    ::-webkit-input-placeholder { /* Chrome/Opera/Safari */
        font-size: 1em;
    }
    ::-moz-placeholder { /* Firefox 19+ */
        font-size: 1em;
    }
    :-ms-input-placeholder { /* IE 10+ */
        font-size: 1em;
    }
    :-moz-placeholder { /* Firefox 18- */
        font-size: 1em;
    }
}

@media (max-width: 991px) {
    .formSeleccionPaquete .paquetesDisponibles label {
        margin: 0 !important;
    }
    .controllerReportes, .tablaReporte {
        width: 90%;
    }

    .seleccionReporte, .wrapperTerminos, .formWrapper {
        width: 90%;
    }

    .formWrapper .formActivaciones label {
        width: 46%;
        margin: 0 1.666% 20px;
        overflow: hidden;
        border-radius: 5px;
    }

    .seleccionTipoActivacion {
        width: 70%;
    }

    .seleccionTipoActivacion .contBtnActivaciones input {
        width: 45%;
        margin: 10px 1.3333%;
    }

    .formSeleccionPaquete .descPaquete {
        width: 50%;
    }

    .formSeleccionPaquete .descPaquete .descPaqueteWrap ul {
        padding: 0 0 0 15px;
    }



    .formPaquetes {
        width: 90%;
        margin: 35px auto;
    }

    .modalClaro {
        width: 75%;
        height: auto;
        margin: 3% auto;
        padding: 20px;
    }

    .modalClaro img {
        width: 50px;
        height: 50px;
        display: block;
        margin: 25px auto;
    }

    .modalClaro.recargaFallida img {
        margin: 15px auto 20px;
    }

    .modalClaro p {
        font-size: 1.5em;
        width: 90%;
        margin: 0 auto 50px;
    }

    .modalClaro.recargaFallida p {
        width: 80%;
        margin: 0 auto 30px;
    }

    .modalClaro button {
        margin: 15px auto 20px;
        width: 36%;
        font-size: 1.1em;
    }

    button[name=regresarPagina] {
        display: none;
        width: 0px;
        height: 0;
        overflow: hidden;
    }

    .confirmacionCompraPaquete .descPaquete, .confirmarRecarga {
        width: 65%;
    }

    .loginForm {
        width: 60%;
        margin: 2% auto 5%;
    }

    .loginForm button {
        width: 40%;
        font-size: 0.9em;
    }

    #desktopMenu nav ul {
        display: none;
    }

    #desktopMenu nav .headLogo {
        position: relative;
        display: block;
        margin: 0 auto;
    }

    #desktopMenu nav .mobileMenu {
        display: block;
        position: absolute;
        top: 10px;
    }

    #sidebarMenu {
        height: 100%;
        width: 0%;
        position: fixed;
        z-index: 999;
        top: 0;
        left: 0;
        background-color: #fff;
        overflow-x: hidden;
        transition: 0.5s;
        box-shadow: 0px 0px 15px #999;
        display: block;
    }

    .tablaReporte table {
        border: 0;
    }

    .tablaReporte table thead {
        display: none;
    }

    .tablaReporte table tr {
        margin-bottom: 0;
        display: block;
        border: 0px solid;
    }

    .tablaReporte table td {
        display: block;
        text-align: right;
        border: 0px solid #ccc;
        background-color: #fff;
        padding: 0;
        height: 30px;
        text-indent: 10px;
        line-height: 30px;
        font-size: 0.8em;
    }

    .tablaReporte table td:nth-child(2n+1) {
        background: #f3f3f2;
    }

    .tablaReporte table td span {
        width: 50%;
        height: 100%;
        float: right;
        text-indent: 20px;
        text-align: left;
        border-left: 1px solid #000;
        font-family: 'DIN Pro';
    }

    .tablaReporte table td:first-child span {
        width: 100%;
        border: 0px solid;
        text-align: center;
        text-indent: 0px;
        font-family: 'DIN Pro Bold';
    }

    .tablaReporte table tbody td:first-child {
        width: 100%;
        text-align: center;
        background: #f7121d;
        color: #fff;
        padding: 0;
        height: 30px;
        line-height: 30px;
    }

    .tablaReporte table tfoot td:first-child {
        width: 100%;
        text-align: center;
        background: #fff0;
        color: #fff;
        padding: 0;
        height: 60px;
        line-height: 60px;
    }

    .tablaReporte table td:first-child:before {
        display: none;
    }

    .tablaReporte table td:last-child {
        border-bottom: 0;
    }

    .tablaReporte table td:before {
        content: attr(data-label);
        float: left;
    }

    .controllerReportes select {
        width: 100%;
    }
    .seleccionReporte .contBtnReportes input {
        width: 46%;
    }

    .seleccionTipoActivacion .contBtnActivaciones a, .seleccionTipoActivacion .contBtnActivaciones input {
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-color: #f3f3f2 !important;
        background-size: contain !important;
        border: 0px solid !important;
        border-radius: 10px !important;
        box-shadow: 1px 1px 10px #00033333 !important;
        cursor: pointer !important;
        font-family: 'DIN Pro Medium' !important;
        height: 50px !important;
        line-height: 50px !important;
        margin: 10px 1% 0 !important;
        padding: 0 !important;
        text-align: left !important;
        text-indent: 50px !important;
        vertical-align: top !important;
        width: 48% !important;
        display: inline-block;
        color: #333 !important;
    }
}

@media (max-width: 768px) {
    .reporteLabelMobile {
        display: block;
    }
    .reporteLabelDesktop {
        display: none;
    }
    .seleccionReporte .contBtnReportes button {
        width: 47%;
    }

    .miniformRenovacionPrepago .miniformController {
        width: 100%;
    }

    .miniformRenovacionPrepago {
        width: 90%;
    }

    .miniformRenovacionPrepago label {
        width: 100%;
        margin: 0;
    }

    .miniformRenovacionPrepago label input {
        margin: 10px auto 20px;
    }

    .formPaquetes .wrapperTipoPaquete .contBtnPaquete button {
        border: 0px solid #fff;
        width: 23%;
        height: auto;
        border-radius: 9px;
        font-size: 0.8em;
        margin: 0 0 0 0.666%;
        padding: 70px 0 10px 0;
        background-repeat: no-repeat;
        background-position: top center;
        background-color: #fff;
        background-size: 50%;
    }

    .formPaquetes label {
        width: 100%;
        font-size: 1.1em;
    }

    .formPaquetes input {
        width: 100%;
        margin: 0 auto 15px;
        font-size: 1.1em;
    }

    .formPaquetes button[name=recargar] {
        width: 60%;
        max-width: 200px;
    }

    .bannerTripleSaldo {
        position: relative;
        bottom: 0;
    }

    .tripleSaldoTablet {
        display: block;
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
        bottom: 0;
    }
}
@media (max-width: 768px) {
    .tituloIco {
        margin: 4% auto !important;
    }
    .seleccionAdmin form a {
        width: 100%;
        margin: 1% 1% 3%;
    }
    .formPaquetes .wrapperTipoPaquete .contBtnPaquete input {
        background-size: 35px;
    }
}
@media (max-width: 744px) {
    .consultaReporte, .consultaReporte span, .rango1 input, .rango2 input {
        margin: 0 auto;
        display: block;
        float:none;
    }
    #tblReporte table tbody tr td:first-child {
        background: #f7121d;
        color: #fff;
    } 
}
@media (max-width: 700px) {
    #footerSlider .slick-arrow {
        top: 33%;
    }
    #footerSlider .slick-arrow i {
        font-size: 1.2em;
    }
    .formSeleccionPaquete .descPaquete strong,
    .formSeleccionPaquete .descPaquete .descPaqueteWrap {
        width: 88%;
        margin: 20px auto;
    }
    .formPaquetes .wrapperTipoPaquete .contBtnPaquete input {
        width: 48.666%;
        margin: 10px 0.6666667%;
    }

    .formSeleccionPaquete .paquetesDisponibles, .formSeleccionPaquete .descPaquete {
        width: 100%;
        float: none;
        clear: none;
        position: relative;
        display: block;
    }


    .seleccionTipoActivacion .contBtnActivaciones a, .seleccionTipoActivacion .contBtnActivaciones input {
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-color: #f3f3f2 !important;
        background-size: contain !important;
        border: 0px solid !important;
        border-radius: 10px !important;
        box-shadow: 1px 1px 10px #00033333 !important;
        cursor: pointer !important;
        font-family: 'DIN Pro Medium' !important;
        height: 50px !important;
        line-height: 50px !important;
        margin: 10px 1% 0 !important;
        padding: 0 !important;
        text-align: left !important;
        text-indent: 50px !important;
        vertical-align: top !important;
        width: 48% !important;
        display: inline-block;
        color: #333 !important;
    }
}

@media (max-width: 640px) {

    .resultReporte table tbody tr td:first-child {
        background: #f7121d !important;
        color: #fff;
    }

    table.footerResultReport tbody tr td:first-child {
        background: transparent !important;
    }
    .ui-datatable-reflow .ui-datatable-data td[role="gridcell"] .ui-column-title {
        min-width: 45% !important;
    }
}
@media (max-width: 600px) {
    .formRecargasConfirmar input {
        max-width: 120px;
        font-size: 0.9em !important;
    }
    .seleccionAjuste .contBtnAjustes input,
    .seleccionTipoServicio .contBtnServicios input {
        font-family: 'DIN Pro';
        height: 50px;
        line-height: 1;
        margin: 10px 1% 0;
        padding: 0 0 0 40px;
        font-size: 0.8em;
    }
    .seleccionTipoServicio .contBtnServicios input {
        width: 255px;
        margin: 0 auto 10px;
        display: block;
    }
    .controllerExportacion {
        width: 85%;
    }

    .controllerExportacion button {
        width: 45%;
        font-size: 0.8em;
        height: 40px;
    }

    .seleccionTipoServicio {
        width: 90%;
    }

    .seleccionTipoServicio p, .seleccionTipoServicio .contBtnServicios {
        width: 100%;
    }
    .seleccionAjuste {
        width: 90%;
    }

    #accordionPaquetes .ui-accordion-content label {
        width: 225px;
        font-size: 0.9em;
    }

    .formWrapper .formActivaciones label {
        width: 100%;
        margin: 0 0 20px;
    }

    .scannerSIM {
        width: 100%;
    }

    .scannerSIM div {
        height: 70%;
        width: 90%;
    }

    .confirmacionCompraPaquete strong {
        width: 90%;
    }

    .confirmacionCompraPaquete {
        max-width: 100%;
    }

    .formSeleccionPaquete .descPaquete input.seguir {
        width: 100%
    }

    .formSeleccionPaquete .descPaquete .descPaqueteWrap {
        border: 0px solid #999;
        margin: 45px 0 10px;
        height: auto !important;
    }


    .formSeleccionPaquete .descPaquete {
        margin: 20px 0 0;
    }

    .confirmacionCompraPaquete .controllerPaquetes, .formSeleccionPaquete .controllerPaquetes {
        padding: 0 15px;
    }

    .confirmacionCompraPaquete .controllerPaquetes input, .formSeleccionPaquete .controllerPaquetes input {
        width: 45%;
    }

    .formPaquetes .wrapperTipoPaquete .contBtnPaquete button {
        background-size: 75%;
    }

    .confirmacionCompraPaquete .descPaquete h3 {
        font-size: 1.1em;
    }

    .confirmacionCompraPaquete .descPaquete ul {
        padding: 0 0 0 20px;
    }

    .confirmacionCompraPaquete .descPaquete ul li p {
        font-weight: bold;
        color: #000;
    }

    .confirmacionCompraPaquete .descPaquete ul li p span {
        display: block;
        color: #ccc;
    }

    .confirmacionCompraPaquete .descPaquete, .modalClaro {
        padding: 0 0 0 20px;

        height: auto;
        margin: 3% auto;
        padding: 20px;
    }

    .modalClaro img {
        width: 50px;
        height: 50px;
        display: block;
        margin: 25px auto;
    }

    .modalClaro.recargaFallida img {
        margin: 15px auto 20px;
    }

    .modalClaro p {
        font-size: 1.5em;
        width: 90%;
        margin: 0 auto 30px;
    }

    .modalClaro.recargaFallida p {
        width: 90%;
        margin: 0 auto 30px;
    }

    .modalClaro button {
        margin: 15px auto 20px;
        width: 36%;
        font-size: 1.1em;
    }

    .formRecargas, .loginForm {
        width: 100%;
        height: 100%;
        margin: 0% auto 3%;
        background: #00000000;
        border: 0px solid #fff;
        padding: 0px;
    }

    .loginForm form {
        padding: 10px 20px;
    }

    .login-page h2 {
        font-size: 2em;
        background: #fff;
        padding: 0 0 20px;
    }

    .tituloIco {
        text-align: center;
        vertical-align: middle;
        position: relative;
        margin: 2% auto 4%;
        background: #fff;
        padding: 25px 15px;
    }

    .tituloIco img {
        display: block;
        margin: 0 auto;
        width: 65px;
    }

    .tituloIco h1 {
        margin: 0;
        padding: 0;
        height: auto;
        vertical-align: middle;
        background: #fff;
    }

    .disponibleRecargas, .formRecargas label, .formRecargas input {
        font-size: 1.1em;
    }

    .formRecargas input {
        background: #fff;
    }

    .formRecargas button {
        width: 180px !important;
    }

    body {
        margin-bottom: 0px;
    }

    .formRecargasConfirmar {
        max-width: 90%;
        margin: 0 auto 100px;
    }

    .confirmarRecarga {
        width: 85%;
    }

    .formRecargasConfirmar button[name=volver] {
        margin: 0 0 0 10%;
        width: 120px;
        font-size: 14px;
        padding: 7px 0;
    }

    .formRecargasConfirmar button[name=recargar] {
        margin: 0 10% 0 0;
        width: 120px;
        font-size: 14px;
        padding: 7px 0;
    }
}
@media (max-width: 550px) {
    .seleccionReporte .contBtnReportes input {
        width: 90%;
        margin: 0 auto 10px;
        display: block;
        font-size: 1em;
    }
}
@media (max-width: 500px) {
    #footerSlider .slick-arrow {
        top: 45%;
    }
    a.regresarPagina {
        width: 70px;
        overflow: hidden;
        height: 20px;
    }

    #desktopMenu, #desktopMenu nav {
        height: 60px;
    }
    
    .nameTopbar {
    margin-top: 0px !important;
}

    #desktopMenu nav .mobileMenu {
        top: 5px;
    }

    #desktopMenu nav .headLogo {
        width: 75px;
        margin: 0 auto;
        padding: 5px 0 0;
    }

    .loginForm label, .loginForm input {
        width: 95%;
    }

    .seleccionTipoActivacion {
        width: 90%;
    }

    .seleccionTipoActivacion .contBtnActivaciones input {
        width: 43%;
        margin: 15px 3%;
    }
}

@media (max-width: 375px) {
    .controllerExportacion {
        width: 90%;
    }
    .wrapperTerminos .termsController button, .miniformRenovacionPrepago .miniformController button {
        width: 45%;
    }

    .seleccionTipoActivacion {
        width: 90%;
    }

    .seleccionTipoActivacion .contBtnActivaciones input {
        width: 46%;
        margin: 15px 1%;
        font-family: 'DIN Pro Medium';
        font-size: 0.8em !important;
    }

    .formPaquetes .wrapperTipoPaquete .contBtnPaquete input.paquete-todo {
        padding: 12px 5px 10px 5px;
        vertical-align: top;
    }
}

@media (max-width: 360px) {
    .formPaquetes .wrapperTipoPaquete .contBtnPaquete input {
        background-size: 30px;
    }
    .tablaReporte table td span {
        width: 40%;
    }

    .seleccionReporte .contBtnReportes input {
        width: 100%;
        font-size: 1em;
    }

    .formPaquetes .wrapperTipoPaquete .contBtnPaquete input.paquete-todo {
        padding: 12px 3px 10px;
        vertical-align: top;
    }
}

@media (max-height: 1080px) {
    body:before {
        background: linear-gradient(to bottom, #fff, #fff 44%, #ccc 44%);
    }

    body:after {
        background-size: 60%;
    }
}

@media (max-height: 1024px) {
    body:before {
        background: linear-gradient(to bottom, #fff, #fff 40%, #ccc 40%);
    }

    body:after {
        background-size: 60%;
    }
}

@media (max-height: 990px) {
    body:before {
        background: linear-gradient(to bottom, #fff, #fff 47%, #ccc 47%);
    }

    body:after {
        background-size: 50%;
    }
}

@media (max-height: 900px) {
    body:before {
        background: linear-gradient(to bottom, #fff, #fff 40%, #ccc 0%);
    }

    body:after {
        background-size: 60%;
    }
}

@media (max-height: 800px) {
    body:before {
        background: linear-gradient(to bottom, #fff, #fff 33%, #ccc 0%);
    }

    body:after {
        background-size: 50%;
    }
}

@media (max-height: 700px) {
    .tripleSaldoDesktop {
        width: 100%;
        bottom: -5px;
        margin: 0;
        position: relative;
        max-height: 200px;
        min-height: 200px;
    }
}

@media (max-height: 1024px) and (max-width: 768px) {
    body:before {
        background: linear-gradient(to bottom, #fff, #fff 29%, #ccc 0%);
    }

    body:after {
        background-size: 80%;
    }
}

@media (max-height: 900px) and (max-width: 600px) {
    body:before {
        background: linear-gradient(to bottom, #fff, #fff 25%, #ccc 25%);
    }

    body:after {
        background-size: 100%;
        background-position-y: 100%;
    }

    .bannerTripleSaldo {
        position: relative;
        bottom: 0px;
    }

    .seleccionTipoActivacion .contBtnActivaciones a,
    .seleccionTipoActivacion .contBtnActivaciones input {
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-color: #f3f3f2 !important;
        background-size: contain !important;
        border: 0px solid !important;
        border-radius: 10px !important;
        box-shadow: 1px 1px 10px #00033333 !important;
        cursor: pointer !important;
        font-family: 'DIN Pro Medium' !important;
        height: 50px !important;
        line-height: 50px !important;
        margin: 10px 1% 0 !important;
        padding: 0 !important;
        text-align: left !important;
        text-indent: 50px !important;
        vertical-align: top !important;
        width: 48% !important;
        display: inline-block;
        color: #333  !important;
    }

}

@media (max-height: 680px) and (max-width: 600px) {
    .bannerTripleSaldo {
        position: relative;
        margin: 30px 0 0;
    }

    .tripleSaldoMobile {
        width: 100%;
        bottom: 0;
        margin: 0;
        position: relative;
        display: block;
    }
    #sidebarMenu ul li {
        height: 65px;
    }


    .seleccionTipoActivacion .contBtnActivaciones a,
    .seleccionTipoActivacion .contBtnActivaciones input {
        background-repeat: no-repeat !important;
        background-position: left center !important;
        background-color: #f3f3f2 !important;
        background-size: contain !important;
        border: 0px solid !important;
        border-radius: 10px !important;
        box-shadow: 1px 1px 10px #00033333 !important;
        cursor: pointer !important;
        font-family: 'DIN Pro Medium' !important;
        height: 50px !important;
        line-height: 50px !important;
        margin: 10px 1% 0 !important;
        padding: 0 !important;
        text-align: left !important;
        text-indent: 50px !important;
        vertical-align: top !important;
        width: 98% !important;
        display: inline-block;
        color: #333  !important;
    }

}


.wrapperTerminos .terminos{
    background:rgba(255, 255, 255, .7);
    border-radius: 5px;
}

.aceptarTerminos{
    text-align: center;
}

.formPortabilidad {

    margin: 0 auto 50px;
    display: none;
}

.formRecargas .ui-selectonemenu {
    width: 75%;
    margin: 0 auto;
    display: block;
    padding: 0 14px !important      
        border: 0;
    text-align: center;    
    background: #f3f3f2;
    font-size: 1em;
    color: #000;
}


.formSeleccionPaquete .formRecargasBtn {
    width: 30%;
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Bold';
    border: 0px solid #0000;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 25px auto 0;
    box-shadow: 0px 0px 0px #000 !important;
}


.controllerPaquetes input.recargar,
.formSeleccionPaquete .controllerPaquetes input.ingresar {
    float: right;
    clear: right;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    margin: 0 0;
}

.myTable {
    border: 1px solid #ccc;
    border-radius: 5px;
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    width: 100%;
    table-layout: auto;
}

.myTable caption {
    font-size: 1.5em;
    margin: .5em 0 .75em;
}

.myTable tr {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    padding: .35em;
}

.myTable th,
.myTable td {
    padding: .625em;
    text-align: left;
}

.myTable th {
    font-size: .85em;
    letter-spacing: .1em;
    text-transform: uppercase;
}

@media screen and (max-width: 600px) {
    .myTable {
        border: 0;
    }

    .myTable caption {
        font-size: 1.3em;
    }

    .myTable thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }

    .myTable tr {
        border-bottom: 3px solid #ddd;

        margin-bottom: .625em;
    }

    .myTable td {
        border-bottom: 1px solid #ddd;
        display: block;        
        font-size: .8em;
        text-align: right;
    }

    .myTable td::before {
        /*
        * aria-label has no advantage, it won't be read inside a table
        content: attr(aria-label);
        */
        content: attr(data-label);
        float: left;
        color:black;
        font-weight: bold;
        text-transform: uppercase;
    }

    .myTable td:last-child {
        border-bottom: 0;
    }
}

.formWrapper .formActivaciones .activar{    
    display: block;
    padding: 10px 0;
    color: #f7121d;
    font-family: 'DIN Pro Black';
    border: 0.1px solid #f7121d;
    border-radius: 10px;
    font-size: 1.3em;
    cursor: pointer;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f3f3f2 0%, #ffffff 100%);
    background: -webkit-linear-gradient(left, #f3f3f2 0%,#ffffff 100%);
    background: linear-gradient(to right, #f3f3f2 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f3f3f2', endColorstr='#ffffff',GradientType=1 );    
}

.formWrapper .formActivaciones .activar:disabled, .activar[disabled]{    
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0.1px solid #c4c4c4;
    border-radius: 10px;
    cursor: not-allowed;
    font-size: 1.3em;    
    background: #f7121d;
    background: -moz-linear-gradient(left, #bababa 0%, #bababa 100%);
    background: -webkit-linear-gradient(left, #bababa 0%,#bababa 100%);
    background: linear-gradient(to right, #bababa 0%,#bababa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#bababa',GradientType=1 );    
}

.formWrapper .formActivaciones .portar:disabled, .portar[disabled]{    
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0.1px solid #c4c4c4;
    border-radius: 10px;
    cursor: not-allowed;
    font-size: 1.3em;    
    background: #f7121d;
    background: -moz-linear-gradient(left, #bababa 0%, #bababa 100%);
    background: -webkit-linear-gradient(left, #bababa 0%,#bababa 100%);
    background: linear-gradient(to right, #bababa 0%,#bababa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#bababa',GradientType=1 );    
}

#frmConfirmar .formRecargasBtn:disabled, #frmConfirmar .formRecargasBtn[disabled]{    
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0.1px solid #c4c4c4;
    border-radius: 10px;
    cursor: not-allowed;
    font-size: 1.3em;    
    background: #f7121d;
    background: -moz-linear-gradient(left, #bababa 0%, #bababa 100%);
    background: -webkit-linear-gradient(left, #bababa 0%,#bababa 100%);
    background: linear-gradient(to right, #bababa 0%,#bababa 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#bababa',GradientType=1 );    
}

.formWrapper .formActivaciones .ui-button .ui-button-text{
background: 0 !important;
border-style: none !important;
border: none !important;
box-shadow: none !important;
font-family: 'DIN Pro Black' !important;
font-size: 1.2em !important;
}

.main-wrapper{
    background: #00000035;
    border: 5px solid #fff;
    border-radius: 15px;
    margin: 3% auto;
    height: auto;
    width: 40%;
}

.main-wrapper img{
    display: block;
    height: 50px;
    margin: 25px auto;
    width: 50px;
}

.main-wrapper > p{
    color: #fff;
    text-align: center;
    margin: 15px 15px;
}

.container-forms{
    margin: auto;
    width: 60%;
}

.form_email label{
    display: block;
    font-size: 1.3em;
    text-align: left;
}

.form_email__input{
    border: 0px solid #fff;
    border-radius: 5px;
    display: block;
    font-size: 1.3em;
    text-align: center;
    margin: 5px auto;
    margin: 0;
    width: 100%;
}

.form_email__button{
    display: block;
    margin: 20px auto;
}

.form_buttons{
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
    justify-content: center;
    margin: 10px auto;
}

.button__color_style{
    color: #fff !important; 
    cursor: pointer;
    background: #f7121d;
    background: -moz-linear-gradient(left, #f7121d 0%, #a61407 100%);
    background: -webkit-linear-gradient(left, #f7121d 0%,#a61407 100%);
    background: linear-gradient(to right, #f7121d 0%,#a61407 100%);
    box-shadow: 0px 0px 0px #000;
    border: 0px solid #000000;
    border-radius: 10px;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7121d', endColorstr='#a61407',GradientType=1 );
    font-family: 'DIN Pro Bold'; 
    font-weight: bolder;
    font-size:1em; 
    text-align: center;
    padding: 10px;
    width: 30%;
}

@media (max-width: 900px){
    .button__color_style{
        font-size: 0.8em;
        padding: 5px;
        width: 60%;
    }
}

@media (max-width: 600px){
    .main-wrapper{
        font-size: 1.1em;
        width: 90%;
    }

    .container-forms{
        width: 95%;
    }

    .form_email__button{
        margin-top: 30px;
    }
    
    .form_buttons{
        margin-top: 35px;
    }
    
    .form_buttons a{
        width: 40%;
    }
    
    .button__color_style{
        font-size: 1.1em;
    }
}

#form_search{
    border: 1px solid black;
}

#form_result{
    border: 1px solid red;
    text-align: center;
}

#form_result *{
    display: block;
    margin: 0;
    padding: 0;
}

.nameTopbar {
    margin-top: -7px;
    color: white;
    font-family: 'DIN Pro Medium' !important;
    margin-left: 9px;
}

.nameTopbarSideMenu {
    margin-top: -7px;
    color: black;
    font-family: 'DIN Pro Medium' !important;
    margin-left: 9px;
    font-size: 1em !important;
}
.fixFontSize {
    font-size: 1.0em !important;
    margin: 0px 1.333% !important;
    font-family: 'DIN Pro' !important;
}

.carouselNoticias .ui-carousel-viewport {
    margin-top: -9px !important;
}

.carouselNoticias .ui-carousel-header {
    display: none !important;
}


.stylePopup {
    top: 372.305px !important;
}

.btn-popups {
    display: block;
    padding: 10px 0;
    color: #fff;
    font-family: 'DIN Pro Black';
    border: 0.1px solid #c4c4c4;
    border-radius: 3px;
    cursor: not-allowed;
    font-size: 1.3em;
    background: #f7121d !important;
    background: -moz-linear-gradient(left, #bababa 0%, #bababa 100%);
    background: -webkit-linear-gradient(left, #bababa 0%,#bababa 100%);
    background: linear-gradient(to right, #bababa 0%,#bababa 100%);
}

.btn-popups .ui-button .ui-button-text {
    background: #f7121d !important;
    border: solid 0px #f7121d !important
}

.align-center-div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.btn-promo {
    background: #f7121d !important;
}

.btn-promo .ui-button-text {
    background: #f7121d !important;
    border: 1px solid #f7121d !important;
    padding: 10px !important;
    margin: 0px !important;
    font-family: 'DIN Pro Black' !important;
}