/* Buttons */

  .btn,
  button.ui-btn-inline,
  .ui-header button.ui-btn,
  .ui-footer button.ui-btn{
    background: #000;
    color: #fff;
    width: 210px !important;
    text-align: center;
    padding: 10px;
    display: block !important;
    margin: 10px auto;
    font-weight: bold;
    text-decoration: none;
    font-size: 14px !important;
    border-radius: 4px;
    box-shadow: 0px 0px 5px 0px rgba(0,0,0, 0.3);
    transition: all 0.3s ease-in-out;
  }

  .btn:focus{
    transform: scale(1.2);
    box-shadow: 0px 0px 20px 0px rgba(0,0,0, 0.3);
  }

  .btn.lft-icon:before{
    content: '';
    position: absolute;
    display: block;
    width: 21px;
    height: 21px;
    border-right: 1px solid #fff;
    padding-right: 8px;
  }

  .btn.lft-icon.user-login:before{
    background: url('../images/icons/login-icon.svg');
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 20px;
  }

  .btn.lft-icon.user-create:before{
    background: url('../images/icons/create-icon.svg');
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 20px;
  }

  .btn.green,
  .ui-footer .btn.green{
    color: #000;
    background: rgba(225, 241, 80, 1);
    box-shadow: 0px 0px 5px 0px rgba(225, 241, 80, 1);
  }

  .btn.green:focus{
    box-shadow: 0px 0px 20px 0px rgba(225, 241, 80, 1);
    outline: 0px;
  }

  .btn.next{
    display: flex;
    justify-content: center;
  }

  .btn.next:after{
    content: '';
    width: 17px;
    height: 17px;
    padding-left: 5px;
    background: url('../images/icons/right.svg');
    background-repeat: no-repeat;
    background-position: bottom right;
    background-size: 14px;
    display: inline-block;
  }


/* Forms */

  .ui-input-text .input,
  .input{
    font-family: 'Poppins', sans-serif;
    background-color: #F4F4F4;
    border-radius: 4px;
    border: none;
    padding: 15px 25px 15px 25px;
    width: calc(100% - 50px);
    margin: 5px 0px;
    font-size: 12px;
    font-weight: 400;
  }

  .input:focus{
    outline: 0;
  }

  .input::placeholder{
    font-weight: 400;
  }

  .input.rgt-icon{
    padding: 15px 50px 15px 25px;
    width: calc(100% - 75px);

  }

  .input.rgt-icon.license{
    background-image: url('../images/icons/license-passport.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 25px) center;
  }

  .input.rgt-icon.address{
    background-image: url('../images/icons/address.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 25px) center;
  }

  .input.rgt-icon.down{
    background-image: url('../images/icons/down.svg');
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: calc(100% - 25px) center;
  }

  .input.rgt-icon.phone{
    background-image: url('../images/icons/phone.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 25px) center;
  }

  .input.rgt-icon.amount{
    background-image: url('../images/icons/amount.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 25px) center;
  }
  
  .input.rgt-icon.calendar{
    background-image: url('../images/icons/calendar.svg');
    background-repeat: no-repeat;
    background-position: calc(100% - 25px) center;
    padding: 15px 50px 15px 20px;
    text-align: left;
  }

  .ui-mobile label{
    margin: 15px 0px 5px 0px !important;
    display: block;
    font-size: 13px;
    font-weight: 500;
  }

  .ui-radio label.radio-id,
  .ui-radio label.radio-bank,
  .ui-radio label.radio-card{
    margin: 0px 0px 5px 0px !important;
  }

  .ui-radio{
    margin: 0px 0px !important;
  }

  .ui-radio label{
    background: #F4F4F4;
    font-size: 12px;
    padding: 15px 25px 15px 25px;
    color: #000;
    transition: all 0.3s ease-in-out;
  }

  .ui-radio label.radio-bank:before{
    content: '';
    display: block;
    position: absolute;
    right: 20px;
    background-image: url('../images/icons/bank.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 28px;
    height: 22px;
  }

  .ui-radio label.radio-card:before{
    content: '';
    display: block;
    position: absolute;
    right: 20px;
    background-image: url('../images/icons/card.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 28px;
    height: 19px;
  }

  .ui-radio label.radio-id:before{
    content: '';
    display: block;
    position: absolute;
    right: 20px;
    background-image: url('../images/icons/license-passport.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 28px;
    height: 20px;
  }

  .ui-radio .ui-radio-off{
    opacity: 0.6;
  }

  .ui-radio .ui-radio-on{
    background: #E1F150;
    box-shadow: 0px 0px 5px 0px rgba(225, 241, 80, 1);
  }

  input[type="radio"] {
    display: none;
  }

  .ui-checkbox{
    margin-top: 0px;
  }

  .ui-checkbox label{
    margin: 0px !important;
    font-size: 12px;
    padding-left: 45px;
    padding-top: 0px;
    padding-bottom: 0px;
  }

  #pin .field-wrapper {
      display: flex;
      justify-content: center;
  }

  #pin .field-wrapper .digit{
      background: #F4F4F4;
      width: 35px;
      margin: 5px;
      text-align: center;
      font-size: 30px;
      font-weight: bold;
      border-radius: 4px;
  }

/* Timeline */

  /* Timeline vertical */

    .timeline{
      margin: 15px 0px 35px 0px;
    }

    .timeline .item .line:after{
      content:'';
      width: 3px;
      background:#45D2EE;
      display: block;
      position: absolute;
      height: 0px;
      transform: translate(-14px, 10px);
      animation: timeline-line 1s linear;
      animation-fill-mode: forwards;
    }

    .timeline .item:nth-child(2) .line:after{animation-delay: 1s;}
    .timeline .item:nth-child(3) .line:after{animation-delay: 2s;}
    .timeline .item:nth-child(4) .line:after{animation-delay: 3s;}
    .timeline .item:nth-child(5) .line:after{animation-delay: 4s;}
    .timeline .item:nth-child(6) .line:after{animation-delay: 5s;}
    .timeline .item:nth-child(7) .line:after{animation-delay: 6s;}

    @keyframes timeline-line {
      0%   {height: 0px;}
      100% {height: 85px;}
    }

    .timeline .item:last-child .line:after{
      display: none;
    }

    .timeline .item{
      display: block;
      padding: 0px 0px 0px 20px;
      height: 85px;
      font-size: 13px;
      font-weight: 500;
      /*width: 270px;*/
    }

    .timeline .item:last-child{
      height: auto;
    }

    .timeline .item:before{
      content:'';
      width: 11px;
      height: 11px;
      border-radius: 11px;
      background: #45D2EE;
      display: inline-block;
      position: absolute;
      transform: translate(-18px, 4px);
      animation: timeline-spot .5s ease-in-out;
    }

    .timeline .item:nth-child(2):before{animation-delay: 1s;}
    .timeline .item:nth-child(3):before{animation-delay: 2s;}
    .timeline .item:nth-child(4):before{animation-delay: 3s;}
    .timeline .item:nth-child(5):before{animation-delay: 4s;}
    .timeline .item:nth-child(6):before{animation-delay: 5s;}
    .timeline .item:nth-child(7):before{animation-delay: 6s;}

    @keyframes timeline-spot {
      0%   {transform: translate(-18px, 4px) scale(1);}
      50%  {transform: translate(-18px, 4px) scale(1.5);}
      100% {transform: translate(-18px, 4px) scale(1);}
    }

    .timeline .item p{
      margin: 0px;
    }

  /* Timeline vertical */

    .instalments-timeline{
      margin: 15px 0px;
    }


    .instalments-timeline .dates{
      display: flex;
      justify-content: space-between;
    }
    .instalments-timeline .dates .start,
    .instalments-timeline .dates .finish{
      font-size: 12px;
      font-weight: 500;
    }
    .instalments-timeline .dates .start:before{
      content: '';
      background: url('../images/icons/calendar.svg');
      width:12px;
      height: 12px;
      display: inline-block;
      margin-right: 5px;
    }
    .instalments-timeline .dates .finish:after{
      content: '';
      background: url('../images/icons/calendar.svg');
      width:12px;
      height: 12px;
      display: inline-block;
      margin-left: 5px;
    }
    .instalments-timeline .instalments{
      display: flex;
      justify-content: space-between;
    }
    .instalments-timeline .instalments .item{
      width: 25%;
      diplay: flex;
    }
    .instalments-timeline .instalments .item:last-child{
      width: 12px;
      diplay: flex;
    }
    .instalments-timeline .instalments .item:before{
      content: '';
      background: #777777;
      width:12px;
      height: 12px;
      border-radius: 12px;
      display: inline-block;
      transform: translate(0px, 3px);
      z-index: 2;
      position: relative;
    }
    .instalments-timeline .instalments .item .line:before{
      content: '';
      background: #777777;
      width:100%;
      height: 2px;
      display: block;
      transform: translate(0px, -11px);
    }
    .instalments-timeline .instalments .item.paid:before{
      background: #D7F500;
    }
    .instalments-timeline .instalments .item.paid .line:before{
      background: #D7F500;
    }
    .instalments-timeline .instalments .item.overdue:before{
      background: #FFBDBF;
    }
    .instalments-timeline .amounts{
      display: flex;
      justify-content: space-between;
    }
    .instalments-timeline .amounts .paid,
    .instalments-timeline .amounts .total{
      font-size: 12px;
      font-weight: 700;
    }
    .instalments-timeline .amounts .due{
      font-size: 10px;
    }

/* Tabs */

  .ui-collapsible{
    background: #fff;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
  }
  .ui-collapsible .ui-collapsible-heading{
    margin-bottom: 0px;
  }
  .ui-collapsible .ui-collapsible-heading a{
    font-size: 14px;
    font-weight: 400;
    color: #000;
    text-decoration: none;
    padding: 10px 15px;
  }
  .ui-collapsible .ui-collapsible-content{
    padding: 0px 15px 15px 15px;
  }
  .ui-collapsible .ui-collapsible-content p{
    margin: 8px 0px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.8em;
  }

  .ui-tabs .ui-navbar{
    background-color: #EBEBEB;
    padding: 5px;
    border-radius: 45px;
  }

  .ui-tabs .ui-navbar li .ui-btn{
    padding: 5px;
    text-decoration: none;
    background-color: #B2B2B2;
    color: #fff;
    font-weight: bold;
    font-size: 12px;
    transition: all 0.3s ease;
    display: flex;
  }

  .ui-tabs .ui-navbar li .ui-btn.ui-btn-active{
    background-color: #00D8F4;
    box-shadow: 0px 0px 5px rgba(0,216,244, 1);
  }

  .ui-tabs .ui-navbar li:first-child .ui-btn{
    text-align: right;
    border-radius: 45px 0 0 45px;
    margin-right: 2px;
    justify-content: flex-end;
    padding-right: 10px;
  }

  .ui-tabs .ui-navbar li:last-child .ui-btn{
    text-align: left;
    border-radius: 0 45px 45px 0;
    margin-left: 2px;
    justify-content: flex-start;
    padding-left: 10px;
  }

  .ui-tabs .ui-navbar li:first-child .ui-btn:after,
  .ui-tabs .ui-navbar li:last-child .ui-btn:before{
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
  }

  .ui-tabs .ui-navbar li .ui-btn.payments:after{
    background-image: url('../images/icons/calendar-white.svg');
    margin-left: 10px;
  }

  .ui-tabs .ui-navbar li .ui-btn.history:before{
    background-image: url('../images/icons/history.svg');
    margin-right: 10px;
  }

/* Navigation */

  .ui-footer .ui-navbar ul{
    display: flex;
    border-radius: 10px 10px 0 0;
    background: #000;
  }
  .ui-footer .ui-navbar ul li{

    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  .ui-footer .ui-navbar li .ui-btn{
    color: #fff;
    text-decoration: none;
    font-size: 8px;
    width: 100%;
    background: #000;
    transition: all 0.3s ease;
  }
  .ui-footer .ui-navbar li:first-child .ui-btn{
    border-radius: 10px 0px 0 0;
  }
  .ui-footer .ui-navbar li:last-child .ui-btn{
    border-radius: 0px 10px 0 0;
  }
  .ui-footer .ui-navbar li .ui-btn.ui-btn-active{
    background: #3B3B3B;
  }
  .ui-btn-icon-left:after, .ui-btn-icon-right:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, .ui-btn-icon-notext:after {
    width: 30px;
    height: 25px;
  }
  .ui-btn-icon-top {
    padding-top: 35px;
  }
  .ui-btn-icon-top:after {
    top: 5px;
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center;
  }
  .ui-btn-icon-notext:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after {
    left: 50%;
    margin-left: -15px;
  }
  .ui-footer .ui-navbar li:last-child .ui-btn {
    margin-right: 0px;
  }
  .ui-icon-ui-icon-request:after{
    content:'';
    background-image: url('../images/icons/request-card.svg');
  }
  .ui-icon-ui-icon-home:after{
    content:'';
    background-image: url('../images/icons/home.svg');
  }
  .ui-icon-ui-icon-card:after{
    content:'';
    background-image: url('../images/icons/cards.svg');
  }

/* Carousel */

  .swiper-container {
    width: 100%;
    height: 100%;
    overflow: initial;
  }

  .swiper-slide {
    text-align: left;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: flex;
    justify-content: flex-start;
    flex-flow: wrap;
    width: 85%;
  }

  .swiper-pagination {
    position: relative;
    text-align: center;
    transition: .3s opacity;
    transform: translate3d(0,0,0);
    z-index: 10;
    left: 125px !important;
    bottom: 0px !important;
  }

  .swiper-container .card,
  .card-single .card{
    width:100%;
    /*height: 183px;
    max-height: 183px;*/
    background-image: url('../images/flexibond-card.png');
    background-repeat: no-repeat;
    background-size: contain;
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 47% 15px 20px 15px;
    font-size: 17px;
  }

  .card-single .card{
    width:auto;
    padding: 48% 15px 20px 15px;
    font-size: 20px;
  }

  .swiper-container .card .number{
    transform: translate(0px, -5px);
  }

  .card-single .card .number{
    transform: translate(0px, -10px);
  }

  .swiper-container .card .valid,
  .swiper-container .card .cvv{
    margin-left: 5px;
    margin-top: 0px;
    transform: translate(0px, 0px); 
  }

  .card-single .card .valid,
  .card-single .card .cvv {
    margin-left: 5px;
    margin-top: 0px;
    transform: translate(0px, 0px);
  }

  .card-single .card-info,
  .swiper-container .card-info{
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 8px 0px;
    opacity: 0;
    transition: all 0.5s ease;
    border-bottom: 1px solid #E6E6E6;
  }

  .single-card-page .card-single .card-info{
    border-bottom: none;
  }

  .card-single .card-info{
    opacity: 1;
  }

  .card-single .card-info .col,
  .swiper-container .card-info .col{
    align-self: center;
  }

  .card-single .card-info .card-name,
  .swiper-container .card-info .card-name{
    margin-top: 8px;
    font-size: 14px;
    font-weight: 400;
  }

  .swiper-container .swiper-slide-active .card-info{
    opacity: 1;
  }

  .card-single{
    margin:15px 0px;
  }

  :root {
    --swiper-theme-color: #000;
  }

  .see-cards{
    margin-left: 25px;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
    color: #000;
    position: relative;
    transform: translate(0px, -20px);
    z-index: 3;
  }

/* Text */

  .title{
    font-size: 31px;
    width: 160px;
    line-height: 1em;
    font-weight: bold;
    height: 80px;
    display: flex;
    flex-wrap: wrap;
    align-items:baseline;
    align-content: flex-end;
    margin-bottom: 5px;
  }

  .title span{
    font-weight: 400;
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1em;
  }

  .title2{
    font-size: 26px;
    line-height: 1.3em;
    font-weight: 400;
    margin-top: 15px;
  }

  .notification{
    font-size: 12px;
    background: #F4F4F4;
    padding: 20px 25px 20px 25px;
    border-radius: 10px;
    display: flex;
    align-items: center;
  }

  .notification p{
    margin: 0px;
  }

  .notification:before{
    content:'';
    background-image: url('../images/icons/notification.svg');
    background-repeat: no-repeat;
    background-position: center;
    width: 38px;
    height: 28px;
    display: inline-block;
    margin-right: 10px;
  }

/* Label */

  .label{
    font-size: 9px;
    padding: 6px 10px;
    background: #fff;
    box-shadow: 0px 0px 10px rgba(0,0,0, 0.15);
    width: fit-content;
    border-radius: 45px;
    font-weight: bold;
  }
  .label.active{
    background: #D7F500;
    box-shadow: 0px 0px 10px rgba(215,245,0, 1);
  }
  .label.active.xl{
    font-size: 14px;
    font-weight: 500;
  }
  .label.used{
    background: #00D8F4;
    box-shadow: 0px 0px 10px rgba(0,216,244, 1);
  }
  .label.expired{
    background: #FFBDBF;
    box-shadow: 0px 0px 10px rgba(255,189,191, 1);
  }

  .instalments-label{
    background: #fff;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0px 0px 10px rgba(0,0,0, 0.15);
    border-radius: 45px;
    padding: 8px 20px;
    width: fit-content;
  }

  .instalments-label.black{
    background: #000;
    color: #fff;
  }

  .instalments-label:before{
    content:'Instalments';
    position: absolute;
    font-size: 9px;
    font-weight: 500;
    background: #D7F500;
    padding: 3px 8px;
    border-radius: 45px;
    transform: translate(-75px, 3px);
    color: #000;
  }

  .dotted-label{
    width: 100%;
    border: 2px dotted #ccc;
    border-radius: 10px;
    margin: 10px 0px;
  }

  .dotted-label.disabled{
    opacity: .3;
  }

  .dotted-label .tag{
    position: absolute;
    color: #6C6C6C;
    background: #fff;
    font-size: 14px;
    transform: translate(0px, -12px);
    padding: 0px 10px 0px 5px;
  }

  .dotted-label .content{
    text-align: center;
    padding: 10px;
    font-size: 24px;
    font-weight: bold;
  }

  .title-label{
    width: fit-content;
    font-size: 12px;
    text-align: right;
    padding-right: 50px;
    margin-right: 15px;
  }
  .title-label span{
    font-weight: bold;
    display: block;
  }
  .title-label:before{
    content: '';
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    width: 35px;
    height: 35px;
    background-color: #000;
    border-radius: 20px;
    position: absolute;
    margin-left: 10px;
  }
  .title-label.profile:before{
    background-image: url('../images/icons/profile-white.svg');
  }
  .title-label.card:before{
    background-image: url('../images/icons/cards.svg');
    background-size: 21px;
  }

/* Cards */

  .instalment-card{
    display: flex;
    justify-content: space-between;
    background: #FAFAFA;
    padding: 10px 15px;
    border-radius: 4px;
    border-left: 8px solid #000;
    margin: 5px 0px;
  }

  .instalment-card > div{
    align-self: center;
  }

  .instalment-card .card-info{
    width: 60%;
  }

  .instalment-card .card-info .card-name{
    font-size: 11px;
    font-weight: 500;
  }

  .instalment-card .card-info .card-date{
    font-size: 14px;
    font-weight: 600;
  }

  .instalment-card .card-amount{
    text-align: right;
    width: 25%;
  }

  .instalment-card .card-amount .card-value{
    font-size: 20px;
    font-weight: 600;
  }

  .instalment-card .card-amount .card-status{
    font-size: 9px;
    font-weight: 500;
  }

  .instalment-card .action{
    width: 15%;
    text-align: right;
    justify-content: flex-end;
    display: flex;
  }

  .instalment-card .action a{
    width: 29px;
    height: 29px;
    display: block;
    background-color: #000;
    -webkit-mask-image: url('../images/icons/right-arrow.svg');
    mask-image: url('../images/icons/right-arrow.svg');
  }

  /* Pink */

    .instalment-card.pink{
      border-color: #FFBDBF;
    }

    .instalment-card.pink .action a{
      background-color: #FFBDBF;
    }

  /* Blue */

    .instalment-card.blue{
      border-color: #00D8F4;
    }

    .instalment-card.blue .action a{
      background-color: #00D8F4;
    }

  /* Green */

    .instalment-card.green{
      border-color: #D7F500;
    }

    .instalment-card.green .action a{
      background-color: #D7F500;
    }

  /* Overdue */

    .instalment-card.overdue{
      background: #FFBDBF;
    }

  /* Paid */

    .instalment-card.paid .action a{
      -webkit-mask-image: url('../images/icons/paid-icon.svg');
      mask-image: url('../images/icons/paid-icon.svg');
    }

  /* Summary card */

    .summary-card{
      background:#F5F5F5;
      border-radius: 10px;
      margin: 10px 0px;
    }

    .summary-card .summary-title{
      background:#000;
      border-radius: 10px 10px 0 0;
      color: #fff;
      font-size: 14px;
      width: calc(100% - 40px);
      padding: 10px 20px;
      text-decoration: none;
      display: flex;
      justify-content: space-between;
    }

    .summary-card .summary-title:after{
      content: '';
      display: inline-block;
      width: 19px;
      height: 19px;
      background-image: url('../images/icons/edit-icon.svg');
      background-repeat: no-repeat;
    }

    .summary-card .content{
      font-size: 12px;
      padding: 10px 20px;
      display: block;
    }

  /* Payment card */

    .payment-card{
      display: flex;
      justify-content: space-between;
      box-shadow: 0px 0px 20px rgba(0,0,0, 0.05);
      padding: 20px;
      border-radius: 4px;
      margin: 10px 0px;
    }

    .payment-card > div,
    .payment-card > a{
      align-self: center;
    }

    .payment-card .payment-info .payment-number{
      display: flex;
    }

    .payment-card .payment-info .payment-number p{
      font-size: 12px;
      color: #000;
      font-weight: 600;
      margin:0px 0px 0px 10px;
    }

    .payment-card .payment-info .payment-number span{
      display: inline-block;
      width: 28px;
      height: 22px;
    }

    .payment-card .payment-info .payment-number span:after{
      content: '';
      display: inline-block;
      width: 28px;
      height: 22px;
      margin-right: 5px;
      background-repeat: no-repeat;
      background-position: center;
    }

    .payment-card .payment-info .payment-number span.visa:after{
      background-image: url('../images/icons/visa-icon.svg');
    }

    .payment-card .payment-info .payment-number span.mastercard:after{
      background-image: url('../images/icons/mastercard-icon.svg');
    }

    .payment-card .payment-info .payment-number span.amex:after{
      background-image: url('../images/icons/amex-icon.svg');
    }

    .payment-card .payment-info .payment-number span.bank:after{
      background-image: url('../images/icons/bank.svg');
    }

    .payment-card .payment-info .payment-number span.unknown:after{
      background-image: url('../images/icons/card.svg');
    }

    .payment-card .payment-info p{
      font-size: 10px;
      color: #8D8D8D;
      margin: 10px 0px 0px 0px;
    }

    .payment-card .payment-action,
    .basic-card .edit{
      border-left: 1px solid #707070;
      padding: 5px 0px 5px 20px;
      color: #707070;
      font-size: 12px;
      text-align: center;
      text-decoration: none;
    }

    .payment-card .payment-action:before,
    .basic-card .edit:before{
      content: '';
      background-image: url('../images/icons/edit-icon2.svg');
      display: block;
      width: 14px;
      height: 13px;
      margin: 0px auto 5px auto;
    }

  /* Basic card */

    .basic-card{
      padding: 20px;
      color:#707070;
      box-shadow: 0px 0px 20px rgba(0,0,0, 0.05);
      font-size: 12px;
      margin: 10px 0px;
      border-radius: 4px;
      display: flex;
      text-decoration: none;
    }

    .basic-card.edible{
      justify-content: space-between;
      align-items: center;
      padding: 10px 20px;
    }

    .basic-card.add:before{
      content: '';
      background-image: url('../images/icons/plus.svg');
      display: inline-block;
      width: 19px;
      height: 19px;
      margin-right: 10px;
    }

  /* Background card */

    .background-card{
      background-color:#fff;
      box-shadow: 0px 0px 20px rgba(0,0,0, 0.05);
      padding: 20px 35px 20px 35px;
      border-radius: 60px 60px 0 0;
      animation: slideUp .3s ease-in-out forwards;
    }

    @keyframes slideUp {
      0%{opacity: 0; transform: translate(0px, 45px);}
      100%{opacity: 1; transform: translate(0px, 0px);}
    }

/* Pagination */

  .steps{
    display: flex;
    justify-content: space-between;
  }

  .steps .step{
    opacity: .5;
    width: 100%;
    transition: all .3s ease;
  }

  .steps .step:last-child{
    width: auto;
  }

  .steps .step:not(:last-child):before{
    content: '';
    position: relative;
    display: block;
    width: 100%;
    height: 2px;
    background: #F2F2F2;
    transform: translate(0px, 27px);
    z-index: 0;
  }

  .steps .number{
    font-size: 29px;
    font-weight: 800;
    width: 55px;
    height: 55px;
    justify-content: center;
    align-items: center;
    background: #F2F2F2;
    color: #9B9B9B;
    border-radius: 55px;
    display: flex;
    z-index: 1;
    position: relative;
    transition: all .3s ease;
  }

  .steps .step-title{
    margin-top: 10px;
    font-size: 10px;
  }

  .steps .step-title b{
    display: block;
  }

  /* Completed */
    .steps .step.completed .number{
      background: #9B9B9B;
      color: #F2F2F2;
    }

    .steps .step.completed:not(:last-child):before{
      background: #9B9B9B;
    }

  /* Current */
    .steps .step.current .number{
      background: #00D8F4;
      color: #000;
      box-shadow: 0px 0px 10px 3px rgba(0,216,244, 1);
    }

    .steps .step.current{
      opacity: 1;
    }

/* Menu */

  .menu a .bar1,
  .menu a .bar2,
  .menu a .bar3{
    display: block;
    width: 23px;
    height: 3px;
    background: #000;
    border-radius: 3px;
    margin: 5px 0px;
    transition: all .5s ease;
    transform: rotate(0deg) translate(0px, 0px);
  }

  .menu.close a .bar1,
  .menu.close a .bar2,
  .menu.close a .bar3{
    display: block;
    width: 23px;
    height: 3px;
    background: #fff;
    border-radius: 3px;
    margin: 5px 0px;
  }

  .menu a:active .bar1,
  .menu.active a .bar1{
    transform: rotate(45deg) translate(1px, 0px);
    transform-origin: top left;
  }

  .menu a:active .bar2,
  .menu.active a .bar2{
    opacity: 0;
  }

  .menu a:active .bar3,
  .menu.active a .bar3{
    transform: rotate(-45deg) translate(-1px, 0px);
    transform-origin: top left;
  }

  .nav-content ul{
    padding-left: 15px;
    list-style: none;
    margin-top: 45px;
  }

  .nav-content ul li a{
    font-size: 28px;
    font-weight: bold;
    margin: 20px 0px;
    display: block;
  }

/* Add card */

.add-card{
  display: flex;
  justify-content: center;
  width: 45px;
  height: 45px;
  background: #D7F500;
  margin-right: 20px;
  align-items: center;
  border-radius: 45px;
  box-shadow: 0px 0px 10px rgba(215, 245, 0, 1);
}

.add-card a{
  font-size: 30px;
  font-weight: 600;
  color: #889812;
}