html {
  min-height: 100svh;
  height: 100%;
}

body {
  min-height: 100svh;
}

.accordion-button:not(.collapsed) {
  background-color: #ddd;
}

.validationFeedback {
  display: none;
}

.uploadProgress {
  display: none;
  width: 100%;
  height: 25px;
  background-color: #333333;
}

.progressFill {
  background-color: steelblue;
  height: 100%;
  width: 0%;
  transition: width linear 200ms;
}

#message-container {
  top: 60px;
  pointer-events: none;
}

#select-make,
#select-make option,
#select-model,
#select-model option,
#select-cc,
#select-cc option,
#select-year,
#select-year option,
#select-year,
#select-year option {
  text-transform: capitalize;
}

.edit-part-form input {
  text-transform: capitalize;
}

.part-info span {
  text-transform: capitalize;
}

.pagination > li > a {
  cursor: pointer;
}
.pagination > li > .page-link {
  color: #000;
}
.pagination > li > a .active {
  color: #000;
  background-color: #333333 !important;
  border: solid 1px #333333 !important;
}

.pagination > li > a:focus,
.pagination > li > a:hover,
.pagination > li > span:focus,
.pagination > li > span:hover {
  color: #000;
  background-color: #ccc;
  border-color: #ccc;
}

.pagination > .active > .page-link {
  color: white;
  background-color: #333333 !important;
  border: solid 1px #333333 !important;
}

.pagination > .active > a:hover {
  background-color: #333333 !important;
  border: solid 1px #333333;
}

/* Disable pointer events for all font-awesome icons */
i {
  pointer-events: none;
}

.sortable {
  cursor: pointer;
  position: relative;
}

.sortable::before,
.sortable::after {
  content: "";
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.sortable::before {
  top: 4px;
  left: 8px;
  border-bottom: 5px solid #ccc;
}

.sortable::after {
  bottom: 3px;
  left: 8px;
  border-top: 5px solid #ccc;
}

.sortAsc::before {
  border-bottom-color: #f00;
}

.sortDesc::after {
  border-top-color: #f00;
}

.hide-before:before,
.hide-after:after {
  display: none;
}

.adminToggleButton {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid #eee;
  border-top-right-radius: 5px;
  background: #eee;
  transition: background-color ease-in-out 250ms, border ease-in-out 250ms;
}

.adminToggleButton:hover {
  background-color: #fff;
  border: 1px solid #aaa;
}

.add-fitting-form input:disabled,
.edit-fitting-form input:disabled {
  background-color: #dadde0;
  cursor: not-allowed;
}

.form-check-input {
  cursor: pointer;
}

#timeout-warning {
  position: absolute;
  bottom: 50px;
  right: 0;
  transform: translateX(500px);
  border-top-right-radius: 0.5rem;
  border-top-left-radius: 0.5rem;
  border-bottom-right-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
  border-top: transparent 2px solid;
  border-right: transparent 2px solid;
  border-bottom: transparent 2px solid;
  border-left: transparent 2px solid;
  transition: transform 0.5s ease;
}

#timeout-warning.show {
  transform: translateX(0px);
  animation: pulse 2s infinite;
}

.export-select {
  height: 400px;
}

@keyframes pulse {
  0% {
    border-color: transparent;
  }

  100% {
    border-color: #f00;
  }
}

.check-danger {
  border-color: #f00;
}

.check-danger:checked {
  background-color: #f00;
  border-color: #f00;
}

/* Global Suppliers */
.clearable-input {
  position: relative;
}

.clearable-input-button {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  border: none;
  background-color: transparent;
}

.clearable-input-button i {
  font-size: 1rem;
  opacity: 0.3;
}

/* Edit Fittings Page */
#filter-button {
  position: absolute;
  top: 5px;
  right: 5px;
  border: 2px solid #ccc;
  background-color: transparent;
  color: #ccc;
  transition: color ease-in-out 200ms, border ease-in-out 200ms;
}

#filter-button.toggled,
#filter-button:hover {
  border: 2px solid #f2f2f2;
  color: #f2f2f2;
}

#filter-list {
  width: 100%;
  background-color: #f2f2f2;
  position: absolute;
  top: 40px;
  height: 0%;
  overflow: hidden;
  padding: 0 1rem;
}

#filter-list.show {
  height: auto;
  padding: 0.5rem 1rem;
}

#filter-button.active-filter {
  border-color: yellowgreen;
  color: yellowgreen;
}

.checked-parts-options button {
  transition: background-color ease-in-out 250ms, border-color ease-in-out 250ms;
}

.checked-parts-options button:disabled {
  background-color: #888;
  border-color: #888;
}