.jxhtml { --body-background-color: #F8F9FC; --body-background-image: radial-gradient(circle at 1px 1px, rgba(0, 0, 0, 0.2) 1px, transparent 0); --body-background-size: 24px 24px; --bar-max-width: 100%; --bar-background: linear-gradient(to top, rgba(255, 244, 241, 0), rgba(251, 226, 210, 1)); --bar-background-color: #EAF5F6; --bar-box-shadow: none; --barContent-width: 100%; --button-background-color: #1B3557; --menu-box-shadow: 0 6px 6px 0 rgba(234, 229, 223, 1); --menuTitle-background-color: #000000; --menuButton-background-color: #F9F5F0; --menuButton-border-bottom: 2px solid #999999; --menuButton-border-bottom-color: #EFC9B1; --menuButton-box-shadow: rgb(255 244 241 / 100%) 0px -12px 12px 0px; --menuButton-color: #000000; --front-max-width: auto; --front-background: transparent; --front-box-shadow: none; --frontItem-text-align: center; --alert-background: rgba(234, 229, 223, 0.8); }
* { cursor: default; user-select: none; outline: none; }
.jxhtml { width: 100%; max-width: 100%; height: 100%; overflow-y: scroll; }
.jxbody { top: 0px; margin-left: 0px; margin-right: 0px; padding: 0px; width: 100%; max-width: 100%; height: 100%; min-height: 100%; background-color: var(--body-background-color); background-image: var(--body-background-image); background-attachment: fixed; background-size: var(--body-background-size); background-position: 0px 0px; color: var(--body-color); font-family: sans-serif; font-weight: 200; font-size: 18px; }
.jxbody::-webkit-scrollbar { display: none; }
img { pointer-events: none; }
.staffFolderClose::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; background-color: currentcolor; mask: url("data:image/svg+xml;utf8,") center center / contain no-repeat; pointer-events: none; }
*, ::before, ::after { cursor: default !important; }
.jxhtml, .jxbody { overflow: hidden; height: 100%; max-height: 100%; touch-action: manipulation; }
.staffFolder { position: relative; box-sizing: border-box; width: 470px; height: calc(var(--vh, 1vh) * 100 - 132px); margin-top: 108px; overflow: visible; }
.staffFolderClose { position: absolute; top: 14px; right: 18px; z-index: 3; width: 24px; height: 24px; line-height: 24px; border: 2px solid rgba(0, 0, 0, 0.45); border-radius: 50%; color: rgba(0, 0, 0, 0.45); font-size: 0px; font-weight: bold; text-align: center; cursor: pointer; }
.staffFolderBody { position: relative; box-sizing: border-box; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; transition: background-color 0.22s; }
.staffFolderPanel { box-sizing: border-box; width: 100%; height: 100%; padding: 28px 24px; overflow-y: auto; scrollbar-width: none; }
.staffFolderPanel::-webkit-scrollbar { display: none; }
.staffFolderPageList { display: flex; flex-direction: column; }
.staffFolderStaffWrap { transition: background-color 0.18s; }
.staffFolderStaffItem { display: flex; align-items: center; gap: 14px; padding: 12px 0px; cursor: pointer; transition: padding 0.22s; }
.staffFolderStaffEdit { box-sizing: border-box; max-height: 0px; overflow: hidden; padding: 0px 12px; transition: max-height 0.28s, padding-bottom 0.22s; }
.staffFolderAddWrap { margin-top: 8px; border: 1px dashed rgb(153, 153, 153); border-radius: 6px; }
.staffFolderAddBtn { padding: 14px; text-align: center; font-size: 14px; font-weight: bold; color: rgba(0, 0, 0, 0.52); cursor: pointer; user-select: none; }
.staffFolderAddForm { box-sizing: border-box; max-height: 0px; overflow: hidden; padding: 0px 14px; transition: max-height 0.28s, padding-bottom 0.22s; }
.staffFolderInactiveWrap { margin-top: 4px; }
.staffFolderInactiveBtn { padding: 14px; text-align: center; font-size: 14px; font-weight: bold; color: rgba(0, 0, 0, 0.42); cursor: pointer; user-select: none; }
.staffFolderInactiveList { max-height: 0px; overflow: hidden; opacity: 0.72; transition: max-height 0.28s; }
.staffFolderInactiveEmpty { padding: 16px 12px; }
.staffFolderStaffAvatar { flex: 0 0 auto; overflow: hidden; width: 72px; height: 72px; border-radius: 6px; background-color: rgb(255, 255, 255); }
.staffFolderStaffAvatar img { display: block; width: 100%; height: 100%; object-fit: cover; line-height: 52px; text-align: center; font-size: 16px; font-weight: bold; color: rgb(102, 102, 102); }
.staffFolderStaffName { }
.staffFolderStaffMeta { margin-top: 2px; font-size: 12px; color: rgb(102, 102, 102); }
.staffFolderEmpty { padding: 32px 12px; text-align: center; color: rgb(119, 119, 119); font-size: 14px; }
.staffFolderTabs { position: absolute; top: 20px; right: -56px; bottom: 20px; z-index: 2; display: flex; flex-direction: column; width: 56px; gap: 0px; padding: 0px; }
.staffFolderTab { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 0%; min-height: 0px; width: 40px; border-radius: 0px 12px 12px 0px; cursor: pointer; overflow: hidden; transition: transform 0.22s, width 0.22s, box-shadow 0.22s; z-index: 1; }
.staffFolderTab + .staffFolderTab { margin-top: -3px; }
.staffFolderTabLabel { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 12px; color: rgba(0, 0, 0, 0.48); letter-spacing: 0.04em; white-space: nowrap; pointer-events: none; user-select: none; text-transform: uppercase; }
.staffFolderTabActive { width: 52px; z-index: 3; font-weight: bold; }
.staffFolderTabActive .staffFolderTabLabel { color: rgba(0, 0, 0, 0.62); }
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
:host { display: block; }
.jxhtml, .jxbody { width: auto; max-width: none; height: auto; min-height: 0; overflow: visible; background: none; }
.jxhtml { ; }
.jxbody { font-family: 'IBM Plex Sans', sans-serif; }
#dItemStaffFolder1 { position: relative; margin: 0; width: 444px; height: var(--jSheet, 640px); }
#dItemStaffFolder1 .staffFolderPanel { overflow: hidden; }