/* single assignment */

.common-frame.assignment   { position: relative; overflow: hidden; min-width: 600px; padding-bottom: 100px; }

.assignment .progress      { position: relative; width: 100px; height: 100px; line-height: 88px; border: 2px solid #fff; border-radius: 50%; vertical-align: middle; text-align: center; text-transform: uppercase; font-size: 11px; overflow: hidden; }
.assignment .progress span { position: relative; display: inline-block; vertical-align: middle; line-height: normal; }
.assignment .progress div  { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }

.assignment .progress .bg1 { z-index: 4; background: #1f3c77;}
.assignment .progress .bg2 { z-index: 3; background: #fff;}
.assignment .progress .emptyprogress { z-index: 2; }
.assignment .progress .fullprogress  { z-index: 1;}
.assignment .progress .emptyprogress span { z-index: 4; color: #fff;}
.assignment .progress .fullprogress  span { z-index: 4; color: #1f3c77;}

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

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

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


.assignment .item.question.saved { animation: flashsaved2 500ms linear; animation-fill-mode: forwards; }

@keyframes flashsaved2 {
	000% { background-color: #a2d053; }
	100% { background-color: #fff; }
}

.assignment .floater             { position: fixed; z-index: 100; top: -1050px; min-width: calc(600px - 210px); width: calc(100% - 240px - 20px - 130px); margin-left: 10px; }
.assignment .floater.on          { top: 60px; }
.assignment .floater             { box-shadow: 0 2px 4px rgba(0,0,0,0.3); border-radius: 0 0 5px 5px; }
.assignment .floater             { padding: 10px; background-color: #1f3c77; color: #fff; }
.assignment .floater .progress   { float: right; }
.assignment .floater .progress   { width: 30px; height: 30px; line-height: 30px; border: 1px solid #fff; border-radius: 50%; font-size: 10px; }
.assignment .floater .title      { margin-right: 100px; font-size: 16px; font-weight: bold; }
.assignment .floater .extra               { margin-right: 100px; font-size: 0; }
.assignment .floater .extra > span        { display: inline-block; margin-right: 20px; }
.assignment .floater .extra > span > span { display: inline-block; font-size: 12px; }
.assignment .floater .extra > span > span.name-extra { margin-right: 5px; }
.assignment .floater .assignment-timer    { font-weight: bold; font-size: 12px; }

.assignment .floater .printing,
.assignment .floater .grade-rubrics { float: right; display: none; font-size: 18px; color: #fff; margin: 8px 10px 0 0; }

.assignment .floater .printing.can-print,
.assignment .floater .grade-rubrics.can-rubric { display: block; }


.assignment > .article                            { position: relative; min-height: 450px; width: calc(100% - 275px); }
.assignment > .article > .item                    { position: relative; margin: 0 0 20px 20px; padding: 20px; }
.assignment > .article > .item                    { box-shadow: 0 2px 4px rgba(0,0,0,0.3); background-color: #fff; color: #282828; }
.assignment > .article > .item:last-child         { margin-bottom: 0; }
/* line */
.assignment > .article > .item:before             { content: ""; position: absolute; z-index: 1; left: -30px; top: 0; bottom: 0; border-left: 3px solid #e5e3e4; }
.assignment > .article > .item:before             { bottom: -20px; } /* to cover bottom margin */
.assignment > .article > .item:first-child:before { top: 50%; }
.assignment > .article > .item:last-child:before  { bottom: 50%; }
/* icon */
.assignment > .article > .item:after              { content: ""; position: absolute; z-index: 2; left: -44px; top: 50%; margin-top: -14px; width: 31px; height: 31px; line-height: 25px; border-radius: 16px; text-align: center; }
.assignment > .article > .item.icn-dot:after      { background: #fff; border: 8px solid #1f3c77; width: 15px; height: 15px; }
.assignment > .article > .item.icn-check:after    { background: #1f3c77 url('/static/img/icon/check-w.png') no-repeat center center; background-size: cover; }
.assignment > .article > .item.icn-question:after { background: #e1e1e1; content: "?"; color: #1f3c77; font-size: 24px; font-weight: bold; line-height: 31px; }

.assignment > .article > .item .title             { font-size: 24px; font-weight: bold; overflow: hidden; }
.assignment > .article > .item .descr             { font-size: 24px; font-weight: normal; overflow: hidden; }
.assignment > .article > .item .text              { font-size: 18px; font-weight: normal; overflow: hidden; position: relative; /*line-height: 23px;*/ }
.assignment > .article > .item .text h1           { font-weight: normal; margin: 10px 0; }
.assignment > .article > .item .text p            { color: #383838; font-weight: 400; }
.assignment > .article > .item .text img          { margin: 0 25px 15px 0; }
.assignment > .article > .item .text img          { max-width: 100%; height: auto; }

.assignment > .article > .item .title:empty        { display: none; }
.assignment > .article > .item .descr:empty        { display: none; }
.assignment > .article > .item .text:empty         { display: none; }

.assignment > .article > .item.chapter  .title     { font-weight: normal; margin-bottom: 20px; }
.assignment > .article > .item.question .title     { font-weight: normal; margin-bottom: 20px; }
.assignment > .article > .item.question .status    { float: right; font-size: 16px; opacity: 0.5; }
.assignment > .article > .item.question .points    { display: none; float: right; font-size: 16px; opacity: 0.5; }

.assignment > .article > .item.question .comment         { display: block; font-size: 14px; margin-top: 25px; }
.assignment > .article > .item.question .comment .header { font-size: 16px; }
.assignment > .article > .item.question .comment .text   { display: block; font-style: italic; }
.assignment > .article > .item.question .comment audio   { display: none; }
.assignment > .article > .item.question .comment.audio .text { display: none; }
.assignment > .article > .item.question .comment.audio audio { display: block; }


/* header */
.assignment > .article > .item.header                   { background-color: #1f3c77; color: #fff; font-size: 0; }
.assignment > .article > .item.header .progress         { float: right; }
.assignment > .article > .item.header .picture          { float: left; width: 96px; height: 96px; }
.assignment > .article > .item.header .picture img      { display: block; width: 100%; height: 100%; }
.assignment > .article > .item.header .inner            { margin: 0 240px 0 120px; }
.assignment > .article > .item.header button            { margin: 20px auto 0; }

.assignment > .article > .item.header .extra               { font-size: 0; margin-top: 16px; }
.assignment > .article > .item.header .extra > span        { display: inline-block; margin-right: 20px; }
.assignment > .article > .item.header .extra > span > span { display: inline-block; font-size: 14px; font-weight: bold; text-transform: uppercase; line-height: 21px; }
.assignment > .article > .item.header .extra > span > span.name-extra { margin-right: 5px; font-weight: normal; }
.assignment > .article > .item.header .assignment-timer    { font-weight: bold; font-size: 14px; }

@media screen and (max-width: 1200px) {
	.assignment > .article > .item.header .progress     { width: 70px; height: 70px; line-height: 65px; border: 1px solid #fff; font-size: 10px; }
	.assignment > .article > .item.header .picture      { width: 60px; height: 60px; }

	.assignment > .article > .item.header .inner        { margin: 0 80px 0 70px; }
	.assignment > .article > .item.header .inner .title { font-size: 20px; text-overflow: ellipsis; }
	.assignment > .article > .item.header .inner .descr { font-size: 14px; text-overflow: ellipsis; }

	.assignment > .article > .item.header .extra > span > span { font-size: 12px; }
    .assignment > .article > .item.header .assignment-timer    { font-size: 12px; }
}


/* footer */
.assignment > .article .footer         { background-color: #1f3c77; }
.assignment > .article .footer .button { margin: 0 auto; width: 230px; }


/* chapter media */
.assignment > .article > .item.chapter.media .inner-block { width: 80%; max-width: 800px; margin: 0 auto; }
.assignment > .article > .item.chapter.media .media-title { margin: 10px 0; padding: 5px; font-size: 16px; line-height: 24px; min-height: 24px; }
.assignment > .article > .item.chapter.media .media-title { font-weight: bold; }
.assignment > .article > .item.chapter.media .media-equation { font-size: 14px; text-align: center; }
.assignment > .article > .item.chapter.media .media-equation equation *      { font-family: KaTeX_Main, "Times New Roman", serif; }
.assignment > .article > .item.chapter.media .media-equation equation .katex { font-size: 2em; }
.assignment > .article > .item.chapter.media .media-equation equation .katex .mathit { font-family: KaTeX_Math; }
.assignment > .article > .item.chapter.media .media-equation equation .katex .op-symbol { font-family: KaTeX_Size1; }

.assignment > .article > .item.chapter.media .media-descr { margin: 10px 0; padding: 5px; font-size: 14px; line-height: 21px; min-height: 33px; white-space: pre-line; }
.assignment > .article > .item.chapter.media .video-frame > video    { width: 100%; }
.assignment > .article > .item.chapter.media .youtube-frame          { position: relative; width: 100%; height: 0; padding-bottom: 51%; }
.assignment > .article > .item.chapter.media .youtube-frame > iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

.assignment > .article > .item.chapter.media .image-frame       { position: relative; overflow: hidden; }
.assignment > .article > .item.chapter.media .image-frame img   { margin: 0 auto; max-width: 100%; }
.assignment > .article > .item.chapter.media .image-frame .img  { width: 100%; height: 100%; background: no-repeat center center; background-size: cover; }

.assignment > .article > .item.chapter.media .audio-frame       { position: relative; overflow: hidden; }
.assignment > .article > .item.chapter.media .audio-frame audio { margin: 0 auto; width: 100%; }
.assignment > .article > .item.chapter.upload .upload-content   { text-align: center; }
.assignment > .article > .item.chapter.upload .upload-wrap 		{ display: inline-block; position: relative; margin: 10px 30px 10px 0; }
.assignment > .article > .item.chapter.upload .upload-wrap .remove-answer { display: none; }
.assignment > .article > .item.chapter.upload .upload-wrap .upload { display: inline-block; width: 280px; height: 55px; border: 1px dashed #228dcf; border-radius: 2px; color: #484848; text-align: left; text-decoration: none; }
.assignment > .article > .item.chapter.upload .upload-wrap .upload i { display: inline-block; margin: 0 15px 0 10px; width: 30px; vertical-align: middle; line-height: 55px; font-size: 36px; color: #228dcf; }
.assignment > .article > .item.chapter.upload .upload-wrap .upload .name { display: inline-block; width: calc(100% - 110px); font-size: 14px; color: #228dcf; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.assignment > .article > .item.chapter.upload .upload-wrap .upload .name-edit { display: none; }
.assignment > .article > .item.chapter.upload .upload-wrap .upload .download-wrap { display: inline-block; float: right; width: 40px; border-left: 1px dashed #228dcf; text-align: center; }
.assignment > .article > .item.chapter.upload .upload-wrap .upload .download-wrap a { text-decoration: none; }
.assignment > .article > .item.chapter.upload .upload-wrap .upload .download-wrap a i { display: block; margin: 0; width: auto; font-size: 16px;}
.assignment > .article > .item.chapter.upload .upload-wrap + .empty { display: none; }

/*.assignment .answer *                { font-size: 18px; box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -webkit-box-sizing: border-box; }
*/
.assignment .answer label            { display: inline; padding: 0; min-width: 50px; }
.assignment .answer label span       { color: inherit; }
.assignment .answer textarea         { width: 100%; padding: 3px; border-radius: 3px; line-height: normal; resize: none; }

.assignment .answer .toggle-skip            { float: left; line-height: 32px; margin-top: 10px; }
.assignment .answer .toggle-skip label span { color: #1f3c77; font-size: 12px; }

.assignment .answer .submit,
.assignment .answer .skip            { margin-top: 10px; width: 200px; line-height: 32px; border: none; background-color: #1f3c77; color: #fff; box-shadow: 0 3px 4px rgba(0,0,0,0.3); border-radius: 3px; cursor: pointer; font-size: 18px; }
.assignment .answer .submit,
.assignment .answer .skip            { float: right; padding: 2px; display: none; }
.assignment .answer .submit.show,
.assignment .answer .skip.show       { display: block; }
.assignment .answer .submit:disabled,
.assignment .answer .skip:disabled 	 { cursor: not-allowed; opacity: 0.5; }
.assignment .answer :required  		 { background-color: #fff; }

/* question type styles */
.assignment .answer .check-wrap { line-height: 32px; }

.assignment .answer .freevoice-wrap    { margin-bottom: 10px; }
.assignment .answer .freevoice-wrap h4 { margin-bottom: 10px; font-size: 14px; }

.assignment .answer .freevoice-wrap .player                            { display: none; margin-top: 10px; }
.assignment .answer .freevoice-wrap .player > *                        { display: inline-block; vertical-align: middle; }
.assignment .answer .freevoice-wrap .player > .audio-container         { height: 40px; }
.assignment .answer .freevoice-wrap .player .remove                    { margin-left: 10px; color: #de3030; cursor: pointer; }

.assignment .question.result-neutral .answer .freevoice-wrap .classowl-recorder { display: none; }
.assignment .question.result-neutral .answer .freevoice-wrap .player   { display: block; }
.assignment .question.result-skipped .answer .freevoice-wrap .classowl-recorder { display: block; }
.assignment .question.result-skipped .answer .freevoice-wrap .player   { display: none; }

.assignment .question.result-neutral .answer .upload-area,
.assignment .question.result-skipped .answer .upload-area { display: none; }
.assignment .question.result-neutral .answer .uploaded-files,
.assignment .question.result-skipped .answer .uploaded-files { display: block; }

.assignment .answer fieldset:disabled .freevoice-wrap .player .remove { display: none; }

.assignment .answer                   { font-size: 18px; }
.assignment .answer thead             { font-weight: 700; }
.assignment .answer thead span        { padding: 0 15px; }
.assignment .answer tbody tr td       { text-align: center; }
.assignment .answer table td.view     { display: table-cell; text-align: left; }
.assignment .answer table td.edit     { display: none; }
.assignment .answer .yesno-wrap       { line-height: 32px; }
.assignment .answer .yesno-wrap label { display: inline-block; width: 20px; min-width: 20px; }
.assignment .answer .yesno-wrap span  { padding: 0 5px; color: inherit; }

.assignment .answer .fill-wrap                 { line-height: 35px; }
.assignment .answer .fill-wrap .sentence p     { display: initial; margin: 0; }
.assignment .answer .fill-wrap .sentence input { width: 120px; padding: 3px 17px 3px 3px; border-radius: 3px; background-color: #f5f5f5; font-size: 16px; }

.assignment .answer .filldrag-wrap                                { line-height: 35px; }
.assignment .answer .filldrag-wrap .sentence p                    { display: initial; margin: 0; }
.assignment .answer .filldrag-wrap .sentence input                { width: 120px; padding: 3px 17px 3px 3px; border-radius: 3px; background-color: #ffffff; font-size: 16px; border-color: #228dcf; border-style: dashed; }
.assignment .answer .filldrag-wrap .sentence input.ui-state-hover { border-color: #ffbc2d; border-style: solid; }
.assignment .answer .filldrag-wrap .sentence input          + img { display: none; width: 7px; height: 13px; margin-left: 3px; margin-right: 4px; padding-top: 3px; padding-bottom: 3px; line-height: 7px; vertical-align: middle; cursor: pointer; }
.assignment .answer .filldrag-wrap .sentence input.selected + img { display: inline; }
.assignment .answer .filldrag-answers-wrap                             { margin: 10px 0 10px 0; }
.assignment .answer .filldrag-answers-wrap .answer                     { display: inline-block; margin-right: 15px; }
.assignment .answer .filldrag-answers-wrap .answer i                   { color: #1f3c77; cursor: move; }
.assignment .answer fieldset:disabled .filldrag-answers-wrap .answer i { cursor: default; }
.assignment .answer .fill-width-meter,
.assignment > .article + .fill-width-meter { font-size: 16px; visibility: hidden; }

.assignment .answer ol                                { padding-left: 10px; margin-top: 0; font-weight: 700; }
.assignment .answer ol li.order-wrap                  { list-style-type: decimal; list-style-position: inside; line-height: 20px; }
.assignment .answer ol li.order-wrap p                { font-weight: 500; display: inline-block; }
.assignment .answer ol li.order-wrap > i              { cursor: move; color: #1f3c77; }
.assignment .answer fieldset:disabled .order-wrap > i { cursor: default; }

.assignment .answer ol                                         { counter-reset: listCounter; }
.assignment .answer ol li:not(.ui-sortable-placeholder)        { counter-increment: listCounter; list-style: none; }
.assignment .answer ol li:not(.ui-sortable-placeholder):before { content: counter(listCounter) "."; }

.assignment [data-question="matchimg"] > .answer * { font-size: 0; }
.assignment [data-question="matchimg"] > .answer input[type="submit"],
.assignment [data-question="matchimg"] > .answer button { font-size: 18px; }
.assignment .answer .matchimg-wrap { display: inline-block; padding-right: 20px; vertical-align: top; text-align: center; }
.assignment .answer .matchimg-wrap .img-object { position: relative; }
.assignment .answer .matchimg-wrap .img-object .remove-answer { position: absolute; right: -2px; top: -20px; text-decoration: none; cursor: pointer; font-size: 18px; }
.assignment .answer .matchimg-wrap .img-object .img-placeholder { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: 0; color: #228bcf; opacity: 0.5; background-color: rgba(34, 139, 207, 0.2); border: 1px dashed #228bcf; border-radius: 5px; text-align: center; font-size: 32px; vertical-align: middle; transition: top 200ms; -webkit-transition: top 200ms; }
.assignment .answer .matchimg-wrap .img-object .img-placeholder i { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translateY(-50%) translateX(-50%); font-size: 36px; }
.assignment .answer .matchimg-wrap .img-object .img-placeholder.answer { width: 100%; }
.assignment .answer .matchimg-wrap .img-object .img { border-radius: 5px; background-size: cover; background-position: 50% 50%; }
.assignment .answer .matchimg-wrap .img-object .img:after { content: ""; display: block; padding-bottom: 100%; }
.assignment .answer .matchimg-wrap .img-object .img + .img-placeholder { opacity: 0; visibility: hidden; }
.assignment .answer .matchimg-wrap .img-object .img.empty { opacity: 0; }
.assignment .answer .matchimg-wrap .img-object .img.empty + .img-placeholder { opacity: 0.6; visibility: visible; }
.assignment .answer .matchimg-wrap .img-object .img.empty ~ .remove-answer { display: none; }
.assignment .answer .matchimg-wrap .img-object.drop-hover img.empty + .img-placeholder { opacity: 1; }
.assignment .answer .matchimg-wrap .img-object.drop-hover img:not(.empty).img-answer { opacity: 0.3; }
.assignment .answer .matchimg-wrap .img-object.drop-hover img:not(.empty).img-answer + .img-placeholder { opacity: 0.9; }
.assignment .answer .matchimg-wrap .img-answer { /*margin: 0 10px;*/ padding: 0; }
.assignment .answer fieldset:disabled .matchimg-wrap .remove-answer { display: none; }

.assignment .answer .matchimg-answers-wrap { margin: 25px 0 10px 0; }
.assignment .answer .matchimg-answers-wrap .answer .img-answer { margin: 0 20px 0 0; background-size: cover; background-position: 50% 50%; }
.assignment .answer .matchimg-answers-wrap .answer .img-answer:after { content: ""; display: block; padding-bottom: 100%; }
.assignment .answer .matchimg-answers-wrap .answer { display: inline-block; position: relative; overflow: hidden; }
.assignment .answer .matchimg-answers-wrap .answer .overlay { position: absolute; left: 0; top: 100%; width: calc(100% - 20px); height: 100%; }
.assignment .answer fieldset:not(:disabled) .matchimg-answers-wrap .answer:hover .overlay { top: 0; }
.assignment .answer .matchimg-answers-wrap .answer .overlay .img-half { display: inline-block; position: relative; width: 50%; height: 100%; margin: 0; padding: 0; color: white; text-align: center; }
.assignment .answer .matchimg-answers-wrap .answer .overlay .img-half i { position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); font-size: 26px; }
.assignment .answer .matchimg-answers-wrap .answer .overlay .img-half.drag { float: left; background-color: rgb(42, 172, 252); cursor: move; }
.assignment .answer .matchimg-answers-wrap .answer .overlay .img-half.drag i { }
.assignment .answer .matchimg-answers-wrap .answer .overlay .img-half.view { float: right; background-color: rgba(42, 172, 252, 0.3); }
.assignment .answer .matchimg-answers-wrap .answer .overlay .img-half.preview { float: right; position: absolute; background-color: transparent; }
.assignment .answer fieldset:disabled .matchimg-answers-wrap .answer i { cursor: default; }

.assignment .question[data-question='upload'] .answer { text-align: center; }
.assignment .answer .upload-wrap { display: inline-block; position: relative; margin: 0 30px 20px 0; }
.assignment .answer .upload-wrap .upload { display: inline-block; width: 280px; height: 55px; border: 1px dashed #228dcf; border-radius: 2px; color: #484848; text-align: left; text-decoration: none; }
.assignment .answer .upload-wrap .upload i { display: inline-block; margin: 0 15px 0 10px; width: 30px; vertical-align: middle; line-height: 55px; font-size: 36px; color: #228dcf; }
.assignment .answer .upload-wrap .upload .name { display: inline-block; width: calc(100% - 110px); font-size: 14px; color: #228dcf; vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: default; }
.assignment .answer .upload-wrap .upload .download-wrap { display: inline-block; float: right; width: 40px; border-left: 1px dashed #228dcf; text-align: center; }
.assignment .answer .upload-wrap .upload .download-wrap a { text-decoration: none; }
.assignment .answer .upload-wrap .upload .download-wrap a i { display: block; margin: 0; width: auto; font-size: 16px;}
.assignment .answer fieldset > .upload-wrap .name-edit { display: none; }
.assignment .answer fieldset > .upload-wrap .remove-answer { display: none; }
.assignment .answer .upload-area { margin-top: 20px; padding-top: 20px; border: 1px dashed #228dcf; border-radius: 4px; margin-bottom: 20px; font-weight: normal; text-align: center; }
.assignment .answer .upload-area.hover  { background-color: rgba(153,153,153,.1); }
.assignment .answer .upload-area input[type=file] { display: none; }
.assignment .answer .upload-area label { color: #228dcf; font-size: 16px; text-align: center; }
.assignment .answer .upload-area .fake-label { display: none; color: #228dcf; font-size: 16px; text-align: center; }
.assignment .answer .upload-area .text-grey { font-size: 14px; text-align: center; padding-bottom: 20px; }
.assignment .answer fieldset:disabled                           { pointer-events: initial; opacity: 1; }
.assignment .answer fieldset:disabled .upload-area              { display: block; }
.assignment .answer fieldset:disabled .upload-area label 		{ display: none; }
.assignment .answer fieldset:disabled .upload-area .fake-label 	{ display: block; }
.assignment .answer .uploaded-files { margin: 20px 0; font-size: 16px; color: #282828; text-align: left; }
.assignment .answer .answers-wrap { margin-top: 25px; }
.assignment .answer .answers-wrap .upload-wrap .remove-answer { display: none; position: absolute; right: -13px; top: -21px; cursor: pointer; color: #000; opacity: 0.4; }
.assignment .answer .answers-wrap .upload-wrap .upload { color: #1f3c77; }
.assignment .answer .answers-wrap .upload-wrap .upload .name-edit { display: none; width: calc(100% - 105px); }
.assignment .answer .answers-wrap .upload-wrap .upload .name-edit input { display: inline; padding: 5px 10px; width: 78%; border-radius: 4px; border: 1px solid #1f3c77; color: #228dcf; font-size: 14px; }
.assignment .answer .answers-wrap .upload-wrap .upload .name-edit .ext { display: inline; margin-left: 3px; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.assignment .answer .answers-wrap .empty { display: block; margin-bottom: 25px; }
.assignment .question.icn-question .answer .answers-wrap .empty { display: none; }
.assignment .answer .answers-wrap .upload-wrap + .empty { display: none; }
.assignment .answer fieldset:not(:disabled) .answers-wrap .upload-wrap .remove-answer		{ display: block; }
.assignment .answer fieldset:not(:disabled) .answers-wrap .upload-wrap .download-answer		{ display: none; }
.assignment .answer fieldset:not(:disabled) .answers-wrap .upload-wrap .upload .name 		{ display: none; }
.assignment .answer fieldset:not(:disabled) .answers-wrap .upload-wrap .upload .name-edit 	{ display: inline-block; }

.assignment > .article > .item fieldset .edit { display: none; float: right; margin-top: 10px; margin-right: 15px; line-height: 36px; cursor: pointer; font-size: 18px; }
.assignment > .article > .item fieldset .edit .fa { font-size: 18px; }

.assignment > .article > .item.result-neutral fieldset:disabled .edit,
.assignment > .article > .item.result-skipped fieldset:disabled .edit { display: block; }

.assignment.asg-finished > .article > .item.result-neutral fieldset:disabled .edit,
.assignment.asg-finished > .article > .item.result-skipped fieldset:disabled .edit { display: none; }

.assignment .answer .progress          { display: none; width: 100%; font-size: 14px; text-align: center; border: none; border-radius: default; }
.assignment .answer .progress-bar      { display: inline-block; width: calc(50% - 50px); padding: 1px; border: 1px solid #1f3c77; overflow: hidden; }
.assignment .answer .progress-bar span { display: block; width: 0; height: 8px; background-color: #228dcf; }
.assignment .answer .progress-text     { display: inline-block; margin-left: 10px; font-size: 14px; }

.assignment form.answer.uploading .progress { display: block; }
.assignment form.answer.uploading .upload-area,
.assignment form.answer.uploading .answers-wrap,
.assignment form.answer.uploading .uploaded-files { display: none; }


.assignment > .article > .item.disabled                     { opacity: 1.0; background-color: #eee; color: #ccc; }
.assignment > .article > .item.disabled                     { pointer-events: none; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
.assignment > .article > .item.disabled form.answer .submit { opacity: 0.3; }

.assignment > .article > .item.result-error   { color: red; }
.assignment > .article > .item.result-neutral { background-color: #ffd; }
.assignment > .article > .item.result-good    { background-color: #dfd; }
.assignment > .article > .item.result-bad     { background-color: #fdd; }
.assignment > .article > .item.result-skipped { background-color: #bdccff; }

.assignment > .article > .item.result-error .skip,
.assignment > .article > .item.result-neutral .skip,
.assignment > .article > .item.result-good .skip,
.assignment > .article > .item.result-bad .skip,
.assignment > .article > .item.result-skipped .skip { display: none; }
.assignment > .article > .item.result-error .toggle-skip,
.assignment > .article > .item.result-neutral .toggle-skip,
.assignment > .article > .item.result-good .toggle-skip,
.assignment > .article > .item.result-bad .toggle-skip,
.assignment > .article > .item.result-skipped .toggle-skip { display: none; }

.assignment .chapter ::selection      { background: #28447c; color: #fff; }
.assignment .chapter ::-moz-selection { background: #28447c; color: #fff; }


/* inline markup - cikumark */

.assignment .chapter cikumark.highlight    { display: inline; border-top: 2px solid; border-bottom: 2px solid; /*padding-top: 2px; padding-bottom: 2px;*/ }
.assignment .chapter cikumark.highlight.h1 { background-color: #fcef7d; border-color: #fcef7d; }
.assignment .chapter cikumark.highlight.h2 { background-color: #64df77; border-color: #64df77; }
.assignment .chapter cikumark.highlight.h3 { background-color: #f477a8; border-color: #f477a8; }
.assignment .chapter cikumark.highlight.h4 { background-color: #ffb449; border-color: #ffb449; }
.assignment .chapter cikumark.highlight.h5 { background-color: #81cdf8; border-color: #81cdf8; }
.assignment .chapter cikumark.highlight.h6 { background-color: #9688f8; border-color: #9688f8; }

.assignment .chapter cikumark.note   { display: inline; cursor: pointer; background-color: #ffffb2; }
.assignment .chapter cikumark.note * { display: inline; cursor: pointer; background-color: #ffffb2; }

.assignment .chapter cikumark.voice   { display: inline; cursor: pointer; background-color: #ffeacf; }
.assignment .chapter cikumark.voice * { display: inline; cursor: pointer; background-color: #ffeacf; }

.assignment .chapter cikumark.link   { display: inline; cursor: pointer; border-bottom: 2px solid #228dcf; }
.assignment .chapter cikumark.link * { display: inline; cursor: pointer; border-bottom: 2px solid #228dcf; }

.assignment .chapter cikumark.selection      { background: #28447c !important; color: lime !important; }
.assignment .chapter cikumark.selection span { background-color: inherit !important; cursor: default; }

/* stickers */

.assignment .stickers       { position: absolute; top: 40px; right: 40px; bottom: 0; width: 265px; }
.assignment .stickers .item { position: absolute; left: 0; width: 100%;  background-color: #fff; box-shadow: 0 6px 15px 0 rgba(36,37,38,0.08); }
.assignment .stickers .item { font-size: 0; border: 1px solid #E1E6EF; border-radius: 5px; overflow: hidden; padding-left: 5px; }

.assignment .stickers .item.active { z-index: 10 !important; left: -20px !important; }

.assignment .stickers .item:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; }

.assignment .stickers .item.note.p1:before { background-color: #81cdf8; }
.assignment .stickers .item.note.p2:before { background-color: #fab37a; }
.assignment .stickers .item.note.p3:before { background-color: #f26d6d; }
.assignment .stickers .item.voice:before   { background-color: #f477a8; }
.assignment .stickers .item.link:before    { background-color: #81cdf8;}

.assignment .stickers .item > .close-confirm-layer       { display: none; position: absolute; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.5); }
.assignment .stickers .item > .close-confirm-layer > div { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);  white-space: nowrap; }
.assignment .stickers .item > .close-confirm-layer > div > a             { display: inline-block; width: 60px; }
.assignment .stickers .item > .close-confirm-layer > div > a:first-child { margin-right: 15px; }

.assignment .stickers .item > .head { padding: 5px; }

.assignment .stickers .item           > .head > .close { float: right; height: 24px; width: 24px; line-height: 24px; text-align: center; text-decoration: none; font-size: 16px; color: #ef4949; }
.assignment .stickers .item           > .head > .close { display: none; }
.assignment .stickers .item.deletable > .head > .close { display: inline-block; }

.assignment .stickers .item > .head > .photo         { float: left; width: 24px; height: 24px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.assignment .stickers .item > .head > .title         { width: calc(100% - 24px - 24px - 5px); margin-left: 29px; }
.assignment .stickers .item > .head > .title > .name { line-height: 21px; font-size: 14px; color: #0044CD; }
.assignment .stickers .item > .head > .title > .time { line-height: 15px; font-size: 10px; color: #657FAC; }

.assignment .stickers .item > .text       { padding: 8px; font-size: 12px; color: #051E53; max-height: 100px; overflow: auto; overflow-wrap: break-word; white-space: pre-wrap; }
.assignment .stickers .item > .text:empty { display: none; }

.assignment .stickers .item > audio       { display: block; width: 100%; }  

.assignment .stickers .item > .preview       { position: relative; height: 80px; overflow: hidden; background: no-repeat top center; background-size: cover; }
.assignment .stickers .item > .preview:after { position: absolute; content: ''; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(67,81,187,0.5); }
.assignment .stickers .item > .preview:empty { background: url('/static/img/ajax-loader.gif') no-repeat center center; }
.assignment .stickers .item > .preview img   { display: block; width: 100%; }

.assignment .stickers .item > .linkinfo          { padding: 8px; }
.assignment .stickers .item > .linkinfo > a      { display: block; text-decoration: none; color: #282828; }
.assignment .stickers .item > .linkinfo > .title { font-size: 12px; }
.assignment .stickers .item > .linkinfo > .host  { font-size: 10px; }


/* tooltip */

.assignment .stickers-tooltip         { position: absolute; top: 200px; right: 10px; width: 230px; padding: 10px 20px; z-index: 10; }
.assignment .stickers-tooltip.grade   { top: 0; right: 0; }
.assignment .stickers-tooltip         { background-color: #fff; border-radius: 5px; box-shadow: 0 20px 20px rgba(0,0,0,0.3); }
.assignment .stickers-tooltip .close       { position: absolute; right: 0; top: 0; display: block; text-align: center; font-size: 18px; line-height: 24px; width: 24px; color: #228dcf; }
.assignment .stickers-tooltip .close:hover { text-decoration: none; }

.assignment .stickers-tooltip .title  { color: #6388b4; font-size: 10px; }
.assignment .stickers-tooltip .image  { display: block; border-radius: 4px; border: 1px solid #d4dbe2; height: 115px; margin: 10px 0; }
.assignment .stickers-tooltip .image  { background: #fff url('/static/img/assignments/stickers-tooltip.png') no-repeat center center; background-size: contain; }
.assignment .stickers-tooltip .text   { color: #004fca; font-size: 12px; }

.assignment .stickers-tooltip         { display: none; }
.assignment .stickers-tooltip.show    { display: block; } /* used by tutorial.html to show again */
.assignment .stickers-tooltip.hide    { display: none; } /* used by local cases to override hide it */


/* modal preview */

.modal-container .assignment > .article > .item.header > .progress { display: none; }
.modal-container .assignment > .article > .item.header > .inner    { margin-right: 40px; }