/* Login form styles */
.login-container {
    max-width: 400px;
    margin: 6rem auto;
}

.login-container .dx-card {
    border: 1px solid #d1d1d1;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.login-container .dx-card-header {
    background: linear-gradient(to bottom, #f0f0f0 0%, #e5e5e5 100%);
    padding: 12px 16px;
    border-bottom: 1px solid #d1d1d1;
    text-align: center;
}

.login-container .dx-card-header h3 {
    margin-bottom: 0;
    font-weight: 600;
    color: #0078d7;
}

.login-container .dx-card-body {
    background-color: #fafafa;
}

.login-container .dx-card-footer {
    background-color: #f5f5f5;
    border-top: 1px solid #d1d1d1;
    padding: 10px;
    font-size: 11px;
}

.login-container .dx-input {
    height: 30px;
    border: 1px solid #d1d1d1;
    padding: 4px 12px;
    width: 100%;
    font-size: 12px;
    background-color: white;
}

.login-container .dx-input:focus {
    border-color: #0078d7;
    box-shadow: 0 0 0 1px #0078d7;
}

.login-container .dx-input-invalid {
    border-color: #d83b01;
}

.login-container .dx-btn-primary {
    background-color: #0078d7;
    background-image: linear-gradient(to bottom, #0078d7, #0067b9);
    color: white;
    padding: 6px 24px;
    border: 1px solid #0067b9;
    font-weight: 500;
}

.login-container .dx-btn-primary:hover {
    background-image: linear-gradient(to bottom, #0086eb, #0078d7);
}

.login-container .dx-label {
    font-weight: 500;
    font-size: 12px;
}

.login-container .dx-checkbox {
    display: flex;
    align-items: center;
}

/* Alert animations */
.dx-alert {
    animation: slideDown 0.3s ease-out;
    padding: 10px 12px;
    border: 1px solid #d1d1d1;
    margin-bottom: 1rem;
    background-color: #f5f5f5;
}

.dx-alert-success {
    background-color: #dff6dd;
    border-color: #c5e7c0;
    color: #107c10;
}

.dx-alert-danger {
    background-color: #fee8e6;
    border-color: #f3bbb5;
    color: #d83b01;
}

.dx-alert-warning {
    background-color: #fff8e6;
    border-color: #ffe7a6;
    color: #866500;
}

@keyframes slideDown {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}