:root {
  --main-blue: #71b7e6;
  --main-purple: #9b59b6;
  --main-grey: #ccc;
  --sub-grey: #d9d9d9;
}

.reg-container {
  /* max-width: 942px; */
  width: 100%;
  background: #ffffffa8;
  padding: 25px 30px;
  border-radius: 5px;
}

.reg-container .title {
  font-size: 25px;
  font-weight: 500;
  position: relative;
}

.reg-container .title::before {
  content: "";
  position: absolute;
  height: 3.5px;
  width: 30px;
  background: linear-gradient(135deg, var(--main-blue), var(--main-purple));
  left: 0;
  bottom: 0;
}

/* Remove flexbox from .user__details and input__box, and adjust widths for Bootstrap grid */


form .user__details .input__box,
form .user__details .input__box2 {
  width: 100%;
  margin-bottom: 15px;
}

/* For Bootstrap grid, add spacing between columns */
.reg-container .row>[class^="col-"] {
  padding-right: 10px;
  padding-left: 10px;
  margin-bottom: 15px;
}

/* Ensure selects and inputs are full width in columns */
.input__box input,
.input__box select,
.input__box2 input,
.input__box2 select,
.select__box select {
  width: 100%;
  box-sizing: border-box;
}

/* Remove width from .gender__details .category for grid */
form .gender__details .category {
  /* width: 80%; */
  width: 100%;
}

/* inside the form user details */
/* form .user__details .input__box { */
/* width: calc(100% / 2 - 20px); */
/* margin-bottom: 15px; */
/* } */

/* form .user__details .input__box2 { */
/* width: calc(100% / 1 - 0px); */
/* margin-bottom: 15px; */
/* } */


.user__details .input__box .details {
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}

.user__details .input__box2 .details {
  font-weight: 500;
  margin-bottom: 5px;
  display: block;
}

.user__details .input__box input {
  height: 45px;
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: 1px solid var(--main-grey);
  padding-left: 15px;
  font-size: 16px;
  border-bottom-width: 2px;
  transition: all 0.3s ease;
}

.user__details .input__box2 input {
  height: 45px;
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: 1px solid var(--main-grey);
  padding-left: 15px;
  font-size: 16px;
  border-bottom-width: 2px;
  transition: all 0.3s ease;
}

.user__details .input__box input:focus,
.user__details .input__box input:valid {
  border-color: var(--main-purple);
}

.user__details .input__box2 input:focus,
.user__details .input__box2 input:valid {
  border-color: var(--main-purple);
}



/* inside the form gender details */

form .gender__details .gender__title {
  font-size: 20px;
  font-weight: 500;
}

form .gender__details .category {
  display: flex;
  width: 80%;
  margin: 15px 0;
  justify-content: space-between;
}

.gender__details .category label {
  display: flex;
  align-items: center;
}

.gender__details .category .dot {
  height: 18px;
  width: 18px;
  background: var(--sub-grey);
  border-radius: 50%;
  margin: 10px;
  border: 5px solid transparent;
  transition: all 0.3s ease;
}

#dot-1:checked~.category .one,
#dot-2:checked~.category .two,
#dot-3:checked~.category .three {
  border-color: var(--sub-grey);
  background: var(--main-purple);
}

form input[type="radio"] {
  display: none;
}

/* submit button */
form .button {
  height: 45px;
  margin: 45px 0;
}

form .button input {
  height: 100%;
  width: 100%;
  outline: none;
  color: #fff;
  border: none;
  font-size: 18px;
  font-weight: 500;
  border-radius: 5px;
  background: linear-gradient(135deg, var(--main-blue), var(--main-purple));
  transition: all 0.3s ease;
}

form .button input:hover {
  background: linear-gradient(-135deg, var(--main-blue), var(--main-purple));
}

@media only screen and (max-width: 584px) {
  .reg-container {
    max-width: 100%;
  }

  form .user__details .input__box {
    margin-bottom: 15px;
    width: 100%;
  }

  form .user__details .input__box2 {
    margin-bottom: 15px;
    width: 100%;
  }

  form .gender__details .category {
    width: 100%;
  }



  .user__details::-webkit-scrollbar {
    width: 0;
  }
}

.user__details .input__box select {
  height: 45px;
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: 1px solid var(--main-grey);
  padding-left: 15px;
  font-size: 16px;
  border-bottom-width: 2px;
  transition: all 0.3s ease;
}

.user__details .input__box2 select {
  height: 45px;
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: 1px solid var(--main-grey);
  padding-left: 15px;
  font-size: 16px;
  border-bottom-width: 2px;
  transition: all 0.3s ease;
}

.select__box select {
  height: 45px;
  width: 100%;
  outline: none;
  border-radius: 5px;
  border: 1px solid var(--main-grey);
  padding-left: 15px;
  font-size: 16px;
  border-bottom-width: 2px;
  transition: all 0.3s ease;
}

.jk___klll {
  font-size: 13px;
  color: red;
}


#mainCaptcha {
  -webkit-user-select: none !important;
  /* Safari */
  -ms-user-select: none !important;
  /* IE 10+ and Edge */
  user-select: none !important;
  /* Standard syntax */
  position: relative;
  top: 5px;
  background-image: linear-gradient(45deg, transparent 20%, black 25%, transparent 25%),
    linear-gradient(-45deg, transparent 20%, black 25%, transparent 25%),
    linear-gradient(-45deg, transparent 75%, black 80%, transparent 0),
    radial-gradient(gray 2px, transparent 0);
  background-size: 10px 10px, 10px 10px;
}

.error {
  border: 1px solid red;
  /* You can customize the border color */
  background-color: #FFD2D2;
  /* You can customize the background color */
}

.filled {
  background-color: #D2FFD2;
  /* You can customize the background color for filled fields */
}



.loader {
  position: relative;
  width: 50vmin;
  aspect-ratio: 1;
  background: conic-gradient(transparent,
      transparent 12%,
      var(--loader-bar-bg));
  border-radius: 50%;
  margin: auto;
  animation: spin 1.1s linear infinite;

  &::before,
  &::after {
    content: "";
    position: absolute;
    border-radius: inherit;
  }

  &::before {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(to left,
        var(--loader-bar-bg) 50%,
        transparent 50%);
    width: var(--loader-bar-width);
    aspect-ratio: 1;
  }

  &::after {
    inset: var(--loader-bar-width);
    background: var(--page-bg);
  }
}

@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}

#hidden_div10 {
  display: none;
}

#hidden_div99 {
  display: none;
}

.refresh-btn {
  cursor: pointer;
  margin-left: 5px;
}

.note {
  font-weight: 700;
  font-style: italic;
}


#loader-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  z-index: 9999;
  display: none;
  /* Hide loader initially */
  justify-content: center;
  align-items: center;
}

#loader {
  border: 8px solid #f3f3f3;
  /* Light gray */
  border-top: 8px solid #3498db;
  /* Blue */
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

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

.modal-header {
  background-color: #03a9f4;
  display: flex;
  color: #fff;
}

.modal-header button {
  position: relative;
  top: 0;
  right: 0;
  /* left: 0; */
  color: #fff;
  background: none;
  margin-left: auto;
  border: none;
}

.terms-conditions {
  color: #797b8a;
}