:root{ --cm-workdrive-width: 390px; --cm-workdrive-blue: #1473e6; --cm-workdrive-blue-dark: #075bc4; --cm-workdrive-blue-soft: #e8f1ff; --cm-workdrive-panel: #fff; --cm-workdrive-surface: #f7f9fc; --cm-workdrive-surface-2: #eef3f8; --cm-workdrive-text: #1f2937; --cm-workdrive-muted: #687386; --cm-workdrive-border: #dce3ec; --cm-workdrive-danger: #c5221f; --cm-workdrive-danger-soft: #fce8e6; --cm-workdrive-shadow: -16px 0 42px rgba(22, 41, 67, .16); --cm-workdrive-pdf: #d64045; --cm-workdrive-pdf-bg: #fdecec; --cm-workdrive-xls: #18794e; --cm-workdrive-xls-bg: #e4f7ec; --cm-workdrive-img: #7c4dff; --cm-workdrive-img-bg: #f0eaff; --cm-workdrive-doc: #1565d8; --cm-workdrive-doc-bg: #e7f0fd; --cm-workdrive-zip: #b07d10; --cm-workdrive-zip-bg: #fdf3d7; --cm-workdrive-gen: #52647b; --cm-workdrive-gen-bg: #eef3f8; --cm-workdrive-fold: #e8a715; --cm-workdrive-fold-bg: linear-gradient(180deg, #fff6dd, #ffedb8)} #clippymail-workdrive-toggle.clippymail-workdrive-nav{ position: relative !important} #taskmenu #clippymail-workdrive-toggle.clippymail-workdrive-nav::before{ display: none !important; content: none !important} .cm-workdrive-nav-icon{ display: grid; place-items: center; width: 24px; height: 24px} #clippymail-workdrive-toggle.is-active, body.cm-workdrive-open #clippymail-workdrive-toggle{ background: #e8f0fe !important; color: var(--cm-workdrive-blue) !important} .cm-workdrive-panel[hidden]{ display: none !important} .cm-workdrive-panel{ position: fixed; z-index: 100005; inset: 0 0 0 auto; display: flex; flex-direction: column; width: var(--cm-workdrive-width); color: var(--cm-workdrive-text); background: var(--cm-workdrive-panel); border-left: 1px solid var(--cm-workdrive-border); box-shadow: var(--cm-workdrive-shadow); font: 400 13px/1.45 Inter, Roboto, Arial, sans-serif} .cm-workdrive-head{ display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 10px 8px 16px} .cm-workdrive-mark{ position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; color: #fff; background: linear-gradient(145deg, #3f8ef1, #0a5cbf); border-radius: 12px; box-shadow: 0 5px 14px rgba(20, 115, 230, .25)} .cm-workdrive-heading{ display: flex; flex: 1; flex-direction: column; min-width: 0} .cm-workdrive-heading strong{ overflow: hidden; font-size: 15px; font-weight: 700; letter-spacing: -.01em; text-overflow: ellipsis; white-space: nowrap} .cm-workdrive-heading span{ color: var(--cm-workdrive-muted); font-size: 10.5px} .cm-workdrive-head button, .cm-workdrive-refresh, .cm-workdrive-back{ display: grid; place-items: center; flex: none; width: 34px; height: 34px; padding: 0; color: var(--cm-workdrive-muted); background: transparent; border: 0; border-radius: 9px; cursor: pointer} .cm-workdrive-head button svg, .cm-workdrive-refresh svg, .cm-workdrive-back svg{ width: 17px; height: 17px} .cm-workdrive-head button:hover, .cm-workdrive-refresh:hover, .cm-workdrive-back:hover:not(:disabled), .cm-workdrive-head button:focus-visible, .cm-workdrive-refresh:focus-visible, .cm-workdrive-back:focus-visible{ color: var(--cm-workdrive-text); background: var(--cm-workdrive-surface-2); outline: 2px solid rgba(20, 115, 230, .35); outline-offset: 1px} .cm-workdrive-back:disabled{ cursor: default; opacity: .35} .cm-workdrive-roots{ display: flex; gap: 4px; flex: none; margin: 0 14px 10px; padding: 4px; background: var(--cm-workdrive-surface-2); border-radius: 11px; overflow-x: auto; scrollbar-width: none} .cm-workdrive-roots::-webkit-scrollbar{ display: none} .cm-workdrive-roots[hidden]{ display: none} .cm-workdrive-root-chip{ display: flex; flex: 1 0 auto; align-items: center; justify-content: center; gap: 7px; height: 32px; padding: 0 12px; color: var(--cm-workdrive-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 650; white-space: nowrap} .cm-workdrive-root-chip.is-on{ color: var(--cm-workdrive-text); background: var(--cm-workdrive-panel); box-shadow: 0 1px 4px rgba(22, 41, 67, .14)} .cm-workdrive-root-chip:focus-visible{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 1px} .cm-workdrive-root-glyph{ display: grid; place-items: center; flex: none} .cm-workdrive-root-glyph svg{ width: 15px; height: 15px} .cm-workdrive-root-name{ overflow: hidden; text-overflow: ellipsis} .cm-workdrive-controls{ display: flex; align-items: center; gap: 8px; flex: none; margin: 0 14px 8px} .cm-workdrive-search{ display: flex; flex: 1; align-items: center; gap: 8px; min-width: 0; height: 38px; margin: 0; padding: 0 12px; font-weight: inherit; cursor: text; color: var(--cm-workdrive-muted); background: var(--cm-workdrive-surface-2); border: 1px solid transparent; border-radius: 11px} .cm-workdrive-search > svg{ width: 15px; height: 15px; flex: none} .cm-workdrive-search:focus-within{ background: var(--cm-workdrive-panel); border-color: rgba(20, 115, 230, .45); box-shadow: 0 0 0 3px rgba(20, 115, 230, .08)} .cm-workdrive-search input{ width: 100%; min-width: 0; height: 100%; padding: 0; color: var(--cm-workdrive-text); background: transparent; border: 0; outline: 0; font: inherit} .cm-workdrive-search input::placeholder{ color: #8994a4} .cm-workdrive-views{ display: flex; flex: none; gap: 2px; padding: 3px; background: var(--cm-workdrive-surface-2); border-radius: 10px} .cm-workdrive-views[hidden]{ display: none} .cm-workdrive-expand[hidden]{ display: none} .cm-workdrive-views button{ display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--cm-workdrive-muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer} .cm-workdrive-views button svg{ width: 15px; height: 15px} .cm-workdrive-views button.is-on{ color: var(--cm-workdrive-blue); background: var(--cm-workdrive-panel); box-shadow: 0 1px 4px rgba(22, 41, 67, .14)} .cm-workdrive-views button:focus-visible{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 1px} .cm-workdrive-upload{ display: flex; flex: none; align-items: center; gap: 7px; height: 36px; padding: 0 13px; color: #fff; background: var(--cm-workdrive-blue); border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; box-shadow: 0 4px 12px rgba(20, 115, 230, .28)} .cm-workdrive-upload svg{ width: 14px; height: 14px} .cm-workdrive-upload-folder, .cm-workdrive-newfolder{ display: grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0; color: var(--cm-workdrive-blue-dark); background: var(--cm-workdrive-blue-soft); border: 0; border-radius: 10px; cursor: pointer} .cm-workdrive-upload-folder svg, .cm-workdrive-newfolder svg{ width: 16px; height: 16px} .cm-workdrive-upload[hidden], .cm-workdrive-upload-folder[hidden], .cm-workdrive-newfolder[hidden]{ display: none} .cm-workdrive-upload:disabled, .cm-workdrive-upload-folder:disabled, .cm-workdrive-newfolder:disabled{ cursor: default; opacity: .5; box-shadow: none} .cm-workdrive-upload:hover:not(:disabled){ background: var(--cm-workdrive-blue-dark)} .cm-workdrive-upload:focus-visible, .cm-workdrive-upload-folder:focus-visible, .cm-workdrive-newfolder:focus-visible{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 2px} .cm-workdrive-filters{ display: flex; flex: none; flex-direction: column; gap: 6px; margin: 0 14px 8px} .cm-workdrive-filters[hidden], .cm-workdrive-types[hidden]{ display: none} .cm-workdrive-scope{ display: flex; gap: 2px; padding: 3px; background: var(--cm-workdrive-surface-2); border-radius: 10px} .cm-workdrive-scope button{ flex: 1 1 50%; min-width: 0; height: 28px; padding: 0 10px; overflow: hidden; color: var(--cm-workdrive-muted); background: transparent; border: 0; border-radius: 7px; cursor: pointer; font: inherit; font-size: 12px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap} .cm-workdrive-scope button.is-on{ color: var(--cm-workdrive-text); background: var(--cm-workdrive-panel); box-shadow: 0 1px 4px rgba(22, 41, 67, .14)} .cm-workdrive-types{ display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent); padding-right: 22px} .cm-workdrive-panel.is-search-open .cm-workdrive-upload, .cm-workdrive-panel.is-search-open .cm-workdrive-upload-folder, .cm-workdrive-panel.is-searching .cm-workdrive-pathbar{ display: none} .cm-workdrive-types::-webkit-scrollbar{ display: none} .cm-workdrive-type-chip{ flex: none; height: 26px; padding: 0 10px; color: var(--cm-workdrive-muted); background: transparent; border: 1px solid var(--cm-workdrive-border); border-radius: 999px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 650; white-space: nowrap} .cm-workdrive-type-chip:hover{ color: var(--cm-workdrive-text)} .cm-workdrive-type-chip.is-on{ color: var(--cm-workdrive-blue-dark); background: var(--cm-workdrive-blue-soft); border-color: transparent} .cm-workdrive-scope button:focus-visible, .cm-workdrive-type-chip:focus-visible{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 1px} .cm-workdrive-pathbar{ display: flex; align-items: center; gap: 2px; flex: none; min-height: 36px; margin: 0 8px; padding: 0 2px 4px} .cm-workdrive-crumbs{ display: flex; flex: 1; align-items: center; gap: 2px; min-width: 0; overflow: hidden; white-space: nowrap} .cm-workdrive-crumbs button{ max-width: 130px; padding: 5px 8px; overflow: hidden; color: var(--cm-workdrive-blue-dark); background: transparent; border: 0; border-radius: 7px; cursor: pointer; font: inherit; font-size: 11.5px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap} .cm-workdrive-crumbs button:hover:not(:disabled){ background: var(--cm-workdrive-blue-soft)} .cm-workdrive-crumbs button:focus-visible{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 1px} .cm-workdrive-crumbs button:disabled{ color: var(--cm-workdrive-text); background: var(--cm-workdrive-surface-2); cursor: default; font-weight: 700} .cm-workdrive-separator{ display: grid; place-items: center; flex: none; color: #a4adba} .cm-workdrive-separator svg{ width: 11px; height: 11px} .cm-workdrive-body{ flex: 1; min-height: 0; padding: 0 10px 16px; overflow: auto; overscroll-behavior: contain} .cm-workdrive-group{ position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 6px; padding: 9px 8px 5px; background: var(--cm-workdrive-panel); color: var(--cm-workdrive-muted); font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase} .cm-workdrive-group em{ font-style: normal; font-weight: 650; opacity: .7} .cm-workdrive-results-head{ display: flex; flex-direction: column; gap: 3px; padding: 6px 8px 2px; color: var(--cm-workdrive-muted); font-size: 11.5px} .cm-workdrive-results-head strong{ color: var(--cm-workdrive-text); font-size: 12px; font-weight: 700} .cm-workdrive-results-head.is-offline strong{ color: var(--cm-workdrive-zip)} .cm-workdrive-didyoumean{ color: var(--cm-workdrive-muted)} .cm-workdrive-suggestion{ padding: 0; color: var(--cm-workdrive-blue-dark); background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700; text-decoration: underline} .cm-workdrive-stale{ padding: 6px 9px; color: #8a4b00; background: #ffedd6; border-radius: 8px; font-weight: 600} .cm-workdrive-name-text{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap} mark.cm-workdrive-hit{ padding: 0 1px; color: inherit; background: rgba(255, 196, 0, .32); border-radius: 3px} .cm-workdrive-row.cm-workdrive-result{ align-items: flex-start; outline: none} .cm-workdrive-row.cm-workdrive-result .cm-workdrive-fileicon{ margin-top: 2px} .cm-workdrive-row.cm-workdrive-result .cm-workdrive-chevron{ align-self: center} .cm-workdrive-row.cm-workdrive-result:focus-visible{ background: var(--cm-workdrive-surface); box-shadow: inset 0 0 0 2px rgba(20, 115, 230, .45)} .cm-workdrive-result-path{ display: flex; align-items: center; gap: 2px; min-width: 0; margin-top: 1px; overflow: hidden; white-space: nowrap} .cm-workdrive-result-crumb{ flex: 0 2 auto; min-width: 0; max-width: 150px; padding: 0 2px; overflow: hidden; color: var(--cm-workdrive-blue-dark); background: none; border: 0; border-radius: 4px; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap} .cm-workdrive-result-crumb:first-child{ flex-shrink: 4} .cm-workdrive-result-crumb:last-child{ flex-shrink: 0; max-width: 60%} .cm-workdrive-result-crumb.is-fold{ flex: none; min-width: 0} .cm-workdrive-result-crumb:hover{ text-decoration: underline} .cm-workdrive-result-sep{ flex: none; color: #a4adba; font-size: 10px} .cm-workdrive-index-note{ margin: 14px 8px 2px; color: var(--cm-workdrive-muted); font-size: 10.5px; text-align: center} .cm-workdrive-index-note.is-building{ color: var(--cm-workdrive-zip)} .cm-workdrive-index-refresh{ padding: 0; color: var(--cm-workdrive-blue-dark); background: none; border: 0; cursor: pointer; font: inherit; font-weight: 700} .cm-workdrive-index-refresh:disabled{ cursor: default; opacity: .7} .cm-workdrive-index-live{ display: block; margin-top: 3px} .cm-workdrive-search-everywhere{ margin-top: 4px} .cm-workdrive-row.is-revealed, .cm-workdrive-card.is-revealed{ background: var(--cm-workdrive-blue-soft); box-shadow: inset 0 0 0 2px rgba(20, 115, 230, .45); transition: background .6s ease} .cm-workdrive-fileicon.has-thumb, .cm-workdrive-tile.has-thumb{ position: relative; overflow: hidden} .cm-workdrive-thumb{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .15s ease} .is-loaded > .cm-workdrive-thumb{ opacity: 1} .cm-workdrive-batch{ flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-top: 1px solid var(--cm-workdrive-border); background: var(--cm-workdrive-panel); font-size: 13px} .cm-workdrive-batch[hidden]{ display: none !important} .cm-workdrive-batch-label{ flex: 0 0 auto; color: var(--cm-workdrive-muted); white-space: nowrap} .cm-workdrive-batch-track{ flex: 1 1 auto; height: 6px; min-width: 60px; border-radius: 999px; background: var(--cm-workdrive-surface-2); overflow: hidden} .cm-workdrive-batch-fill{ height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cm-workdrive-blue), #59a2ff); transition: width .2s ease} .cm-workdrive-batch-cancel{ flex: 0 0 auto} .cm-workdrive-batch.is-undo{ flex-wrap: wrap} .cm-workdrive-batch.is-undo .cm-workdrive-batch-label{ flex: 1 1 0; min-width: 0; white-space: normal; overflow-wrap: anywhere} .cm-workdrive-prompt{ flex: 0 0 auto; margin: 0; padding: 12px 16px; border-bottom: 1px solid var(--cm-workdrive-border); background: var(--cm-workdrive-panel)} .cm-workdrive-prompt[hidden]{ display: none !important} .cm-workdrive-prompt label, .cm-workdrive-prompt-label{ display: block} .cm-workdrive-prompt-label{ margin-bottom: 6px; color: var(--cm-workdrive-muted); font-size: 12px; font-weight: 700} .cm-workdrive-prompt-input{ box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; color: var(--cm-workdrive-text); background: var(--cm-workdrive-surface); border: 1px solid var(--cm-workdrive-border); border-radius: 8px; font-size: 16px} .cm-workdrive-prompt-input:focus{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 1px} .cm-workdrive-prompt-actions{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px} .cm-workdrive-prompt-actions button{ min-height: 40px; padding: 7px 14px; border: 0; border-radius: 8px; cursor: pointer} .cm-workdrive-prompt-cancel{ color: var(--cm-workdrive-text); background: var(--cm-workdrive-surface-2)} .cm-workdrive-row.is-file.has-menu{ cursor: pointer} .cm-workdrive-savebar{ flex: 0 0 auto; padding: 14px 16px 16px; border-top: 1px solid var(--cm-workdrive-border); background: var(--cm-workdrive-panel); box-shadow: 0 -8px 22px rgba(22, 41, 67, .08)} .cm-workdrive-savebar[hidden]{ display: none !important} .cm-workdrive-savebar label, .cm-workdrive-savebar label > span{ display: block} .cm-workdrive-savebar label > span{ margin-bottom: 6px; color: var(--cm-workdrive-muted); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em} .cm-workdrive-save-name{ box-sizing: border-box; width: 100%; min-height: 40px; padding: 8px 10px; color: var(--cm-workdrive-text); background: var(--cm-workdrive-surface); border: 1px solid var(--cm-workdrive-border); border-radius: 8px} .cm-workdrive-save-name:focus{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 1px} .cm-workdrive-save-destination{ margin: 9px 0; overflow: hidden; color: var(--cm-workdrive-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap} .cm-workdrive-save-actions{ display: flex; justify-content: flex-end; gap: 8px} .cm-workdrive-save-actions button{ min-height: 38px; padding: 7px 13px; border: 0; border-radius: 8px; cursor: pointer} .cm-workdrive-save-cancel{ color: var(--cm-workdrive-text); background: var(--cm-workdrive-surface-2)} .cm-workdrive-save-attachment{ margin-left: 6px; padding: 4px 8px; color: var(--cm-workdrive-blue-dark); background: var(--cm-workdrive-blue-soft); border: 0; border-radius: 7px; font: inherit; font-size: 11px; cursor: pointer} .cm-workdrive-save-attachment:hover, .cm-workdrive-save-attachment:focus-visible{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 1px} .cm-workdrive-foot{ display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 16px 12px; border-top: 1px solid var(--cm-workdrive-border); background: var(--cm-workdrive-panel)} .cm-workdrive-foot[hidden]{ display: none !important} .cm-workdrive-foot-note{ color: var(--cm-workdrive-muted); font-size: 10.5px} .cm-workdrive-openlink{ color: var(--cm-workdrive-blue-dark); border-radius: 6px; font-size: 10.5px; font-weight: 700; text-decoration: none} .cm-workdrive-openlink:hover{ text-decoration: underline} .cm-workdrive-openlink:focus-visible{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 2px} .cm-workdrive-list{ display: flex; flex-direction: column; gap: 2px} .cm-workdrive-row{ display: flex; align-items: center; gap: 11px; min-height: 54px; padding: 7px 9px; border-radius: 12px} .cm-workdrive-row:hover, .cm-workdrive-row:focus-within{ background: var(--cm-workdrive-surface)} .cm-workdrive-fileicon{ position: relative; display: grid; place-items: center; flex: none; width: 38px; height: 38px; color: var(--cm-workdrive-gen); background: var(--cm-workdrive-gen-bg); border-radius: 11px} .cm-workdrive-fileicon svg{ width: 20px; height: 20px} .cm-workdrive-ext{ position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); font-size: 7.5px; font-weight: 800; letter-spacing: .04em} .cm-workdrive-fileicon.is-folder-icon{ color: var(--cm-workdrive-fold); background: var(--cm-workdrive-fold-bg)} .cm-workdrive-fileicon.is-pdf{ color: var(--cm-workdrive-pdf); background: var(--cm-workdrive-pdf-bg)} .cm-workdrive-fileicon.is-xls{ color: var(--cm-workdrive-xls); background: var(--cm-workdrive-xls-bg)} .cm-workdrive-fileicon.is-img{ color: var(--cm-workdrive-img); background: var(--cm-workdrive-img-bg)} .cm-workdrive-fileicon.is-doc{ color: var(--cm-workdrive-doc); background: var(--cm-workdrive-doc-bg)} .cm-workdrive-fileicon.is-zip{ color: var(--cm-workdrive-zip); background: var(--cm-workdrive-zip-bg)} .cm-workdrive-filemain{ display: flex; flex: 1; flex-direction: column; min-width: 0} .cm-workdrive-name{ display: block; width: 100%; padding: 0; overflow: hidden; color: var(--cm-workdrive-text); background: transparent; border: 0; font: inherit; font-weight: 600; text-align: left; text-overflow: ellipsis; white-space: nowrap} button.cm-workdrive-name{ cursor: pointer} .cm-workdrive-name:focus-visible{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 2px; border-radius: 4px} .cm-workdrive-meta{ display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--cm-workdrive-muted); font-size: 10.5px; white-space: nowrap; overflow: hidden} .cm-workdrive-toolarge{ color: var(--cm-workdrive-zip); font-weight: 650} .cm-workdrive-chevron{ display: grid; place-items: center; flex: none; color: var(--cm-workdrive-muted); opacity: .55} .cm-workdrive-chevron svg{ width: 14px; height: 14px} .cm-workdrive-acts{ display: none; align-items: center; gap: 3px; flex: none} .cm-workdrive-row:hover .cm-workdrive-acts, .cm-workdrive-row:focus-within .cm-workdrive-acts{ display: flex} .cm-workdrive-row:hover .cm-workdrive-chevron, .cm-workdrive-row:focus-within .cm-workdrive-chevron{ display: none} .cm-workdrive-acts a, .cm-workdrive-acts button{ display: grid; place-items: center; width: 30px; height: 30px; padding: 0; color: var(--cm-workdrive-muted); background: transparent; border: 0; border-radius: 8px; cursor: pointer} .cm-workdrive-acts svg{ width: 15px; height: 15px} .cm-workdrive-acts a:hover, .cm-workdrive-acts button:hover{ color: var(--cm-workdrive-text); background: var(--cm-workdrive-surface-2)} .cm-workdrive-acts a:focus-visible, .cm-workdrive-acts button:focus-visible{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 1px} .cm-workdrive-acts .cm-workdrive-delete:hover{ color: var(--cm-workdrive-danger); background: var(--cm-workdrive-danger-soft)} .cm-workdrive-acts .cm-workdrive-delete[aria-busy="true"]{ cursor: progress; opacity: .5} .cm-workdrive-attach{ color: #fff !important; background: var(--cm-workdrive-blue) !important} .cm-workdrive-attach:hover, .cm-workdrive-attach:focus-visible{ background: var(--cm-workdrive-blue-dark) !important} .cm-workdrive-attach.is-attaching{ color: var(--cm-workdrive-blue-dark) !important; background: var(--cm-workdrive-blue-soft) !important} .cm-workdrive-attach:disabled{ cursor: default; opacity: .75} .cm-workdrive-grid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 6px 2px} .cm-workdrive-card{ display: flex; flex-direction: column; padding: 0; overflow: hidden; color: inherit; text-align: left; background: var(--cm-workdrive-panel); border: 1px solid var(--cm-workdrive-border); border-radius: 12px; font: inherit} button.cm-workdrive-card{ cursor: pointer} .cm-workdrive-card:hover, .cm-workdrive-card:focus-visible{ border-color: transparent; box-shadow: 0 6px 18px rgba(22, 41, 67, .14)} .cm-workdrive-card:focus-visible{ outline: 2px solid var(--cm-workdrive-blue)} .cm-workdrive-tile{ display: grid; place-items: center; height: 68px; color: var(--cm-workdrive-gen); background: var(--cm-workdrive-gen-bg)} .cm-workdrive-tile svg{ width: 24px; height: 24px} .cm-workdrive-tile.has-thumb{ height: 96px} .cm-workdrive-grid.is-results .cm-workdrive-tile{ height: auto; aspect-ratio: 1 / 1} .cm-workdrive-tile.is-folder-icon{ color: var(--cm-workdrive-fold); background: var(--cm-workdrive-fold-bg)} .cm-workdrive-tile.is-pdf{ color: var(--cm-workdrive-pdf); background: var(--cm-workdrive-pdf-bg)} .cm-workdrive-tile.is-xls{ color: var(--cm-workdrive-xls); background: var(--cm-workdrive-xls-bg)} .cm-workdrive-tile.is-img{ color: var(--cm-workdrive-img); background: var(--cm-workdrive-img-bg)} .cm-workdrive-tile.is-doc{ color: var(--cm-workdrive-doc); background: var(--cm-workdrive-doc-bg)} .cm-workdrive-tile.is-zip{ color: var(--cm-workdrive-zip); background: var(--cm-workdrive-zip-bg)} .cm-workdrive-card-info{ display: flex; flex-direction: column; gap: 2px; padding: 7px 9px 8px; min-width: 0} .cm-workdrive-card-name{ overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap} .cm-workdrive-card-meta{ color: var(--cm-workdrive-muted); font-size: 9.5px} .cm-workdrive-row.has-menu, .cm-workdrive-card.has-menu{ cursor: context-menu} button.cm-workdrive-card.has-menu{ cursor: pointer} .cm-workdrive-menu{ position: fixed; z-index: 1000; display: flex; flex-direction: column; min-width: 178px; padding: 6px; background: var(--cm-workdrive-panel); border: 1px solid var(--cm-workdrive-border); border-radius: 10px; box-shadow: 0 12px 32px rgba(22, 41, 67, .22)} .cm-workdrive-menu-item{ display: block; width: 100%; min-height: 34px; padding: 8px 10px; color: var(--cm-workdrive-text); background: none; border: 0; border-radius: 7px; cursor: pointer; font-size: 12.5px; font-weight: 600; text-align: left; text-decoration: none; white-space: nowrap} .cm-workdrive-menu-item:hover, .cm-workdrive-menu-item:focus{ background: var(--cm-workdrive-blue-soft); color: var(--cm-workdrive-blue-dark); outline: none} .cm-workdrive-menu-item.is-trash{ color: var(--cm-workdrive-danger)} .cm-workdrive-menu-item.is-trash:hover, .cm-workdrive-menu-item.is-trash:focus{ color: var(--cm-workdrive-danger); background: var(--cm-workdrive-danger-soft)} .cm-workdrive-menu-item.is-attaching{ color: var(--cm-workdrive-blue-dark); background: var(--cm-workdrive-blue-soft)} .cm-workdrive-menu-item:disabled{ cursor: default; opacity: .75} .cm-workdrive-empty{ display: flex; align-items: center; flex-direction: column; gap: 9px; padding: 46px 26px; color: var(--cm-workdrive-muted); text-align: center} .cm-workdrive-empty strong{ color: var(--cm-workdrive-text); font-size: 15px; letter-spacing: -.01em} .cm-workdrive-empty span{ max-width: 270px} .cm-workdrive-empty-icon, .cm-workdrive-drive-logo{ display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 3px; color: var(--cm-workdrive-blue); background: radial-gradient(120% 120% at 30% 20%, var(--cm-workdrive-blue-soft), transparent 70%), var(--cm-workdrive-surface-2); border-radius: 20px; font-size: 23px; font-weight: 800} .cm-workdrive-empty-icon svg, .cm-workdrive-drive-logo svg{ width: 30px; height: 30px} .cm-workdrive-connect-state strong{ font-size: 16px} .cm-workdrive-fine{ font-size: 10.5px; opacity: .85} .cm-workdrive-primary, .cm-workdrive-more{ min-height: 38px; padding: 8px 16px; color: #fff; background: var(--cm-workdrive-blue); border: 0; border-radius: 10px; cursor: pointer; font: inherit; font-weight: 700} .cm-workdrive-primary:hover{ background: var(--cm-workdrive-blue-dark)} .cm-workdrive-primary:focus-visible, .cm-workdrive-more:focus-visible{ outline: 2px solid var(--cm-workdrive-blue); outline-offset: 2px} .cm-workdrive-connect-state .cm-workdrive-primary{ margin-top: 6px; min-height: 40px; padding: 8px 18px; border-radius: 11px; box-shadow: 0 6px 16px rgba(20, 115, 230, .3)} .cm-workdrive-more{ display: block; margin: 12px auto 0; color: var(--cm-workdrive-blue-dark); background: var(--cm-workdrive-blue-soft)} .cm-workdrive-skeletons{ padding: 3px 0} .cm-workdrive-skeleton{ height: 54px; margin: 3px 0; overflow: hidden; background: linear-gradient(90deg, var(--cm-workdrive-surface) 25%, var(--cm-workdrive-surface-2) 45%, var(--cm-workdrive-surface) 65%); background-size: 220% 100%; border-radius: 12px; animation: cm-workdrive-shimmer 1.2s linear infinite} @keyframes cm-workdrive-shimmer{ to{ background-position: -220% 0}} @media (min-width: 769px){ body.cm-workdrive-open:not(.cm-workdrive-screen) #layout{ width: calc(100% - var(--cm-workdrive-width)) !important; transition: width 140ms ease-out}} .cm-workdrive-panel.is-screen{ inset: 0; width: auto; border-left: 0; box-shadow: none} @media screen and (min-width: 1024px){ body.task-mail .cm-workdrive-panel.is-screen, body.task-calendar .cm-workdrive-panel.is-screen, body.task-addressbook .cm-workdrive-panel.is-screen, body.task-settings .cm-workdrive-panel.is-screen{ left: var(--cm-sidebar-shell-width, 220px); border-left: 1px solid var(--cm-workdrive-border)}} .cm-workdrive-panel.is-screen .cm-workdrive-head, .cm-workdrive-panel.is-screen .cm-workdrive-roots, .cm-workdrive-panel.is-screen .cm-workdrive-controls, .cm-workdrive-panel.is-screen .cm-workdrive-filters, .cm-workdrive-panel.is-screen .cm-workdrive-pathbar, .cm-workdrive-panel.is-screen .cm-workdrive-body, .cm-workdrive-panel.is-screen .cm-workdrive-batch, .cm-workdrive-panel.is-screen .cm-workdrive-savebar, .cm-workdrive-panel.is-screen .cm-workdrive-foot{ width: 100%; max-width: 1080px; margin-right: auto; margin-left: auto} .cm-workdrive-panel.is-screen .cm-workdrive-grid{ grid-template-columns: repeat(auto-fill, minmax(168px, 1fr))} .cm-workdrive-panel.is-screen .cm-workdrive-filters{ flex-direction: row; align-items: center; gap: 10px} .cm-workdrive-panel.is-screen .cm-workdrive-scope{ flex: 0 0 320px} .cm-workdrive-panel.is-screen .cm-workdrive-types{ flex: 1 1 auto} .cm-workdrive-panel.is-screen .cm-workdrive-sharing{ left: auto; width: min(440px, 100%); border-left: 1px solid var(--cm-workdrive-border); box-shadow: var(--cm-workdrive-shadow)} @media (hover: none){ .cm-workdrive-row .cm-workdrive-acts{ display: none !important} .cm-workdrive-row:hover .cm-workdrive-chevron, .cm-workdrive-row:focus-within .cm-workdrive-chevron{ display: grid}} @media (max-width: 768px){ body.cm-workdrive-open #messagestack{ z-index: 100006} body.cm-workdrive-open .footer.menu.toolbar.content-frame-navigation{ display: none !important} body.cm-workdrive-open.mailbox-action-show .cm-workdrive-panel, body.cm-workdrive-open.action-show .cm-workdrive-panel, body.cm-workdrive-open.cm-reading .cm-workdrive-panel{ bottom: 0} #clippymail-bottom-nav.cm-bottom-nav-has-workdrive{ display: flex; justify-content: stretch; overflow-x: hidden; scrollbar-width: none} #clippymail-bottom-nav.cm-bottom-nav-has-workdrive::-webkit-scrollbar{ display: none} #clippymail-bottom-nav.cm-bottom-nav-has-workdrive .cm-bottom-nav-item{ flex: 1 1 0; min-width: 0} .cm-workdrive-panel{ width: 100%; bottom: calc(var(--clippymail-mobile-bottomnav, 52px) + env(safe-area-inset-bottom, 0px)); border-left: 0} .cm-workdrive-expand{ display: none !important} .cm-workdrive-panel.is-screen{ inset: 0 0 calc(var(--clippymail-mobile-bottomnav, 52px) + env(safe-area-inset-bottom, 0px)) 0} body.cm-workdrive-open #layout-content, body.cm-workdrive-open #layout-list{ display: none !important} .cm-workdrive-head{ min-height: 54px} .cm-workdrive-row{ min-height: 62px} .cm-workdrive-grid{ grid-template-columns: repeat(2, 1fr)} .cm-workdrive-grid.is-results{ grid-template-columns: repeat(3, 1fr); gap: 6px} .cm-workdrive-grid.is-results .cm-workdrive-card-info{ padding: 5px 7px 6px} .cm-workdrive-controls{ flex-wrap: wrap; row-gap: 6px} .cm-workdrive-search{ flex: 1 0 100%; box-sizing: border-box; height: 44px} .cm-workdrive-views{ margin-right: auto} .cm-workdrive-upload{ justify-content: center; padding: 0} .cm-workdrive-upload > span{ display: none} .cm-workdrive-head button, .cm-workdrive-back, .cm-workdrive-refresh, .cm-workdrive-root-chip, .cm-workdrive-views button, .cm-workdrive-upload, .cm-workdrive-upload-folder, .cm-workdrive-newfolder, .cm-workdrive-batch-cancel, .cm-workdrive-menu-item, .cm-workdrive-save-attachment, .cm-workdrive-save-actions button, .cm-workdrive-save-name, .cm-workdrive-scope button, .cm-workdrive-type-chip, button.cm-workdrive-name{ min-width: 44px; min-height: 44px} button.cm-workdrive-name{ display: flex; align-items: center} .cm-workdrive-result button.cm-workdrive-name{ min-height: 26px} .cm-workdrive-result-crumb{ min-height: 24px; font-size: 11.5px}} html.dark-mode .cm-workdrive-panel{ --cm-workdrive-panel: #171d25; --cm-workdrive-surface: #1d2530; --cm-workdrive-surface-2: #252f3b; --cm-workdrive-text: #e5ebf3; --cm-workdrive-muted: #98a6b8; --cm-workdrive-border: #303c4b; --cm-workdrive-danger: #ff8a80; --cm-workdrive-danger-soft: #3c2224; --cm-workdrive-blue: #3d8bff; --cm-workdrive-blue-soft: #17375d; --cm-workdrive-blue-dark: #8cc1ff; --cm-workdrive-pdf: #ff8a8e; --cm-workdrive-pdf-bg: #3c2224; --cm-workdrive-xls: #55c48f; --cm-workdrive-xls-bg: #1c3329; --cm-workdrive-img: #b39dff; --cm-workdrive-img-bg: #2b2347; --cm-workdrive-doc: #7db2f5; --cm-workdrive-doc-bg: #1d2f4a; --cm-workdrive-zip: #e5c06a; --cm-workdrive-zip-bg: #37301c; --cm-workdrive-gen: #98a6b8; --cm-workdrive-gen-bg: #252f3b; --cm-workdrive-fold: #ffd46e; --cm-workdrive-fold-bg: linear-gradient(180deg, #3a321d, #332b16); color-scheme: dark} @media (prefers-reduced-motion: reduce){ .cm-workdrive-skeleton{ animation: none} body.cm-workdrive-open #layout{ transition: none !important}} .cm-workdrive-sharing{ position: absolute; inset: 0; z-index: 900; display: flex; flex-direction: column; background: var(--cm-workdrive-panel)} .cm-workdrive-sharing-head{ display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cm-workdrive-border)} .cm-workdrive-sharing-head strong{ flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px} .cm-workdrive-sharing-close{ flex: none; min-width: 32px; min-height: 32px; color: var(--cm-workdrive-muted); background: none; border: 0; border-radius: 8px; cursor: pointer; font-size: 14px} .cm-workdrive-sharing-close:hover{ background: var(--cm-workdrive-surface-2)} .cm-workdrive-sharing-body{ flex: 1 1 auto; padding: 8px 16px 20px; overflow: auto; overscroll-behavior: contain} .cm-workdrive-share-heading{ margin: 16px 0 8px; color: var(--cm-workdrive-muted); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase} .cm-workdrive-share-row{ display: flex; align-items: flex-start; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--cm-workdrive-border)} .cm-workdrive-share-main{ display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0} .cm-workdrive-share-main strong{ font-size: 13px} .cm-workdrive-share-meta{ color: var(--cm-workdrive-muted); font-size: 11px; overflow-wrap: anywhere} .cm-workdrive-share-url{ color: var(--cm-workdrive-blue-dark); font-size: 11px; overflow-wrap: anywhere} .cm-workdrive-share-flags{ display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 46%} .cm-workdrive-flag{ padding: 2px 7px; color: var(--cm-workdrive-blue-dark); background: var(--cm-workdrive-blue-soft); border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap} .cm-workdrive-flag.is-warn{ color: #8a4b00; background: #ffedd6} .cm-workdrive-share-revoke, .cm-workdrive-share-add{ flex: none; min-height: 30px; padding: 6px 10px; color: var(--cm-workdrive-blue-dark); background: none; border: 1px solid var(--cm-workdrive-border); border-radius: 8px; cursor: pointer; font-size: 11px; font-weight: 700} .cm-workdrive-share-add{ margin-top: 10px; width: 100%} .cm-workdrive-share-revoke:hover, .cm-workdrive-share-add:hover{ background: var(--cm-workdrive-blue-soft)} .cm-workdrive-share-revoke:disabled, .cm-workdrive-share-add:disabled{ cursor: default; opacity: .7} html.dark-mode .cm-workdrive-flag.is-warn{ color: #ffd9a8; background: #4a2f0c} html.dark-mode .cm-workdrive-panel mark.cm-workdrive-hit{ background: rgba(255, 196, 0, .28)} html.dark-mode .cm-workdrive-stale{ color: #ffd9a8; background: #4a2f0c} @media (max-width: 768px){ .cm-workdrive-share-revoke, .cm-workdrive-share-add, .cm-workdrive-sharing-close{ min-height: 44px; min-width: 44px}}