/* admin list */

div.assignment-list-summary.READ {
    background: var(--color-exercise-read-background);
}
div.assignment-list-summary.ANSWER {
    background: var(--color-exercise-answer-background);
}
div.assignment-list-summary.DESCRIBE {
    background: var(--color-exercise-describe-background);
}
div.assignment-list-summary.DETERMINE {

}

div.assignment-list-summary {
    display: flex;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 5px;
    position: relative;
    font-size: 10pt
}

div.assignment-list-summary div.exercise {
    width: calc(100% - 230px);
    font-size: 10pt;
}
div.assignment-list-summary div.exercise a {
    display: block;
    font-size: 12pt;
    font-weight: bold;
}

div.assignment-list-summary div.deadline {
    position: absolute;
    top: 5px;
    right: 5px;
}

div.assignment-list-summary div.progress {
    position: absolute;
    bottom: 5px;
    right: 5px;
}

/* result summary */
div.assignment-result-summary {
    display: flex;
    margin-bottom: 10px;
    padding: 5px;
    border-radius: 5px;
    position: relative;
    font-size: 10pt;

    background-color: var(--color-verylightgray);
}

div.assignment-result-summary.completed {
    background: var(--color-message-success-bg);
}
div.assignment-result-summary.failed {
    background: var(--color-message-error-bg);
}
div.assignment-result-summary.trying,
div.assignment-result-summary.overdue {
    background: var(--color-message-warning-bg);
}

div.assignment-result-summary div.student {
    width: calc(100% - 230px);
    font-size: 10pt;
}

div.assignment-result-summary div.status {
    position: absolute;
    top: 5px;
    right: 5px;
}
div.assignment-result-summary div.notifications {
    position: absolute;
    bottom: 5px;
    right: 5px;

    text-align: right;
}

/* summary block */
.summary-block.assignment-summary.READ {
    background: color-mix(in srgb, var(--color-exercise-read) 20%, transparent);
    border-color: var(--color-exercise-read);
    color: var(--color-exercise-read-text);
}

.summary-block.assignment-summary.ANSWER {
    background-color: color-mix(in srgb, var(--color-exercise-answer) 20%, transparent);
    border-color: var(--color-exercise-answer);
    color: var(--color-exercise-answer-text);
}

.summary-block.assignment-summary.DESCRIBE {
    background-color: color-mix(in srgb, var(--color-exercise-describe) 20%, transparent);
    border-color: var(--color-exercise-describe);
    color: var(--color-exercise-describe-text);
}

.summary-block.assignment-summary.DETERMINE {
    background-color: color-mix(in srgb, var(--color-exercise-determine) 20%, transparent);
    border-color: var(--color-exercise-determine);
    color: var(--color-exercise-determine-text);
}

.summary-block p.title {
    margin: 0;
    padding: 0;
    font-size: 10pt;
    font-weight: 500;
}

.summary-block h3 {
    margin: 0;
    padding: 0;
    font-size: 12pt;
    font-weight: 500;
}

.summary-block table {
    margin: 20px 0 10px 0;
    padding: 0;
}
.summary-block table tr {
    padding: 3px 0;
    margin: 0;
    border: none;
}
.summary-block table tr td {
    padding: 0;
    margin: 0;
    border: none;
}

.summary-block table tr td.value {
    color: var(--color-headings);
    width: 70px;
    text-align: right;
}

.summary-block .type {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 8pt;
}

.summary-block .corner-top-left {
    position: absolute;
    top: 8px;
    left: 10px;
}

.summary-block iconify-icon {
    width: auto;
    height: auto;
}

.summary-block .button {
    display: block;
    margin: 0 auto;
}

.summary-block .button:hover {
    background-color: var(--color-cakephp-gray) !important;
    border-color: var(--color-cakephp-gray) !important;
}
.summary-block.assignment-summary.READ .button {
    background-color: var(--color-exercise-read);
    border-color: var(--color-exercise-read);
}
.summary-block.assignment-summary.ANSWER .button {
    background-color: var(--color-exercise-answer);
    border-color: var(--color-exercise-answer);
    color: black;
}
.summary-block.assignment-summary.DESCRIBE .button {
    background-color: var(--color-exercise-describe);
    border-color: var(--color-exercise-describe);
}

/* feedback */
.summary-block.feedback {
    width: 399px;
}

.summary-block.feedback button {
    float: right;
}

/* exercise */
.exercise .summary {
    margin: 0;
    padding: 0;
    font-size: 10pt;
}
.exercise .summary iconify-icon {
    display: inline-block;
    margin-right: 10px;
}

/* list assignments per classroom */
.classroom-assignments-summary {
    border-bottom: 1px solid var(--color-verylightgray);
    padding: 5px 0;
    margin-bottom: 10px;
}
.classroom-assignments-summary h3 {
    margin: 0;
    color: var(--color-links);
    font-size: 14pt;
}
.classroom-assignments-summary p.school {
    font-size: 10pt;
}

/* notifications */
div.notifications {
    display: inline-block;
    width: 200px;
}