.parent-student { min-width: 800px; }

/* student header */

.parent-student > .block-student > .header                { position: relative; background-color: #1f3c77; color: #fff; text-align: center; }
.parent-student > .block-student > .header                { min-height: 80px; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.parent-student > .block-student > .header > .inner       { padding: 20px; }

.parent-student > .block-student > .header > .inner > .user          { float: left; font-size: 0; min-width: 200px; text-align: left; }
.parent-student > .block-student > .header > .inner > .user > *      { display: inline-block; vertical-align: middle; }
.parent-student > .block-student > .header > .inner > .user > .photo { width: 40px; height: 40px; border: 1px solid #fff; border-radius: 50%; }
.parent-student > .block-student > .header > .inner > .user > .photo { background: #eee no-repeat center center; background-size: cover; }
.parent-student > .block-student > .header > .inner > .user > .name  { margin-left: 10px; line-height: 40px; color: #fff; font-size: 16px; font-weight: 500; }

/* student tabs */

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



.parent-student .common-block               { background: #fff; box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1); border: 1px solid #D8DDE6; /*border-radius: 5px;*/ }

.parent-student > .inner                    { margin-top: 20px; min-height: calc(100vh - 60px - 80px - 80px - 20px); display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: stretch; }
.parent-student > .inner > .block-teachers  { min-width: 400px; max-width: 600px; width: calc(50% - 10px); }
.parent-student > .inner > .block-classes   { margin-left: 20px; flex-grow: 1; }
.parent-student > .inner > * > .block-title { padding: 0 20px; line-height: 60px; font-size: 18px; color: #1F3C77; border-bottom: 1px solid rgb(151,151,151,.3); }

.parent-student             > .inner { display: none; }
.parent-student.tab-classes > .inner { display: flex; }


/* teachers and classes */

.parent-student .block-teachers > .user          { padding: 10px 20px; font-size: 0; border-bottom: 1px solid rgb(151,151,151,.3); }
.parent-student .block-teachers > .user          { display: flex; align-items: center; }
.parent-student .block-teachers > .user > *      { flex-grow: 0; flex-shrink: 0; }
.parent-student .block-teachers > .user > .photo { width: 38px; height: 38px; border: 1px solid #fff; border-radius: 50%; }
.parent-student .block-teachers > .user > .photo { background: #eee no-repeat center center; background-size: cover; }
.parent-student .block-teachers > .user > .inner { flex-grow: 1; flex-shrink: 1; margin-left: 10px; margin-right: auto; }
.parent-student .block-teachers > .user > .inner > .name   { line-height: 22px; color: #1F3C77; font-size: 14px; font-weight: 500; }
.parent-student .block-teachers > .user > .inner > .status { line-height: 18px; color: #8E8E8E; font-size: 14px; }
.parent-student .block-teachers > .user > .info         { margin-left: 20px; }

.parent-student .block-teachers > .user > .info > .icon { display: block; width: 32px; height: 32px; }
.parent-student .block-teachers > .user > .info > .icon { line-height: 32px; font-size: 18px; text-align: center; text-decoration: none; }
.parent-student .block-teachers > .user > .info > .icon[href=""] { display: none; }
.parent-student .block-teachers > .user > .info > .icon       { color: #cccccc; }
.parent-student .block-teachers > .user > .info > .icon:hover { color: #228dcf; }

.parent-student .block-teachers > .user > .info       { display: none; }
.parent-student .block-teachers > .user > .info.show  { display: flex; }


.parent-student .block-classes > .inner           { padding: 7px; }
.parent-student .block-class                      { background: #fff; box-shadow: 1px 2px 3px 0 rgba(0,0,0,0.1); border: 1px solid #E4E5E7; border-radius: 5px; }
.parent-student .block-class                      { display: inline-block; vertical-align: top; }
.parent-student .block-class                      { margin: 7px; width: calc(33.33% - 20px); min-width: 176px; max-width: 300px; }
.parent-student .block-class > .cover             { height: 50px; border-radius: 4px 4px 0 0; background: #1f3c77 no-repeat center center; background-size: cover; }
.parent-student .block-class > .inner             { padding: 10px; }
.parent-student .block-class > .inner > .title    { color: #657FAC; font-size: 16px; font-weight: 500; }

.parent-student .block-class > .inner > .students                              { margin-top: 10px; font-size: 0; }
.parent-student .block-class > .inner > .students > .caption                   { color: #0044CD; font-size: 12px; }
.parent-student .block-class > .inner > .students > *                          { display: inline-block; vertical-align: middle; white-space: nowrap; }
.parent-student .block-class > .inner > .students > .users > .user             { margin-left: -13px; display: inline-block; }
.parent-student .block-class > .inner > .students > .users > .user:first-child { margin-left: 0; }
.parent-student .block-class > .inner > .students > .users > .user > .photo    { width: 20px; height: 20px; border: 1px solid #fff; border-radius: 50%; }
.parent-student .block-class > .inner > .students > .users > .user > .photo    { background: #eee no-repeat center center; background-size: cover; }
.parent-student .block-class > .inner > .students > .users > .user > .name     { display: none; }

.parent-student .block-class > .inner > .teachers                  { margin-top: 10px;  font-size: 0; }
.parent-student .block-class > .inner > .teachers > .caption       { margin-bottom: 5px; color: #657FAC; font-size: 10px; }
.parent-student .block-class > .inner > .teachers > .user          { font-size: 0; }
.parent-student .block-class > .inner > .teachers > .user > *      { display: inline-block; vertical-align: middle; }
.parent-student .block-class > .inner > .teachers > .user > .photo { width: 20px; height: 20px; border: 1px solid #fff; border-radius: 50%; }
.parent-student .block-class > .inner > .teachers > .user > .photo { background: #eee no-repeat center center; background-size: cover; }
.parent-student .block-class > .inner > .teachers > .user > .name  { margin-left: 5px; width: calc(100% - 27px); line-height: 20px; color: #657FAC; font-size: 14px; }

/* students dropdown */

.parent-student .block-class > .inner > .students > .users                    { position: relative; margin-right: 5px; }
.parent-student .block-class > .inner > .students > .users > .dropdown        { position: absolute; z-index: 3; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
.parent-student .block-class > .inner > .students > .users > .dropdown        { border-radius: 5px; border: 1px solid #d8dde6; background-color: #fff; }
.parent-student .block-class > .inner > .students > .users > .dropdown        { top: calc(100% + 10px); transform: translate(-50%, 0); left: 50%; width: 220px; }
.parent-student .block-class > .inner > .students > .users > .dropdown:before { position: absolute; right: 50%; top: 0; transform: translate(+50%, -50%) rotate(45deg); }
.parent-student .block-class > .inner > .students > .users > .dropdown:before { content: ""; width: 10px; height: 10px; background-color: #fff; }
.parent-student .block-class > .inner > .students > .users > .dropdown:before { border-left: 1px solid #d8dde6; border-top: 1px solid #d8dde6; }
.parent-student .block-class > .inner > .students > .users > .dropdown:after  { content: ""; position: absolute; right: 0; left: 0; top: -12px; height: 12px; background: transparent; }
.parent-student .block-class > .inner > .students       > .users > .dropdown       { display: none; }
.parent-student .block-class > .inner > .students:hover > .users > .dropdown       { display: block; }
.parent-student .block-class > .inner > .students:hover > .users > .dropdown:empty { display: none; }

.parent-student .block-class > .inner > .students > .users > .dropdown .inner           { position: relative; max-height: 210px; }
.parent-student .block-class > .inner > .students > .users > .dropdown .user            { display: block; padding: 10px; line-height: 21px; border-bottom: 1px solid #e5e5e5; }
.parent-student .block-class > .inner > .students > .users > .dropdown .user:last-child { border-bottom: none; }
.parent-student .block-class > .inner > .students > .users > .dropdown .user > *        { display: inline-block; vertical-align: middle; }
.parent-student .block-class > .inner > .students > .users > .dropdown .user > .photo   { width: 20px; height: 20px; border-radius: 50%; }
.parent-student .block-class > .inner > .students > .users > .dropdown .user > .photo   { background: #eee no-repeat center center; background-size: cover; }
.parent-student .block-class > .inner > .students > .users > .dropdown .user > .name    { width: calc(100% - 32px); margin-left: 10px; font-size: 12px; font-weight: 600; color: #228dcf; }

/* calendar */

.parent-student .calendar-block                                    { margin-top: 20px; }
.parent-student .calendar-block > .container > .tabs               { float: right; margin-top: 4px; }
.parent-student .calendar-block > .container > .calendar-student   { float: left; line-height: 32px; font-size: 18px; color: #1F3C77; }
.parent-student .calendar-block > .container > .calendar-title     { display: block; margin: 0 auto; width: 250px; line-height: 32px; text-align: center; font-size: 0; }
.parent-student .calendar-block > .container > .calendar-title > * { display: inline-block; vertical-align: middle; font-size: 24px; }
.parent-student .calendar-block > .container > .calendar-title > .calendar-range { width: 200px; }

.parent-student .modal-form.task-add .btn-new                      { display: none; }

/* grades */

.parent-student .block-grades                   { padding: 20px; margin-top: 20px; }
.parent-student .block-grades > .grades-title   { line-height: 36px; font-size: 18px; color: #1F3C77; }
.parent-student .block-grades > .grades-period  { float: right; }

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

.parent-student .block-grades > .grades-grid    { margin: 20px -20px -20px -20px; display: flex;  min-height: 100px; }
.parent-student .block-grades > .grades-grid > .grades-classes { width: 400px; }
.parent-student .block-grades > .grades-grid > .grades-periods { position: relative; flex-grow: 1; }

.parent-student .block-grades > .grades-grid .class-info     { font-size: 0; width: 360px; display: flex; align-items: center; }
.parent-student .block-grades > .grades-grid .class-info.past{ opacity: 0.5; }
.parent-student .block-grades > .grades-grid .class-photo    { flex-shrink: 0; width: 30px; height: 30px; background: no-repeat center center; background-size: cover; }
.parent-student .block-grades > .grades-grid .class-name     { flex-shrink: 1; max-width: 320px; margin-left: 10px; color: #657FAC; font-size: 14px; line-height: 21px; }

.parent-student .block-grades > .grades-grid .user-info  > * { display: inline-block; vertical-align: middle; line-height: 18px; }
.parent-student .block-grades > .grades-grid .user-info      { margin-left: 10px; margin-top: 1px; }
.parent-student .block-grades > .grades-grid .user-photo     { width: 14px; height: 14px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.parent-student .block-grades > .grades-grid .user-name      { margin-left: 7px; color: #657FAC; font-size: 12px; }

.parent-student .block-grades > .grades-grid > .grades-classes table         { width: 100%; }
.parent-student .block-grades > .grades-grid > .grades-periods table         { min-width: 100%; }

.parent-student .block-grades > .grades-grid                   table tr > th { height: 60px; color: #999; font-size: 12px; white-space: nowrap; }
.parent-student .block-grades > .grades-grid                   table tr > td { height: 60px; border-top: 1px solid #ccc; }
.parent-student .block-grades > .grades-grid                   table tr:nth-child(2n+1) td { background-color: rgb(0, 68, 205, 0.03); }

.parent-student .block-grades > .grades-grid > .grades-classes table tr > *  { padding: 0 20px; text-align: left; }
.parent-student .block-grades > .grades-grid > .grades-classes table tr > th { font-weight: 500; }
.parent-student .block-grades > .grades-grid > .grades-classes table tr > td { border-right: 1px solid #ccc; }

.parent-student .block-grades > .grades-grid > .grades-periods table tr > *  { padding: 0; text-align: center; }
.parent-student .block-grades > .grades-grid > .grades-periods table tr > th { font-weight: 600; }
.parent-student .block-grades > .grades-grid > .grades-periods table tr > td { border-right: 1px solid #ccc; min-width: 49px; }

.parent-student .block-grades > .grades-grid > .grades-periods table tr > *.spacer           { padding: 0; }
.parent-student .block-grades > .grades-grid > .grades-periods table tr > *.spacer > a       { display: none; }
.parent-student .block-grades > .grades-grid > .grades-periods table tr > *.spacer > .spacer { display: block; width: 49px; }
.parent-student .block-grades > .grades-grid > .grades-periods table tr > th.upcoming        { color: #ccc; }
.parent-student .block-grades > .grades-grid > .grades-periods table tr > td.upcoming > *    { display: none; }

.parent-student .block-grades > .grades-grid > .grades-periods table tr > td:last-child      { border-right: none; width: 100%; }

.parent-student .block-grades > .grades-grid > .grades-periods table tr > td > a          { display: block; padding: 10px 0; text-align: center; text-decoration: none; }
.parent-student .block-grades > .grades-grid > .grades-periods table tr > td > a > .mark  { font-size: 18px; line-height: 21px; font-weight: 600; }
.parent-student .block-grades > .grades-grid > .grades-periods table tr > td > a > .score { font-size: 12px; line-height: 18px; }


.parent-student .block-grades-inner                        { margin-top: 20px; }
.parent-student .block-grades-inner         > .grades-side { float: left; position: sticky; top: 61px; overflow: hidden; left: 0; width: 0; }
.parent-student .block-grades-inner         > .grades-list { margin-left: -1px; min-height: 500px; border-left: 1px solid #ccc; }
.parent-student .block-grades-inner.details > .grades-side { width: 270px; }
.parent-student .block-grades-inner.details > .grades-list { margin-left: 270px; }

.parent-student .block-grades-inner .grades-head                        { position: sticky; top: 61px; padding: 10px 20px; z-index: 3; font-size: 0; background-color: #fff; }
.parent-student .block-grades-inner .grades-head                        { display: flex; flex-wrap: wrap; justify-content: space-between; }
.parent-student .block-grades-inner .grades-head .grades-title          { flex-grow: 1; margin: 10px 0; width: calc(100% - 420px); min-width: 200px; }
.parent-student .block-grades-inner .grades-head .grades-filters        { flex-grow: 1; margin: 10px 0; width: 400px; }

.parent-student .block-grades-inner .grades-head .grades-title          { color: #1F3C77; font-size: 0; }
.parent-student .block-grades-inner .grades-head .grades-title a        { display: inline-block; max-width: 100%; line-height: 36px; color: #1F3C77; text-decoration: none; }
.parent-student .block-grades-inner .grades-head .grades-title a > *    { display: inline-block; vertical-align: middle; }
.parent-student .block-grades-inner .grades-head .grades-title a > i    { font-size: 28px; margin-right: 10px; width: 20px; }
.parent-student .block-grades-inner .grades-head .grades-title a > span { font-size: 18px; width: calc(100% - 30px); }

.parent-student .block-grades-inner .grades-head .grades-filters .classowl-input-frame { display: inline-block; vertical-align: middle; width: calc(50% - 10px); margin-right: 20px; }
.parent-student .block-grades-inner .grades-head .grades-filters .classowl-input-frame:last-child { margin-right: 0; }

.parent-student .block-grades-inner .grades-assignments                        { position: relative; }
.parent-student .block-grades-inner .grades-assignments table                  { width: 100%; }

/*.parent-student .block-grades-inner .grades-assignments table thead   { position: sticky; top: calc(61px + 76px); z-index: 2; background-color: #fff; }*/
.parent-student .block-grades-inner .grades-assignments table tr          > th { font-size: 12px; color: #999; font-weight: 500; white-space: nowrap; border-bottom: 1px solid rgb(153, 153, 153, 0.2); }
.parent-student .block-grades-inner .grades-assignments table tr          > td { font-size: 14px; color: #657FAC; cursor: pointer; border-top: 1px solid rgb(153, 153, 153, 0.2); }
.parent-student .block-grades-inner .grades-assignments table tr:hover    > td { background-color: rgb(0, 68, 205, 0.03); }
.parent-student .block-grades-inner .grades-assignments table tr.selected > td { background-color: rgb(0, 68, 205, 0.06); }
.parent-student .block-grades-inner .grades-assignments table tr.no-count > td { opacity: 0.5; }
.parent-student .block-grades-inner .grades-assignments table tr > *           { padding: 0 10px; height: 50px; text-align: left; }
.parent-student .block-grades-inner .grades-assignments table tr > *.centered  { text-align: center; }
.parent-student .block-grades-inner .grades-assignments table tr td:last-of-type { width: 30%; }
.parent-student .block-grades-inner .grades-assignments table tr > td a                 { color: #0044CD; }
.parent-student .block-grades-inner .grades-assignments table tr > td.grade             { font-size: 16px; font-weight: bold; white-space: nowrap; }
.parent-student .block-grades-inner .grades-assignments table tr > td.weighting         { font-size: 16px; }
.parent-student .block-grades-inner .grades-assignments table tr > td.name              { font-size: 0; min-width: 220px; }
.parent-student .block-grades-inner .grades-assignments table tr > td.name > span       { display: inline-block; vertical-align: middle; font-size: 14px; }
.parent-student .block-grades-inner .grades-assignments table tr > td.name > span.image { margin-right: 10px; width: 28px; height: 28px; background: no-repeat center center; background-size: cover; }
.parent-student .block-grades-inner .grades-assignments table tr > td.name > span.title { width: calc(100% - 28px - 10px); }

.parent-student .block-grades-inner .grades-assignments.no-grades th:nth-child(3) { display: none; }
.parent-student .block-grades-inner .grades-assignments.no-grades th:nth-child(4) { display: none; }
.parent-student .block-grades-inner .grades-assignments.no-grades th:nth-child(5) { display: none; }

.parent-student .block-grades-inner .grades-assignments.no-grades td:nth-child(3) { display: none; }
.parent-student .block-grades-inner .grades-assignments.no-grades td:nth-child(4) { display: none; }
.parent-student .block-grades-inner .grades-assignments.no-grades td:nth-child(5) { display: none; }

.parent-student .block-grades-inner .grades-assignments .attachments > span                    { display: inline-block; max-width: 80%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }
.parent-student .block-grades-inner .grades-assignments .attachments > span:after              { content: ','; margin-right: 5px; color: #282828; }
.parent-student .block-grades-inner .grades-assignments .attachments > span:last-of-type:after { content: ''; }
.parent-student .block-grades-inner .grades-assignments .attachments > span > a                {  color: #228dcf; }

.parent-student .block-grades-inner .assignment-details        { position: relative; width: 270px; }
.parent-student .block-grades-inner .assignment-details .close { position: absolute; right: 0; top: 0; display: block; }
.parent-student .block-grades-inner .assignment-details .close { width: 20px; height: 20px; background-color: #0044CD; color: #fff; }
.parent-student .block-grades-inner .assignment-details .close { font-size: 16px; text-align: center; line-height: 20px; text-decoration: none; }
.parent-student .block-grades-inner .assignment-details .image { height: 200px; background: no-repeat center center; background-size: cover; }
.parent-student .block-grades-inner .assignment-details .inner { padding: 20px 20px 30px; }
.parent-student .block-grades-inner .assignment-details .title { color: #0044CD; font-size: 14px; line-height: 21px; }
.parent-student .block-grades-inner .assignment-details ul        { margin: 0; padding: 0; margin: 20px 0 0; }
.parent-student .block-grades-inner .assignment-details ul li     { margin: 0; padding: 0; list-style-type: none; margin: 5px 0; }
.parent-student .block-grades-inner .assignment-details ul li > * { display: inline-block; vertical-align: middle; }
.parent-student .block-grades-inner .assignment-details .caption  { font-size: 14px; color: #999; }
.parent-student .block-grades-inner .assignment-details .value    { font-size: 14px; color: #657FAC; margin-left: 10px; }
.parent-student .block-grades-inner .assignment-details .value.new    { color: #FF5D40; }
.parent-student .block-grades-inner .assignment-details .value.doing  { color: #DF9D20; }
.parent-student .block-grades-inner .assignment-details .value.done   { color: #1FB843; }
.parent-student .block-grades-inner .assignment-details .value.graded { color: #1FB843; }
.parent-student .block-grades-inner .assignment-details .value.red    { color: #FF5D40; }
.parent-student .block-grades-inner .assignment-details .value.orange { color: #DF9D20; }
.parent-student .block-grades-inner .assignment-details .value.green  { color: #1FB843; }
.parent-student .block-grades-inner .assignment-details .action       { width: 100%; margin-top: 20px; }


/* assignment */

.parent-student.assignment > .article > .item.question form fieldset > .toggle-skip { display: none; }
.parent-student.assignment > .article > .item.question form fieldset > .edit        { display: none; }
.parent-student.assignment > .article > .item.question form fieldset > .skip        { display: none; }
.parent-student.assignment > .article > .item.question form fieldset > .submit      { display: none; }


/* competencies */ 

.parent-student .dashboard-competences { background: #fff; box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1); border: 1px solid #D8DDE6; }
.parent-student .calendar-block        { background: #fff; box-shadow: 0 4px 12px 0 rgba(0,0,0,0.1); border: 1px solid #D8DDE6; }