/* Custom styles for the login page */
.offcanvas {
    width: 400px;
    max-width: 100%;
}

.card {
    border: 0;
    -webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-link {
    text-decoration: none;
}

.btn-link:hover {
    text-decoration: underline;
}

.form-floating > label {
    z-index: 3;
}

/* Custom styles for profile cards */
.bg-purple {
    background-color: #6f42c1;
}

.border-purple {
    border-color: #6f42c1 !important;
}

.card-footer {
    background-color: rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-light {
    width: 36px;
    height: 36px;
    padding: 0;
    line-height: 36px;
}
  
/* Wizard Styles */
.wizard-step {
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.bg-purple {
    background-color: var(--bs-purple) !important;
}

.progress-bar.bg-purple {
    background-color: var(--bs-purple) !important;
}

.card-footer {
    background-color: rgba(var(--bs-light-rgb), 0.05);
    border-top: 1px solid rgba(var(--bs-light-rgb), 0.125);
}

.form-floating > .form-control:not(:-moz-placeholder-shown) ~ label {
    color: var(--bs-purple);
}

.form-floating > .form-control:not(:-ms-input-placeholder) ~ label {
    color: var(--bs-purple);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--bs-purple);
}

.form-control:focus {
    border-color: var(--bs-purple);
    -webkit-box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
            box-shadow: 0 0 0 0.25rem rgba(111, 66, 193, 0.25);
}