/* used on dashboard + revisions */
.card__header            { position: relative; line-height: 32px; padding: 30px; }
.card__header ul.tabs    { float: right; padding-bottom: 0; }
.card__header ul.tabs li { margin-bottom: 0; }

.dashboard .card__body   { font-size: 14px; }


.dashboard               { display: flex; align-items: stretch; flex-wrap: wrap; align-content: flex-start; }
.dashboard               { min-width: 600px; min-height: calc(100vh - 60px - 123px); padding: 20px; }
.dashboard .common-block { background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); }

.dashboard > *      { display: block; box-sizing: border-box; max-height: 700px; margin: 10px; }
.dashboard > script { display: none; }


.dashboard-assignments               { position: relative; }
.dashboard-assignments               { display: flex; flex-direction: column; }
.dashboard-assignments .card__header { flex-grow: 0; flex-shrink: 0; box-sizing: border-box; }
.dashboard-assignments .card__body   { flex-grow: 1; flex-shrink: 1; box-sizing: border-box; }

.dashboard-assignments .card__header { display: flex; align-items: center; justify-content: space-between; }
.dashboard-assignments .card__header { padding: 20px 25px; line-height: initial; border-bottom: 1px solid #e5e5e5; }
.dashboard-assignments .card__body   { position: relative; overflow-x: hidden; overflow-y: auto; padding: 0 20px; }

.dashboard-assignments .card__header ul.tabs { float: none; }
.dashboard-assignments .card__header ul.tabs li a { min-width: 90px; width: initial; }

.dashboard-assignments .item                    { position: relative; border-top: 1px solid #e5e5e5; padding: 10px 0; }
.dashboard-assignments .item:first-child        { border-top: none; }
.dashboard-assignments .item.hide               { display: none; }

.dashboard-assignments .item                     { display: flex; align-items: stretch; justify-content: space-between; }
.dashboard-assignments .item > .inner            { flex-grow: 0; flex-shrink: 1; width: calc(100% - 140px); }
.dashboard-assignments .item > .buttons          { flex-grow: 0; flex-shrink: 0; }

.dashboard-assignments .item .inner > .title     { font-size: 16px; color: #228dcf; line-height: 24px; }
.dashboard-assignments .item .inner > .title     { max-width: 400px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dashboard-assignments .item .inner > .title > .class { flex-shrink: 1; margin-right: 5px; font-size: 14px; color: #999999; }
.dashboard-assignments .item .inner > .descr     { font-size: 14px; color: #282828; line-height: 21px; margin: 5px 0; }

.dashboard-assignments .item .props              { display: flex; align-items: center; }
.dashboard-assignments .item .due-date           { flex-grow: 0; flex-shrink: 0; }
.dashboard-assignments .item .progress-block     { flex-grow: 1; flex-shrink: 1; }

.dashboard-assignments .item .due-date           { min-width: 170px; white-space: nowrap; font-size: 12px; color: #282828; line-height: 18px; }
.dashboard-assignments .item .due-date.expired b { color: #ef4949; }

.dashboard-assignments .item .buttons .button            { width: 130px; margin-bottom: 5px; }
.dashboard-assignments .item .buttons .action            { width: 130px; margin-bottom: 5px; font-size: 12px; padding: 0; display: block; }
.dashboard-assignments .item .buttons .action button     { display: block; padding: 0; width: 100%; line-height: 21px; cursor: pointer; text-align: center; }
.dashboard-assignments .item .buttons .action button     { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.dashboard-assignments .item .buttons .action button     { border: none; background-color: transparent; color: #999; box-shadow: none; }

.dashboard-assignments .item.archived .inner > .title a  { opacity: 0.5; }
.dashboard-assignments .item.archived .inner > .descr    { opacity: 0.5; }
.dashboard-assignments .item.archived .due-date          { opacity: 0.5; }
.dashboard-assignments .item.archived .students > .icons { opacity: 0.5; }
.dashboard-assignments .item.archived .percent           { opacity: 0.5; }
.dashboard-assignments .item.archived progress           { opacity: 0.5; }
.dashboard-assignments .item.archived .buttons .button   { opacity: 0.5; }


.dashboard .tasks .tasks__body   { overflow-y: auto; overflow-x: hidden; max-height: calc(640px - 88px); }


/* classowl progress bar */

.progress-block                                { position: relative; min-width: 150px; font-size: 0; }
.progress-block                                { display: flex; align-items: center; }
.progress-block .students                      { flex-grow: 0; flex-shrink: 0; }
.progress-block .bars                          { flex-grow: 1; flex-shrink: 1; }
.progress-block .bars > *                      { display: flex; align-items: center; flex-wrap: wrap; }
.progress-block .bars > *.hide                 { display: none; }
.progress-block .bars > * > .title             { flex-grow: 1; flex-shrink: 1; width: 100%; color: #1f3c77; font-size: 12px; line-height: 18px; }
.progress-block .bars > * > .title             { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.progress-block .bars > * > progress           { flex-grow: 1; flex-shrink: 1; }
.progress-block .bars > * > .percent           { flex-grow: 0; flex-shrink: 0; }

.progress-block progress                       { height: 7px; width: calc(100% - 122px); border: 1px solid #e5e5e5; border-radius: 2px; }
.progress-block progress                       { appearance: none; -moz-appearance: none; -webkit-appearance: none; background-color: transparent; }
.progress-block progress::-webkit-progress-bar { background-color: transparent; }
.progress-block progress::-ms-fill             { border: none; }

.progress-block .p-green  progress::-ms-fill               { background-color: #a2d053; }
.progress-block .p-green  progress::-moz-progress-bar      { background-color: #a2d053; }
.progress-block .p-green  progress::-webkit-progress-value { background-color: #a2d053; }
.progress-block .p-orange progress::-ms-fill               { background-color: #ffbc2d; }
.progress-block .p-orange progress::-moz-progress-bar      { background-color: #ffbc2d; }
.progress-block .p-orange progress::-webkit-progress-value { background-color: #ffbc2d; }
.progress-block .p-red    progress::-ms-fill               { background-color: #ef4949; }
.progress-block .p-red    progress::-moz-progress-bar      { background-color: #ef4949; }
.progress-block .p-red    progress::-webkit-progress-value { background-color: #ef4949; }

.progress-block           .percent { width: 35px; margin-left: 5px; text-align: left; font-size: 12px; font-weight: 600; }
.progress-block .p-green  .percent { color: #a2d053; }
.progress-block .p-orange .percent { color: #ffbc2d; }
.progress-block .p-red    .percent { color: #ef4949; }

.progress-block .students                        { position: relative; } 
.progress-block .students                        { width: 72px; height: 29px; margin: -4px 5px -4px 0; }
.progress-block .students          li > .picture { display: block; width: 25px; height: 25px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.progress-block .students ul.icons               { text-align: center; }
.progress-block .students ul.icons li            { display: inline-block; vertical-align: top; width: 29px; height: 29px; margin: 0 -4px; }
.progress-block .students ul.icons li > *        { display: none; }
.progress-block .students ul.icons li > .picture { display: block; border: 2px solid #fff; } 

.progress-block .students       div.users         { display: none; }
.progress-block .students:hover div.users         { display: block; }
.progress-block .students div.users               { background-color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); border: 1px solid #e5e5e5; border-radius: 4px; }
.progress-block .students div.users               { position: fixed; left: -1000px; top: 0; z-index: 10; }
.progress-block .students div.users:after         { content: ''; position: absolute; top: -15px; left: 0; right: 0; height: 15px; }
.progress-block .students div.users:before        { content: ''; background-color: #fff; }
.progress-block .students div.users:before        { position: absolute; left: 17px; top: -5px; width: 10px; height: 10px; transform: rotate(45deg); box-shadow: -2px -2px 2px 0 rgba(0,0,0,0.1); }
.progress-block .students div.users ul            { position: relative; overflow: hidden; display: block; max-height: 200px; }
.progress-block .students div.users li            { border-bottom: 1px solid #e5e5e5; padding: 0 10px; line-height: 34px; width: 300px; }
.progress-block .students div.users li:last-child { border-bottom: none; }
.progress-block .students div.users li            { display: flex; align-items: center; }
.progress-block .students div.users li > .picture { flex-grow: 0; flex-shrink: 0; margin-right: 10px; }
.progress-block .students div.users li > .title   { width: calc(100% - 95px); font-size: 12px; color: #228dcf; margin-right: auto; }
.progress-block .students div.users li > .grade   { display: none; font-size: 12px; color: #228dcf; white-space: nowrap; }
.progress-block .students div.users li > .score   { display: none; font-size: 12px; color: #282828; white-space: nowrap; font-weight: 600; }
.progress-block .students div.users li > .score   { flex-grow: 0; flex-shrink: 1; white-space: nowrap; }
.progress-block .students div.users li > .score .mark { font-size: 12px; }
.progress-block .students div.users li.grade > .grade { display: block; }
.progress-block .students div.users li.score > .score { display: block; }
.progress-block .students div.users .display-grade > * > span { transform: translate(-100%, -100%); left: 100%; }


.dashboard-competences                  { position: relative; }
.dashboard-competences .card__header    { padding: 20px 25px; box-sizing: border-box; }
.dashboard-competences .card__header    { font-size: 18px; line-height: 32px; border-bottom: 1px solid #e5e5e5; }
.dashboard-competences .card__header    { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.dashboard-competences .card__header h3 { margin-right: 20px; }
.dashboard-competences .card__body      { padding: 0; box-sizing: border-box; }

.dashboard-competences .card__body { position: relative; overflow-x: hidden; overflow-y: auto; }
.dashboard-competences .card__body { scrollbar-width: thin; max-height: 300px; box-sizing: border-box; }

.dashboard-competences .competences-filter       { display: flex; justify-content: space-between; max-width: 600px; }
.dashboard-competences .competences-filter > div { width: calc(25% - 10px); margin: 0; }
.dashboard-competences .competences-filter > div.competences-legend { display: none; }
.dashboard-competences .competences-legend       { margin: 5px 10px 5px auto; }

.dashboard-competences .card__header .ctrl-open { width: initial; margin: 5px 0 5px 20px; }

body.parent .dashboard-competences .ctrl-open          { display: none; }
body.parent .dashboard-competences .competences-legend { display: none; }