@charset "utf-8";

/* Form Fields
  ============================ */
input[type="text"],
input[type="password"],
input[type="submit"],
input[type="number"],
input[type="search"],
label,
textarea,
select {
  display: block;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  background-color: #f7f7f7;
  border: 1px solid #8f8f8f;
  font-size: 13px;
  line-height: 130%;
  color: #343434;
  padding: 9px 12px;
  box-sizing: border-box;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="search"],
select,
textarea {
  width: 100%;
}

input.datepicker {
  -moz-appearance: menu;
  -webkit-appearance: menulist;
  appearance: menu;
}

button:disabled,
button:disabled:hover,
input:disabled,
select:disabled {
  background-color: #d8d8d8;
  color: #969696;
}

input[type="checkbox"]:disabled:before {
  background-color: #dcdcdc;
}

label,
fieldset legend {
  font-size: 14px;
  line-height: 120%;
  margin: 0 0 10px 0;
  font-weight: bold;
}

fieldset {
  border: none;
  padding: 0;
}

/* Hidden labels only for accessiblity */
label.hiddenLbl {
  font-size: 0;
  margin: 0;
}

#cwsForm h2 {
  border-bottom: 1px solid #b4b4b4;
  margin: 15px 0 27px 0;
  padding: 0 0 6px 0;
}

.headerNotation {
  margin: 0 0 28px 0;
}

/* Custom Checkbox/Radio */
input[type="checkbox"] + label {
  padding-left: 20px;
  line-height: 130%;
  position: relative;
}

input[type="checkbox"] + label:before {
  position: absolute;
  left: 0;
}

input[type="checkbox"]:focus + label {
  text-decoration: underline;
}

input[type="radio"]:focus + label {
  text-decoration: underline;
  outline: none;
}

input[type="checkbox"],
input[type="radio"] {
  position: absolute;
  left: -9999px;
}

input[type="checkbox"] + label,
input[type="radio"] + label {
  cursor: pointer;
  text-transform: none;
  font-weight: normal;
}

input[type="checkbox"] + label:before,
input[type="radio"] + label:before {
  font-size: 18px;
  line-height: 80%;
  padding: 2px;
  font-weight: bold;
  color: #000;
  width: 10px;
  height: 10px;
  border: 1px solid #8f8f8f;
  display: inline-block;
  vertical-align: middle;
  margin: 0 5px 0 0;
  background-color: #fff;
  transition: border 0.25s;
}

input[type="checkbox"] + label:hover:before,
input[type="radio"] + label:hover:before {
  border: 1px solid #000;
}

input[type="radio"] + label:before {
  border-radius: 100%;
}

input[type="radio"]:focus + label:before {
  outline: -webkit-focus-ring-color auto 5px;
}

input[type="checkbox"] + label:before {
  content: " ";
}

input[type="checkbox"]:checked + label:before {
  content: "\2713";
  font-size: 13px;
  color: #118815;
}

input[type="radio"] + label:before {
  content: " ";
  float: left;
  clear: both;
}

input[type="radio"]:checked + label:before {
  content: "";
  background-color: #2d2d2d;
  box-shadow: inset 0 0 0 3px #fff;
  border: 1px solid #000;
}

/* Remember Me checkbox is hidden by default which gets removed from DOM in js */
label[for="cws_chk_remember"] {
  display: none;
}

.radios .val {
  position: static;
  float: left;
  display: block;
  margin: 2px 0 0 10px;
}

.radio_label {
  float: left;
}

.radios {
  padding: 8px 0 8px 0;
}

/* Form Wrappers */
.form {
  margin: 0 0 25px 0;
}

.field,
.half_field {
  width: 100%;
  margin: 0 0 17px 0;
  position: relative;
  clear: both;
}

.field {
  max-width: 380px;
}

.half_field {
  max-width: 190px;
}

.half_field .val {
  width: 200%;
  left: 0;
  text-align: left;
  right: initial;
}

.float_left {
  float: left;
}

/* Buttons */
.btn,
input[type="submit"] {
  display: block;
  background-color: #b4b4b4;
  color: #fff;
  text-align: center;
  border: none;
  font-size: 16px;
  line-height: 120%;
  font-weight: 600;
  padding: 10px 27px 10px 27px;
  margin: 0;
  background-position: right;
  background-size: 24px 15px;
  background-repeat: no-repeat;
  cursor: pointer;
  font-family: "Open Sans", Arial, sans-serif;
}

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

a.btn {
  display: inline-block;
  text-decoration: none;
}

a.btn:hover {
  color: #fff !important;
}

.btn:hover,
input[type="submit"]:hover {
  background-color: #a4a4a4;
}

.btn .material-icons {
  font-size: 18px;
  vertical-align: top;
  margin: 0 5px 0 0;
}

/* Validation */
input[type="text"].invalid,
input[type="password"].invalid,
input[type="number"].invalid,
input[type="search"].invalid,
select.invalid {
  border: 1px solid #aa0d0d;
}

input[type="text"].invalid,
input[type="password"].invalid,
input[type="number"].invalid {
  background-image: url(/cws4.0/global-unix/images/forms/icon--x.svg);
  background-repeat: no-repeat;
  background-position: 95% center;
  background-size: 14px 14px;
}

input[type="text"].valid,
input[type="password"].valid,
input[type="number"].valid {
  background-image: url(/cws4.0/global-unix/images/forms/icon--check.svg);
  background-repeat: no-repeat;
  background-position: 95% center;
  background-size: 14px 14px;
  border: 1px solid #8f8f8f;
}

input.datepicker.invalid,
input.datepicker.valid {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

select.valid {
  border: 1px solid #8f8f8f;
}

select.invalid,
select.valid {
  background-position: 92% center;
}

input[type="text"].invalid + span.val,
input[type="number"].invalid + span.val,
input[type="password"].invalid + span.val,
input[type="search"].invalid + span.val,
select.invalid ~ span.val {
  display: block;
}

fieldset.invalid .val {
  display: block;
}

.val {
  text-align: right;
  position: absolute;
  right: 2%;
  bottom: -18px;
  font-size: 12px;
  color: #aa0d0d;
  display: none;
}

button.btn ~ .val {
  position: static;
  margin: 10px 0 0 0;
  text-align: left;
}

.api_error {
  font-size: 11px;
  font-style: italic;
  color: #aa0d0d;
  padding: 10px 0 10px 0;
  display: none;
}

#cws_api_errors {
  font-size: 11px;
  font-style: italic;
  color: #aa0d0d;
  padding: 10px 0 10px 0;
  display: none;
}

#greeting {
  font-weight: normal;
}

span.val.submit {
  display: none;
}

input[type="submit"] {
  -webkit-appearance: none;
}

input[type="submit"].invalid ~ span.submit,
button.btn ~ span.submit {
  display: none;
  position: static;
  text-align: left;
  margin: 15px 0 0 0;
}

input[type="submit"] ~ span.submit,
button.btn ~ span.submit {
  display: none;
  position: static;
  text-align: left;
  margin: 15px 0 0 0;
}

input[type="checkbox"] ~ span.valIcon {
  display: none;
  position: absolute;
  right: -23px;
  top: 9px;
  width: 13px;
  height: 13px;
  display: block;
  background-repeat: no-repeat;
}

input[type="checkbox"].invalid ~ span.val {
  display: block;
  right: auto;
  text-align: left;
}

.ajaxErrorOverlay {
  position: fixed;
  top: 186px;
  left: 42.5%;
  width: 200px;
  border: 1px solid #aa0d0d;
  padding: 50px;
  text-align: center;
  color: #aa0d0d;
  font-size: 16px;
  font-weight: bold;
  display: none;
  background-color: #e1bfbf;
  z-index: 9999;
}

/* Logout */
.utilityNav #logout {
  display: none;
}

/* Question Icon */
.questionIcon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 2px 0 0 8px;
  cursor: pointer;
  background-image: url(/cws4.0/global-unix/images/forms/question-icon.png);
  background-size: 20px;
  position: relative;
}

.questionIcon.captcha {
  margin: 5px 0 0 8px;
}

.questionIcon.captcha a {
  display: inline-block;
  width: 16px;
  height: 16px;
}

.questionIcon:hover .questionBox,
.questionIcon:hover .sideArrow,
.questionIcon:focus .questionBox,
.questionIcon:focus .sideArrow {
  display: block;
}

.questionBox {
  position: absolute;
  display: none;
  width: 150px;
  padding: 8px;
  font-size: 11px;
  border: 1px solid #8f8f8f;
  background-color: #fff;
  left: 24px;
  top: -8px;
}

.sideArrow {
  width: 8px;
  height: 13px;
  display: none;
  background-image: url(/cws4.0/global-unix/images/forms/sideArrow.png);
  position: absolute;
  left: 18px;
  top: 2px;
}

/* Dynamic Messages */
#cws_dynamic_inactiveMsg,
#cws_dynamic_tempPw,
#cws_dynamic_loggedOutMsg {
  color: #aa0d0d;
  display: none;
  font-size: 14px;
  line-height: 18px;
  padding: 10px 0 20px 0;
}

#cws_dynamic_inactiveMsg {
  text-align: center;
}

#cws_output_action {
  display: none;
}

.success_pane {
  border: 1px solid #00a651;
  background-color: #dcf6d9;
  box-sizing: border-box;
  padding: 20px;
  margin: 0 0 30px 0;
}

/* Field Hints */
input[type="text"].invalid ~ .fieldHint,
input[type="text"].valid ~ .fieldHint,
input[type="number"].invalid ~ .fieldHint,
input[type="number"].valid ~ .fieldHint {
  display: none;
}

/* Grey Boxes */
.greyBox {
  background: #f7f7f7;
  padding: 10px 15px;
}

.greyBox input[type="text"],
.greyBox input[type="number"],
.greyBox input[type="password"],
.greyBox input[type="search"],
.greyBox select,
.greyBox textarea {
  background: #fff;
}

/* Checkout */
.wizard span {
  color: #757575;
}

.wizard {
  border: 1px solid #ccc;
  margin: 0px 0 20px;
  padding: 22px;
  text-align: center;
  line-height: 160%;
}

.wizard span ~ span:before {
  content: "\00A0\00A0\003E\00A0\00A0";
  margin: 0px 5px 0;
}

.wizard #currentStep {
  color: #000;
}

.checkoutClm {
  width: 50%;
  float: left;
}

.checkoutClm h2 {
  margin: 0 0 40px 0;
  background: #f4f4f4;
  padding: 10px;
  border: none;
  font-weight: normal;
  text-align: center;
}

.checkoutClm + .checkoutClm h2 {
  border-left: 1px solid #fff;
}

#support {
  margin: 25px 0 0 0;
  padding: 15px 5% 15px 5%;
  box-sizing: border-box;
  background: #f4f4f4;
  font-size: 13px;
}

#support h3 {
  margin: 0px;
  font-size: 15px;
  margin: 0 0 6px 0;
}

#support p {
  font-size: 13px;
}

/* Transactions Table */
.dataTables_wrapper {
  overflow-x: auto;
}

.dataTable,
#onHoldCardsHold table {
  width: 100%;
  border-left: 1px solid #b4b4b4;
  border-top: 1px solid #b4b4b4;
  font-size: 12px;
  line-height: 140%;
}

#onHoldCardsHold table#cws_output_onHoldCards {
  border-top: none;
}

.dataTable th,
#onHoldCardsHold th {
  text-align: left;
  background-color: #f7f7f7;
  font-size: 13px;
  font-weight: bold;
  border-right: 1px solid #b4b4b4;
  border-bottom: 1px solid #b4b4b4;
  padding: 7px 10px 7px 10px;
  width: 25%;
  box-sizing: border-box;
}

.dataTable td,
#onHoldCardsHold td {
  text-align: left;
  border-right: 1px solid #b4b4b4;
  border-bottom: 1px solid #b4b4b4;
  padding: 5px 10px 5px 10px;
  vertical-align: top;
  width: 25%;
  box-sizing: border-box;
}

.dataTable tr:nth-child(odd),
#onHoldCardsHold tr:nth-child(odd) {
  background-color: #fff;
}

.dataTable tr:nth-child(even),
#onHoldCardsHold tr:nth-child(even) {
  background-color: #f7f7f7;
}

.dataTable tr td:nth-child(4) {
  color: #107f13;
}

.dataTable tr td.negative {
  color: #aa0d0d;
}

.dataTable tr:hover,
#onHoldCardsHold tr:hover {
  background-color: #fdfee3;
  transition: background-color 700ms linear;
  cursor: pointer;
}

/* Data Table */
.dataTable th:nth-child(2),
.dataTable tr.odd td:nth-child(2),
.dataTable tr.even td:nth-child(2) {
  display: none;
}

.sorting,
.sorting_desc,
.sorting_asc {
  background-repeat: no-repeat;
  background-position: 96% center;
}

.sorting {
  background-image: url(/cws4.0/global-unix/images/check-card-balance/sortingOff.png);
}

.sorting_asc {
  background-image: url(/cws4.0/global-unix/images/check-card-balance/sortingDown.png);
}

.sorting_desc {
  background-image: url(/cws4.0/global-unix/images/check-card-balance/sortingUp.png);
}

.dataTables_info {
  font-size: 12px;
  display: inline-block;
  padding: 10px 0 0 0;
  font-style: italic;
}

.paginate_button {
  font-size: 12px;
  display: inline-block;
  cursor: pointer;
}

.paginate_button.current {
  color: #000;
  text-decoration: none;
}

.paginate_button + .paginate_button {
  margin-left: 5px;
}

.paginate_button.previous,
.paginate_button.last {
  margin: 0 0 0 10px;
}

.paginate_button.next.disabled,
.paginate_button.previous.disabled {
  display: none;
}

.dataTables_paginate .previous + span {
  margin: 0 15px;
}

.paginate_button.borderBtn {
  padding: 2px 5px;
}

.ellipsis {
  margin: 0 5px;
}

.dataTables_length {
  padding: 0 0 20px 0;
}

.dataTables_length select {
  width: 75px;
  display: inline-block;
}

.dataTables_info {
  float: left;
}

#recaptcha {
  margin: 0 0 30px 0;
}

.dataTables_paginate {
  float: right;
  margin: 10px 0 0 0;
}

/* Unsubscribe */
.marquiformcontainer input[type="text"] {
  margin: 0 0 15px 0;
}

.marquiformcontainer span br {
  display: none;
}

@media only screen and (min-width: 100px) and (max-width: 768px) {
  .sortBtns,
  .showLocInfo {
    display: none;
  }

  .dynamicTable th {
    font-size: 13px;
  }
}

@media only screen and (max-width: 600px) {
  .field {
    width: 100%;
  }
}

@media only screen and (min-width: 100px) and (max-width: 500px) {
  .dataTable th,
  .dataTable td,
  .dataTables_info,
  .dataTables_paginate,
  .paginate_button {
    font-size: 11px;
  }

  #cws_list_gcNum {
    font-size: 11px;
  }
}