.bold {
  font-weight: bold;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-wait {
  cursor: wait;
}

.navbar-env
{
  color: #e70d8c;
  font-size: 24px;
  font-weight: bold;
  position: relative;
  top: 4px;
}

.navbar-user
{
  color: gray;
  font-size: 12px;
  height: 50px;
  padding: 15px 15px;
  line-height: 20px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* XO-4156 : a toggle-switch input must stay invisible in every state - the .slider
   span draws the visible control. The generic checkbox block below gives every
   non-.form-control checkbox a 16x16 white box with a grey border, and its :disabled
   rule lifts opacity to 0.5, which reveals that box in the top-left corner of any
   disabled switch. Restated here at higher specificity so a switch input stays hidden
   whether it is enabled or disabled. Do not replace this with !important. */
.switch input[type="checkbox"]:not(.form-control),
.switch input[type="checkbox"]:not(.form-control):disabled {
  opacity:          0;
  width:            0;
  height:           0;
  border:           none;
  background-color: transparent;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

    input:checked + .slider {
  background-color: #2196F3;
}

    input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

    input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */

.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Finder Control Related */
.btn-finder {
  background-color: #f1f1f1;
  color:rgb(40, 40, 40);
  margin-left: 3px;
  padding-left: 6px;
  padding-right: 3px;
  height: 37px !important;
  width: 37px !important;
}

.btn-finder:before {
  font-family: 'Material Symbols Outlined';
  font-size: 30px;
  top: -10px;
  left: -2px;
  position: relative;
}

/* MRU Dropdown Related */
.mru-dropdown {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  z-index: 1000;
  min-width: 180px;
  max-width: 200px;
  margin-top: 2px;
  max-height: 400px;
  overflow: visible;
}

.mru-section {
  position: relative;
  border-bottom: 1px solid #ddd;
}

.mru-section:last-child {
  border-bottom: none;
}

.mru-section-header {
  padding: 12px 15px;
  background-color: #f5f5f5;
  font-weight: bold;
  color: #555;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.mru-section-header:hover {
  background-color: #e8e8e8;
}

.mru-section-header:before {
  font-family: 'Material Symbols Outlined';
  font-size: 18px;
  padding-right: 8px;
  position: relative;
  top: 2px;
}

.mru-section-header:after {
  content: "\e5cc";
  font-family: 'Material Symbols Outlined';
  font-size: 16px;
  float: right;
  position: relative;
  top: 1px;
}

.mru-icon-user-id:before {
  content: "\e9ef";
}

.mru-icon-email:before {
  content: "\e158";
}

.mru-icon-last-name:before {
  content: "\f74c";
}

.mru-section-items {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  min-width: 400px;
  max-width: 500px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 2px 2px 8px rgba(0,0,0,0.15);
  z-index: 1001;
  max-height: 400px;
  overflow-y: auto;
}

.mru-section:hover .mru-section-items {
  display: block;
}

.mru-dropdown-item {
  padding: 10px 15px 10px 25px;
  cursor: pointer;
  color: #333;
  border-bottom: 1px solid #f0f0f0;
  font-size: 14px;
}

.mru-dropdown-item:last-child {
  border-bottom: none;
}

.mru-dropdown-item:hover {
  background-color: #f0f0f0;
}

.mru-dropdown-item.empty {
  color: #999;
  font-style: italic;
  cursor: default;
}

.mru-dropdown-item.empty:hover {
  background-color: white;
}

.container-disabled {
  color: gray !important;
  pointer-events: none;
  filter: blur(1px);
}


/* Tab Control Related */

.tab-control {
  background-color: lightgray;
  margin: 0 auto; /* Center the control horizontally */
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-top: 16px;
  margin-left: 32px;
  margin-right: 35px;
}

.tab-control-2 {
  background-color: lightgray;
  margin: 0 auto; /* Center the control horizontally */
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
  margin-top: 0px;
  margin-left: 2px;
  margin-right: 2px;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.tab-buttons {
  background-color:lightgray;
  color: black;
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
  border-bottom: none;
}

.tab-buttons li {
  background-color:lightgray;
  color: black;
  padding: 10px 20px;
  cursor: pointer;
}

.tab-buttons li.active {
  background-color:#f1f1f1;
  border-bottom: none;
}

.tab-buttons-vertical {
  background-color:lightgray;
  color: black;
  padding: 0;
  list-style: none;
  margin: 0;
  border-bottom: none;
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  flex-shrink: 0;
}

.tab-buttons-vertical li {
  background-color:lightgray;
  color: black;
  padding: 10px 10px;
  cursor: pointer;
}

.tab-buttons-vertical li.active {
  background-color:#f1f1f1;
  border-bottom: none;
}

.tab-buttons-vertical-wide {
  width: 160px !important;
  min-width: 160px !important;
  max-width: 160px !important;
}

.tab-buttons-disabled {
  color: gray !important;
  background-color:lightgray;
  pointer-events: none;
}

.tab-buttons-disabled li.active {
  color: gray;
  background-color:#f1f1f1;
}

/* .tab-buttons  {
  background-color:#f1f1f1;
  border-bottom: none;
} */

.tab-content {
  background-color: #f1f1f1;
  padding: 10px;
  /* height: 90%;
  min-height: 90%;
  max-height: 90%; */
  min-height: 340px; 
}

.tab-content > div {
  display: none;
}

/* ============================================================================
   EDIT TICKET WINDOW — shared styles
   Used by the Edit Ticket modal (edit_ticket snippet) on the Tickets page and
   the User Manager page. Ported here so any page hosting the snippet renders
   identically (lotto balls, the Lines/Results/Ltech/Adjustments tables, and the
   status-badge alert margins), including Dark Reader overrides.
============================================================================ */

/* ----------------------------------------------------------------------------
   Cross-framework layout normalisation for the Edit Ticket modal.
   The snippet is shared by the Tickets page (Bootstrap 3.3.7) and the User
   Manager page (Bootstrap 4.x). These scoped rules make the modal render
   identically on both, overriding the generic ".tab-content" rules above and
   the differing Bootstrap-version defaults for the header, tabs and labels.
---------------------------------------------------------------------------- */

/* Tab area: no grey panel and no forced min-height (overrides
   ".tab-content { background:#f1f1f1; min-height:340px }"), and correct
   pane show/hide (overrides ".tab-content > div { display:none }"). */
#edit-ticket-modal .tab-content { background-color: transparent; min-height: 0; padding: 0; }
#edit-ticket-modal .tab-content > .tab-pane { display: none !important; }
#edit-ticket-modal .tab-content > .tab-pane.active { display: block !important; }

/* Header: keep the title and the close button on one line on both Bootstrap 3
   (float-based close) and Bootstrap 4 (flex-based header). Shared by the Edit
   Ticket and Adjust Winnings modals. */
#edit-ticket-modal .modal-header,
#adjust-winnings-modal .modal-header { display: flex; align-items: center; justify-content: space-between; }
/* Bootstrap 3 adds clearfix ::before/::after to .modal-header; once the header is
   flex those pseudo-elements become flex items and push the real title/close
   toward the centre. Remove them (Bootstrap 4 has none, so this is a no-op there). */
#edit-ticket-modal .modal-header::before,
#edit-ticket-modal .modal-header::after,
#adjust-winnings-modal .modal-header::before,
#adjust-winnings-modal .modal-header::after { display: none; content: none; }
#edit-ticket-modal .modal-header .modal-title,
#adjust-winnings-modal .modal-header .modal-title { margin: 0; }
#edit-ticket-modal .modal-header .close,
#adjust-winnings-modal .modal-header .close { float: none; margin: 0; padding: 0; line-height: 1; }

/* ----------------------------------------------------------------------------
   Adjust Winnings modal — typography normalisation.
   Bootstrap 3 (Tickets page) and Bootstrap 4 (User Manager) size the heading,
   labels, static values and form controls differently. These id-scoped rules
   pin a single consistent appearance on both pages, independent of framework.
---------------------------------------------------------------------------- */
#adjust-winnings-modal .modal-title { font-size: 20px; font-weight: 600; line-height: 1.4; }
#adjust-winnings-modal .control-label { font-size: 14px; font-weight: 700; line-height: 1.5; margin-bottom: 0; }
#adjust-winnings-modal .form-control-static,
#adjust-winnings-modal #aw-field-ticket-id,
#adjust-winnings-modal #aw-field-user-id,
#adjust-winnings-modal #aw-field-game-name,
#adjust-winnings-modal #aw-field-draw-id { font-size: 14px; font-weight: 400; }
#adjust-winnings-modal .form-control { font-size: 14px; }

/* Currency addon: the snippet uses the Bootstrap 3 ".input-group-addon" class,
   which Bootstrap 4 removed (renders as bare text), while Bootstrap 3 lays the
   input-group out as a table (addon = table-cell, so forcing the addon alone to
   flex made it drop below the input). Force the whole group to flex on both
   frameworks and style the addon as an attached, bordered box so it renders
   identically. */
#adjust-winnings-modal .input-group { display: flex; align-items: stretch; }
#adjust-winnings-modal .input-group > .form-control { flex: 1 1 auto; width: 1%; }
#adjust-winnings-modal .input-group-addon {
  flex: 0 0 auto;
  width: auto;
  display: flex;
  align-items: center;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 400;
  color: #555555;
  white-space: nowrap;
  background-color: #eeeeee;
  border: 1px solid #cccccc;
  border-left: 0;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Detail labels: left-align on both frameworks. Bootstrap 3 right-aligns
   ".form-horizontal .control-label"; Bootstrap 4 leaves it left. */
#edit-ticket-modal .control-label,
#edit-ticket-modal .form-horizontal .control-label { text-align: left; }

/* Fixed height so the window does not resize with its content. The header and
   footer stay put and the body scrolls internally when a tab's content is
   taller than the box. modal-content is forced to a flex column so this works
   on Bootstrap 3 too (Bootstrap 4 already lays modal-content out this way). */
#edit-ticket-modal .modal-content { height: 720px; display: flex; flex-direction: column; }
#edit-ticket-modal .modal-body { flex: 1 1 auto; overflow-y: auto; }

/* Status badge margins (used by the edit modal status badge) */
.alert-margins {
  margin-bottom: 0px !important;
  padding: 0.375rem 1.25rem;
}

/* Lotto ball — number display badge */
.lotto-ball {
  display: inline-block;
  min-width: 26px;
  height: 26px;
  line-height: 26px;
  border-radius: 50%;
  text-align: center;
  font-size: 11px;
  font-weight: bold;
  background-color: #e0e0e0;
  color: #333;
  margin: 1px 2px;
  padding: 0 4px;
}

html[data-darkreader-scheme="dark"] .lotto-ball {
  background-color: #3a3a3c !important;
  color: #e8e8e8 !important;
}

.lotto-ball.match-main {
  background-color: #f0a500 !important;
  color: #fff !important;
}

.lotto-ball.match-extra {
  background-color: #2e86de !important;
  color: #fff !important;
}

html[data-darkreader-scheme="dark"] .lotto-ball.match-main {
  background-color: #c67f00 !important;
  color: #fff !important;
}

html[data-darkreader-scheme="dark"] .lotto-ball.match-extra {
  background-color: #1a63b0 !important;
  color: #fff !important;
}

/* Edit modal tables (Lines / Results / Ltech / Adjustments) — light mode */
#edit-lines-table,
#edit-results-table,
#edit-ltech-table,
#edit-adjustments-table {
  background-color: white !important;
  color: #333 !important;
  border-collapse: collapse !important;
  width: 100% !important;
}

#edit-lines-table thead th,
#edit-results-table thead th,
#edit-ltech-table thead th,
#edit-adjustments-table thead th {
  background-color: #f5f5f5 !important;
  color: #333 !important;
  border-bottom: 2px solid #999 !important;
  border-top: none !important;
  border-left: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  font-weight: bold;
  padding: 6px 8px;
  text-align: center;
  white-space: nowrap;
  font-size: 11px;
}

#edit-lines-table tbody td,
#edit-results-table tbody td,
#edit-ltech-table tbody td,
#edit-adjustments-table tbody td {
  background-color: white !important;
  color: #333 !important;
  border-bottom: 1px solid #ddd !important;
  border-top: none !important;
  border-left: 1px solid #ddd !important;
  border-right: 1px solid #ddd !important;
  padding: 5px 8px;
  font-size: 11px;
  vertical-align: middle;
}

#edit-lines-table tbody tr:nth-child(even) td,
#edit-results-table tbody tr:nth-child(even) td,
#edit-ltech-table tbody tr:nth-child(even) td,
#edit-adjustments-table tbody tr:nth-child(even) td {
  background-color: #f9f9f9 !important;
}

#edit-lines-table tbody tr:hover td,
#edit-results-table tbody tr:hover td,
#edit-ltech-table tbody tr:hover td,
#edit-adjustments-table tbody tr:hover td {
  background-color: #f0f0f0 !important;
}

/* Edit modal tables — Dark Reader overrides */
html[data-darkreader-scheme="dark"] #edit-lines-table,
html[data-darkreader-scheme="dark"] #edit-results-table,
html[data-darkreader-scheme="dark"] #edit-ltech-table,
html[data-darkreader-scheme="dark"] #edit-adjustments-table {
  background-color: #1c1c1e !important;
  color: #e8e8e8 !important;
}

html[data-darkreader-scheme="dark"] #edit-lines-table thead th,
html[data-darkreader-scheme="dark"] #edit-results-table thead th,
html[data-darkreader-scheme="dark"] #edit-ltech-table thead th,
html[data-darkreader-scheme="dark"] #edit-adjustments-table thead th {
  background-color: #2c2c2e !important;
  color: #e8e8e8 !important;
  border-bottom: 2px solid #3a3a3c !important;
  border-left: 1px solid #2a2a2c !important;
  border-right: 1px solid #2a2a2c !important;
}

html[data-darkreader-scheme="dark"] #edit-lines-table tbody td,
html[data-darkreader-scheme="dark"] #edit-results-table tbody td,
html[data-darkreader-scheme="dark"] #edit-ltech-table tbody td,
html[data-darkreader-scheme="dark"] #edit-adjustments-table tbody td {
  background-color: #1c1c1e !important;
  color: #e8e8e8 !important;
  border-bottom: 1px solid #252527 !important;
  border-left: 1px solid #252527 !important;
  border-right: 1px solid #252527 !important;
}

html[data-darkreader-scheme="dark"] #edit-lines-table tbody tr:nth-child(even) td,
html[data-darkreader-scheme="dark"] #edit-results-table tbody tr:nth-child(even) td,
html[data-darkreader-scheme="dark"] #edit-ltech-table tbody tr:nth-child(even) td,
html[data-darkreader-scheme="dark"] #edit-adjustments-table tbody tr:nth-child(even) td {
  background-color: #242426 !important;
}

html[data-darkreader-scheme="dark"] #edit-lines-table tbody tr:hover td,
html[data-darkreader-scheme="dark"] #edit-results-table tbody tr:hover td,
html[data-darkreader-scheme="dark"] #edit-ltech-table tbody tr:hover td,
html[data-darkreader-scheme="dark"] #edit-adjustments-table tbody tr:hover td {
  background-color: #313135 !important;
}

.tab-control h4 {
    padding-top: 8px;
    padding-bottom: 12px;
}

.tab-control-2 h4 {
    padding-top: 6px;
    padding-bottom: 6px;
}

.feature-switch-group {
  display: flex;
  align-items: flex-start;
}

.feature-switch-label {
    display: inline-block;
    margin-bottom: 14px;
    padding-top: 3px;
    padding-left: 12px;
    padding-right: 6px;
    min-width: 280px;
}

.feature-switch-slider {
    min-width: 60px !important;
}

.feature-switch-more {
    display: inline-block;
    margin-bottom: 14px;
    padding-top: 3px;
    padding-left: 12px;
    padding-right: 6px;
}

.feature-switch-note {
    color: rgb(68, 97, 160);
    font-size: 0.9rem;
    font-style: italic;
    padding-top: 6px;
}

.feature-note-table-name {
  color: rgb(21, 120, 120);
}

.feature-switch:disabled + .slider {
  opacity: 0.5;
  cursor: not-allowed;
}

.disabled-text {
  color: gray;
}

.disabled-slider:before {
  background-color: rgb(169, 169, 169);
}

.hidden {
  display: none;
}

.not-allowed {
  cursor: not-allowed !important;
}

.btn-nav-find {
  height: 40px;
  width: 40px;
  background-image: url("https://xolotto.com/images/ico/carousel-arrow-right.svg");
  background-repeat: no-repeat; /* Optional: control how the image repeats */
  background-position: bottom; /* Optional: control image position within the element */
  background-size: cover; /* Optional: control how the image resizes within the element */
}

.template-table-header {
  background-color: gray;
  font-style: italic;
  font-weight: bold;
  height: 40px;
  padding-left: 6px;
  border-right: 5px solid white;
}

.template-table-cell {
  height: 40px;
  padding-left: 6px !important; 
}

input[type="number"] {
  padding-left: 6px;
  padding-right: 3px;
}

.optimove-template-id {
  display: inline-block;
  width: 70px; 
  height: 30px; 
  position: relative; 
  margin-top: -2px;
}

.search-by-control {
  margin: 0px 8px 0px 1px;
}

.form-label {
  padding-left: 6px;
  padding-top: 12px;
}

::-webkit-calendar-picker-indicator {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="15" viewBox="0 0 24 24"><path fill="%23bbbbbb" d="M20 3h-1V1h-2v2H7V1H5v2H4c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 18H4V8h16v13z"/></svg>');
}

.form-table {
  font-size: 0.8em;
  margin: 0px 16px 0px 16px; 
  width:100%;
  border: 0px solid #26292c;
}

.table-header {
  background-color: #b2c0cb;
  font-style: normal;
}

.finder-table-header {
  background-color: darkgrey;
}

/* .finder-table-header-cell {
  background-color: darkgrey;
  margin: 0 2 0 2;
} */

.fixed-wd-40 {
  width:40px !important; 
  min-width:40px !important; 
  max-width:40px !important;
}

.fixed-wd-60 {
  width:60px !important; 
  min-width:60px !important; 
  max-width:60px !important;
}

.fixed-wd-80 {
  width:80px !important; 
  min-width:80px !important; 
  max-width:80px !important;
}

.fixed-wd-100 {
  width:100px !important; 
  min-width:100px !important; 
  max-width:100px !important;
}

.fixed-wd-120 {
  width:120px !important; 
  min-width:120px !important; 
  max-width:120px !important;
}

.fixed-wd-150 {
  width:150px !important; 
  min-width:150px !important; 
  max-width:150px !important;
}

.fixed-wd-160 {
  width:160px !important; 
  min-width:160px !important; 
  max-width:160px !important;
}

.fixed-wd-200 {
  width:200px !important; 
  min-width:200px !important; 
  max-width:200px !important;
}

.fixed-wd-300 {
  width:300px !important; 
  min-width:300px !important; 
  max-width:300px !important;
}

.action-message {
  color: palevioletred;
  font-weight: bold;
  margin-right: 6px;
  padding-left: 6px;
  padding-right: 6px;
  text-align: end;
}

.fade-out {
  opacity: 1;
  transition: opacity 5s ease-in-out;  /* Animation properties */
}

.fade-out.invisible {
  opacity: 0;  /* Set opacity to 0 for hidden state */
}      

.fade-away {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s 5s, opacity 3s linear;
}      

.lbl-glyph {
  font-family: 'Material Symbols Outlined';
  font-size: 24px;
} 

.lbl-glyph-enabled:before {
    content: "\e5ca";
}

.lbl-glyph-disabled:before {
    content: "\e5cd";
}

.lbl-glyph-wait:before {
    content: "\ebff";
}

.btn-country-enable {
  width:220px;
}

.last-in-group {
  border-bottom: 1px solid #200a0a;
}

.simple-table-header {
  background-color:#2196F3;
  padding:3px;
  margin-right:3px;
  padding-left:3px;
  padding-right:3px;
  border: 3px solid #ddd;
}

.badge-normal {
  font-size: 100%;
  padding: 3px 6px;
  line-height: 1.5;
}
.badge-status-cancelled {
  color:white;
  background-color: rgb(255, 149, 0);
}
.badge-status-payout-ok {
  color:white;
  background-color: green;
}
.badge-status-rejected {
  color:white;
  background-color: tomato;
}
.badge-status-received-request {
  color:white;
  background-color: darkgoldenrod;
}
.badge-status-submitted-to-payout {
  color:white;
  background-color: royalblue;
}

.badge-transaction-type-payment {
  color:white;
  background-color: #268bd2; /* Solarized Blue */
}
.badge-transaction-type-purchase {
  color:white;
  background-color: #859900; /* Solarized Yellow */
}
.badge-transaction-type-withdrawal {
  color:white;
  background-color: #dc322f; /* Solarized Red */
}
.badge-transaction-type-winnings {
  color:white;
  background-color: #2aa198; /* Solarized Cyan */
}
.badge-transaction-type-cms-payment {
  color:white;
  background-color: #d33682; /* Solarized Magenta */
}
.badge-transaction-type-share {
  color:white;
  background-color: #6c71c4; /* Solarized Violet */
}
.badge-transaction-type-disbursement {
  color:white;
  background-color: #b58900; /* Solarized Orange */
}
.badge-transaction-type-credit-award {
  color:white;
  background-color: #262fd2; /* Reusing a distinct color */
}
.badge-transaction-type-withdrawal-bounce-credit {
  color:white;
  background-color: #bc1097; /* Reusing a distinct color */
}
.badge-transaction-type-journal-entry {
  background-color: #839496; /* Solarized Base1 - a neutral but distinct color */
  color: #000; /* Dark text for better contrast on a lighter background */
}
.badge-transaction-type-cms-real-debit {
  background-color: #f4978e; /* Pastel salmon pink */
  color: #3a2019; /* Dark text for contrast on the pastel background */
}
.badge-transaction-type-cms-promo-debit {
  background-color: #f8ad9d; /* Pastel coral */
  color: #3a2019; /* Dark text for contrast on the pastel background */
}
.badge-transaction-type-dormant-fee {
  background-color: #e9b44c; /* Pastel amber */
  color: #3a2c19; /* Dark text for contrast on the pastel background */
}
.badge-transaction-type-dormant-fee-reversal {
  background-color: #f9c784; /* Pastel orange */
  color: #3a2c19; /* Dark text for contrast on the pastel background */
}
.badge-transaction-type-credit-expiry {
  color:white;
  background-color: #8e5572; /* Muted plum - distinct from credit-award and cms-payment */
}

/* Red asterisk appended to a dormant-fee badge when that fee has already been reversed. */
.dormant-fee-reversed-asterisk {
  color: #b00020;
  font-weight: bold;
  margin-left: 2px;
  cursor: help;
}
html[data-darkreader-scheme="dark"] .dormant-fee-reversed-asterisk {
  color: #ff6b6b !important;
}

.xo-col-30  { width:  30px !important; min-width:  30px !important; max-width:  30px !important; }
.xo-col-40  { width:  40px !important; min-width:  40px !important; max-width:  40px !important; }
.xo-col-45  { width:  45px !important; min-width:  45px !important; max-width:  45px !important; }
.xo-col-50  { width:  50px !important; min-width:  50px !important; max-width:  50px !important; }
.xo-col-60  { width:  60px !important; min-width:  60px !important; max-width:  60px !important; }
.xo-col-70  { width:  70px !important; min-width:  70px !important; max-width:  70px !important; }
.xo-col-80  { width:  80px !important; min-width:  80px !important; max-width:  80px !important; }
.xo-col-90  { width:  90px !important; min-width:  90px !important; max-width:  90px !important; }
.xo-col-100 { width: 100px !important; min-width: 100px !important; max-width: 100px !important; }
.xo-col-110 { width: 110px !important; min-width: 110px !important; max-width: 110px !important; }
.xo-col-120 { width: 120px !important; min-width: 120px !important; max-width: 120px !important; }
.xo-col-140 { width: 140px !important; min-width: 140px !important; max-width: 140px !important; }
.xo-col-150 { width: 150px !important; min-width: 150px !important; max-width: 150px !important; }
.xo-col-160 { width: 160px !important; min-width: 160px !important; max-width: 160px !important; }
.xo-col-180 { width: 180px !important; min-width: 180px !important; max-width: 180px !important; }
.xo-col-200 { width: 200px !important; min-width: 200px !important; max-width: 200px !important; }
.xo-col-230 { width: 230px !important; min-width: 230px !important; max-width: 230px !important; }
.xo-col-240 { width: 240px !important; min-width: 240px !important; max-width: 240px !important; }
.xo-col-300 { width: 300px !important; min-width: 300px !important; max-width: 300px !important; }
.xo-col-320 { width: 320px !important; min-width: 320px !important; max-width: 320px !important; }
.xo-col-400 { width: 400px !important; min-width: 400px !important; max-width: 400px !important; }
.xo-col-500 { width: 500px !important; min-width: 500px !important; max-width: 500px !important; }
.xo-col-600 { width: 600px !important; min-width: 600px !important; max-width: 600px !important; }


/* ── Checkbox and radio button custom styles ──────────────────────────────────────── */
/* Removes native browser appearance and applies explicit colours so that the          */
/* controls remain clearly readable when the Dark Reader extension is active.          */
/* Checked state uses #007bff — the same blue as Bootstrap .btn-primary.              */

input[type="checkbox"]:not(.form-control),
input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance:    none;
  appearance:         none;
  width:              16px;
  height:             16px;
  border:             2px solid #adb5bd;
  background-color:   #fff;
  cursor:             pointer;
  position:           relative;
  top:                2px;
  flex-shrink:        0;
  transition:         border-color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="checkbox"]:not(.form-control):checked,
input[type="radio"]:checked {
  background-color: #007bff;
  border-color:     #007bff;
}

/* White tick inside a checked checkbox */
input[type="checkbox"]:not(.form-control):checked::after {
  content:     '';
  position:    absolute;
  left:        3px;
  top:         0px;
  width:       5px;
  height:      9px;
  border:      2px solid #fff;
  border-top:  none;
  border-left: none;
  transform:   rotate(45deg);
  display:     block;
}

/* White dot inside a checked radio button */
input[type="radio"]:checked::after {
  content:          '';
  position:         absolute;
  left:             3px;
  top:              3px;
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background-color: #fff;
  display:          block;
}

input[type="checkbox"]:not(.form-control):focus,
input[type="radio"]:focus {
  outline:    none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
}

input[type="checkbox"]:not(.form-control):disabled,
input[type="radio"]:disabled {
  opacity: 0.5;
  cursor:  not-allowed;
}

/* Dark Reader overrides — keeps colours stable when Dark Reader is active */
html[data-darkreader-scheme="dark"] input[type="checkbox"]:not(.form-control),
html[data-darkreader-scheme="dark"] input[type="radio"] {
  border-color:     #6c757d !important;
  background-color: #343a40 !important;
  filter:           none    !important;
}

html[data-darkreader-scheme="dark"] input[type="checkbox"]:not(.form-control):checked,
html[data-darkreader-scheme="dark"] input[type="radio"]:checked {
  background-color: #007bff !important;
  border-color:     #007bff !important;
  filter:           none    !important;
}