html,
body,
p,
a,
.title,
.button,
.item-title {
  font-family: "Saira-Bold";
}
.block-footer span {
  font-family: "SairaCondensed-Medium" !important;
  font-size: 1.25rem;
}
input {
  font-family: "SairaCondensed-Medium" !important;
}
.login-button {
  font-family: "SairaCondensed-Bold" !important;
}
.register {
  font-family: "Saira-Black" !important;
  font-size: 1rem;
  padding: 0px;
}
.tab-link {
  font-family: "Saira-Medium" !important;
}
.load-categoria-especial,
.load-categoria {
  font-family: "SairaCondensed-Regular" !important;
}
#popuptarjetas .block-title,
[data-name="cuenta"] .block-title,
[data-name="tarjetas"] .block-title,
[data-name="cuenta"] .item-label,
.timeline-item-subtitle,
.timeline-item-date small {
  font-family: "Saira-Light" !important;
}

[data-name="tarjetas"] .item-input-wrap,
[data-name="cuenta"] .item-input-wrap input,
[data-name="cuenta"] .item-input-wrap,
[data-name="tarjetas"] .item-input-wrap input {
  font-family: "SairaCondensed-Bold" !important;
}
.panel .title {
  font-family: "Saira-SemiBold" !important;
}
.panel .item-title {
  font-family: "SairaCondensed-Regular" !important;
}

.ios .block-title {
  margin-top: 15px !important;
}
.ios .block {
  color: #fff;
}

.brand {
  cursor: pointer;
}

.brand {
  position: relative;
  height: calc(30vh - 65px);
  background-size: 95px;
  background-position: center center;
  background-repeat: no-repeat;
  box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
  margin-bottom: 15px;
  background-color: #fff;
}
.servicios .brand,
.carriers-pagos .brand,
.carriers-regalos .brand,
.carriers .brand {
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}
.servicios .brand:after,
.carriers-regalos .brand:after,
.carriers .brand:after {
  content: "";
  height: 10px;
  background: #1799d7;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.servicios .brand:after {
  height: 20px;
}

.carriers .brand:after,
.carriers-pagos .brand:after {
  content: "";
  height: 20px;
  background: #1799d7;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.carriers span,
.servicios span,
.carriers-pagos span {
  position: absolute;
  color: #fff;
  text-align: center;
  bottom: 0px;
  z-index: 100;
  height: 20px;
  font-size: 10px;
  line-height: 20px;
  width: 100%;
  left: 0px;
}

.servicios span {
  font-size: 16px;
  left: 0px;
}

.brand h5 {
  text-align: center;
  margin: 0 auto;
  background: #1799d7;
  color: #fff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  position: relative;
  height: calc((30vh - 65px) * 0.5);
}
.brand h4 {
  font-size: 30px;
  text-align: center;
  margin: 0 auto;
  color: #000;
  background: #fff;
}

[data-tipo="agua"] {
  background-image: url(../img/agua.png);
}
[data-tipo="luz y gas"] {
  background-image: url("../img/luz y gas.png");
}
[data-tipo="transporte"] {
  background-image: url(../img/transporte.png);
}
[data-tipo="tv-internet-telefono"] {
  background-image: url(../img/tv-internet-telefono.png);
}
[data-tipo="catalogos"] {
  background-image: url(../img/catalogos.png);
}
[data-tipo="predial"] {
  background-image: url(../img/predial.png);
}
[data-tipo="otros"] {
  background-image: url(../img/otros.png);
}

.telcel {
  background-image: url(../img/telcel.jpg);
}

.movistar {
  background-image: url(../img/movistar.png);
}

.attnextel {
  background-image: url(../img/att.png);
}

.iusacellunefon {
  background-image: url(../img/unefon.png);
}

.virginmobile {
  background-image: url(../img/virgin.png);
}

.alo {
  background-image: url(../img/alo.jpg);
}
.weex {
  background-image: url(../img/weex.jpg);
}
.masrecarga {
  background-image: url(../img/masrecarga.jpg);
}

.weex {
  background-image: url(../img/weex.jpg);
}
.masrecarga {
  background-image: url(../img/masrecarga.jpg);
}
.andale {
  background-image: url(../img/andale.png);
}
.americanista {
  background-image: url(../img/americanista.jpg);
}
.xboxlive {
  background-image: url(../img/xbox.png);
}
.cinepolisklic {
  background-image: url(../img/klic.jpg);
}
.cinepolis {
  background-image: url(../img/cinepolis.jpg);
}
.flashmobile {
  background-image: url(../img/flash.png);
}

.telmex {
  background-image: url(../img/telmex.png);
}
.sky {
  background-image: url(../img/sky.png);
}
.adt {
  background-image: url(../img/adt.png);
}
.agua_celaya {
  background-image: url(../img/agua_celaya.png);
}
.agua_salamanca {
  background-image: url(../img/agua_salamanca.png);
}
.arabela {
  background-image: url(../img/arabela.png);
}
.avon {
  background-image: url(../img/avon.png);
}
.axtel {
  background-image: url(../img/axtel.png);
}
.belcorp {
  background-image: url(../img/belcorp.jpg);
}
.cablemas {
  background-image: url(../img/cablemas.png);
}
.cablevision {
  background-image: url(../img/cablevision.png);
}
.celaya {
  background-image: url(../img/celaya.jpg);
}
.cfe {
  background-image: url(../img/cfe.jpg);
}
.chihuahua {
  background-image: url(../img/chihuahua.png);
}
.dishnetwork {
  background-image: url(../img/dishnetwork.svg);
}
.eci {
  background-image: url(../img/eci.png);
}
.fuller {
  background-image: url(../img/fuller.png);
}
.gas_natural {
  background-image: url(../img/gas_natural.png);
}
.global_card {
  background-image: url(../img/global_card.png);
}
.gobiernocdmx {
  background-image: url(../img/gobiernocdmx.png);
}
.gobiernoedomex {
  background-image: url(../img/gobiernoedomex.png);
}
.gobiernoqro {
  background-image: url(../img/gobiernoqro.png);
}
.gobiernotlax {
  background-image: url(../img/gobiernotlax.jpg);
}
.hidalgo {
  background-image: url(../img/hidalgo.png);
}
.ilusion {
  background-image: url(../img/ilusion.png);
}
.infonavit {
  background-image: url(../img/infonavit.png);
}
.izzi {
  background-image: url(../img/izzi.jpg);
}
.jafra {
  background-image: url(../img/jafra.png);
}
.jalisco {
  background-image: url(../img/jalisco.png);
}
.lbel {
  background-image: url(../img/lbel.jpg);
}
.maxcom {
  background-image: url(../img/maxcom.png);
}
.maxigas {
  background-image: url(../img/maxigas.svg);
}
.megacable {
  background-image: url(../img/megacable.png);
}
.michoacan {
  background-image: url(../img/michoacan.png);
}
.movistarf {
  background-image: url(../img/movistar.png);
}
.natura {
  background-image: url(../img/natura.jpg);
}
.naucalpan {
  background-image: url(../img/naucalpan.png);
}
.pegasso {
  background-image: url(../img/pegasso.svg);
}
.rednovo {
  background-image: url(../img/rednovo.jpg);
}
.siapa {
  background-image: url(../img/siapa.png);
}
.sky {
  background-image: url(../img/sky.png);
}
.swissjust {
  background-image: url(../img/swissjust.png);
}
.tabasco {
  background-image: url(../img/tabasco.png);
}
.televia {
  background-image: url(../img/televia.png);
}
.totalplay {
  background-image: url(../img/totalplay.png);
}
.tupperware {
  background-image: url(../img/tupperware.png);
}
.yvesrocher {
  background-image: url(../img/YVES.png);
}
.zacatecas {
  background-image: url(../img/zacatecas.png);
}

.banner-bottom {
  position: relative;
  bottom: 0px;
  height: calc(15vh - 5px);
  text-align: center;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  padding: 0px !important;
  justify-content: center;
}

.banner-bottom h4 {
  margin: 0 auto;
  font-family: Comfortaa;
  font-size: 24px;
  line-height: 24px;
  margin-top: 25px !important;
  margin-bottom: 25px !important;
}

.tab-content {
  margin-top: 25px;
}

#tab2 .icon {
  font-size: 54px;
  text-align: center !important;
  justify-content: center;
  display: flex;
  line-height: 54px;
  margin: 0 auto;
  margin-top: 15px;
}

#popuppagos .brand {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

#popuppagos .ios .block {
  margin-top: 0px;
}

#pagarregalo,
#pagarservicio,
#recargar {
  background: #00ac8e;
  display: block;
  text-align: center;
  height: 55px;
  line-height: 55px;
  font-size: 34px;
}

.pago-select,
.selected-pais,
.recarga-select {
  border: 2px solid #fb4204 !important;
}

.container-card {
  width: 100%;
  max-width: 350px;
  margin: 50px auto;
}

.tarjetas-actuales .jp-card-container,
.card-wrapper {
  transform: scale(0.9);
  -webkit-transform: scale(0.9);
}

#guardar-tarjeta {
  line-height: 35px;
  height: 35px;
  margin-top: 5px;
}

.tarjeta-inactiva {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.ios .theme-dark .item-inner:after,
.ios .theme-dark .list ul:after,
.list.ios .theme-dark ul:after,
.ios .theme-dark .list ul:before,
.list.ios .theme-dark ul:before,
.ios .list ul:after {
  background-color: transparent;
}

.ios .theme-dark .list ul,
.list.ios .theme-dark ul {
  background: rgba(0, 0, 0, 0.2);
}

.ios .list ul {
  background: transparent;
}

.theme-dark a {
  color: #fff;
}
.img-responsive {
  width: 150px;
  margin: 0 auto;
  height: auto;
}

[data-name="historial"] .tabs-animated-wrap {
  overflow-y: auto !important;
}

.recargas {
  max-height: 200px;
  overflow-y: auto;
  margin-bottom: 25px;
}

.load-tipo {
  cursor: pointer;
  height: 40px !important;
  color: #000;
}
.load-tipo:after {
  content: "";
  height: 10px;
  background: #1799d7;
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0px;
}

button.link {
  background: none;
  border: none;
  color: #fff;
}
.carriers {
  max-width: 100%;
  margin: 35px auto !important;
}
.carriers.list.iniciada {
  height: auto;
  max-height: inherit;
}
.carriers-regalos {
  margin-right: auto !important;
  margin-left: auto !important;
  margin-top: 35px !important;
}

.ios .navbar {
  background: #1799d7;
  color: #fff;
  text-transform: uppercase;
  font-weight: bolder;
}

.ios .page {
  background: #2d3846;
}

#popuptarjetas .page {
  background: #fff;
}

.ios .color-theme-red .button.tab-link-active {
  background: #fff;
  color: #08679c;
}

.ios .color-theme-red .button {
  color: #fff;
  border-color: #fff;
  font-weight: 500;
  font-size: 18px;
}

.ios .navbar .f7-icons,
.ios .toolbar .f7-icons {
  font-size: 32px;
  font-weight: bolder;
  color: #fff;
}

.ios .segmented .button {
  border-radius: 0 !important;
  font-size: 16px;
  font-weight: 700;
  line-height: 35px;
  height: 35px;
}

[data-name="historial"] {
  background: #fff !important;
}

.ios .navbar .title {
  font-size: 25px;
  font-weight: bolder;
}

.timeline-item-inner {
  background: #e1edf8;
}
.timeline-item-title {
  color: #827371;
}
.timeline-item-subtitle {
  color: #6e7099;
}
.timeline-item-inner:after {
  content: "";
  width: 100%;
  height: 2px;
  background: #f2f2f3;
}
.timeline-item-date {
  color: #a8a9ad;
}
.timeline-item-date span {
  font-weight: bolder;
  font-size: 35px;
}
.timeline-item-date small {
  font-size: 25px;
}
.timeline-item-divider {
  background: #fdd9c4;
  color: #fdd9c4;
}
.list-button {
  background: #1799d7;
  color: #fff !important;
  border: 1px solid #1799d7;
  text-transform: uppercase;
  font-weight: bolder;
  text-align: center;
  border-radius: 15px;
  margin: 0 auto;
  width: 75%;
  margin-top: 15px !important;
}
.panel .page {
  background: #fff !important;
}
.panel .item-media {
  width: 36px;
  height: 36px;
  color: #fff;
  background: #5babdf;
  line-height: 36px;
  text-align: center;
  margin: 0 auto;
  padding-top: 6px;
}
.panel .item-media img {
  width: 100%;
}
.panel i {
  color: #fff !important;
  font-size: 30px;
  text-align: center;
  width: 90%;
  margin: 0 auto;
}
.panel .item-title {
  color: #336296;
  font-weight: 300;
}
.panel li {
  background: #e1edf8;
  height: calc((100vh - 45px) / 6);
}

.panel .navbar {
  background: #fff;
  color: #1799d7;
}

:placeholder {
  color: #5f89cc;
  text-align: center;
}
::-webkit-input-placeholder {
  color: #5f89cc;
  text-align: center;
}
.item-input-wrap input {
  background: #e9ebf2;
}

[data-name="historial"] .button.tab-link-active {
  background: #08679c !important;
  color: #fff !important;
}

[data-name="historial"] .button {
  border-color: #08679c !important;
  color: #08679c !important;
}

[data-name="cuenta"] .page-content,
[data-name="cuenta"].page {
  background: #fff;
}

.login-screen {
  background: #fff;
  overflow: hidden;
}
.login-screen form {
  position: absolute;
  bottom: 0px;
  width: 100%;
  background-image: linear-gradient(
    to top,
    #7fb4dc,
    #a9c4e6,
    #ccd6ef,
    #e8eaf6,
    #ffffff
  );
}
.login-screen-content {
  background-image: url(../img/logo.png);
  background-position: top center;
  background-repeat: no-repeat;
  overflow: hidden;
  background-size: 360px;
}
.login-button {
  background: #1799d7;
  width: 90%;
  height: 50px;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border: 3px solid #1799d7;
  border-bottom: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.login-screen .block-footer {
  text-align: left;
  background: #336296;
  color: #fff;
  text-transform: uppercase;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 45px;
  line-height: 45px;
  margin: 0 auto;
  width: 96%;
  margin-top: 15px;
}
.login-screen-content .item-input {
  margin-bottom: 5px;
  border-radius: 15px;
}

.login-screen-content .item-input input {
  border-radius: 15px;
  background: #fff;
  text-align: center;
}

.center {
  margin: 0 auto;
}
.tarjeta-logo {
  width: 50%;
  margin: 0 auto;
}

.register {
  background: #fff !important;
  color: #336296 !important;
  text-transform: uppercase;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  height: 40px;
  line-height: 40px;
  margin-top: 2.5px;
}

.comision,
.block-title {
  color: #fff !important;
}
#popuptarjetas .block-title,
[data-name="cuenta"] .block-title {
  color: #1799d7 !important;
  text-transform: capitalize;
  font-size: 20px;
}

.recargas-regalos .brand,
.recargas .brand {
  background: transparent !important;
}
.recargas-regalos
  .brand
  .col-100:nth-child(1)
  .recargas
  .brand
  .col-100:nth-child(1) {
  background: #fff;
}

.recargas-regalos .brand h4 {
  background: #fff;
}

.ios .list .item-media {
  margin-top: 5px;
}

.ios .list .item-media + .item-inner {
  margin-top: 15px;
}

.servicios .brand {
  color: #000 !important;
}
.brand.load-categoria-especial,
.brand.load-categoria {
  text-align: center;
  color: #000 !important;
  line-height: calc(30vh - 65px);
}
[data-name="historial"] .block-title {
  color: #000 !important;
}

.tarjetas-logos {
  width: 50%;
  margin: 0 auto;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 15px;
}

.banner-icono {
  width: 75px;
}

.banner-imagen {
  width: 100%;
}
.banner-link {
  cursor: pointer;
}

.titulo-paises {
  margin-top: 15px !important;
  text-align: center;
  position: absolute;
  top: 20%;
  left: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  margin: 0 auto;
}

.paises {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  color: white !important;
  background: transparent !important;
  width: 75%;
  margin: 0 auto;
}
.paises img {
  width: 50px !important;
}
.pais span {
  text-align: center;
}
#metodos_oxxo,
#metodos {
  background: #fff !important;
}
.metodos {
  margin: 0 auto !important;
}
.metodos span {
  color: #000 !important;
}
.metodos img {
  width: 50px !important;
}

.metodo {
  text-align: center;
  box-shadow: 0 0 2rem rgba(0, 0, 255, 0.1);
}

.accept-validar-button,
.accept-telefono-button,
.accept-metodo-button,
.accept-pais-button {
  height: 50px;
  background: #1799d7 !important;
  color: #fff !important;
  border: 1px solid #1799d7;
  text-transform: uppercase;
  font-weight: bolder;
  text-align: center;
  border-radius: 15px;
  margin: 0 auto;
  width: 75%;
  margin-top: 15px !important;
}

.country-name {
  color: #000 !important;
}

.list-group-title,
.item-divider {
  text-align: center !important;
  background: #1799d7 !important;
  margin-bottom: 7.5px;
  margin-top: 7.5px;
}

.login-screen-content.is-tablet {
  background-size: 350px;
}
.panel-removido {
  margin-left: 0px !important;
}

.utp {
  background-image: url("https://handpay.com.mx.quasar.uno/up/logos/utp.png");
}

[data-tipo="universidades"] {
  background-image: url("https://handpay.com.mx.quasar.uno/up/logos/universidades.svg");
}
.list-index {
  width: 30px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.list-index ul {
  background: #fff !important;
}

.list-index li {
  padding-left: 5px;
  font-size: 1em;
  margin-bottom: 10px;
  font-weight: bolder;
}

.banner-icono {
  width: 40px;
}

.carriers-regalos.list {
  margin-top: 35px !important;
}

.pago-select,
.selected-pais,
.recarga-select {
  border: 2px solid #b4222d !important;
  border-radius: 5px;
  transform: scale(0.85);
  -webkit-transform: scale(0.85);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23);
  transition: all ease-in-out 100ms;
  -webkit-transition: all ease-in-out 100ms;
}
.paises {
  text-align: center;
}

.ios .list ul:before {
  background: transparent;
}

.ios .list .item-inner:after {
  background-color: transparent;
}
.list-group-title {
  display: none;
}