/* Styling for the Ingenico-hosted card entry form */
body#pageGetMissingData {
  background-color: transparent;
  font-family: sans-serif;
}

table.ORB_TABLE_FIELDS td {
  padding: 5px 0;
}
table td.ORB_TD_ERRORRIGHT, table td.ORB_TD_ERRORLEFT {
  padding:0;
}
div.ORB_INSTRUCTIONS, div.ORB_INSTRUCTIONTEXT {
  display: none;
}

div, span {
  font-family: sans-serif;
}

label {
  font-size: 13px;
}

.ORB_INPUT,
.ORB_SELECT {
  background-color: #fff;
  border-radius: 2px;
  border: 1px solid #a2a9b1;
  color: #000;
  font-family: sans-serif;
  font-size: 13px;
  padding: .8em;
  cursor: pointer;
  margin-bottom: .2em;
  -webkit-transition: border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), box-shadow 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
  -moz-transition:    border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), box-shadow 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
  transition:         border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), box-shadow 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
.ORB_SELECT {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M11.05 3.996l-.965-1.053-4.035 3.86-3.947-3.86L1.05 3.996l5 5 5-5'/%3E%3C/svg%3E");
  background-position: right;
  background-repeat: no-repeat;
  background-origin: content-box;
  width: 120px;
  margin-right: 5px;
}

.ORB_INPUT:hover,
.ORB_SELECT:hover {
  border-color: #72777d;
}

.ORB_INPUT:focus,
.ORB_SELECT:focus {
  outline: 0;
  border-color: #36c;
  box-shadow: inset 0 0 0 1px #36c;
}

td.ORB_TD_ERRORLEFT {
  display: none;
}
input#F1136 {
  margin-right: 4px;
  width: 50px;
}
#MANDATORY_F1009, #MANDATORY_F1010 {
  display: none;
}
div.ORB_BUTTONELEMENT {
  margin-left: 0;
}
input#btnCancel {
  display: none;
}

/* Add some margins to the CVV Help pop-up page */
div#divCVVHelp {
  margin: 1em;
}
/* Hide "Press this button to return to the shop..." message */
span.ORB_BUTTONHELPTEXT {
  display: none;
}

/* Hide the drop down with only one option (why does this even exist...) */
select#selectCard {
  display: none;
}

/* bold cvv window title */
td.Heading1 {
  font-weight: bold;
}

/* Credit card number and CVV inputs should always be left-to-right */
input#F1009, input#F1136 {
  /* @noflip */
  direction: ltr;
}

input.ORB_SELECT:first-child {
  margin-right: 2%;
}

input#btnSubmit {
  background-color: #36c;
  color: #fff;
  width: 100%;
  font-family: sans-serif;
  font-size: 16px;
  font-weight: normal;
  border-radius: 2px;
  padding: .6em;
  border: 0;
  cursor: pointer;
  -webkit-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
  -moz-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
  transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input#btnSubmit:hover {
  background-color: #447ff5;
}
input#btnSubmit:active {
  background-color: #2a4b8d;
}


/* extra styles only for mobile */
@media only screen and (max-device-width : 981px) {

  #tableMissingFields {
    width: 100%;
  }

  .ORB_INPUT,
  .ORB_SELECT {
    box-sizing: border-box;
    font-size: 16px !important;
    padding: 14px !important;
  }

  /* Card number input */
  #F1009 {
    width: 100%;
  }

  /* CVV input */
  input#F1136 {
    margin-right: 4px;
    width: 5em;
  }
}