/* Purchase history page (exclusive/purchasestats). It sits on the layout of exclusive_codes.css (.xcl-*);
   only what that sheet does not have is here. */
.xcl-purchases h2 { font-size: 19px; font-weight: 700; margin: 24px 0 12px; }
.xcl-purchases h2 small { font-size: 13px; font-weight: 400; color: #707070; }
.xcl-purchases-bar-top { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.xcl-purchases-tabs, .xcl-purchases-years { display: flex; gap: 8px; }
.xcl-purchases-tabs a, .xcl-purchases-years a { padding: 8px 16px; border: 1px solid #d9dbe3; border-radius: 8px; background: #fff; color: #21203c; font-weight: 600; font-size: 14px; }
.xcl-purchases-tabs a:hover, .xcl-purchases-years a:hover { border-color: #ff8c00; text-decoration: none; }
.xcl-purchases-tabs [aria-current], .xcl-purchases-years [aria-current] { background: #21203c; border-color: #21203c; color: #fff; }
.xcl-purchases .xcl-stat > div:only-child { padding-left: 50px; }
.xcl-purchases-note { color: #707070; font-size: 12px; margin: 14px 0 0; }
.xcl-purchases-head { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.xcl-purchases-head h2 { margin: 0; }
.xcl-purchases-filter { flex: 0 1 300px; padding: 8px 12px; border: 1px solid #b8bbc7; border-radius: 8px; font-size: 14px; }
.xcl-purchases-product[hidden] { display: none; }
.xcl-purchases-noimg { display: block; width: 120px; height: 120px; border-radius: 6px; background: #f7f8fa; border: 1px dashed #d9dbe3; }
.xcl-purchases-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 8px 0 6px; }
.xcl-purchases-facts dt { font-size: 11px; font-weight: 400; color: #8a8a9b; text-transform: uppercase; letter-spacing: .3px; }
.xcl-purchases-facts dd { font-size: 14px; font-weight: 600; margin: 0; }
.xcl-purchases-link { font-size: 13px; color: #145a74; text-decoration: underline; }
.xcl-purchases .xcl-code-buy { text-align: right; }
.xcl-purchases-bar { display: block; height: 5px; width: 100%; min-width: 70px; margin-top: 4px; background: #eee; border-radius: 3px; }
.xcl-purchases-bar > span { display: block; height: 100%; background: #ff8c00; border-radius: 3px; }
.xcl-purchases-negative, .xcl-purchases-negative.xcl-price { color: #b3261e; }
.xcl-purchases-negative .xcl-purchases-bar > span { background: #b3261e; }
.xcl-purchases-months caption { text-align: left; font-weight: 700; padding: 0 0 10px; color: #21203c; }
.xcl-purchases .xcl-table td.xcl-purchases-wrapcell { white-space: normal; min-width: 220px; }
.xcl-purchases details.xcl-code { margin-bottom: 8px; scroll-margin-top: 80px; }
.xcl-purchases a:focus-visible, .xcl-purchases summary:focus-visible, .xcl-purchases-filter:focus-visible { outline: 2px solid #ff8c00; outline-offset: 2px; }
@media (max-width: 767px) {
  .xcl-purchases .xcl-code-buy { text-align: left; }
  .xcl-purchases-filter { flex: 1 1 100%; }
}