.condition {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
}

    .condition .left {
        flex-grow: 0;
        flex-shrink: 0;
        margin-right : 2rem;
    }

    .condition .right {
        flex-grow: 1;
        flex-shrink: 1;
    }

@media (max-width: 768px) {
    .condition {
        display: block;
    }

        .condition .left {
            margin-bottom : 1rem;
            margin-right : 0;
        }

        .condition .right {
        }
}

/* 月曆  --------------------------------------------------------------------*/
.calendarContainer
{
    padding : 20px;
    border-radius : 10px;
    border : solid 1px #808080;
    background-color : #FFFFFF;
}


.calendar {
    border-style: none !Important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: smaller;
}

    .calendar > tbody > tr:first-child > td {
        padding : 0;
    }

.calendar .selectedDayCell
{

}

.calendar .weekendDayCell
{

}

.calendar .todayCell
{

}

.calendar .otherMonthDayCell
{

}

    .calendar .otherMonthDayCell a {
        color : #f1f1f1 !important;
    }

.calendar .dayCell
{
    padding: 0px;
}

.calendar .nextPrev
{
    text-align : center;
}

.calendar .dayHeader
{
    padding-left: 5px;
    padding-right: 5px;
}

.calendar .title
{
    font-weight: bolder;
    letter-spacing: 0.5em;
}

@media (max-width: 768px) {
    .calendar {
        margin-left : auto;
        margin-right : auto;
    }
}

/* 選擇班別的Table ---------------------------------------------------------*/
.allClasses {
    position : relative;
}

.allClasses .eachForm {
    
}

.allClasses .eachClass {
    font-weight : 700;
    margin-right : 2rem;
}

    .allClasses .selectedClass {
        font-size : 2rem;
    }

.issueHomework
{
   position : relative;
}


/* Common Table Style ===================================================== */
.commonTableStyle {
    width: 100%;
    border-collapse: collapse;
}

    .commonTableStyle td, .commonTableStyle th {
        border-style : solid;
        border-width : 1px;
        vertical-align: top;
        padding: 0.5em 1em;
    }

    .commonTableStyle th, .commonTableStyle .subject {
        font-weight: bold;
        font-size: 1.2em;
        line-height: 1.5em;
    }

    .commonTableStyle .subject
    {
        text-align : center;
    }

    .commonTableStyle .odd {
        background-color: rgba(255,255,255,1);
    }

    .commonTableStyle .even {
        background-color: rgba(255,255,255,0.9);
    }


    /* 所選日期發出之家課列表的日期標題 */
.issueDateHeading, .dueTableHeading, .sectionHeadingE {
    display: block;
    font-size: 1.5em;
    line-height: 1.2em;
    font-weight: bold;
    margin: 1em 0;
}

.homeworkIssue
{

}

.homeworkDue {
    background-color: rgba(255,255,255,0.9);
}

    .homeworkIssue .homeworkHandInDate, .homeworkDue .homeworkIssueDate {
        float: right;
    }

    .commonTableStyle .subjectClass {
        text-align: right;
        padding-right: 20px;
    }

.twoDueHomeworkTable {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: stretch;
}

    .twoDueHomeworkTable .left, .twoDueHomeworkTable .right {
        flex-grow: 1;
        flex-shrink: 1;
        flex-basis: 50%;
        padding-right: 0.5rem;
    }

@media (max-width: 768px) {
    .twoDueHomeworkTable {
        display: block;
    }

        .twoDueHomeworkTable .left {
            padding-bottom: 1rem;
        }

        .twoDueHomeworkTable .right {
            padding-left: 0;
        }
}

.remind {
    background-color: rgba(255,255,255,0.9);
}

.remind .rowNumber {
    width: 3em;
}

.remind .dueDate {
    width: 10em;
    text-align: right;
}

hr.lineBetweenParts
{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
}


/* ====================================== */

/* 家課圖片 */
.Homework_Picture
{
    max-width : 100%;
    width : 100%;
    height : auto;
}

/* 家課簡稱對照表 ============================================================== */

.allSubjectE
{
    margin-bottom : 2rem;
    position : relative;
}

    .allSubjectE .eachSubject {
        padding: 1em;
        border-right: solid 1px #ddd;
        border-left: solid 1px #ddd;
    }

        .allSubjectE .eachSubject .subjectName {
            font-weight: 900;
            font-size : 1.2rem;
            display : block;
            margin-bottom : 0.5rem;
        }

        .allSubjectE .eachSubject .eachExplain {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: flex-start;
            line-height : 2em;
        }

        .allSubjectE .eachSubject .eachExplain:hover {
            background-color: #f1f1f1;
        }

            .allSubjectE .eachSubject .eachExplain .shortName {

            }

            .allSubjectE .eachSubject .eachExplain .longName {
                padding-left : 2em;
            }

@media (max-width: 480px) {
    .allSubjectE {
        display: block;
    }
    .homework {
        display: flex;
        flex-direction: column;
    }

        .homework .homeworkHandInDate {
            order: 2;
            font-size: 0.8em;
        }

        .homework .homeworkText {
            order: 1;
        }
}

@media (min-width: 481px) and (max-width: 767px) {
    .allSubjectE {
        display: block;
    }
    .homework {
        display: flex;
        flex-direction: column;
    }

        .homework .homeworkHandInDate {
            order: 2;
            font-size: 0.8em;
        }

        .homework .homeworkText {
            order: 1;
        }
}

@media (min-width: 768px) and (max-width: 979px) {
    .allSubjectE {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content :flex-start;
        align-items: stretch;
    }

        .allSubjectE .eachSubject {
            flex-basis: 50%;
        }
}

@media (min-width: 980px) and (max-width:1199px) {
    .allSubjectE {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
    }

        .allSubjectE .eachSubject {
            flex-basis: 50%;
        }
}

@media (min-width: 1200px) and (max-width:1919px) {
    .allSubjectE {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
    }

        .allSubjectE .eachSubject {
            flex-basis: 33.33%;
        }
}

@media (min-width: 1920px) {
    .allSubjectE {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
    }

        .allSubjectE .eachSubject
        {
            flex-basis : 33.33%;
        }
}