/* Splash Screen */

  .splash{
    background-image: url('../images/login-bg.png');
    background-repeat: no-repeat;
    background-size: 160%;
    background-position: -105px -55px;
    opacity: 1;
    background-color: #E1F150;
    animation: splash-bg .7s ease forwards;
  }

  .splash-logo{
    margin-bottom: 95px;
    margin-top: 20px;
  }

  .ui-mobile .splash.ui-page-active {
    display: flex;
    justify-content: center;
    width: 100%;
    align-items: flex-end;
  }

  .ui-mobile .splash.ui-page-active .ui-content{
    overflow-x: initial;
    margin-bottom: 55px;
  }

/* Login Screen */

    .login{
      background-image: url('../images/login-bg.png');
      background-repeat: no-repeat;
      background-size: 160%;
      background-position: -105px -55px;
      background-color: #E1F150;
    }

    .splash-logo{
      /*position: absolute;
      top: 40%;
      left: calc(50vw - 100px);*/
      align-self: center;
      width: 200px;
    }

    .ui-mobile .login.ui-page-active {
      display: flex;
      justify-content: center;
      width: 100%;
      align-items: flex-end;
    }

    .ui-mobile .login.ui-page-active .ui-content{
      overflow-x: initial;
      padding-bottom: 15px;
    }

/* Login process */

  .ui-mobile .login-process.ui-page-active {
    display: flex;
    flex-flow: column;
  }

  .login-process:before{
    position: absolute;
    content: '';
    display: block;
    width: 450px;
    height: 450px;
    background: rgba(0, 216, 244, 0.2);
    z-index: -1;
    border-radius: 100%;
    transform: translate(50%, 40%);
  }

  .login-process .logo{
    padding: 2em;
  }

  .login-process .logo:before{
    content: '';
    width: 300px;
    height: 300px;
    background: #45D2EE;
    display: block;
    border-radius: 100%;
    position: absolute;
    z-index: -1;
    transform: translate(-170px, -240px);
  }

  .login-process form{
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    align-items: stretch;
  }

  .ui-header{
    width: 100%;
    height: fit-content;
  }

  .ui-content{
    width: calc(100% - 50px);
    padding: 0px 25px;
    display: flex;
    flex-direction: column;
  }

  .notification-screen{
    background-color: #45D2EE;
  }

  .notification-screen .ui-content{
    text-align: center;
    align-self: center;
    justify-content: center;
    height: calc(100vh - 70px);
  }

  .notification-screen .icon{
    width: 180px;
    height: 180px;
    background: #E1F150;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    border-radius: 100%;
  }

  .notification-screen .icon.icon-sucess:after{
    content: '';
    display: block;
    background-image: url('../images/icons/success.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 104px;
    height: 104px;
  }

  .notification-screen .icon.icon-thanks:after{
    content: '';
    display: block;
    background-image: url('../images/icons/thanks.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 114px;
    height: 111px;
  }

  .notification-screen .icon.icon-card:after{
    content: '';
    display: block;
    background-image: url('../images/icons/card.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 114px;
    height: 111px;
  }

  .pin .ui-content{
    align-self: center;
  }

  /* Dashboard */

    .logged-in .logo{
      z-index: 1004;
    }

    .logged-in .logo:before{
      display: block;
      position: absolute;
      left: calc(50vw - 100px);
      top: -136px;
      content: '';
      background: #000;
      width: 200px;
      height: 200px;
      z-index: 1000;
      transform: translate(0, 0);
      border-radius: 100%;
      box-shadow: 0px 0px 15px rgba(0,0,0, 0.5);
      transition: all 1s ease-in-out;
    }

    .logged-in .logo.open:before{
      width: 100vh;
      height: 100vh;
      top: -50px;
      left: calc(50vw - 50vh);
    }

    .logged-in .logo img{
      filter: invert(1);
      z-index: 1003;
      position: absolute;
      left: calc(50vw - 40px);
      top: 10px;
    }

    .logged-in .ui-header{
      background-image: url('../images/dashboard-header.png');
      background-repeat: no-repeat;
      background-size: contain;
      background-position: right center;
    }

    .logged-in .ui-header .col-left{
      padding: 20px 0 0 20px;
    }

    .logged-in .ui-header .col-left .title,
    .logged-in .nav-content .title{
      padding: 0px 0 0 15px;
    }

    .logged-in #menu .nav-content{
      opacity: 0;
      transition: all 1s ease-in-out;
    }

    .logged-in #menu.ui-panel-open .nav-content{
      opacity: 1;
    }

    .logged-in #menu .ui-panel-inner a,
    .logged-in #menu .ui-panel-inner{
      color: #fff;
    }

    .logged-in #menu .ui-panel-inner{
      padding: 20px 0 0 20px;
    }

/* Add card */

  .home .add-card{
    position: absolute;
    right: 0;
    transform: translate(0px, -20px);
    z-index: 3;
  }

  .cards .add-card{
    margin: 0px auto 0px auto;
  }

@media (min-width: 1024px) and (max-width: 2560px) {
    .splash,
    .login{
      background-repeat: no-repeat;
      background-size: contain;
      background-position: 120% center;
    }
    .ui-content,
    .ui-footer-fixed{
      max-width: 720px;
      margin: auto;
    }
    .login .ui-content{
      margin: 0 auto 35px auto;;
    }
    .swiper-container{
      overflow: hidden !important;
    }
    .see-cards {
      width: 455px;
      margin-left: auto !important;
      margin-right: auto;
    }
    .swiper-pagination.swiper-pagination-bullets{
      left: 215px !important;
    }
    .swiper-container .card .number { 
        transform: translate(0px, -35px);
    }
    .swiper-container .card{
        font-size: 19px !important;
    }
    .card-single .card {
        font-size: 23px !important;
    }
    .card-single .card .cvv{
        margin-left: 25px !important;
    }
    .swiper-container .card .valid, .swiper-container .card .cvv {
        margin-left: 15px !important;
        transform: translate(0px, 0px) !important;
    }
    .logged-in .logo.open:before {
        width: 150vh;
        height: 150vh;
        top: -300px;
        left: -15vh;
    }
    .cards .swiper-container .card, .card-single .card {
        padding: 49% 15px 35px 15px !important;
    }
    .cards .card-single{
      width: 470px;
      margin: 15px auto;
    }
    .login form{
      width: 420px;
      margin: auto;
    }
    #ppic-listbox-popup{
        width: 320px;
        max-width: 320px !important;
        top: 20px !important;
        left: 0px !important;
        max-height: 300px;
    }
    #ppic-listbox-popup .ui-popup.ui-body-inherit{
        max-height: 80vh;
        overflow: scroll;
        border-radius: 0px;
    }

}