.school-frame           { min-width: 900px; }

.school-frame.upgrade               { min-width: 600px; min-height: calc(100vh - 60px); background-color: #fff; }
.school-frame.upgrade .inner        { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 580px; }
.school-frame.upgrade .inner        { text-align: center; }
.school-frame.upgrade .inner .image { display: block; width: 440px; height: 250px; margin: 0 auto; }
.school-frame.upgrade .inner .image { background: url('/static/img/school/school-upgrade.png') no-repeat center center; background-size: contain; }
.school-frame.upgrade .inner .text  { margin-top: 20px; font-weight: 300; font-size: 24px; color: #424242; }
.school-frame.upgrade .inner .text a { font-weight: 400; }
.school-frame.upgrade .inner .button { margin: 20px auto 0; }

/* school header */

.school-block > .header                { position: relative; background-color: #1f3c77; color: #fff; text-align: center; }
.school-block > .header                { box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.school-block > .header > .inner       { padding: 20px 30px; }
.school-block > .header > .inner .left-aligned  { float: left; text-align: left; height: 46px; padding-right: 20px; }
.school-block > .header > .inner .title         { display: flex; align-items: center; }
.school-block > .header > .inner .title         { font-weight: 600; font-size: 18px; }
.school-block > .header > .inner .title .edit       { color: inherit; margin-left: 5px; }
.school-block > .header > .inner .title .edit       { opacity: 0.5; }
.school-block > .header > .inner .title .edit:hover { opacity: 1; }
.school-block > .header > .inner .schoolmates   { display: flex; align-items: center; }
.school-block > .header > .inner .schoolmates   { line-height: 21px; font-size: 14px; }
.school-block > .header > .inner .schoolmates i { margin-right: 5px; display: block; line-height: 21px; font-size: 16px; }
.school-block > .header > .inner .schoolmates a { color: #fff; }

/* school tabs */

.school-block > .header > .inner ul.tabs-inner               { display: inline-block; margin-top: 10px; }
.school-block > .header > .inner ul.tabs-inner li a          { color: #fff; }
.school-block > .header > .inner ul.tabs-inner li.selected a { color: #fff; }

/* school cover */

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

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

/* secondary header block */

.school-block > .inner                 { position: relative; background-color: #fff; padding: 20px 30px; }
.school-block > .inner                 { box-shadow: 0 2px 4px rgba(0,0,0,0.3); margin-top: 15px; }

/* school wall search */

.school-wall-search                    { margin-left: 0; }

/* school sidebar */

.class-sidebar.school-sidebar                    { width: 400px; }

@media screen and (max-width: 1200px) {
	.class-sidebar.school-sidebar                    { float: none; width: auto; margin-bottom: 0; }
}

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

/* school info */

.school-info                  { position: relative; padding: 20px; }
.school-info > .image         { display: block; max-width: 100%; margin: 0 auto 20px; }
.school-info > .image[src=""] { display: none; }
.school-info > .image           .name { display: none; }
.school-info > .image[src=""] + .name { display: block; font-size: 24px; font-weight: 300; }
.school-info > .info          { margin-top: 5px; color: #282828; font-weight: 600; }
.school-info > .info > *      { display: inline-block; vertical-align: middle; font-size: 14px; font-weight: normal; }
.school-info > .info > span   { margin-right: 5px; font-weight: 500; }

.school-info > .person               { font-size: 0; margin-top: 20px; }
.school-info > .person > *           { display: inline-block; vertical-align: middle; }
.school-info > .person > .photo      { width: 32px; height: 32px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.school-info > .person > .role       { color: #999; font-size: 12px; margin: 0 10px; }
.school-info > .person > .role:after { content: ':'; }
.school-info > .person > .name       { color: #228dcf; font-size: 12px; }

.school-info       > .edit { width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 24px; color: #228dcf; }
.school-info       > .edit { display: none; position: absolute; right: 0px; top: 0px; z-index: 2; }
.school-info:hover > .edit { display: block; background-color: rgba(255,255,255,.8); }

.school-info > .school-empty          { text-align: center; }
.school-info > .school-empty > .image { display: block; margin: 0 auto; width: 200px; height: 80px; }
.school-info > .school-empty > .image { background: url('/static/img/placeholder-icons/school-empty.svg') no-repeat center center; background-size: contain; }
.school-info > .school-empty > a      { display: none; margin-top: 10px; font-size: 14px; color: #1f3c77; }

body.admin .school-info > .school-empty > a { display: inline-block; }

/* school people filter */

.school-people-filter ul.tabs               { float: right; margin-top: 6px; }
.school-people-filter .classowl-input-frame { display: inline-block; vertical-align: middle; }
.school-people-filter .classowl-input-frame { width: 170px; margin-right: 10px; margin-bottom: 10px; }

.school-people-filter .ctrls              { float: right; }
.school-people-filter .ctrls > *          { display: inline-block; vertical-align: middle; }
.school-people-filter .ctrls > .button    { width: 200px; margin-left: 20px; }
.school-people-filter .ctrls > form label { font-size: 14px; color: #228dcf; cursor: pointer; }

/* school people list */

.people-list > table                   { width: 100%; border-collapse: collapse; background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.people-list > table > thead > tr > th { font-size: 12px; color: #b2b2b2; text-align: left; font-weight: normal; line-height: 20px; padding: 20px 15px; }
.people-list > table > tbody > tr > td { border-top: 1px solid #f2f2f2; width: 20%; }
.people-list > table > tbody > tr > td.wide { width: 100%; }
.people-list > table > tbody > tr > td a:hover { text-decoration: none; }

.people-list > table > thead > tr > th:first-child  { padding-left: 30px; }
.people-list > table > thead > tr > th:last-child   { padding-right: 30px; text-align: right; }
.people-list > table > tbody > tr > td:first-child  { padding-left: 30px; }
.people-list > table > tbody > tr > td:last-child   { padding-right: 30px; }

.people-list > table > tbody > tr.expand td   { padding: 0; background-color: rgb(101, 127, 172, 0.1); }
.people-list > table > tbody > tr.expand td a { display: block; padding: 10px; color: #657FAC; font-size: 14px; }

.people-list > table tr.inactive td { color: #ccc; }
.people-list > table tr.archived td { opacity: 0.4; background-color: #f4f4f4; }
.people-list > table tr.disabled td { opacity: 0.4; background-color: #f4f4f4; }

.people-list               > table tr.archived { display: none; }
.people-list.show-archived > table tr.archived { display: table-row; }

.people-list               > table tr.disabled { display: none; }
.people-list.show-archived > table tr.disabled { display: table-row; }

.people-list td.user-name    { padding: 15px 15px; }
.people-list td.user-subitem { padding: 5px 15px }
.people-list td.user-ctrls   { padding: 5px 15px }

.people-list td.not-found    { padding: 20px; text-align: center; font-size: 18px; font-weight: 400; font-style: italic; color: #999; }

.people-list td.user-name > *              { display: inline-block; vertical-align: middle; }
.people-list td.user-name > .user-select   { margin-right: 10px; }
.people-list td.user-name > .photo         { width: 30px; height: 30px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.people-list td.user-name > .photo > img   { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.people-list td.user-name > .name          { margin-left: 10px; font-size: 14px; max-width: 300px; }
.people-list td.user-name > .name > .email { display: block; color: #999; font-size: 12px; }

.people-list td.user-subitem                          { font-size: 14px; line-height: 21px; color:#444; }
.people-list td.user-subitem span                     { border: 1px solid #eee; border-radius: 3px; }
.people-list td.user-subitem span                     { background-color: #f8f8f8; padding: 0 2px; }
.people-list td.user-subitem span                     { display: inline-block; margin: 2px 0; }

.people-list td.user-ctrls > *                    { display: inline-block; vertical-align: middle; margin-left: 10px; }
.people-list td.user-ctrls > *:first-child        { margin-left: 0; }
.people-list td.user-ctrls > form > a             { display: block; font-size: 18px; width: 30px; height: 30px; text-align: center; line-height: 30px; }
.people-list td.user-ctrls > form > .button       { display: block; font-size: 18px; width: 30px; height: 30px; text-align: center; line-height: 30px; }
.people-list td.user-ctrls > form > .button       { margin: 0; padding: 0; border: none; background-color: transparent; cursor: pointer; }
.people-list td.user-ctrls > form > .ctrl-edit    { color: #228dcf; }
.people-list td.user-ctrls > form > .ctrl-del     { color: #ef4949; }
.people-list td.user-ctrls > form > .ctrl-act     { color: #228dcf; }
.people-list td.user-ctrls > form > .ctrl-copy    { color: #228dcf; }
.people-list td.user-ctrls > form > .ctrl-archive { color: #ef4949; }
.people-list td.user-ctrls > form > .ctrl-restore { color: #228dcf; }
.people-list td.user-ctrls > form > .ctrl-gray    { color: #999999; }

/* grade levels inline editor */

/*.people-list td.user-subitem.editing                { width: 150px; }
.people-list td.user-subitem.editing form           { width: 210px; }*/
.people-list td.user-subitem .input.saved           { animation: flashsaved3 500ms linear; }

@keyframes flashsaved3 {
	000% { background-color: #a2d053; }
	100% { background-color: transparent; }
}


/* school wall */

.school-frame .class-wall                                                 { margin-left: 415px; }
.school-frame .class-wall .wall-post-form .form-options .opt .dt-due      { display: none; }
.school-frame .class-wall .wall-post-form .form-foot .attach-assignment   { display: none; }
.school-frame .class-wall .cikumas-placeholder                            { margin-top: 15px; }

@media screen and (max-width: 1200px) {
    .school-frame .class-wall { margin-left: 0; }
}

/* school resources */

.school-frame .resources-form .input-category { display: none; }

/* school calendar */

.calendar-frame { display: flex; justify-content: space-between; width: 100%; margin-top: 15px; min-height: 600px; }
.calendar-frame { background-color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }

.calendar-frame .calendar-block { margin: 0 auto; width: auto; box-shadow: none; background-color: none; }
.calendar-frame .events-block   { width: 370px; box-shadow: none; border-left: 1px solid #e6e6e6; }

.events-block > .head                { position: relative; border-bottom: 1px solid #e6e6e6; box-sizing: border-box; line-height: 27px; }
.events-block > .head                { display: flex; align-items: center; height: 88px; padding: 10px 30px; }
.events-block > .head .btn-add-event { position: absolute; top: 0; right: 0; width: 60px; height: 87px; line-height: 87px; }
.events-block > .head .btn-add-event { color: #fff; background-color: #ef4949; text-decoration: none; font-size: 35px; text-align: center; }
.events-block > .head .btn-add-event { font-size: 36px; color: #fff; }

.events-block > .body                { position: relative; }

.events-block .events-list li                      { display: block; padding: 0 20px; margin: 20px 0; }
.events-block .events-list li > *                  { display: inline-block; vertical-align: middle; }
.events-block .events-list li                 > .icon { width: 12px; height: 12px; margin-right: 10px; }

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

.events-block .events-list li > .inner             { width: calc(100% - 22px - 34px); }
.events-block .events-list li > .inner > .type     { display: none; }
.events-block .events-list li > .inner > .time     { font-size: 12px; color: #999; }
.events-block .events-list li > .inner > .title    { font-size: 14px; color: #282828; }
.events-block .events-list li > .edit              { width: 24px; height: 24px; margin-left: 10px; text-align: center; font-size: 18px; }

.school-frame .modal-form.task-add .btn-new        { display: none; }
.school-frame .modal-form.task-add .btn-new.editor { display: block; }

.class-frame .modal-form.task-add .btn-new        { display: none; }
.class-frame .modal-form.task-add .btn-new.editor { display: block; }

.modal-form.task-add .events-lists                 { position: relative; height: calc(430px - 32px); font-size: 0; }
.modal-form.task-add .events-lists                 { overflow-y: auto; overflow-x: hidden; /*scrollbar-width: thin;*/ }
.modal-form.task-add .events-list li               { display: block; padding: 0 20px; margin: 20px 0; }
.modal-form.task-add .events-list li > *           { display: inline-block; vertical-align: middle; }
.modal-form.task-add .events-list li.evt-les       { cursor: pointer; }
.modal-form.task-add .events-list li > .icon       { width: 12px; height: 12px; margin-right: 10px; }

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


.modal-form.task-add .events-list li > .inner       { width: calc(100% - 22px - 34px); font-size: 14px; }
.modal-form.task-add .events-list li > .value       { margin-left: 0; width: 34px; text-align: right; font-size: 14px; color: #1f3c77; }
.modal-form.task-add .events-list li > .value:empty { display: none; }

.modal-form.task-add .events-list li > .inner > .type     { font-size: 12px; color: #999; display: none; }
.modal-form.task-add .events-list li > .inner > .time     { font-size: 12px; color: #999; }
.modal-form.task-add .events-list li > .inner > .title    { font-size: 14px; color: #282828; }
.modal-form.task-add .events-list li > .inner > .descr    { font-size: 12px; color: #999; }
.modal-form.task-add .events-list li > .inner > a.title   { color: #228dcf; }
/*
.school-frame .modal-form.task-add .events-list li > .inner > .type     { display: none; }
.school-frame .modal-form.task-add .events-list li > .inner > .time     { font-size: 12px; color: #999; }
.school-frame .modal-form.task-add .events-list li > .inner > .title    { font-size: 14px; color: #282828; }
.school-frame .modal-form.task-add .events-list li > .inner > .descr    { font-size: 12px; color: #999; }
.school-frame .modal-form.task-add .events-list li > .inner > a.title   { color: #228dcf; }

.class-frame .modal-form.task-add .events-list li > .inner > .type     { display: none; }
.class-frame .modal-form.task-add .events-list li > .inner > .time     { font-size: 12px; color: #999; }
.class-frame .modal-form.task-add .events-list li > .inner > .title    { font-size: 14px; color: #282828; }
.class-frame .modal-form.task-add .events-list li > .inner > .descr    { font-size: 12px; color: #999; }
.class-frame .modal-form.task-add .events-list li > .inner > a.title   { color: #228dcf; }

.parent-student .modal-form.task-add .events-list li > .inner > .type     { display: none; }
.parent-student .modal-form.task-add .events-list li > .inner > .time     { font-size: 12px; color: #999; }
.parent-student .modal-form.task-add .events-list li > .inner > .title    { display: block; line-height: 21px; font-size: 14px; color: #282828; }
.parent-student .modal-form.task-add .events-list li > .inner > a.title   { color: #228dcf; }
*/

.modal-form.task-add .events-list li > .edit              { width: 24px; height: 24px; margin-left: 10px; text-align: center; font-size: 18px; }

/* parent interface extended details */
.modal-form.task-add .events-list li > .info               { width: 40px; margin-left: 10px; text-align: right; font-size: 12px; color: #999; }
.modal-form.task-add .events-list li > .status             { width: 20px; height: 20px; margin-left: 10px; }
.modal-form.task-add .events-list li      > .toggle        { width: 20px; margin-left: 10px; text-align: right; }
.modal-form.task-add .events-list li      > .toggle > *    { width: 18px; font-size: 18px; color: #228dcf; text-align: center; cursor: pointer; }
.modal-form.task-add .events-list li      > .toggle > .exp { display: block; }
.modal-form.task-add .events-list li      > .toggle > .col { display: none; }
.modal-form.task-add .events-list li.open > .toggle > .exp { display: none; }
.modal-form.task-add .events-list li.open > .toggle > .col { display: block; }

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

.modal-form.task-add .events-list li.evt-les > ul              { margin: 5px 0 5px 20px; line-height: 24px; }
.modal-form.task-add .events-list li.evt-les > ul > li         { margin: 0; padding: 0; }
.modal-form.task-add .events-list li.evt-les > ul > li > .icon { display: none; }
.modal-form.task-add .events-list li.evt-les > ul > li > .inner > .type  { display: none; }
.modal-form.task-add .events-list li.evt-les > ul > li > .inner > .time  { display: none; }
.modal-form.task-add .events-list li.evt-les > ul > li > .inner > .title { font-size: 12px; }


/* parent interface no need to keep space for edit button */

.modal-form.task-add .events-list li         > .info         { display: none; }
.modal-form.task-add .events-list li.evt-asg > .info         { display: inline-block; }
.modal-form.task-add .events-list li.evt-asg > .inner        { width: calc(100% - 22px - 50px); }

.modal-form.task-add .events-list li         > .status       { display: none; }
.modal-form.task-add .events-list li.evt-tsk > .status       { display: inline-block; }
.modal-form.task-add .events-list li.evt-tsk > .inner        { width: calc(100% - 22px - 30px); }

.modal-form.task-add .events-list li         > .toggle       { display: none; }
.modal-form.task-add .events-list li.evt-les > .toggle       { display: inline-block; }
.modal-form.task-add .events-list li.evt-les > .inner        { width: calc(100% - 22px - 30px); }


/* board related styling */

.school-block > .header > .inner .ctrl-edit        { display: block; margin: 0 0 0 5px; }
.school-block > .header > .inner .ctrl-edit button { display: block; margin: 0; padding: 0; border: none; background-color: transparent; color: inherit; font-size: 18px; cursor: pointer; }
.school-block > .header > .inner .ctrl-edit button { width: 24px; height: 24px; font-size: 18px; cursor: pointer; }
.school-block > .header > .inner .ctrl-edit        { opacity: 0.5; }
.school-block > .header > .inner .ctrl-edit:hover  { opacity: 1.0; }