/* RIGHT SIDE */
/* .right-section {
    width: 65%;
    background-color: #ffffff;
    padding: 20px;
} */

.form-section {
    background: #d4dff4;
    padding: 40px;
    border-radius: 6px;
    max-width: 100%;
    height: 100%;
    overflow: auto;
}

::-webkit-scrollbar {
    display: none;
}

.form-title {
    font-weight: 600;
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.form-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 3px;
    background: #086ae0;
    margin: 8px auto 0;
    border-radius: 2px;
}

.form-label {
    font-weight: 500;
    margin-bottom: 6px;
}

.form-control {
    border-radius: 6px;
    height: 42px;
}

.password-strength {
    display: flex;
    gap: 6px;
    margin-top: 5px;
    margin-bottom: 15px;
}

.password-strength div {
    flex: 1;
    height: 5px;
    background-color: #ccc;
    border-radius: 5px;
}

.password-strength .weak.active {
    background-color: #e91e63;
}

.password-strength .fair.active {
    background-color: #ffc107;
}

.password-strength .good.active {
    background-color: #4caf50;
}

.password-strength .strong.active {
    background-color: #00bcd4;
}

.requirements {
    font-size: 0.9rem;
    color: #666;
}

.requirements ul {
    list-style: none;
    padding-left: 0;
}

.requirements ul li::before {
    content: "•";
    margin-right: 8px;
    color: #888;
}

.requirements li {
    color: #999;
}

.requirements li.met {
    color: green;
}

.form-check-label {
    font-weight: 400;
    font-size: 0.95rem;
}

.btn {
    height: 45px;
}

.btn-primary {
    background-color: #086ae0;
    border: none;
    border-radius: 6px;
    font-weight: 500;
    /* height: 45px; */
}

.btn-primary:hover {
    background-color: #005ad0;
}

.form-control:focus {
    border-color: #086ae0;
    box-shadow: 0 0 0 0.2rem rgba(8, 106, 224, 0.15);
}

.loading-spinner {
    width: 20px;
    height: 20px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 10px;
}

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

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