.drive-frame { padding: 0; font-family: Roboto; min-width: 800px; }

.drive-layout             { display: flex; align-items: stretch; height: calc(100vh - 60px); }
.drive-layout > *         { box-sizing: border-box; max-height: calc(100vh - 60px); overflow-y: auto; overflow-x: hidden; }
.drive-layout .drive-side { flex-grow: 0; flex-shrink: 0; padding: 10px 10px 20px 10px; scrollbar-width: none; }
.drive-layout .drive-main { flex-grow: 1; flex-shrink: 1; padding: 10px 10px 20px 10px; }


.drive-layout .ctrl-action                       { display: flex; align-items: center; justify-content: center; }
.drive-layout .ctrl-action > button              { /*border: none;*/ cursor: pointer; width: initial; padding: 0 10px; margin: 0; }
.drive-layout .ctrl-action > button              { display: flex; align-items: center; justify-content: center; }
.drive-layout .ctrl-action > button > i          { font-size: 15px; }
.drive-layout .ctrl-action > button > span       { margin-left: 5px; font-size: 14px; }
.drive-layout .ctrl-action > button > span:empty { display: none; }
.drive-layout .ctrl-action > button > .icon      { display: block; }
.drive-layout .ctrl-action.icon > button         { border: none; background-color: transparent; min-width: 36px; height: 36px; color: #228dcf; }

.drive-layout .ctrl-file-upload                      { display: flex; align-items: center; justify-content: center; }
.drive-layout .ctrl-file-upload > label              { /*border: none;*/ cursor: pointer; width: initial; padding: 0 10px; margin: 0; }
.drive-layout .ctrl-file-upload > label              { display: flex; align-items: center; justify-content: center; }
.drive-layout .ctrl-file-upload > label > span       { margin-left: 5px; font-size: 14px; }
.drive-layout .ctrl-file-upload > label > span:empty { display: none; }
.drive-layout .ctrl-file-upload > label > .icon      { display: block; }
.drive-layout .ctrl-file-upload [type="file"]        { display: none; }

.drive-layout .ctrl-menu-action            { display: block; text-decoration: none; }
.drive-layout .ctrl-menu-action > *        { padding: 0; margin: 0; cursor: pointer; background-color: transparent; border: none; }
.drive-layout .ctrl-menu-action > *        { display: flex; align-items: center; justify-content: flex-start; height: 40px; width: 100%; }
.drive-layout .ctrl-menu-action > *        { color: #228dcf; font-size: 16px; }
.drive-layout .ctrl-menu-action > *:hover  { background-color: #f8f8f8; }
.drive-layout .ctrl-menu-action > * > i    { width: 40px; text-align: center; }
.drive-layout .ctrl-menu-action > * > span { font-size: 14px; padding-right: 10px; }

.drive-layout .ctrl-menu-action > *        { max-width: 150px; }
.drive-layout .ctrl-menu-action > * > i    { flex-grow: 0; flex-shrink: 0; max-width: 180px; }
.drive-layout .ctrl-menu-action > * > span { flex-grow: 0; flex-shrink: 0; max-width: calc(100% - 40px - 10px); }
.drive-layout .ctrl-menu-action > * > span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }


.drive-layout .ctrl-search .classowl-input-frame { min-width: 36px; min-height: 36px; }
.drive-layout .ctrl-search .classowl-input-frame .icon { color: #228dcf; cursor: pointer; }
.drive-layout .ctrl-search input       { opacity: 0; width: 0; }
.drive-layout .ctrl-search input:focus { opacity: 1; width: 200px; }
.drive-layout .ctrl-search input:not(:placeholder-shown) { opacity: 1; width: 200px; }


.drive-layout .classowl-dropdown      .drop-icon { display: flex; align-items: center; justify-content: center; }
.drive-layout .classowl-dropdown      .drop-icon { font-size: 18px; color: #228dcf; text-decoration: none; background-color: #ffffffa0; }
.drive-layout .classowl-dropdown      .drop-icon { opacity: 0; }
.drive-layout .classowl-dropdown.open .drop-icon { opacity: 1; }
.drive-layout .classowl-dropdown      .drop-icon .icon-dots { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.drive-layout .classowl-dropdown      .drop-icon .icon-dots { display: block; width: 19px; height: 19px; background: url('/static/img/drive/icon-dots.svg') no-repeat center center; }
.drive-layout .classowl-dropdown      .drop-list { min-width: 150px; }


.drive-layout .drive-side          { width: 300px; }
.drive-layout .drive-side > .inner { border-radius: 6px; border: 1px solid #E7E7E7; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); }
.drive-layout .drive-side > .inner { min-height: calc(100% - 2px); }


.drive-layout .drive-side           .side-expand-collapse                   { padding: 0 25px; line-height: 45px; min-height: 45px; border-bottom: 1px solid #E7E7E7; cursor: pointer; }
.drive-layout .drive-side           .side-expand-collapse                   { display: flex; align-items: center; justify-content: flex-end; }
.drive-layout .drive-side           .side-expand-collapse > * > .text       { color: #263B73; font-size: 13px; margin-right: 7px; }
.drive-layout .drive-side           .side-expand-collapse > .state-collapse { display: flex; }
.drive-layout .drive-side           .side-expand-collapse > .state-expand   { display: none; }

.drive-layout .group-title         { display: flex; align-items: center; }
.drive-layout .group-title         { padding: 0 25px; margin: 20px 0 5px; }
.drive-layout .group-title > .icon { margin-right: 5px; }
.drive-layout .group-title > .text { color: #000; font-size: 13px; font-weight: 700; }

.drive-layout .group-title .ctrl-action          { margin-left: auto; }
.drive-layout .group-title .ctrl-action > button { border: none; padding: 0; width: 17px; height: 17px; }
.drive-layout .group-title .ctrl-action > button { background: none; line-height: 17px; color: #228dcf; }
.drive-layout .group-title .ctrl-action > button:hover { background: #fff; }
.drive-layout .group-title .ctrl-action > button > .icon { display: block; }

.drive-layout .group-items     { margin-bottom: 20px; }
.drive-layout .group-items > * { margin: 5px 18px; }

.drive-layout .group-line      { margin: 20px 25px; height: 1px; background: #E7E7E7; }

.drive-layout .group-items:empty               { display: none; }
.drive-layout .group-items:empty + .group-line { display: none; }


.drive-layout .drive-side.collapsed .side-expand-collapse > .state-collapse { display: none; }
.drive-layout .drive-side.collapsed .side-expand-collapse > .state-expand   { display: flex; }

.drive-layout .drive-side.collapsed                             { width: 53px; }
.drive-layout .drive-side.collapsed .side-expand-collapse       { padding: 0; justify-content: center; }
.drive-layout .drive-side.collapsed .side-expand-collapse > * > .text { display: none; }
.drive-layout .drive-side.collapsed .group-title                { padding: 0; justify-content: center; }
.drive-layout .drive-side.collapsed .group-title > .icon        { margin-right: 0; }
.drive-layout .drive-side.collapsed .group-title > .text        { display: none; }
.drive-layout .drive-side.collapsed .group-title > .ctrl-action { display: none; }
.drive-layout .drive-side.collapsed .group-line                 { margin: 20px 10px; }
.drive-layout .drive-side.collapsed .group-items                { display: none; }


.drive-layout .folder-side                { position: relative; border-radius: 3px; }
.drive-layout .folder-side .link          { background-color: #fff; }
.drive-layout .folder-side .link          { border-radius: 4px; background: #FFF; border: 1px solid transparent; }
.drive-layout .folder-side .link          { padding: 6px 8px; text-decoration: none; user-select: none; }
.drive-layout .folder-side .link          { display: flex; align-items: center; }
.drive-layout .folder-side .link > .icon0 { display: block; margin-right: 10px; }
.drive-layout .folder-side .link > .icon1 { display: none; margin-right: 10px; }
.drive-layout .folder-side .link   .title { font-size: 12px; line-height: 21px; color: #263B73; font-weight: 400; }
.drive-layout .folder-side .link   .title { text-overflow: ellipsis; overflow: hidden; }
.drive-layout .folder-side.selected .link          { border: 1px solid #F5BF4F; background-color: #F5BF4F20; }
.drive-layout .folder-side.selected .link > .icon0 { display: none; }
.drive-layout .folder-side.selected .link > .icon1 { display: block; }
.drive-layout .folder-side.selected .link   .title { font-weight: 700; }

.drive-layout .folder-side       > .ctrls            { position: absolute; /*z-index: 2;*/ right: 5px; top: calc(50% - 15px); /*transform: translate(0, -50%);*/ }
.drive-layout .folder-side:hover > .ctrls .classowl-dropdown .drop-icon { opacity: 1; }

.drive-layout .folder-side .members-count        { position: absolute; right: 5px; top: 50%; transform: translate(0, -50%); }
.drive-layout .folder-side .members-count        { pointer-events: none; user-select: none; min-width: 30px; }
.drive-layout .folder-side .members-count        { font-size: 12px; line-height: 18px; color: #d2d2d2; text-align: right; }
.drive-layout .folder-side .members-count:empty  { display: none; }
.drive-layout .folder-side .members-count:after        { content: '\f007'; font-family: FontAwesome; margin-left: 5px; }
.drive-layout .folder-side .members-count.locked:after { content: '\f023'; font-family: FontAwesome; margin-left: 5px; }


.drive-layout .folder-pin                { position: relative; margin-left: 40px; }
.drive-layout .folder-pin .link          { padding: 4px 8px; text-decoration: none; user-select: none; }
.drive-layout .folder-pin .link          { display: flex; align-items: center; }
.drive-layout .folder-pin .link   .icon  { font-size: 14px; line-height: 18px; color: #228dcf; margin-right: 5px; }
.drive-layout .folder-pin .link   .title { font-size: 12px; line-height: 18px; color: #228dcf; font-weight: 400; }
.drive-layout .folder-pin .link   .title { text-overflow: ellipsis; overflow: hidden; }
.drive-layout .folder-pin.selected .link   .title { font-weight: 700; }

.drive-layout .folder-pin       > .ctrls            { position: absolute; /*z-index: 2;*/ right: 5px; top: calc(50% - 15px); /*transform: translate(0, -50%);*/ }
.drive-layout .folder-pin:hover > .ctrls .classowl-dropdown .drop-icon { opacity: 1; }



.drive-layout .folder-filter                 { display: flex; align-items: center; margin: 0 0 15px; }
.drive-layout .folder-filter > .drive-search { flex-grow: 1; flex-shrink: 1; margin-right: 10px; }
.drive-layout .folder-filter > .folder-views { flex-grow: 0; flex-shrink: 0; margin-right: 10px; }
.drive-layout .folder-filter > .drive-order  { flex-grow: 0; flex-shrink: 0; width: 200px; }
.drive-layout .folder-filter > *             { box-shadow: 0px 3px 6px 0px rgba(30, 30, 30, 0.10); }


.drive-layout .folder-main     { margin-bottom: 20px; padding: 10px 25px; }
.drive-layout .folder-main     { border-radius: 6px; border: 1px solid #E7E7E7; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); }

.drive-layout .divider-line         { display: flex; align-items: center; height: 1px; margin: 0px 0; }
.drive-layout .divider-line > .text { flex-grow: 0; flex-shrink: 0; margin-right: 9px; color: #000; font-size: 13px; margin-top: -3px; }
.drive-layout .divider-line > .line { flex-grow: 1; flex-shrink: 1; height: 1px; background-color: #E7E7E7; }


.drive-layout .folder-tabs     { display: flex; align-items: stretch; user-select: none; margin-right: auto; }
.drive-layout .folder-tabs     { border: 1px solid #9E47E3; box-shadow: 0px 6px 12px 0px rgba(30, 30, 30, 0.10); }
.drive-layout .folder-tabs     { border-radius: 6px; background: #FFF; overflow: hidden; }

.drive-layout .folder-tab            { display: flex; align-items: center; position: relative; z-index: 1; }
.drive-layout .folder-tab            { color: #9E47E3; padding: 0 10px; cursor: pointer; min-height: 32px; }
.drive-layout .folder-tab            { border-left: 1px solid #9e47e3; margin-left: -1px; }
.drive-layout .folder-tab svg        { display: block; }
.drive-layout .folder-tab svg > path { fill: #9E47E3; }
.drive-layout .folder-tab i          { font-size: 18px; }
.drive-layout .folder-tab span       { font-size: 14px; margin-left: 5px; }

.drive-layout .folder-main                 .folder-tab:hover                                    { background-color: #ffffffa0; }
.drive-layout .folder-main.tab-files       .folder-tab[data-tab="tab-files"]                    { background-color: #9E47E3; color: #fff; }
.drive-layout .folder-main.tab-files       .folder-tab[data-tab="tab-files"]       > svg > path { fill: #fff; }
.drive-layout .folder-main.tab-assignments .folder-tab[data-tab="tab-assignments"]              { background-color: #9E47E3; color: #fff; }
.drive-layout .folder-main.tab-assignments .folder-tab[data-tab="tab-assignments"] > svg > path { fill: #fff; }
.drive-layout .folder-main.tab-attachments .folder-tab[data-tab="tab-attachments"]              { background-color: #9E47E3; color: #fff; }
.drive-layout .folder-main.tab-school      .folder-tab[data-tab="tab-school"]                   { background-color: #9E47E3; color: #fff; }

.drive-layout .folder-main                 .folder-files       { display: none; }
.drive-layout .folder-main                 .folder-assignments { display: none; }
.drive-layout .folder-main                 .folder-attachments { display: none; }
.drive-layout .folder-main                 .folder-school      { display: none; }
.drive-layout .folder-main.tab-files       .folder-files       { display: block; }
.drive-layout .folder-main.tab-assignments .folder-assignments { display: block; }
.drive-layout .folder-main.tab-attachments .folder-attachments { display: block; }
.drive-layout .folder-main.tab-school      .folder-school      { display: block; }


.drive-layout .folder-views     { display: flex; align-items: stretch; user-select: none; margin: 0 auto 0 0; }
.drive-layout .folder-views     { border: 1px solid #1f3c77; border-radius: 3px; background: #FFF; overflow: hidden; }

.drive-layout .folder-view            { display: flex; align-items: center; position: relative; z-index: 1; }
.drive-layout .folder-view            { color: #1f3c77; padding: 0 10px; cursor: pointer; min-height: 32px; }
.drive-layout .folder-view            { border-left: 1px solid #1f3c77; margin-left: -1px; }
.drive-layout .folder-view svg        { display: block; }
.drive-layout .folder-view svg > path { fill: #1f3c77; }
.drive-layout .folder-view i          { font-size: 18px; }
.drive-layout .folder-view span       { font-size: 14px; margin-left: 5px; }

.drive-layout .drive-main            .folder-filter .folder-view:hover                   { background-color: #ffffffa0; }
.drive-layout .drive-main.view-icons .folder-filter .folder-view[data-view="view-icons"] { background-color: #1f3c77; color: #fff; }
.drive-layout .drive-main.view-list  .folder-filter .folder-view[data-view="view-list"]  { background-color: #1f3c77; color: #fff; }


.drive-layout .folder-head    { display: flex; align-items: center; justify-content: space-between; }
.drive-layout .folder-head    { padding-bottom: 5px; border-bottom: 1px solid #E7E7E7; }

.drive-layout .folder-head h2                  { padding: 0; margin: 0; margin-left: -7px; }
.drive-layout .folder-head h2                  { display: flex; align-items: center; flex-wrap: wrap; }
.drive-layout .folder-head h2 > *              { display: flex; align-items: center; }
.drive-layout .folder-head h2 > *:after        { display: block; content: '»'; margin: 0 2px; font-size: 14px; color: #999; }
.drive-layout .folder-head h2 > * > *          { display: block; padding: 5px 7px; margin: 0; }
.drive-layout .folder-head h2 > * > *          { color: #000; font-size: 16px; line-height: 24px; text-decoration: none; }

.drive-layout .folder-head .folder-views       { margin-right: 0; }

.drive-layout .folder-breadcrumbs                  { padding: 6px 0; margin-left: -7px; margin-right: auto; }
.drive-layout .folder-breadcrumbs                  { display: flex; align-items: center; flex-wrap: wrap; }
.drive-layout .folder-breadcrumbs > *              { display: flex; align-items: center; }
.drive-layout .folder-breadcrumbs > *:after        { display: block; content: '»'; margin: 0 2px; font-size: 14px; color: #999; }
.drive-layout .folder-breadcrumbs > * > a          { display: block; padding: 0 7px; margin: 0; }
.drive-layout .folder-breadcrumbs > * > a          { color: #000; font-size: 16px; line-height: 24px; text-decoration: none; }
.drive-layout .folder-breadcrumbs > * > a:hover    { text-decoration: underline; }
.drive-layout .folder-breadcrumbs > * > a.selected { font-weight: bold; }

.drive-layout .folder-main > .folder-inner > .ctrls        { margin: 15px 0; padding: 0; display: flex; align-items: stretch; justify-content: flex-end; }
.drive-layout .folder-main > .folder-inner > .ctrls > form { margin-left: 10px; min-height: 32px; }
.drive-layout .folder-main > .folder-inner > .ctrls:empty  { display: none; }

.drive-layout .folder-main > .folder-files > .ctrls        { margin: 15px 0; padding: 0; display: flex; align-items: stretch; justify-content: flex-end; }
.drive-layout .folder-main > .folder-files > .ctrls > form .classowl-button { min-height: 32px; }

@media screen and (max-width: 1280px) {
    .drive-layout .folder-tab      { min-width: 40px; padding: 0; }
    .drive-layout .folder-tab svg  { margin: 0 auto; }
    .drive-layout .folder-tab i    { margin: 0 auto; }
    .drive-layout .folder-tab span { display: none; }

    .drive-layout .folder-main > .folder-inner       > .ctrls > form .classowl-button { min-height: 32px; }
    .drive-layout .folder-main > .folder-inner       > .ctrls > form span             { display: none; }

    .drive-layout .folder-main > .folder-files       > .ctrls > form span             { display: none; }
}

.drive-layout .folder-main .ctrls-multi        { display: none; align-items: center; flex-wrap: wrap; }
.drive-layout .folder-main .ctrls-multi.show   { display: flex; }
.drive-layout .folder-main .ctrls-multi        { position: sticky; top: 10px; z-index: 10; box-shadow: 0px 0px 12px 0px rgba(30, 30, 30, 0.10); }
.drive-layout .folder-main .ctrls-multi        { margin: 15px 0 0; padding: 2px 10px; border: 1px solid #e5e5e5; border-radius: 5px; }
.drive-layout .folder-main .ctrls-multi        { background-color: #f8f8f8; }
.drive-layout .folder-main .ctrls-multi .gap   { margin: 0 auto; }

.drive-layout .folder-main .ctrls-multi .sel-item              { display: flex; align-items: center; padding: 9px 0; }
.drive-layout .folder-main .ctrls-multi .sel-item              { white-space: nowrap; margin-right: 20px; font-size: 14px; line-height: 24px; }
.drive-layout .folder-main .ctrls-multi .sel-item > .caption   { color: #1f3c77; margin-right: 5px; }
.drive-layout .folder-main .ctrls-multi .sel-item > div > .num { font-weight: 600; margin-right: 5px; }
.drive-layout .folder-main .ctrls-multi .sel-item > .ctrl-icon       { width: 24px; height: 24px; cursor: pointer; }
.drive-layout .folder-main .ctrls-multi .sel-item > .ctrl-icon       { color: #228dcf; font-size: 16px; text-align: center; line-height: 24px; }
.drive-layout .folder-main .ctrls-multi .sel-item > .ctrl-icon:hover { color: #228dcf; }


/* general list layout */

.drive-layout .drive-main           .items-list                    { display: flex; align-items: stretch; flex-wrap: wrap; margin: 5px 0; padding: 0 0; }
.drive-layout .drive-main           .items-list:empty              { display: none; }
.drive-layout .drive-main           .items-list > *                { flex-grow: 0; flex-shrink: 0; margin: 10px 20px 10px 0; }
.drive-layout .drive-main           .items-list > .assignment-item { margin: 10px 0 0; }

.drive-layout .drive-main           .items-list .no-uploaded-files { width: 100%; text-align: center; padding: 10px 0; margin: 0; }
.drive-layout .drive-main           .items-list .no-uploaded-files { color: #999; font-size: 16px; font-style: italic; }
.drive-layout .drive-main.view-list .items-list .no-uploaded-files { padding: 0 0; }

.drive-layout .drive-main.view-list .folders-list                { display: block; margin: 15px 0; }
.drive-layout .drive-main.view-list .folders-list:empty          { display: none; }
.drive-layout .drive-main.view-list .folders-list > .folder-item { margin: 0; }

.drive-layout .drive-main.view-list .files-list                  { display: block; margin: 15px 0; }
.drive-layout .drive-main.view-list .files-list:empty            { display: none; }
.drive-layout .drive-main.view-list .files-list   > .file-item   { margin: 0; }

.drive-layout .drive-main.view-list .grades-list                { display: block; margin: 15px 0; }
.drive-layout .drive-main.view-list .grades-list:empty          { display: none; }
.drive-layout .drive-main.view-list .grades-list > .folder-item { margin: 0; }

.drive-layout .drive-main.view-list .students-list                { display: block; margin: 15px 0; }
.drive-layout .drive-main.view-list .students-list:empty          { display: none; }
.drive-layout .drive-main.view-list .students-list > .students-item { margin: 0; }

.drive-layout .drive-main.view-list .periods-list                { display: block; margin: 15px 0; }
.drive-layout .drive-main.view-list .periods-list:empty          { display: none; }
.drive-layout .drive-main.view-list .periods-list > .folder-item { margin: 0; }


/* folder item */

.drive-layout .folder-item                { position: relative; width: 200px; }
.drive-layout .folder-item .link          { border-radius: 6px; border: 1px solid #D2D2D2; background: #FFF; box-shadow: 0px 6px 12px 0px rgba(30, 30, 30, 0.10); }
.drive-layout .folder-item .link          { box-sizing: border-box; min-height: 100%; padding: 10px; }
.drive-layout .folder-item .link          { text-decoration: none; user-select: none; cursor: pointer; }
.drive-layout .folder-item .link          { display: flex; align-items: center; }

.drive-layout .folder-item .link > .icon  { display: block; margin-right: 5px; }
.drive-layout .folder-item .link > .title { font-size: 14px; line-height: 21px; font-weight: 400; color: #263B73; }
.drive-layout .folder-item .link > .title { text-overflow: ellipsis; overflow: hidden; }

.drive-layout .folder-item       .folder-select       { position: absolute; left: 11px; top: 50%; }
.drive-layout .folder-item       .folder-select label { opacity: 0; }
.drive-layout .folder-item:hover .folder-select label { opacity: 0.7; }
.drive-layout .folder-item       .folder-select input:checked + label { opacity: 1; }

.drive-layout .folder-item       > .ctrls            { position: absolute; right: 5px; top: calc(50% - 15px); }
.drive-layout .folder-item:hover > .ctrls .classowl-dropdown .drop-icon { opacity: 1; }

.drive-layout .folder-item.hide { display: none; }

.drive-layout .folder-item > .flag      { position: absolute; left: -15px; top: 50%; transform: translate(0, -50%); }
.drive-layout .folder-item > .flag      { font-size: 12px; color: #ef4949; opacity: 0.5; }
.drive-layout .folder-item > .flag      { display: none; }
.drive-layout .folder-item > .flag.show { display: block; }


.drive-layout .drive-main.view-list .folder-item                { border-radius: 0; width: initial; }
.drive-layout .drive-main.view-list .folder-item .link          { border-radius: 0; border: none; border-bottom: 1px solid #D2D2D2; box-shadow: none; }
.drive-layout .drive-main.view-list .folder-item .link          { min-height: 100%; }
.drive-layout .drive-main.view-list .folder-item .link          { display: flex; align-items: center; padding: 10px 30px 10px 0; }
.drive-layout .drive-main.view-list .folder-item .link > *      { flex-grow: 0; flex-shrink: 0; }
.drive-layout .drive-main.view-list .folder-item .link > .icon  { width: 30px; height: 30px; margin-right: 10px; }
.drive-layout .drive-main.view-list .folder-item .link > .title { flex-grow: 1; flex-shrink: 1; text-align: left; }
.drive-layout .drive-main.view-list .folder-item .link > .title { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.drive-layout .drive-main.view-list .grades-list  .folder-item .link > .title { width: initial; }
.drive-layout .drive-main.view-list .periods-list .folder-item .link > .title { width: initial; }


.drive-layout                       .folder-item .link > .size { width: 60px; margin-left: 10px; color: #282828; font-size: 12px; font-weight: 500; text-align: right; }
.drive-layout                       .folder-item .link > .size { display: none; }
.drive-layout .drive-main.view-list .folder-item .link > .size { display: block; }

.drive-layout                       .folder-item .link > .date { width: 100px; margin-left: 10px; color: #282828; font-size: 12px; font-weight: 500; }
.drive-layout                       .folder-item .link > .date { display: none; }
.drive-layout .drive-main.view-list .folder-item .link > .date { display: block; }

.drive-layout                       .folder-item .link > .count { flex-grow: 1; margin-left: 10px; color: #282828; font-size: 12px; font-weight: 500; text-align: right; }
.drive-layout                       .folder-item .link > .count { display: none; }
.drive-layout .drive-main.view-list .folder-item .link > .count { display: block; }

.drive-layout                       .folder-item .link > .user       { width: 150px; margin-left: 10px; color: #282828; }
.drive-layout                       .folder-item .link > .user > img { display: block; width: 20px; height: 20px; border-radius: 50%; }
.drive-layout                       .folder-item .link > .user > div { margin-left: 5px; font-size: 12px; font-weight: 500; }
.drive-layout                       .folder-item .link > .user       { display: none; }
.drive-layout .drive-main.view-list .folder-item .link > .user       { display: flex; align-items: center; }

.drive-layout .drive-main.view-list .folder-item .folder-select      { left: 5px; top: 50%; }

.drive-layout .drive-main.view-list .folder-item > .ctrls { right: 0; top: calc(50% - 15px); }


/* file item */

.drive-layout .file-item                { position: relative; width: 120px; }
.drive-layout .file-item .hide          { display: none; }
.drive-layout .file-item .link          { border-radius: 6px; border: 1px solid #D2D2D2; background: #FFF; box-shadow: 0px 6px 12px 0px rgba(30, 30, 30, 0.10); }
.drive-layout .file-item:target .link   { background-color: #E5EFFF; }
.drive-layout .file-item .link          { display: block; box-sizing: border-box; min-height: 100%; }
.drive-layout .file-item .link          { padding: 7px; text-decoration: none; user-select: none; cursor: pointer; }
.drive-layout .file-item .link > .thumb       { border-radius: 3px; overflow: hidden; }
.drive-layout .file-item .link > .thumb       { display: block; width: 100%; height: 70px; position: relative; }
.drive-layout .file-item .link > .thumb > img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.drive-layout .file-item .link > .thumb > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drive-layout .file-item .link > .thumb > i   { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.drive-layout .file-item .link > .thumb > i   { display: block; color: #263B73; font-size: 40px; }
.drive-layout .file-item .link > .thumb > i.icon-default { width: 100%; height: 100%; background: #F4F3F3 url('/static/img/drive/icon-file.svg') no-repeat center center; }

.drive-layout .file-item .link > .thumb       > *   { transition: all 50ms ease-in-out; }
.drive-layout .file-item .link > .thumb       > img { opacity: 1; }
.drive-layout .file-item .link > .thumb       > i   { opacity: 0; }
.drive-layout .file-item .link > .thumb.error > img { opacity: 0; }
.drive-layout .file-item .link > .thumb.error > i   { opacity: 1; }

.drive-layout .file-item .link > .title { font-size: 12px; line-height: 18px; color: #263B73; text-align: center; padding: 5px 0; }
.drive-layout .file-item .link > .title { max-width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.drive-layout .file-item       .file-select       { position: absolute; left: 11px; top: 21px; }
.drive-layout .file-item       .file-select label { opacity: 0; }
.drive-layout .file-item:hover .file-select label { opacity: 0.5; }
.drive-layout .file-item       .file-select input:checked + label { opacity: 1; }

.drive-layout .file-item .progress          { display: flex; align-items: center; justify-content: space-between; user-select: none; }
.drive-layout .file-item .progress-bar      { flex-grow: 1; flex-shrink: 1; padding: 1px; border: 1px solid #1f3c77; overflow: hidden; }
.drive-layout .file-item .progress-bar span { display: block; width: 0; height: 8px; background-color: #228dcf; }
.drive-layout .file-item .progress-text     { flex-grow: 0; flex-shrink: 0; margin-left: 0; font-size: 14px; width: 40px; text-align: right; }

.drive-layout .file-item.uploading .link     { /*opacity: 0.3;*/ pointer-events: none; }
.drive-layout .file-item.uploading .link     { background-color: transparent; box-shadow: none; }
.drive-layout .file-item.uploading .progress { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.drive-layout .file-item.uploading .progress { box-sizing: border-box; width: calc(100% - 20px); padding: 10px; }
.drive-layout .file-item.uploading .progress { background-color: #ffffff/*e0*/; /*box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);*/ }

.drive-layout .drive-main.view-list .file-item.uploading .progress { width: calc(100% - 80px); }


.drive-layout .file-item       > .ctrls            { position: absolute; right: 5px; top: 5px; }
.drive-layout .file-item:hover > .ctrls .classowl-dropdown .drop-icon { opacity: 1; }

.drive-layout .file-item.hide { display: none; }

.drive-layout .file-item > .flag      { position: absolute; left: -15px; top: 50%; transform: translate(0, -50%); }
.drive-layout .file-item > .flag      { font-size: 12px; color: #ef4949; opacity: 0.5; }
.drive-layout .file-item > .flag      { display: none; }
.drive-layout .file-item > .flag.show { display: block; }


.drive-layout .drive-main.view-list .file-item                    { width: initial; }
.drive-layout .drive-main.view-list .file-item .link              { border-radius: 0; border: none; border-bottom: 1px solid #D2D2D2; box-shadow: none; }
.drive-layout .drive-main.view-list .file-item .link              { display: flex; align-items: center; padding: 7px 30px 7px 0; }
.drive-layout .drive-main.view-list .file-item .link > *          { flex-grow: 0; flex-shrink: 0; }
.drive-layout .drive-main.view-list .file-item .link > .thumb     { width: 30px; height: 30px; margin-right: 10px; }
.drive-layout .drive-main.view-list .file-item .link > .thumb > i { font-size: 24px; }
.drive-layout .drive-main.view-list .file-item .link > .title     { flex-grow: 1; flex-shrink: 1; text-align: left; }
.drive-layout .drive-main.view-list .file-item .link > .title     { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.drive-layout                       .file-item .link > .convert       { font-size: 14px; line-height: 20px; text-align: center; width: 20px; height: 20px; }
.drive-layout                       .file-item .link > .convert       { color: #999999; }
.drive-layout                       .file-item .link > .convert.error { color: #ef4949; }
.drive-layout                       .file-item .link > .convert.pending i { animation: name duration timing-function delay iteration-count direction fill-mode; }
.drive-layout .drive-main.view-list .file-item .link > .convert       { margin-left: 10px; }
.drive-layout                       .file-item .link > .convert       { /*display: none;*/ position: absolute; left: 41px; top: 11px; background-color: #ffffff80; }
.drive-layout .drive-main.view-list .file-item .link > .convert       { /*display: block;*/ position: initial; left: initial; top: initial; background-color: transparent; }

.drive-layout                       .file-item .link > .size { width: 60px; margin-left: 10px; color: #282828; font-size: 12px; font-weight: 500; text-align: right; }
.drive-layout                       .file-item .link > .size { display: none; }
.drive-layout .drive-main.view-list .file-item .link > .size { display: block; }

.drive-layout                       .file-item .link > .date { width: 100px; margin-left: 10px; color: #282828; font-size: 12px; font-weight: 500; }
.drive-layout                       .file-item .link > .date { display: none; }
.drive-layout .drive-main.view-list .file-item .link > .date { display: block; }

.drive-layout                       .file-item .link > .user       { width: 150px; margin-left: 10px; color: #282828; }
.drive-layout                       .file-item .link > .user > img { display: block; width: 20px; height: 20px; border-radius: 50%; }
.drive-layout                       .file-item .link > .user > div { margin-left: 5px; font-size: 12px; font-weight: 500; }
.drive-layout                       .file-item .link > .user       { display: none; }
.drive-layout .drive-main.view-list .file-item .link > .user       { display: flex; align-items: center; }

.drive-layout .drive-main.view-list .file-item .file-select        { left: 5px; top: 50%; }

.drive-layout .drive-main.view-list .file-item > .ctrls { right: 0; top: calc(50% - 15px); }


/* assignment item */

.drive-layout .assignment-item                { position: relative; width: 100%; margin: 0 0 10px 0; }
.drive-layout .assignment-item                { display: flex; align-items: flex-start; }
.drive-layout .assignment-item .link          { flex-grow: 1; flex-shrink: 1; }
.drive-layout .assignment-item .link          { border-radius: 6px; border: 1px solid #D2D2D2; background: #FFF; box-shadow: 0px 6px 12px 0px rgba(30, 30, 30, 0.10); }
.drive-layout .assignment-item .link          { display: block; box-sizing: border-box; min-height: 59px; }
.drive-layout .assignment-item .link          { padding: 10px; text-decoration: none; user-select: none; }
.drive-layout .assignment-item .link > .title { font-size: 14px; line-height: 21px; color: #1f3c77; font-weight: bold; }
.drive-layout .assignment-item .link > .descr { font-size: 12px; line-height: 18px; color: #999999; font-weight: normal; }
.drive-layout .assignment-item .link > .grade { font-size: 14px; line-height: 21px; color: #282828; }
.drive-layout .assignment-item .link > .title { text-overflow: ellipsis; overflow: hidden; }
.drive-layout .assignment-item .link > .descr { text-overflow: ellipsis; overflow: hidden; }

.drive-layout .assignment-item .link > .title > .path       { color: #999; font-weight: normal; }
.drive-layout .assignment-item .link > .title > .path:empty { display: none !important; }

.drive-layout .assignment-item .progress                 { position: absolute; right: 5px; bottom: 5px; padding: 0 3px; }
.drive-layout .assignment-item .progress                 { display: flex; align-items: center; pointer-events: none; user-select: none; }
.drive-layout .assignment-item .progress                 { font-size: 12px; font-weight: bold; color: #1f3c77; }
.drive-layout .assignment-item .progress > .check        { display: none; }
.drive-layout .assignment-item .progress > .check.done   { display: block; color: #10B163; }
.drive-layout .assignment-item .progress > .count        { display: block; }
.drive-layout .assignment-item .progress > .count:empty  { display: none; }
.drive-layout .assignment-item .progress > .total        { display: block; }
.drive-layout .assignment-item .progress > .total:empty  { display: none; }
.drive-layout .assignment-item .progress > .total:before { content: '/'; margin: 0 2px; }

.drive-layout .assignment-item       > .ctrls            { position: absolute; /*z-index: 2;*/ right: 5px; top: 5px; }
.drive-layout .assignment-item:hover > .ctrls .classowl-dropdown .drop-icon { opacity: 1; }

.drive-layout .assignment-item .btns            { position: absolute; z-index: 1; right: 50px; top: 50%; transform: translate(0, -50%); }
.drive-layout .assignment-item .btns            { display: flex; align-items: center; }
.drive-layout .assignment-item .btns > *        { margin-left: 10px; width: initial; }

@media screen and (max-width: 1024px) {
    .drive-layout .assignment-item .btns .classowl-button { min-height: 34px; min-width: 34px; }
    .drive-layout .assignment-item .btns span { display: none; }
}

.drive-layout .assignment-item.hide { display: none; }


/* assignment details */

.drive-layout .assignment-info              { position: relative; }
.drive-layout .assignment-info              { border-radius: 6px; border: 1px solid #9E47E3; background: #FFF; box-shadow: 0px 6px 12px 0px rgba(30, 30, 30, 0.10); }
.drive-layout .assignment-info              { padding: 15px; margin: 20px 0 10px 0; }

.drive-layout .assignment-info .assignment                      { display: flex; align-items: center; min-height: 51px; margin-bottom: 10px; }
.drive-layout .assignment-info .assignment > .back              { display: flex; align-items: center; line-height: 30px; }
.drive-layout .assignment-info .assignment > .back              { color: #228dcf; text-decoration: none; padding: 0 10px; margin: 0 10px 0 0; }
.drive-layout .assignment-info .assignment > .back > i          { font-size: 24px; margin-right: 10px; }
.drive-layout .assignment-info .assignment > .back > span       { font-size: 14px; }
.drive-layout .assignment-info .assignment > .back:hover > span { text-decoration: underline; }

.drive-layout .assignment-info .assignment > .link              { flex-grow: 1; flex-shrink: 1; }
.drive-layout .assignment-info .assignment > .link > *          { max-width: calc(100% - 50px); }
.drive-layout .assignment-info .assignment > .link > .title     { font-size: 16px; line-height: 25px; color: #1f3c77; font-weight: bold; }
.drive-layout .assignment-info .assignment > .link > .descr     { font-size: 14px; line-height: 21px; color: #999999; margin-top: 5px; }
.drive-layout .assignment-info .assignment > .link > .descr:empty { display: none; }

.drive-layout .assignment-info .assignment .btns            { display: flex; align-items: center; margin-right: 30px; }
.drive-layout .assignment-info .assignment .btns > *        { margin-left: 10px; width: initial; }

@media screen and (max-width: 1024px) {
    .drive-layout .assignment-info .assignment .btns .classowl-button { min-height: 34px; min-width: 34px; }
    .drive-layout .assignment-info .assignment .btns span { display: none; }
}


.drive-layout .assignment-info .infos              { columns: 4; column-gap: 20px; margin: 15px 0 30px; }
.drive-layout .assignment-info .infos > .info      { padding: 5px 0; break-inside: avoid-column; }
.drive-layout .assignment-info .infos > .info      { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.drive-layout .assignment-info .infos > .info > *  { flex-grow: 0; flex-shrink: 1; font-size: 12px; }
.drive-layout .assignment-info .infos > .info > *  { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.drive-layout .assignment-info .infos .info-title  { margin-right: 10px; }
.drive-layout .assignment-info .infos .info-value  { font-weight: bold; }

.drive-layout .assignment-info       > .ctrls            { position: absolute; /*z-index: 2;*/ right: 5px; top: 5px; }
.drive-layout .assignment-info:hover > .ctrls .classowl-dropdown .drop-icon { opacity: 1; }

@media screen and (max-width: 1024px) {
    .drive-layout .assignment-info .infos       { columns: 1; }
}


/* student item */

.drive-layout .students-item                { position: relative; width: 200px; }
.drive-layout .students-item .link          { border-radius: 3px; border: 1px solid #F1F1F1; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); }
.drive-layout .students-item .link          { display: flex; align-items: center; box-sizing: border-box; min-height: 100%; }
.drive-layout .students-item .link          { padding: 10px; text-decoration: none; user-select: none; }
.drive-layout .students-item .link > .photo          { width: 30px; margin-right: 10px; }
.drive-layout .students-item .link > .photo > img    { display: block; width: 30px; height: 30px; border-radius: 50%; }
.drive-layout .students-item .link > .info > .name   { font-size: 12px; line-height: 18px; color: #263B73; font-weight: 400; }
.drive-layout .students-item .link > .info > .status { font-size: 12px; line-height: 18px; color: #999999; font-weight: normal; }
.drive-layout .students-item .link > .info > .grade  { font-size: 14px; line-height: 21px; color: #282828; }
.drive-layout .students-item .link > .info > .name   { /*white-space: nowrap;*/ text-overflow: ellipsis; overflow: hidden; }
.drive-layout .students-item .link > .info > .status { /*white-space: nowrap;*/ text-overflow: ellipsis; overflow: hidden; }

.drive-layout .students-item .progress                 { position: absolute; right: 5px; bottom: 5px; padding: 0 3px; }
.drive-layout .students-item .progress                 { display: flex; align-items: center; pointer-events: none; user-select: none; }
.drive-layout .students-item .progress                 { font-size: 12px; font-weight: bold; color: #1f3c77; }
.drive-layout .students-item .progress > .check        { display: none; }
.drive-layout .students-item .progress > .check.done   { display: block; color: #10B163; }
.drive-layout .students-item .progress > .count        { display: block; }
.drive-layout .students-item .progress > .count:empty  { display: none; }
.drive-layout .students-item .progress > .total        { display: block; }
.drive-layout .students-item .progress > .total:empty  { display: none; }
.drive-layout .students-item .progress > .total:before { content: '/'; margin: 0 2px; }

.drive-layout .students-item       > .ctrls            { position: absolute; /*z-index: 2;*/ right: 5px; top: calc(50% - 15px); /*transform: translate(0, -50%);*/ }
.drive-layout .students-item:hover > .ctrls .classowl-dropdown .drop-icon { opacity: 1; }

.drive-layout .students-item.hide { display: none; }


.drive-layout .drive-main.view-list .students-item                    { width: initial; }
.drive-layout .drive-main.view-list .students-item .link              { border-radius: 0; border: none; border-bottom: 1px solid #D2D2D2; box-shadow: none; }
.drive-layout .drive-main.view-list .students-item .link              { display: flex; align-items: center; padding: 7px 0; }
.drive-layout .drive-main.view-list .students-item .link > *          { flex-grow: 0; flex-shrink: 0; }
.drive-layout .drive-main.view-list .students-item .link > .info           { display: flex; align-items: center; width: calc(100% - 40px - 70px - 70px); }
.drive-layout .drive-main.view-list .students-item .link > .info > .name   { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.drive-layout .drive-main.view-list .students-item .link > .info > .status { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.drive-layout .drive-main.view-list .students-item .link > .info > .name   { width: calc(100% - 10px - 100px); }
.drive-layout .drive-main.view-list .students-item .link > .info > .status { width: 100px; margin-left: 10px; }

.drive-layout                       .students-item .link > .size { width: 60px; margin-left: 10px; color: #282828; font-size: 12px; font-weight: 500; text-align: right; }
.drive-layout                       .students-item .link > .size { display: none; }
.drive-layout .drive-main.view-list .students-item .link > .size { display: block; }

.drive-layout                       .students-item .link > .count { width: 60px; margin-left: 10px; color: #282828; font-size: 12px; font-weight: 500; }
.drive-layout                       .students-item .link > .count { display: none; }
.drive-layout .drive-main.view-list .students-item .link > .count { display: block; }

.drive-layout .drive-main.view-list .students-item > .ctrls { right: 0; top: calc(50% - 15px); }

/* student details */

.drive-layout .student-info                            { position: relative;}
.drive-layout .student-info                            { padding: 0; margin: 20px 0 10px; }
.drive-layout .student-info .student                   { display: flex; align-items: center; box-sizing: border-box; }
.drive-layout .student-info .student > .photo          { width: 30px; margin-right: 10px; }
.drive-layout .student-info .student > .photo > img    { display: block; width: 30px; height: 30px; border-radius: 50%; }
.drive-layout .student-info .student > .info > .name   { font-size: 16px; line-height: 21px; color: #1f3c77; font-weight: bold; }
.drive-layout .student-info .student > .info > .status { font-size: 14px; line-height: 18px; color: #999999; font-style: italic; }
.drive-layout .student-info .student > .info > .name   { /*white-space: nowrap;*/ text-overflow: ellipsis; overflow: hidden; }
.drive-layout .student-info .student > .info > .status { /*white-space: nowrap;*/ text-overflow: ellipsis; overflow: hidden; }

.drive-layout .student-info .student > .back              { display: flex; align-items: center; line-height: 30px; }
.drive-layout .student-info .student > .back              { color: #228dcf; text-decoration: none; padding: 0 10px; margin: 0 10px 0 0; }
.drive-layout .student-info .student > .back > i          { font-size: 24px; margin-right: 10px; }
.drive-layout .student-info .student > .back > span       { font-size: 14px; }
.drive-layout .student-info .student > .back:hover > span { text-decoration: underline; }


.drive-layout .student-info       > .ctrls            { display: block; position: absolute; right: 0; top: 0; }
.drive-layout .student-info:hover > .ctrls .classowl-dropdown .drop-icon { opacity: 1; }


/* drag drop styling */

.drive-layout .can-drop               { position: relative; /*overflow: hidden;*/ }

.drive-layout .can-drop.hover1:before { position: absolute; left: -5px; right: -5px; top: -5px; bottom: -5px; opacity: 0.3; z-index: 10; pointer-events: none; }
.drive-layout .can-drop.hover1:before { border: 1px solid #10B163; border-radius: 5px; background-color: #10B16340; }
.drive-layout .can-drop.hover1:before { overflow: hidden; content: ''; color: #10b163; font-size: 18px; font-weight: 400; }
.drive-layout .can-drop.hover1:before { display: flex; align-items: center; justify-content: center; }

.drive-layout .can-drop.hover2:before { position: absolute; left: -5px; right: calc(50% + 2px); top: -5px; bottom: -5px; opacity: 0.3; z-index: 10; pointer-events: none; }
.drive-layout .can-drop.hover2:before { border: 1px solid #10B163; border-radius: 5px; background-color: #74c89f80; }
.drive-layout .can-drop.hover2:before { overflow: hidden; content: attr(data-copy); color: #0b6137; font-size: 18px; font-weight: 400; text-shadow: 0 0 2px #fff; }
.drive-layout .can-drop.hover2:before { display: flex; align-items: center; justify-content: center; }

.drive-layout .can-drop.hover2:after  { position: absolute; left: calc(50% + 2px); right: -5px; top: -5px; bottom: -5px; opacity: 0.3; z-index: 10; pointer-events: none; }
.drive-layout .can-drop.hover2:after  { border: 1px solid #228dcf; border-radius: 5px; background-color: #228dcf40; }
.drive-layout .can-drop.hover2:after  { overflow: hidden; content: attr(data-move); color: #228dcf; font-size: 18px; font-weight: 400; }
.drive-layout .can-drop.hover2:after  { display: flex; align-items: center; justify-content: center; }


.drive-layout .can-drop.hover-copy:before { opacity: 1.0; }
.drive-layout .can-drop.hover-move:after  { opacity: 1.0; }


.drive-layout .can-drop.error       { opacity: 0.5; filter: grayscale(1); }
.drive-layout .can-drop.error:after { border: 1px solid #ef4949; border-radius: inherit; background-color: #ef494940; opacity: 0; }

.drive-layout .drag-count { position: absolute; transform: translate(-50%, -50%); left: 50%; top: 0; }
.drive-layout .drag-count { color: #fff; background-color: #FF5D40; border: 2px solid #fff; }
.drive-layout .drag-count { box-sizing: border-box; min-width: 28px; padding: 2px 9px; border-radius: 16px; }
.drive-layout .drag-count { font-size: 16px; line-height: 24px; text-align: center; }


/* modals */

.modal-folder                    .folder-info { display: none !important; }
.modal-folder .show-folder-info  .folder-info { display: inline-block !important; vertical-align: top; }

.modal-folder                    .team-members { display: none !important; }
.modal-folder .show-team-members .team-members { display: inline-block !important; vertical-align: top; }

.modal-folder .team-list                  { overflow-x: hidden; overflow-y: auto; scrollbar-width: thin; }
.modal-folder .team-list                  { margin-top: 20px; position: relative; max-width: 100%; max-height: 200px; }
.modal-folder .team-list.empty            { display: none; }
.modal-folder .team-list                  { border: 1px solid #e5e5e5; border-radius: 3px; }
.modal-folder .team-list > .user          { display: flex; align-items: center; box-sizing: border-box; overflow: hidden; margin: 0 0 -1px; }
.modal-folder .team-list > .user          { position: relative; font-size: 0; line-height: 40px; padding: 5px 0; border-bottom: 1px solid #e5e5e5; }
.modal-folder .team-list > .user > *      { flex-grow: 0; flex-shrink: 0; }
.modal-folder .team-list > .user > .photo { width: 30px; height: 30px; margin: 0 10px; border-radius: 50%; background: no-repeat center center; background-size: cover; }
.modal-folder .team-list > .user > .info  { flex-grow: 1; flex-shrink: 1; width: calc(100% - 50px - 36px - 30px - 20px); margin-right: 10px; }
.modal-folder .team-list > .user > .info > .name   { font-size: 14px; color: #228dcf; line-height: 22px; }
.modal-folder .team-list > .user > .info > .email  { font-size: 12px; color: #999; line-height: 18px; }
.modal-folder .team-list > .user > .info > *       { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.modal-folder .team-list > .user > i               { font-size: 18px; width: 10px; }
.modal-folder .team-list > .user > .remove         { display: block; margin-right: 10px; color: #ef4949; font-size: 18px; width: 30px; text-align: center; }
.modal-folder .team-list > .user       > .remove   { opacity: 0; pointer-events: none; }
.modal-folder .team-list > .user:hover > .remove   { opacity: 1; pointer-events: all; }
.modal-folder .team-list > .user:last-of-type      { border-bottom: none; }

.modal-folder .team-list > .user.disabled           { opacity: 0.5; pointer-events: none; }
.modal-folder .team-list > .user.disabled > .remove { opacity: 0.0; }

.modal-folder .inner .ctrls                     { display: flex; align-items: center; justify-content: space-between; margin-top: 20px; }
.modal-folder .inner .ctrls button              { width: 100px; }
.modal-folder .inner .ctrls button.disabled     { opacity: 0.5; pointer-events: none; }

.modal-folder .hide { display: none; }


.drive-dash          { padding: 10px 10px 200px; }
.drive-dash > .inner { border-radius: 6px; border: 1px solid #E7E7E7; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); }
.drive-dash > .inner { margin-bottom: 15px; overflow: auto; scrollbar-width: thin; }

.drive-dash-filter          { padding: 0 0 10px 0; }
.drive-dash-filter form     { display: flex; align-items: stretch; flex-wrap: wrap; }
.drive-dash-filter form > * { margin: 5px 10px 5px 0; }


.drive-dash .ctrl-action                       { display: flex; align-items: center; justify-content: center; }
.drive-dash .ctrl-action > button              { /*border: none;*/ cursor: pointer; width: initial; padding: 0 10px; margin: 0; }
.drive-dash .ctrl-action > button              { display: flex; align-items: center; justify-content: center; color: #228dcf; }
.drive-dash .ctrl-action > button > span       { margin-left: 5px; font-size: 14px; }
.drive-dash .ctrl-action > button > span:empty { display: none; }
.drive-dash .ctrl-action > button > .icon      { display: block; font-size: 18px; }
.drive-dash .ctrl-action.icon > button         { border: none; background-color: transparent; min-width: 36px; height: 36px; color: #228dcf; }

.drive-dash > .inner .files-list table              { min-width: 100%; border-radius: 6px; }
.drive-dash > .inner .files-list thead              { background-color: #fafafa; box-shadow: 0 0 3px 0 rgba(0,0,0,0.3); }
.drive-dash > .inner .files-list th                 { padding: 15px 10px; font-size: 14px; font-weight: bold; }
.drive-dash > .inner .files-list td                 { border-top: 1px solid #ccc; }
.drive-dash > .inner .files-list td                 { padding: 5px 10px; font-size: 14px; }
.drive-dash > .inner .files-list tr > *.l           { text-align: left; }
.drive-dash > .inner .files-list tr > *.r           { text-align: right; }
.drive-dash > .inner .files-list tr > *:first-child { padding-left: 30px; }
.drive-dash > .inner .files-list tr > *.nowrap      { white-space: nowrap; }
.drive-dash > .inner .files-list .no-files          { text-align: center; padding: 20px 0; font-size: 16px; color: #999; font-style: italic; }

.drive-dash > .inner .files-list .user        { display: flex; align-items: center; }
.drive-dash > .inner .files-list .user .photo { display: block; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; }
.drive-dash > .inner .files-list .user .info  { margin-left: 10px; }
.drive-dash > .inner .files-list .user .name  { font-size: 14px; line-height: 21px; color: #1f3c77; }
.drive-dash > .inner .files-list .user .email { font-size: 12px; line-height: 18px; color: #999; }

.drive-dash > .inner .files-list td .btn-files-show        { cursor: pointer; border: none; background-color: transparent; }
.drive-dash > .inner .files-list td .btn-files-show        { width: 100%; text-align: left; padding: 0; margin: 0; }
.drive-dash > .inner .files-list td .btn-files-show        { display: flex; align-items: center; justify-content: flex-start; }
.drive-dash > .inner .files-list td .btn-files-show .thumb { display: block; width: 40px; height: 40px; object-fit: cover; }
.drive-dash > .inner .files-list td .btn-files-show .info  { margin-left: 10px; }
.drive-dash > .inner .files-list td .btn-files-show .title { font-size: 14px; line-height: 21px; color: #1f3c77; }
.drive-dash > .inner .files-list td .btn-files-show .descr { font-size: 12px; line-height: 18px; color: #999; }

.drive-dash > .inner .files-list td .ctrls                 { display: flex; align-items: center; justify-content: flex-start; }
.drive-dash > .inner .files-list td .ctrls > *             { margin-left: 10px; }


.drive-summary          { display: flex; align-items: stretch; }
.drive-summary > .info  { flex-grow: 0; flex-shrink: 0; width: 300px; }
.drive-summary > .chart { flex-grow: 1; flex-shrink: 1; }
.drive-summary .drive-chart { height: calc(100vh - 200px); width: 100%; }

.drive-summary .info           { padding: 20px; box-sizing: border-box; }
.drive-summary .info-row       { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 10px; }
.drive-summary .info-row > *   { flex-grow: 1; flex-shrink: 1; }
.drive-summary .info-row > *.h { font-size: 24px; color: #282828; font-weight: bold; border-bottom: 1px solid #ccc; }
.drive-summary .info-row > *.t { font-size: 18px; color: #282828; }
.drive-summary .info-row > *.v { font-size: 18px; color: #1f3c77; font-weight: bold; text-align: right; }


.drive-layout .folder-placeholder     { padding: 10px 25px; min-height: calc(100vh - /*112px*/ 158px); }
.drive-layout .folder-placeholder     { border-radius: 6px; border: 1px solid #E7E7E7; background: #FFF; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25); }
.drive-layout .folder-placeholder     { display: flex; align-items: center; justify-content: center; color: #000; }
.drive-layout .folder-placeholder .p1 { margin-top: 45px; font-size: 24px; font-weight: 700; text-align: center; }
.drive-layout .folder-placeholder .p2 { margin-top: 20px; font-size: 14px; font-weight: 400; text-align: center; }
.drive-layout .folder-placeholder .p3 { margin-top: 10px; font-size: 14px; font-weight: 400; text-align: center; }



/* drive attachments - use to embed in other forms */

.drive-attachments .droparea                       { font-size: 0; padding: 5px 0; text-align: center; }
.drive-attachments .droparea                       { background-color: #f8f8f8; border: 1px solid #d5d5d5; border-radius: 5px; }
.drive-attachments .droparea > *                   { display: inline-block; vertical-align: middle; margin: 0 auto; padding: 5px 0; }
.drive-attachments .droparea > span                { color: #999; font-size: 14px; padding: 5px 10px; }
.drive-attachments .droparea > label               { cursor: pointer; }
.drive-attachments .droparea > label > [type=file] { display: none; }
.drive-attachments .droparea > a                   { text-decoration: none; }
.drive-attachments .droparea > * > i               { color: #228dcf; font-size: 14px; }
.drive-attachments .droparea > * > span            { color: #228dcf; font-size: 14px; margin-left: 10px; }

.drive-attachments .droparea.hover                 { border-color: #228dcf; background-color: rgba(34, 141, 207, 0.1); }
.drive-attachments .droparea.hover > span          { color: #282828; }

.drive-attachments fieldset > .uploading          { position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 5px; background-color: rgba(255,255,255,0.3); }
.drive-attachments fieldset > .uploading          { background: url('/static/img/ajax-loader.gif') no-repeat center center; }
.drive-attachments fieldset > .uploading          { display: none; }

.drive-attachments fieldset:disabled              { position: relative; }
.drive-attachments fieldset:disabled > .droparea  { pointer-events: none; opacity: 0.5; }
.drive-attachments fieldset:disabled > .uploading { display: block; }

.drive-attachments .attachment-items                    { margin-top: 20px; }
.drive-attachments .attachment-items:empty              { display: none; }

.drive-attachments .attachments-item                    { display: flex; align-items: center; font-size: 0; }
.drive-attachments .attachments-item                    { border-bottom: 1px solid #ccc; }
.drive-attachments .attachments-item > .icon            { flex-grow: 0; flex-shrink: 0; margin-right: 5px; font-size: 16px; color: #282828; }
.drive-attachments .attachments-item > .filename        { flex-grow: 0; flex-shrink: 1; font-size: 14px; color: #228dcf; margin-right: auto; }
.drive-attachments .attachments-item > .filename        { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.drive-attachments .attachments-item > .ctrl-btn        { flex-grow: 0; flex-shrink: 0; display: block; width: 32px; height: 32px; margin-left: 10px; }
.drive-attachments .attachments-item > .ctrl-btn        { text-align: center; font-size: 18px; line-height: 32px; }
.drive-attachments .attachments-item > .ctrl-btn.remove { color: #FF5D40; cursor: pointer; }

.drive-attachments .attachments-item.view               { border-bottom: none; }


/* drive frame on the wall */

.class-wall .drive-layout       { display: block; height: initial; padding: 0; margin: 0 30px 10px; }
.class-wall .drive-layout:empty { display: none; }
.class-wall .drive-layout.hide  { display: none; }
.class-wall .drive-layout > *   { overflow: visible; max-height: initial; }
.class-wall .drive-layout .drive-main  { padding: 0; }
.class-wall .drive-layout .folder-main { padding: 0; margin: 0; box-shadow: none; border: none; }

.class-wall .drive-layout .assignment-item .link { box-shadow: none; }

.class-wall .drive-layout .assignment-info .assignment > .back { display: none; }
.class-wall .drive-layout .assignment-info .assignment .btns   { margin-right: 0; }

.class-wall .drive-layout .folder-main .folder-files                  { padding: 0 15px; border: 1px solid #E7E7E7; border-radius: 6px; }
.class-wall .drive-layout .folder-main .folder-files                  { display: flex; align-items: flex-start; flex-direction: row-reverse; }
.class-wall .drive-layout .folder-main .folder-files > .files-list    { flex-grow: 1; }
.class-wall .drive-layout .folder-main .items-list .no-uploaded-files { padding: 15px 0; }

.class-wall .drive-layout .folder-main .file-select { display: none; }


.wall-post-form                        .drive-layout { display: none; }
.wall-post-form.show-drive-attachments .drive-layout { display: block; }

.wall-post-form.show-drive-attachments .input-attach > a.attach-files { color: #228dcf; }


.modal-class-post .drive-layout       { display: block; height: initial; padding: 0; margin: 0; }
.modal-class-post .drive-layout:empty { display: none; }
.modal-class-post .drive-layout.hide  { display: none; }
.modal-class-post .drive-layout > *   { overflow: visible; max-height: initial; }
.modal-class-post .drive-layout .drive-main  { padding: 0; }
.modal-class-post .drive-layout .folder-main { padding: 0; margin: 0; box-shadow: none; border: none; }

.modal-class-post .drive-layout .assignment-item .link { box-shadow: none; }

.modal-class-post .drive-layout .assignment-info .assignment > .back { display: none; }
.modal-class-post .drive-layout .assignment-info .assignment .btns   { margin-right: 0; }

.modal-class-post .drive-layout .folder-main .folder-files                  { padding: 0 15px; border: 1px solid #E7E7E7; border-radius: 6px; }
.modal-class-post .drive-layout .folder-main .folder-files                  { display: flex; align-items: flex-start; flex-direction: row-reverse; }
.modal-class-post .drive-layout .folder-main .folder-files > .files-list    { flex-grow: 1; }
.modal-class-post .drive-layout .folder-main .items-list .no-uploaded-files { padding: 15px 0; }

.modal-class-post .drive-layout .folder-main .file-select { display: none; }