/* transcripts */

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

.transcripts-period { width: 200px; /*margin-top: -20px;*/ }

.transcripts-block         { margin-top: 20px; display: flex; align-items: stretch; }
.transcripts-block > .side { width: 450px; border-right: 1px solid #D8DDE6; }
.transcripts-block > .main { width: calc(100% - 450px); }

.transcripts-block .students       ul.autocomplete { min-width: 100%; right: initial; width: initial; }
.transcripts-block .student-grades ul.autocomplete { min-width: 100%; right: initial; width: initial; }

/* students list/card */

.transcripts-block .students                                { padding: 20px; }
.transcripts-block .students > .title                       { font-size: 16px; color: #051E53; line-height: 24px; }

.transcripts-block .students > .students-filter             { display: flex; justify-content: space-between; margin-top: 10px; }
.transcripts-block .students > .students-filter > div       { width: calc(33.33% - 10px); }
.transcripts-block .students > .students-filter > div label { font-size: 12px; color: #657FAC; line-height: 18px; margin-bottom: 5px; }

.transcripts-block .students .user-card                            { font-size: 0; }
.transcripts-block .students .user-card > *                        { display: inline-block; vertical-align: middle; }
.transcripts-block .students .user-card > .user-photo              { width: 50px; height: 50px; border-radius: 50%; background: no-repeat center; background-size: cover; }
.transcripts-block .students .user-card > .user-info               { width: calc(100% - 50px - 100px - 20px); margin: 0 10px; }
.transcripts-block .students .user-card > .user-info > .user-name  { font-size: 14px; color: #657FAC; }
.transcripts-block .students .user-card > .user-info > .user-email { font-size: 12px; color: #999; }
.transcripts-block .students .user-card > .user-status             { color: #999; width: 100px; text-align: right; }
.transcripts-block .students .user-card > .user-status > *         { display: inline-block; vertical-align: middle; line-height: 18px; }
.transcripts-block .students .user-card > .user-status span        { font-size: 12px; max-width: calc(100% - 8px - 16px); }
.transcripts-block .students .user-card > .user-status i           { font-size: 16px; width: 16px; height: 16px; text-align: center; margin-left: 8px; }
.transcripts-block .students .user-card > .user-status i           { background: no-repeat center center; background-size: contain; }

.transcripts-block .students .user-card > .user-status.unknown       { color: #999999; }
.transcripts-block .students .user-card > .user-status.unknown     i { background-image: url('/static/img/transcripts/unknown.svg'); }
.transcripts-block .students .user-card > .user-status.pending       { color: #657FAC; }
.transcripts-block .students .user-card > .user-status.pending     i { background-image: url('/static/img/transcripts/pending.svg'); }
.transcripts-block .students .user-card > .user-status.pending2      { color: #657FAC; }
.transcripts-block .students .user-card > .user-status.pending2    i { background-image: url('/static/img/transcripts/pending2.svg'); }
.transcripts-block .students .user-card > .user-status.editing       { color: #0044CD; }
.transcripts-block .students .user-card > .user-status.editing     i { background-image: url('/static/img/transcripts/editing.svg'); }
.transcripts-block .students .user-card > .user-status.editing2      { color: #0044CD; }
.transcripts-block .students .user-card > .user-status.editing2    i { background-image: url('/static/img/transcripts/editing2.svg'); }
.transcripts-block .students .user-card > .user-status.submitted     { color: #10B163; }
.transcripts-block .students .user-card > .user-status.submitted   i { background-image: url('/static/img/transcripts/submitted.svg'); }
.transcripts-block .students .user-card > .user-status.unsubmitted   { color: #FF5D40; }
.transcripts-block .students .user-card > .user-status.unsubmitted i { background-image: url('/static/img/transcripts/unsubmitted.svg'); }
.transcripts-block .students .user-card > .user-status.approved      { color: #10B163; }
.transcripts-block .students .user-card > .user-status.approved    i { background-image: url('/static/img/transcripts/approved.svg'); }
.transcripts-block .students .user-card > .user-status.unapproved    { color: #F83C3C; }
.transcripts-block .students .user-card > .user-status.unapproved  i { background-image: url('/static/img/transcripts/unapproved.svg'); }


/* students list */

.transcripts-block .students > .students-list            { position: relative; overflow: hidden; max-height: 300px; margin-top: 20px; margin-right: -15px; padding-right: 15px; }
.transcripts-block .students > .students-list .user-item { display: block; font-size: 0; text-decoration: none; margin-bottom: 15px; }
.transcripts-block .students > .info                     { margin-top: 20px; font-size: 14px; color: #999; text-align: center; font-style: italic; }

.transcripts-block .students .user-card.small1 > .user-photo       { width: 27px; height: 27px; }
.transcripts-block .students .user-card.small1 > .user-info        { width: calc(100% - 27px - 100px - 16px); margin: 0 8px; }

/* student card */

.transcripts-block .students > .student-card             { position: relative; /*overflow: hidden;*/ margin-top: 20px; }
.transcripts-block .students > .student-card > .close    { position: absolute; top: 0; right: 0; width: 24px; height: 24px; line-height: 24px; }
.transcripts-block .students > .student-card > .close    { display: block; color: #657FAC; font-size: 24px;text-align: center; text-decoration: none; }
.transcripts-block .students > .student-card > .close    { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.transcripts-block .students > .student-card .user-item  { font-size: 0; border: 1px solid #D8DDE6; border-radius: 5px; padding: 15px; }

.transcripts-block .students > .student-card .teachers-list                 { margin-top: 20px; }
.transcripts-block .students > .student-card .teachers-list > .teacher-item { margin-top: 10px; }

.transcripts-block .students .user-card.small2 > .user-photo             { width: 22px; height: 22px; }
.transcripts-block .students .user-card.small2 > .user-info              { width: calc(100% - 22px - 100px - 10px - 42px); margin: 0 5px; }
.transcripts-block .students .user-card.small2 > .user-info > .user-name { font-size: 12px; color: #657FAC; }

.transcripts-block .students .teacher-item .user-status           ~ .ctrl-action.unsubmit             { margin-left: 20px; }
.transcripts-block .students .teacher-item .user-status           ~ .ctrl-action.unsubmit > a         { display: block; width: 22px; height: 22px; line-height: 22px; text-align: center; }
.transcripts-block .students .teacher-item .user-status           ~ .ctrl-action.unsubmit > a         { font-size: 16px; color: #228dcf; }
.transcripts-block .students .teacher-item .user-status           ~ .ctrl-action.unsubmit > a > *     { display: inline-block; vertical-align: middle; }
.transcripts-block .students .teacher-item .user-status           ~ .ctrl-action.unsubmit > a > .icon { width: 16px; height: 16px; background: url('/static/img/transcripts/unsubmit.svg') no-repeat center center; background-size: contain; }
.transcripts-block .students .teacher-item .user-status           ~ .ctrl-action.unsubmit > a >  span { font-size: 14px; }

.transcripts-block .students .teacher-item .user-status           ~ .ctrl-action.unsubmit     { pointer-events: none; opacity: 0.3; }
.transcripts-block .students .teacher-item .user-status           ~ .ctrl-action.unsubmit > a { color: #999999; }
.transcripts-block .students .teacher-item .user-status.submitted ~ .ctrl-action.unsubmit     { pointer-events: all; opacity: 1.0; }
.transcripts-block .students .teacher-item .user-status.submitted ~ .ctrl-action.unsubmit > a { color: #228dcf; }


.transcripts-block .students > .student-card .navigate                             { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; }
.transcripts-block .students > .student-card .navigate > span                      { font-size: 12px; color: #051E53; }
.transcripts-block .students > .student-card .navigate > a                         { width: 160px; }
.transcripts-block .students > .student-card .navigate > a.disabled                { pointer-events: none; opacity: 0.5; }


/* student grades */

.transcripts-block .student-grades                              { position: sticky; top: 60px; }
.transcripts-block .student-grades                              { padding: 20px; border-top: 1px solid #D8DDE6; }
.transcripts-block .student-grades > .title                     { font-size: 16px; color: #051E53; line-height: 24px; }
.transcripts-block .student-grades > .info                      { font-size: 14px; color: #999; text-align: center; font-style: italic; }

.transcripts-block .student-grades > .grades-filter             { display: flex; justify-content: space-between; margin-top: 10px; flex-wrap: wrap; position: relative; }
.transcripts-block .student-grades > .grades-filter > div       { width: calc(50% - 10px); }
.transcripts-block .student-grades > .grades-filter > div.both  { position: absolute; right: 0; top: -30px; text-align: right; }
.transcripts-block .student-grades > .grades-filter > div.points{ position: absolute; left: 0; bottom: -40px; }
.transcripts-block .student-grades > .grades-filter > div label { font-size: 12px; color: #657FAC; line-height: 18px; margin-bottom: 5px; }

.transcripts-block .student-grades > .grades-avg                { margin-top: 20px; text-align: right; }
.transcripts-block .student-grades > .grades-avg > div          { font-size: 12px; }
.transcripts-block .student-grades > .grades-avg > div > *      { display: inline-block; vertical-align: middle; }
.transcripts-block .student-grades > .grades-avg > div > .title { font-size: 12px; }
.transcripts-block .student-grades > .grades-avg > div > .value { font-size: 16px; line-height: 21px; margin-left: 10px; text-align: right; }

.transcripts-block .student-grades > .grades-list               { position: relative; overflow: hidden; max-height: calc(100vh - 100px - 40px - 40px - 24px - 69px - 21px); margin-top: 20px; margin-right: -15px; padding-right: 15px; }

.transcripts-block .student-grades > .grades-list .grades-item                          { padding: 10px; border-bottom: 1px dashed #D8DDE6; display: flex; align-items: center; }
.transcripts-block .student-grades > .grades-list .grades-item.exempt                   { opacity: 0.3; }
.transcripts-block .student-grades > .grades-list .grades-item                          { background-color: rgba(0,0,0,0.02); }
.transcripts-block .student-grades > .grades-list .grades-item.selected-semester        { background-color: rgba(0,0,0,0.0); }
.transcripts-block .student-grades > .grades-list .grades-item:first-of-type            { border-top: 1px dashed #D8DDE6; }
.transcripts-block .student-grades > .grades-list .grades-item > *                      { display: inline-block; vertical-align: middle; }
.transcripts-block .student-grades > .grades-list .grades-item > .asg-icon              { display: none; width: 21px; height: 21px; border-radius: 3px; vertical-align: top; flex-grow: 0; flex-shrink: 0; }
.transcripts-block .student-grades > .grades-list .grades-item > .asg-info              { flex-grow: 1; }
.transcripts-block .student-grades > .grades-list .grades-item > .asg-info > .asg-title { font-size: 14px; line-height: 21px; color: #051E53; }
.transcripts-block .student-grades > .grades-list .grades-item > .asg-info > .asg-descr { font-size: 12px; line-height: 18px; color: #051E53; font-weight: 300; }
.transcripts-block .student-grades > .grades-list .grades-item > .asg-mark              { font-size: 16px; line-height: 21px; text-align: right; flex-shrink: 1; margin-left: 10px; }
.transcripts-block .student-grades > .grades-list .grades-item > .asg-mark > .points    { font-size: 12px; line-height: 18px; color: #999; }

/* transcript document */

.transcripts-block > .main > .document > .head                  { position: sticky; top: 60px; background-color: #fff; border-bottom: 1px solid #D8DDE6; z-index: 20; }
.transcripts-block > .main > .document > .head                  { padding: 20px; min-height: 32px; overflow-x: auto; }
.transcripts-block > .main > .document > .head                  { display: flex; align-items: center; /*flex-wrap: wrap;*/ }
.transcripts-block > .main > .document > .head > .title         { font-size: 16px; color: #051E53; margin-right: 20px; flex-grow: 1; flex-shrink: 1; }
.transcripts-block > .main > .document > .head > .message       { font-size: 14px; color: #999; margin-right: 20px; }
.transcripts-block > .main > .document > .head > .message.error { color: #ef4949; }

.transcripts-block > .main > .document > .info                 { font-size: 14px; color: #999; text-align: center; font-style: italic; margin-top: 20px; }
.transcripts-block > .main > .document > .error                { font-size: 14px; color: #ef4949; text-align: center; font-style: italic; margin-top: 20px; }

.transcripts-block > .main > .document .document-save          { display: inline-block; }
.transcripts-block > .main > .document .document-export        { display: inline-block; margin-left: 20px; }
.transcripts-block > .main > .document .document-submit        { display: inline-block; margin-left: 20px; }
.transcripts-block > .main > .document .document-submit button { min-width: 180px; }

.transcripts-block > .main > .document .pages                  { position: relative; overflow: auto; scrollbar-width: thin; }
.transcripts-block > .main > .document .pages > .page          { position: relative; width: 909px; height: 1286px; margin: 20px auto; border: 1px solid #D8DDE6; box-shadow: 0 12px 12px 0 rgba(0,0,0,0.1); }
.transcripts-block > .main > .document .pages svg              { user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }


.transcript-input-frame                 { position: absolute; left: 0; top: 0; transform: translate(0, -14px); }
.transcript-input-frame .input          { border: none; padding: none; margin: none; color: #282828; background-color: #FFFDB9; }
.transcript-input-frame .input          { width: 100%; font-size: 13px; line-height: 18px; height: 18px; }
.transcript-input-frame .input:disabled { background-color: #ddd; }

.transcript-input-frame.bigtext         { transform: translate(0, -20px); width: 25px; font-size: 18px; }
.transcript-input-frame.bigtext .input  { font-size: 18px; line-height: 24px; height: 24px; font-weight: 600; text-align: center; }
.transcript-input-frame.text            { width: 160px; }
.transcript-input-frame.date            { width: 160px; }
.transcript-input-frame.longtext        { height: 128px; transform: translate(0, -16px); width: 424px; }
.transcript-input-frame.longtext .input { height: 100%; line-height: 20.5px; resize: none; opacity: 0.9; white-space: pre; }
.transcript-input-frame.subject                      { transform: translate(-75%, -14px); width: 90px; }
.transcript-input-frame.subject .input               { text-align: center; }
.transcript-input-frame.subject ul.autocomplete      { min-width: 250px; right: 0; left: auto; }
.transcript-input-frame.subject ul.autocomplete > li { display: block; } /* override search functionality */
.transcript-input-frame.count                      { transform: translate(-50%, -14px); width: 45px; }
.transcript-input-frame.count .input               { text-align: center; }
.transcript-input-frame.count ul.autocomplete      { min-width: 250px; right: 0; left: auto; }
.transcript-input-frame.count ul.autocomplete > li { display: block; } /* override search functionality */

.transcript-input-frame.sign                               { width: 160px; height: 30px; }
.transcript-input-frame.sign          .classowl-signature  { background-color: #FFFDB9; width: 100%; height: 100%; }
.transcript-input-frame.sign.disabled .classowl-signature  { background-color: #ddd; }
.transcript-input-frame.sign.disabled .classowl-signature > .classowl-signature-btn { display: none; }


.transcript-checkbox                        { position: absolute; left: 0; top: 0; transform: translate(-50%, -5px); }

.transcript-checkbox input                  { display: none; }
.transcript-checkbox label                  { user-select: none; cursor: pointer; padding: 0; font-size: 17px; font-weight: 600; line-height: 14px; }
.transcript-checkbox label                  { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.transcript-checkbox label                  { display: block; text-align: center; height: 14px; width: 14px;
    border: 1px solid #228dcf; border-radius: 2px; box-sizing: border-box;
    -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.transcript-checkbox input         ~ label          { color: #228dcf; background-color: #FFFDB9; border-color: #228dcf; }
.transcript-checkbox input:checked ~ label          { color: #fff; background-color: #337ab7; border-color: #337ab7; }
.transcript-checkbox input:checked ~ label:before   { content: '×'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.transcript-checkbox input:disabled         ~ label { color: #282828; background-color: #ddd; border-color: #ddd; cursor: default; }
.transcript-checkbox input:checked:disabled ~ label { color: #282828; background-color: #ddd; border-color: #ddd; cursor: default; }


.transcript-radio-dropdown                               { position: absolute; left: 0; top: 0; transform: translate(-50%, -16px); }
.transcript-radio-dropdown .icon                         { width: 20px; height: 20px; line-height: 20px; font-size: 16px; text-align: center; }
.transcript-radio-dropdown .icon                         { color: #ccc; cursor: pointer; }
.transcript-radio-dropdown         ul.autocomplete       { min-width: 200px; top: 0; left: 20px; }
.transcript-radio-dropdown:hover > ul.autocomplete       { display: block; }
.transcript-radio-dropdown:hover > ul.autocomplete:empty { display: none; }


.transcript-subject-ab                        { position: absolute; left: 0; top: 0; transform: translate(-50%, -5px); }

.transcript-subject-ab input                  { display: none; }
.transcript-subject-ab label                  { user-select: none; cursor: pointer; padding: 0; font-size: 15px; font-weight: 600; line-height: 18px; }
.transcript-subject-ab label                  { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.transcript-subject-ab label                  { display: block; text-align: center; height: 18px; width: 18px;
    border: 1px solid #228dcf; border-radius: 2px; box-sizing: border-box;
    -webkit-transition: all 0.3s ease; transition: all 0.3s ease;
}
.transcript-subject-ab input         ~ label          { color: #228dcf; background-color: #FFFDB9; border-color: #228dcf; }
.transcript-subject-ab input:checked ~ label          { color: #fff; background-color: #337ab7; border-color: #337ab7; }
.transcript-subject-ab input         ~ label:before   { content: 'A'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.transcript-subject-ab input:checked ~ label:before   { content: 'B'; }
.transcript-subject-ab input:disabled         ~ label { color: #282828; background-color: #ddd; border-color: #ddd; cursor: default; }
.transcript-subject-ab input:checked:disabled ~ label { color: #282828; background-color: #ddd; border-color: #ddd; cursor: default; }
.transcript-subject-ab input         ~ .value   { position: absolute; right: calc(100% + 15px); top: 50%; transform: translate(0, -50%); color: #999; font-size: 14px; }
.transcript-subject-ab input         ~ .value   { display: none; }
.transcript-subject-ab input:checked ~ .value   { display: block; }