:root {
  --ehx-primary-color: #000;
  --ehx-secondary-color: #71b7e6;
  --ehx-tertiary-color: #9b59b6;
  --ehx-background-color: #fff;
  --ehx-border-color: #ccc;
  --ehx-text-color: #000;
  --ehx-alert-primary-color: #001620;
  --ehx-alert-primary-bg: #ccd7dc;
  --ehx-alert-primary-border: #99afb9;
  --ehx-alert-danger-color: #ffffff;
  --ehx-alert-danger-bg: #f1aeb5;
  --ehx-alert-danger-border: #f1aeb5;
  --ehx-alert-info-color: #055160;
  --ehx-alert-info-bg: #cff4fc;
  --ehx-alert-info-border: #9eeaf9;
  --ehx-spacing-small: 5px;
  --ehx-spacing-medium: 15px;
  --ehx-spacing-large: 25px;
  --ehx-border-radius: 5px;
  --ehx-transition-speed: 0.3s;
}

/* Base Container */
.ehx-container {
  max-width: 700px;
  width: 100%;
  background-color: var(--ehx-background-color);
  padding: var(--ehx-spacing-large) 30px;
  border-radius: var(--ehx-border-radius);
  margin: 0 auto;
}

/* Title Styling */
.ehx-container .title {
  font-size: 25px;
  font-weight: 500;
  position: relative;
  margin-bottom: var(--ehx-spacing-large);
}

.ehx-container .title::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 30px;
  border-radius: var(--ehx-border-radius);
  background: linear-gradient(135deg, var(--ehx-secondary-color), var(--ehx-tertiary-color));
}

/* Form Layout */
.ehx-content .ehxme-form .ehx-user-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px 0 12px 0;
}

.ehx-content .ehxme-form .ehx-user-details .ehx-input-box {
  margin-bottom: var(--ehx-spacing-medium);
  width: calc(100% / 2 - 20px);
}

.ehx-content .ehxme-form .ehx-user-details .ehx-input-box.ehx-input-box-full {
  width: 100%;
}

.ehx-content .ehxme-form .ehx-input-box .ehx-details {
  display: block;
  font-weight: 500;
  margin-bottom: var(--ehx-spacing-small);
}

.ehxme-form button[type="submit"]:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}
.ehxme-form button[type="submit"]:disabled {
  opacity: 0.8;
  cursor: not-allowed;
}
.ehxme-form button[type="submit"].ehx-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.ehxme-form .ehx-button .ehx-btn-loader {
  display: none;
  border: 2px solid #fff;
  border-top: 2px solid #6a6a6a;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  animation: spin 1s linear infinite;
  margin-left: 10px;
}
.ehxme-form button[type="submit"]:disabled .ehx-btn-loader {
  opacity: 0.8;
  cursor: progress;
}

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

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


.ehx-content .ehx-user-details .ehx-input-box .ehx-input {
  width: 100% !important;
  outline: none;
  font-size: 16px;
  padding-left: var(--ehx-spacing-medium);
  border: 1px solid var(--ehx-border-color);
  transition: all var(--ehx-transition-speed) ease;
  background-color: transparent;
  padding: 10px 8px;
}
.ehx-content .ehx-user-details .ehx-input-box .ehx-input.is-invalid {
  border-color: #ea868f;
}
.ehx-content .ehx-user-details .ehx-input-box .invalid-feedback {
  color: #ea868f;
}
.ehx-content .ehx-user-details .ehx-input-box .ehx-input[type="file"],
.ehx-content .ehx-user-details .ehx-input-box .ehx-input[type="date"],
.ehx-content .ehx-user-details .ehx-input-box .ehx-input[type="time"] {
  height: 45px;
}
.ehx-content .ehx-user-details .ehx-input-box .ehx-input[type="file"]::file-selector-button {
  margin-top: 10px;
}

/* Gender and Category Styling */
.ehx-content .ehxme-form .ehx-gender-details .ehx-gender-title {
  font-size: 20px;
  font-weight: 500;
}

.ehx-content .ehxme-form .ehx-category {
  display: flex;
  width: 80%;
  margin: 14px 0;
  justify-content: space-between;
  gap: 8px;
  flex-direction: column;
}

.ehx-content .ehxme-form .ehx-category label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.ehx-content .ehxme-form .ehx-category label .ehx-dot {
  height: 18px;
  width: 18px;
  margin-right: 10px;
  background: #d9d9d9;
  border: 5px solid transparent;
  transition: all var(--ehx-transition-speed) ease;
}
.ehx-content .ehxme-form .ehx-category label .ehx-dot.ehx-dot-radio {
  border-radius: 50%;
}
.ehx-content .ehxme-form .ehx-category label .ehx-dot.ehx-dot-checkbox {
  border-radius: 2px;
}

.ehx-content .ehxme-form .ehx-category input[type="radio"]:checked ~ label .ehx-dot,
.ehx-content .ehxme-form .ehx-category input[type="checkbox"]:checked ~ label .ehx-dot {
  background: var(--ehx-primary-color);
  border-color: #d9d9d9;
}

.ehx-content .ehxme-form input[type="radio"],
.ehx-content .ehxme-form input[type="checkbox"] {
  display: none;
}

/* Button Styling */
.ehx-content .ehxme-form .ehx-button {
  width: 100%;
  height: 45px;
  margin: 35px 0;
  display: block;
  padding: 0;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all var(--ehx-transition-speed) ease;
  background-color: var(--ehx-primary-color);
}

.ehx-content .ehxme-form .ehx-button:hover {
  opacity: 0.9;
}
.ehx-content .ehxme-form .ehx-button:disabled {
  cursor: progress;
  opacity: 0.8;
}

/* Tabs Styling */
.ehx-content .ehx-tabs {
  padding-left: 0;
  margin: 0 0 32px 0;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.ehx-content .ehx-tabs li .ehx-tab-link {
  color: var(--ehx-text-color);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
}
.ehx-tab-contents .ehx-tab-content {
  display: none;
}
.ehx-tab-contents .ehx-tab-content.active {
  display: block;
}

.ehx-content .ehx-tabs li .ehx-tab-link.active,
.ehx-content .ehx-tabs li .ehx-tab-link:hover {
  text-decoration: underline;
}

/* Alert Styling */
.ehx-alert-element {
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 999999;
}

.ehx-alert {
  --ehx-bs-alert-bg: transparent;
  --ehx-bs-alert-padding-x: 1rem;
  --ehx-bs-alert-padding-y: 1rem;
  --ehx-bs-alert-margin-bottom: 1rem;
  --ehx-bs-alert-color: inherit;
  --ehx-bs-alert-border-color: transparent;
  --ehx-bs-alert-border: 1px solid var(--ehx-bs-alert-border-color);
  --ehx-bs-alert-border-radius: var(--ehx-border-radius);
  position: relative;
  padding: var(--ehx-bs-alert-padding-y) var(--ehx-bs-alert-padding-x);
  margin-bottom: var(--ehx-bs-alert-margin-bottom);
  color: var(--ehx-bs-alert-color);
  background-color: var(--ehx-bs-alert-bg);
  border: var(--ehx-bs-alert-border);
  border-radius: var(--ehx-bs-alert-border-radius);
}

.ehx-alert-primary {
  --ehx-bs-alert-color: var(--ehx-alert-primary-color);
  --ehx-bs-alert-bg: var(--ehx-alert-primary-bg);
  --ehx-bs-alert-border-color: var(--ehx-alert-primary-border);
}

.ehx-alert-danger {
  --ehx-bs-alert-color: var(--ehx-alert-danger-color);
  --ehx-bs-alert-bg: var(--ehx-alert-danger-bg);
  --ehx-bs-alert-border-color: var(--ehx-alert-danger-border);
}

.ehx-alert-info {
  --ehx-bs-alert-color: var(--ehx-alert-info-color);
  --ehx-bs-alert-bg: var(--ehx-alert-info-bg);
  --ehx-bs-alert-border-color: var(--ehx-alert-info-border);
}

.ehx-alert-close {
  position: fixed;
  cursor: pointer;
  top: 16px;
  right: 24px;
}

/* Responsive Design */
@media (max-width: 575px) {
  .ehx-container {
    max-width: 100%;
    padding: var(--ehx-spacing-medium);
  }

  .ehx-content .ehxme-form .ehx-user-details .ehx-input-box {
    width: 100%;
  }

  .ehx-content .ehxme-form .ehx-category {
    width: 100%;
  }

  .ehx-content .ehx-user-details::-webkit-scrollbar {
    width: 5px;
  }
  .ehx-container .ehx-content .ehx-category {
    flex-direction: column;
  }
  .ehx-content .ehx-tabs {
    flex-direction: column;
    align-items: start;
    gap: 16px;
    margin: 0 0 42px 0;
  }
}

/* Utility Classes */
.d-none {
  display: none !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.text-center {
  text-align: center !important;
}

/* SELECT2 Customize */
.ehx-input-box .select2-container .select2-selection--single,
.select2-container .select2-selection--multiple {
  height: 45px;
  border-color: var(--ehx-border-color);
  border-radius: 0;
}
.select2-container--default .select2-selection--multiple {
  border-color: var(--ehx-border-color) !important;
  border-radius: 0 !important;
}
.ehx-input-box .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 44px;
}
.ehx-input-box .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  margin-top: 8px !important;
}