.class-scores > .scores-grid      { display: flex; flex-direction: row; }
.class-scores > .scores-grid      { margin-top: 20px; padding: 0; background-color: #fcfcfc; }
.class-scores > .scores-grid  > * { background-color: #fff; }


.class-scores > .scores-grid > .grid                           { position: relative; overflow-x: auto; overflow-y: hidden; }

.class-scores > .scores-grid > .grid .sticky-l                 { position: sticky; left: 0; background-color: #fff; z-index: 3; box-shadow: 1px 0 0 #e5e5e5; }

.class-scores > .scores-grid > .grid .search                   { box-sizing: border-box; width: 240px; padding: 10px; text-align: left; height: 126px; }

.class-scores > .scores-grid > .grid .student                  { box-sizing: border-box; width: 240px; padding: 10px; text-align: left; }

.class-scores > .scores-grid > .grid .student > .user          { display: flex; align-items: center; }
.class-scores > .scores-grid > .grid .student > .user > .photo { flex-grow: 0; flex-shrink: 0; }
.class-scores > .scores-grid > .grid .student > .user > .name  { flex-grow: 1; flex-shrink: 1; }
.class-scores > .scores-grid > .grid .student > .user > .photo { width: 24px; height: 24px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.class-scores > .scores-grid > .grid .student > .user > .name  { color: #364a63; font-size: 14px; font-weight: 600; margin-left: 5px; }
.class-scores > .scores-grid > .grid .student > .score         { color: #2c415b; font-size: 12px; font-weight: 600; margin-top: 5px; line-height: 18px; }
.class-scores > .scores-grid > .grid .student > .score > span  { display: inline-block; margin-right: 10px; }
.class-scores > .scores-grid > .grid .student > .score > b     { color: #6fc076; font-size: 14px; font-weight: inherit; }



.class-scores > .scores-grid > .grid th                     { border-right: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; padding: 0; font-weight: normal; }
.class-scores > .scores-grid > .grid th:target              { background-color: #E5EFFF; }

.class-scores > .scores-grid > .grid .asg-info                     { position: relative; padding: 20px 10px 10px; box-sizing: border-box; min-height: 96px; }
.class-scores > .scores-grid > .grid .asg-info > .article          { width: 160px; text-align: left; height: 54px; }
.class-scores > .scores-grid > .grid .asg-info > .article > .title { color: #282828; font-size: 12px; line-height: 18px; height: 36px; }
.class-scores > .scores-grid > .grid .asg-info > .article > .title { overflow: hidden; text-overflow: ellipsis; }
.class-scores > .scores-grid > .grid .asg-info > .article > .score        { color: #999; font-size: 12px; line-height: 18px; }
.class-scores > .scores-grid > .grid .asg-info > .article > .score > span { color: #1f3c77; font-weight: bold; }

.class-scores > .scores-grid > .grid .asg-info > .article > .pubdt        { display: none; color: #999; font-size: 12px; line-height: 18px; }
.class-scores > .scores-grid > .grid .asg-info > .article > .pubdt > *    { display: inline-block; vertical-align: middle; }
.class-scores > .scores-grid > .grid .asg-info > .article > .pubdt > span:first-of-type { margin-right: 5px; }
.class-scores > .scores-grid > .grid .asg-info > .article > .pubdt   i    { font-size: 14px; margin-top: 4px; }

.class-scores > .scores-grid > .grid .asg-info > .article-meta          { position: absolute; right: 0; top: 0; }
.class-scores > .scores-grid > .grid .asg-info > .article-meta > .date  { line-height: 20px; color: #999; font-size: 12px; padding: 0 3px; }

.class-scores > .scores-grid > .grid .asg-info > .article-meta > .icon-asg-type { display: none; width: 20px; height: 20px; }

.class-scores > .scores-grid > .grid .asg-info > .actions                  { margin-top: 10px; height: 32px; display: flex; justify-content: space-between; align-items: center; }
.class-scores > .scores-grid > .grid .asg-info > .actions > *              { max-width: 80px; font-size: 12px; }
.class-scores > .scores-grid > .grid .asg-info > .actions > .settings      { width: 32px; text-align: center; font-size: 18px; color: #228dcf; line-height: 32px; }

.class-scores > .scores-grid > .grid .asg-info > .actions > .grade-scale              { margin: 0 auto 0 0; padding: 0; }
.class-scores > .scores-grid > .grid .asg-info > .actions > .grade-scale       button { width: 32px; border: none; background-color: transparent; cursor: pointer; }
.class-scores > .scores-grid > .grid .asg-info > .actions > .grade-scale       button { color: #228dcf; text-align: center; font-size: 18px; line-height: 32px; }
.class-scores > .scores-grid > .grid .asg-info > .actions > .grade-scale.empty button { color: #999; }

.class-scores > .scores-grid > .grid .asg-info > .actions > .attachments             { color: #228dcf; min-width: 32px; }
.class-scores > .scores-grid > .grid .asg-info > .actions > .attachments.empty       { color: #999; }
.class-scores > .scores-grid > .grid .asg-info > .actions > .attachments >  a        { display: block; padding: 0 5px; color: inherit; font-size: 0; text-align: center; line-height: 32px; text-decoration: none; }
.class-scores > .scores-grid > .grid .asg-info > .actions > .attachments >  a > *    { display: inline-block; vertical-align: middle; }
.class-scores > .scores-grid > .grid .asg-info > .actions > .attachments >  a > i    { font-size: 18px; }
.class-scores > .scores-grid > .grid .asg-info > .actions > .attachments >  a > span { font-size: 14px; margin-left: 5px; }
.class-scores > .scores-grid > .grid .asg-info > .actions > .attachments >  a > span:empty { display: none; }


.class-scores > .scores-grid > .grid td                             { position: relative; padding: 0; border-right: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; }
.class-scores > .scores-grid > .grid td                             { text-align: center; vertical-align: top; color: #bcbcbc; font-size: 0; }
.class-scores > .scores-grid > .grid td > .score > *                { display: inline-block; vertical-align: middle; }
.class-scores > .scores-grid > .grid td > .score > span             { min-width: 40px; text-align: center; font-size: 24px; font-weight: 600; }
.class-scores > .scores-grid > .grid td > .score > form             { width: 150px; }
.class-scores > .scores-grid > .grid td > .score > form             { width: 150px; }
.class-scores > .scores-grid > .grid td > .extra                    { font-size: 12px; }
.class-scores > .scores-grid > .grid td > .display-grade            { margin-bottom: 5px; }


.class-scores > .scores-grid > .grid td .form-asg-grade          { margin: 0; padding: 0; height: 100%; }
.class-scores > .scores-grid > .grid td .form-asg-grade > button { margin: 0; padding: 0; width: 100%; height: 100%; border: none; background-color: transparent; cursor: pointer; }
.class-scores > .scores-grid > .grid td .form-asg-grade > button { display: flex; flex-direction: column; justify-content: center; min-height: 84px; }
.class-scores > .scores-grid > .grid td .form-asg-grade > button:hover { background-color: #f8f8f8; }

.class-scores > .scores-grid > .grid td .asg-exempt      { position: absolute; right: 0; top: 0; z-index: 2; }
.class-scores > .scores-grid > .grid td .asg-exempt      { font-size: 18px; color: #657FAC; padding: 5px; }
.class-scores > .scores-grid > .grid td .asg-exempt      { display: none; }
.class-scores > .scores-grid > .grid td .asg-exempt.show { display: block; }

.class-scores > .scores-grid > .grid td .asg-ack         { position: absolute; left: 0; top: 0; z-index: 2; }
.class-scores > .scores-grid > .grid td .asg-ack         { font-size: 18px; color: #cccccc; padding: 5px; }
.class-scores > .scores-grid > .grid td .asg-ack         { display: none; }
.class-scores > .scores-grid > .grid td .asg-ack.show    { display: block; }
.class-scores > .scores-grid > .grid td .asg-ack     > .ack0 { display: block; }
.class-scores > .scores-grid > .grid td .asg-ack     > .ack1 { display: none; }
.class-scores > .scores-grid > .grid td .asg-ack.ack > .ack0 { display: none; }
.class-scores > .scores-grid > .grid td .asg-ack.ack > .ack1 { display: block; color: #657FAC; }

.class-scores > .scores-grid > .grid td .asg-status          { color: #999; font-size: 14px; line-height: 21px; }
.class-scores > .scores-grid > .grid td .asg-date            { color: #999; font-size: 12px; line-height: 18px; }
.class-scores > .scores-grid > .grid td .asg-grade           { display: flex; align-items: center; justify-content: space-evenly; }
.class-scores > .scores-grid > .grid td .asg-grade > *       { color: #282828; font-size: 18px; line-height: 27px; }
.class-scores > .scores-grid > .grid td .asg-grade > *.green { color: #10B163; }
.class-scores > .scores-grid > .grid td .asg-grade > *.red   { color: #F83C3C; }
.class-scores > .scores-grid > .grid td .asg-grade small     { color: #999; font-size: 12px; line-height: 18px; }
.class-scores > .scores-grid > .grid td .asg-grade .hide     { display: none; }
.class-scores > .scores-grid > .grid td .asg-score:empty     { display: none; }
.class-scores > .scores-grid > .grid td .asg-files           { color: #228dcf; font-size: 14px; line-height: 21px; }
.class-scores > .scores-grid > .grid td .asg-comment         { color: #999; font-size: 12px; line-height: 18px; }
.class-scores > .scores-grid > .grid td .asg-comment         { max-width: 160px; margin: 0 10px; }
.class-scores > .scores-grid > .grid td .asg-comment         { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-scores > .scores-grid > .grid td .asg-comment         { display: block; }
.class-scores > .scores-grid > .grid td .asg-comment:empty   { display: none; }


.class-scores > .scores-grid > .grid *.hide                           { display: none; }
.class-scores > .scores-grid > .grid *.exempt                         { background-color: #f8f8f8; }

.class-scores > .scores-grid > .grid *.external > .actions              { text-align: right; }
.class-scores > .scores-grid > .grid *.external > .actions .button      { display: none; }
.class-scores > .scores-grid > .grid *          > .actions .grade-scale { display: none; }
.class-scores > .scores-grid > .grid *.external > .actions .grade-scale { display: initial; }
.class-scores > .scores-grid > .grid *          > .actions .attachments { display: none; }
.class-scores > .scores-grid > .grid *.external > .actions .attachments { display: initial; }

.class-scores > .scores-grid > .grid *.publish > .article > .score { display: none; }
.class-scores > .scores-grid > .grid *.publish > .article > .pubdt { display: block; }


/* new assignment */

.external-asg           { margin-left: 10px; }
.external-asg > .button { width: auto; padding: 0 10px; }


/* export scores */

.scores-export                         { margin-left: 10px; }
.scores-export > .classowl-input-frame { width: 130px; }

/* period selector */

.scores-period                         { margin-left: 10px; }
.scores-period > .classowl-input-frame { width: 180px; }

/* scores calc */

.scores-calc          { margin-left: 10px; }
.scores-calc > button { width: 120px; }

/* scores calc modal */

.modal-scores-calc fieldset                    { margin: 0 -5px; }
.modal-scores-calc .form-input                 { display: inline-block; margin: 5px; }
.modal-scores-calc .form-input label           { position: relative; overflow: visible; margin: 0; padding: 6px 0; }
.modal-scores-calc .form-input label           { color: #657FAC; font-size: 12px; line-height: 18px; font-weight: 500; }
.modal-scores-calc .form-input.single          { width: calc(25% - 10px); }
.modal-scores-calc .form-input.double          { width: calc(50% - 10px); }
.modal-scores-calc .form-input.full            { width: calc(100% - 10px); }

@media screen and (max-width: 800px) {
    .modal-scores-calc .form-input.single      { width: calc(50% - 10px); }
    .modal-scores-calc .form-input.double      { width: calc(100% - 10px); }
}

.modal-scores-calc .ctrls     { text-align: right; margin-top: 20px; }
.modal-scores-calc .ctrls > * { display: inline-block; vertical-align: middle; width: 120px; }
.modal-scores-calc .ctrls > *:last-child { margin-left: 10px; }