body {
  background-color: #f8f9fa;
}

.container {
  max-width: 600px;
  margin: auto;
  padding: 0 15px; /* Add padding for mobile devices */
}

.output-container {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  word-wrap: break-word; /* Ensure long passwords wrap */
}

.output-container .border {
  border: none;
  border-bottom: 4px solid #28a745;
}

.output-container .icon-button {
  margin-left: 10px;
  margin-bottom: 5px;

}

.password-indicator {
    height: 20px;
    background-color: #28a745;
    border-radius: 0 0 5px 5px;
    color: white; /* Set text color to white */
    font-weight: bold; /* Make text bold */
    font-size: 0.875rem; /* Set font size to small readable */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
}

.password-indicator-container {
  position: relative;
}

.password-strength-labels {
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 100%;
  width: 100%;
  padding-top: 5px;
}

.strength-label {
  font-size: 0.75rem;
  color: #6c757d;
}

.strength-label.weak {
  color: #dc3545;
}

.strength-label.moderate {
    color: #ffa500; /* Orange color with good contrast for white text */
}

.strength-label.strong {
  color: lightgreen;
}

.strength-label.very-strong {
  color: #28a745;
}

.controls {
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  margin-top: 20px;
}

.controls h4 {
  margin-bottom: 20px;
}

.form-check {
  margin-bottom: 10px;
}

.btn-danger {
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

/* Ensure buttons stay side by side on smaller screens */
#buttonIcons {
    display: flex;
    flex-wrap: nowrap;
  }

/* Ensure buttons stay side by side on larger screens and stack on smaller screens */
#passwordGeneratorMainButtons {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

/* Custom Popup */
.copy-popup {
    visibility: hidden;
    min-width: 300px;
    height: 75px;
    background-color: #cce5ff;
    color: #004085;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    padding: 10px;
    position: absolute;
    z-index: 1;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

 .generate-popup {
  visibility: hidden;
  min-width: 300px;
  height: 75px;
  background-color: #d4edda;
  color: #155724;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.copy-popup.show {
  visibility: visible;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

.generate-popup.show {
    visibility: visible;
    animation: fadein 0.5s, fadeout 0.5s 2.5s;
  }

@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeout {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Responsive Design */ 
@media (max-width: 576px) {

    #passwordGeneratorMainButtons {
        flex-direction: column;
        align-items: center;
      }

      #passwordGeneratorMainButtons .btn {
        width: 100%; /* Make buttons take full width */
        margin: 0px;
      }

  .output-container .d-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .output-container .icon-button {
   
    margin-top: 10px;
    margin-bottom: 5px;
    margin-left: 0;
  }

  .controls .d-flex {
    flex-direction: column;
    align-items: flex-start;
  }

  .controls .form-label {
    margin-bottom: 10px;
  }

  .controls .form-control,
  .controls .form-range {
    width: 100%;
    margin-bottom: 5px;
  }


}

#passwordOutput {
  font-size: 1.5rem; /* Increase font size */
  font-weight: bold; /* Make text bold */
  text-align: center; /* Center the text */
  border: none; /* Remove border */
  background-color: transparent; /* Make background transparent */
  width: 100%; /* Make it take full width */
}