@import "/content/dam/amex/nl/assets/bubl/css/elements-v4/base.css";

/* VERSIE: 26-04-2023 */

.none {display:none;}
.container-fluid .ShopBar {height: 100px; bottom: -100px; transition: bottom 0.5s ease-in-out;}
.container-fluid .ShopBar.active {bottom: 0px;}
#amex-footer {margin-bottom: 6rem!important;}
#creditcard-offer-flying-blue.Florish::after {width:65%!important;}

table {
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  width: 100%;
  table-layout: fixed;
  background: #fff;
box-shadow:0px 10px 30px rgba(0, 0, 0, 0.25);
    margin-top: 30px;
    border-radius:10px;
    -moz-border-radius:10px;
}

table caption {
  font-size: 1.5em;
  margin: .5em 0 .75em;
}

table tr {
  padding: 14px;
    
    border-radius:10px;
    -moz-border-radius:10px;
}
table td {
  border-bottom: 1px solid #ddd;
color: #006fcf;
}    
table th {
    border-radius:10px;
    -moz-border-radius:10px;
}

table th,
table td {
  padding: 20px;
  text-align: center;
}
table th.ta-l,
table td.ta-l {text-align: left!important;}
table th {
  font-size: .85em;
  letter-spacing: .1em;
}
    table td img {height: 18px; width: auto;}

@media screen and (max-width: 600px) {
table th.ta-l,
table td.ta-l  {text-align: right!important;}
  table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }
  
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  
  table tr {
    border 1px solid #fff;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: right;
  }
  
  table td::before {
    /*
    * aria-label has no advantage, it won't be read inside a table
    content: attr(aria-label);
    */
    content: attr(data-label);
    float: left;
    font-weight: bold;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}
}


/* 1280+  ------------------------------- */
@media only screen and (min-width: 1280px) {}

/* 1024:1279  --------------------------------- */
@media (min-width:1024px) and (max-width:1279px) {}

/* 769:1023  --------------------------------- */
@media (min-width:769px) and (max-width:1023px) {}

/* 577:768  --------------------------------- */
@media (min-width:577px) and (max-width:768px) {}

/* 576  ------------------------------- */
@media only screen and (max-width: 576px) {}

/* ------------------------------------------------------------------------------------ */
/* -- Custom CSS added 20-04-23 ------------------------------------------------------- */
/* ------------------------------------------------------------------------------------ */
/* -- Background colors and assets ---------------------------------------------------- */
#platinumcardoffer.cardoffer {background-color: #efefef;}
#bluecardoffer.cardoffer {background-color: #cff1ff;}
#greencardoffer.cardoffer {background-color: #ecffe3;}
#creditcard-bestedingslimiet-intro {background: rgba(0, 111, 207, 0.25);}
#creditcard-bestedingslimiet-plaattekst {background: rgba(0, 111, 207, 0.25);}
#creditcard-bestedingslimiet-intro-twee {background: rgba(0, 111, 207, 0.25);}
#creditcard-bestedingslimiet-tabel {background: rgba(0, 111, 207, 0.25);}
#creditcard-platinumprivileges-specialf.RibbonA::after{bottom:0px; background-color:#ececec; opacity: 30%; pointer-events: none;}
.gradient-linear-tb{background-image: linear-gradient(-8deg, #00175a, 85% ,#006fcf);}
#creditcard-greencard-textplaat .dls-deep-blue-bg{background-image: linear-gradient(-200deg, #00175a, 90% ,#006fcf);}
#creditcard-service-textplaat img{border-radius: var(--BrSmall); box-shadow:var(--BoxShadow);}
#creditcard-service-textplaat .container{position: relative; z-index: 1; }
#creditcard-offer-flying-blue.Florish::after{pointer-events:none!important; background-color:rgba(0, 111, 207, 0.25);}
#creditcard-offer-flying-blue.Florish::before{display: none}
/* -- Service background -------------------------------------------------------------- */
#creditcard-service-textplaat::after{content: ''; position: absolute; inset:0; width: 100%; height: 100%; background-image: linear-gradient(#00175a, rgba(255, 255, 255, .1)); z-index: 0; -webkit-mask-image: url(/content/dam/amex/nl/assets/bubl/img/servicePattern.svg); mask-image: url(/content/dam/amex/nl/assets/bubl/img/servicePattern.svg); -webkit-mask-repeat: no-repeat; -webkit-mask-size: 90%; mask-repeat: no-repeat; mask-size: 100%; -webkit-mask-position: right bottom; mask-position: right bottom; opacity: .3}

.container-fluid .ShopBar .image.parbase .CardArt img{aspect-ratio: 1!important; max-width:60px!important;}

/* -- Mobile fixes -- */
@media only screen and (max-width: 767px) {
  .container-fluid .grid #creditcard-bestedingslimiet-plaattekst.TextPlaat {margin-bottom: 0px !important;}
  .container-fluid .grid #creditcard-greencard-textplaat.TextPlaat {margin-bottom: 0px !important; padding-bottom: var(--Sz01)!important;}
}