/* TODO add custom global CSS here */

/* Adds padding to the DataTable page size dropdown input. */
.dataTables_length {
  padding: 0.75rem 0 0 0.75rem;
}

/* Adds padding to the 'Reset Table' button. */
.dt-buttons.btn-group {
  padding: 0.75rem 0.75rem 0 0.75rem;
}

/* Adds padding to the Search input on the DataTables. */
.dataTables_filter > label {
  padding-right: 0.75rem;
}

/* Makes the DataTable processing graphic more noticeable as it is hard to see in its default style. */
.dataTables_processing {
  top: 4em !important;
  border: 1px solid rgb(204, 204, 204);
  z-index: 100 !important; /* In some DataTables the processing value appears under other elements, this helps prevent. */
}
/** Adds a better visual indicator that the DataTable is loading. */
.dataTables_processing[style='display: block;'] ~ .dataTable::before {
  /* Fills the whole card. */
  content: '';
  position: absolute;
  inset: 0 0 0 0;

  /** Dims the whole card. */
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid rgb(204, 204, 204);

  /* Mirror Bootstrap card value. */
  border-radius: 0.25rem;

  /** Covers the pagination buttons. */
  z-index: 1;
}
/* Fix spacing of the column ordering arrows. */
table.dataTable.table-sm .sorting:before,
table.dataTable.table-sm .sorting_asc:before,
table.dataTable.table-sm .sorting_desc:before {
  right: 1.2em;
}
/* Fixes overlap of DataTable <th> and column ordering arrows. */
table.dataTable.table-sm > thead > tr > th:not(.sorting_disabled) {
  padding-right: 2rem;
}

.card-subtitle {
  font-size: 0.75rem; /* All of the subtitles should be the same size. */
}

/* Styles the little asterisk by input labels that are required. */
.oht-required::before {
  content: '* ';
  color: var(--bs-danger); /* Bootstrap danger red color. */
}

/* A special badge color to match PayPal's branding. */
.oht-bg-paypal {
  --bs-bg-opacity: 1;
  background-color: #02308c;
}

/** A special badge color for the Special Case payment election. */
.oht-bg-special-case {
  --bs-bg-opacity: 1;
  background-color: maroon;
}

/* A special badge color to match PWT's branding. */
.oht-bg-pwt {
  --bs-bg-opacity: 1;
  background-color: #ff0a00;
}

/* A special badge color to match BTC branding. */
.oht-bg-btc {
  --bs-bg-opacity: 1;
  background-color: #1594ff;
}

/* A special badge color to match AEW branding. */
.oht-bg-aew {
  --bs-bg-opacity: 1;
  background-color: #b29734;
}

/* A notification that will cover the entire screen while processing. Similar to the DataTable processing widget. */
.js-loading-notif {
  position: fixed;
  inset: 0 0 0 0;
  background-color: rgba(0, 0, 0, 0.15);
}
.js-loading-notif > span {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  padding: 1rem 2rem;
  min-width: 12rem;
  border: 1px solid rgb(204, 204, 204);
  border-radius: 0.25rem;

  background-color: white;

  text-align: center;
}

i.fas {
  min-width: 18px;
  text-align: center;
}

label.form-check-label {
  width: 100%;
}

/* BEGIN X/Twitter icon */
@font-face {
    font-family: 'x-twitter';
    src:  url('../fonts/x-twitter.eot?jgmyp0');
    src:  url('../fonts/x-twitter.eot?jgmyp0#iefix') format('embedded-opentype'),
    url('../fonts/x-twitter.ttf?jgmyp0') format('truetype'),
    url('../fonts/x-twitter.woff?jgmyp0') format('woff'),
    url('../fonts/x-twitter.svg?jgmyp0#x-twitter') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}

.fa-x-twitter {
    /* use !important to prevent issues with browser extensions that change fonts */
    font-family: 'x-twitter' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.fa-x-twitter:before {
    content: "\e61b";
}

/* END X/Twitter icon */