.grade-frame { min-width: 600px; overflow: hidden; }

/* header */
.grade-frame > .article-header               { background-color: #1f3c77; color: #fff; font-size: 0; padding: 20px 30px; }
.grade-frame > .article-header.deleted       { background-color: #909090; }

.grade-frame > .article-header .picture      { float: left; width: 65px; height: 65px; }
.grade-frame > .article-header .picture img  { display: block; width: 100%; height: 100%; }
.grade-frame > .article-header .extra        { float: right; font-size: 0; width: 320px; }
.grade-frame > .article-header .extra        { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
.grade-frame > .article-header .extra > span { display: inline-block; font-size: 12px; font-weight: 600; text-transform: uppercase; line-height: 21px; width: 160px; }
.grade-frame > .article-header .inner        { margin: 0 340px 0 85px; }
.grade-frame > .article-header .inner .title { font-size: 18px; font-weight: bold; margin-bottom: 10px; }
.grade-frame > .article-header .inner .descr { font-size: 14px; }

.grade-frame > .article-header .inner .params     { margin-top: 10px; }
.grade-frame > .article-header .inner .params > * { display: inline-block; vertical-align: middle; margin-right: 20px; }

.grade-frame > .article-header .inner .params > .printing,
.grade-frame > .article-header .inner .params > .grade-rubrics { display: none; width: auto; padding: 0 10px; }

.grade-frame > .article-header .inner .params > .printing.can-print,
.grade-frame > .article-header .inner .params > .grade-rubrics.can-rubric { display: inline-block; }


@media screen and (max-width: 1024px) {
	.grade-frame > .article-header .extra    { width: 160px; }
	.grade-frame > .article-header .extra    { -moz-column-count: 1; -webkit-column-count: 1; column-count: 1; }
	.grade-frame > .article-header .inner    { margin-right: 180px; }
}

/* grade mode */

.grade-frame .grade-mode               { float: right; margin-top: -50px; font-size: 0; }
.grade-frame .grade-mode .spacer       { margin-right: 20px; }
.grade-frame .grade-mode a             { display: inline-block; line-height: 30px; position: relative; }
.grade-frame .grade-mode a      > i    { display: inline-block; vertical-align: middle; font-size: 18px; margin-right: 5px; }
.grade-frame .grade-mode a      > span { display: inline-block; vertical-align: middle; font-size: 14px; }
.grade-frame .grade-mode a.back > i    { font-size: 24px; margin-right: 0; margin-left: 10px; }
.grade-frame .grade-mode a:hover> span { text-decoration: underline; }
.grade-frame .grade-mode .info         { display: inline-block; vertical-align: middle; font-size: 14px; margin-left: 10px; color: #999; }

.grade-frame .grade-mode .toggler         { display: inline-block; vertical-align: middle; overflow: hidden; margin: 0 10px; }
.grade-frame .grade-mode .toggler         { border-radius: 12px; width: 54px; height: 24px; background-color: #1f3c77; }
.grade-frame .grade-mode .toggler .bullet { display: block; margin: 2px auto; }
.grade-frame .grade-mode .toggler .bullet { border-radius: 10px; width: 20px; height: 20px; background-color: #fff; }

.grade-frame .grade-mode .switch.a .toggler .bullet { margin-left: 2px; }
.grade-frame .grade-mode .switch.b .toggler .bullet { margin-right: 2px; }

.grade-frame .grade-mode .switch.a span.b { opacity: 0.5; }
.grade-frame .grade-mode .switch.b span.a { opacity: 0.5; }


/* grade students */

.grade-frame         .grade-header         { position: relative; display: flex; justify-content: space-between; }
.grade-frame.floater .grade-header         { position: fixed; z-index: 100; top: 60px; left: 102px; right: 40px; min-width: 600px; }
.grade-frame.floater .assignment           { margin-top: 95px; margin-bottom: 95px; }

.grade-frame .students                     { position: relative; padding: 15px; line-height: 45px; white-space: nowrap; }

.grade-frame .students > .navigate         { display: inline-block; vertical-align: middle; border-radius: 3px; width: 24px; height: 24px; color: #fff; background-color: #228dcf; text-align: center; font-size: 21px; line-height: 22px; }
.grade-frame .students > .navigate.prev    { margin-right: 10px; }
.grade-frame .students > .navigate.next    { margin-left: 20px; }

.grade-frame .students > .student               { position: relative; z-index: 1; margin-right: -10px; }
.grade-frame .students > .student               { display: inline-block; vertical-align: middle; }
.grade-frame .students > .student > .user-photo { display: inline-block; vertical-align: middle; border-radius: 50%; overflow: hidden; }
.grade-frame .students > .student > .user-photo { border: 1px solid #fff; background: no-repeat center; background-size: cover; }
.grade-frame .students > .student > .user-photo { width: 35px; height: 35px;  }
.grade-frame .students > .student.selected             { z-index: 2; margin: -3px -10px -3px 0; }
.grade-frame .students > .student.selected > .user-photo { width: 51px; height: 51px; }

.grade-frame .students > .student          > .user-name { font-size: 12px; font-weight: 600; color: #228dcf; }
.grade-frame .students > .student          > .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grade-frame .students > .student          > .user-name { display: inline-block; max-width: 0; vertical-align: middle; }
.grade-frame .students > .student.selected > .user-name { display: inline-block; max-width: 150px; margin: 0 15px 0 5px; }

.grade-frame .students       .dropdown { position: absolute; z-index: 20; border-radius: 5px; padding: 0; border: 1px solid #d8dde6; }
.grade-frame .students       .dropdown { display: none; margin-top: 10px; left: 0; /*transform: translate(-50%, 0); left: 50%;*/ }
.grade-frame .students:hover .dropdown { display: block; }

.grade-frame .students .dropdown:before { content: ""; width: 15px; height: 15px; background-color: #fff; }
.grade-frame .students .dropdown:before { position: absolute; right: 50%; top: 0; transform: translate(+50%, -50%) rotate(45deg); }
.grade-frame .students .dropdown:before { border-left: 1px solid #d8dde6; border-top: 1px solid #d8dde6; }

.grade-frame .students .dropdown > .inner                        { position: relative; overflow: hidden; max-height: 300px; padding: 3; }
.grade-frame .students .dropdown > .inner > .student             { border-bottom: 1px solid #d8dde6; white-space: nowrap; min-width: 330px; }
.grade-frame .students .dropdown > .inner > .student:last-child  { border-bottom: none; }
.grade-frame .students .dropdown > .inner > .student > *         { display: inline-block; vertical-align: middle; font-size: 12px; font-weight: 600; }

.grade-frame .students .dropdown > .inner > .student > .user-photo { border-radius: 50%; margin: 0 10px; width: 30px; height: 30px; }
.grade-frame .students .dropdown > .inner > .student > .user-photo { background: no-repeat center; background-size: cover; }
.grade-frame .students .dropdown > .inner > .student > .user-name  { color: #228dcf; }
.grade-frame .students .dropdown > .inner > .student > .user-name  { width: 200px; overflow: hidden; text-overflow: ellipsis; }

.grade-frame .students .dropdown > .inner > .student > .user-status { border-radius: 3px; margin: 0 10px; }
.grade-frame .students .dropdown > .inner > .student > .user-status { float: right; text-align: right; color: #999; }

.grade-frame .students .dropdown > .inner > .student > .user-status.state-working  { margin-top: 11px; background-color: #228dcf; color: #fff; width: 40px; line-height: 24px; padding: 0 10px; text-align: center; }
.grade-frame .students .dropdown > .inner > .student > .user-status.state-finished { margin-top: 11px; background-color: #a2d053; color: #fff; width: 40px; line-height: 24px; padding: 0 10px; text-align: center; }
.grade-frame .students .dropdown > .inner > .student > .user-status.state-graded   { color: #1f3c77; }

.grade-options                               { position: relative; padding: 15px; line-height: 45px; text-align: right; }
.grade-options .drop-button                  { display: none; }
.grade-options .drop-button                  { font-size: 14px; color: #228dcf; cursor: pointer; padding: 0 10px; white-space: nowrap; }
.grade-options .drop-button i                { font-size: 18px; margin-left: 10px; }
.grade-options .drop-button > *              { display: inline-block; vertical-align: middle; }
.grade-options .cikumas-checkbox             { display: inline-block; vertical-align: middle; margin-right: 20px; }
.grade-options .cikumas-checkbox:last-child  { margin-right: 0; }
.grade-options .cikumas-checkbox span        { font-size: 12px; font-weight: 600; color: #228dcf; }

@media screen and (max-width: 1280px) {
    .grade-options .drop-button     { display: block; }

    .grade-options       .drop-list { position: absolute; z-index: 20; right: 0; margin-top: 10px; }
    .grade-options       .drop-list { padding: 10px 20px; border: 1px solid #d8dde6; border-radius: 5px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
    .grade-options       .drop-list > * { display: block; white-space: nowrap; text-align: left; }

    .grade-options       .drop-list { display: none; }
    .grade-options:hover .drop-list { display: block; }
    .grade-options       .drop-list:before { content: ""; width: 15px; height: 15px; background-color: #fff; }
    .grade-options       .drop-list:before { position: absolute; right: 50%; top: 0; transform: translate(+50%, -50%) rotate(45deg); }
    .grade-options       .drop-list:before { border-left: 1px solid #d8dde6; border-top: 1px solid #d8dde6; }
}

.grade-mark                { display: inline-block; padding: 15px; line-height: 45px; color: #228dcf; white-space: nowrap; }
.grade-mark > *            { display: inline-block; vertical-align: middle; margin-right: 10px; }
.grade-mark > *:last-child { margin-right: 0; }

.grade-mark > .icon { width: 20px; height: 20px; margin-top: 2px; }
.grade-mark > .mark { font-size: 22px; font-weight: 500; }
.grade-mark > .text { font-size: 14px; }

.grade-mark      > .icon { display: none; }
.grade-mark.done > .icon { display: inline-block; }
.grade-mark.none         { display: none; }


/* grade summary */

.grade-summary               { margin-top: 15px; overflow: auto; }
.class-grades .grade-summary { margin-top: 0; box-shadow: none; }

.grade-summary h3            { padding: 20px; }
.grade-summary .graded       { display: inline-block; margin-left: 20px; text-align: right; font-size: 14px; }

.grade-summary table         { min-width: 100%; border-collapse: collapse; border: none; font-size: 14px; }

.grade-summary table tr > *  { padding: 10px 20px; font-size: 14px; line-height: 21px; white-space: nowrap; }
.grade-summary table tr > th { color: #999; font-weight: normal; text-align: left; }
.grade-summary table tr > td { color: #282828; border-top: 1px solid #e5e5e5; }

.grade-summary table th[data-type]:hover { background-color: #f8f8f8; cursor: pointer; }
.grade-summary table th       > i        { display: none; color: #228dcf; margin-left: 5px; }
.grade-summary table th.asc   > i.asc    { display: inline-block; }
.grade-summary table th.dsc   > i.dsc    { display: inline-block; }


.grade-summary .user-photo { display: inline-block; vertical-align: middle; width: 30px; height: 30px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.grade-summary .user-name  { display: inline-block; vertical-align: middle; margin-left: 5px; }
.grade-summary .ontime i   { display: block; width: 25px; height: 25px; }
.grade-summary .completion { display: inline-block; width: 90px; height: 30px; line-height: 30px; border-radius: 3px; color: #fff; text-align: center; }
.grade-summary .score      { display: inline-block; font-size: 14px; }
.grade-summary .score.scored { font-weight: 600; }

.grade-summary tr          .switch-col > a    { display: block; }
.grade-summary tr          .switch-col > span { display: none; }
/*.grade-summary tr.inactive .switch-col > a    { display: none; }
.grade-summary tr.inactive .switch-col > span { display: block; }*/

/*.grade-summary .revisit-comment { color: #999; }*/


/* grade assignment chapters */

.grade-new.assignment                           { position: relative; min-height: 250px; }

.grade-new.assignment .article                  { width: calc(100% - 240px); }
.grade-new.assignment .article > .item          { margin: 0 0 15px 0; overflow: hidden; }
.grade-new.assignment .article > .item:before   { display: none; }
.grade-new.assignment .article > .item:after    { display: none; }
.grade-new.assignment .article > .item .text    { padding: 0; overflow: visible; }
.grade-new.assignment .article > .item .text h1 { margin: 0; }

.grade-new.assignment .stickers                        { top: 0px; right: 0; }
.grade-new.assignment .article .stickers               { display: block; float: right; width: 230px; min-height: 10px; }
.grade-new.assignment .article .stickers               { position: relative; top: auto; right: auto; bottom: auto; }
.grade-new.assignment .article .stickers .item         { position: relative; top: auto; left: auto; margin-bottom: 10px; }
.grade-new.assignment .article .stickers .item.note.p2 { margin-left: 0; width: 230px; }
.grade-new.assignment .article .stickers .item.note.p3 { margin-left: 0; width: 230px; }
.grade-new.assignment .article .stickers .item .close  { display: none; }
.grade-new.assignment .article .stickers-end           { clear: both; }

/* grade and next */

.grade-new.assignment .article > .grade-and-next                 { margin: 15px 0 0 auto; font-size: 0; text-align: right; }
.grade-new.assignment .article > .grade-and-next > *             { display: inline-block; vertical-align: top; }
.grade-new.assignment .article > .grade-and-next > * > *         { display: inline-block; vertical-align: top; margin-left: 20px; line-height: 36px; }

.grade-new.assignment .article > .grade-and-next .cikumas-switch            { text-align: left; }
.grade-new.assignment .article > .grade-and-next .feedback-input            { width: 230px; }
.grade-new.assignment .article > .grade-and-next .feedback-input > textarea { resize: none; height: 84px; line-height: 21px; }

.grade-new.assignment .article > .grade-and-next .grade-input    { width: 230px; }
.grade-new.assignment .article > .grade-and-next button          { width: 150px; }

.grade-new.assignment .article > .grade-and-next .hint         { display: block; max-width: 400px; margin: 5px 0 0 auto; color: #1B1A1A; white-space: initial; line-height: 18px; font-size: 12px; text-align: left; }
.grade-new.assignment .article > .grade-and-next .hint > .mark { font-size: 22px; }

@media screen and (max-width: 1500px) {
    .grade-new.assignment .article > .grade-and-next > *             { display: block;  }
    .grade-new.assignment .article > .grade-and-next .cikumas-switch { min-width: 200px; }
    .grade-new.assignment .article > .grade-and-next .feedback-input { margin-right: 170px; }
}

/* rubrics block */

.grade-new.assignment .article > .grade-rubrics-block { color: #282828; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }

.grade-rubrics-block                                { position: relative; overflow: hidden; }
.grade-rubrics-block table                          { border-collapse: collapse; min-width: 100%; }
.grade-rubrics-block table       tr > *             { border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; }
.grade-rubrics-block table       tr > *:first-child { border-left: none; }
.grade-rubrics-block table thead td                 { font-size: 14px; padding: 8px; text-align: center; font-weight: bold; }
.grade-rubrics-block table tbody th                 { vertical-align: middle; min-width: 100px; text-align: left; }
.grade-rubrics-block table tbody td                 { vertical-align: middle; min-width: 150px; min-height: 50px; }
.grade-rubrics-block table tbody th                 { font-weight: normal; }
.grade-rubrics-block table       th                 { font-size: 14px; padding: 8px; }
.grade-rubrics-block table       td                 { padding: 0; }

.grade-rubrics-block table       td label                          { height: 120px; overflow: hidden; }
.grade-rubrics-block table       td input         + label          { border-left: 4px solid transparent; }
.grade-rubrics-block table       td input:checked + label          { border-left: 4px solid #228dcf; }
.grade-rubrics-block table       td input:checked:disabled + label { border-left: 4px solid #999; }
.grade-rubrics-block table       td input:disabled + label         { cursor: default; }

.grade-rubrics-block table       td .cikumas-radiobox.left label:before { left: 10px; }
.grade-rubrics-block table       td .cikumas-radiobox.left label:after  { left: 13px; }
.grade-rubrics-block table       td .cikumas-radiobox.left label span   { position: absolute; transform: translate(0, -50%); top: 50%; left: 10px; right: 10px; }
.grade-rubrics-block table       td .cikumas-radiobox.left label span   { overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap; }
.grade-rubrics-block table       td .cikumas-radiobox.left label span   { font-size: 12px; line-height: 18px; max-height: 90px; }

/* modal rubrics */

.modal-form.modal-grade-rubrics .container                    { width: 900px; }

.modal-grade-rubrics .inner > div                             { margin: 20px -25px -25px; position: relative; overflow: hidden; }
.modal-grade-rubrics .legend > table                          { border-collapse: collapse; min-width: 100%; }
.modal-grade-rubrics .legend > table       tr > *             { border-top: 1px solid #e5e5e5; border-left: 1px solid #e5e5e5; }
.modal-grade-rubrics .legend > table       tr > *:first-child { border-left: none; }
.modal-grade-rubrics .legend > table thead td                 { text-align: center; font-weight: bold; }
.modal-grade-rubrics .legend > table tbody th                 { vertical-align: top;min-width: 100px;  text-align: left; }
.modal-grade-rubrics .legend > table tbody td                 { vertical-align: top; min-width: 100px; min-height: 50px; }
.modal-grade-rubrics .legend > table       th                 { font-size: 14px; padding: 4px 8px; }
.modal-grade-rubrics .legend > table       td                 { font-size: 14px; padding: 4px 8px; overflow: hidden; text-overflow: ellipsis; white-space: pre-wrap; }

@media screen and (max-width: 1024px) {
    .modal-form.modal-grade-rubrics .container { width: 600px; }
}

@media screen and (max-width: 640px) {
    .modal-form.modal-grade-rubrics .container { width: 300px; }
}

@media screen and (max-width: 400px) {
    .modal-form.modal-grade-rubrics .container { width: 100%; }
    .modal-grade-rubrics table                 { border-bottom: 1px solid #e5e5e5; }
}



/* markup */

.grade-new.assignment cikumark { position: relative; }
.grade-new.assignment .cite    { position: absolute; z-index: 10; right: -8px; top: -8px; margin: 0; padding: 0; }
.grade-new.assignment .cite    { background-color: #fff !important; color: #000 !important; border: 1px solid #999 !important; border-radius: 50%; }
.grade-new.assignment .cite    { width: 16px; height: 16px; line-height: 16px; text-align: center; font-size: 12px; text-indent: 0; }


/* options */

.grade-new.assignment               .article > .item.chapter   { display: none; }
.grade-new.assignment.show-chapters .article > .item.chapter   { display: block; }

.grade-new.assignment               .article > .stickers       { display: none; }
.grade-new.assignment.show-chapters .article > .stickers       { display: block; }

.grade-new.assignment               .article  { width: auto; }
.grade-new.assignment.show-chapters .article  { width: calc(100% - 275px); }

.grade-new.assignment             .article > .item.question.graded { display: none; }
.grade-new.assignment.show-graded .article > .item.question.graded { display: block; }


/* grade assignment questions */

.grade-new                                                                 { margin-top: 15px; }
.grade-new .article .question                                              { border-top: 1px solid #e5e5e5; }
.grade-new .article .question .question-header .title                      { min-width: 270px; margin-bottom: 20px; }
.grade-new .article .question .question-header .right-part                 { display: none; float: right; width: 270px; margin: 0 0 20px 20px; }
.grade-new .article .question .question-header .result                     { position: relative; }
.grade-new .article .question .question-header .result input[type=radio]   { display: none; }
.grade-new .article .question .question-header .result label               { position: relative; width: 33.33%; text-align: center; margin: 0; padding: 3px 0; text-transform: uppercase; font-size: 12px; cursor: pointer; z-index: 2; background-color: transparent; line-height: 23px; }
.grade-new .article .question .question-header .result label:hover         { text-decoration: none; }
.grade-new .article .question .question-header .result label:first-of-type { border-top-left-radius: 3px; border-bottom-left-radius: 3px; float: left; }
.grade-new .article .question .question-header .result label:last-of-type  { border-top-right-radius: 3px; border-bottom-right-radius: 3px; }
.grade-new .article .question .question-header .result .border             { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 3px; border: 1px solid #bababa; z-index: 1; }

.grade-new .article .question .question-header .result                      { font-size: 0; }
.grade-new .article .question .question-header .result label                { font-size: 12px; display: inline-block; color: #909090; }
.grade-new .article .question .question-header .result label                { color: #909090; box-sizing: border-box; }
.grade-new .article .question .question-header .result label:nth-of-type(2) { border-right: 1px solid; border-left: 1px solid; }

/* wrong answer checked */
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(1):checked ~ label.wrong   { color: white; background-color: #ef4949; }
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(1):checked ~ label.neutral { color: #ef4949; background-color: transparent; border-color: #ef4949; }
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(1):checked ~ label.right   { color: #ef4949; background-color: transparent; }
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(1):checked ~ .border       { border: 1px solid #ef4949; }

/* neutral answer checked */
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(2):checked ~ label.wrong   { color: #999; background-color: transparent; }
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(2):checked ~ label.neutral { color: #fff; background-color: #999; border-color: #999; }
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(2):checked ~ label.right   { color: #999; background-color: transparent; }
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(2):checked ~ .border       { border: 1px solid #999; }

/* right answer checked */
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(3):checked ~ label.wrong   { color: #a2d053; background-color: transparent; }
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(3):checked ~ label.neutral { color: #a2d053; background-color: transparent; border-color: #a2d053; }
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(3):checked ~ label.right   { color: white; background-color: #a2d053; }
.grade-new .article .question .question-header .result input[type=radio]:nth-of-type(3):checked ~ .border       { border: 1px solid #a2d053; }

.grade-new .article .question .question-header .points-wrap       { margin-top: 10px; font-size: 0; }
.grade-new .article .question .question-header .points-wrap > *   { display: inline-block;  vertical-align: middle; }
.grade-new .article .question .question-header .points-wrap input { padding: 4px; border: 1px solid #ccc; font-size: 14px; border-radius: 3px; }
.grade-new .article .question .question-header .points-wrap span  { font-size: 14px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.grade-new .article .question .question-header .points-wrap input:first-child { width: calc(20% - 5px); }
.grade-new .article .question .question-header .points-wrap span              { width: 30%; margin: 0 5px; }
.grade-new .article .question .question-header .points-wrap input:last-child  { width: calc(50% - 5px); }

.grade-new .article .question.result-good    { background-color: white; }
.grade-new .article .question.result-bad     { background-color: white; }
.grade-new .article .question.result-neutral { background-color: white; }

.grade-new .article .question fieldset                { width: 100%; }
.grade-new .article .question .answer                 { padding-bottom: 0; }

.grade-new .article .question .freevoice-wrap .player { display: block; }
.grade-new .article .question .freetext-wrap textarea { color: black; width: 100%; }

.grade-new .article .question .question-comment          { margin-top: 10px; }
.grade-new .article .question .question-comment label    { font-size: 14px; }
.grade-new .article .question .question-comment textarea { padding: 3px; min-height: 25px; max-height: 200px; border-radius: 3px; font-size: 18px; line-height: normal; border-color: #228dcf; }

.grade-new .article .placeholder      { display: none; min-height: unset; text-align: center; margin-bottom: 30px; }
.grade-new .article .placeholder.show { display: block; }

.grade-new .article .question.footer                  { background-color: white; padding: 20px 20px 40px 20px; }
.grade-new .article .question.footer .footer-wrap     { float: right; }
.grade-new .article .question.footer span.extra       { margin-right: 10px; }
.grade-new .article .question.footer .submit          { width: 200px; line-height: 32px; border: none; background-color: #228dcf; color: #fff; box-shadow: 0 3px 4px rgba(0,0,0,0.3); border-radius: 3px; cursor: pointer; font-size: 12px; }
.grade-new .article .question.footer .submit:disabled { cursor: not-allowed; }


.grade-new .article .question .user-info             { display: block; margin-bottom: 10px; }
.grade-new .article .question .user-info .user-photo { display: inline-block; vertical-align: middle; width: 35px; height: 35px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.grade-new .article .question .user-info .user-name  { display: inline-block; vertical-align: middle; margin-left: 7px; font-size: 12px; font-weight: 600; }


.grade-new .article .question .question-incomplete      { text-align: center; color: #999; padding: 10px 0; font-size: 0; color: #228dcf; }
.grade-new .article .question .question-incomplete img  { display: inline-block; vertical-align: middle; margin-right: 10px; height: 24px; }
.grade-new .article .question .question-incomplete span { display: inline-block; vertical-align: middle; font-size: 14px; }

/* question comment */

.grade-comment                       { font-size: 0; margin: 19px -20px -20px -20px; border-top: 1px solid #e5e5e5; }

.grade-comment .form-body            { position: relative; padding: 10px 20px; }
.grade-comment .form-body > *        { display: inline-block; vertical-align: top; }

.grade-comment .user > .photo        { width: 35px; height: 35px; border-radius: 50%; }
.grade-comment .user > .photo        { background: no-repeat center center; background-size: cover; }

.grade-comment .post-text                  { margin-left: 10px; width: calc(100% - 45px); }
.grade-comment .post-text > *              { display: inline-block; vertical-align: middle; }
.grade-comment .post-text > div            { position: relative; width: calc(100% - 140px); }
.grade-comment .post-text > div > textarea { border: none; resize: none; line-height: 25px; font-size: 16px; padding: 5px 0; height: 35px; min-height: 35px; max-height: 200px; background-color: transparent; }

.grade-comment .post-text > .ctrl-record        { width: 130px; height: 35px; line-height: 35px; margin-left: 10px; text-align: right; }
.grade-comment .post-text > .ctrl-record > *    { display: inline-block; vertical-align: middle; color: #228dcf; }
.grade-comment .post-text > .ctrl-record > span { font-size: 14px; width: calc(100% - 20px); }
.grade-comment .post-text > .ctrl-record > i    { font-size: 18px; width: 15px; line-height: 35px; margin-left: 5px; }

.grade-comment .post-audio       { display: none; margin-left: 10px; width: calc(100% - 45px); }
.grade-comment .post-audio > *   { display: inline-block; vertical-align: middle; }
.grade-comment .post-audio > div { position: relative; width: calc(100% - 110px); }
.grade-comment .post-audio > a   { width: 100px; margin-left: 10px; }
.grade-comment .post-audio audio { height: 35px; }

.grade-comment .post-record       { display: none; position: relative; margin-left: 10px; width: calc(100% - 45px); }
.grade-comment .post-record > *   { display: inline-block; vertical-align: middle; }
.grade-comment .post-record > div { position: relative; width: calc(100% - 220px); }
.grade-comment .post-record > a   { width: 100px; margin-left: 10px; }

.grade-comment         .loading   { display: none; position: absolute; right: 0; top: 0; width: 35px; height: 35px; border: none; background: url('/static/img/ajax-loader.gif') no-repeat center center; }
.grade-comment.sending .loading   { display: block; }

.grade-comment.error              { background-color: #ef4949; }
.grade-comment.error textarea     { color: #fff; }
.grade-comment.saved              { animation: flashsaved 500ms linear; }

.grade-comment.audio  .post-text   { display: none; }
.grade-comment.audio  .post-audio  { display: inline-block; }
.grade-comment.audio  .post-record { display: none; }

.grade-comment.record .post-text   { display: none; }
.grade-comment.record .post-audio  { display: none; }
.grade-comment.record .post-record { display: inline-block; }


@keyframes flashsaved {
	000% { background-color: #a2d053; }
	100% { background-color: transparent; }
}

/* sidebar questions */

.grade-new .grade-sidebar                { float: left; width: 295px; }

.grade-new .questions-list               { padding-bottom: 20px; }
.grade-new .questions-list h3            { padding: 20px; }
.grade-new .questions-list li            { font-size: 14px; }
.grade-new .questions-list li          a { display: block; padding: 5px 20px; }
.grade-new .questions-list li.selected a { padding-left: 15px; border-left: 5px solid #ffbc2d; }

.grade-new .questions-list li          a { max-width: 100%; line-height: 21px; max-height: 63px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; }
.grade-new .questions-list li          a { position: relative; padding-right: 40px; }

.grade-new .questions-list li           a:after { content: ''; position: absolute; right: 10px; top: 50%; transform: translate(0, -50%); width: 19px; height: 19px; border-radius: 50%; border: 1px solid #a2d053; }
.grade-new .questions-list li.completed a:after { background: #a2d053 url('/static/img/icon/check-w.png') no-repeat center center; background-size: cover; }
.grade-new .questions-list li.completed         { opacity: 0.5; }

.grade-new .grade-sidebar .autograde           { margin: 15px 0; }
.grade-new .grade-sidebar .autograde.completed { opacity: 0.5; }
.grade-new .grade-sidebar .autograde .button   { width: 100%; }

.grade-new .grade-sidebar .students-info       { text-align: center; font-size: 14px; }
.grade-new .grade-sidebar .students-info span  { font-weight: bold; }


.grade-new .grade-sidebar + .article                 { margin-left: 310px; margin-right: 0; }
.grade-new .grade-sidebar + .article .item.question  { width: auto; }
.grade-new .grade-sidebar + .article .grade-and-next { margin-right: 0; }



/* display grade */

.display-grade                          { font-size: 0; }
.display-grade > *                      { display: none; vertical-align: middle; }
.display-grade.has-grade    > .mark     { display: inline-block; }
.display-grade.has-rubric   > .rubric   { display: inline-block; }
.display-grade.has-feedback > .feedback { display: inline-block; }

.display-grade > *                      { height: 18px; line-height: 18px; text-align: center; }
.display-grade > .mark                  { font-size: 18px; }
.display-grade > div                    { padding: 5px; color: #228dcf; }
.display-grade > a                      { padding: 5px; color: #fff; margin: 0 3px; min-width: 18px; }
.display-grade > a                      { background-color: #228dcf; box-shadow: 0 4px 4px rgba(0,0,0,0.3); border-radius: 5px; text-decoration: none; }

.display-grade > *         > i          { display: block; font-size: 14px; line-height: inherit; }
.display-grade > .rubric   > i          { margin-top: 1px; }
.display-grade > .feedback > i          { margin-top: 0px; }

.display-grade > *              { position: relative; }
.display-grade > *       > span { background-color: rgba(0,0,0,0.8); color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.display-grade > *       > span { width: 150px; border-radius: 5px; padding: 5px; font-size: 12px; line-height: 18px; white-space: pre-wrap; text-align: left; }
.display-grade > *       > span { display: none; position: absolute; transform: translate(-50%, -100%); left: 50%; top: calc(50% - 15px); }
.display-grade > *:hover > span { display: block; }

.display-grade.asg > *          { height: 36px; line-height: 36px; }
.display-grade.asg > .mark      { font-size: 24px; }
.display-grade.asg > div        { color: #fff; }
.display-grade.asg > * > i      { font-size: 18px; }
.display-grade.asg > .rubric   > i          { margin-top: 1px; }
.display-grade.asg > .feedback > i          { margin-top: 0px; }