.class-planner { margin-top: 15px;  }


.planner-list                    { float: left; position: sticky; top: 80px; max-height: calc(100vh - 120px); width: 270px; }
.planner-list .head              { padding: 15px; border-bottom: 1px solid #e5e5e5; font-size: 14px; line-height: 21px; }
.planner-list .search            { padding: 15px; border-bottom: 1px solid #e5e5e5; line-height: 21px; }
.planner-list .search input      { font-size: 12px; border: 1px solid #e5e5e5; border-radius: 4px; padding: 0 3px; }
.planner-list .items             { position: relative; height: calc(100vh - 120px - 52px - 63px); }
.planner-list .items li          { padding: 10px 15px; border-bottom: 1px solid #e5e5e5; border-left: 2px solid transparent; }
.planner-list .items li.hide     { display: none; }
.planner-list .items li > .title { font-size: 14px; color: #228dcf; padding-bottom: 5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.planner-list .items li > .grade { float: right; font-size: 12px; line-height: 24px; }
.planner-list .items li > .ptime { float: right; font-size: 12px; line-height: 24px; color: #999; }
.planner-list .items li > .cikumas-switch { display: inline-block; }

.planner-list .items li           > .grade    { display: block; }
.planner-list .items li           > .ptime    { display: none; }
.planner-list .items li.scheduled > .grade    { display: none; }
.planner-list .items li.scheduled > .ptime    { display: block; }


.planner-matrix .user-card               { font-size: 0; }
.planner-matrix .user-card > .user-photo { display: inline-block; vertical-align: middle; border-radius: 50%; overflow: hidden; }
.planner-matrix .user-card > .user-photo { background: no-repeat center; background-size: cover; }
.planner-matrix .user-card > .user-photo { width: 27px; height: 27px; }
.planner-matrix .user-card > .user-name  { font-size: 12px; font-weight: 600; color: #1f3c77; margin-left: 8px; }
.planner-matrix .user-card > .user-name  { display: inline-block; vertical-align: middle; width: calc(100% - 27px - 8px); }
.planner-matrix .user-card > .user-name  { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.planner-matrix                       { margin-left: 290px; min-width: 850px; }
.planner-matrix .head                 { border-bottom: 1px solid #e5e5e5; white-space: nowrap; }
.planner-matrix .head > *             { display: inline-block; vertical-align: middle; line-height: 21px; }
.planner-matrix .head > .title        { padding: 15px 10px 15px 15px; width: 200px; font-size: 14px; }
.planner-matrix .head > .dates        { padding: 15px 15px 15px 10px; width: calc(100% - 200px); /*background-color: #eee;*/ }
.planner-matrix .head > .dates > span { display: inline-block; vertical-align: middle; /*min-width: 45px;*/ width: 7.14%; }
.planner-matrix .head > .dates > span { color: #228dcf; line-height: 21px; font-size: 12px; text-align: center; }
.planner-matrix .head > .dates > span.today { color: #fff; background-color: #1f3c77; border-radius: 11px; font-weight: bold; }

.planner-matrix .body > .matrix-row                            { display: flex; flex-direction: row; border-bottom: 1px solid #e5e5e5; }
.planner-matrix .body > .matrix-row > .student                 { flex-shrink: 0; padding: 15px 10px 15px 15px; width: 200px; border-right: 1px solid #e5e5e5; }
.planner-matrix .body > .matrix-row > .subitems                { flex-grow: 1; }
.planner-matrix .body > .matrix-row > .subitems > *            { padding: 15px 15px 15px 10px; border-bottom: 1px solid #e5e5e5; }
.planner-matrix .body > .matrix-row > .subitems > *:last-child { border-bottom: none; }

.planner-matrix .body > .matrix-row > .student > .ctrls            { margin-top: 10px; }
.planner-matrix .body > .matrix-row > .student > .ctrls > a        { display: block; color: #228dcf; line-height: 24px; }
.planner-matrix .body > .matrix-row > .student > .ctrls > a > *    { display: inline-block; vertical-align: middle; }
.planner-matrix .body > .matrix-row > .student > .ctrls > a > span { width: calc(100% - 12px); font-size: 12px; }
.planner-matrix .body > .matrix-row > .student > .ctrls > a > i    { width: 12px; font-size: 18px; text-align: right; }

.planner-matrix .body > .matrix-row          > .student > .ctrls > a.expand   { display: block; }
.planner-matrix .body > .matrix-row          > .student > .ctrls > a.collapse { display: none; }
.planner-matrix .body > .matrix-row.expanded > .student > .ctrls > a.collapse { display: block; }
.planner-matrix .body > .matrix-row.expanded > .student > .ctrls > a.expand   { display: none; }
.planner-matrix .body > .matrix-row.empty    > .student > .ctrls              { display: none; }


.planner-matrix .body > .matrix-row .subitems > * > .title { width: 630px; font-size: 12px; font-weight: 600; color: #1f3c77; margin-bottom: 10px; }

.planner-matrix .body > .matrix-row .subitems .items                     { min-width: 630px; }
.planner-matrix .body > .matrix-row .subitems .item                      { position: relative; margin: 7px 0; height: 18px; background-color: #fff; }
.planner-matrix .body > .matrix-row .subitems .item          > .title    { padding: 0 9px; font-size: 10px; line-height: 18px; color: #999; }
.planner-matrix .body > .matrix-row .subitems .item          > .descr    { padding: 0 9px; font-size: 10px; line-height: 15px; color: #707070; overflow: hidden; text-overflow: ellipsis; }
.planner-matrix .body > .matrix-row.expanded .subitems .item             { height: 50px; padding: 3px 0; }
.planner-matrix .body > .matrix-row          .subitems .item > .descr    { max-height: 0; }
.planner-matrix .body > .matrix-row.expanded .subitems .item > .descr    { max-height: 30px; }

.planner-matrix .body > .matrix-row .subitems .item          > .bground  { position: absolute; opacity: 0.00; left: 0; top: 0; bottom: 0; right: 0; background-color: transparent; }
.planner-matrix .body > .matrix-row .subitems .item.selected > .bground  { opacity: 0.30; }
.planner-matrix .body > .matrix-row .subitems .item          > .frame    { position: absolute; opacity: 0.20; left: 0; top: 0; bottom: 0; right: 0; border: 1px solid #999; }
.planner-matrix .body > .matrix-row .subitems .item.selected > .frame    { opacity: 1.00; }
.planner-matrix .body > .matrix-row .subitems .item          > .progress { position: absolute; overflow: hidden; opacity: 0.10; left: 0; top: 0; bottom: 0; right: 0; }
.planner-matrix .body > .matrix-row .subitems .item          > .progress > .in { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color: #999; }

.planner-matrix .body > .matrix-row .subitems .matrix-assignments .item             { border-radius: 9px; cursor: pointer; }
.planner-matrix .body > .matrix-row .subitems .matrix-assignments .item > .bground  { border-radius: inherit; }
.planner-matrix .body > .matrix-row .subitems .matrix-assignments .item > .frame    { border-radius: inherit; }
.planner-matrix .body > .matrix-row .subitems .matrix-assignments .item > .progress { border-radius: inherit; }

.planner-matrix .body > .matrix-row .subitems .matrix-lesson          .items { position: relative; padding: 6px; background-color: #f7faff; border: 1px solid #f7faff; border-radius: 9px; cursor: pointer; }
.planner-matrix .body > .matrix-row .subitems .matrix-lesson.selected .items { background-color: #e5f0fd; border: 1px solid #b2d3fa; }
.planner-matrix .body > .matrix-row .subitems .matrix-lesson      .item  { display: inline-block; vertical-align: top; margin: 4px; width: calc(33.33% - 8px); min-width: 100px; }
.planner-matrix .body > .matrix-row .subitems .matrix-lesson      .item  { border-left: 2px solid #999; }


.planner-matrix .body > .matrix-row .subitems .tooltip { position: absolute; z-index: 2; padding: 2px 10px; font-size: 14px; white-space: nowrap; cursor: default; }
.planner-matrix .body > .matrix-row .subitems .tooltip { border-radius: 8px; background-color: rgba(31,60,119,0.9); color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.planner-matrix .body > .matrix-row .subitems .tooltip { display: none; }
.planner-matrix .body > .matrix-row .subitems .matrix-lesson     .items > .tooltip  { padding: 5px 10px; min-width: 300px; } 
.planner-matrix .body > .matrix-row .subitems .matrix-lesson     .items > .tooltip > ul { margin-top: 5px; } 

.planner-matrix.show-tooltips .body > .matrix-row .subitems .matrix-assignments .item:hover > .tooltip  { display: block; } 
.planner-matrix.show-tooltips .body > .matrix-row .subitems .matrix-lesson     .items:hover > .tooltip  { display: block; } 


.planner-matrix .body > .matrix-row .subitems .popup { position: absolute; z-index: 3; padding: 10px; font-size: 14px; white-space: nowrap; cursor: default; min-width: 200px; }
.planner-matrix .body > .matrix-row .subitems .popup { border-radius: 8px; background-color: rgba(31,60,119,0.9); color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }

.planner-matrix .body > .matrix-row .subitems .popup      { display: none; }
.planner-matrix .body > .matrix-row .subitems .popup.show { display: block; }

.planner-matrix .body > .matrix-row .subitems .popup > .close   { position: absolute; right: 0; top: 0; width: 24px; height: 24px; line-height: 24px; font-size: 16px; text-align: center; text-decoration: none; color: #fff; }
.planner-matrix .body > .matrix-row .subitems .popup > .ctrls   { margin-top: 25px; }

.planner-matrix .body > .matrix-row .subitems .popup > .title   { padding-right: 24px; }
.planner-matrix .body > .matrix-row .subitems .popup > ul       { margin-top: 10px; font-size: 12px; }
.planner-matrix .body > .matrix-row .subitems .popup > ul > li  { line-height: 21px; }
.planner-matrix .body > .matrix-row .subitems .popup > table    { margin-top: 10px; font-size: 12px; border-collapse: collapse; width: 100%; }
.planner-matrix .body > .matrix-row .subitems .popup > table td { text-align: left; vertical-align: top; padding: 3px 5px; }
.planner-matrix .body > .matrix-row .subitems .popup > table td.title { max-width: 300px; white-space: normal; text-overflow: ellipsis; overflow: hidden; }
.planner-matrix .body > .matrix-row .subitems .popup > table td.link a { color: #ffbc2d; }

.planner-matrix .body > .matrix-row .subitems .matrix-assignments .popup > .ctrls > .button  { width: 100%; }
.planner-matrix .body > .matrix-row .subitems .matrix-lesson      .popup                     { min-width: 400px; }
.planner-matrix .body > .matrix-row .subitems .matrix-lesson      .popup > .ctrls > .button  { width: 130px; margin-left: auto; }
.planner-matrix .body > .matrix-row .subitems .matrix-lesson      .popup > .ctrls > .lesson-upgrade { float: left; display: block; line-height: 32px; color: #ffbc2d; }

.planner-matrix .body > .matrix-row .subitems .matrix-assignments .item.scheduled .popup > .ctrls        { display: none; }
.planner-matrix .body > .matrix-row .subitems .matrix-lesson.scheduled            .popup > .ctrls        { display: none; }
.planner-matrix .body > .matrix-row .subitems .matrix-lesson.scheduled            .popup > table td.link { display: none; }