:root {
  --ui-color-btnbg: #ccc;
  --ui-color-brand: #06f;

  --ui-color-n-000: #fff;
  --ui-color-n-050: #eee;
  --ui-color-n-100: #ebebeb;
  --ui-color-n-300: #aeaeae;
  --ui-color-n-500: #353535;
  --ui-color-n-900: #1a1a1a;

  --ui-color-bg-primary  : var(--ui-color-n-000);
  --ui-color-bg-secondary: var(--ui-color-n-050);

  --ui-color-border: var(--ui-color-n-100);

  --ui-color-typo-head: var(--ui-color-n-500);
  --ui-color-typo-body: var(--ui-color-n-900);
  --ui-color-typo-note: var(--ui-color-n-300);
  --ui-color-typo-btn : var(--ui-color-n-000);

  --ui-typo-typeface: "Inter", sans-serif;

  --ui-typo-h1: 2rem;
  --ui-typo-h2: 1.5rem;
  --ui-typo-h3: 1.25rem;
  --ui-typo-p : 1rem;
  --ui-typo-s : .75rem;

  --ui-typo-h1-leading  : 1.2;
  --ui-typo-h2-leading  : 1.2;
  --ui-typo-p-leading   : 1.5;

  --ui-typo-margin-head : .75rem;
  --ui-typo-margin-body : 1.25rem;

  --ui-lay-pack     : 1rem;
  --ui-lay-grid     : 3.75rem;
  --ui-lay-gutter   : 1rem;

  --ui-gap-head : 1rem;
  --ui-gap-cta  : .75rem;
  --ui-gap-hero : 2rem;
  --ui-gap-info : 2rem;
  --ui-gap-card : 1.25rem;
  --ui-gap-fees : 2rem;

  --ui-radius-btn   : 5rem;
  --ui-radius-card  : .5rem;
}

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background-color: var(--ui-color-bg-primary);
  color: var(--ui-color-typo-body);
  font-family: var(--ui-typo-typeface);
  font-feature-settings: "liga", "kern";
  font-size: var(--ui-typo-p);
  font-weight: 400;
  line-height: var(--ui-typo-p-leading);
  margin: 0 auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ui-color-brand);
  text-decoration-color: var(--ui-color-typo-note);
}

.-bb{ border-bottom:1px solid #000; }

.-btn{
  height: 4rem;
  min-width: 4rem;
  background-color: lightyellow;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
  white-space:nowrap;
}


.btn24{
  height: 4rem;
  min-width: 4rem;
}


.btn24 img{
  margin: 1rem;
  height: 2rem;
  width: 2rem;
}

.btn48{
  height: 4rem;
  min-width: 4rem;
}

.btn48 img{
  margin: 0;
  height: 4rem;
  width: 4rem;
}


a:hover{
  cursor: pointer;
  text-decoration: none;
  background-color: var(--ui-color-btnbg);
}

.h-3rem{ height: 3rem; }
.h-4rem{ height: 4rem; }
.h-6rem{ height: 6rem; }

h1,
h2,
p,
ul {
  margin-top: 0;
}

h1,
h2 {
  color: var(--ui-color-typo-head);
  margin-bottom: var(--ui-typo-margin-head);
}

h1 {
  font-size: var(--ui-typo-h1);
  line-height: var(--ui-typo-h1-leading);
}

h2 {
  font-size: var(--ui-typo-h2);
  line-height: var(--ui-typo-h2-leading);
}

p,
ul {
  margin-bottom: var(--ui-typo-margin-body);
}

p:last-child,
ul:last-child {
  margin-bottom: 0;
}

ul {
  padding-left: 0;
}

strong {
  font-weight: 700;
}

small {
  font-size: var(--ui-typo-s);
}

.t-note {
  color: var(--ui-color-typo-note);
  line-height: 1rem;
}

img,
svg {
  display: block;
  height: auto;
  margin: 0 auto;
  max-width: 100%;
}

img[src*="/i/crd"] {
 border-radius: var(--ui-gap-card);
 overflow: hidden;
}

input {
  margin: 0;
}

input[type=text],
input[type=email],
textarea,
select
{
    background-color: lightyellow;
    border:none;
    outline:none;
    padding:0 0 0 0;
}

input[type=text]:disabled,
textarea:disabled,
select:disabled
{
    background-color: transparent;
}

input[type=submit]
{
    background: none;
/*    background-color: none;*/
    border:none;
    cursor: pointer;
    outline:none;
    padding:0;
}

input[type=submit].ico:hover{
    background:#ccc;
    text-decoration: none
}

.info,
.table{
    width: 100%;
}

.info   form i > input[type=email],
.info   form i > input[type=text],
.info   form i > select{
    width: 100%;
}

textarea {
    height: 3em;
    margin: 0 0 0 0;
    min-height: 3em;
    width: 100%;
    resize: vertical;
}


.info > a,
.info > p
{
    display: list-item;
    text-decoration: none;
}

.info a::marker,
.info p::marker
{
    content: none;
    display: none;
}

.info p {
    font-size: 100%;
    margin:0;
    padding: 0 0 0 0;
    vertical-align: top;
}

.info b {
    display: inline-block;
    min-width: 9rem;
/*    padding-right: .5em;*/
    vertical-align: top;
    white-space: nowrap;
}

.info i {
    color: #000;
    display: inline-block;
    font-style: normal;
    padding: 0;
    margin: 0;
    text-decoration: none;
    vertical-align: top;
}

.info   a{
    text-decoration: none;
}

.info   > a,
.info   > p
{
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
}

.info   u
{
    display: table-cell;
    text-decoration: none;
}

.info u.btn24{
  height: 4rem;
  min-width: 4rem;
}

.info   b
{
    display: table-cell;
    vertical-align: middle;
    padding-left: 1rem;
    padding-right: 1rem;
}

.info   i
{
    display: table-cell;
    vertical-align: middle;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
    width: 100%;
}

.table{
    display: table;
    font-size: 80%;
}

.table > a,
.table > p,
.table > form
{
    display: table-row;
    text-decoration: none;
}

.table > a > b,
.table > a > i,
.table > p > b,
.table > p > i
{
    display: table-cell;
    vertical-align: top;
    padding: .5em 0 .5em 1em;
    border-bottom: 1px solid #eee;
}

.g-signin2 {
    width: 100% !important;
}

.g-signin2 .abcRioButton {
    width: 100% !important;
}

.ui-lay-pack {
  padding-left: var(--ui-lay-pack);
  padding-right: var(--ui-lay-pack);
}

.ui-sec-head .ui-lay-pack {
  padding: 0;
}

.ui-lay-flex,
.ui-lay-grid {
  align-items: center;
  justify-content: center;
}

.ui-lay-flex {
  display: flex;
}

.ui-lay-grid {
  display: grid;
}

.ui-cta {
  flex-direction: column;
  row-gap: var(--ui-gap-cta);
}

.ui-btn {
  border: .0625rem solid var(--ui-color-brand);
  border-radius: var(--ui-radius-btn);
  display: block;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}

.ui-btn {
  display: block;
  font-weight: 700;
  line-height: 1;
}

.t-end {
  text-align: end;
}
.t-left {
  text-align: left;
}

.t-nowrap {
  white-space:nowrap;
}


.ui-btn-primary {
  background-color: var(--ui-color-brand);
  color: var(--ui-color-typo-btn);
}

.ui-btn-secondary {
  background-color: var(--ui-color-bg-primary);
  color: var(--ui-color-brand);
}

.ui-btn-big,
.ui-btn-norm {
  padding: .75rem 1rem .75rem;
}

.ui-btn-icon {
  align-items: center;
  column-gap: .5rem;
  display: flex;
}

.ui-btn-big {
  width: 100%;
}

.ui-btn-norm {
  width: fit-content;
}

.ui-card {
  border: .0625rem solid var(--ui-color-border);
  border-radius: var(--ui-radius-card);
  overflow: hidden;
  width: 100%;
}

.ui-list {
  grid-template-columns: 1fr;
  row-gap: .75rem;
}

.ui-li,
.ui-li0
 {
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 1.25rem;
  list-style: none;
  padding-left: 1.75rem;
}

.bg-img-android { background-image: url(/i/android_black_24dp.svg);}
.bg-img-apple { background-image: url(/i/apple_black_24dp.svg);}
.bg-img-ax    { background-image: url(/i/ax.svg);}
.bg-img-back  { background-image: url(/i/back.svg);}
.bg-img-call  { background-image: url(/i/call.svg);}
.bg-img-card  { background-image: url(/i/card24.svg);}
.bg-img-check { background-image: url(/i/check.svg);}
.bg-img-clean { background-image: url(/i/clean.svg);}
.bg-img-cross { background-image: url(/i/cross.svg);}
.bg-img-delete{ background-image: url(/i/delete.svg);}
.bg-img-dk    { background-image: url(/i/dk.svg);}
.bg-img-dn    { background-image: url(/i/dn.svg);}
.bg-img-file  { background-image: url(/i/file.svg);}
.bg-img-gear  { background-image: url(/i/gear.svg);}
.bg-img-handypay { background-image: url(/i/logo24x24pay.svg);}
.bg-img-hcebridge { background-image: url(/i/logo24x24hce.svg);}
.bg-img-history { background-image: url(/i/history24x24.svg);}
.bg-img-in    { background-image: url(/i/in.svg);}
.bg-img-install{ background-image: url(/i/install_mobile.svg);}
.bg-img-jc    { background-image: url(/i/jc.svg);}
.bg-img-link  { background-image: url(/i/link.svg);}
.bg-img-logo  { background-image: url(/i/logo.svg);}
.bg-img-logout{ background-image: url(/i/logout.svg);}
.bg-img-mail  { background-image: url(/i/mail.svg);}
.bg-img-mc    { background-image: url(/i/mc.svg);}
.bg-img-mir   { background-image: url(/i/mir.svg);}
.bg-img-net   { background-image: url(/i/net.svg);}
.bg-img-nfc   { background-image: url(/i/nfc_black_24dp.svg);}
.bg-img-nfcreader { background-image: url(/i/logo24x24nfc.svg);}
.bg-img-pci   { background-image: url(/i/pci.svg);}
.bg-img-play  { background-image: url(/i/play.svg);}
.bg-img-pp    { background-image: url(/i/pp.svg);}
.bg-img-ppse  { background-image: url(/i/ppse_black_24dp.svg);}
.bg-img-q     { background-image: url(/i/help-b.svg);}
.bg-img-signin{ background-image: url(/i/signin.svg);}
.bg-img-tap_pay { background-image: url(/i/tap_pay_24dp.svg);}
.bg-img-todo  { background-image: url(/i/todo.svg);}
.bg-img-trip  { background-image: url(/i/trip.svg);}
.bg-img-up    { background-image: url(/i/up.svg);}
.bg-img-user  { background-image: url(/i/user.svg);}
.bg-img-user_no { background-image: url(/i/no_accounts.svg);}
.bg-img-users { background-image: url(/i/users.svg);}
.bg-img-v     { background-image: url(/i/check.svg);}
.bg-img-vs    { background-image: url(/i/vs.svg);}
.bg-img-x     { background-image: url(/i/cross.svg);}

.-bg-green, .-bg-note { background-color: lightgreen; }
.-bg-warn { background-color: mistyrose;  }


.bg-icon {
  display: block;
  height: 4rem;
  width: 4rem;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.bg-icon24 {
  display: block;
  height: 4rem;
  width: 4rem;
  min-width: 4rem;
  background-position: 1rem 1rem;
  background-repeat: no-repeat;
  background-size: 2rem;
  z-index: 1;
}


.ui-sec-head {
  width: 100%;
  position: fixed;
  right: 0;
  top: 0;
}

.ui-sec-head {
  background-color: var(--ui-color-bg-secondary);
  height: 4rem;
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.ui-sec-head-lay {
  justify-content: space-between;
  height: 2rem;
}

.ui-sec-head-logo {
  z-index: 1;
}

#ui-sec-head-menu-id {
  display: none;
}

.ui-sec-head-menu-icon {
  cursor: pointer;
  display: block;
  height: 4rem;
  width: 4rem;
  background-image: url(./i/menu.svg);
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

#ui-sec-head-menu-id:checked ~
.ui-sec-head-menu-icon {
  background-image: url(./i/close.svg);
}

.ui-sec-head-nav {
  background-color: var(--ui-color-bg-primary);
  box-shadow: 0 .5rem 1rem rgba(0,0,0,.05);
  flex-direction: column;
  gap: var(--ui-gap-head);
  left: 0;
  opacity: 0;
  padding: 7rem var(--ui-lay-pack) 5rem;
  position: absolute;
  right: 0;
  top: -1rem;
  transition: all 250ms cubic-bezier(.785, .135, .15, .86);
  visibility: hidden;
}

#ui-sec-head-menu-id:checked ~
.ui-sec-head-nav {
  opacity: 1;
  top: 0;
  visibility: visible;
}

.ui-sec-head-nav > a {
  font-size: var(--ui-typo-h3);
  padding: .5rem;
  text-decoration: none;
}

.ui-sec-hero {
  padding-bottom: 1rem;
  padding-top   : 5rem;
  text-align    : center;
}

.ui-sec-hero-lay {
  row-gap: var(--ui-gap-hero);
}

.ui-sec-info {
  padding-bottom: 3rem;
  padding-top   : 3rem;
}

.ui-sec-info-lay {
  row-gap: var(--ui-gap-info);
}

.ui-sec-info-lay:first-of-type div {
  grid-row-start: 1;
}

.ui-sec-info-lay:last-of-type {
  margin-top: 5rem;
}

.ui-sec-fees {
  background-color: var(--ui-color-bg-secondary);
  padding-bottom: 2rem;
  padding-top: 2rem;
  text-align: center;
}

.ui-sec-fees-lay {
  justify-content: initial;
  margin-bottom: var(--ui-gap-fees);
  margin-top: var(--ui-gap-fees);
  row-gap: var(--ui-gap-card);
}

.ui-card-fees {
  background-color: var(--ui-color-bg-primary);
  padding: 1.5rem 1.5rem 1.75rem;
  text-align: left;
}

.ui-card-fees-price {
  line-height: 1;
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}

.ui-card-fees-amount {
  font-size: var(--ui-typo-h1);
  font-weight: 700;
}

.ui-card-fees-amount-e::before {
  content: "€ ";
}

.ui-card-fees-amount-5::before {
  content: "€ 5";
}

.ui-list-fees {
  margin-bottom: 1.5rem;
  margin-top: 1.25rem;
}


.ui-sec-compare {
  background-color: var(--ui-color-bg-secondary);
  padding-bottom: 2rem;
  padding-top: 2rem;
  text-align: center;
}

.ui-sec-compare-lay {
  justify-content: initial;
  margin-bottom: var(--ui-gap-fees);
  margin-top: var(--ui-gap-fees);
  row-gap: var(--ui-gap-card);
}


.ui-card-compare {
  background-color: var(--ui-color-bg-primary);
  height: 100%;
  padding: 1rem 1rem 1.25rem;
  text-align: left;
}

.ui-list-compare {
  margin-bottom: 1.5rem;
  margin-top: 1.25rem;
}


.ui-sec-close {
  background-color: var(--ui-color-bg-secondary);
  padding-bottom: 2rem;
  padding-top: 2rem;
  text-align: center;
}

.ui-sec-close-lay {
  justify-content: initial;
  row-gap: var(--ui-gap-card);
}


.ui-sec-foot {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.ui-sec-foot-lay {
  column-gap: 1rem;
  height: 2rem;
}

.ui-sec-foot-copy {
  margin-bottom: 0;
  margin-right: auto;
}

.w-100{
  width:100%;
}

.-color-link{
  color: var(--ui-color-brand);
  text-decoration-line: underline;
}

/* 768PX */
@media screen and (min-width: 48rem) {
  :root {
    --ui-typo-h1: 2rem;
    --ui-typo-h2: 1.75rem;
    --ui-typo-p : 1.25rem;
    --ui-typo-s : .75rem;

    --ui-typo-margin-body: 1.25rem;

    --ui-lay-pack: 1rem;
    --ui-lay-gutter   : 1.5rem;

    --ui-gap-head   : 1.5rem;
    --ui-gap-card   : 1.5rem;
  }

.g-signin2 {
}

.g-signin2 .abcRioButton {
    width: 30rem !important;
}

  .ui-img-half-left {
    padding-right: var(--ui-lay-gutter);
  }

  .ui-img-half-right {
    padding-left: var(--ui-lay-gutter);
  }

  .ui-lay-pack,
  .ui-lay-column-center {
    margin-left: auto;
    margin-right: auto;
  }

  .ui-lay-grid-2 {
    column-gap: var(--ui-lay-gutter);
    grid-template-columns: repeat(2, 1fr);
    justify-items: center;
  }

  .ui-lay-grid-compare {
    column-gap: var(--ui-lay-gutter);
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
  }

  .ui-lay-column-4 {
    width: calc((var(--ui-lay-grid) * 4) +
           (var(--ui-lay-gutter) * 3));
  }

  .ui-lay-column-6 {
    width: calc((var(--ui-lay-grid) * 6) +
           (var(--ui-lay-gutter) * 5));
  }

  .ui-li {
    background-size: 1.25rem;
    padding-left: 2rem;
  }

  .ui-li0 {
    background-size: 1rem;
    padding-left: 0;
  }

  .ui-sec-head {
    position: inherit;
    padding-top: 1rem;
  }

  .ui-sec-head .ui-lay-pack {
    padding-left: var(--ui-lay-pack);
    padding-right: var(--ui-lay-pack);
  }

  .ui-sec-head-menu-icon {
    display: none;
  }

  .ui-sec-head-nav {
    background-color: transparent;
    box-shadow: none;
    flex-direction: row;
    opacity: 1;
    padding: 0;
    position: static;
    visibility: visible;
  }
  
  .ui-sec-head-nav > a {
    font-size: var(--ui-typo-p);
    padding: 0;
  }

  .ui-sec-hero {
    padding-bottom: 1rem;
    padding-top   : 1rem;
    text-align: left;
  }

  .ui-sec-hero .ui-cta {
    align-items: start;
  }

  .ui-sec-info-lay:first-of-type div {
    grid-row-start: initial;
  }

  .ui-card-fees {
    padding: 2rem 2rem 2.25rem;
  }

  .ui-sec-foot {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
  
}

/* 1024PX */
@media screen and (min-width: 64rem) {
  :root {
    --ui-lay-pack: 0;
  }


.g-signin2 {
}

.g-signin2 .abcRioButton {
    width: 30rem !important;
}

  .ui-lay-pack { width: 60rem; }

  .ui-sec-head {
    position: inherit;
    padding-top: 1rem;
  }

  .ui-sec-hero {
    padding-bottom: 1rem;
    padding-top   : 1rem;
    text-align: left;
  }

  .ui-sec-hero .ui-cta {
    align-items: center;
    column-gap: var(--ui-gap-cta);
    flex-direction: row;
    justify-content: start;
  }
}

/* 1200PX */
@media screen and (min-width: 75rem) {
  :root {
    --ui-typo-h1: 2.75rem;
    --ui-typo-h2: 2.25rem;

    --ui-typo-margin-head : 1rem;
    --ui-typo-margin-body : 1.75rem;

    --ui-lay-grid  : 4rem;
    --ui-lay-gutter: 2rem;

    --ui-gap-head : 2rem;
    --ui-gap-card : 2rem;
    --ui-gap-fees : 3rem;
  }


.g-signin2 {
}

.g-signin2 .abcRioButton {
    width: 30rem !important;
}

  .ui-lay-pack {
    width: 70rem;
  }

  .ui-sec-compare
  .ui-lay-pack {
    width: 90%;
  }

  .ui-btn-big,
  .ui-btn-norm {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }

  .ui-sec-head {
    position: inherit;
    padding-top: 1rem;
  }

  .ui-sec-hero {
    padding-bottom: 1rem;
    padding-top   : 1rem;
    text-align: left;
  }

  .ui-sec-info {
    padding-bottom: 3rem;
    padding-top: 3rem;
  }

  .ui-sec-info-lay:last-of-type {
    margin-top: 3rem;
  }

  .ui-list-info {
    column-gap: var(--ui-lay-gutter);
    grid-template-columns: repeat(2, 1fr);
  }

  .ui-sec-fees {
    padding: 3rem;
  }

  .ui-card-fees {
    padding: 3rem;
  }

  .ui-sec-close {
    padding: 3rem;
  }

  .ui-sec-foot {
    padding-bottom: 1rem;
    padding-top: 1rem;
  }
}