/************************************************
BODY / FONTS
************************************************/
body {
  font-family: var(--vaf-font-body);
  font-weight: var(--vaf-font-body-weight);
  font-size: var(--vaf-font-body-size);
  font-style: var(--vaf-font-body-style);
  color: var(--vaf-text-body);
  background: var(--vaf-bg);
}

strong,
b {
  font-weight: var(--vaf-font-body-weight-bold);
}

/************************************************
AWE RESETS
************************************************/
@media (max-width: 768px) {
  header .container {
    padding-right: calc(var(--bs-gutter-x, 30px) * .5);
    padding-left: calc(var(--bs-gutter-x, 30px) * .5);
  }
}

/************************************************
AWE WELL AND PANELS
************************************************/
.well {
  border: 1px solid var(--vaf-gray-200);
  border-radius: var(--vaf-radius);
  background-color: var(--vaf-gray-100);
  box-shadow: none;
}

  .well::after,
  .well::before {
    content: "";
    display: block;
    clear: both;
  }

.panel {
  border-color: var(--vaf-gray-200);
  box-shadow: none;
}

.panel-default {
  border-color: var(--vaf-gray-200);
}

  .panel-default > .panel-heading {
    border-color: var(--vaf-gray-200);
    padding: 10px;
    color: var(--vaf-navy);
    border-start-start-radius: var(--vaf-radius);
    border-start-end-radius: var(--vaf-radius);
  }

.panel-footer {
  border-color: var(--vaf-gray-200);
  background: var(--vaf-gray-100);
}

/************************************************
DROPDOWN
************************************************/
.dropdown-menu {
  border: 1px solid var(--vaf-gray-200);
  border-radius: var(--vaf-radius-sm);
  background: var(--vaf-white);
  box-shadow: 0 10px 24px rgba(var(--vaf-navy-rgb), .12);
}

  .dropdown-menu a,
  .dropdown-menu .dropdown-item {
    color: var(--vaf-text-body);
    text-decoration: none !important;
  }

    .dropdown-menu > li > a:hover,
    .dropdown-menu > li > a:focus,
    .dropdown-menu .dropdown-item:hover,
    .dropdown-menu .dropdown-item:focus {
      background-color: var(--vaf-amber-light);
      color: var(--vaf-amber-dark);
      text-decoration: none;
    }

    .dropdown-menu > .active > a,
    .dropdown-menu > .active > a:focus,
    .dropdown-menu > .active > a:hover,
    .dropdown-menu .dropdown-item.active,
    .dropdown-menu .dropdown-item:active {
      background-color: var(--vaf-navy);
      color: var(--vaf-white);
    }

  .dropdown-menu .divider {
    background-color: var(--vaf-gray-200);
  }

  .dropdown-menu li a .glyphicon,
  .dropdown-menu .dropdown-item .glyphicon {
    color: inherit;
  }

.myaccount__dropdown {
  padding: 0;
  border-radius: var(--vaf-radius-sm);
  min-width: 200px;
}
/************************************************
BOOTSTRAP / UTILITY MISC
************************************************/
.stretched-link::after {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
}

.w-100 {
  width: 100%;
}

.text-muted {
  color: var(--vaf-text-muted) !important;
}

/************************************************
BOOTSTRAP BUTTONS
************************************************/
.btn {
  --bs-btn-padding-x: var(--vaf-btn-padding-x);
  --bs-btn-padding-y: var(--vaf-btn-padding-y);
  --bs-btn-font-family: var(--vaf-font-body);
  --bs-btn-font-size: var(--vaf-btn-font-size);
  --bs-btn-font-weight: var(--vaf-btn-font-weight);
  --bs-btn-line-height: var(--vaf-btn-line-height);
  --bs-btn-color: var(--vaf-text-body);
  --bs-btn-bg: transparent;
  --bs-btn-border-width: var(--vaf-btn-border-width);
  --bs-btn-border-color: transparent;
  --bs-btn-border-radius: var(--ps-btn-border-radius);
  --bs-btn-hover-color: var(--bs-btn-color);
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-hover-border-color: var(--bs-btn-border-color);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: var(--bs-btn-hover-bg);
  --bs-btn-active-border-color: var(--bs-btn-hover-border-color);
  --bs-btn-disabled-color: var(--bs-btn-color);
  --bs-btn-disabled-bg: var(--bs-btn-bg);
  --bs-btn-disabled-border-color: var(--bs-btn-border-color);
  --bs-btn-disabled-opacity: var(--vaf-btn-disabled-opacity);
  --bs-btn-focus-box-shadow: var(--vaf-shadow-focus);
  margin-bottom: 0;
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
  border-radius: var(--bs-btn-border-radius);
  background-color: var(--bs-btn-bg);
  background-image: none;
  color: var(--bs-btn-color);
  font-family: var(--bs-btn-font-family);
  font-size: var(--bs-btn-font-size);
  font-weight: var(--bs-btn-font-weight);
  line-height: var(--bs-btn-line-height);
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  white-space: nowrap;
  cursor: pointer;
  -ms-touch-action: manipulation;
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  transition: color var(--vaf-transition), background-color var(--vaf-transition), border-color var(--vaf-transition), box-shadow var(--vaf-transition);
}

@media (max-width: 767px) {
  .btn {
    --bs-btn-padding-x: var(--vaf-btn-padding-x);
    --bs-btn-padding-y: var(--vaf-btn-padding-y);
    --bs-btn-font-size: var(--vaf-btn-font-size);
    --bs-btn-line-height: var(--vaf-btn-line-height);
  }
}

.panel .btn:not(.btn-xs),
.well .btn,
.myaccount .btn {
  --bs-btn-padding-x: var(--vaf-btn-padding-x);
  --bs-btn-padding-y: var(--vaf-btn-padding-y);
  --bs-btn-border-radius: var(--vaf-radius-sm);
}

.panel .input-group-btn > .btn,
.well .input-group-btn > .btn,
.myaccount .input-group-btn > .btn {
  --bs-btn-padding-x: var(--vaf-btn-padding-x);
  --bs-btn-padding-y: var(--vaf-btn-padding-y);
  --bs-btn-border-radius: 0;
}

.btn-sm,
.btn-group-sm > .btn {
  --bs-btn-padding-x: var(--vaf-btn-padding-x-sm);
  --bs-btn-padding-y: var(--vaf-btn-padding-y-sm);
  --bs-btn-font-size: var(--vaf-btn-font-size-sm);
}

.btn-xs {
  --bs-btn-padding-x: var(--vaf-btn-padding-x-xs);
  --bs-btn-padding-y: var(--vaf-btn-padding-y-xs);
  --bs-btn-font-size: var(--vaf-btn-font-size-xs);
}

.btn-block,
.btn.w-100 {
  justify-content: center;
}

.btn:hover,
.btn:focus,
.btn.focus {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
  text-decoration: none;
}

.btn:focus,
.btn.focus,
.btn:active,
.btn.active,
.btn:active:focus,
.open > .dropdown-toggle.btn {
  outline: none;
  box-shadow: var(--bs-btn-focus-box-shadow);
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
}

.btn.disabled,
.btn[disabled],
fieldset[disabled] .btn {
  opacity: var(--bs-btn-disabled-opacity);
  box-shadow: none;
}

.btn .glyphicon {
  top: 0;
  line-height: 1;
}

.btn .psi {
  font-size: var(--vaf-btn-icon-size);
  line-height: 0;
}

.btn i[class*="fa-"],
.btn .fa,
.btn .fal,
.btn .far,
.btn .fas {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.btn-primary {
  --bs-btn-color: var(--vaf-white);
  --bs-btn-bg: var(--vaf-navy);
  --bs-btn-border-color: var(--vaf-navy);
  --bs-btn-hover-color: var(--vaf-white);
  --bs-btn-hover-bg: var(--vaf-navy-mid);
  --bs-btn-hover-border-color: var(--vaf-navy-mid);
  --bs-btn-active-color: var(--vaf-white);
  --bs-btn-active-bg: var(--vaf-navy-mid);
  --bs-btn-active-border-color: var(--vaf-navy-mid);
  --bs-btn-disabled-color: var(--vaf-white);
  --bs-btn-disabled-bg: var(--vaf-navy);
  --bs-btn-disabled-border-color: var(--vaf-navy);
}

.btn-warning {
  --bs-btn-color: var(--vaf-white);
  --bs-btn-bg: var(--vaf-amber);
  --bs-btn-border-color: var(--vaf-amber);
  --bs-btn-hover-color: var(--vaf-white);
  --bs-btn-hover-bg: var(--vaf-amber-dark);
  --bs-btn-hover-border-color: var(--vaf-amber-dark);
  --bs-btn-active-color: var(--vaf-white);
  --bs-btn-active-bg: var(--vaf-amber-dark);
  --bs-btn-active-border-color: var(--vaf-amber-dark);
  --bs-btn-disabled-color: var(--vaf-white);
  --bs-btn-disabled-bg: var(--vaf-amber);
  --bs-btn-disabled-border-color: var(--vaf-amber);
}

.btn-default {
  --bs-btn-color: var(--vaf-navy);
  --bs-btn-bg: var(--vaf-white);
  --bs-btn-border-color: var(--vaf-gray-300);
  --bs-btn-hover-color: var(--vaf-white);
  --bs-btn-hover-bg: var(--vaf-navy);
  --bs-btn-hover-border-color: var(--vaf-navy);
  --bs-btn-active-color: var(--vaf-white);
  --bs-btn-active-bg: var(--vaf-navy);
  --bs-btn-active-border-color: var(--vaf-navy);
  --bs-btn-disabled-color: var(--vaf-gray-500);
  --bs-btn-disabled-bg: var(--vaf-white);
  --bs-btn-disabled-border-color: var(--vaf-gray-300);
}

.btn-success {
  --bs-btn-color: var(--vaf-white);
  --bs-btn-bg: var(--vaf-green);
  --bs-btn-border-color: var(--vaf-green);
  --bs-btn-hover-color: var(--vaf-white);
  --bs-btn-hover-bg: var(--vaf-green-dark);
  --bs-btn-hover-border-color: var(--vaf-green-dark);
  --bs-btn-active-color: var(--vaf-white);
  --bs-btn-active-bg: var(--vaf-green-dark);
  --bs-btn-active-border-color: var(--vaf-green-dark);
  --bs-btn-disabled-color: var(--vaf-white);
  --bs-btn-disabled-bg: var(--vaf-green);
  --bs-btn-disabled-border-color: var(--vaf-green);
}

.btn-danger {
  --bs-btn-color: var(--vaf-white);
  --bs-btn-bg: var(--vaf-red);
  --bs-btn-border-color: var(--vaf-red);
  --bs-btn-hover-color: var(--vaf-white);
  --bs-btn-hover-bg: var(--vaf-red-dark);
  --bs-btn-hover-border-color: var(--vaf-red-dark);
  --bs-btn-active-color: var(--vaf-white);
  --bs-btn-active-bg: var(--vaf-red-dark);
  --bs-btn-active-border-color: var(--vaf-red-dark);
  --bs-btn-disabled-color: var(--vaf-white);
  --bs-btn-disabled-bg: var(--vaf-red);
  --bs-btn-disabled-border-color: var(--vaf-red);
}

.btn.no-click-action, .btn.invoice, .btn.awe-button-link, .btn.invoice-line-item-remove {
  padding: 1px 5px;
  font-size: 14px;
}

/************************************************
BOOTSTRAP FORM CONTROLS AND INPUT GROUPS
************************************************/
.form-control {
  --form-control-padding-x: var(--vaf-input-padding-x);
  --form-control-padding-y: var(--vaf-input-padding-y);
  --form-control-line-height: var(--vaf-input-line-height);
  --form-control-border-color: var(--vaf-input-border-color);
  --form-control-bg: var(--vaf-input-bg);
  height: auto;
  padding: var(--form-control-padding-y) var(--form-control-padding-x);
  border-color: var(--form-control-border-color);
  border-radius: var(--ps-input-border-radius);
  background-color: var(--form-control-bg);
  color: var(--vaf-text-body);
  font-family: var(--vaf-font-body);
  line-height: var(--form-control-line-height);
  box-shadow: none;
}

  .form-control::placeholder {
    color: var(--vaf-text-soft);
  }

  .form-control:focus {
    border-color: var(--vaf-amber);
    box-shadow: var(--vaf-shadow-focus);
  }

@media (max-width: 767px) {
  .form-control {
    --form-control-padding-x: var(--vaf-input-padding-x);
    --form-control-padding-y: var(--vaf-input-padding-y);
    --form-control-line-height: var(--vaf-input-line-height);
  }
}

.form-control.input-sm {
  --form-control-padding-x: .55rem;
  --form-control-padding-y: .35rem;
}

.panel .form-control,
.well .form-control,
.myaccount .form-control {
  --form-control-padding-x: .65rem;
  --form-control-padding-y: .5rem;
}

/************************************************
INPUT GROUPS
************************************************/
.input-group {
  display: table;
  border-collapse: separate;
}

  .input-group .form-control {
    padding: 7px 12px;
    border-color: var(--vaf-input-border-color);
    border-radius: 0;
    line-height: 20px;
  }

.input-group-btn {
  position: relative;
  display: table-cell;
  width: 1%;
  white-space: nowrap;
  vertical-align: middle;
}

  .input-group-btn > .btn {
    height: 36px;
    padding: 7px 12px;
    border-color: var(--vaf-input-border-color);
    border-radius: 0;
    line-height: 20px;
    align-items: center;
    justify-content: center;
  }

.input-group-addon {
  height: 36px;
  padding: 7px 12px;
  border-color: var(--vaf-input-border-color);
  background-color: var(--vaf-gray-100);
  color: var(--vaf-navy);
  line-height: 20px;
}

.input-group .form-control:first-child {
  border-top-left-radius: var(--ps-input-border-radius);
  border-bottom-left-radius: var(--ps-input-border-radius);
}

.input-group .form-control:last-child {
  border-top-right-radius: var(--ps-input-border-radius);
  border-bottom-right-radius: var(--ps-input-border-radius);
}

.input-group-btn:first-child > .btn,
.input-group-addon:first-child {
  border-top-left-radius: var(--ps-input-border-radius);
  border-bottom-left-radius: var(--ps-input-border-radius);
}

.input-group-btn:last-child > .btn,
.input-group-addon:last-child {
  border-top-right-radius: var(--ps-input-border-radius);
  border-bottom-right-radius: var(--ps-input-border-radius);
}

.input-group-btn > .btn .glyphicon,
.input-group-addon .glyphicon {
  top: 0;
  line-height: 1;
}

/************************************************
CUSTOM CHECKBOXES / RADIOS
************************************************/
.ps-form-check {
  display: block;
  min-height: 1.5rem;
  margin-bottom: 0;
  padding-left: 1.5em;
  line-height: 1.7rem;
}

  .ps-form-check label:hover,
  .ps-form-check input:hover {
    cursor: pointer;
  }

  .ps-form-check label {
    display: inline-block;
    margin-bottom: 0;
    margin-left: .5rem;
    font-weight: var(--vaf-font-body-weight-bold);
  }

  .ps-form-check input {
    float: left;
    width: 1.35em;
    height: 1.35em;
    margin-top: .15em;
    margin-left: -1.5em;
    border: 1px solid var(--vaf-navy);
    border-radius: 4px;
    background-color: var(--vaf-white);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none !important;
  }

    .ps-form-check input:focus {
      box-shadow: var(--vaf-shadow-focus);
    }

    .ps-form-check input:checked[type=checkbox] {
      background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M4 10l4 4 8-8'/%3e%3c/svg%3e");
    }

    .ps-form-check input:checked {
      border-color: var(--vaf-navy);
      background-color: var(--vaf-navy);
    }

.ps-form-check-reverse {
  flex-basis: revert;
  padding-right: 1.5em;
  padding-left: 0;
  text-align: right;
}

  .ps-form-check-reverse label {
    margin-right: .5rem;
    margin-left: 0;
  }

  .ps-form-check-reverse input {
    float: right;
    margin-right: -1.5em;
    margin-left: 0;
  }

@media (min-width: 992px) {
  .ps-form-check-lg-reverse {
    flex-basis: revert;
    padding-right: 1.5em;
    padding-left: 0;
    text-align: right;
  }

    .ps-form-check-lg-reverse label {
      margin-right: .5rem;
      margin-left: 0;
    }

    .ps-form-check-lg-reverse input {
      float: right;
      margin-right: -1.5em;
      margin-left: 0;
    }
}

/************************************************
BOOTSTRAP LABELS / BADGES
************************************************/
.badge,
.label {
  font-weight: 600;
}

.badge {
  background-color: var(--vaf-navy);
  color: var(--vaf-white);
}

.label-default {
  background-color: rgba(var(--vaf-navy-rgb), .88);
  color: var(--vaf-white);
}

.label-warning {
  border: 1px solid rgba(var(--vaf-amber-rgb), .22);
  background-color: var(--vaf-amber-light);
  color: var(--vaf-amber-dark);
}

.label-success {
  border: 1px solid rgba(var(--vaf-green-rgb), .22);
  background-color: var(--vaf-green-light);
  color: var(--vaf-green-dark);
}

.label-danger {
  border: 1px solid rgba(var(--vaf-red-rgb), .22);
  background-color: var(--vaf-red-light);
  color: var(--vaf-red-dark);
}

/************************************************
BOOTSTRAP ALERTS
************************************************/
.alert {
  border-radius: var(--vaf-radius);
  font-weight: var(--vaf-font-body-weight-bold);
}

.alert-info {
  border-color: rgba(var(--vaf-navy-rgb), .12);
  background-color: rgba(var(--vaf-navy-rgb), .05);
  color: var(--vaf-navy);
}

.alert-warning {
  border-color: rgba(var(--vaf-amber-rgb), .22);
  background-color: var(--vaf-amber-light);
  color: var(--vaf-amber-dark);
}

.alert-danger {
  border-color: rgba(var(--vaf-red-rgb), .22);
  background-color: var(--vaf-red-light);
  color: var(--vaf-red-dark);
}

.alert-success {
  border-color: rgba(var(--vaf-green-rgb), .22);
  background-color: var(--vaf-green-light);
  color: var(--vaf-green-dark);
}

/************************************************
AWE RESETS
************************************************/
/* Match AWE's own `.awe-hidden { display: none }` (no !important).
   AWE's SignalR scripts call jQuery's `.show()` to reveal placeholder
   elements (e.g. .InlineContextualStatus, .awe-rt-ShowOnEnd) — `.show()`
   sets an inline display value that beats this class's `display: none`
   only when the class declaration is NOT !important. Forcing !important
   here silently breaks every AWE live-update path that relies on toggling
   awe-hidden via JS (winning/losing chip flips, sold/ended badges, etc). */
.awe-hidden {
  display: none;
}

.highlight {
  background-color: var(--vaf-white) !important;
  border: 2px solid var(--vaf-red-light) !important;
}

.watch-item__cta .btn, .active-bid__cta .btn {
  margin-bottom: unset;
}