html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/*Custom Styling*/
.form-check-input:checked {
    background-color: purple; /* Change to your desired color */
    border-color: purple; /* Optional: Change border color to match */
}

.form-check-input:focus {
    box-shadow: 0 0 0 0.25rem rgba(216, 191, 216, 0.25); /* Green shadow example */
}

.btn-custom {
    background-color: #ff5733; /* Your custom color */
    border-color: #ff5733;
    color: #fff; /* Text color */
}

    /* Define hover, focus, and active states for consistency */
    .btn-custom:hover {
        background-color: #e04e2a;
        border-color: #e04e2a;
    }

    .btn-custom:focus, .btn-custom.focus {
        box-shadow: 0 0 0 0.25rem rgba(255, 87, 51, 0.5);
    }


.content-container {
    height: 100px; /* Initial fixed height */
    overflow: hidden; /* Hides content that exceeds the height */
    /*transition: height 0.7s ease;*/ /* Smooth animation for height change */
}

    .content-container.expanded {
        height: auto; /* Height becomes automatic when expanded */
    }

.toggle-button:hover {
    cursor: pointer;
}