.classes-frame                    { position: relative; padding: 40px 20px 20px 40px; }


.classes-list > .heading          { display: flex; align-items: center; margin-bottom: 20px; }
.classes-list > .heading > .title { flex-grow: 0; flex-shrink: 0; font-size: 14px; color: #1f3c77; margin-right: 10px; }
.classes-list > .heading > .hline { flex-grow: 1; flex-shrink: 1; height: 1px; background-color: #ccc; margin-top: 3px; }

.classes-list > .heading > .ctrl-expand { flex-grow: 0; flex-shrink: 0; padding: 5px 10px; }
.classes-list > .heading > .ctrl-expand { font-size: 18px; color: #228dcf; cursor: pointer; }

.classes-list > .items { display: flex; align-items: stretch; flex-wrap: wrap; }

.classes-list          .state0 { display: block; }
.classes-list          .state1 { display: none; }
.classes-list          .items  { display: none; }
.classes-list.expanded .state0 { display: none; }
.classes-list.expanded .state1 { display: block; }
.classes-list.expanded .items  { display: flex; }

.classes-filter      { margin-right: 10px; display: flex; justify-content: flex-end; }
.classes-filter .classowl-multiselect > .drop-icon { background-color: #fff; white-space: nowrap; }


.classes-block                       { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); margin: 0 20px 20px 0; }
.classes-block                       { display: inline-block; vertical-align: top; width: 280px; }
.classes-block > .title              { position: relative; background-color: #1f3c77; height: 80px; overflow: hidden; }
.classes-block > .title div          { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% - 40px); }
.classes-block > .title div          { color: #fff; text-align: center; font-weight: 600; font-size: 18px; text-overflow: ellipsis; overflow: hidden; }
.classes-block > .inner              { padding: 20px 20px 25px; font-size: 14px; position: relative; }
/*
body.teacher .classes-block > .inner { min-height: 280px; }
body.student .classes-block > .inner { min-height: 210px; }
*/
.classes-block .teacher              { padding-bottom: 25px; line-height: 23px; }
.classes-block .teacher > .photo     { float: left; width: 46px; height: 46px; border-radius: 50%; overflow: hidden; margin-right: 9px; }
.classes-block .teacher > .photo     { background: no-repeat center center; background-size: cover; }
.classes-block .teacher > .title     { font-size: 12px; color: #999; font-weight: 600; text-transform: uppercase; }
.classes-block .teacher > .name      { font-size: 14px; color: #228dcf; }
.classes-block .classmates           { padding: 0 0 35px; display: inline-block; line-height: 21px; font-size: 14px; }
.classes-block .classmates i         { float: left; display: block; line-height: 21px; width: 46px; color: #228dcf; text-align: center; font-size: 16px; margin-right: 9px; }
.classes-block .button               { width: 100%; }

.classes-block .prop                 { font-size: 14px; color: #282828; line-height: 31px; }
.classes-block .students             { display: flex; align-items: center; }
.classes-block .students             { font-size: 14px; line-height: 21px; color: #228dcf; padding: 10px 0 20px; }
.classes-block .students i           { font-size: 16px; width: 21px; text-align: center; margin-right: 9px; }

.classes-block > .inner span         { font-weight: bold; }

.classes-block       > .title a       { position: absolute; display: none; color: #999; left: 0; top: 0; font-size: 18px; width: 30px; line-height: 30px; text-align: center; }
.classes-block:hover > .title a       { display: block; }
.classes-block       > .title a:hover { color: #fff; }

.classes-block > .inner > .owner          { float: right; border-radius: 16px; line-height: 26px; padding: 3px 8px 3px 3px; background-color: #ff9211; font-size: 0; }
.classes-block > .inner > .owner > *      { display: inline-block; vertical-align: middle; }
.classes-block > .inner > .owner > .photo { border-radius: 50%; width: 26px; height: 26px; background: no-repeat center center; background-size: cover; }
.classes-block > .inner > .owner > .title { margin-left: 3px; color: #fff; font-size: 14px; }

/* inline class add */

.classes-block.inline-add                               { border: 1px solid #E4E5E7; border-radius: 5px; box-shadow: 1px 2px 3px 0 rgba(0,0,0,0.1); }
.classes-block.inline-add > .title                      { background-color: transparent; border-bottom: 1px solid #E4E5E7; }
.classes-block.inline-add > .title div                  { color: #657FAC; }
.classes-block.inline-add .classowl-input-frame         { margin-bottom: 15px; }
.classes-block.inline-add .classowl-input-frame > input { border: 1px solid #E4E5E7; }
.classes-block.inline-add .hint                         { min-height: 60px; color: #657FAC; font-size: 12px; line-height: 18px; margin-bottom: 15px; }
.classes-block.inline-add .classroom-import             { text-align: center; margin: 0 auto 17px; }
.classes-block.inline-add .classroom-import > a         { max-width: 100%; height: 24px; line-height: 24px; font-size: 0; }
.classes-block.inline-add .classroom-import > a > *     { display: inline-block; vertical-align: middle; }
.classes-block.inline-add .classroom-import > a > .icon { width: 24px; height: 24px; margin-right: 10px; }
.classes-block.inline-add .classroom-import > a > .icon { background: url('/static/img/google-classroom.png') no-repeat left center; background-size: contain; }
.classes-block.inline-add .classroom-import > a > .text { width: calc(100% - 34px); font-size: 14px; font-weight: normal; }
.classes-block.inline-add .classroom-import         > a { display: none; }
.classes-block.inline-add .classroom-import.enabled > a { display: inline-block; }
.classes-block.inline-add .classowl-button              { width: 100%; }

.classes-block.inline-add .cikumas-switch               { margin-bottom: 15px; line-height: 34px; }


.classes-add          { margin: 0 20px 20px 0; }
.classes-add a        { display: block; margin-left: auto; position: relative; }
.classes-add a        { color: #fff; background-color: #228dcf; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.classes-add a        { width: 60px; line-height: 60px; border-radius: 50%; font-size: 36px; text-align: center; text-decoration: none; }
.classes-add a .label { display: block; position: absolute; right: 100%; top: 0; color: #228dcf; padding: 0 10px; font-size: 24px; }


.import-classes ul.rows      { margin: 0; padding: 0; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.import-classes ul.rows > li { margin: 0; padding: 0; list-style-type: none; }
.import-classes ul.rows > li { padding: 20px; border-top: 1px solid #e5e5e5; }
.import-classes ul.rows > li:first-child { border-top: none; }

.import-classes ul.rows > li .column                 { display: inline-block; vertical-align: middle; position: relative; font-size: 14px; }
.import-classes ul.rows > li .column.import-name     { width: calc(50% - 80px); color: #282828; }
.import-classes ul.rows > li .column.import-details  { width: calc(50% - 80px); color: #282828; }
.import-classes ul.rows > li .column.import-class    { width: 160px; text-align: center; color: #999; }

.import-classes ul.rows > li.headline                     { padding: 20px; }
.import-classes ul.rows > li.headline .column.import-name { font-size: 18px; width: calc(100% - 160px); }
.import-classes ul.rows > li.footline                     { padding: 20px; }
.import-classes ul.rows > li.footline .column.import-name { font-size: 14px; width: calc(100% - 160px); }
.import-classes ul.rows > li.footline .column.import-name > div { margin-right: 40px; }
.import-classes ul.rows > li.footline .button             { width: 160px; }

.import-classes .name      { font-size: 18px; color: #228dcf; font-weight: 600; }
.import-classes .section   { color: #228dcf; }
.import-classes .descr     { color: #999; }
.import-classes .room      { color: #999; }
.import-classes .inactive .name    { color: #999; }
.import-classes .inactive .section { color: #999; }
.import-classes                       .cikumas-checkbox  { width: 20px; margin: 0 auto; height: 36px; vertical-align: middle; }
.import-classes ul.rows > li.footline .cikumas-checkbox  { margin: 0 40px 0 0; width: auto; }

.import-info   { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); margin-bottom: 15px; padding: 30px; font-size: 18px; }
.import-info a { display: inline-block; }

.import-info .progress      { display: inline-block; width: 180px; padding: 1px; border: 1px solid #1f3c77; overflow: hidden; }
.import-info .progress span { display: block; width: 0; height: 8px; background-color: #228dcf; }