/*  MY OUTSTANDING WORK */
/* ----------------------------------------------------------------------------- */
.mow-search-input {
    width : 60px;
}
.mow-list {
    display : table;
    width   : 100%;
}
.mow-row {
    background  : var(--color-surface-level-3);
    cursor      : pointer;
    display     : table-row;
}
.mow-row:hover { 
    background   : var(--color-hover-background);
}
.mow-row > div {
    border-top    : 1px solid var(--color-surface-level-1);
    border-bottom : 1px solid var(--color-surface-level-1);
    display       : table-cell;
}
.mow-row > div:first-of-type {
    background : var(--color-surface-level-4);
    border-left : 1px solid var(--color-surface-level-1); 
}
.mow-row > div:last-of-type {
    border-right : 1px solid var(--color-surface-level-1); 
}
.mow-icon {
    font-size   : 18px;
    font-weight : 300;
    line-height : 11px !important;
    width       : 24px;
    text-align  : center;
}
.mow-icon::before {
    font-size : 18px;
    position  : relative;
    top       : 4px;
}
.mow-date {
    color         : white;
    padding-left  : 10px !important;
    padding-right : 10px !important;
    text-align    : right; 
    width         : 70px;
}
.mow-date.in-time { background : var(--color-status-green); }
.mow-date.late    { background : var(--color-status-red);   }
.mow-status {
    padding-left : 10px !important;
}

.mow-list.xxs .mow-row > div { padding :  2px  4px; }
.mow-list.xs  .mow-row > div { padding :  4px  4px; }
.mow-list.s   .mow-row > div { padding :  4px  8px; }
.mow-list.m   .mow-row > div { padding :  6px 10px; }
.mow-list.l   .mow-row > div { padding :  6px 10px; }
.mow-list.xl  .mow-row > div { padding :  8px 12px; }
.mow-list.xxl .mow-row > div { padding : 10px 12px; }

.surface-level-2 .mow-row, .surface-level-2 .mow-row > div { border-color : var(--color-surface-level-2) !important; }
.surface-level-3 .mow-row, .surface-level-3 .mow-row > div { border-color : var(--color-surface-level-3) !important; }
.surface-level-4 .mow-row, .surface-level-4 .mow-row > div { border-color : var(--color-surface-level-4) !important; }
.surface-level-5 .mow-row, .surface-level-5 .mow-row > div { border-color : var(--color-surface-level-5) !important; }

.surface-level-2 .mow-row > div { background : var(--color-surface-level-4); }
.surface-level-2 .mow-row > div:first-of-type { background : var(--color-surface-level-5); }

.mow-row:hover > div {
    background-color : var(--color-hover-background) !important;
    border-color     : var(--color-blue-500) !important;
}


/*  WORKSPACE ITEMS */
/* ----------------------------------------------------------------------------- */
.workspace-items-search-input {
    width : 80px;
}
.workspace-items-groups {
    display         : flex;
    flex-direction  : column;
    gap             : var(--spacer-xl);
    margin-top      : var(--spacer-l);
}
.workspace-items-group {
    display     : flex;
    gap         : var(--spacer-m);
}
.workspace-items-group-name {
    border-right: 2px solid var(--color-font);
    font-weight : 700;
    max-width   : 200px;
    min-width   : 200px;
    padding     : 10px;
    text-align  : right;
}
.workspace-items-group-list {
    flex-grow       : 1;
    justify-content : flex-start;
    padding         : 0px !important;
}

.surface-level-1 > .panel-content > .workspace-items-group > .workspace-items-group-name { border-color : var(--color-surface-level-3) ;}
.surface-level-2 > .panel-content > .workspace-items-group > .workspace-items-group-name { border-color : var(--color-surface-level-4) ;}
.surface-level-3 > .panel-content > .workspace-items-group > .workspace-items-group-name { border-color : var(--color-surface-level-4) ;}
.surface-level-4 > .panel-content > .workspace-items-group > .workspace-items-group-name { border-color : var(--color-surface-level-1) ;}
.surface-level-5 > .panel-content > .workspace-items-group > .workspace-items-group-name { border-color : var(--color-surface-level-1) ;}



/*  WORKSPACE VIEWS */
/* ----------------------------------------------------------------------------- */
.workspace-view-search-input {
    width : 80px;
}
.workspace-view-thead th {
    border-bottom : 1px solid transparent;
    padding : 8px 12px;
}
.workspace-view-item {
    cursor  : pointer;
    padding : 4px 15px;
}
.workspace-view-item:last-of-type {
    border-bottom : none;
}
.workspace-view-item:hover td {
    background-color : var(--color-hover-background) !important;
    border-color     : var(--color-blue-500) !important;
}
.workspace-view-item-descriptor {
    font-weight : 700;
}
.workspace-view-item td {
    border-left : none;
    border-right : none;
    padding : 8px 12px;
}
.workspace-view-item td:first-of-type {
    border-left : 1px solid transparent;
}
.workspace-view-item td:last-of-type {
    border-right : 1px solid transparent;
}
.workspace-view-item.selected td {
    background : var(--color-selected-background);
    border-color : var(--color-selected-border);
}
.workspace-view-groups {
    display : flex;
}

.workspace-view-group {
    display     : flex;
    gap         : var(--spacer-m);
}
.workspace-view-group-name {
    border-right: 2px solid var(--color-font);
    font-weight : 700;
    max-width   : 200px;
    min-width   : 200px;
    padding     : 10px;
    text-align  : right;
}
.workspace-view-groups.list {
    flex-direction  : column;
    gap             :  var(--spacer-m);
}
.workspace-view-groups.list > .workspace-view-group {
    flex-direction  : column;   
}
.workspace-view-groups.list > .workspace-view-group > .workspace-view-group-name {
    border-bottom   : 2px solid var(--color-font);
    border-right    : none;
    max-width       : unset;
    min-width       : unset;
    text-align      : left;
}