// Main card content
.course-card-content.main
{
    // Main color
    background: white;

    // Alignment
    display: block;

    padding: 20px;
    height: 50px;
}

#block-info
{
    // Align left
    text-align: left;
    float: left;

    #name
    {
        overflow: hidden;
        font-size: 22px;
        color: var(--main);
    }

    #teacher
    {
        font-size: 12px;
        color: #999999;
        font-style: italic;
    }
}

#block-grade
{
    // Align right
    text-align: right;
    float: right;

    // Adjust position
    margin-top: -2px;
    margin-left: 10px;

    #grade
    {
        font-size: 21px;
    }

    #updates
    {
        font-size: 14px;

        #unread-number
        {
            display: inline-block;
            width: 20px;
            text-align: center;
            border-radius: 5px;

            padding-left: 3px;
            padding-right: 3px;

            margin-right: 3px;
        }

        #unread-text
        {
            font-style: italic;
        }
    }

    #updates.unread
    {
        #unread-number
        {
            background: var(--unread);
            color: white;
        }

        #unread-text
        {
            color: var(--unread);
        }
    }

    #updates.none
    {
        color: #999999;
        #unread-number
        {
            background: #eeeeee;
        }
    }
}

#block-term-grades
{
    // Align right
    width: auto;
    float: right;
    margin-right: 10px;

    color: gray;

    #term, #term-numeric
    {
        font-size: 11px;
        color: #b3b3b3;
    }

    #term-letter
    {
        font-size: 14px;
    }
}
