/* The document editor (/office/<code>, Templates/onlyoffice.html): one slim bar with the file in it, the editor in all the room left.
   The house look: square corners, hairlines, grey tiles, one blue accent; colour only for meaning (the type of the file, saving, a problem). */
.oe{position:fixed;inset:0;z-index:1060;display:flex;flex-direction:column;background:#fff;color:#001737;font-size:14px}
.oe[hidden]{display:none}
.oe svg{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oe-bar{flex:none;display:flex;align-items:center;gap:10px;height:56px;padding:0 max(14px,env(safe-area-inset-right,0px)) 0 max(10px,env(safe-area-inset-left,0px));border-bottom:1px solid rgba(3,7,18,.08)}
.oe-back,.oe-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;padding:0;border:0;background:none;color:#596882;cursor:pointer}
.oe-back svg,.oe-icon svg{width:18px;height:18px}
.oe-back:hover,.oe-icon:hover{background:#f1f3f7;color:#001737}
.oe-type{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:10px;font-weight:700;letter-spacing:.03em;color:#fff}
.oe-type.is-docx{background:#2b579a}.oe-type.is-xlsx{background:#217346}.oe-type.is-pptx{background:#c43e1c}
.oe-file{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.25}
.oe-name{align-self:flex-start;max-width:100%;padding:1px 5px;margin:-1px -5px;border:0;background:none;font-weight:600;font-size:15px;line-height:1.3;font-family:inherit;color:inherit;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:text}
.oe-name:hover,.oe-name:focus-visible{background:#f1f3f7;outline:0}
.oe-namein{width:min(380px,40vw);height:26px;padding:0 6px;border:1px solid #2563eb;background:#fff;font-weight:600;font-size:15px;font-family:inherit;color:inherit;outline:0;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.oe-meta{display:flex;align-items:center;gap:6px;min-width:0;font-size:12px;color:#8392a5;white-space:nowrap;overflow:hidden}
.oe-meta > span{overflow:hidden;text-overflow:ellipsis}
.oe-state{display:inline-flex;align-items:center;gap:5px;flex:none}
.oe-state i{width:7px;height:7px;background:#10b759}
.oe-state.is-saving i{background:#f59f00;animation:oe-pulse 1s infinite}
.oe-state.is-saving{color:#b26a00}
@keyframes oe-pulse{50%{opacity:.3}}
.oe-who{display:flex;margin-right:4px}
.oe-who b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:-6px;border:2px solid #fff;background:#7c5cff;font-size:11px;font-weight:600;color:#fff}
.oe-who b:first-child{margin-left:0;background:#0ea5a3}
.oe-acts{display:flex;align-items:center;gap:4px}
.oe-btn{display:inline-flex;align-items:center;gap:6px;height:34px;padding:0 11px;border:0;background:none;font-weight:500;font-size:13.5px;line-height:1;font-family:inherit;color:#001737;white-space:nowrap;cursor:pointer}
.oe-btn svg{width:15px;height:15px}
.oe-btn:hover{background:#f1f3f7}
.oe-btn small{padding:1px 5px;background:#f1f3f7;font-size:11px;font-weight:600;color:#596882}
.oe-btn.is-primary{margin-left:4px;padding:0 14px;border-radius:8px;background:#2563eb;color:#fff;box-shadow:0 0 0 1px #2563eb,inset 0 1px 1px 0 rgba(255,255,255,.32),0 1px 3px 0 rgba(17,24,39,.2)}
.oe-btn.is-primary:hover{background:#1d4ed8}
.oe-split{display:inline-flex;align-items:center}
.oe-split .oe-caret{width:26px;padding:0;justify-content:center;margin-left:1px}
.oe-split .oe-caret svg{width:14px;height:14px}
.oe-split.is-primary{margin-left:4px;border-radius:8px;box-shadow:0 0 0 1px #2563eb,inset 0 1px 1px 0 rgba(255,255,255,.32),0 1px 3px 0 rgba(17,24,39,.2);background:#2563eb}
.oe-split.is-primary .oe-btn.is-primary{margin:0;box-shadow:none;border-radius:8px 0 0 8px}
.oe-split.is-primary .oe-caret{width:28px;margin:0;border-radius:0 8px 8px 0;box-shadow:inset 1px 0 0 rgba(255,255,255,.28)}
.oe-menu .dropdown-item svg{width:15px;height:15px;color:#8392a5}
.oe-menu .dropdown-item svg.oe-ext{width:12px;height:12px;margin-left:auto}
.oe-menu .dropdown-header{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8392a5}
.oe-type.is-pdf{background:#e5252a}.oe-type.is-odf{background:#5b6b86}
.oe-qr{display:flex;justify-content:center;padding:8px}
.oe-qr svg,.oe-qr img{width:220px;height:220px}
.oe-qr-note{margin:6px 0 0;text-align:center;font-size:12.5px;color:#8392a5}
.oe-sep{width:1px;height:20px;margin:0 4px;background:rgba(3,7,18,.1)}
.oe-menu .dropdown-item{display:flex;align-items:center;gap:10px;font-size:13.5px}
.oe-menu .dropdown-item .oe-type{width:22px;height:22px;font-size:7.5px}
.oe-menu{border-radius:0}
/* a save that is waiting (amber) or failed (red): one line under the bar, what happened and the three ways out */
.oe-save{flex:none;display:flex;align-items:center;flex-wrap:wrap;gap:6px 14px;padding:8px max(16px,env(safe-area-inset-right,0px)) 8px max(16px,env(safe-area-inset-left,0px));background:#fff8e6;border-bottom:1px solid #f5dfa3;font-size:13px;color:#7a5200}
.oe-save[hidden]{display:none}
.oe-save > svg{width:16px;height:16px}
.oe-save-text{flex:1 1 300px;min-width:0}
.oe-save-text b{font-weight:600}
.oe-save-text span{opacity:.75}
.oe-save .oe-btn{height:28px;padding:0 10px;color:inherit;font-size:12.5px}
.oe-save .oe-btn:hover{background:rgba(122,82,0,.08)}
.oe-save .oe-btn.is-primary{color:#fff}
.oe-save.is-held{background:#fdeeee;border-color:#f3c2c6;color:#8a1c26}
/* the editor (the Document Server's own frame on the site); while it opens: a quiet line */
.oe-main{position:relative;flex:1;min-height:0;background:#eef0f4}
.oe-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;color:#596882;font-size:13.5px;background:#eef0f4}
.oe-loading[hidden]{display:none}
.oe-spin{width:16px;height:16px;border:2px solid rgba(37,99,235,.2);border-top-color:#2563eb;border-radius:50%;animation:oe-spin .7s linear infinite}
@keyframes oe-spin{to{transform:rotate(360deg)}}
@media (max-width:767.98px){.oe-split .oe-caret{width:22px}.oe-btn span,.oe-btn small,.oe-who,.oe-sep{display:none}.oe-btn{padding:0 9px}.oe-btn.is-primary span{display:inline}}
@media (max-width:479.98px){.oe-meta{display:none}.oe-btn.is-primary span{display:none}.oe-bar{gap:6px}}
@media (prefers-color-scheme:dark){
  .oe{background:#151618;color:#D0D3D4}
  .oe-bar{border-color:rgba(255,255,255,.08)}
  .oe-back,.oe-icon{color:#97a3b9}
  .oe-back:hover,.oe-icon:hover,.oe-name:hover,.oe-name:focus-visible,.oe-btn:hover{background:rgba(255,255,255,.06);color:#fff}
  .oe-btn{color:#D0D3D4}
  .oe-btn small{background:rgba(255,255,255,.08);color:#b6c0cf}
  .oe-btn.is-primary{color:#fff}
  .oe-namein{background:transparent}
  .oe-who b{border-color:#151618}
  .oe-sep{background:rgba(255,255,255,.1)}
  .oe-state.is-saving{color:#ffc14d}
  .oe-save{background:#2b2210;border-color:#5a4410;color:#ffd47a}
  .oe-save.is-held{background:#2c1215;border-color:#6b2029;color:#ff9aa4}
  .oe-main,.oe-loading{background:#1b1c1f;color:#97a3b9}
}

/* Viewing / Editing: a two-part switch in the bar; viewing says so under the bar, with the way back */
.oe-mode{display:inline-flex;padding:3px;background:#f1f3f7}
.oe-mode button{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:0;background:none;font-weight:500;font-size:12.5px;line-height:1;font-family:inherit;color:#596882;cursor:pointer}
.oe-mode button svg{width:14px;height:14px}
.oe-mode button[aria-pressed=true]{background:#fff;color:#001737;box-shadow:0 1px 3px rgba(3,7,18,.12)}
.oe-viewnote,.oe-net,.oe-cmp{flex:none;display:flex;align-items:center;gap:10px;min-height:38px;padding:4px max(16px,env(safe-area-inset-right,0px)) 4px max(16px,env(safe-area-inset-left,0px));border-bottom:1px solid rgba(3,7,18,.08);font-size:13px}
.oe-viewnote[hidden],.oe-net[hidden],.oe-cmp[hidden]{display:none}
.oe-viewnote{background:#f5f8ff;color:#1e40af}
.oe-viewnote > svg,.oe-net > svg{width:16px;height:16px}
.oe-viewnote span,.oe-net span{flex:1;min-width:0}
.oe-viewnote .oe-btn{height:28px;color:#2563eb;font-size:12.5px}
.oe.is-viewing .ooa-tools{opacity:.35;pointer-events:none}
.oe-net{background:#f1f3f7;color:#3b4a63}
.oe-net.is-back{background:#ebfbf1;color:#0a7a3c}
.oe-state.is-offline i{background:#8392a5}
/* people: the circles open the list, roles and an invite line */
.oe-who{display:flex;align-items:center;margin-right:2px;padding:4px;border:0;background:none;cursor:pointer}
.oe-who:hover{background:#f1f3f7}
.oe-who b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin-left:-6px;border:2px solid #fff;font-size:11px;font-weight:600;color:#fff}
.oe-who b:first-child{margin-left:0}
.oe-who i{margin-left:4px;font-weight:600;font-size:11px;line-height:1;font-family:inherit;color:#596882;font-style:normal}
.oe-pop{width:340px;padding:0;border-radius:0}
.oe-pop-head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid rgba(3,7,18,.08);font-size:13px}
.oe-pop-head span{font-size:12px;color:#8392a5}
.oe-plist{max-height:220px;overflow:auto}
.oe-p{display:flex;align-items:center;gap:10px;padding:8px 14px;border-top:1px solid rgba(3,7,18,.05)}
.oe-p:first-child{border-top:0}
.oe-p > b{display:inline-flex;align-items:center;justify-content:center;flex:none;width:28px;height:28px;font-size:11.5px;font-weight:600;color:#fff}
.oe-p span{display:flex;flex-direction:column;flex:1;min-width:0;line-height:1.3;font-size:13px}
.oe-p small{font-size:11.5px;color:#8392a5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oe-p small.on{color:#10b759}
.oe-p small.is-wait{color:#b45309}
.oe-p select,.oe-invite select{height:28px;border:0;background:none;font-size:12.5px;color:#596882;cursor:pointer}
.oe-p em{font-size:12px;font-style:normal;color:#8392a5}
.oe-invite{display:flex;gap:4px;padding:10px;border-top:1px solid rgba(3,7,18,.08);background:#fafbfc}
.oe-invite input{flex:1;min-width:0;height:32px;padding:0 8px;border:1px solid rgba(3,7,18,.12);background:#fff;font-size:13px;color:inherit;outline:0}
.oe-invite input:focus{border-color:rgba(37,99,235,.6)}
.oe-invite .oe-btn.is-primary{height:32px;margin:0;padding:0 12px;font-size:13px}
.oe-p > b.is-me{background:#c0ccda url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E") center/16px no-repeat}
.oe-p select{flex:none;max-width:120px}
.oe-px{display:inline-flex;align-items:center;justify-content:center;flex:none;width:26px;height:26px;padding:0;border:0;background:none;color:#8392a5;cursor:pointer}
.oe-px:hover{background:#fdecec;color:#dc3545}
.oe-px svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.oe-invite.is-busy{opacity:.6;pointer-events:none}
.oe-pmsg{padding:0 12px 10px;background:#fafbfc;font-size:12px;color:#0a7a3c}
.oe-pmsg.is-bad{color:#dc3545}
.oe-shared{font-size:12px;color:#8392a5}
.oe-shared b{font-weight:600;color:#596882}
/* Versions: a panel at the side, the document stays in sight; name a version, compare it with now */
.oe-main .ooa{transition:right .2s}
.oe.has-side .oe-main .ooa{right:340px}
.oe-side{position:absolute;top:0;right:0;bottom:0;width:340px;display:flex;flex-direction:column;background:#fff;border-left:1px solid rgba(3,7,18,.1)}
.oe-side[hidden]{display:none}
.oe-side header{display:flex;align-items:center;justify-content:space-between;height:44px;padding:0 6px 0 14px;border-bottom:1px solid rgba(3,7,18,.08)}
.oe-vl{flex:1;overflow:auto}
.oe-v{padding:10px 14px;border-bottom:1px solid rgba(3,7,18,.06)}
.oe-v.is-on{background:rgba(37,99,235,.05);box-shadow:inset 2px 0 0 #2563eb}
.oe-v-top{display:flex;align-items:center;gap:8px}
.oe-v-top b{flex:1;min-width:0;font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oe-v-top b.is-unnamed{font-weight:500;color:#596882}
.oe-v-tag{padding:1px 6px;background:rgba(37,99,235,.08);font-size:11px;font-weight:600;color:#2563eb}
.oe-v small{display:block;margin-top:2px;font-size:12px;color:#8392a5}
.oe-v-acts{display:flex;gap:2px;margin:6px 0 0 -8px}
.oe-v-acts .oe-btn{height:26px;padding:0 8px;font-size:12px;color:#596882}
.oe-v-acts .oe-btn:hover{color:#2563eb}
.oe-v-name{width:100%;height:28px;padding:0 6px;border:1px solid #2563eb;font-size:13px;outline:0;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.oe-vup{display:flex;align-items:center;gap:8px;margin:0;padding:12px 14px;border-top:1px solid rgba(3,7,18,.08);font-size:13px;font-weight:500;color:#2563eb;cursor:pointer}
.oe-vup svg{width:16px;height:16px}
.oe-vup:hover{background:#f5f8ff}
.oe-cmp{background:#fffbea;color:#6b5300}
.oe-cmp span#oe_cmp_txt{flex:1}
.oe-cmp-key{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.oe-cmp-key i{display:inline-block;width:10px;height:10px;margin-left:6px}
.oe-cmp-key i.add{background:#b2f2bb}.oe-cmp-key i.del{background:#ffc9c9}
.oe-cmp .oe-btn{height:28px;font-size:12.5px;color:inherit}
/* focus mode: no bar, a small way back */
.oe.is-focus .oe-bar,.oe.is-focus .oe-viewnote{display:none}
.oe-unfocus{position:absolute;top:10px;right:max(14px,env(safe-area-inset-right,0px));z-index:3;display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 10px;border:0;background:rgba(15,27,45,.82);color:#fff;font-weight:500;font-size:12.5px;line-height:1;font-family:inherit;opacity:.35;transition:opacity .15s;cursor:pointer}
.oe-unfocus:hover{opacity:1}
.oe-unfocus kbd,.oe-menu kbd,.oe-kk kbd{padding:1px 5px;background:rgba(255,255,255,.15);font-weight:600;font-size:10.5px;line-height:1.4;font-family:inherit;color:inherit;box-shadow:none}
.oe-menu kbd{margin-left:auto;background:#f1f3f7;color:#8392a5}
.oe-menu .oe-demo{color:#8392a5}
/* Ctrl+K: open another file without leaving */
.oe-kk{position:absolute;inset:0;z-index:5;display:flex;justify-content:center;padding-top:12vh;background:rgba(3,7,18,.35)}
.oe-kk[hidden]{display:none}
.oe-kk-box{width:min(560px,calc(100vw - 32px));align-self:flex-start;background:#fff;box-shadow:0 24px 60px rgba(3,7,18,.3)}
.oe-kk-find{display:flex;align-items:center;gap:10px;margin:0;padding:0 14px;border-bottom:1px solid rgba(3,7,18,.08)}
.oe-kk-find svg{width:17px;height:17px;color:#8392a5}
.oe-kk-find input{flex:1;height:50px;border:0;background:none;font-size:15px;color:inherit;outline:0}
.oe-kk-find kbd{background:#f1f3f7;color:#8392a5}
.oe-kk-list{max-height:52vh;overflow:auto;padding:6px 0}
.oe-kk-h{padding:8px 14px 4px;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8392a5}
.oe-kk-i{display:flex;align-items:center;gap:10px;width:100%;padding:7px 14px;border:0;background:none;font-size:13.5px;color:inherit;text-align:left;cursor:pointer}
.oe-kk-i .oe-type{width:24px;height:24px;font-size:8px}
.oe-kk-i span:not(.oe-type){flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oe-kk-i small{font-size:12px;color:#8392a5}
.oe-kk-i.is-on{background:#f1f5ff;box-shadow:inset 2px 0 0 #2563eb}
.oe-kk-none{padding:16px 14px;font-size:13px;color:#8392a5}
/* templates: what a new file starts from */
.oe-tpls{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.oe-tpl{display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;text-align:left;color:inherit;cursor:pointer}
.oe-tpl-pic{aspect-ratio:3/4;padding:10px;background:#fff;box-shadow:0 0 0 1px rgba(3,7,18,.12);font:7px/1.5 Arial,sans-serif;color:#555;overflow:hidden}
.oe-tpl.is-wide .oe-tpl-pic{aspect-ratio:4/3}
.oe-tpl-pic i{display:block;height:4px;margin:4px 0;background:#e3e7ee}
.oe-tpl-pic i.h{height:7px;width:60%;background:var(--tc,#2b579a)}
.oe-tpl-pic i.s{width:40%}
.oe-tpl-pic.is-blank{display:flex;align-items:center;justify-content:center;color:#8392a5;font-size:28px;font-weight:300}
.oe-tpl:hover .oe-tpl-pic,.oe-tpl:focus-visible .oe-tpl-pic{box-shadow:0 0 0 2px #2563eb;outline:0}
.oe-tpl b{font-size:13px;font-weight:500}
.oe-tpl small{margin-top:-4px;font-size:11.5px;color:#8392a5}
/* the changes since a version (compare) */
.ooa .chg-del{display:none}
.oe.is-compare .ooa .chg-del{display:inline;background:#ffe3e3;color:#c92a2a;text-decoration:line-through}
.oe.is-compare .ooa .chg-add{background:#d3f9d8;color:#2b8a3e}
@media (max-width:900px){.oe-mode span{display:none}.oe-mode button{padding:0 8px}}
@media (max-width:767.98px){.oe.has-side .oe-main .ooa{right:0}.oe-side{width:100%}.oe-tpls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479.98px){.oe-mode{display:none}.oe-pop{width:calc(100vw - 16px)}}
#oe_tpl .modal-header{gap:10px}
@media (prefers-color-scheme:dark){
  .oe-mode{background:rgba(255,255,255,.07)}
  .oe-mode button{color:#97a3b9}
  .oe-mode button[aria-pressed=true]{background:rgba(255,255,255,.12);color:#fff;box-shadow:none}
  .oe-viewnote{background:#14203a;color:#9ec1ff}
  .oe-viewnote .oe-btn{color:#7fb2ff}
  .oe-net{background:#202328;color:#b6c0cf}
  .oe-net.is-back{background:#0f2a1b;color:#4ade80}
  .oe-viewnote,.oe-net,.oe-cmp{border-color:rgba(255,255,255,.08)}
  .oe-who:hover{background:rgba(255,255,255,.06)}
  .oe-who b{border-color:#151618}
  .oe-pop,.oe-pop-head b,.oe-p span{color:#e7eaf0}
  .oe-pop-head,.oe-invite{border-color:rgba(255,255,255,.08)}
  .oe-p{border-color:rgba(255,255,255,.06)}
  .oe-invite{background:rgba(255,255,255,.03)}
  .oe-pmsg{background:rgba(255,255,255,.03);color:#4ade80}
  .oe-pmsg.is-bad{color:#ff6b6b}
  .oe-px:hover{background:rgba(220,53,69,.15)}
  .oe-shared b{color:#b6c0cf}
  .oe-p small.is-wait{color:#fbbf24}
  .oe-p > b.is-me{background-color:#4b5563}
  .oe-invite input{background:transparent;border-color:rgba(255,255,255,.14)}
  .oe-side{background:#151618;border-color:rgba(255,255,255,.1)}
  .oe-side header,.oe-v,.oe-vup{border-color:rgba(255,255,255,.08)}
  .oe-v-top b.is-unnamed{color:#97a3b9}
  .oe-v-name{background:transparent;color:inherit}
  .oe-vup:hover{background:rgba(255,255,255,.04)}
  .oe-cmp{background:#2a2410;color:#ffd47a}
  .oe-menu kbd,.oe-kk-find kbd{background:rgba(255,255,255,.08);color:#97a3b9}
  .oe-kk-box{background:#1b1d21}
  .oe-kk-find{border-color:rgba(255,255,255,.08)}
  .oe-kk-i.is-on{background:rgba(106,168,255,.1);box-shadow:inset 2px 0 0 #6aa8ff}
  .oe-tpl-pic.is-blank{background:#202328;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
}