@charset "utf-8";
#cwsForm,
.cardButtons a.transfBal {
  display: none;
}

.myCardHold {
  padding: 0 0 20px 0;
  margin: 10px 0 0 0;
}

.accordion-toggle-buttons {
  position: relative;
  bottom: -1px;
  display: flex;
}

.accordion-toggle {
  position: relative;
  bottom: -1px;
  width: 100%;
  padding: 8px 27px;
  color: #000;
  font-size: 13px;
  text-align: center;
  border: 1px solid #e3e3e3;
}

.accordion-toggle + .accordion-toggle {
  position: relative;
  bottom: -1px;
  margin-left: 7px;
}

.accordion-toggle[aria-selected="true"] + .accordion-toggle,
.accordion-toggle + .accordion-toggle[aria-selected="true"] {
  margin-left: -5px;
}

#onHoldCards,
#onHoldCardsHold,
#noActiveCards {
  display: none;
}

#noActiveCards {
  padding: 0 0 20px 0;
}

#paymentHeading {
  display: none;
}

/* -- HEADER -- */
#pop_useOnMob h2 {
  border-bottom: 1px solid #b4b4b4;
  margin: 15px 0 27px 0;
  padding: 0 0 6px 0;
}

.addCard {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 14px;
  background-color: #fff;
}

#cwsForm .myCardHold h2 {
  margin: 0 0 10px 0;
}

.btn.accordion-toggle {
  background-color: #efefef;
  transition: background-color 0.3s;
}

.btn.accordion-toggle:hover {
  background-color: #d0d0d0;
}

.accordion-toggle[aria-selected="true"] {
  bottom: auto;
  background-color: #fff;
  border-bottom: none;
  box-shadow: 2px -3px 3px 0px rgba(0, 0, 0, 0.05);
  z-index: 5;
}

/* iOS tap */
.accordion-toggle[aria-selected="true"]:hover {
  background-color: #fff;
}

.limitNameLen {
  display: inline-block;
}

.cardExpireHold {
  float: right;
  font-size: 13px;
  line-height: 18px;
  font-weight: normal;
  padding: 5px 0 0 0;
}

/* -- CARD INFO -- */
.infoGroupHold {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.infoGroup {
  display: flex;
  width: calc(50% - 20px);
  margin-right: 20px;
}

.infoGroup>div+div {
  margin-left: 20px;
}

.cardBalance,
.loyaltyBalance {
  width: calc(50% - 20px);
}

.statusGroup {
  width: 50%;
}

.midClm {
  width: calc(100% - 154px - 110px - 60px);
}

html:not([lang="en"]) .midClm {
  width: calc(100% - 154px - 200px - 60px);
}

.cardText {
  float: left;
  width: 56%;
  padding: 14px 0 0 0;
}

.cardImage img {
  display: block;
  max-width: 100%;
  height: auto;
}

.cardImage img[src=""],
.cardImage img[src="undefined"] {
  display: none;
}

.cardNums {
  padding: 10px 0;
  font-size: 13px;
  font-style: italic;
  text-align: center;
}

.cardInfo {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.cardInfo h3 {
  font-weight: normal;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 6px;
}

.cws_output_loyStatus {
  font-size: 16px;
  font-weight: bold;
}

.questionIcon {
  width: 15px;
  height: 15px;
  margin-left: 5px;
  background-size: 15px;
}

.cws_output_loyActive {
  margin-top: 4px;
  color: #4E8023;
  font-size: 14px;
  font-weight: bold;
}

.cws_output_gcCur,
.pointsSpan {
  font-size: 14px;
  font-weight: bold;
}

.cws_output_gcAsOf,
.cws_output_loyAsOf {
  margin: 8px 0 0 0;
  font-size: 11px;
  line-height: 14px;
}

.cws_output_gcBal,
.cws_output_loyBal {
  font-size: 21px;
  line-height: 24px;
  font-weight: bold;
}

.cardImage {
  width: 154px;
  margin-right: 30px;
}

.statusHold {
  display: flex;
  align-items: center;
}

.cardButtons {
  width: 110px;
  margin-left: 30px;
}

html:not([lang="en"]) .cardButtons {
  width: 200px;
}

.cardButtons .material-icons {
  font-size: 18px;
  vertical-align: top;
  color: #757575;
}

.cardButtons a {
  display: block;
  font-size: 14px;
  line-height: 18px;
  text-indent: -9px;
  text-decoration: none;
}

.cardButtons a+a {
  margin-top: 13px;
}

.btnMyCards.btn {
  color: #FFF;
  padding: 8px 27px;
}

.rewardsBtn .material-icons {
  display: none;
}

.cardActionPop {
  display: none;
}

a.useOnMob {
  display: none;
}

.centerClm {
  float: left;
  width: 65%;
}

.reloadBtn {
  margin: 0 15px 0 0;
}

h2.accordion-toggle {
  margin: 0;
}

.accordion-content {
  position: relative;
  margin-bottom: 5px;
  padding: 20px 30px;
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 5%;
  border: 1px solid #e3e3e3;
}

.accordion-content[aria-hidden="true"] {
  display: none;
}

.accordion-content[aria-hidden="false"] {
  display: block;
}

.accordion_set {
  margin: 0 0 10px 0;
}

.default .accordion-content {
  display: block;
}

.inactive {
  background: #DBDBDB;
}

#onHoldCardsHold {
  padding: 20px 0 0 0;
}

.cws_output_loyActive .cardInactive {
  color: #B0AB6A;
}

.cardStatus_0 .cardActive {
  display: none;
}

.cardStatus_1 .cardInactive {
  display: none;
}

/* ============= FANCYBOX POPUPS ============== */
#cws_btn_deleteCard_confirmBtn {
  display: inline-block;
}

.confirmLost {
  display: none;
}

#pop_useOnMob {
  height: 270px;
}

#barcode128,
#barcode39 {
  margin: 26px auto 0 auto;
  display: block;
}

#barcodeQR {
  text-align: center;
  margin: 44px 0 25px 0;
}

#loadingGif {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100%;
  margin: 26px auto 0 auto;
}

#loadingBarcode {
  background-repeat: no-repeat;
  background-size: 50%;
  height: 116px;
  margin: 0 auto;
  background-position: center;
  width: 66px;
  display: none;
}

.fancybox-inner .field input {
  width: 100%;
}

.fancybox-inner section,
.confirmLost {
  padding: 0 20px 20px 20px;
}

#cws_list_transfBalCard {
  width: 100%;
}

#barcodeHold {
  width: 100%;
  min-height: 50px;
  background-repeat: no-repeat;
  background-size: 64px;
  background-position: center center;
}

#barcodeHold {
  height: 385px;
  overflow: hidden;
}

#barcode128,
#barcode39 {
  margin: 26px auto 0 auto;
  display: block;
}

#barcodeQR {
  text-align: center;
  margin: 10px 0 0 0;
  display: block;
}

ul.bxslider {
  list-style-type: none;
}

.bxslider li {
  height: 200px;
  list-style-type: none;
}

.bx-controls {
  padding: 5px;
  border: 1px solid #ccc;
  position: relative;
  top: -56px;
}

.bx-next {
  float: right;
}

.bx-viewport {
  height: 385px !important;
  position: relative;
}

.code,
.givexnum,
.bal,
.codeType,
.cardDesc,
.expire {
  display: block;
  text-align: left;
  width: 100%;
  font-size: 13px;
  margin: 0 0 10px 37px;
}

.code {
  font-size: 22px;
  font-weight: bold;
  margin: 18px 0 7px 0;
  text-align: center;
  padding: 0 0 10px 0;
}

.codeType {
  position: absolute;
  bottom: -172px;
  font-size: 12px;
  z-index: 999;
  text-align: center;
  margin: 0 0 10px 0;
}

.bal {
  font-size: 13px;
  padding: 0px 0 0 0;
}

.greenBal {
  color: #118815;
  font-weight: bold;
}

.bx-controls-direction {
  height: 32px;
  position: relative;
  text-align: center;
}

#codeType {
  font-size: 12px;
  z-index: 999;
  text-align: center;
  position: relative;
  top: 5px;
}

.bx-prev,
.bx-next {
  text-indent: -9999em;
  display: inline-block;
  width: 35px;
  height: 32px;
  background-size: 35px 32px;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
}

.bx-prev {
  background-image: url(/cws4.0/global-unix/images/structure/mob-pay-left.png);
  left: 0;
}

.bx-next {
  background-image: url(/cws4.0/global-unix/images/structure/mob-pay-right.png);
  right: 0;
}

#CWS_request_code {
  margin: 20px auto 0 auto;
}

/* Card Loss Protection Module */
a.myCardsLost {
  display: none;
}

.currency {
  font-size: 14px;
}

html[lang='fr'] #cws_btn_addCard,
html[lang='pt'] #reportLost_hold .btn {
  width: calc(100% - 40px);
  padding-left: 20px;
  padding-right: 20px;
}

html[lang='pt'] .fancybox-inner section,
.confirmLost {
  padding: 0 15px 20px;
}

@media (max-width: 1080px) {
  .accordion-toggle:before {
    right: 2%;
  }

  .infoGroup {
    width: calc(60% - 20px);
  }

  .statusGroup {
    width: 40%;
  }
}

@media (max-width:960px) {
  .transactionTable tr td:nth-child(4),
  .transactionTable tr th:nth-child(4) {
    display: none;
  }

  .cws_output_gcBal,
  .cws_output_loyBal {
    font-size: 16px;
  }

  .cardBalance,
  .loyaltyBalance {
    width: auto;
  }

  .btnMyCards.btn {
    padding: 8px 15px 8px 15px;
    font-size: 14px;
  }

  html:not([lang="en"]) .cardButtons {
    width: 150px;
  }

  html:not([lang="en"]) .midClm {
    width: calc(100% - 154px - 150px - 60px);
  }
}

@media (max-width:725px) {
  .cardInfo {
    flex-direction: row;
  }
  .cardImage {
    width: 185px;
    margin: 0 15px 0 0;
  }
  .midClm,
  html:not([lang="en"]) .midClm {
    width: calc(100% - 200px);
  }
  .cardButtons {
    width: 100%;
    margin: 20px 0 0 20px;
    column-count: 2;
    column-gap: 20px;
  }
}

@media (max-width:650px) {
  .cardExpireHold {
    float: none;
    display: block;
  }

  .cardNums {
    font-size: 12px;
    padding-bottom: 0;
  }
}

@media (max-width:500px) {
  .cardText {
    width: 100%;
    float: none;
  }

  .cardInfo h3 {
    font-size: 13px;
  }

  .cardButtons a {
    font-size: 13px;
    margin: 0 0 8px 0;
  }

  .cws_output_gcBal,
  .cws_output_loyBal,
  .cws_output_loyStatus {
    font-size: 14px;
  }

  .code,
  .givexnum,
  .bal,
  .codeType,
  .cardDesc,
  .expire {
    font-size: 12px;
    margin: 0 0 6px 11px;
    box-sizing: border-box;
  }

  .cws_output_loyActive {
    margin: 0;
  }

  .codeType {
    margin: 0 0 10px 0;
  }

  .btnMyCards.btn {
    padding: 8px 15px 8px 15px;
    font-size: 13px;
  }

  .btnMyCards.btn .material-icons {
    font-size: 13px;
  }

  .cardActive,
  .dataTables_length label,
  #cwsForm .myCardHold .accordion_set .btn {
    font-size: 13px;
  }

  #onHoldCardsClick,
  #onHoldCardsHold th,
  #onHoldCardsHold td {
    font-size: 11px;
    word-break: break-word;
  }

  html[lang='pt'] #reportLost_hold .btn {
    font-size: 13px;
  }

  html:not([lang="en"]) .cardButtons {
    width: 80%;
  }
}

@media (max-width:470px) {
  #subpageContent {
    padding-top: 20px;
  }
  .cardImage {
    margin: 0 auto 15px;
  }

  .cardInfo {
    flex-direction: column;
    justify-content: auto;
    align-items: center;
  }

  .midClm,
  html:not([lang="en"]) .midClm {
    width: auto;
  }

  .infoGroupHold {
    justify-content: space-evenly;
  }

  .infoGroup {
    justify-content: center;
    width: auto;
    margin-right: 10px;
  }

  .cardButtons {
    width: auto;
    column-count: 2;
    column-gap: 20px;
    margin: 20px auto 0;
  }

  .fancybox-inner section,
  .confirmLost {
    padding: 0 5px 20px 5px;
  }

  .statusGroup {
    width: auto;
  }

  .reloadBtnHold {
    width: 100%;
    text-align: center;
  }

  .accordion-content {
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media (max-width: 360px) {
  .reloadBtnHold {
    display: flex;
  }

  .accordion-toggle-buttons {
    flex-wrap: wrap;
  }

  .accordion-toggle + .accordion-toggle {
    margin-left: 0;
    margin-top: 5px;
  }

  .accordion-toggle[aria-selected="true"] {
    border-bottom: 1px solid #e3e3e3;
  }

  .accordion-toggle[aria-selected="true"] + .accordion-toggle,
  .accordion-toggle + .accordion-toggle[aria-selected="true"] {
    margin-left: 0;
  }
}