.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 > .students                             { width: 240px; border-right: 1px solid #e5e5e5; flex-shrink: 0; }
.class-scores > .scores-grid > .students > .student                  { padding: 10px 15px; height: 52px; border-top: 1px solid #e5e5e5; font-size: 0; }
.class-scores > .scores-grid > .students > .student > .user > *      { display: inline-block; vertical-align: middle; }
.class-scores > .scores-grid > .students > .student > .user > .photo { width: 24px; height: 24px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.class-scores > .scores-grid > .students > .student > .user > .name  { color: #364a63; font-size: 14px; font-weight: bold; margin-left: 10px; width: calc(100% - 34px); }
.class-scores > .scores-grid > .students > .student > .score         { color: #2c415b; font-size: 12px; font-weight: 600; margin-top: 10px; line-height: 18px; }
.class-scores > .scores-grid > .students > .student > .score > span  { display: inline-block; margin-right: 10px; }
.class-scores > .scores-grid > .students > .student > .score > b     { color: #6fc076; font-size: 14px; font-weight: inherit; }

.class-scores > .scores-grid > .students > .search          { padding: 20px 15px 10px; height: 96px; position: relative; }

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

.class-scores > .scores-grid > .grid .ps-scrollbar-x-rail	{ opacity: 0.6; }

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

.class-scores > .scores-grid > .grid th > .article          { width: 160px; text-align: left; height: 54px; }
.class-scores > .scores-grid > .grid th > .article > .title { color: #282828; font-size: 12px; line-height: 18px; height: 36px; }
.class-scores > .scores-grid > .grid th > .article > .title { overflow: hidden; text-overflow: ellipsis; }
.class-scores > .scores-grid > .grid th > .article > .score        { color: #999; font-size: 12px; line-height: 18px; }
.class-scores > .scores-grid > .grid th > .article > .score > span { color: #1f3c77; font-weight: bold; }

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

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

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

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

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

.class-scores > .scores-grid > .grid th > .actions > .attachments             { color: #228dcf; min-width: 32px; }
.class-scores > .scores-grid > .grid th > .actions > .attachments.empty       { color: #999; }
.class-scores > .scores-grid > .grid th > .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 th > .actions > .attachments >  a > *    { display: inline-block; vertical-align: middle; }
.class-scores > .scores-grid > .grid th > .actions > .attachments >  a > i    { font-size: 18px; }
.class-scores > .scores-grid > .grid th > .actions > .attachments >  a > span { font-size: 14px; margin-left: 5px; }
.class-scores > .scores-grid > .grid th > .actions > .attachments >  a > span:empty { display: none; }

.class-scores > .scores-grid > .grid td                             { position: relative; padding: 0; height: 72px; border-right: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5; }
.class-scores > .scores-grid > .grid td                             { text-align: center; vertical-align: middle; 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; }
.class-scores > .scores-grid > .grid td .form-asg-grade > button:hover { cursor: pointer; 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-status          { color: #999; font-size: 14px; }
.class-scores > .scores-grid > .grid td .asg-date            { color: #999; font-size: 14px; }
.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; }
.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; }
.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; }


.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: 150px; }

/* period selector */

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

/* 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; }