body * {
  font-family: 'Open Sans', sans-serif;
}

body {
  max-width: 500px;
  margin: 0px;
  margin-left: auto;
  margin-right: auto;

}

::-ms-clear {
  display: none;
}

.container:after, .row:after, .u-cf {
  content: "";
  display: table;
  clear: both;
}

input{
  height: 38px;
  padding: 6px 10px;
  font-size: 1em;
  border: 1px solid #D1D1D1;
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
  background-size: auto 25px;
  background-origin: border-box;
  background-repeat:no-repeat !important;
  background-position: right 10px top 7px;
}

input:-webkit-autofill {
  animation-duration: 50000s;
	animation-name: onautofillstart;
}

@keyframes onautofillstart { from {} }

.error {
  color: #ff0000;
}

.column{
  box-sizing: border-box;
}

.u-full-width {
  width: 100%;
}

label, legend {
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
  font-weight: 200 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon{
  height: 30px;
  width: 100px;
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 100;
  background-size: 30px;
  background-repeat: no-repeat;
  background-position: right 0px;
  pointer-events:none;
}

.inputwithicon{
  position: relative;
}

.visalogo {
  background-image: url(../../default/img/visa.svg);
  background-size: 50px !important;
  background-position: right 0px top 3px !important;
}

.mastercardlogo {
  background-image: url(../../default/img/mastercard.svg);
  background-size: 35px !important;
  background-position: right 0px top -1px !important;
}

.maestrologo {
  background-image: url(../../default/img/maestro.svg);
  background-size: 50px;
  background-position: right -9px top -3px;
}

.jcblogo {
  background-image: url(../../default/img/jcb.svg);
}

.dinerslogo {
  background-image: url(../../default/img/diners.svg);
}

.amexlogo {
  background-image: url(../../default/img/amex.svg);
  background-size: 25px;
}

#error {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  height: 100%;
  background-color: rgba(116, 116, 116, 0.89);
}

.errortext{
  color: white;
  font-weight: 100;
  background-image: url(../../default/img/invalid.svg);
  background-repeat: no-repeat;
  background-size: contain;
  padding-left: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}

.container {
  width: 50%;
  float: left;
  text-align: center;
  display: none;
}

@media (min-width: 320px) {
  .expiry{
    width:48%;
    float:left;
  }
  .cvc{
    width:48%;
    float:right;
  }
  .tokenizer.MAESTRO .identifier {
    float: left;
    width: 70%;
  }
  .tokenizer.MAESTRO .expiry {
    float: right;
    width: 28%;
  }
}