@font-face {
      font-family: audiowide;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/audiowide.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: bebas_neue;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/bebas_neue.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: black_ops_one;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/black_ops_one.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: bungee_inline;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/bungee_inline.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: fugaz_one;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/fugaz_one.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: jaro;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/jaro.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: lobster;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/lobster.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: luckiest_guy;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/luckiest_guy.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: monoton;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/monoton.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: poetsen_one;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/poetsen_one.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: rock_salt;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/rock_salt.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: rubik_bubbles;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/rubik_bubbles.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: rubik_bubbles;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/rubik_bubbles.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: slackey;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/slackey.ttf);
      line-height: 1.2
    }  
      @font-face {
      font-family: tac_one;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/tac_one.ttf);
      line-height: 1.2
    }  
    @font-face {
      font-family: default;
      src: url(https://piowifi.net/wp-content/themes/onepress-child/fonts/MilanelloFree-51Lwv.otf);
      line-height: 1.2
    } 
    :root {
      --section-background: #fff;
    }
    .form-box, #epayments-form, #promo-rates.inline .content{
      background: var(--section-background) !important;
      color: var(--secondary-text-color);
    }
    #promo-rates table{
      background: #fff
    }
    #promo-rates table td{
      color: #222
    }
    .branding img{
      -webkit-filter: drop-shadow(4px 4px 4px #000);
      filter: drop-shadow(4px 4px 4px #000);
    }

  .oper-section-outer{
    height: auto !important; min-height: 100vh;
  }
  .oper-section-outer[template="image-slider"]{
    min-height: unset
  }
  .branding img{
    max-height: 150px;
  }
  #epayments-form button[type="submit"]{
    position: relative
  }
  #oper-hint{
    color: #000;
  }
  #epayments-form button[type="submit"]:after{
    content: '';
    background: url(https://piowifi.net/wp-content/uploads/2024/11/loading.gif);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 40px;
    z-index: 2222;
    opacity: 1;
    visibility: visible;
    display: block;
    background-size: 72px !important;
    background-position: center;
    opacity: 0; visibility: hidden;
    background-repeat:no-repeat;
  }
  #epayments-form button[type="submit"].submitted:after{
    opacity: 1; visibility: visible;
  }
  #promo-rates.inline .sign-in, #promo-rates.inline .overlay{
    display: none;
  }
  #promo-rates.inline{
    position: relative;
    top: unset;
    left: unset;
    right: unset;
    bottom: unset;
    z-index: 1;
    opacity: 1;
    visibility: visible;
    max-width: 500px;
  }
  #promo-rates.inline .content {
    max-height: unset;
    overflow: auto;
    max-width: 100%;
    background: #fff;
    border-radius: 30px;
    z-index: 10;
    position: relative;
    top: unset;
    left: unset;
    transform: unset;
    padding-bottom: 10px;
    width: 100%;
    margin-top: 25px;
  }
  #promo-rates .content header h2 {
    font-size: 18px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }
  .promo-rates-notes:empty{
    display: none
  }
  #promo-rates .inner {
    padding: 20px;
  }
  #promo-rates table thead tr th, #promo-rates table td {
    font-size: 11px;
  }
  .footer-text{
    font-size: 14px
  }
  body{
    background-size:cover !important; min-height: 100vh
  }
  body.portal{
    background-image: url(https://piowifi.net/wp-content/uploads/2024/11/screen-files.gif) !important;
  }
  #background-slider .slick-slider{
    opacity: .9
  }

  .additional-rate-details td{
    padding: 7px !important;
    font-size: 13px;
    font-style: italic;
  }
  #pay-with-gcash, #open-portal-in-browser{
    display: block;
    text-decoration: none;
    width: 100%;
    margin-top: 15px;
    background: #007bff !important;
    box-sizing: border-box;
    text-align: center;
  }
  #open-portal-in-browser{
    font-size: 10px;
  }
  .button, button{
    font-size: 16px;
  }
  #background-slider .slick-slider[template="image-slider"]{
    position: relative; margin-left: -8px; margin-right: -8px; margin-top: -8px;
    width: calc(100% + 16px); margin-bottom: 0
  }
  #background-slider .slick-slider[template="image-slider"] .thumbnail{
    height: auto;  position: relative;
    background: #222
  }
  #background-slider .slick-slider[template="image-slider"] .thumbnail:before{
  content: ''; position: relative; padding-bottom: 53%; display: block;
  }
  #background-slider .slick-slider[template="image-slider"] .thumbnail:after{
    background: rgb(255, 255, 255);
    background: linear-gradient(360deg, #559296 0%, rgb(255 255 255 / 0%) 100%);
    opacity: 1;
    top: unset;
    height: 27%;
    display: none;
  }
  #background-slider .slick-slider[template="image-slider"] .thumbnail img{
    object-fit: cover; position: absolute; top: 0; left: 0; right: 0;  bottom: 0;
  }
  body:not(.template-2) #background-slider .slick-slider[template="image-slider"] .slick-dots{
    bottom: unset;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    left: unset;
    right: 10px;
  }
  #background-slider .slick-slider[template="image-slider"] .slick-dots button:before{
    color: cyan
  }
  .branding{
    margin-bottom: 30px;
  }
  #background-slider .slick-slider:not([template="image-slider"]) .slick-dots{
    display: none !important;
  }
  .oper-section-outer[template="image-slider"]{
      height: auto !important;
      margin-top: -85px;
      z-index: 2;
      position: relative;
    }
    .footer-text, .header-text{
      text-shadow: none !important;
    }
    body{
      background: radial-gradient(rgba(255, 254, 234, 1) 0%, rgba(255, 254, 234, 1) 35%, #559296 100%)
    }
    #background-slider.loading{
      position: relative;
    }
    #background-slider.loading:before{
      content: ''; position: absolute; top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      width: 60px; height: 60px;
      z-index: 9999;
      background: url(https://piowifi.net/wp-content/uploads/2024/06/loading-2.gif);
      display: block;
      background-size: contain;
    }
    #background-slider img[src*="data:image/png;base64,i"]{
      object-fit: cover !important;
    }
    .app-now-available, .portal-popup{
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999999;
    }
    .app-now-available.close, .portal-popup{
      display: none;
    }
    .portal-popup.open{
      display: block
    }
    .app-now-available .overlay, .portal-popup .overlay{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: #000;
      opacity: .5;
    }
    .app-now-available .content, .portal-popup .content{
      position: absolute;
      top: 50%;
      left: 50%;
      width: 90%;
      max-width: 500px;
      background: #fff;
      border-radius: 20px;
      padding: 30px;
      transform: translate(-50%, -50%);
      box-sizing: border-box;
    }
    .portal-popup .content{
      padding: 20px;
    }
    #insert-coin-popup h4{
      text-transform: uppercase;
    }
    .coins-status table, .coins-status table th, .coins-status table td,
    .generated-voucher table, .generated-voucher th, .generated-voucher td{
      border: 1px solid #ddd;
      border-collapse: collapse
    }
    .coins-status table, .generated-voucher table{
      margin: 20px 0; width: 100%;
    }
    .coins-status table th, .generated-voucher th{
      width: 150px;
    }
    .coins-status table th, .coins-status table td,
    .generated-voucher th, .generated-voucher td{
      padding: 10px;
      text-align: left;
    }
    .countdown-timer-bar{
      text-align:left;
      box-sizing: border-box; margin-bottom: 10px;
      background: #ccc; border-radius: 5px;
    }
    .countdown-timer-bar span{
      box-sizing: border-box;
      border-radius: 5px;
      transition: width 1s linear;
      display: flex; width: 100%;
      height: 15px;
      background: var(--main-bg);
      color: var(--main-text-color);
      text-align: right; font-size: 10px; max-width: 100%;
      padding: 10px 10px;
      justify-content: flex-end; align-items: center
    }
    .small-btn{
      font-size: 13px; padding: 5px 10px; display: inline-block
    }
    .vendo-login-message{
      border-radius: 8px;
      border: 1px solid #239997;
      background:#9bc2bc;
      text-align: center;
      padding: 10px 20px; margin: 15px 0
    }
    .vendo-login-message:empty{
      display: none;
    }
    .vendo-list{
      padding: 0; max-height: calc(100vh - 140px);
      overflow-y: hidden;
      overflow-x: auto;
    }
    .vendo-list li{
      list-style-type: none; cursor: pointer; margin-bottom: 10px;
    }
    .vendo-list li span{
      display: inline-block;
      color: #fff;
      border: 2px solid;
      border-radius: 7px;
      padding: 7px 20px;
      font-size: 14px;
      width: 100%;
      background: #239997;
      font-weight: bold;
      box-sizing: border-box;
    }
    .vendo-list li[data-status="busy"] span{
      background: #0032a0;
      opacity: .8;
      cursor: not-allowed;
    }
    .vendo-list li[data-status="offline"] span{
      background: #cc292c;
      cursor: not-allowed;
      opacity: .8;
    }
    #epayments-form{
      padding: 20px 30px 20px;
      margin-top: 20px;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 4px 5px rgba(0,0,0,0.16);
    }
    #epayments-form header h4{
      text-align: center; margin-top: 0; margin-bottom: 15px;
      padding-bottom: 10px; position: relative;
    }
    #epayments-form header h4:before{
      content: ''; position: absolute; bottom: 0; left: 50%; width: 100px;
      border-bottom: 3px solid;
      border-bottom-color: var(--main-bg); transform: translateX(-50%)
    }
    #epayments-form select{
      border-radius: 15px;
      border: 2px solid #ddd;
      padding: 4px 10px;
      font-size: 14px;
      letter-spacing: 1px;
      width: 100%;
      box-sizing: border-box;
    }
    #epayments-form button{
      background: #0057e4 !important; width: 100%; text-align:center
    }
    #epayments-form button[data-value="PAYMAYA"]{
      background: #1fbc76 !important;
    }
    .ewallet-selector{
      text-align: center; padding-left: 0
    }
    .ewallet-selector li{
      list-style-type: none; display: inline-block;
    }
    #background-slider .slick-slider .thumbnail:after{
    background: #000
    }
    body.template-2{
      margin: 0;
    }
    body.template-2 #background-slider .slick-slider[template="image-slider"] {
      margin-left: 0;
      margin-right: 0;
      margin-top: 0;
      width: 100%;
    }
    body.template-2 .oper-section-outer[template="image-slider"] {
      margin-top: 0;
    }
    body.template-2 #background-slider .slick-slider[template="image-slider"] .thumbnail:after{
      display: none
    }
    body.template-2 #background-slider .slick-slider[template="image-slider"] .thumbnail:before {
      padding-bottom: 37%;
    }
    body.template-2 .oper-section-inner {
        flex-basis: 100%;
        max-width: unset;
        width: 100%;
    }
    body.template-2 #background-slider .slick-dots{
      bottom: 5px;
    }
    body.template-2 #background-slider .slick-slider[template="image-slider"] .slick-dots button:before {
      color: #fff; font-size: 13px;
    }
    body.template-2 #background-slider .slick-slider[template="image-slider"] .slick-dots .slick-active button:before{
      color: var(--main-bg) !important;
    }
    body.template-2 .time-date, body.template-2 .waves{
      display: none !important;
    }
    body.template-2{
      background: var(--section-background) !important;
    }
    body.template-2 .header-container{
      background: var(--main-bg) !important;
      padding: 20px;
    }
    body.template-2 .form-box{
      background: var(--section-background) !important;
      box-shadow: none;
      padding-top: 25px;
      border-radius: 0;
    }
    body.template-2 .header-text{
      margin-bottom: 0
    }
    body.template-2 .branding img{
      -webkit-filter: unset;
      filter: unset;
    }
    body.template-2 #epayments-form{
      margin-top: 0;
      box-shadow: none;
      border-radius: 0;
      position: relative;
      padding-top: 15px;
      margin-top: 0;
      max-width: 500px; margin-left: auto; margin-right: auto;
    }
    body.template-2 .branding {
        margin-bottom: 0;
    }
    body.template-2 #button-area .button{
      margin-bottom: 0
    }
    body.template-2 #epayments-form header h4, body.template-2 .promo-rates-container{
      display: none
    }
    body.template-2 #epayments-form header p{
      margin-bottom: 10px !important; font-size: 14px;
    }
    body.template-2 .form-box.form-glass{
      display: flex;
      flex-wrap: wrap;
      padding: 25px 25px 20px;
      max-width: 500px; margin: 0 auto
    }
    body.template-2 #hotspot-section{
      flex-basis: 100%;
      display: flex !important;
      align-items: center;
      gap: 0;
      flex-wrap: nowrap;
    }
    body.template-2 .form-box.form-glass[hotspot-select="authtype-3"] #login-form > div,
    body.template-2 .form-box.form-glass[hotspot-select="authtype-voucher-access"] #login-form > div,
    body.template-2 .form-box.form-glass[hotspot-select="authtype-undefined"] #login-form > div{
      margin-bottom: 0;
    }
    body.template-2 .form-box #hotspot-section, body.template-2 .form-box #login-form, body.template-2 #button-area, 
    body.template-2 .promo-rates-container{
      padding: 0;
    }
    body.template-2 .form-box.form-glass[hotspot-select="authtype-3"] #login-form, body.template-2 .form-box.form-glass[hotspot-select="authtype-voucher-access"] #login-form, body.template-2 .form-box.form-glass[hotspot-select="authtype-undefined"] #login-form{
      padding-right: 0;
    }
    body.template-2 .form-box.form-glass[hotspot-select="authtype-3"] #button-area .button,
    body.template-2 .form-box.form-glass[hotspot-select="authtype-voucher-access"] #button-area .button,
    body.template-2 .form-box.form-glass[hotspot-select="authtype-undefined"] #button-area .button{
      border-radius: 0;
      border-top-right-radius: 20px;
      border-bottom-right-radius: 20px;
      padding: 10px 20px;
      letter-spacing: 0;
      font-size: 16px;
    }
    body.template-2 .form-box.form-glass[hotspot-select="authtype-3"] input, body.template-2 .form-box.form-glass[hotspot-select="authtype-voucher-access"] input, body.template-2 .form-box.form-glass[hotspot-select="authtype-undefined"] input{
      border-radius: 0;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
      background-image: none;
      padding-left: 20px;
      font-size: 14px;
    }
    body.template-2 #login-form{
      flex: 1;
    }
    body.template-2 .form-box.form-glass:not([hotspot-select="authtype-3"]):not([hotspot-select="authtype-voucher-access"]):not([hotspot-select="authtype-undefined"]) #login-form{
      flex-basis: 100%;      
    }
    body.template-2 #epayments-form:before{
      content: '';
      animation: animate 5s linear infinite;
      border-top: 2px solid #fff;
      position: absolute; top: -3px;
      left: 50%; transform: translateX(-50%)
    }
    body.template-1 .insert-coin-container{
      margin-left: 30px;
      margin-right: 30px;
    }
    body.template-1 .form-box{
      padding-bottom: 20px;
    }
    body.template-2 .insert-coin-container{
      margin-top: 10px;
    }
    body.template-1 .promo-rates-container{
      margin-bottom: 15px;
      padding-top: 0; padding-bottom: 0
    }
    .insert-coin-container{
      position: relative;
      border-radius: 15px;
    }
    .insert-coin-container:before, .insert-coin-container:after{
      content: '';
      position: absolute;
      left: -2px;
      top: -2px;
      background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
        #0000ff, #00ff00,#ffff00, #ff0000);
      background-size: 400%;
      width: calc(100% + 4px);
      height: calc(100% + 4px);
      z-index: 1;
      animation: steam 60s linear infinite;
      border-radius: 15px; opacity: .5
    }
    body.template-2 .insert-coin-container{
      margin-top: 15px;
    }
    .insert-coin-container:after {
      filter: blur(8px);
    }
    .insert-coin-container button{
      position: relative;
      z-index: 2;
      background: #0a0a0a; color: #fff !important;
    }
    .previous-vendo-code{
      padding: 5px; font-weight:bold;
      margin-bottom: 10px;
      border: 1px solid
    }
    .previous-vendo-code span{
      color: red;
    }
    @keyframes steam {
      0% {
        background-position: 0 0;
      }
      50% {
        background-position: 400% 0;
      }
      100% {
        background-position: 0 0;
      }
    }

    @keyframes animate {
        0% {
            width: 10%;
        }

        50% {
            width: 60%;
        }

        0% {
            width: 0%;
        }
    }
    body.template-2 .form-box .input {
      padding: 9px 25px 9px 50px;
    }
    body.template-2 #hotspot-section select{
      width: 100%;
      flex: 1;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
    body.template-2 #hotspot-section:before{
      content: 'Authentication: '; color: #fff !important;
      margin-right: 0;
      text-transform: uppercase;
      font-size: 12px;
      background: var(--secondary-bg);
      border-top-left-radius: 16px;
      border-bottom-left-radius: 15px;
      line-height: 0;
      padding: 12px;
      display: inline-block;
    }
    body.template-2 #promo-rates.inline{
      margin: 0 auto
    }
    body.template-2 #promo-rates.inline .content{
      margin-top: 0; background: transparent !important;
      border-radius: 0
    }
    body.template-2 #promo-rates .content header{
      text-align: left;
      padding: 0 0 10px;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      background: none;
    }
    body.template-2 #promo-rates .content header h2{
      display: inline-block;
    }
    body.template-2 #promo-rates.inline {
      padding: 20px;
      background: var(--secondary-bg);
    }
    body.template-2 #promo-rates .inner{
      padding: 0
    }
    body.template-2 #oper-hint{
      color: #000
    }
    .open-popup{
      position: fixed;
    }
    #promo-rates table thead tr th, #promo-rates table td {
      padding: 7px 18px;
    }
    .ewallet-selector{
      display: flex;
      gap: 10px;
      justify-content: center;
    }
    .ewallet-selector input[type="submit"]{
      color: #fff;
      border-radius: 10px;
      border: 0 !important;
      padding: 10px 20px;
      border-radius: 10px;
      min-width: 120px;
      text-align: center;
      background-color: #11caaa;
      font-weight: bold; cursor: pointer
    }
    #epayments-form button[type="submit"]{
      height: 0; visibility: hidden; padding: 0; overflow: hidden;
    }
    .ewallet-selector input[type="submit"][value="GCASH"]{
      background-color: #1fb2f7
    }
    .ewallet-selector input[type="submit"].submitted{
      background-image: url(https://piowifi.net/wp-content/uploads/2024/11/loading.gif);
      background-size: 50px;
      background-repeat: no-repeat;
      background-position: center;
    }
    .app-notice{
    position: fixed; top: 0; left: 0; right: 0; padding: 10px 20px;
    background: #174794;  color: #fff; text-align: center;
    z-index: 9999999;font-size: 12px; 
}
.app-notice{
  display: flex;
    align-items: center;
    gap: 15px;
}
.countdown-container{
  width: 40px;
    height: 40px;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
}
.countdown-container img{
  position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transform: translate(-50%, -50%) scale(2.5);
}
.app-notice > div:last-child{
  text-align: left;
}
.app-notice a{
    background: #477e5d; color: #fff; text-decoration: none; padding: 3px 6px;
    border-radius: 5px; display: inline-block
}

        .branding .brand-name{
      font-family:     }
      .branding .brand-name{
    font-size: rem;
    color:   }
  .branding{
    font-size: 2rem;
  }
  .app-now-available{
    font-size: 21px;
  }
  .ewallet-form-wrapper{
    position: relative;
  }
  .ewallet-overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgb(0 0 0 / 80%);
    border-radius: 5px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    font-size: 14px;
  }
  .search-vendo .search-vendo-input{
    width: 100%;
    padding: 10px 20px;
    box-sizing: border-box;
    border: 1px solid #bbb;
    border-radius: 10px !important;
  }
      :root {
      }