/* Az átvett Office-komponensek böngészős illesztése. A generált CSS külön fájlban marad. */
:root{--appc:#0072c6}
.titlebar{height:33px;background:#0072c6;font-size:13px;padding:0 10px}
.tabbar{background:#f3f3f3;min-height:30px;height:30px;border:0}
.tabbar .tab{font-size:12px;height:30px;padding:5px 11px;border-radius:0}
.tabbar .tab.active{border-bottom:3px solid #0072c6;background:transparent;color:#0072c6}
.ribbon.skill-ribbon{background:#fff;height:99px;min-height:99px;margin:0 6px 3px;border:0;border-radius:6px;box-shadow:0 1px 3px #0003;padding:3px 4px 0;scrollbar-width:thin;--appc:#0072c6}
.skill-ribbon button{font-family:inherit;background:transparent;box-sizing:border-box;font-weight:400;border-radius:3px;cursor:pointer}
.skill-ribbon button:hover:not(:disabled){background:#dbeaf7;border-color:#b7d3ea}
.skill-ribbon button:focus-visible{outline:2px solid #0072c6;outline-offset:-2px}
.skill-ribbon button:disabled{opacity:.38;cursor:default}
.skill-ribbon button[aria-pressed="true"]{background:#cde6f7;border-color:#82b7d9}
.skill-ribbon .rg2{padding:0 5px;flex-shrink:0}
.skill-ribbon .rb2.big{min-width:46px;width:auto;max-width:86px;height:70px;padding:3px 3px 0;line-height:1.12}
.skill-ribbon .rb2.big.wide{width:auto;max-width:125px}
.skill-ribbon .rb2 .icon{width:16px;height:16px}
.skill-ribbon .rb2.big>.icon{width:32px;height:32px;flex-shrink:0}
.skill-ribbon .rb2.big>.icon svg{width:32px;height:32px}
.skill-ribbon .rb2.sm{height:22px;padding:0 4px;min-width:0}
.skill-ribbon .rb2.gl,.skill-ribbon .rb2.ico{padding:0 2px;min-width:24px}
.skill-ribbon .ol-qsi{font-size:11.5px;border:1px solid transparent;padding:0;max-width:86px;justify-content:flex-start}
.skill-ribbon .ol-qsi>span{overflow:hidden;text-overflow:ellipsis}
.skill-ribbon .ol-arri{font-size:11px;padding:2px 3px;border:1px solid transparent}
.skill-ribbon .ol-pv[aria-disabled],.skill-ribbon .tsg[aria-disabled],.skill-ribbon .stsc[aria-disabled]{opacity:.38}
.skill-ribbon .rgt{flex-shrink:0}
.skill-ribbon .rgc{min-height:70px}
.skill-ribbon .office-font,.skill-ribbon .office-size{height:23px;padding:0 3px;font:12px Selawik,sans-serif;border:1px solid #bbb;background:#fff;border-radius:0;min-width:0}
.skill-ribbon .office-font{width:126px}.skill-ribbon .office-size{width:46px}
.skill-ribbon .office-color{display:flex;position:relative;width:24px;height:24px;align-items:center;justify-content:center;font:bold 15px Georgia,serif;border-bottom:3px solid #000000;cursor:pointer}
.skill-ribbon .office-color input{opacity:0;position:absolute;inset:0;width:100%;height:100%;cursor:pointer}
.skill-ribbon .check{font-size:11.5px;margin:2px 3px;height:22px;gap:5px;white-space:nowrap}
.skill-ribbon .check input{width:13px;height:13px}
/* A külön Office-üzenetablak nem sötétíti el a postafiókot. */
.modal-overlay:has(.compose-dialog){background:transparent;padding:22px}
.dialog.compose-dialog{width:1144px;max-width:calc(100vw - 44px);height:calc(100dvh - 52px);max-height:850px;background:#f3f3f3;border:1px solid #bbb;box-shadow:0 7px 24px #0005}
.compose-dialog .dialog-title{height:32px;min-height:32px;background:#0072c6;color:white;border:0;padding-left:12px;justify-content:flex-start}
.compose-dialog .dialog-title>span{flex:1;min-width:0}
.compose-dialog .dialog-title>button{height:32px;width:45px;color:white;border:0;font-size:20px;border-radius:0;flex-shrink:0}
.compose-dialog .dialog-title>.office-maximize{font-size:15px;margin-left:auto}
.compose-dialog .dialog-title>.office-maximize:hover{background:#ffffff25}
.compose-dialog .dialog-title .icon svg{filter:brightness(0) invert(1)}
.compose-dialog .compose-tabs{height:30px;min-height:30px;padding:0 10px;background:#f3f3f3;border:0;gap:3px}
.compose-dialog .compose-tabs button{height:30px;padding:5px 10px;border-radius:0}
.compose-dialog .compose-tabs button.active{border-bottom:3px solid #0072c6;background:transparent}
.compose-dialog .compose-ribbon{display:block;height:100px;min-height:100px;background:white;margin:0 5px 3px;padding:0;border:0;border-radius:6px;box-shadow:0 1px 3px #0003;overflow:hidden}
.office-compose-pane{display:flex;align-items:stretch;height:100%;padding:3px 4px 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.compose-dialog .compose-header{padding-top:13px;background:#f3f3f3}
.compose-dialog .compose-fields .field{margin-bottom:5px}
.compose-dialog .compose-fields input{border:0;border-bottom:1px solid #ddd;background:#fff;border-radius:0}
.compose-dialog .editor{margin:0 20px 12px;background:white;border:0;min-height:150px;flex:1;font-size:16px;line-height:1.55}
.compose-dialog .compose-attachments{background:#f3f3f3}
.compose-dialog .send-button{background:#fafafa;border:1px solid #aaa;border-radius:0;min-width:72px;height:85px}
.compose-dialog .dialog-footer{padding:8px 20px;background:#f3f3f3}
.compose-dialog .deferred-delivery{padding:6px 20px}
.dialog.compose-dialog.maximized{inset:0!important;width:100vw!important;max-width:none!important;height:100dvh!important;max-height:none!important;position:fixed!important}
@media(max-width:1100px){.skill-ribbon .rg2{padding-left:4px;padding-right:4px}.compose-dialog .compose-header{padding:10px 15px;gap:12px}.compose-dialog .editor{margin-left:15px;margin-right:15px}.global-search{min-width:190px}}

/* A skill stílusgalériájának szövegei külön kártyákban maradnak. */
.skill-ribbon .sti{width:76px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid #ddd}
.skill-ribbon .sti>span{font-size:16px}.skill-ribbon .sti>small{font-size:10px;white-space:nowrap}
.compose-dialog .compose-fields .field>span{width:125px;flex:0 0 125px}

.compose-dialog .compose-fields .field>span>button{width:125px;white-space:nowrap}