/* Group Education System Styles */



.group-students-section {

    margin: 15px 0;

    background: #f8f9fa;

    border-radius: 8px;

    padding: 15px;

    border: 1px solid #e1e8ed;

}



.group-students-section .uk-form-label {

    font-weight: 600;

    margin-bottom: 10px;

    display: block;

}



.group-students-section .uk-form-label .uk-text-primary {

    color: #0066cc !important;

}



.group-students-section .uk-form-label .uk-text-muted {

    font-weight: 400;

    font-size: 0.9em;

}



.group-students-section .uk-card {

    background: white;

    border-radius: 6px;

    box-shadow: 0 2px 4px rgba(0,0,0,0.1);

}



.group-students-section .uk-button-small {

    padding: 2px 8px;

    font-size: 0.8em;

    border-radius: 4px;

}



.group-student-checkbox {

    transform: scale(1.1);

    margin-right: 8px !important;

}



.group-students-section label {

    cursor: pointer;

    padding: 8px;

    border-radius: 4px;

    transition: background-color 0.2s ease;

}



.group-students-section label:hover {

    background-color: #f0f8ff;

}



.group-students-section .uk-text-small {

    line-height: 1.4;

}



.group-students-section .uk-text-small strong {

    color: #333;

}



.group-students-section .uk-text-muted {

    color: #666 !important;

    font-size: 0.85em;

}



/* Responsive adjustments */

@media (max-width: 768px) {

    .group-students-section {

        margin: 10px -10px;

        border-radius: 0;

        padding: 10px;

    }

    

    .group-students-section .uk-button-small {

        font-size: 0.75em;

        padding: 1px 6px;

    }

}



/* Animation for showing/hiding */

.group-students-section.fadeIn {

    animation: fadeInUp 0.3s ease-out;

}



@keyframes fadeInUp {

    from {

        opacity: 0;

        transform: translateY(10px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



.group-students-section.fadeOut {

    animation: fadeOutDown 0.2s ease-in;

}



@keyframes fadeOutDown {

    from {

        opacity: 1;

        transform: translateY(0);

    }

    to {

        opacity: 0;

        transform: translateY(-10px);

    }

}