.form-select:focus,
.form-control:focus {
  color: var(--color-5);
  border-color: var(--color-4);
  outline: 0;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1) !important;
}

.ad-form .form-control::placeholder {
  color: rgba(153, 153, 153, 0.75);
}

.ad-form .btn-ad-steps {
  font-size: 12px;
  padding: 5px 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ad-form .btn-ad-steps i {
  font-size: 16px;
}

.ad-form .btn-current:hover,
.ad-form .btn-current {
  background-color: var(--color-7);
  color: #333;
}

.ad-form .btn-completed,
.ad-form .btn-completed:hover {
  background: var(--color-4);
  color: #fff;
}

.ad-form .btn-inactive {
  background: rgba(238, 238, 238, 0.5);
  color: #333;
}

.ad-form .btn-inactive:hover {
  background: rgba(238, 238, 238, 1);
}

.ad-form .btns .btn {
  font-size: 18px;
  border-radius: 100px;
}

.ad-form .btns .btn.btn-previous {
  background-color: var(--color-5);
  padding: 5px 10px 5px 15px;
  color: #fff;
}

.ad-form .btns .btn.btn-next {
  background-color: var(--color-4);
  padding: 5px 15px 5px 10px;
  color: #fff;
}

.ad-form .btns .btn.btn-registration {
  background-color: #27ae60;
  color: #fff;
}

.ad-form .vs__dropdown-option:hover {
  background-color: #eee;
  color: #333;
}

.ad-form .v-select .vs__dropdown-option--highlight,
.ad-form .vs__dropdown-option--selected {
  background-color: var(--color-4);
  color: white;
}

.ad-form .v-select ul {
  max-height: 12.5rem;
}

.ad-form .v-select li {
  padding: 20px;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.form-control-cat {
  color: rgba(153, 153, 153, 0.75) !important;
  font-size: 16px;
}

.selected-cat {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  list-style: none;
  gap: 5px;
  padding: 0;
  margin: 0 0 15px;
}

.selected-cat li {
  background-color: #eee;
  padding: 5px 15px;
  display: flex;
  border-radius: 100px;
  font-size: 14px;
}

.ad-form .btn-main-cat:hover,
.ad-form .btn-main-cat {
  background-color: #fff;
  border-width: 1px;
  border-style: solid;
  border-color: #eee;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ad-form .btn-main-cat small {
  color: var(--color-4);
}

.ad-form .modal .form-check {
  border-width: 1px;
  border-style: solid;
  border-color: #ddd;
  padding: 5px 32px 5px 10px;
  border-radius: 10px;
}

.form-check-input:checked {
  background-color: var(--color-4) !important;
}

.form-check-input:focus {
  border-color: var(--color-4) !important;
  box-shadow: none !important;
}

.current-step-2 .form-check {
  border-width: 1px;
  border-style: solid;
  border-color: #eee;
  padding: 5px 32px 5px 10px;
  border-radius: 10px;
  background: #eee;
}

.current-step-2 .form-control:disabled {
  display: none !important;
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  color: white;
  font-size: 1.2rem;
}

.loading-spinner {
  border: 5px solid #f3f3f3;
  border-top: 5px solid #f26b21;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.ad-form .vs__search {
  text-align: right !important;
}

.ad-form .vs__dropdown-toggle {
  padding: 10px !important;
  border-radius: 30px;
}

.ad-form .vs__selected-options {
  height: 100%;
}

.ad-form .vs__actions {
  top: 0;
  left: 0;
  bottom: 0;
  gap: 20px;
  z-index: 1;
  padding: 0 20px;
  position: absolute;
}

.ad-form .btns .btn.btn-next:disabled {
  border: none;
  background-color: #ddd;
  color: #999;
}

.ad-form .btn-cut:hover,
.ad-form .btn-cut {
  background-color: var(--color-4);
  color: #fff;
}

.vs__selected-options {
  text-align: right !important;
  direction: rtl !important;
}

.vs__dropdown-option {
  text-align: right !important;
  direction: rtl !important;
}

body .modal-backdrop {
  display: none !important;
}