/* feedbacks */

.feedbacks-frame  { min-width: 900px; position: relative; }

.feedbacks-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }

.feedbacks-period                               { width: 300px; }
.feedbacks-period .autocomplete li.selected > * { font-weight: bold; }
.feedbacks-period .autocomplete li.expired      { opacity: 0.4; }

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

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

.feedbacks-upload-filter { margin-bottom: 10px; }


/* students list/card */

.feedbacks-block .students                                { padding: 20px; position: sticky; top: 60px; }
.feedbacks-block .students > .students-title              { font-size: 16px; color: #051E53; line-height: 24px; }

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

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

.feedbacks-block .students .user-card > .user-status.pending        { color: #657FAC; }
.feedbacks-block .students .user-card > .user-status.pending      i { background-image: url('/static/img/transcripts/pending.svg'); }
.feedbacks-block .students .user-card > .user-status.editing        { color: #0044CD; }
.feedbacks-block .students .user-card > .user-status.editing      i { background-image: url('/static/img/transcripts/editing.svg'); }
.feedbacks-block .students .user-card > .user-status.submitted      { color: #10B163; }
.feedbacks-block .students .user-card > .user-status.submitted    i { background-image: url('/static/img/transcripts/submitted.svg'); }
.feedbacks-block .students .user-card > .user-status.completed      { color: #10B163; }
.feedbacks-block .students .user-card > .user-status.completed    i { background-image: url('/static/img/transcripts/approved.svg'); }


/* students list */

.feedbacks-block .students > .students-list            { position: relative; overflow: hidden; max-height: 300px; margin-top: 20px; margin-right: -15px; padding-right: 15px; }
.feedbacks-block .students > .students-list .user-item { display: flex; align-items: center; font-size: 0; text-decoration: none; margin-bottom: 15px; }
.feedbacks-block .students > .students-list .user-item > .classowl-checkbox { flex-grow: 0; flex-shrink: 0; margin-right: 10px; }
.feedbacks-block .students > .students-list .user-item > .user-card         { flex-grow: 1; flex-shrink: 1; }

.feedbacks-block .students > .info                     { margin-top: 20px; font-size: 14px; color: #999; text-align: center; font-style: italic; }

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

.feedbacks-block .students > .document-export > .row         { display: flex; align-items: center; }
.feedbacks-block .students > .document-export > .row.r1      { margin: 20px 0; }
.feedbacks-block .students > .document-export > .row.r1 span { font-size: 14px; color: #282828; margin-right: 10px; }
.feedbacks-block .students > .document-export > .row.r1 a    { font-size: 14px; color: #228dcf; margin-right: 10px; }
.feedbacks-block .students > .document-export > .row.r1 div  { font-size: 14px; color: #ccc; margin: 0 10px 0 auto; }
.feedbacks-block .students > .document-export > .row.r2             { justify-content: right; }
.feedbacks-block .students > .document-export > .row.r2 button      { margin-left: 20px; }
.feedbacks-block .students > .document-export > .row.r2 button.hide { display: none; }


/* student card */

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

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

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

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

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

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

.feedbacks-block .students .student-hint       { margin: 20px 20px 0; color: #999; font-size: 14px; line-height: 21px; text-align: center; }
.feedbacks-block .students .student-hint:empty { display: none; }


/* feedback document */

.feedbacks-block > .main > .document > .head                 { position: sticky; top: 60px; background-color: #fff; border-bottom: 1px solid #D8DDE6; z-index: 20; }
.feedbacks-block > .main > .document > .head                 { padding: 10px 20px; min-height: 32px; }
.feedbacks-block > .main > .document > .head                 { display: flex; align-items: center; flex-wrap: wrap; }
.feedbacks-block > .main > .document > .head > *             { flex-grow: 0; flex-shrink: 0; margin: 10px 0; }
.feedbacks-block > .main > .document > .head > .title        { flex-grow: 1; flex-shrink: 1; }
.feedbacks-block > .main > .document > .head > .title        { font-size: 16px; color: #051E53; line-height: 24px; margin-right: auto; }
.feedbacks-block > .main > .document > .info                 { font-size: 14px; color: #999; text-align: center; font-style: italic; margin-top: 20px; }
.feedbacks-block > .main > .document > .error                { font-size: 14px; color: #ef4949; text-align: center; font-style: italic; margin-top: 20px; }

.feedbacks-block > .main > .document .document-disabled      { vertical-align: middle; font-size: 14px; color: #999; line-height: 32px; }

.feedbacks-block > .main > .document .document-saved         { position: absolute; z-index: 2; right: 10px; top: -5px; margin: 0; }
.feedbacks-block > .main > .document .document-saved         { font-size: 14px; color: #10B163; text-align: center; line-height: 32px; }
.feedbacks-block > .main > .document .document-saved         { display: none; }
.feedbacks-block > .main > .document .document-saved.show    { display: block; }

.feedbacks-block > .main > .document .document-save          { display: inline-flex; }
.feedbacks-block > .main > .document .document-save button.disabled { pointer-events: none; opacity: 0.5; }

.feedbacks-block > .main > .document .document-export        { display: inline-flex; margin-left: 10px; align-items: center; }
.feedbacks-block > .main > .document .document-export > .classowl-checkbox { margin-left: 10px; }
.feedbacks-block > .main > .document .document-export > .classowl-checkbox label { font-size: 14px; }

.feedbacks-block > .main > .document .document-submit        { display: inline-flex; margin-left: 10px; }
.feedbacks-block > .main > .document .document-submit button { min-width: 180px; }

.feedbacks-block > .main > .document > .head .student-enabled                       { display: flex; justify-content: flex-start; }
.feedbacks-block > .main > .document > .head .student-enabled .timer                { display: block; }
.feedbacks-block > .main > .document > .head .student-enabled .timer       + .title { display: none; }
.feedbacks-block > .main > .document > .head .student-enabled .timer:empty          { display: none; }
.feedbacks-block > .main > .document > .head .student-enabled .timer:empty + .title { display: block; }

.feedbacks-block > .main > .document > .head .feedback-published { display: flex; justify-content: flex-start; }


.feedbacks-block > .main > .document .document-editor        { overflow: auto; }
.feedbacks-block > .main > .document .grid                   { position: relative; overflow: auto; scrollbar-width: thin; }
.feedbacks-block > .main > .document .grid table             { box-shadow: 0 0 1px 1px #eee; margin-bottom: 10px; min-width: 800px; }
.feedbacks-block > .main > .document .grid table:last-child  { margin-bottom: 0; }
.feedbacks-block > .main > .document .grid th                { padding: 15px 15px 15px; font-size: 14px; background-color: #fff; border-right: 1px solid #eee; white-space: nowrap; }
.feedbacks-block > .main > .document .grid td                { padding: 20px 15px 10px; font-size: 14px; background-color: #fff; border-right: 1px solid #eee; border-top: 1px solid #eee; }
.feedbacks-block > .main > .document .grid th:first-child    { position: sticky; left: 0; z-index: 3; background-color: #fafafa; }
.feedbacks-block > .main > .document .grid td:first-child    { position: sticky; left: 0; z-index: 2; background-color: #fafafa; }
.feedbacks-block > .main > .document .grid th:last-child     { border-right: none; }
.feedbacks-block > .main > .document .grid td:last-child     { border-right: none; }
.feedbacks-block > .main > .document .grid td.top            { white-space: nowrap; font-weight: bold; }
.feedbacks-block > .main > .document .grid td.sub            { white-space: nowrap; }
.feedbacks-block > .main > .document .grid td.val            { text-align: center; }
.feedbacks-block > .main > .document .grid td.t4             { padding-top: 10px; }
.feedbacks-block > .main > .document .grid td.none           { display: none; }
.feedbacks-block > .main > .document .grid th.student        { background-color: #fbfdff; color: #228dcf; }
.feedbacks-block > .main > .document .grid td.student        { background-color: #fbfdff; color: #228dcf; }
.feedbacks-block > .main > .document .grid th.average        { background-color: #fbfbfb; color: #999999; }
.feedbacks-block > .main > .document .grid td.average        { background-color: #fbfbfb; color: #999999; }
.feedbacks-block > .main > .document .grid td.mismatch       { color: #ef4949; font-weight: bold; }
.feedbacks-block > .main > .document .grid td.mismatch *     { color: #ef4949; border-color: #ef4949; }
.feedbacks-block > .main > .document .grid td.mismatch label { background-color: #ffe8e8; }
.feedbacks-block > .main > .document .grid td.match          { color: #10B163; font-weight: bold; }
.feedbacks-block > .main > .document .grid td.match *        { color: #10B163; border-color: #10B163; }
.feedbacks-block > .main > .document .grid td.match label    { background-color: #e0ffe0; }
.feedbacks-block > .main > .document .grid td .answers-none  { display: none; }

@media screen and (max-width: 1279px) {
    .feedbacks-block > .main > .document .grid th:first-child    { position: static; }
    .feedbacks-block > .main > .document .grid td:first-child    { position: static; }
}

.feedbacks-block > .main > .document .grid .answer                { display: flex; justify-content: center; }
.feedbacks-block > .main > .document .grid .answer > div          { position: relative; min-width: 25px; }
.feedbacks-block > .main > .document .grid .answer > div          { display: flex; flex-direction: column; align-items: center; }
.feedbacks-block > .main > .document .grid .answer > div > .label { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.feedbacks-block > .main > .document .grid .answer > div.wide     { min-width: 80px; }

.feedbacks-block > .main > .document .grid .answer-bulk             { display: flex; justify-content: center; }
.feedbacks-block > .main > .document .grid .answer-bulk > div       { position: relative; min-width: 25px; }
.feedbacks-block > .main > .document .grid .answer-bulk > div label { display: block; background-color: #eee; border-radius: 3px; color: #228dcf; user-select: none; cursor: pointer; }
.feedbacks-block > .main > .document .grid .answer-bulk > div label { margin: 0 auto; width: 20px; height: 20px; line-height: 18px; text-align: center; font-weight: bold; }
.feedbacks-block > .main > .document .grid .answer-bulk > div.wide  { min-width: 80px; }

.feedbacks-block > .main > .document .grid .answer-bulk.hcol > div       { position: relative; min-width: 29px; margin-top: 5px; }
.feedbacks-block > .main > .document .grid .answer-bulk.hcol > div label { width: 24px; height: 24px; line-height: 22px; font-size: 16px; }

.feedbacks-block > .main > .document .grid table.step2                { box-shadow: none; }
.feedbacks-block > .main > .document .grid table.step2 td:first-child { background-color: #fff; }
.feedbacks-block > .main > .document .grid table.step2 tr.none        { display: none; }
.feedbacks-block > .main > .document .grid table.step2 td             { border: none; }
.feedbacks-block > .main > .document .grid table.step2 td .checkitem          { display: flex; align-items: flex-start; }
.feedbacks-block > .main > .document .grid table.step2 td .checkitem > .title { flex-grow: 0; flex-shrink: 0; margin-right: 10px; }
.feedbacks-block > .main > .document .grid table.step2 td .checkitem > .value { flex-grow: 1; flex-shrink: 1; }
.feedbacks-block > .main > .document .grid table.step2 td .checkitem > .check { flex-grow: 0; flex-shrink: 0; }


.feedbacks-block > .main > .document .grid .sign                { display: inline-block; min-width: 800px; margin: 50px 0; }
.feedbacks-block > .main > .document .grid .sign .items         { display: flex; align-items: flex-start; justify-content: space-evenly; }
.feedbacks-block > .main > .document .grid .sign .items > div   { position: relative; padding: 20px 0; }
.feedbacks-block > .main > .document .grid .sign .items > div > .title { margin-bottom: 10px; font-size: 16px; font-weight: bold; }

           .feedbacks-block > .main > .document .grid .sign.disabled .classowl-signature { box-shadow: none; background-color: transparent; }
           .feedbacks-block > .main > .document .grid .sign.disabled .classowl-signature > .classowl-signature-btn { display: none; }
body.admin .feedbacks-block > .main > .document .grid .sign          .classowl-signature > .classowl-signature-btn { display: none; }

.feedbacks-block > .main > .document .grid .sign .submit        { margin-top: 20px; }
.feedbacks-block > .main > .document .grid .sign .submit button { display: block; margin: 0 auto; }


.feedbacks-block > .main > .document .grid .answer-text            { display: flex; align-items: flex-start; justify-content: center; }
.feedbacks-block > .main > .document .grid .answer-text > .title   { flex-grow: 0; flex-shrink: 0; }
.feedbacks-block > .main > .document .grid .answer-text > textarea { flex-grow: 1; flex-shrink: 1; }
.feedbacks-block > .main > .document .grid .answer-text > .title   { font-size: 14px; font-weight: bold; line-height: 24px; padding: 5px; }
.feedbacks-block > .main > .document .grid .answer-text > textarea { border: none; resize: none; border-bottom: 1px solid #999; background-color: transparent; }
.feedbacks-block > .main > .document .grid .answer-text > textarea { font-size: 14px; padding: 5px; line-height: 24px; height: 24px; min-height: 24px; }

.feedbacks-block > .main > .document .grid .answer-student         { margin: 0 auto; }
.feedbacks-block > .main > .document .grid .answer-student         { display: flex; align-items: flex-start; justify-content: center; }
.feedbacks-block > .main > .document .grid .answer-student > input { flex-grow: 1; flex-shrink: 1; }
.feedbacks-block > .main > .document .grid .answer-student > input { border: 1px solid #ccc; border-radius: 2px; background-color: #FFFDB9; text-align: left; }
.feedbacks-block > .main > .document .grid .answer-student > input { font-size: 14px; padding: 0 5px; line-height: 24px; height: 24px; }
.feedbacks-block > .main > .document .grid .answer-student > input:read-only { background-color: #e5e5e5; }

.feedbacks-block > .main > .document .grid .answer-subject         { margin: 0 auto; }
.feedbacks-block > .main > .document .grid .answer-subject         { display: flex; align-items: flex-start; justify-content: center; }
.feedbacks-block > .main > .document .grid .answer-subject > input { flex-grow: 1; flex-shrink: 1; }
.feedbacks-block > .main > .document .grid .answer-subject > input { border: 1px solid #ccc; border-radius: 2px; background-color: #FFFDB9; text-align: center; }
.feedbacks-block > .main > .document .grid .answer-subject > input { font-size: 14px; padding: 0 5px; line-height: 24px; height: 24px; }
.feedbacks-block > .main > .document .grid .answer-subject > input:read-only { background-color: #e5e5e5; }

.feedbacks-block > .main > .document .grid .answer-absence         { margin: 0 auto; }
.feedbacks-block > .main > .document .grid .answer-absence         { display: flex; align-items: flex-start; justify-content: center; }
.feedbacks-block > .main > .document .grid .answer-absence > input { flex-grow: 1; flex-shrink: 1; }
.feedbacks-block > .main > .document .grid .answer-absence > input { border: 1px solid #ccc; border-radius: 2px; background-color: #FFFDB9; text-align: center; }
.feedbacks-block > .main > .document .grid .answer-absence > input { font-size: 14px; padding: 0 5px; line-height: 24px; height: 24px; }
.feedbacks-block > .main > .document .grid .answer-absence > input:read-only { background-color: #e5e5e5; }

.feedbacks-block > .main > .document .grid .answer-wrap { display: flex; align-items: center; justify-content: center; }
.feedbacks-block > .main > .document .grid .answer-wrap { position: relative; padding: 0 20px; }
.feedbacks-block > .main > .document .grid .answer-wrap .feedback-answer-dropdown { position: absolute; right: 0; }


.feedbacks-checkbox                        { position: relative; width: 14px; height: 14px; }
.feedbacks-checkbox input                  { display: none; }
.feedbacks-checkbox label                  { user-select: none; cursor: pointer; padding: 0; font-size: 17px; font-weight: 600; line-height: 14px; }
.feedbacks-checkbox label                  { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.feedbacks-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;
}
.feedbacks-checkbox input         ~ label          { color: #228dcf; background-color: #FFFDB9; border-color: #228dcf; }
.feedbacks-checkbox input:checked ~ label          { color: #fff; background-color: #337ab7; border-color: #337ab7; }
.feedbacks-checkbox input:checked ~ label:before   { content: '×'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.feedbacks-checkbox input:disabled         ~ label { color: #282828; background-color: #ddd; border-color: #ddd; cursor: default; }
.feedbacks-checkbox input:checked:disabled ~ label { color: #282828; background-color: #ddd; border-color: #ddd; cursor: default; }
.feedbacks-checkbox.prev input:not(:checked)    ~ label:before   { content: '×'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; color: #282828; }


.feedback-answer-dropdown                               { position: relative; }
.feedback-answer-dropdown .icon                         { width: 20px; height: 20px; line-height: 20px; font-size: 16px; text-align: center; }
.feedback-answer-dropdown .icon                         { color: #ccc; cursor: pointer; }
.feedback-answer-dropdown         ul.autocomplete       { min-width: 200px; top: 100%; left: auto; right: 0; }
.feedback-answer-dropdown .input { position: absolute; left: 0; top: 0; width: 0; height: 0; padding: 0; margin: 0; border: none; opacity: 0; pointer-events: none; }


/* dashboard */

.dashboard-feedbacks          { position: relative; }
.dashboard-feedbacks          { display: flex; flex-direction: column; }

.dashboard-feedbacks > .title { border-bottom: 1px solid #e5e5e5; }
.dashboard-feedbacks > .title { font-size: 18px; padding: 20px 25px; line-height: 27px; height: 72px; }
.dashboard-feedbacks > .items { padding: 15px 15px; }
.dashboard-feedbacks > .items { overflow-y: auto; overflow-x: hidden; max-height: calc(100% - 72px); }
.dashboard-feedbacks .classowl-button { width: 120px; }
.dashboard-feedbacks .classowl-button[href=""] { display: none; }

.parent-dashboard .dashboard-feedbacks          { margin-top: 15px; }
.parent-dashboard .dashboard-feedbacks > .title { border-bottom: none; }
.parent-dashboard .dashboard-feedbacks > .items { padding: 0 15px 5px; }

.dashboard-feedbacks .user-card                            { font-size: 0; display: flex; align-items: center; }
.dashboard-feedbacks .user-card > .user-photo              { flex-grow: 0; flex-shrink: 0; width: 50px; height: 50px; border-radius: 50%; background: no-repeat center; background-size: cover; }
.dashboard-feedbacks .user-card > .user-info               { flex-grow: 1; flex-shrink: 1; margin: 0 10px; }
.dashboard-feedbacks .user-card > .user-info > .user-name  { font-size: 14px; color: #657FAC; }
.dashboard-feedbacks .user-card > .user-info > .user-email { font-size: 12px; color: #999; }


.dashboard-feedbacks .feedbacks-item                   { overflow: hidden; border: 1px solid #ccc; border-radius: 5px; padding: 10px; margin-bottom: 10px; }
.dashboard-feedbacks .feedbacks-item > .block          { display: flex; align-items: center; flex-wrap: wrap; }
.dashboard-feedbacks .feedbacks-item > .block > .title { flex-shrink: 1; flex-grow: 1; }
.dashboard-feedbacks .feedbacks-item > .block > .ctrls { flex-shrink: 0; flex-grow: 0; margin: 10px 0; }
.dashboard-feedbacks .feedbacks-item > .block > .title { font-size: 14px; margin-right: 10px; }
.dashboard-feedbacks .feedbacks-item > .block > .title .date { font-size: 12px; color: #ccc; }

.dashboard-feedbacks .feedbacks-item > .block > .ctrls     { display: flex; align-items: center; }
.dashboard-feedbacks .feedbacks-item > .block > .ctrls > * { margin-left: 10px; }

.dashboard-feedbacks .feedbacks-item > .block > .ctrls            > .not-signed { color: #999; text-align: center; width: initial; font-size: 14px; }
.dashboard-feedbacks .feedbacks-item > .block > .ctrls            > a.hide-link { display: none; }
.dashboard-feedbacks .feedbacks-item > .block > .ctrls.not-signed > a           { display: none; }
.dashboard-feedbacks .feedbacks-item > .block > .ctrls            > .not-signed { display: none; }
.dashboard-feedbacks .feedbacks-item > .block > .ctrls.not-signed > .not-signed { display: block; }

.dashboard-feedbacks .feedbacks-item > .comment       { margin-top: 10px; font-size: 14px; /*white-space: pre-wrap;*/ }
.dashboard-feedbacks .feedbacks-item > .comment p     { margin: 0; }
.dashboard-feedbacks .feedbacks-item > .comment:empty { display: none; }

.dashboard-feedbacks .feedbacks-item > .comment.long       { transition: all 300ms ease-in-out; }
.dashboard-feedbacks .feedbacks-item > .comment.long       { max-height: 75px; overflow: hidden; position: relative; }
.dashboard-feedbacks .feedbacks-item > .comment.long       { border-bottom: 1px solid #d5d5d5; }
.dashboard-feedbacks .feedbacks-item > .comment.long:after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 20px; }
.dashboard-feedbacks .feedbacks-item > .comment.long:after { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 95%); }
.dashboard-feedbacks .feedbacks-item > .comment.long.expanded       { max-height: initial; }
.dashboard-feedbacks .feedbacks-item > .comment.long.expanded:after { display: none; }

.dashboard-feedbacks .feedbacks-item > .comment.long ~ .expand-comment   { display: block; margin: 0 auto; max-width: 100px; padding-bottom: 2px; border-radius: 0 0 10px 10px; cursor: pointer; }
.dashboard-feedbacks .feedbacks-item > .comment.long ~ .expand-comment   { background-color: #d5d5d5; color: #282828; line-height: 18px; font-size: 12px; text-align: center; text-decoration: none; }
.dashboard-feedbacks .feedbacks-item > .comment.long ~ .expand-comment i { margin: 0 5px; }

.dashboard-feedbacks .feedbacks-item > .comment.long          ~ .expand-comment .e0 { display: block; }
.dashboard-feedbacks .feedbacks-item > .comment.long          ~ .expand-comment .e1 { display: none; }
.dashboard-feedbacks .feedbacks-item > .comment.long.expanded ~ .expand-comment .e0 { display: none; }
.dashboard-feedbacks .feedbacks-item > .comment.long.expanded ~ .expand-comment .e1 { display: block; }

.dashboard-feedbacks .feedbacks-item > .footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; }

.dashboard-feedbacks .feedbacks-item .feedback-by        { display: flex; align-items: center; font-size: 14px; }
.dashboard-feedbacks .feedbacks-item .feedback-by > span { color: #999; font-size: 12px; }
.dashboard-feedbacks .feedbacks-item .feedback-by > img  { display: block; margin: 0 5px; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }
.dashboard-feedbacks .feedbacks-item .feedback-by > div  { color: #1f3c77; }