/* General Reset */
*:focus {
  box-shadow: none;
  outline: none;
}

/* Input Focus Styles */
textarea:focus,
input[type="color"]:focus,
input[type="date"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="email"]:focus,
input[type="month"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="text"]:focus,
input[type="time"]:focus,
input[type="url"]:focus,
input[type="week"]:focus,
.uneditable-input:focus {
  outline: none;
  box-shadow: none;
}

.my-slider-outer {
  padding: 0px 0 9px;
  margin-left: 8px;
}

.my-slider {
  -webkit-appearance: none;
  -moz-appearance: none; /* Add this line for Firefox */
  appearance: none;
  width: auto;
  height: 1px;
  background: #333333;
  outline: none;
}

.my-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--bs-gray-dark);
  position: relative;
  z-index: 3;
}

.my-slider::-webkit-slider-thumb:focus {
  background: var(--bs-secondary);
}

.my-slider::-moz-range-thumb {
  -moz-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  border: none;
  background: var(--bs-gray-dark);
  position: relative;
  z-index: 3;
}

.my-slider::-moz-range-thumb:focus {
  background: var(--bs-secondary);
}

.my-slider::-ms-thumb {
  width: 16px;
  height: 16px;
  border-radius: 8px;
  background: var(--bs-gray-dark);
  position: relative;
  z-index: 3;
}

.my-slider::-ms-thumb:focus {
  background: var(--bs-secondary);
}


/* Font Style Selector Button */
.fontStyleSelectorBtn {
  background:var(--bs-btn-hover-bg);
  border: none;
  border-radius: 6px;
  color: #fff;
  cursor: pointer;
  font-size: 12px;
  height: 20px;
  padding: 0 8px;
  position: relative;
  text-align: left;
  text-transform: capitalize;
  transition: border-radius 0.1s ease;
  width: 190px;
  font-variation-settings: "wght" 500;
}

.fontStyleSelectorBtnOff {
  background:var(--bs-gray-500);
  border: none;
  border-radius: 6px;
  color: #333333;
  cursor: default;
  font-size: 12x;
  height: 20px;
  padding: 0 8px;
  position: relative;
  text-align: left;
  text-transform: capitalize;
  transition: border-radius 0.1s ease;
  width: 190px;
}

.fontStyleSelectorBtn.active {
  border-radius: 6px 6px 0 0;
  background: var(--bs-btn-hover-bg);
}

.fontStyleSelectorBtn:hover {
  background: var(--bs-primary);
}

.fontStyleSelectorBtn::after{ /* Arrow */
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  content: '';
  height: 6px;
  position: absolute;
  right: 10px;
  top: 45%;
  transform: translateY(-50%) rotate(45deg);
  width: 6px;
}

/* Options Dropdown */
.options {
  background: var(--bs-btn-hover-bg);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  font-size: 12px;
  height: 0;
  left: 0;
  opacity: 0;
  padding: 0;
  position: absolute;
  top: 20px;
  transition: height 0.3s ease, opacity 0.3s ease;
  width: 190px;
}



.options.active {
  height: fit-content;
  opacity: 1;
  background: var(--bs-btn-hover-bg);
  z-index: 9999;
}

.options .item {
  cursor: pointer;
  font-size: 12px;
  line-height: 1.5;
  padding: 0 8px 0 8px;
  text-transform: capitalize;
  width: 100%;
  z-index: 9999;
  font-variation-settings: "wght" 600;
}

@media (max-width: 575.98px) {
  .options .item {
    line-height: 3;
    font-size: 12px;
  }
}


/* Target the last item inside .options */
.options .item.active {
  background: var(--bs-primary);
}

.options .item:last-child {
  padding-bottom: 3px;
}

.options .item.active:last-child {
  background: var(--bs-primary);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}

/* Container Select */
.container-select,
.container-select-empty {
  line-height: 1;
  margin: 0;
  padding: 0;
  position: relative;
  width: 120px;
}

.container-select-empty {
  font-size: 12px;
}

.container-select p {
  margin-bottom: 0;
}