.class-frame { min-width: 600px; }
.class-frame .calendar-block { margin-top: 15px; }

.class-block > .header               { display: flex; align-items: center; justify-content: space-between; }
.class-block > .header > *           { flex-grow: 0; flex-shrink: 0; }
.class-block > .header > .tabs-inner { flex-grow: 1; flex-shrink: 1; }

.class-block > .header               { position: relative; padding: 20px 30px; background-color: #1f3c77; color: #fff; text-align: center; }

.class-block > .header .left-aligned      { text-align: left; height: 46px; padding-right: 20px; }
.class-block > .header .title             { display: flex; align-items: center; }
.class-block > .header .title             { font-weight: 600; font-size: 18px; }
.class-block > .header .title .edit       { color: inherit; margin-left: 5px; }
.class-block > .header .title .edit       { opacity: 0.5; }
.class-block > .header .title .edit:hover { opacity: 1; }


.class-block > .header .classmates   { display: flex; align-items: center; line-height: 21px; font-size: 14px; }
.class-block > .header .classmates i { display: block; line-height: 21px; font-size: 16px; }
.class-block > .header .classmates a { margin-left: 5px; color: #fff; }
.class-block > .header .classmates a.add-students       { color: inherit; text-decoration: none; }
.class-block > .header .classmates a.add-students       { opacity: 0.5; }
.class-block > .header .classmates a.add-students:hover { opacity: 1.0; }

/* header teachers */

.class-block .teacher                { position: relative; max-width: 200px; padding-left: 20px; line-height: 23px; text-align: left; }
.class-block .teacher > .photo       { float: left; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; }
.class-block .teacher > .photo       { background: no-repeat center center; background-size: cover; }
.class-block .teacher > .title       { margin-left: 55px; font-size: 12px; color: #fff; font-weight: 600; text-transform: uppercase; }
.class-block .teacher > .name        { margin-left: 55px; font-size: 14px; color: #fff; }
.class-block .teacher:after          { position: absolute; content: ''; left: 0; righT: 0; top: 100%; height: 10px;; }

.class-block .teacher > .dropdown        { position: absolute; z-index: 3; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.class-block .teacher > .dropdown        { border-radius: 5px; border: 1px solid #d8dde6; background-color: #fff; }
.class-block .teacher > .dropdown        { top: calc(100% + 10px); right: -10px; width: 220px; }
.class-block .teacher > .dropdown:before { position: absolute; right: 50%; top: 0; transform: translate(+50%, -50%) rotate(45deg); }
.class-block .teacher > .dropdown:before { content: ""; width: 10px; height: 10px; background-color: #fff; }
.class-block .teacher > .dropdown:before { border-left: 1px solid #d8dde6; border-top: 1px solid #d8dde6; }
.class-block .teacher       > .dropdown       { display: none; }
.class-block .teacher:hover > .dropdown       { display: block; }
.class-block .teacher:hover > .dropdown:empty { display: none; }

.class-block .teacher > * > .user-item > *           { display: inline-block; vertical-align: middle; }
.class-block .teacher > * > .user-item > .user-photo { border-radius: 50%; border: 1px solid #fff; }
.class-block .teacher > * > .user-item > .user-photo { background: no-repeat center center; background-size: cover; }

.class-block .teacher > .dropdown .user-item               { display: block; padding: 10px; line-height: 21px; border-bottom: 1px solid #e5e5e5; }
.class-block .teacher > .dropdown .user-item:last-child    { border-bottom: none; }
.class-block .teacher > .dropdown .user-item > .user-photo { width: 21px; height: 21px; margin-right: 10px; }
.class-block .teacher > .dropdown .user-item > .user-name  { font-size: 12px; font-weight: 600; color: #228dcf; width: calc(100% - 33px); }
.class-block .teacher > .dropdown .user-item > .user-name  { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }


/* header tabs */

.class-block > .header ul.tabs-inner               { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.class-block > .header ul.tabs-inner li            { margin: 0 10px; border-bottom: 4px solid transparent; }
.class-block > .header ul.tabs-inner li.selected   { margin: 0 10px; border-bottom: 4px solid #ffbc2d; }
.class-block > .header ul.tabs-inner li a          { color: #fff; }
.class-block > .header ul.tabs-inner li.selected a { color: #fff; }

.class-block > .cover                              { display: none; position: relative; }
.class-block > .cover                              { background: #fff no-repeat center center; background-size: cover; /*background-attachment: fixed;*/ }
.class-block > .cover.h100                         { display: block; height: 100px; margin-bottom: 15px; }
.class-block > .cover.h200                         { display: block; height: 200px; margin-bottom: 15px; }

.class-block > .cover .switch   { position: absolute; right: 10px; bottom: 10px; font-size: 0; }
.class-block > .cover .switch i { display: none; font-size: 18px; color: #fff; text-shadow: 0 0 1px rgba(0,0,0,0.3); }
.class-block > .cover.h100 .switch i.fa-arrow-circle-down { display: inline-block; }
.class-block > .cover.h200 .switch i.fa-arrow-circle-up   { display: inline-block; }

.class-block > .inner                              { position: relative; background-color: #fff; display: flex; justify-content: space-between; align-items: center; min-height: 62px; }
.class-block > .inner > *                          { padding: 10px; }
.class-block > .inner > *:empty                    { display: none; }
.class-block > .inner > .a                         { white-space: nowrap; }
.class-block > .inner > .b                         { flex-grow: 1; text-align: right; }
.class-block > .inner > * > *                      { display: inline-block; vertical-align: middle; text-align: left; margin-top: 5px; margin-bottom: 5px; }
.class-block > .inner .add-students                { width: 145px; margin-right: 15px; }
.class-block > .inner .open-in-drive               { margin-right: 10px; text-align: center; }

.class-block > .inner .class-emails .classowl-dropdown > .drop-icon { display: block; width: 30px; text-align: center; }
.class-block > .inner .class-emails .classowl-dropdown > .drop-list { left: initial; right: -20px; transform: translate(0, 0); }
.class-block > .inner .class-emails .classowl-dropdown > .drop-list:before { left: initial; right: 29px; transform: translate(0%, -50%) rotate(45deg); }
.class-block > .inner .class-emails .classowl-dropdown              { position: relative; left: 0; }
.class-block > .inner .class-emails .classowl-dropdown:before       { content: ''; position: absolute; width: 5px; height: 5px; border-right: 1px solid #228dcf; border-bottom: 1px solid #228dcf; }
.class-block > .inner .class-emails .classowl-dropdown:before       { transform: translate(-50%, -50%) rotate(45deg); top: 100%; left: 50%; }
.class-block > .inner .class-emails .classowl-dropdown.open:before  { transform: translate(-50%, -50%) rotate(-135deg); }

.class-block > .inner .class-emails ul.action-emails                 { margin: 0; padding: 0; }
.class-block > .inner .class-emails ul.action-emails li              { margin: 0; padding: 0; list-style-type: none; border-bottom: 1px solid #d8dde6; }
.class-block > .inner .class-emails ul.action-emails li:last-of-type { border-bottom: none; }
.class-block > .inner .class-emails ul.action-emails li.group   { padding: 0 15px; line-height: 30px; font-size: 14px; text-align: left; font-weight: 600; background-color: #f0f0f0; }
.class-block > .inner .class-emails ul.action-emails li a       { display: block; padding: 0 15px; line-height: 30px; font-size: 14px; text-align: left; text-decoration: none; }
.class-block > .inner .class-emails ul.action-emails li a       { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.class-block > .inner .class-emails ul.action-emails li a:hover { background-color: #f8f8f8; }


.class-block > .inner ul.class-stats               { margin: 0; padding: 0; margin-right: 200px; }
.class-block > .inner ul.class-stats li            { margin: 0; padding: 0; list-style-type: none; display: inline-block; line-height: 32px; margin-right: 30px;}
.class-block > .inner ul.class-stats li:last-child { margin-right: 0; }
.class-block > .inner ul.class-stats li span       { display: inline-block; vertical-align: middle; font-size: 14px; }
.class-block > .inner ul.class-stats li .title     { color: #999; }
.class-block > .inner ul.class-stats li .value     { font-size: 18px; }

.class-block > .header               { box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.class-block > .cover                { box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.class-block > .inner                { box-shadow: 0 2px 4px rgba(0,0,0,0.3); }

.class-sidebar     { float: left; margin-top: 15px; width: 360px; }
.class-sidebar > * { margin-bottom: 15px; }

.class-sidebar-assignments                                { position: relative; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.class-sidebar-assignments .inner                         { padding: 30px; }
.class-sidebar-assignments h3                             { padding-bottom: 24px; }
.class-sidebar-assignments h4                             { position: relative; text-align: center; margin-top: 0; font-style: italic; font-size: 16px; }

.class-sidebar-assignments h4.hide                        { display: none; }

.class-sidebar-assignments ul                             { margin: 0; padding: 0; }
.class-sidebar-assignments ul li                          { position: relative; margin: 0; padding: 10px 0; list-style-type: none; border-top: 1px solid #e5e5e5; }
.class-sidebar-assignments ul li:last-child               { padding-bottom: 0; }
.class-sidebar-assignments ul li .title                   { display: inline-block; max-width: calc(100% - 24px); font-size: 18px; color: #228dcf; }
.class-sidebar-assignments ul li .sub-title               { font-size: 14px; color: #282828; }
.class-sidebar-assignments ul li .extra                   { font-size: 12px; color: #228dcf; font-weight: 600; line-height: 18px; text-transform: uppercase; }
.class-sidebar-assignments ul li .extra > span            { display: inline-block; margin-right: 25px; white-space: nowrap; }
.class-sidebar-assignments ul li .extra > span:last-child { margin-right: 0; }
.class-sidebar-assignments ul li .extra > span.expired    { color: #ef4949; }
.class-sidebar-assignments ul li .close 				  { position: absolute; top: 5px; right: 0; font-size: 18px; color: #228dcf; text-align: center; width: 24px; line-height: 24px; text-decoration: none; cursor: pointer; }


.class-side-tags            { position: relative; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.class-side-tags > .inner   { padding: 30px; }
.class-side-tags h3         { padding-bottom: 20px; }
.class-side-tags h4         { text-align: center; margin-top: 0; font-style: italic; font-size: 16px; }

.class-side-tags > .inner .actions form { margin-top: 20px; width: 100%; }
.class-side-tags > .inner .actions .tag-del > button { width: 100%; }

.class-side-grades            { position: relative; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.class-side-grades > .inner   { padding: 30px; }
.class-side-grades h3         { padding-bottom: 20px; }
.class-side-grades h4         { text-align: center; margin-top: 0; font-style: italic; font-size: 16px; }

.class-side-options            { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); position: relative; overflow: auto; }
.class-side-options .inner     { padding: 30px; }
.class-side-options h3         { padding-bottom: 20px; }
.class-side-options .cikumas-switch { display: block; }

.class-side-archived            { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); position: relative; overflow: visible; }
.class-side-archived .inner     { padding: 30px; }
.class-side-archived h3         { padding-bottom: 20px; }
.class-side-archived .info      { margin-bottom: 10px; color: #999; font-size: 14px; }

.class-side-download            { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); position: relative; overflow: visible; }
.class-side-download .inner     { padding: 30px; }
.class-side-download h3         { padding-bottom: 20px; }
.class-side-download .info      { margin-bottom: 10px; color: #999; font-size: 14px; }

.class-side-classroom            { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); font-size: 14px; position: relative; }
.class-side-classroom .inner     { padding: 30px; }
.class-side-classroom h3         { padding-bottom: 20px; }
.class-side-classroom .name      { color: #228dcf; font-size: 18px; }
.class-side-classroom .section   { color: #282828; }
.class-side-classroom .room      { color: #282828; }
.class-side-classroom .descr     { color: #999; }
.class-side-classroom form       { text-align: right; }
.class-side-classroom .button    { display: inline-block; margin-top: 10px; }

.class-side-classroom       .unlink { position: absolute; right: 0; top: 0; color: #ef4949; font-size: 24px; width: 36px; line-height: 36px; text-align: center; text-decoration: none; }
.class-side-classroom       .unlink { display: none; }
.class-side-classroom:hover .unlink { display: block; }

.class-side-classroom .classroom-icon {
	display: inline-block; width: 24px; height: 24px; margin-right: 10px; vertical-align: middle;
	background: url('/static/img/google-classroom.png') no-repeat left center; background-size: contain;
}
.class-side-classroom .input-frame                { position: relative; }
.class-side-classroom .input-frame > .input       { border: none; border-bottom: 1px solid #b2b2b2; padding: 3px; font-size: 14px; line-height: 30px; width: 100%; }
.class-side-classroom .input-frame > .input:focus { border-color: #228dcf; }
.class-side-classroom .input-frame > .icon        { display: block; position: absolute; top: 0; color: #228dcf; font-size: 18px; line-height: 36px; text-align: center; text-decoration: none; }
.class-side-classroom .input-frame      > .input  { padding-right: 24px; }
.class-side-classroom .input-frame      > .icon   { width: 24px; right: 0; left: auto; text-align: center; }
.class-side-classroom .input-frame      > .icon .classroom-icon { margin: 0; }

.class-side-classroom .refresh-info    { margin-top: 20px; color: #999; }

@media screen and (max-width: 1200px) {
	.class-sidebar                { float: none; width: auto; margin-bottom: -15px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: stretch; }
	.class-sidebar > *            { width: calc(50% - 7.5px); }

}

@media screen and (max-width: 800px) {
	.class-sidebar                { margin-bottom: 0; }
	.class-sidebar > *            { width: 100%; }
}

.class-warn { margin-top: 15px; color: #ef4949; font-size: 18px; text-align: center; }

.class-students                      { margin-top: 15px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); padding: 30px; }

.class-students > ul                 { margin: 0; padding: 0; font-size: 0; }
.class-students > ul > li            { margin: 0; padding: 0; list-style-type: none; margin-bottom: 15px; }
.class-students > ul > li:last-child { margin-bottom: 0; }
.class-students > ul > li            { position: relative; border: 1px solid #e5e5e5; border-radius: 2px; }
.class-students > ul > li.selected   { border-color: #228dcf; background-color: #e8f3fa; }
.class-students > ul > li                  { display: flex; align-items: center; }
.class-students > ul > li form.act-student { flex-grow: 1; }
.class-students > ul > li form.act-mute    { padding: 10px; }
.class-students > ul > li form.act-del     { padding: 10px; }
.class-students > ul > li form.act-del > a { display: block; width: 30px; text-align: center; font-size: 18px; color: #ef4949; }
.class-students > ul > li form.act-del.readonly { display: none; }

.class-students > ul > li .item      { display: block; padding: 10px; min-height: 30px; flex-grow: 1; flex-shrink: 1; }
.class-students > ul > li .item:hover{ text-decoration: none; }

.class-students > ul > li .photo     { float: left; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; margin: 0 10px 0 0; }
.class-students > ul > li .photo img { width: 100%; }
.class-students > ul > li .name      { font-size: 12px; line-height: 15px; color: #228dcf; }
.class-students > ul > li .status    { font-size: 12px; line-height: 15px; color: #999; }
.class-students > ul > li .contact   { font-size: 12px; float: right; display: block; line-height: 30px; margin-right: 20px; }

.class-students.details > ul         { float: left; width: 280px; }
.class-students.details > ul > li    { padding: 0; }

.class-students         .class-student { display: none; }
.class-students.details .class-student { display: block; }

.class-student                 { font-size: 14px; border-left: 1px solid #e5e5e5; margin-left: 315px; }

.class-student                      { font-size: 14px; border-left: 1px solid #e5e5e5; margin-left: 315px; }
.class-student > .buttons           { float: right; }
.class-student > .buttons > *       { display: inline-block; vertical-align: middle; }
.class-student > .buttons .printing { font-size: 18px; line-height: 34px; width: 34px; text-align: center; }

.class-student-info            { margin-left: 30px; }
.class-student-info .photo     { float: left; width: 60px; height: 60px; border-radius: 30px; overflow: hidden; margin: 5px 10px 0 0; }
.class-student-info .photo img { width: 100%; }
.class-student-info .name      { font-size: 16px; color: #282828; line-height: 24px; }
.class-student-info .status    { font-size: 14px; color: #999; line-height: 21px; }
.class-student-info .remove    { font-size: 12px; display: inline-block; line-height: 18px; margin-top: 5px; }

.class-student-ctrl            { float: right; width: calc(100% - 330px); text-align: right; }
.class-student-ctrl .button    { display: inline-block; vertical-align: top; width: 130px; margin-left: 30px; margin-bottom: 15px; }

.class-student-assignments                                { margin: 30px -30px -30px 0; }
.class-student-assignments h2                             { margin: 0 0 20px 30px; }

.class-student-assignments .item                          { position: relative; padding: 20px 30px; border-top: 1px solid #e5e5e5; }
.class-student-assignments .item .picture                 { float: left; width: 70px; height: 70px; margin-top: 5px; }
.class-student-assignments .item .inner-text              { margin: 0 190px 0 90px; }
.class-student-assignments .item .sub-title               { font-weight: 600; font-size: 12px; color: #999; }
.class-student-assignments .item .extra                   { font-size: 12px; font-weight: 600; color: #228dcf; line-height: 18px; text-transform: uppercase; }
.class-student-assignments .item .extra > span            { display: inline-block; margin-right: 25px; white-space: nowrap; }
.class-student-assignments .item .extra > span:last-child { margin-right: 0; }
.class-student-assignments .item .extra > span.expired    { color: #ef4949; }
.class-student-assignments .item .right                   { position: absolute; bottom: 20px; right: 30px; text-align: center; }
.class-student-assignments .item .right .button           { width: 130px; margin-top: 10px; }

.class-student-assignments .item.revisit                  { background-color: #fcdbdb; }
.class-student-assignments .item.revisit .button          { border-color: #ef4949; color: #ef4949; }
.class-student-assignments .item.revisit .button:hover    { border-color: #fff; color: #fff; background-color: #ef4949; }

@media screen and (max-width: 1024px) {
	.class-students.details                { display: block; }
	.class-students.details > ul           { float: none; width: 100%; margin-bottom: 20px; }
	.class-students.details > ul li        { display: inline-block; width: 250px; margin-right: 15px; vertical-align: top; }
	.class-students.details .class-student { border-left: none; margin-left: 0; border-top: 1px solid #e5e5e5; padding-top: 30px; }
	.class-student-info                    { margin-left: 0; }
	.class-student-assignments             { margin-left: -30px; }
}


/* past grades */

.class-grades > ul      { margin: 0; padding: 0; }
.class-grades > ul > li { margin: 0; padding: 0; list-style-type: none; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.class-grades > ul > li { position: relative; margin-top: 15px; font-size: 12px; }

.class-grades .grade-link               { position: absolute; right: 0; font-size: 0; padding: 15px 20px; }
.class-grades .grade-link a             { display: inline-block; line-height: 30px; margin-left: 20px; position: relative; }
.class-grades .grade-link a      > i    { display: inline-block; vertical-align: middle; font-size: 18px; margin-right: 5px; }
.class-grades .grade-link a      > span { display: inline-block; vertical-align: middle; font-size: 14px; }
.class-grades .grade-link a.back > i    { font-size: 24px; margin-right: 0; margin-left: 10px; }
.class-grades .grade-link a:hover> span { text-decoration: underline; }
.class-grades .deleted-only .grade-link { display: none; }

.class-grades .class-assignment               { position: relative; display: block; padding: 6px 30px 6px; color: #228dcf; text-decoration: none; }
.class-grades .class-assignment .picture      { float: left; width: 30px; height: 30px; margin: 0 10px 0 0; }
.class-grades .class-assignment .inner-text   { font-size: 0; }
.class-grades .class-assignment .title        { font-size: 16px; line-height: 18px; }
.class-grades .class-assignment .title span	  { font-size: 13px; }
.class-grades .class-assignment .sub-title    { font-size: 12px; line-height: 12px; }
.class-grades .class-assignment .extra        { float: right; margin-right: 20%; padding-left: 20px; font-size: 12px; line-height: 30px; font-weight: 600; text-transform: uppercase; }
.class-grades .class-assignment .extra > span { display: inline-block; margin-right: 25px; white-space: nowrap; }
.class-grades .class-assignment .right        { float: right; line-height: 30px; font-size: 24px; }
.class-grades .class-assignment .closed { display: block; }
.class-grades .class-assignment .opened { display: none; }

.class-grades > ul > li.selected .class-assignment         { color: #fff; background-color: #1f3c77; }
.class-grades > ul > li.selected .class-assignment .closed { display: none; }
.class-grades > ul > li.selected .class-assignment .opened { display: block; }

.class-grades .search-block                      { padding: 20px; margin-top: 15px; }
.class-grades .search-block .quicksearch         { height: 36px; width: 100%; }
.class-grades .search-block .quicksearch input   { background-color: transparent; }
.class-grades .searchable > li.hide             { display: none; }


/* modal students add */

.modal-form.new.students-add .container     { width: 360px; }

@media screen and (max-width: 400px) {
    .modal-form.new.students-add .container { width: 100%; }
}

.students-add .inner .class-code                             { margin: 20px 0 40px; position: relative; min-height: 27px; font-size: 0; display: flex; align-items: center; }
.students-add .inner .class-code .value                      { user-select: text; -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; }
.students-add .inner .class-code .value                      { flex-grow: 1; font-size: 18px; }
.students-add .inner .class-code .value-empty                { flex-grow: 1; font-size: 14px; color: #999; line-height: 17px; }
.students-add .inner .class-code .value-empty                { display: none; }
.students-add .inner .class-code .value:empty                { display: none; }
.students-add .inner .class-code .value:empty + .value-empty { display: inline-block; }
.students-add .inner .class-code .ctrl                       { flex-grow: 0; flex-shrink: 0; font-size: 12px; margin-left: 20px; }

.students-add .list                           { margin-top: 20px; text-align: left; font-size: 0; max-height: 220px; position: relative; overflow: hidden; }
.students-add .list > .user                   { position: relative; display: block; font-size: 0; line-height: 40px; padding: 5px 0; border: 1px solid #e5e5e5; border-radius: 3px; margin: 10px 0; }
.students-add .list > .user > .photo          { display: inline-block; vertical-align: middle; width: 30px; height: 30px; margin: 0 10px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.students-add .list > .user > .info2          { display: inline-block; vertical-align: middle; width: calc(100% - 80px); }
.students-add .list > .user > .info2 > .name  { font-size: 14px; color: #228dcf; line-height: 22px; }
.students-add .list > .user > .info2 > .email { font-size: 12px; color: #999; line-height: 18px; }
.students-add .list > .user > .remove         { position: absolute; top: 50%; right: 0; transform: translate(0%, -50%); }
.students-add .list > .user > .remove         { display: none; color: #ef4949; font-size: 18px; width: 30px; text-align: center; }
.students-add .list > .user:hover > .remove   { display: block; }

.students-add .list       + .info { display: none; }
.students-add .list.empty + .info { display: block; }

.copy-anim { position: absolute; left: 0; top: 0; animation: 1s copy-anim; }
@keyframes copy-anim {
	000% { opacity: 1; top: 0; }
	100% { opacity: 0; top: -20px; }
}

.class-frame .class-code-enlarged { position: fixed; z-index: 210; left: 0; top: 0; right: 0; bottom: 0; background-color: #fff; color: #282828; }
.class-frame .class-code-enlarged { line-height: 100vh; font-size: 20vh; text-align: center; cursor: default; }

.class-frame .class-code-enlarged:after { position: absolute; top: 0; right: 0; width: 36px; height: 36px; line-height: 36px; content: '×'; cursor: pointer; }
.class-frame .class-code-enlarged:after { display: block; font-size: 36px; text-align: center; color: #228dcf; text-decoration: none; }


/* view assignment in class */

.assignment.in-class                            { padding-left: 80px; }
.assignment.in-class .progress                  { display: none; }
.assignment.in-class .assignment                { overflow: visible; }
.assignment.in-class .assignment .article .item { width: calc(100% - 90px); margin-right: 10px; }

#send-for-revisit-modal .modal-header .student     { height: 20px; }
#send-for-revisit-modal .modal-header .student > * { display: inline-block; }
#send-for-revisit-modal .modal-header .photo       { float: left; overflow: hidden; width: 60px; height: 60px; border-radius: 30px; position: relative; top: -20px; margin-right: 5px; }
#send-for-revisit-modal .modal-header .photo img { width: 100%; }

.class-frame .input-frame                { position: relative; }
.class-frame .input-frame > .error       { font-size: 12px; color: #ef4949; margin-top: 5px; }
.class-frame .input-frame > .input       { border: none; border-bottom: 1px solid #b2b2b2; padding: 3px; font-size: 14px; line-height: 30px; width: 100%; }
.class-frame .input-frame > .input:focus { border-color: #228dcf; }
.class-frame .input-frame > .icon        { display: block; position: absolute; top: 0; color: #228dcf; font-size: 18px; line-height: 36px; text-align: center; text-decoration: none; }
.class-frame .input-frame      > .input  { padding-right: 20px; }
.class-frame .input-frame      > .icon   { width: 20px; right: 0; left: auto; }
.class-frame .input-frame.wide > .input  { padding-right: 36px; }
.class-frame .input-frame.wide > .icon   { width: 36px; }
.class-frame .input-frame.left > .input  { padding-left: 20px; padding-right: 3px; }
.class-frame .input-frame.left > .icon   { left: 0; right: auto; }
.class-frame .input-frame.left.wide > .input { padding-left: 36px; }
.class-frame .input-frame.left.wide > .icon  { width: 36px; }

#modal-revisit form .datepicker { margin-bottom: 20px; }
#modal-revisit form .timepicker ul.autocomplete li   				{ display: inline-block; width: 25%; text-align: center; }
#modal-revisit form .timepicker ul.autocomplete li:first-of-type 	{ width: 100%; }
#modal-revisit form .timepicker ul.autocomplete li a 				{ text-align: center; }
#modal-revisit form .timepicker ul.autocomplete li:first-of-type 	{ width: 100%; }
#modal-revisit form .timepicker ul.autocomplete li .item-title 		{ text-align: center; }

/* class statistics */

.statistics-inner { position: relative; background: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }

.statistic-left { width: 250px; float: left; border-right: 1px solid #e6e6e6; min-width: 250px; }
.statistic-left.options.hide { display: none; }

.statistic-body .assignments	{ border-bottom: 1px solid #e6e6e6; overflow: hidden; width: 250px; min-width: 250px;}
.statistic-head      { display:flex; line-height: 27px;}
.statistic-head .space { min-width: 250px; height: 50px; }
.statistic-head .students { width: auto; height: 50px; right: 0; position: absolute; margin-right: 27px; }
.statistic-body      { position: relative; display: flex; border-right:1px solid #e6e6e6; }
.statistic-body .results { position: relative; right: 0; margin-right: 27px; display: inline-block; }
.statistic-body .results li { border-bottom: 1px solid #e6e6e6; }
.btn-statistic { top: 0; height: 50px; width: 50%; font-size: 16px; color: #1f3c77; background-color: #fff; border: none; outline: none; cursor: pointer; float: left; border-bottom: 1px solid #e6e6e6; float: left;}
.btn-statistic:disabled { background-color: #1f3c77; color: #fff; }

.btn-statistic-option { top: 0; height: 30px; width: 80%; font-size: 14px; background-color: #fff; outline: none; cursor: pointer; border-radius: 12px; margin-top: 17px; margin-left: 15px; border: 1px solid #228dcf; }
.btn-statistic-option:active { border: 2px solid #228dcf;}
.btn-statistic-option.selected { border: 2px solid #228dcf; background-color: #e8f3fa;}
.btn-statistic-option:last-child  { margin-bottom: 36px; }
.btn-statistic-option:first-child  { margin-top: 36px; }
.btn-statistic-option h3 { font-size: 16px; }

.statistics-inner .results ul li { padding: 10px; }
.statistics-inner .results ul li .btn-result { margin: 0px; }
.statistics-inner .btn-result { top: 0; height: 20px; width: 40px; font-size: 14px; color: #fff; background-color: #e5e5e5; border: none; outline: none; cursor: pointer; border-radius: 2px; margin-left: 15px; }
.statistics-inner .results ul li .btn-result 	{ position: relative; display: inline-block; vertical-align: top; margin-left: 0px !important; margin-top: 15px !important; }
.statistics-inner .btn-result.done { background-color: #70deba; }
.statistics-inner .btn-result.fail { background-color: #f2737e; }

.statistics-inner                    { padding: 0; position: relative; }
.statistics-inner        { margin-top: 15px; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.statistics-inner div.divTableCell:hover div.item      { background-color: #e5e5e5; }
.statistics-inner div.divTableCell.selected div.item   { background-color: #e5e5e5; cursor: default; }
.statistics-inner div.divTableCell .item { padding: 15px 0px; cursor: pointer; min-width: 318px; }

.statistics-inner .photo    { float: left; width: 36px; height: 36px; overflow: hidden; margin:6px 12px 10px 20px; }
.statistics-inner .photo img { width: 100%; }

.statistics-inner .student .inner-text.statistics   { width: 250px; margin-left: 0px; padding-top: 15px; }
.statistics-inner .inner-text.statistics   { width: 250px; display: inline-block; }
.statistics-inner .assignments .inner-text.statistics   { width: 250px; margin-left: 50px; display: block;}
.statistics-inner .results .inner-text.statistics   { width: 150px; word-wrap: break-word; display: inline-block; position: relative; vertical-align:top; }
.statistics-inner .results div.photo.student { left: 0; position: relative; }

.statistics-inner div.photo.student { float: left; width: 36px; height: 36px; overflow: hidden; margin: 8px; margin-left: 17px; margin-right: 17px; border-radius: 18px;}
.statistics-inner div.photo.student img { width: 100%; }
.statistics-inner.col-results { float: left; }

.statistics-inner   .info   { display: none; }

.statistics-inner .results  .extra         { font-size: 14px; font-weight: 600; color: #228dcf; line-height: 18px; display: inline-block; width: 150px; margin-left: 25px; position: relative; }
.statistics-inner .results  .extra > span  { display: inline-block; margin-right: 25px; }
.statistics-inner .results  .extra .name-extra { display: inline-block; margin-right: 5px; }

.statistics-inner .divTable{ display: table; }
.statistics-inner .divTable.hide{ display: none; }
.statistics-inner .divTableRow { display: table-row; }
.statistics-inner .divTableRow.hide { display: none; }
.statistics-inner .divTableCell { display: table-cell; vertical-align: middle; position: relative; border-right:1px solid #e6e6e6; }
.statistics-inner .divTableCell.hide { display: none; }
.statistics-inner .divTableBody { display: table-row-group; }

.statistics-inner .results .group-title        { position: relative; margin: 15px 0; text-align: center; color: #228bcf; font-size: 14px; }
.statistics-inner .results .group-title:before { content: " "; position: absolute; height: 1px; top: 50%; left: 0; width: calc(50% - 60px); border-bottom: 1px solid #228dcf; }
.statistics-inner .results .group-title:after  { content: " "; position: absolute; height: 1px; top: 50%; right: 0; width: calc(50% - 60px); border-bottom: 1px solid #228dcf; }
.statistics-inner .results.assignments { width: calc(100% - 250px); margin: 0; }
.statistics-inner .results.assignments ul li { padding: 0px; border: none; box-shadow: none;}

.statistics-inner .student { margin: 10px; }
.statistics-inner .text-blue { font-size: 16px; line-height: 20px; }
.statistics-inner .student .inner-text { display: inline-block; margin-top: 5px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; }
.statistics-inner .student .couple { display: inline-block; margin: 0 !important; }
.statistics-inner .student .inner-text.inf { display: inline-block; width: 250px; margin-left: 10px !important; position: relative; overflow: hidden; float: right; }
.statistics-inner .student .inner-text.inf .text-grey { display: inline-block; }
.statistics-inner .student .inner-text.inf .text-blue { display: inline-block; margin-left: 10px; }

.statistics-inner .cell-results .button { width: 100%; margin-top: 30px; line-height: 40px; font-size: 14px; }
.statistics-inner .cell-results .button:last-child { margin-top: 15px; margin-bottom: 15px; line-height: 40px; font-size: 14px; }
.statistics-inner .results .student:last-child { margin-bottom: 30px; }


.modal-assignments        { position: absolute; z-index: 20; top: 0; width: 300px; }
.modal-assignments:before { position: absolute; width: 280px; content:""; opacity: 0.9; z-index: 0; top: 0; bottom: 0; background-color: #1f3c77; box-shadow: 0 0 2px 0 rgba(0,0,0,0.3);}
.modal-assignments:after  { position: absolute; content:""; opacity: 0.9; z-index: 2; top: 19px; border: 10px solid transparent; border-width: 7px 10px; }
.modal-assignments  { display: none; opacity: 0; height: 0; }
.modal-assignments .inner                    { position: relative; z-index: 1; color: #fff; padding: 10px 20px; }
.modal-assignments .inner > div              { margin: 2px 0; font-size: 12px; line-height: 21px; }
.modal-assignments .inner > div       > span { display: inline-block; font-weight: bold; }
.modal-assignments .inner > div.title        { font-size: 14px; color: #ffbc2d; }
.modal-assignments .inner > div.descr > span { display: block; }
.modal-assignments:after  { left: auto; right: 0; border-left-color: #1f3c77; border-right-color: transparent; }
.modal-assignments   .inner { margin: 0 20px 0 0; }
.modal-assignments .button { width: 100%; margin-top: 30px; line-height: 40px; font-size: 14px; }
.modal-assignments .button:last-child { margin-top: 15px; margin-bottom: 15px; line-height: 40px; font-size: 14px; }