_customizations.css

/* Scrollbar - first works on Firefox, rest on WebKit-based browsers */
* {
  --btcpay-scrollbar-width: 0.375rem;
  --btcpay-scrollbar-color: var(--btcpay-neutral-500);
  --btcpay-scrollbar-bg: transparent;
  scrollbar-width: var(--btcpay-scrollbar-width);
  scrollbar-color: var(--btcpay-scrollbar-color) var(--btcpay-scrollbar-bg);
}

*::-webkit-scrollbar {
  width: var(--btcpay-scrollbar-width);
  height: var(--btcpay-scrollbar-width);
}

*::-webkit-scrollbar-track {
  background: var(--btcpay-scrollbar-bg);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--btcpay-scrollbar-color);
  border-radius: 1rem;
  border: 1rem solid var(--btcpay-scrollbar-bg);
}

html {
  position: relative;
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a,
.btn-link {
  transition-duration: var(--btcpay-transition-duration-fast);
  transition-property: background, color;
}

a.nav-link {
  background: var(--btcpay-nav-bg);
  border-left-color: var(--btcpay-nav-border);
}

a.nav-link:focus,
a.nav-link:hover {
  text-decoration: none;
  border-left-color: var(--btcpay-nav-border-hover);
  background: var(--btcpay-nav-bg-hover);
}

.pagination {
  gap: var(--btcpay-space-s);
  margin-bottom: 0;
  font-weight: var(--btcpay-font-weight-semibold);
}

a.page-link {
  border-radius: var(--btcpay-border-radius-l) !important;
  min-width: 2.9em;
  text-align: center;
}

.active > a.page-link:hover,
.active > a.page-link:focus {
  background: var(--btcpay-primary-bg-active);
}

main p > a {
  font-weight: var(--btcpay-font-weight-semibold);
}

code {
  background: var(--btcpay-code-bg);
}

pre {
  border-radius: var(--btcpay-border-radius);
}

pre,
pre code {
  background: var(--btcpay-pre-bg);
}

pre.text-wrap,
pre:not(.text-wrap) code {
  padding: var(--btcpay-space-m) !important;
}

ol:not([class]) {
  padding-left: 1.125em;
}

ul:not([class]) {
  padding-left: 1em;
}

ul:not([class]) li {
  padding-top: 0.2em;
  padding-bottom: 0.2em;
}

.text-secondary {
  color: var(--btcpay-body-text-muted) !important;
}

.text-warning {
  color: rgba(var(--btcpay-body-text-warning-rgb), var(--btcpay-text-opacity)) !important;
}

/* Modals */
.modal-content {
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.15);
}

/* Accordion */
.accordion-item + .accordion-item {
  border-top: 1px solid var(--btcpay-body-border-light);
}

.accordion-button::after {
  content: none;
}

.accordion-button .icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  margin-left: auto;
  transition: transform 0.2s ease-in-out;
}

.accordion-button:not(.collapsed) .icon {
  transform: rotate(-180deg);
}

.accordion-body {
  padding-top: 0;
}

/* Alert */
.alert code {
  color: inherit;
}

.alert hr {
  display: block;
  width: unset;
  height: 1px;
  background: none;
}

.alert-link {
  text-decoration: underline;
}

.alert-link:focus, .alert-link:hover {
  color: var(--btcpay-alert-link-color);
}

.alert-dismissible .btn-close {
  color: inherit;
  padding: 1rem;
}

/* Icons */
.icon {
    display: inline-block;
    width: var(--icon-size, 1rem);
    height: var(--icon-size, 1rem);
    flex-shrink: 0 !important;
}

/* Button */
.btn .icon {
  --icon-size: 1.25em;
}

.btn-outline-secondary {
  --btcpay-btn-color: var(--btcpay-secondary-text);
}

.btn-outline-secondary:hover {
  --btcpay-btn-color: var(--btcpay-secondary-text-hover);
  --btcpay-btn-border-color: var(--btcpay-secondary-border-hover);
}

.btn-outline-secondary:active {
  --btcpay-btn-color: var(--btcpay-secondary-text-active);
}

.btn.rounded-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 2.857em;
  width: 2.857em;
}

.btn-sm.rounded-circle {
  height: 2.666em;
  width: 2.666em;
}

.btn-lg.rounded-circle {
  height: 3.5em;
  width: 3.5em;
}

.btn-close .icon {
  position: relative;
  top: -0.4rem;
  display: inline-block;
  width: var(--icon-size, 1rem);
  height: var(--icon-size, 1rem);
}

.dropdown-toggle-split {
  padding-right: 1rem;
  padding-left: 1rem;
}

.dropdown .custom-active {
  display: inline-flex;
  align-items: center;
  gap: var(--btcpay-space-s);
}

.dropdown .custom-active::after {
  display: inline-block;
  margin-left: auto;
  content: '';
  width: 0.5em;
  height: 0.5em;
  background-color: var(--btcpay-body-bg-active);
  border-radius: 50%;
}

.font-monospace {
  font-size: 0.95rem;
}

input.w-auto,
select.w-auto,
textarea.w-auto {
  max-width: 100%;
  flex-grow: 0 !important;
}

.form-floating > .form-control:focus ~ label::after,
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
.form-floating > .form-control-plaintext ~ label::after,
.form-floating > .form-select ~ label::after,
.form-floating > :disabled ~ label::after
{
  background-color: transparent !important;
}

/* Prevent form zoom on mobile Safari */
@supports (-webkit-overflow-scrolling: touch) {
  input.form-control,
  textarea.form-control,
  select.form-select {
    font-size: var(--btcpay-root-font-size);
  }
}

/* Fix for small table showing unnecessary scrollbars */
.table-responsive .table-sm {
  width: 100% !important;
}

/* Pull tables out of the grid by their horizontal column padding */
main *:not([class*='table-responsive']) > .table {
  width: calc(100% + 1rem);
  margin: 1.5rem -0.5rem;
}

main [class*='table-responsive'] {
  width: calc(100% + 1rem);
  margin: 1.5rem -0.5rem;
}

/* Fix table group border width */
.table > :not(:first-child) {
  border-top-width: 1px;
}

.table > :not(caption) > *:last-child > * {
  border-bottom-width: 0;
}

.table > thead:not(caption) > * > th {
  color: var(--btcpay-body-text-muted);
}

/* custom utility classes */
.bg-tile {
  background-color: var(--btcpay-bg-tile);
}

.fw-semibold {
  font-weight: var(--btcpay-font-weight-semibold) !important;
}

.cursor-pointer {
  cursor: pointer;
}

@media screen {
  .w-50px {
    width: 50px;
  }
  .w-75px {
    width: 75px;
  }
  .w-100px {
    width: 100px;
  }
  .w-125px {
    width: 125px;
  }
  .w-150px {
    width: 150px;
  }
  .w-175px {
    width: 175px;
  }
  .w-200px {
    width: 200px;
  }
  .w-225px {
    width: 225px;
  }
  .w-250px {
    width: 250px;
  }
  .w-275px {
    width: 275px;
  }
  .w-300px {
    width: 300px;
  }
  .w-325px {
    width: 325px;
  }
  .w-350px {
    width: 350px;
  }
}

/* Chrome, Safari, Edge, Opera */
input[type='number'].hide-number-spin::-webkit-outer-spin-button,
input[type='number'].hide-number-spin::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'].hide-number-spin {
  -moz-appearance: textfield;
}

/* custom bg and border classes */
.bg-medium {
  background-color: var(--btcpay-body-bg-medium);
}

.border-medium {
  border-color: var(--btcpay-body-border-medium);
}

/* set color for text on background */
.bg-primary {
  color: var(--btcpay-primary-text);
}
.bg-secondary {
  color: var(--btcpay-secondary-text);
}
.bg-success {
  color: var(--btcpay-success-text);
}
.bg-info {
  color: var(--btcpay-info-text);
}
.bg-warning {
  color: var(--btcpay-warning-text);
}
.bg-danger {
  color: var(--btcpay-danger-text);
}
.bg-light {
  color: var(--btcpay-light-text);
}
.bg-dark {
  color: var(--btcpay-dark-text);
}
.bg-body {
  color: var(--btcpay-body-text);
}
.bg-white {
  color: var(--btcpay-black);
}
.bg-black {
  color: var(--btcpay-white);
}

/* Forms */
.form-group {
  margin-bottom: 1.5rem;
}

.form-select:not(:disabled, .disabled, .is-valid, .is-invalid):hover,
.form-control:not(:disabled, .disabled, .is-valid, .is-invalid):hover,
.form-check-input:not(:disabled, .disabled, .is-valid, .is-invalid):hover {
  border-color: var(--btcpay-form-border-hover);
}

[data-required]::after {
  content: ' *';
  color: var(--btcpay-danger);
}

/* Custom space utils, as Bootstrap has a different spacing scale for > M */
.pt-l {
  padding-top: var(--btcpay-space-l);
}
.pt-xl {
  padding-top: var(--btcpay-space-xl);
}
.pb-l {
  padding-bottom: var(--btcpay-space-l);
}
.pb-xl {
  padding-bottom: var(--btcpay-space-xl);
}
.mt-l {
  margin-top: var(--btcpay-space-l);
}
.mt-xl {
  margin-top: var(--btcpay-space-xl);
}
.mb-l {
  margin-bottom: var(--btcpay-space-l);
}
.mb-xl {
  margin-bottom: var(--btcpay-space-xl);
}

/* Negative margin utils (only include bare minimum) */
.mt-n1 {
  margin-top: -0.25rem !important;
}
.mt-n2 {
  margin-top: -0.5rem !important;
}
.mt-n3 {
  margin-top: -1rem !important;
}
.mt-n4 {
  margin-top: -1.5rem !important;
}
.mt-n5 {
  margin-top: -3rem !important;
}
.me-n1 {
  margin-right: -0.25rem !important;
}
.me-n2 {
  margin-right: -0.5rem !important;
}
.me-n3 {
  margin-right: -1rem !important;
}
.me-n4 {
  margin-right: -1.5rem !important;
}
.me-n5 {
  margin-right: -3rem !important;
}
.mb-n1 {
  margin-bottom: -0.25rem !important;
}
.mb-n2 {
  margin-bottom: -0.5rem !important;
}
.mb-n3 {
  margin-bottom: -1rem !important;
}
.mb-n4 {
  margin-bottom: -1.5rem !important;
}
.mb-n5 {
  margin-bottom: -3rem !important;
}
.ms-n1 {
  margin-left: -0.25rem !important;
}
.ms-n2 {
  margin-left: -0.5rem !important;
}
.ms-n3 {
  margin-left: -1rem !important;
}
.ms-n4 {
  margin-left: -1.5rem !important;
}
.ms-n5 {
  margin-left: -3rem !important;
}

@media (min-width: 992px) {
  .mt-lg-n1 {
    margin-top: -0.25rem !important;
  }
  .mt-lg-n2 {
    margin-top: -0.5rem !important;
  }
  .mt-lg-n3 {
    margin-top: -1rem !important;
  }
  .mt-lg-n4 {
    margin-top: -1.5rem !important;
  }
  .mt-lg-n5 {
    margin-top: -3rem !important;
  }
  .me-lg-n1 {
    margin-right: -0.25rem !important;
  }
  .me-lg-n2 {
    margin-right: -0.5rem !important;
  }
  .me-lg-n3 {
    margin-right: -1rem !important;
  }
  .me-lg-n4 {
    margin-right: -1.5rem !important;
  }
  .me-lg-n5 {
    margin-right: -3rem !important;
  }
  .mb-lg-n1 {
    margin-bottom: -0.25rem !important;
  }
  .mb-lg-n2 {
    margin-bottom: -0.5rem !important;
  }
  .mb-lg-n3 {
    margin-bottom: -1rem !important;
  }
  .mb-lg-n4 {
    margin-bottom: -1.5rem !important;
  }
  .mb-lg-n5 {
    margin-bottom: -3rem !important;
  }
  .ms-lg-n1 {
    margin-left: -0.25rem !important;
  }
  .ms-lg-n2 {
    margin-left: -0.5rem !important;
  }
  .ms-lg-n3 {
    margin-left: -1rem !important;
  }
  .ms-lg-n4 {
    margin-left: -1.5rem !important;
  }
  .ms-lg-n5 {
    margin-left: -3rem !important;
  }
}