.flex-frame { min-width: 800px; padding: 40px; box-sizing: border-box; font-size: initial; }

.flex-ctrls     { display: flex; align-items: center; justify-content: space-between; }
.flex-ctrls     { position: relative; z-index: 20; padding: 10px; margin: 0 -10px; }
.flex-ctrls > * { flex-grow: 0; flex-shrink: 1; }


.flex-filter > form       { display: flex; align-items: center; }
.flex-filter > form > div { width: 200px; margin-right: 10px; }

.flex-grid            { padding: 0; box-sizing: border-box; overflow-x: auto; overflow-y: hidden; }
.flex-grid            { background-color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.flex-grid > table    { min-width: 100%; border-bottom: 1px solid #eee; }
.flex-grid > table th { background-color: #ffffff; border-bottom: 1px solid #eee; padding: 5px; }
.flex-grid > table td { vertical-align: top; }

.flex-grid > table tr               td         { background-color: #ffffff; }
.flex-grid > table tr               td         { border-bottom: 1px solid #eee; }
/*.flex-grid > table tr               td.flex-grid-lesson { background-color: #f0f0f0; }*/
.flex-grid > table tr               td.holiday { background-color: #f8f8f8; }

.flex-grid > table .lesson-times         { display: flex; align-items: flex-start; }
.flex-grid > table .lesson-times > *     { flex-grow: 1; margin: 0 2px; }

.flex-grid > table .lesson-slots         { display: flex; align-items: flex-start; margin-bottom: 3px; }
.flex-grid > table .lesson-slots > *     { flex-grow: 1; margin: 0 2px; }

.flex-grid-lesson { padding: 0 10px; box-sizing: border-box; width: 120px; text-align: center; }
.flex-grid-lesson { vertical-align: top; white-space: nowrap; font-size: 14px; font-weight: 600; }
.flex-grid-lesson { position: relative; z-index: 2; position: sticky; }
.flex-grid-lesson.l { left: 0; box-shadow: 1px 0 0 0 #eee; }
.flex-grid-lesson.r { right: 0; box-shadow: -1px 0 0 0 #eee; }

.flex-slot-time { padding: 0 5px; font-size: 12px; text-align: center; color: #999; }
.flex-slot-time { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
/*.flex-slot-time { border: 1px solid #ccc; border-radius: 2px; background-color: #f8f8f8; }*/

.flex-grid-date          { display: flex; align-items: center; justify-content: center; flex-direction: column; }
.flex-grid-date          { margin: 0 auto; font-weight: normal; }
.flex-grid-date          { padding: 10px 5px; border-radius: 5px; box-sizing: border-box; }
.flex-grid-date          { text-align: center; text-decoration: none; white-space: nowrap; }
.flex-grid-date .dow     { font-size: 18px; line-height: 27px; color: #282828; }
.flex-grid-date .date    { font-size: 14px; line-height: 21px; color: #228dcf; }
.flex-grid-date .title   { font-size: 12px; line-height: 18px; color: #999999; }
.flex-grid-date.today    { background-color: #f4f8ff; font-weight: bold; }
.flex-grid-date.weekend > .date { color: #ef4949; }
.flex-grid-date.holiday > .date { color: #ef4949; }
.flex-grid-date.holiday         { padding: 1px 5px; }

.flex-grid-slot                    { position: relative; font-size: 12px; margin: 0 0 5px 0; user-select: none; }
.flex-grid-slot           > .inner { border-radius: 6px; overflow: hidden; }
.flex-grid-slot           > .inner { border: 1px solid #D2D2D2; background: #FFF; box-shadow: 0px 6px 12px 0px #1e1e1e1a; }
.flex-grid-slot.mandatory > .inner { border: 1px solid #ef4949; background: #fff; box-shadow: 0px 0px  1px 1px #ef494980, inset 0 0 1px 1px #ef494980; }
.flex-grid-slot.expired   > .inner { box-shadow: none; opacity: 0.5; }

.flex-grid-slot > form button { background-color: transparent; border: none; box-sizing: border-box; }
.flex-grid-slot > form button { display: flex; align-items: flex-start; flex-direction: column; min-height: 100px; }
.flex-grid-slot > form button { padding: 7px; width: 100%; text-align: left; cursor: pointer; }
.flex-grid-slot > form .title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flex-grid-slot > form .room  { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flex-grid-slot > form .seats { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flex-grid-slot > form .title { font-weight: 600; color: #1f3c77; }
.flex-grid-slot > form .room  { font-weight: 400; color: #666; }
.flex-grid-slot > form .seats { font-weight: 600; color: #282828; }
.flex-grid-slot > form .details { display: flex; align-items: center; justify-content: space-between; }
.flex-grid-slot > form .details { width: 100%; margin-top: 10px; }


.flex-slot-timeout               { display: flex; align-items: center; margin-right: 5px; }
.flex-slot-timeout         > i   { font-size: 16px; color: #1f3c77; margin-right: 2px; }
.flex-slot-timeout         > div { font-size: 12px; color: #999; line-height: 18px; margin-top: -2px; }
.flex-slot-timeout         > i   { color: #10B163; }
.flex-slot-timeout.expired > i   { color: #ef4949; }

.flex-grid-slot   .details > .status                         { margin-left: 5px; }
.flex-grid-slot   .details > .status             > *         { display: none; align-items: center; }
.flex-grid-slot   .details > .status.joined      > *.joined  { display: flex; }
.flex-grid-slot   .details > .status.left        > *.left    { display: flex; }
.flex-grid-slot   .details > .status.kicked      > *.kicked  { display: flex; }
.flex-grid-slot   .details > .status.present     > *.present { display: flex; }
.flex-grid-slot   .details > .status.absent      > *.absent  { display: flex; }
.flex-grid-slot   .details > .status.late        > *.late    { display: flex; }
.flex-grid-slot   .details > .status > *         > div       { font-size: 12px; color: #999; line-height: 18px; margin-top: -1px; }
.flex-grid-slot   .details > .status > *         > i         { font-size: 16px; margin-left: 2px; }
.flex-grid-slot   .details > .status > *.joined  > i         { color: #10B163; }
.flex-grid-slot   .details > .status > *.left    > i         { color: #666666; }
.flex-grid-slot   .details > .status > *.kicked  > i         { color: #ef4949; }
.flex-grid-slot   .details > .status > *.present > i         { color: #07693a; }
.flex-grid-slot   .details > .status > *.absent  > i         { color: #df1717; }
.flex-grid-slot   .details > .status > *.late    > i         { color: #ff9101; }


.flex-grid-slot > .ctrls       { position: absolute; top: 2px; right: 2px; }
.flex-grid-slot > .ctrls:empty { display: none; }

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

.flex-grid-slot       .classowl-dropdown      .drop-icon { opacity: 0; }
.flex-grid-slot:hover .classowl-dropdown      .drop-icon { opacity: 1; }
.flex-grid-slot       .classowl-dropdown.open .drop-icon { opacity: 1; }

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


/* used in calendar popup */

.modal-form.task-add .events-list li.evt-flex-slot { display: flex; align-items: center; }

.evt-flex-slot button                      { display: block; padding: 0; width: 100%; background-color: transparent; border: none; text-align: left; cursor: pointer; }
.evt-flex-slot .evt-time                   { color: #999999; font-size: 12px; line-height: 18px; }
.evt-flex-slot .evt-title                  { color: #228dcf; font-size: 14px; line-height: 21px; text-decoration: underline; }
.evt-flex-slot .evt-descr                  { color: #999999; font-size: 12px; line-height: 18px; }
.evt-flex-slot .evt-status                 { font-size: 12px; line-height: 18px; white-space: nowrap; }
.evt-flex-slot .evt-status .status.joined  { color: #10B163; }
.evt-flex-slot .evt-status .status.left    { color: #666666; }
.evt-flex-slot .evt-status .status.kicked  { color: #ef4949; }
.evt-flex-slot .evt-status .status.present { color: #07693a; font-weight: bold; }
.evt-flex-slot .evt-status .status.absent  { color: #df1717; font-weight: bold; }
.evt-flex-slot .evt-status .status.late    { color: #ff9101; font-weight: bold; }