.user-content-card {
    width: 80vw;
    height: fit-content;
    padding-top: 2vw;
    padding-bottom: 2vw;
    padding-left: 2.5vw;
    padding-right: 2.5vw;
    background-color: white;
    margin-left: 7.5vw;
    border-radius: 2vw;
    margin-top: 2vw;
}

.user-content-card h1 {
    color: var(--c2);
    border-bottom: 2px solid var(--c2);
    font-size: 2vw;
    padding-bottom: 1vw;
}

.user-card-ffiseg,
.user-card-cemeg,
.user-card-bioleg,
.user-card-maths,
.user-card-maths-pellach {
    width: 75vw;
    margin-top: 1vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vw 2vw;
}

.user-card-ffiseg h2,
.user-card-cemeg h2,
.user-card-bioleg h2,
.user-card-maths h2,
.user-card-maths-pellach h2 {
    color: var(--c2);
    font-size: 3vw;
    margin: 0;
}

/* Base styles for both checkboxes */
input[type="checkbox"].user-checkbox {
    width: 2vw;
    height: 2vw;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 2px solid var(--c2);
    border-radius: 0.2vw;
    outline: none;
    cursor: pointer;
    position: relative;
    background: white;
    transition: background-color 0.2s ease;
}

/* Checked state for both checkboxes */
input[type="checkbox"].user-checkbox:checked {
    background: var(--c2);
}

/* Checkmark styles for both checkboxes */
input[type="checkbox"].user-checkbox:checked::before {
    content: '✓';
    position: absolute;
    color: white;
    font-size: 1.5vw;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    animation: checkmark-appear 0.2s ease forwards;
}

@keyframes checkmark-appear {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.user-card-ffiseg-units,
.user-card-cemeg-units,
.user-card-bioleg-units,
.user-card-maths-units,
.user-card-maths-pellach-units {
    width: 75vw;
    height: 1vw;
    overflow: hidden;
}

.user-card-ffiseg-units.active,
.user-card-cemeg-units.active,
.user-card-bioleg-units.active,
.user-card-maths-units.active,
.user-card-maths-pellach-units.active {
    height: fit-content;
    background-color: white;
}

.user-card-ffiseg-unit-1,
.user-card-ffiseg-unit-2,
.user-card-ffiseg-unit-3,
.user-card-ffiseg-unit-4,
.user-card-cemeg-unit-1,
.user-card-cemeg-unit-2,
.user-card-cemeg-unit-3,
.user-card-cemeg-unit-4,
.user-card-bioleg-unit-1,
.user-card-bioleg-unit-2,
.user-card-bioleg-unit-3,
.user-card-bioleg-unit-4,
.user-card-maths-unit-1,
.user-card-maths-unit-2,
.user-card-maths-unit-3,
.user-card-maths-unit-4,
.user-card-maths-pellach-unit-1,
.user-card-maths-pellach-unit-2,
.user-card-maths-pellach-unit-3,
.user-card-maths-pellach-unit-4,
.user-card-maths-pellach-unit-5   {
    width: 75vw;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1vw 0;
}

.user-card-ffiseg-unit-1 .left-content,
.user-card-ffiseg-unit-2 .left-content,
.user-card-ffiseg-unit-3 .left-content,
.user-card-ffiseg-unit-4 .left-content,
.user-card-cemeg-unit-1 .left-content,
.user-card-cemeg-unit-2 .left-content,
.user-card-cemeg-unit-3 .left-content,
.user-card-cemeg-unit-4 .left-content,
.user-card-bioleg-unit-1 .left-content,
.user-card-bioleg-unit-2 .left-content,
.user-card-bioleg-unit-3 .left-content,
.user-card-bioleg-unit-4 .left-content,
.user-card-maths-unit-1 .left-content,
.user-card-maths-unit-2 .left-content,
.user-card-maths-unit-3 .left-content,
.user-card-maths-unit-4 .left-content,
.user-card-maths-pellach-unit-1 .left-content,
.user-card-maths-pellach-unit-2 .left-content,
.user-card-maths-pellach-unit-3 .left-content,
.user-card-maths-pellach-unit-4 .left-content,
.user-card-maths-pellach-unit-5 .left-content {
    display: flex;
    align-items: center;
    gap: 1vw;  /* Small gap between text and checkbox */
}

.user-card-ffiseg-unit-1 h3,
.user-card-ffiseg-unit-2 h3,
.user-card-ffiseg-unit-3 h3,
.user-card-ffiseg-unit-4 h3,
.user-card-cemeg-unit-1 h3,
.user-card-cemeg-unit-2 h3,
.user-card-cemeg-unit-3 h3,
.user-card-cemeg-unit-4 h3,
.user-card-bioleg-unit-1 h3,
.user-card-bioleg-unit-2 h3,
.user-card-bioleg-unit-3 h3,
.user-card-bioleg-unit-4 h3,
.user-card-maths-unit-1 h3,
.user-card-maths-unit-2 h3,
.user-card-maths-unit-3 h3,
.user-card-maths-unit-4 h3,
.user-card-maths-pellach-unit-1 h3,
.user-card-maths-pellach-unit-2 h3,
.user-card-maths-pellach-unit-3 h3,
.user-card-maths-pellach-unit-4 h3,
.user-card-maths-pellach-unit-5 h3 {
    color: var(--c2);
    font-size: 2vw;
    margin: 0;  /* Remove default margin */
}

#user-card-ffiseg-unit-1-checkbox,
#user-card-ffiseg-unit-2-checkbox,
#user-card-ffiseg-unit-3-checkbox,
#user-card-ffiseg-unit-4-checkbox,
#user-card-cemeg-unit-1-checkbox,
#user-card-cemeg-unit-2-checkbox,
#user-card-cemeg-unit-3-checkbox,
#user-card-cemeg-unit-4-checkbox,
#user-card-bioleg-unit-1-checkbox,
#user-card-bioleg-unit-2-checkbox,
#user-card-bioleg-unit-3-checkbox,
#user-card-bioleg-unit-4-checkbox,
#user-card-maths-unit-1-checkbox,
#user-card-maths-unit-2-checkbox,
#user-card-maths-unit-3-checkbox,
#user-card-maths-unit-4-checkbox,
#user-card-maths-pellach-unit-1-checkbox,
#user-card-maths-pellach-unit-2-checkbox,
#user-card-maths-pellach-unit-3-checkbox,
#user-card-maths-pellach-unit-4-checkbox,
#user-card-maths-pellach-unit-5-checkbox {
    width: 2vw;
    height: 2vw;
    min-width: 2vw;
    min-height: 2vw;
}

#user-card-ffiseg-unit-1-date,
#user-card-ffiseg-unit-2-date,
#user-card-ffiseg-unit-3-date,
#user-card-ffiseg-unit-4-date,
#user-card-cemeg-unit-1-date,
#user-card-cemeg-unit-2-date,
#user-card-cemeg-unit-3-date,
#user-card-cemeg-unit-4-date,
#user-card-bioleg-unit-1-date,
#user-card-bioleg-unit-2-date,
#user-card-bioleg-unit-3-date,
#user-card-bioleg-unit-4-date,
#user-card-maths-unit-1-date,
#user-card-maths-unit-2-date,
#user-card-maths-unit-3-date,
#user-card-maths-unit-4-date,
#user-card-maths-pellach-unit-1-date,
#user-card-maths-pellach-unit-2-date,
#user-card-maths-pellach-unit-3-date,
#user-card-maths-pellach-unit-4-date,
#user-card-maths-pellach-unit-5-date {
    width: fit-content;
    width: 9vw;
    height: 2vw;
    font-size: 1.5vw;
    color: var(--c2);
}

.user-email-card {
    width: 80vw;
    height: 5vw;
    text-align: center;
    background-color: white;
    margin-left: 7.5vw;  
    margin-top: 5vw; 
    padding-top: 1.5vw;
    border-radius: 2.5vw;
}

.user-email-card h1 {
    font-size: 2vw;
    opacity: 1;
}

.user-email-card strong {
    opacity: 0.5;
}

/* Media Query for Smartphones */
@media screen and (max-width: 500px) {
    .user-content-card {
        width: 90vw;
        margin-left: 5vw;
        padding: 4vw;
        border-radius: 4vw;
        margin-top: 4vw;
    }
    
    .user-content-card h1 {
        font-size: 5vw;
        padding-bottom: 2vw;
    }
    
    .user-card-ffiseg,
    .user-card-cemeg,
    .user-card-bioleg,
    .user-card-maths,
    .user-card-maths-pellach {
        width: 85vw;
        padding: 3vw;
        margin-top: 2vw;
    }
    
    .user-card-ffiseg h2,
    .user-card-cemeg h2,
    .user-card-bioleg h2,
    .user-card-maths h2,
    .user-card-maths-pellach h2 {
        font-size: 6vw;
    }
    
    input[type="checkbox"].user-checkbox {
        width: 5vw;
        height: 5vw;
        border-radius: 0.5vw;
    }
    
    input[type="checkbox"].user-checkbox:checked::before {
        font-size: 3.5vw;
    }
    
    .user-card-ffiseg-units,
    .user-card-cemeg-units,
    .user-card-bioleg-units,
    .user-card-maths-units,
    .user-card-maths-pellach-units {
        width: 85vw;
        height: 2vw;
    }
    
    .user-card-ffiseg-unit-1,
    .user-card-ffiseg-unit-2,
    .user-card-ffiseg-unit-3,
    .user-card-ffiseg-unit-4,
    .user-card-cemeg-unit-1,
    .user-card-cemeg-unit-2,
    .user-card-cemeg-unit-3,
    .user-card-cemeg-unit-4,
    .user-card-bioleg-unit-1,
    .user-card-bioleg-unit-2,
    .user-card-bioleg-unit-3,
    .user-card-bioleg-unit-4,
    .user-card-maths-unit-1,
    .user-card-maths-unit-2,
    .user-card-maths-unit-3,
    .user-card-maths-unit-4,
    .user-card-maths-pellach-unit-1,
    .user-card-maths-pellach-unit-2,
    .user-card-maths-pellach-unit-3,
    .user-card-maths-pellach-unit-4,
    .user-card-maths-pellach-unit-5 {
        width: 85vw;
        padding: 2vw 0;
        justify-content: space-between;
    }
    
    .user-card-ffiseg-unit-1 h3,
    .user-card-ffiseg-unit-2 h3,
    .user-card-ffiseg-unit-3 h3,
    .user-card-ffiseg-unit-4 h3,
    .user-card-cemeg-unit-1 h3,
    .user-card-cemeg-unit-2 h3,
    .user-card-cemeg-unit-3 h3,
    .user-card-cemeg-unit-4 h3,
    .user-card-bioleg-unit-1 h3,
    .user-card-bioleg-unit-2 h3,
    .user-card-bioleg-unit-3 h3,
    .user-card-bioleg-unit-4 h3,
    .user-card-maths-unit-1 h3,
    .user-card-maths-unit-2 h3,
    .user-card-maths-unit-3 h3,
    .user-card-maths-unit-4 h3,
    .user-card-maths-pellach-unit-1 h3,
    .user-card-maths-pellach-unit-2 h3,
    .user-card-maths-pellach-unit-3 h3,
    .user-card-maths-pellach-unit-4 h3,
    .user-card-maths-pellach-unit-5 h3 {
        font-size: 4.5vw;
    }
    
    #user-card-ffiseg-unit-1-checkbox,
    #user-card-ffiseg-unit-2-checkbox,
    #user-card-ffiseg-unit-3-checkbox,
    #user-card-ffiseg-unit-4-checkbox,
    #user-card-cemeg-unit-1-checkbox,
    #user-card-cemeg-unit-2-checkbox,
    #user-card-cemeg-unit-3-checkbox,
    #user-card-cemeg-unit-4-checkbox,
    #user-card-bioleg-unit-1-checkbox,
    #user-card-bioleg-unit-2-checkbox,
    #user-card-bioleg-unit-3-checkbox,
    #user-card-bioleg-unit-4-checkbox,
    #user-card-maths-unit-1-checkbox,
    #user-card-maths-unit-2-checkbox,
    #user-card-maths-unit-3-checkbox,
    #user-card-maths-unit-4-checkbox,
    #user-card-maths-pellach-unit-1-checkbox,
    #user-card-maths-pellach-unit-2-checkbox,
    #user-card-maths-pellach-unit-3-checkbox,
    #user-card-maths-pellach-unit-4-checkbox,
    #user-card-maths-pellach-unit-5-checkbox {
        width: 5vw;
        height: 5vw;
        min-width: 5vw;
        min-height: 5vw;
    }
    
    #user-card-ffiseg-unit-1-date,
    #user-card-ffiseg-unit-2-date,
    #user-card-ffiseg-unit-3-date,
    #user-card-ffiseg-unit-4-date,
    #user-card-cemeg-unit-1-date,
    #user-card-cemeg-unit-2-date,
    #user-card-cemeg-unit-3-date,
    #user-card-cemeg-unit-4-date,
    #user-card-bioleg-unit-1-date,
    #user-card-bioleg-unit-2-date,
    #user-card-bioleg-unit-3-date,
    #user-card-bioleg-unit-4-date,
    #user-card-maths-unit-1-date,
    #user-card-maths-unit-2-date,
    #user-card-maths-unit-3-date,
    #user-card-maths-unit-4-date,
    #user-card-maths-pellach-unit-1-date,
    #user-card-maths-pellach-unit-2-date,
    #user-card-maths-pellach-unit-3-date,
    #user-card-maths-pellach-unit-4-date,
    #user-card-maths-pellach-unit-5-date {
        width: 34vw;
        height: auto;
        font-size: 3.5vw;
        padding: 1vw;
        border: 1px solid var(--c2);
        border-radius: 2vw;
        text-align: center;
        background-color: #f9f9f9;
        color: var(--c2);
        font-weight: 500;
        margin-right: 3vw;
        box-sizing: border-box;
    }
    
    /* Fix for date input inner box */
    input[type="date"] {
        width: 20vw;
        margin-left: 0;
        padding: 0 0vw;
    }
    
    .user-email-card {
        width: 90vw;
        height: auto;
        margin-left: 5vw;
        margin-top: 6vw;
        padding: 4vw 2vw;
        border-radius: 4vw;
    }
    
    .user-email-card h1 {
        font-size: 4.5vw;
    }
    
    .user-card-ffiseg-unit-1 .left-content,
    .user-card-ffiseg-unit-2 .left-content,
    .user-card-ffiseg-unit-3 .left-content,
    .user-card-ffiseg-unit-4 .left-content,
    .user-card-cemeg-unit-1 .left-content,
    .user-card-cemeg-unit-2 .left-content,
    .user-card-cemeg-unit-3 .left-content,
    .user-card-cemeg-unit-4 .left-content,
    .user-card-bioleg-unit-1 .left-content,
    .user-card-bioleg-unit-2 .left-content,
    .user-card-bioleg-unit-3 .left-content,
    .user-card-bioleg-unit-4 .left-content,
    .user-card-maths-unit-1 .left-content,
    .user-card-maths-unit-2 .left-content,
    .user-card-maths-unit-3 .left-content,
    .user-card-maths-unit-4 .left-content,
    .user-card-maths-pellach-unit-1 .left-content,
    .user-card-maths-pellach-unit-2 .left-content,
    .user-card-maths-pellach-unit-3 .left-content,
    .user-card-maths-pellach-unit-4 .left-content,
    .user-card-maths-pellach-unit-5 .left-content {
        gap: 2vw;
    }
}