/* modal */

.modal-container              { position: fixed; z-index: 200; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.5); display: none; overflow: auto; }

.modal-container.fade.in { opacity: 1; }
.modal-container.fade { opacity: 0;
	-webkit-transition: opacity .25s linear;
	-o-transition: opacity .25s linear;
	transition: opacity .25s linear;
}

.modal-container.fade .modal-dialog {
	-webkit-transition: -webkit-transform .3s ease-out;
	-o-transition: -o-transform .3s ease-out;
	transition: transform .3s ease-out;
	-webkit-transform: translate(0,-35%);
	-ms-transform: translate(0,-35%);
	-o-transform: translate(0,-35%);
	transform: translate(0,-35%);
}

.modal-container.in .modal-dialog {
	-webkit-transform: translate(0,0);
	-ms-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);
}
.modal-header { padding: 25px 30px; display: flex; justify-content: space-between; align-items: baseline; }
/*.modal-body   { border-color: #e6e6e6; border-style: solid; border-width: 1px 0 1px 0; display: flex; flex-direction: row; }*/
.modal-footer { display: flex; justify-content: space-between; align-items: flex-end; padding: 30px 30px 40px 30px; }

body.modal-open { overflow-x: hidden; overflow-y: hidden; }


/* modals 2 */

.modal-form                              { position: fixed; z-index: 200; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0,0,0,0.5); overflow-y: auto; }
.modal-form                              { display: none; }
.modal-form > .container                 { position: relative; margin: 100px auto 20px; background-color: #fff; }
.modal-form > .container > a.close       { position: absolute; top: -36px; right: -36px; width: 36px; height: 36px; line-height: 36px; }
.modal-form > .container > a.close       { display: block; font-size: 36px; text-align: center; color: #fff; text-decoration: none; }
.modal-form > .container > a.close:hover { text-decoration: none; }

.modal-form .input                { border: none; border-bottom: 1px solid #b2b2b2; margin-bottom: 10px; padding: 3px; font-size: 14px; line-height: 30px; }
.modal-form .input:focus          { border-color: #228dcf; }
.modal-form textarea.input        { min-height: 100px; line-height: normal; resize: none; }
.modal-form .input-frame          { position: relative; margin-bottom: 10px; }
.modal-form .input-frame > .input { margin-bottom: 0; }
.modal-form .input-frame > .input.has-icon { padding-right: 20px; }
.modal-form .input-frame > a      { display: block; position: absolute; right: 0; top: 0; font-size: 18px; width: 20px; line-height: 36px; text-align: center; text-decoration: none; }
.modal-form .input-frame > a      { background-color: #fff; }
.modal-form .input-frame > a:hover{ background-color: #eee; }
.modal-form .input-frame > .icon       { cursor: pointer; position: absolute; right: 0; top: 0; font-size: 18px; width: 20px; line-height: 36px; text-align: center; }
.modal-form .input-frame > .icon       { background-color: #fff; color: #228dcf; }
.modal-form .input-frame > .icon:hover { background-color: #eee; }

.modal-form .cikumas-input-frame.rounded .input  { display: block; width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 3px 38px 3px 10px; font-size: 14px; min-height: 38px; resize: none; margin-bottom: 0; }
.modal-form .cikumas-input-frame.rounded > a     { right: 1px; top: 1px; border-radius: 0 4px 4px 0; }
.modal-form .cikumas-input-frame.rounded > .icon { right: 1px; top: 1px; border-radius: 0 4px 4px 0; }

.modal-form .form-hint { margin: -5px 0 10px; font-size: 12px; color: #999; font-style: italic; }

@media screen and (max-width: 640px) {
	.modal-form > .container > a.close { top: 0; right: 0; color: #228dcf; }
}

.modal-form .links          { text-align: center; font-size: 14px; margin: 20px 0 -20px; }
.modal-form .links a        { display: inline-block; line-height: 25px; }
.modal-form .links a.google { display: inline-block; line-height: 25px; padding-left: 30px; background: url('/static/img/google-account.png') no-repeat left center; background-size: 25px; }

@media screen and (max-width: 800px) {
	.modal-form .links      { margin-bottom: -10px; }
}


/* profile */

.modal-form.modal-profile .container             { width: 450px; }
.modal-form.modal-profile .form                  { padding: 60px; }
.modal-form.modal-profile .form .button          { width: 100%; margin: 40px auto 0; }

.student .modal-form.modal-profile .input-subject { display: none;  }
.teacher .modal-form.modal-profile .input-subject { display: block; }
.admin   .modal-form.modal-profile .input-subject { display: none;  }

.modal-form.modal-profile .input-terms .cikumas-checkbox       { line-height: auto; font-size: 12px; }
.modal-form.modal-profile .input-terms .cikumas-checkbox label { white-space: normal; line-height: normal; }

.modal-form.modal-profile .user-profile                 { padding-top: 20px; }
.modal-form.modal-profile .change-photo                 { min-height: 80px; margin-top: 20px; }
.modal-form.modal-profile .change-photo input           { display: none; }
.modal-form.modal-profile .change-photo label           { cursor: pointer; display: inline-block; }
.modal-form.modal-profile .change-photo .user-photo     { float: left; width: 80px; height: 80px; overflow: hidden; border-radius: 40px; }
.modal-form.modal-profile .change-photo .user-photo img { width: 100%; }
.modal-form.modal-profile .change-photo .ctrl-links     { margin-left: 100px; padding-top: 19px; color: #228dcf; font-size: 14px; line-height: 21px; }
.modal-form.modal-profile .change-photo .revert-link    { display: none; }
.modal-form.modal-profile .change-photo .revert-link a  { text-decoration: none; }

.modal-form.modal-profile .change-photo.disabled             { pointer-events: none; }
.modal-form.modal-profile .change-photo.disabled .ctrl-links { display: none; }

.modal-form.modal-profile               .input-name     { display: none; }
.modal-form.modal-profile               .input-birthday { display: none; }
.modal-form.modal-profile               .input-phone    { display: none; }
.modal-form.modal-profile               .input-join     { display: none; }
.modal-form.modal-profile               .input-school   { display: none; }
.modal-form.modal-profile               .input-subject  { display: none; }
.modal-form.modal-profile               .input-password { display: none; }
.modal-form.modal-profile               .input-terms    { display: none; }

.modal-form.modal-profile.show-name     .input-name     { display: flex; }
.modal-form.modal-profile.show-birthday .input-birthday { display: flex; }
.modal-form.modal-profile.show-phone    .input-phone    { display: block; }
.modal-form.modal-profile.show-join     .input-join     { display: block; }
.modal-form.modal-profile.show-school   .input-school   { display: block; }
.modal-form.modal-profile.show-subject  .input-subject  { display: block; }
.modal-form.modal-profile.show-password .input-password { display: block; }
.modal-form.modal-profile.show-terms    .input-terms    { display: block; }


@media screen and (max-width: 800px) {
	.modal-form.modal-profile .container { width: 300px; }
	.modal-form.modal-profile .form      { padding: 30px; }
}

/* modal my library collections */

.modal-form.collection-add-edit .container    { min-width: 260px; max-width: 480px; padding: 60px; font-size: 14px; }
.modal-form.collection-add-edit .ctrls        { margin-top: 60px; }
.modal-form.collection-add-edit .cancel       { float: left; display: block; line-height: 32px; }
.modal-form.collection-add-edit .button       { margin: 0 0 0 auto; }

.modal-form.collection-add-edit .title         { font-size: 24px; margin-bottom: 20px; }
.modal-form.collection-add-edit .form          { margin-left: 230px; min-width: 260px; }

.modal-form.collection-add-edit .left          { float: left; width: 170px; text-align: center; }

.modal-form.collection-add-edit .image         { display: block; width: 170px; height: 170px; border-radius: 4px; overflow: hidden; }
.modal-form.collection-add-edit .image         { background: #eee url('/static/img/cikumas-dim.png') no-repeat center center; background-size: cover; }
.modal-form.collection-add-edit .image label       { position: relative; display: block; width: 100%; height: 100%; background-color: rgba(31, 60, 119, 0.78); cursor: pointer; }
.modal-form.collection-add-edit .image label div   { position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.modal-form.collection-add-edit .image label div   { text-align: center; font-size: 24px; font-weight: 600; color: #fff; }
.modal-form.collection-add-edit .image label div i { font-size: 50px; }
.modal-form.collection-add-edit .image       label { opacity: 0; }
.modal-form.collection-add-edit .image:hover label { opacity: 1; }

.modal-form.collection-add-edit .clear-image       { display: none; padding-top: 10px; font-size: 14px; color: #228dcf; text-decoration: none; }

.modal-form.collection-add-edit .left form a       { display: inline-block; margin-top: 10px; text-decoration: none; }
.modal-form.collection-add-edit .left form a i     { margin-right: 10px; }


@media screen and (max-width: 800px) {
	.modal-form.collection-add-edit .container { padding: 40px; }
	.modal-form.collection-add-edit .left      { display: none; }
	.modal-form.collection-add-edit .form      { margin-left: 0; }
}

/* calendar modals */

.modal-form.task-add .container { width: 390px; font-size: 0; }
@media screen and (max-width: 640px) {
	.modal-form.task-add .container a.close { top: 0; right: 0; width: 54px; height: 54px; line-height: 54px; color: #228dcf; }
}

.modal-form.task-add .container > .title   { line-height: 30px; border-bottom: 1px solid #e5e5e5; font-size: 18px; padding: 12px 20px; }
.modal-form.task-add .container > .btn-new { border-radius: 0; box-shadow: none; width: 100%; }
.modal-form.task-add .form    { position: relative; padding: 30px 20px; }
.modal-form.task-add .back    { display: inline-block; margin-left: -15px; font-size: 18px; width: 30px; text-align: center; }

.modal-form.task-add .list-events                           { position: relative; height: calc(430px - 32px); overflow-x: hidden; overflow-y: auto; }
.modal-form.task-add .list-events > ul                      { padding: 10px 20px; }
.modal-form.task-add .list-events > ul.all-day              { border-bottom: 1px solid #e5e5e5; }
.modal-form.task-add .list-events > ul:empty                { display: none; }
.modal-form.task-add .list-events > ul.empty                { display: none; }
.modal-form.task-add .list-events > ul > li                 { line-height: 36px; }

.modal-form.task-add .list-events > ul > li.asg .icon       { float: left; font-size: 16px; margin-right: 5px; color: #999; }
.modal-form.task-add .list-events > ul > li.asg .time       { float: left; font-size: 14px; margin: 8px 5px 0 2px; padding: 0 6px 0 6px; line-height: 22px; color: #228dcf; background-color: #e5e5e5; border-radius: 15px; cursor: default; }
.modal-form.task-add .list-events > ul > li.asg .time.empty { display: none; }
.modal-form.task-add .list-events > ul > li.asg .info       { float: right; font-size: 14px; }
.modal-form.task-add .list-events > ul > li.asg .event-title { font-size: 14px; }
.modal-form.task-add .list-events > ul > li.asg         a.event-title               { display: block; }
.modal-form.task-add .list-events > ul > li.asg         a.event-title.strikethrough { text-decoration: line-through; }
.modal-form.task-add .list-events > ul > li.asg         span.event-title            { display: none; }
.modal-form.task-add .list-events > ul > li.asg.private a.event-title               { display: none; }
.modal-form.task-add .list-events > ul > li.asg.private span.event-title            { display: block; cursor: default; }

.modal-form.task-add .list-events > ul > li.les > div                { cursor: pointer; }
.modal-form.task-add .list-events > ul > li.les > div > .expand      { float: right; color: #228dcf; font-size: 18px; width: 18px; text-align: center; }
.modal-form.task-add .list-events > ul > li.les > div > .collapse    { float: right; color: #228dcf; font-size: 18px; width: 18px; text-align: center; }
.modal-form.task-add .list-events > ul > li.les > div > .icon        { float: left; width: 15px; text-align: center; font-size: 16px; margin-right: 5px; color: #999; }
.modal-form.task-add .list-events > ul > li.les > div > .time        { float: left; font-size: 14px; margin: 8px 5px 0 2px; padding: 0 6px 0 6px; line-height: 22px; color: #228dcf; background-color: #e5e5e5; border-radius: 15px; cursor: default; }
.modal-form.task-add .list-events > ul > li.les > div > .time.empty  { display: none; }
.modal-form.task-add .list-events > ul > li.les > div > .event-title { display: block; font-size: 14px; color: #228dcf; }

.modal-form.task-add .list-events > ul > li.les > ul                      { margin: 5px 0 5px 20px; line-height: 24px; }
.modal-form.task-add .list-events > ul > li.les > ul > li.asg .icon       { display: none; }
.modal-form.task-add .list-events > ul > li.les > ul > li.asg .time       { float: left; font-size: 14px; margin: 8px 5px 0 2px; padding: 0 6px 0 6px; line-height: 22px; color: #228dcf; background-color: #e5e5e5; border-radius: 15px; cursor: default; }
.modal-form.task-add .list-events > ul > li.les > ul > li.asg .time.empty { display: none; }
.modal-form.task-add .list-events > ul > li.les > ul > li.asg .info       { float: right; font-size: 14px; }
.modal-form.task-add .list-events > ul > li.les > ul > li.asg .event-title { font-size: 14px; }
.modal-form.task-add .list-events > ul > li.les > ul > li.asg         a.event-title               { display: block; }
.modal-form.task-add .list-events > ul > li.les > ul > li.asg         a.event-title.strikethrough { text-decoration: line-through; }
.modal-form.task-add .list-events > ul > li.les > ul > li.asg         span.event-title            { display: none; }
.modal-form.task-add .list-events > ul > li.les > ul > li.asg.private a.event-title               { display: none; }
.modal-form.task-add .list-events > ul > li.les > ul > li.asg.private span.event-title            { display: block; cursor: default; }

.modal-form.task-add .list-events > ul > li.les      .expand   { display: block; }
.modal-form.task-add .list-events > ul > li.les      .collapse { display: none; }
.modal-form.task-add .list-events > ul > li.les.open .expand   { display: none; }
.modal-form.task-add .list-events > ul > li.les.open .collapse { display: block; }

.modal-form.task-add .list-events > ul > li.les      > ul { display: none; }
.modal-form.task-add .list-events > ul > li.les.open > ul { display: block; }

.modal-form.task-add .list-events > ul > li.evt        { font-size: 0; margin: 8px 0; display: flex; align-items: center; }
.modal-form.task-add .list-events > ul > li.evt > *    { display: inline-block; vertical-align: middle; }
.modal-form.task-add .list-events > ul > li.evt .icon  { margin-right: 10px; width: 12px; height: 12px; flex-shrink: 0; }
.modal-form.task-add .list-events > ul > li.evt .inner { flex-grow: 1; max-width: calc(100% - 22px); }
.modal-form.task-add .list-events > ul > li.evt .time  { font-size: 12px; color: #999; line-height: 18px; }
.modal-form.task-add .list-events > ul > li.evt .title { font-size: 14px; color: #282828; line-height: 21px; }
.modal-form.task-add .list-events > ul > li.evt .descr { font-size: 12px; color: #999; line-height: 18px; }
.modal-form.task-add .list-events > ul > li.evt a.title { display: inline-block; color: #228dcf; text-decoration: underline; }
.modal-form.task-add .list-events > ul > li.evt .value       { margin-left: 10px; width: 30px; text-align: right; font-size: 14px; font-weight: bold; color: #1f3c77; }
.modal-form.task-add .list-events > ul > li.evt .value:empty { display: none; }

.modal-form.task-add .list-events > ul > li.evt-school      > .icon { background-color: #228dcf; }
.modal-form.task-add .list-events > ul > li.evt-national    > .icon { background-color: #10B163; } /* deprecated */
.modal-form.task-add .list-events > ul > li.evt-holiday     > .icon { background-color: #10B163; }
.modal-form.task-add .list-events > ul > li.evt-absence     > .icon { background-color: #7C56FF; }
.modal-form.task-add .list-events > ul > li.evt-class-asg   > .icon { background-color: #df1bae; }
.modal-form.task-add .list-events > ul > li.evt-class-post  > .icon { background-color: #666666; }
.modal-form.task-add .list-events > ul > li.evt-school-post > .icon { background-color: #838333; }
.modal-form.task-add .list-events > ul > li.evt-ext-asg     > .icon { background-color: #ff9101; }
.modal-form.task-add .list-events > ul > li.evt-tsk         > .icon { background-color: #df1717; }
.modal-form.task-add .list-events > ul > li.evt-asg         > .icon { background-color: #1f3c77; }
.modal-form.task-add .list-events > ul > li.evt-les         > .icon { background-color: #1f3c77; }
.modal-form.task-add .list-events > ul > li.evt-gcal        > .icon { background-color: #a2d053; }
.modal-form.task-add .list-events > ul > li.evt-gcal-allday > .icon { background-color: #a2d053; }
.modal-form.task-add .list-events > ul > li.evt-school-res  > .icon { background-color: #01c4ce; }
.modal-form.task-add .list-events > ul > li.evt-cycle1a     > .icon { background-color: #fc89d9; }
.modal-form.task-add .list-events > ul > li.evt-cycle1b     > .icon { background-color: #fc89d9; }
.modal-form.task-add .list-events > ul > li.evt-cycle2      > .icon { background-color: #cf6fb2; }
.modal-form.task-add .list-events > ul > li.evt-cycle3      > .icon { background-color: #aa5e93; }
.modal-form.task-add .list-events > ul > li.evt-cycles-all  > .icon { background-color: #80456e; }
.modal-form.task-add .list-events > ul > li.evt-visit       > .icon { background-color: #07693a; }
.modal-form.task-add .list-events > ul > li.evt-parent-talk > .icon { background-color: #075269; }
.modal-form.task-add .list-events > ul > li.evt-employee    > .icon { background-color: #836a17; }
.modal-form.task-add .list-events > ul > li.evt-flex-slot   > .icon { background-color: #97e075; }

.modal-form li.evt-school-res                        { display: flex !important; align-items: center; }
.modal-form li.evt-school-res > .icon                { flex-shrink: 0; flex-grow: 0; }
.modal-form li.evt-school-res > form                 { margin: 0; }
.modal-form li.evt-school-res > form > *.icon        { width: 32px; height: 32px; line-height: 32px; font-size: 18px; cursor: pointer; text-align: center; border: none; background-color: transparent; }
.modal-form li.evt-school-res > form > *.act-delete  { color: #ef4949; }
.modal-form li.evt-school-res > form > *.act-edit    { color: #0044CD; }
.modal-form li.evt-school-res > form > *.act-request { color: #10B163; }
.modal-form li.evt-school-res > form > *.act-approve { color: #10B163; }
.modal-form li.evt-school-res > form > *.act-decline { color: #ef4949; }
.modal-form li.evt-school-res > form > *.act-revert  { color: #228dcf; }

.modal-form.task-add .event-attachments           { margin: 5px 0 0 20px; max-width: calc(100% - 20px); line-height: normal; font-size: 12px; }
.modal-form.task-add .event-attachments > ul > li { display: list-item; list-style: square outside; margin: 0; padding: 0; }
.modal-form.task-add .event-attachments > ul > li > a { display: block; font-size: 14px; max-width: 100%; }

.modal-form.task-add .input                 { padding: 3px 0; }
.modal-form.task-add .input:disabled        { background-color: white; }
.modal-form.task-add .input-frame           { margin-bottom: 30px; }
.modal-form.task-add .input-frame > a       { background-color: transparent; }
.modal-form.task-add .input-frame > a:hover { background-color: transparent; }

.modal-form.task-add .reminder              { display: none; margin-bottom: 10px; line-height: 37px; font-size: 14px; }
.modal-form.task-add .reminder .input-frame { float: right; width: 155px; margin: 0; }

.modal-form.task-add .reminder-time                       { display: none; }
.modal-form.task-add .datetime                            { margin-bottom: 10px; }
.modal-form.task-add .reminder-time .input-frame,
.modal-form.task-add .datetime      .input-frame               { display: inline-block; width: calc(50% - 7px); margin-bottom: 10px; }
.modal-form.task-add .reminder-time .input-frame:first-of-type,
.modal-form.task-add .datetime      .input-frame:first-of-type { margin-right: 10px; }
.modal-form.task-add .reminder-time .input-frame .picker,
.modal-form.task-add .datetime      .input-frame .picker     { width: 330px; }
.modal-form.task-add .reminder-time .input-frame .autocomplete,
.modal-form.task-add .datetime      .input-frame .autocomplete { width: 330px; }

.modal-form.task-add .datetime .timepicker ul.autocomplete li:first-of-type { width: 100%; }
.modal-form.task-add .datetime .timepicker ul.autocomplete li .item-title   { text-align: center; }

.modal-form.task-add textarea { height: 100px; max-height: 100px; overflow-y: hidden; }
.modal-form.task-add .button  { width: 100%; }

.modal-form.task-add .multi-day-event      { margin-bottom: 10px; }
.modal-form.task-add .multi-day-event span { font-size: 14px; }

/* school events */

.modal-form.task-add form.delete       { display: block; text-align: center; padding-bottom: 20px; }
.modal-form.task-add form.delete a     { color: #ef4949; text-decoration: none; font-size: 14px; }
.modal-form.task-add form.delete a > i { margin-right: 5px; }


/* assignment revisit */

.modal-form.assignment-revisit .container         { width: 400px; }
.modal-form.assignment-revisit .inner             { padding: 50px; }
.modal-form.assignment-revisit .inner .title      { margin-bottom: 20px; font-size: 24px; }
.modal-form.assignment-revisit .inner .button     { margin: 20px auto 0; }
.modal-form.assignment-revisit .inner label       { display: block; min-height: 18px; line-height: 18px; font-size: 12px; }
.modal-form.assignment-revisit .inner textarea    { border: 1px solid #b2b2b2; border-radius: 3px; }


/* class add-edit */

.modal-form.new.class-add-edit .container                   { width: 600px; }
.modal-form.new.class-add-edit .inner .button               { max-width: 200px; margin: 25px auto 0; }
.modal-form.new.class-add-edit .inner .classowl-input-frame { margin-bottom: 20px; }

@media screen and (max-width: 640px) {
    .modal-form.new.class-add-edit .container                   { width: 360px; }
    .modal-form.new.class-add-edit .inner .button               { max-width: initial; }
}

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

.modal-form.class-add-edit .inner .class-cover                        { margin-bottom: 20px; }
.modal-form.class-add-edit .inner .class-cover > span                 { display: block; color: #999; font-size: 12px; margin-bottom: 10px; }
.modal-form.class-add-edit .inner .class-cover > .preview             { display: block; height: 60px; text-align: center; text-decoration: none; }
.modal-form.class-add-edit .inner .class-cover > .preview             { background: no-repeat center center; background-size: cover; }
.modal-form.class-add-edit .inner .class-cover > .preview             { position: relative; overflow: hidden; }
.modal-form.class-add-edit .inner .class-cover > .preview > div       { position: absolute; top: 100%; left: 0; right: 0; height: 100%; }
.modal-form.class-add-edit .inner .class-cover > .preview > div       { font-size: 12px; color: #fff; background-color: rgba(31, 60, 119, 0.78); }
.modal-form.class-add-edit .inner .class-cover > .preview > div > i   { display: block; font-size: 18px; margin: 10px 0 5px; }
.modal-form.class-add-edit .inner .class-cover > .preview       > div { opacity: 0; top: 100%; }
.modal-form.class-add-edit .inner .class-cover > .preview.empty > div { opacity: 1; top: 0; }
.modal-form.class-add-edit .inner .class-cover > .preview:hover > div { opacity: 1; top: 0; }

.modal-form.class-add-edit .inner .class-cover .clear   { float: right; }
.modal-form.class-add-edit .inner .class-cover .clear a { color: #228dcf; text-decoration: none; }
.modal-form.class-add-edit .inner .class-cover [name='class_cover_id'][value=''] ~ .clear { display: none; }

.modal-form.class-add-edit .inner .class-admin                   { margin-bottom: 10px; }
.modal-form.class-add-edit .inner .class-admin > a               { border: 1px solid #e5e5e5; border-radius: 5px; }
.modal-form.class-add-edit .inner .class-admin > a               { display: block; padding: 0 5px; font-size: 0; line-height: 36px; color: #228dcf; }
.modal-form.class-add-edit .inner .class-admin > a > *           { display: inline-block; vertical-align: middle; }
.modal-form.class-add-edit .inner .class-admin > a > .user-photo { width: 26px; height: 26px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.modal-form.class-add-edit .inner .class-admin > a > .user-name  { width: calc(100% - 41px); margin-left: 5px; font-size: 14px; }
.modal-form.class-add-edit .inner .class-admin > a > i           { font-size: 18px; width: 10px; }

.modal-form.class-add-edit .inner .cikumas-switch                { line-height: 37px; }

.modal-form.class-add-edit .classroom-import             { text-align: center; margin: 30px auto 0; }
.modal-form.class-add-edit .classroom-import > a         { display: inline-block; line-height: 24px; font-size: 14px; }
.modal-form.class-add-edit .classroom-import > a > .icon { display: inline-block; width: 24px; height: 24px; margin-right: 10px; vertical-align: middle; }
.modal-form.class-add-edit .classroom-import > a > .icon { background: url('/static/img/google-classroom.png') no-repeat left center; background-size: contain; }


.modal-form.class-add-edit           .ctrls > form         { margin-top: 10px; font-size: 0; text-align: center; }
.modal-form.class-add-edit           .ctrls > form > a     { font-size: 14px; line-height: 21px; color: #ef4949; }
.modal-form.class-add-edit           .ctrls .unlink        { display: none; }
.modal-form.class-add-edit           .ctrls .unlink-remove { display: none; }
.modal-form.class-add-edit           .ctrls .remove        { display: block; }

.modal-form.class-add-edit.classroom .ctrls .unlink        { display: block; }
.modal-form.class-add-edit.classroom .ctrls .unlink-remove { display: block; }
.modal-form.class-add-edit.classroom .ctrls .remove        { display: none; }


/* class covers */

.modal-form.class-covers .container        { width: 600px; }
.modal-form.class-covers .form             { padding: 50px; }

.modal-form.class-covers div.tabs              { margin-top: 20px; }
.modal-form.class-covers div.tabs > *          { display: none; }
.modal-form.class-covers div.tabs > *.selected { display: block; }

.modal-form.class-covers ul.covers       { position: relative; overflow-x: hidden; overflow-y: auto; }
.modal-form.class-covers ul.covers       { margin: 0 -15px; padding: 0; font-size: 0; text-align: center; height: 320px; }
.modal-form.class-covers ul.covers  > li { margin: 10px; padding: 0; list-style-type: none; }
.modal-form.class-covers ul.covers  > li { display: inline-block; width: calc(50% - 25px); }
.modal-form.class-covers ul.covers  > li > a { display: block; height: 60px; border-radius: 3px; position: relative; }
.modal-form.class-covers ul.covers  > li > a { background: no-repeat center center; background-size: cover; }
.modal-form.class-covers ul.covers  > li.hide { display: none; }

.modal-form.class-covers ul.covers  > li > a > span { position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 3px; }
.modal-form.class-covers ul.covers  > li.selected > a        { box-shadow: 0 3px 5px rgba(0,0,0,0.3); }
.modal-form.class-covers ul.covers  > li.selected > a > span { border: 2px solid #ffbc2d; box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }

.modal-form.class-covers .ctrls           { margin-top: 20px; line-height: 32px; text-align: right; }
.modal-form.class-covers .ctrls > *       { display: inline-block; vertical-align: middle; font-size: 14px; }
.modal-form.class-covers .ctrls > .button { width: 130px; }
.modal-form.class-covers .ctrls > .clear  { color: #228dcf; float: left; }
.modal-form.class-covers .ctrls > .cancel { color: #228dcf; margin-right: 30px; }
.modal-form.class-covers .ctrls > .button[disabled] { background-color: #999; }

.modal-form.class-covers .cikumas-uploader          { position: relative; height: 365px; }
.modal-form.class-covers .cikumas-uploader          { border: 1px dashed #1f3c77; border-radius: 3px; }
.modal-form.class-covers .cikumas-uploader.hover    { border: 1px dashed #228dcf; background-color: #e5e5e5; }

.modal-form.class-covers .cikumas-uploader > .preview { display: block; position: absolute; top: 10px; left: 10px; right: 10px; height: 100px; }
.modal-form.class-covers .cikumas-uploader > .preview { background: no-repeat center center; background-size: cover; }

.modal-form.class-covers .cikumas-uploader > .inner              { position: absolute; transform: translate(-50%, -50%); left: 50%; top: 50%; }
.modal-form.class-covers .cikumas-uploader > .inner              { width: 80%; text-align: center; }
.modal-form.class-covers .cikumas-uploader > .inner label        { cursor: pointer; }
.modal-form.class-covers .cikumas-uploader > .inner label > span { display: inline-block; color: #228dcf; font-size: 14px; line-height: 24px; }
.modal-form.class-covers .cikumas-uploader > .inner > .or        { color: #999; font-size: 12px; margin: 20px 0; }

.modal-form.class-covers .cikumas-uploader > .inner .external                { padding-bottom: 20px; text-align: center; font-size: 14px; }
.modal-form.class-covers .cikumas-uploader > .inner .external .gd-link       { display: inline-block; margin: 0 10px; line-height: 24px; padding-left: 30px; text-decoration: none; }
.modal-form.class-covers .cikumas-uploader > .inner .external .gd-link       { background: url('/static/img/google-drive.png') no-repeat left center; background-size: auto 100%; }
.modal-form.class-covers .cikumas-uploader > .inner .external .gd-link:hover { color: #1f3c77; }
.modal-form.class-covers .cikumas-uploader > .inner .external .db-link       { display: inline-block; margin: 0 10px; line-height: 24px; padding-left: 30px; text-decoration: none; }
.modal-form.class-covers .cikumas-uploader > .inner .external .db-link       { background: url('/static/img/dropbox.png') no-repeat left center; background-size: auto 100%; }
.modal-form.class-covers .cikumas-uploader > .inner .external .db-link:hover { color: #1f3c77; }

.modal-form.class-covers .cikumas-uploader > progress                       { display: block; position: absolute; bottom: 0; left: 0; right: 0; height: 5px; }
.modal-form.class-covers .cikumas-uploader > progress                       { border: none; }
.modal-form.class-covers .cikumas-uploader > progress                       { appearance: none; -moz-appearance: none; -webkit-appearance: none; background-color: transparent; }
.modal-form.class-covers .cikumas-uploader > progress::-webkit-progress-bar { background-color: transparent; }
.modal-form.class-covers .cikumas-uploader > progress::-ms-fill             { border: none; }

.modal-form.class-covers .cikumas-uploader > progress::-ms-fill               { background-color: #228dcf; }
.modal-form.class-covers .cikumas-uploader > progress::-moz-progress-bar      { background-color: #228dcf; }
.modal-form.class-covers .cikumas-uploader > progress::-webkit-progress-value { background-color: #228dcf; }

.modal-form.class-covers .cikumas-uploader > .icon    { position: absolute; left: 50%; top: 80%; transform: translate(-50%, -50%); width: 50%; height: 50%; }
.modal-form.class-covers .cikumas-uploader > .icon    { background: url('/static/img/ajax-loader.gif') no-repeat center center; }
.modal-form.class-covers .cikumas-uploader >                         .icon { display: none; }
.modal-form.class-covers .cikumas-uploader > progress[value="100"]         { display: none; }
.modal-form.class-covers .cikumas-uploader > progress[value="100"] ~ .icon { display: block; }


/* class teachers */

.modal-form.class-teachers .container           { width: 500px; }
.modal-form.class-teachers .title               { margin-bottom: 20px; font-size: 24px; }
.modal-form.class-teachers .form                { padding: 50px; }
.modal-form.class-teachers .form .ctrls         { margin-top: 20px; text-align: right; }
.modal-form.class-teachers .form .ctrls .cancel { display: inline-block; line-height: 32px; margin-right: 20px; font-size: 14px; }
.modal-form.class-teachers .form .ctrls .button { display: inline-block; }

.modal-form.class-teachers .form .lookup          { margin-bottom: 20px; }
.modal-form.class-teachers .form .lookup > .input { margin-bottom: 0; }

.modal-form.class-teachers .form .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; }
.modal-form.class-teachers .form .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; }
.modal-form.class-teachers .form .list > .user > .info  { display: inline-block; vertical-align: middle; width: calc(100% - 160px); }
.modal-form.class-teachers .form .list > .user > .info > .name   { font-size: 14px; color: #228dcf; line-height: 22px; }
.modal-form.class-teachers .form .list > .user > .info > .email  { font-size: 12px; color: #999; line-height: 18px; }
.modal-form.class-teachers .form .list > .user > i               { display: inline-block; vertical-align: middle; font-size: 18px; width: 10px; }
.modal-form.class-teachers .form .list > .user > .cikumas-switch { vertical-align: middle; }
.modal-form.class-teachers .form .list > .user > .remove         { position: absolute; top: 50%; right: 0; transform: translate(100%, -50%); }
.modal-form.class-teachers .form .list > .user > .remove         { display: none; color: #ef4949; font-size: 18px; width: 30px; text-align: center; }
.modal-form.class-teachers .form .list > .user:hover > .remove   { display: block; }
.modal-form.class-teachers .form .list > .user:last-child:first-child:hover > .remove { display: none; }

.modal-form.class-teachers          .form .ctrls .button { display: none; }
.modal-form.class-teachers.editable .form .ctrls .button { display: inline-block; }

.modal-form.class-teachers          .form .lookup { display: none; }
.modal-form.class-teachers.editable .form .lookup { display: block; }

.modal-form.class-teachers          .form .list > .user > .cikumas-switch { display: none; }
.modal-form.class-teachers.editable .form .list > .user > .cikumas-switch { display: inline-block; }

.modal-form.class-teachers          .form .list > .user:hover > .remove { display: none; }
.modal-form.class-teachers.editable .form .list > .user:hover > .remove { display: block; }


/* welcome popup */

.modal-form.modal-welcome               { display: block; }
.modal-form.modal-welcome .container    { min-width: 300px; max-width: 480px; }
.modal-form.modal-welcome .form         { padding: 60px; font-size: 14px; }
.modal-form.modal-welcome .ctrls        { margin-top: 40px; }
.modal-form.modal-welcome .cancel       { float: left; display: block; line-height: 32px; }
.modal-form.modal-welcome .button       { margin: 0 0 0 auto; }

@media screen and (max-width: 800px) {
	.modal-form.modal-welcome .form      { padding: 30px; }
}


/* tutorial */

.modal-form.modal-tutorial .container  { width: 480px; /*576px;*/ line-height: normal; }
.modal-form.modal-tutorial .form       { padding: 40px 30px; font-size: 0; }
.modal-form.modal-tutorial .form h2    { font-size: 18px; color: #282828; }
.modal-form.modal-tutorial .form .opts { text-align: center; margin-top: 20px; }

.modal-form.modal-tutorial .form .launch            { display: inline-block; vertical-align: top; margin: 0 10px 20px; width: 150px; height: 150px; text-decoration: none; text-align: center; border: 1px solid #f1f1f1; }
.modal-form.modal-tutorial .form .launch .icon      { width: 100%; height: 110px; background: no-repeat center center; }

.modal-form.modal-tutorial .form .launch .text      { position: relative; height: 40px; line-height: 18px; font-size: 12px; border-top: 1px solid #f1f1f1; color: #264A84; }
.modal-form.modal-tutorial .form .launch .text span { position: absolute; left: 0; right: 0; top: 50%; transform: translate(0, -50%); display: block; overflow: hidden; text-overflow: ellipsis; }

.modal-form.modal-tutorial .form .launch:hover       { border: 1px solid #57D77C; }
.modal-form.modal-tutorial .form .launch:hover .text { border-top: 1px solid #57D77C; background-color: #57D77C; color: #fff; }


.modal-form.modal-tutorial-welcome .container  { width: 576px; line-height: normal; }
.modal-form.modal-tutorial-welcome .form       { padding: 30px; font-size: 0; text-align: center; }
.modal-form.modal-tutorial-welcome .form h2       { font-size: 20px; color: #2D477F; }
.modal-form.modal-tutorial-welcome .form h2 .hint { font-size: 12px; margin: 0; }

.modal-form.modal-tutorial-welcome .form .slides-intro .start    { margin: 20px auto 0; width: 516px; height: 270px; max-width: 100%; background: url('/static/img/tutorial/start.png') no-repeat center center; background-size: cover; }
.modal-form.modal-tutorial-welcome .form .slides-intro .button   { margin: 20px auto 0; }
.modal-form.modal-tutorial-welcome .form .slides-intro .cancel   { margin: 10px auto 0; font-size: 12px; }
.modal-form.modal-tutorial-welcome .form .slides-intro .cancel a { text-decoration: none; }

.modal-form.modal-tutorial-welcome .form .slides                         { display: none; }
.modal-form.modal-tutorial-welcome .form .slides .youtube-frame          { margin: 20px auto; }
.modal-form.modal-tutorial-welcome .form .slides .youtube-frame          { position: relative; width: 100%; height: 0; padding-bottom: 51%; }
.modal-form.modal-tutorial-welcome .form .slides .youtube-frame > iframe { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }

.modal-form.modal-tutorial-welcome .form .slides .ctrls           { min-height: 32px; }
.modal-form.modal-tutorial-welcome .form .slides .button          { padding: 0; }
.modal-form.modal-tutorial-welcome .form .slides .classroom       { position: relative; overflow: hidden; }
.modal-form.modal-tutorial-welcome .form .slides .classroom .icon { float: left; width: 40px; height: 32px; background: #fff url('/static/img/google-classroom.png') no-repeat center center; background-size: 50%; }

.modal-form.modal-tutorial-welcome .form .slides .button.btnP { background-color: transparent; color: #2D477F; border: 1px solid #2D477F; }
.modal-form.modal-tutorial-welcome .form .slides .button.btnN { background-color: #21C170; color: #fff; border: 1px solid #21C170;  }
.modal-form.modal-tutorial-welcome .form .slides .button.btnC { background-color: #25A667; color: #fff; border: 1px solid #25A667; }
.modal-form.modal-tutorial-welcome .form .slides .button.btnF { background-color: #2D477F; color: #fff; border: 1px solid #2D477F;  }

.modal-form.modal-tutorial-welcome .form .slides .button.btnP { width: 80px; float: left; }
.modal-form.modal-tutorial-welcome .form .slides .button.btnN { width: 80px; float: right; }
.modal-form.modal-tutorial-welcome .form .slides .button.btnC { width: 250px; margin: 0 auto; }
.modal-form.modal-tutorial-welcome .form .slides .button.btnF { width: 80px; float: right; }

.modal-form.modal-tutorial-welcome .form .slides .button.btnP:active { background-color: transparent !important; color: #2D477F !important; border: 1px solid #2D477F !important; }
.modal-form.modal-tutorial-welcome .form .slides .button.btnN:active { background-color: #21C170 !important; color: #fff !important; border: 1px solid #21C170 !important;  }
.modal-form.modal-tutorial-welcome .form .slides .button.btnC:active { background-color: #25A667 !important; color: #fff !important; border: 1px solid #25A667 !important; }
.modal-form.modal-tutorial-welcome .form .slides .button.btnF:active { background-color: #2D477F !important; color: #fff !important; border: 1px solid #2D477F !important;  }

.modal-form.modal-tutorial-welcome .form .slides .progress            { position: relative; min-height: 12px; margin: 20px auto; }
.modal-form.modal-tutorial-welcome .form .slides .progress > *        { position: relative; display: inline-block; width: 10px; height: 10px; margin-left: 100px; background-color: #e5e5e5; border: 1px solid #fff; border-radius: 50%; }
.modal-form.modal-tutorial-welcome .form .slides .progress > *:before { position: absolute; content: ''; top: calc(50% - 2px); right: 100%; height: 2px; width: 100px; background-color: inherit; border: 1px solid #fff; }

.modal-form.modal-tutorial-welcome .form .slides .progress > *:first-child        { margin-left: 0; }
.modal-form.modal-tutorial-welcome .form .slides .progress > *:first-child:before { display: none; }

.modal-form.modal-tutorial-welcome .form .slides .progress.s1 > *.slide1 { background-color: #0074DF; }
.modal-form.modal-tutorial-welcome .form .slides .progress.s2 > *.slide2 { background-color: #0074DF; }
.modal-form.modal-tutorial-welcome .form .slides .progress.s3 > *.slide3 { background-color: #0074DF; }
.modal-form.modal-tutorial-welcome .form .slides .progress.s4 > *.slide4 { background-color: #0074DF; }
.modal-form.modal-tutorial-welcome .form .slides .progress.s5 > *.slide5 { background-color: #0074DF; }

body         .modal-form.modal-tutorial .form .launch.video-tutorial { display: none; }
body.teacher .modal-form.modal-tutorial .form .launch.video-tutorial { display: inline-block; }

body         .modal-form.modal-tutorial .form .launch.welcome-tutorial { display: none; }
body.teacher .modal-form.modal-tutorial .form .launch.welcome-tutorial { display: none; }