/* Custom Styles for the Modal and Form */
/* Custom Styles for Bootstrap 3 Modal */
/* Custom Modal Content Styles */
#downloadModal .modal-content {
  background-color: #39b54a;

  /* Green background */
  color: white;

  /* White text */
  border-radius: 4px;

  /* Rounded corners */
}

/* Modal Header Customization */
#downloadModal .modal-header {
  /* Light border for the header */
  padding: 15px;

  /* Standard padding */
}

#downloadModal .modal-header .close {
  color: white;

  /* White color for the close button */
}

/* Modal Body Customization */
#downloadModal .modal-body .modal-footer {
  padding: 20px;

  /* Padding for the body */
}

#successMessage p {
  color: white;
  padding-bottom: 20px;
}

#downloadModal h4 {
  color: white !important;
}

/* Form Fields Customization */
#downloadModal .form-control {
  background-color: white;

  /* White background for input fields */
  border: 1px solid #ccc;

  /* Standard Bootstrap border */
  border-radius: 4px;

  /* Rounded corners for input fields */
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

  /* Subtle inner shadow */
  height: 34px;

  /* Standard height */
}

/* Checkbox Customization */
#downloadModal .checkbox label {
  color: white;

  /* White color for the checkbox label */
  padding-left: 20px;

  /* Standard padding */
}

/* Button Customization */
#downloadModal .btn-default {
  background-color: white;

  /* White background for the button */
  color: #39b54a;

  /* Green text color */
  border: 1px solid #39b54a;

  /* Green border */
}

#downloadModal .btn-default:hover,
#downloadModal .btn-default:focus {
  background-color: darkgreen; /* Change to your preferred dark green shade */
  border-color: darkgreen; /* Optional: if you want to change the border color as well */
  color: white; /* Adjust text color if needed */
}

/* Google reCAPTCHA Custom Styles */
#downloadModal .g-recaptcha {
  margin-top: 10px;

  /* Margin above the captcha */
  margin-bottom: 10px;

  /* Margin below the captcha */
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  #downloadModal .modal-dialog {
    width: 90%;

    /* Modal width on smaller screens */
  }
}

.modal-backdrop {
  z-index: 1040;

  /* Example value, adjust as needed */
}

.modal {
  z-index: 1050;

  /* Should be higher than modal-backdrop */
}

.disabled-link {
  pointer-events: none;

  /* Prevents clicking */
  opacity: 0.6;

  /* Visual feedback that it's disabled */
}

/* Loading Spinner Styles */
#loadingSpinner {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  display: flex;
}

.spinner {
  border: 5px solid #f3f3f3; /* Light grey */
  border-top: 5px solid darkgreen; /* Dark green */
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: spin 2s linear infinite;
}

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

/* Modal Close Button Styles */
.modal-header .close {
  font-size: 30px;
  font-weight: 300; /* Thinner 'X' */
  color: #000; /* Or any color you prefer */
  position: absolute;
  right: 15px; /* Adjust these values as needed */
  top: 10px;
}

/* Ensures the modal is centered */
.modal-dialog {
  display: flex;
  align-items: center;
  justify-content: center;
}