html, body, * {
  background-color: transparent;
}

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

body {
  margin: 0px;
}

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

*:focus {
  outline: none;
}

input {
  position: absolute;
  padding: 0px;
  font-size: 1em;
  border: none;
  box-shadow: none;
  box-sizing: border-box;
}

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

.error {
  color: #ff0000;
}

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

.icon{
  height: 30px;
  width: 100px;
  position: absolute;
  right: 0px;
  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);
}

.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%);
}