/*
 * assign to students modal
 */


.modal-container .modal-assign { position: relative; max-width: 780px; background-color: #fff; margin: 50px auto 0; font-size: 14px; }
.modal-container .modal-assign .modal-body.empty { display: none; }
.modal-container.no-students .modal-assign .modal-body { display: none; }
.modal-container.no-students .modal-assign .modal-body.empty { display: block; }
.modal-container.no-students .modal-assign .modal-header .toggle-all { display: none; }
.modal-container.no-students .modal-assign .modal-footer { display: none; }

.modal-assign .modal-body { min-height: 212px; border-color: #e6e6e6; border-style: solid; border-width: 1px 0 1px 0; display: flex; flex-direction: row; }


.modal-assign .classes-screen { display: none; }
.modal-assign .classes-screen .modal-header { padding: 18px 30px; }
.modal-assign .classes-screen .modal-header h2 { font-size: 22px; }
.modal-assign .classes-screen .modal-header.more { display: none; padding: 15px 20px 10px 20px; }
.modal-assign .classes-screen.more-classes .modal-header { display: none; }
.modal-assign .classes-screen.more-classes .modal-header.more { display: block; }
.modal-assign .classes-screen .modal-header .class { display: inline-block; position: relative; width: 125px; margin-right: 20px; margin-bottom: 5px; }
.modal-assign .classes-screen .modal-header .class .name { width: 110px; font-size: 14px;  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-assign .classes-screen .modal-header .class .students { color: #228dcf; font-size: 12px; }
.modal-assign .classes-screen .modal-header .class .close { font-size: 20px; color: #228dcf; top: 0; right: 0; width: 20px; height: 20px; line-height: 20px; cursor: pointer; }
.modal-assign .classes-screen .modal-body .class-list { width: 100%; max-height: 470px; overflow-x: hidden; overflow-y: auto; position: relative; }
.modal-assign .classes-screen .modal-body .class-list li { padding: 10px 20px; border-color: #e6e6e6; border-style: solid; border-width: 0 0 1px 0; overflow: hidden; cursor: pointer; }
.modal-assign .classes-screen .modal-body .class-list li:last-child { border: none; }
.modal-assign .classes-screen .modal-body .class-list li:hover { background-color: #e3e8eb; }
.modal-assign .classes-screen .modal-body .class-list li.selected { background-color: #1f3c77; }
.modal-assign .classes-screen .modal-body .class-list li.selected .class-name { color: #fff; }
.modal-assign .classes-screen .modal-body .class-list li.selected .number-students { color: #fff; }
.modal-assign .classes-screen .modal-body .class-list ul li .class-checkbox { float: left; width: 20px; margin-top: 10px; margin-right: 20px; }
.modal-assign .classes-screen .modal-body .class-list ul li .class-img { float: left; width: 36px; height: 36px; background: #a2d053 url(/static/img/cikumas-dim.png) center center no-repeat; background-size: cover; border-radius: 50%; }
.modal-assign .classes-screen .modal-body .class-list ul li .class-arrow { float: right; margin-top: 3px; width: 20px; height: 32px; line-height: 32px; text-align: center; font-size: 31px; color: #228dcf;  }
.modal-assign .classes-screen .modal-body .class-list ul li .inner-text { margin-left: 95px; margin-top: 0; max-width: 440px; }
.modal-assign .classes-screen .modal-footer { justify-content: center; }

.modal-assign .class-students                               { margin: 0; padding: 0; box-shadow: none; }
.modal-assign .class-students .modal-header                 { padding: 15px 30px; }
.modal-assign .class-students .modal-header .toggle-all     { position: relative; display: block; cursor: pointer; text-decoration: none; font-size: 14px; }
.modal-assign .class-students .modal-header .back2class     { font-size: 0; cursor: default; }
.modal-assign .class-students .modal-header .back2class .fa { position: relative; top: -5px; color: #228dcf; font-size: 31px; margin-right: 20px; cursor: pointer; }
.modal-assign .class-students .modal-header .back2class .class-wrap                      { display: inline-block; max-width: 425px; font-size: 18px; }
.modal-assign .class-students .modal-header .back2class .class-wrap .class-student-count { color: #228dcf; font-size: 12px; }
.modal-assign .class-students .modal-header .back2class .class-wrap .class-name          { max-width: 500px; font-size: 14px; }

.modal-assign .class-students .modal-body .students-list { width: 100%; height: 240px; overflow: hidden; position: relative; }

.modal-assign .class-students .modal-body .students-list ul li                   { padding: 5px 30px; border-color: #e6e6e6; border-style: solid; border-width: 0 0 1px 0; overflow: hidden; cursor: pointer; }
.modal-assign .class-students .modal-body .students-list ul li:hover             { background-color: #e3e8eb; }
.modal-assign .class-students .modal-body .students-list ul li > *               { display: inline-block; vertical-align: middle; }
.modal-assign .class-students .modal-body .students-list ul li.selected          { background-color: #e8f3fa; border-color: #228dcf; }
.modal-assign .class-students .modal-body .students-list ul li .student-foto     { width: 24px; height: 24px; margin-right: 10px; border-radius: 50%; overflow: hidden; }
.modal-assign .class-students .modal-body .students-list ul li .student-foto img { height: 100%; }
.modal-assign .class-students .modal-body .students-list ul li .inner-text       { margin-left: 15px; height: 24px; line-height: 24px; box-sizing: border-box; }
.modal-assign .class-students .modal-body .students-list ul li .inner-text .student-full-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-assign .class-students .modal-body .students-list ul li .cikumas-checkbox              { position: relative; float: right; margin-top: 2px; }
.modal-assign .class-students .modal-body .students-list ul li .cikumas-checkbox label span   { display: none; }

.modal-assign .class-students .modal-footer      { position: relative; display: block; padding: 20px 30px 30px; }
.modal-assign .class-students .modal-footer h2   { font-size: 16px; margin-bottom: 15px; }
.modal-assign .class-students .modal-footer .row { display: block; width: 100%; box-sizing: border-box; font-size: 0; }
.modal-assign .class-students .modal-footer .row .col               { display: inline-block; vertical-align: top; }
.modal-assign .class-students .modal-footer .row .col:first-of-type { width: calc(30% - 15px); margin-right: 15px; }
.modal-assign .class-students .modal-footer .row .col:last-of-type  { width: calc(70% - 15px); margin-left: 15px; margin-bottom: 42px; }
.modal-assign .class-students .modal-footer .row .col .assignment-switch              { font-size: 0; column-count: 3; column-gap: 10px; }
.modal-assign .class-students .modal-footer .row .col .assignment-switch li           { margin-bottom: 10px; cursor: pointer; }
.modal-assign .class-students .modal-footer .row .col .assignment-switch li label     { position: relative; cursor: pointer; }
.modal-assign .class-students .modal-footer .row .col .assignment-switch li label > * { display: inline-block; vertical-align: middle; }
.modal-assign .class-students .modal-footer .row .col .assignment-switch li .check              { margin-right: 5px; position: relative; border: 1px solid #ddd; border-radius: 100%; height: 15px; width: 15px; transition: border .25s linear; -webkit-transition: border .25s linear; }
.modal-assign .class-students .modal-footer .row .col .assignment-switch li .check::before      { display: block; position: absolute; content: ''; border-radius: 100%; height: 7px; width: 7px; top: 4px; left: 4px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; }
.modal-assign .class-students .modal-footer .row .col .assignment-switch li .icon-asg-type      { margin-right: 5px; width: 25px; height: 25px; border-radius: 3px; }
.modal-assign .class-students .modal-footer .row .col .assignment-switch li        .option-text { line-height: 25px; color: #999999; font-size: 14px; max-width: calc(100% - 60px); }
.modal-assign .class-students .modal-footer .row .col .assignment-switch li.active .option-text { color: #228dcf; }
.modal-assign .class-students .modal-footer .row .col .assignment-switch li input[type=radio]   { position: absolute; display: none; }
.modal-assign .class-students .modal-footer .row .col .assignment-switch li input[type=radio]:checked ~ .check::before { background: #228dcf; }
.modal-assign .class-students .modal-footer .row .col .assign-nodue { font-size: 14px; }
.modal-assign .class-students .modal-footer .row .col .option       { display: block;line-height: 32px; font-size: 14px; text-decoration: none; cursor: pointer; }
.modal-assign .class-students .modal-footer .row .col .remark       { display: block; }
.modal-assign .class-students .modal-footer .row .col .remark font  { display: inline; }
.modal-assign .class-students .modal-footer > button                { display: block; margin: -32px 0 0 auto; width: 269px; }

.modal-assign .class-students .modal-footer .picker.dropup                               { bottom: 50px; min-width: 300px; }
.modal-assign .class-students .modal-footer .picker.dropup .picker__holder               { left: 0; bottom: 100%; }
.modal-assign .class-students .modal-footer .picker.dropup .picker__nav--disabled        { cursor: default; }
.modal-assign .class-students .modal-footer .picker.dropup .picker__nav--disabled:before { border-left-color: #dddddd; border-right-color: #dddddd; }
.modal-assign .class-students .modal-footer .picker.dropup .picker__nav--disabled:hover  { background: white; color: #dddddd; }

.modal-assign .class-students .modal-footer .timepicker ul.autocomplete                      { bottom: 100%; margin-bottom: 7px; min-width: 300px; }
.modal-assign .class-students .modal-footer .timepicker ul.autocomplete li                   { display: inline-block; width: 25%; text-align: center; }
.modal-assign .class-students .modal-footer .timepicker ul.autocomplete li a                 { text-align: center; }
.modal-assign .class-students .modal-footer .timepicker ul.autocomplete li:first-of-type     { width: 100%; }
.modal-assign .class-students .modal-footer .timepicker ul.autocomplete li .item-title       { text-align: center; }

.modal-assign .class-students .modal-footer .input-frame                  { position: relative; margin: 0 0 15px 0; }
.modal-assign .class-students .modal-footer .input-frame .input           { display: block; width: 100%; border: 1px solid #ddd; border-radius: 4px; padding: 6px 39px 6px 10px; font-size: 14px; min-height: 39px; resize: none; }
.modal-assign .class-students .modal-footer .input-frame textarea.input   { line-height: initial; }
.modal-assign .class-students .modal-footer .input-frame p                { margin: 0; text-align: left; }
.modal-assign .class-students .modal-footer .input-frame .picker__input { margin-bottom: 16px; }
.modal-assign .class-students .modal-footer .input-frame .input.public    { margin-bottom: 16px; }
.modal-assign .class-students .modal-footer .input-frame > .icon          { position: absolute; right: 0; top: 0; font-size: 18px; width: 39px; line-height: 44px; text-align: center; text-decoration: none; cursor: default; }
.modal-assign .class-students .modal-footer .input-frame > .icon          { cursor: pointer; background-color: transparent; border-radius: 0 4px 4px 0; }
.modal-assign .class-students .modal-footer .input-frame > .input:disabled ~ .icon { color: #999; }

.modal-assign .class-students .modal-footer .labeled-input-frame.asgtypes  { display: inline-block; vertical-align: top; width: calc(50% - 10px); margin-right: 10px; }
.modal-assign .class-students .modal-footer .labeled-input-frame.weighting { display: inline-block; vertical-align: top; width: calc(50% - 10px); margin-left: 10px; }
.modal-assign .class-students .modal-footer .labeled-input-frame > label   { margin-bottom: 5px; font-size: 12px; color: #1f3c77; }

.modal-assign .class-students .modal-footer .options-advanced                                { height: 300px; }
.modal-assign .class-students .modal-footer .options-advanced .cikumas-checkbox              { margin-bottom: 15px; }
.modal-assign .class-students .modal-footer .options-advanced .cikumas-checkbox label        { line-height: 20px; vertical-align: top; }
.modal-assign .class-students .modal-footer .options-advanced .cikumas-checkbox .check-label { color: #228dcf; }
.modal-assign .class-students .modal-footer .options-advanced .header                        { position: relative; height: 55px; }
.modal-assign .class-students .modal-footer .options-advanced .header h1                     { font-size: 22px; }
.modal-assign .class-students .modal-footer .options-advanced .header .close                 { position: absolute; top: 0; right: 0; font-size: 22px; color: #228dcf; text-decoration: none; cursor: pointer; }

.modal-assign                   .assignment-switch > .competency { display: none; }
.modal-assign.assign-collection .assignment-switch > .competency { display: block; }

.modal-assign                   .options-general .assign-nodue { display: none; }
.modal-assign.assign-collection .options-general .assign-nodue { display: block; }

.modal-assign               .class-students { display: none; }
.modal-assign               .classes-screen { display: none; }
.modal-assign.step-classes  .classes-screen { display: block; }
.modal-assign.step-students .class-students { display: block; }

.modal-assign.step-students .modal-footer          .options-general { display: block; }
.modal-assign.step-students .modal-footer          .options-advanced { display: none; }
.modal-assign.step-students .modal-footer.advanced .options-general { display: none; }
.modal-assign.step-students .modal-footer.advanced .options-advanced { display: block; }