.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); }
.colorPlaceholder { color: rgb(153, 153, 153) !important; border-color: rgb(153, 153, 153) !important; }
[contenteditable] { resize: none; user-select: text; outline: none; cursor: text; caret-color: rgb(0, 0, 0); }
* { 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; }
.scrollNo { scrollbar-width: none; }
.scrollNo::-webkit-scrollbar { display: none; }
svg { display: block; margin: auto; }
.clipClose { position: absolute; right: 18px; top: 12px; width: 24px; height: 24px; line-height: 24px; border: 2px solid rgb(134, 133, 133); border-radius: 50%; font-size: 0px; font-weight: bold; text-align: center; color: rgb(134, 133, 133); box-sizing: content-box; }
.clipClose::after { content: ""; position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; background-color: currentcolor; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.75 2V4.25977C6.75 4.55802 6.85676 4.84673 7.05078 5.07324L12 10.8467L16.9492 5.07324C17.1432 4.84673 17.25 4.55802 17.25 4.25977V2H18.75V4.25977C18.75 4.91622 18.5151 5.55139 18.0879 6.0498L12.9873 12L18.0879 17.9502C18.5151 18.4486 18.75 19.0838 18.75 19.7402V22H17.25V19.7402C17.25 19.442 17.1432 19.1533 16.9492 18.9268L12 13.1523L7.05078 18.9268C6.85676 19.1533 6.75 19.442 6.75 19.7402V22H5.25V19.7402C5.25 19.0838 5.48489 18.4486 5.91211 17.9502L11.0117 12L5.91211 6.0498C5.48489 5.55139 5.25 4.91622 5.25 4.25977V2H6.75Z'/></svg>") center center / contain no-repeat; pointer-events: none; }
.drugShelf { position: relative; margin-top: 108px; box-sizing: border-box; width: 640px; padding: 0px 16px 18px; border-radius: 6px; background: linear-gradient(rgb(243, 243, 241) 0%, rgb(231, 231, 228) 100%); box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 14px, rgba(0, 0, 0, 0.1) 0px 2px 4px, rgba(255, 255, 255, 0.8) 0px 1px 1px inset; user-select: none; }
.drugShelf .clipClose { z-index: 2; top: 26px; right: 22px; border-color: rgb(187, 187, 187); color: rgb(153, 153, 153); background-color: rgb(243, 243, 241); }
.drugShelfHead { box-sizing: border-box; display: flex; align-items: center; gap: 18px; height: 76px; padding: 0px 48px 0px 8px; }
.drugShelfTitles { flex: 1 1 auto; min-width: 0px; }
.drugShelfProduct { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 22px; font-weight: bold; letter-spacing: 0.04em; line-height: 1.1; color: rgb(17, 17, 17); }
.drugShelfMark { font-size: 11px; vertical-align: super; }
.drugShelfDetail { margin-top: 3px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: rgb(85, 85, 85); }
.drugShelfFilter { position: relative; z-index: 3; flex: 0 0 230px; height: 42px; }
.drugShelfFilter .formSelect { position: absolute; top: 0px; left: 0px; right: 0px; margin-top: 0px; }
.drugShelfFilter .formSimple.formSelect { background-color: rgb(243, 243, 241) !important; }
.drugShelfCase { position: relative; height: calc(calc(var(--vh, 1vh) * 100) - 226px); border-radius: 2px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px; }
.drugShelfCase::after { content: ""; position: absolute; inset: 0px; pointer-events: none; box-shadow: rgba(0, 0, 0, 0.22) 18px 0px 22px -12px inset, rgba(0, 0, 0, 0.22) -18px 0px 22px -12px inset, rgba(0, 0, 0, 0.22) 0px 16px 18px -10px inset; }
.drugShelfBoard { position: relative; z-index: 0; box-sizing: border-box; display: flex; flex-wrap: wrap; align-content: flex-start; column-gap: 14px; height: 100%; padding: 0px 24px; overflow-y: auto; scrollbar-width: none; background-attachment: local; background-image: repeating-linear-gradient(rgb(201, 201, 197) 0px, rgb(214, 214, 210) 8px, rgb(221, 221, 217) 22px, rgb(228, 228, 225) 168px, rgb(210, 210, 206) 170px, rgb(230, 230, 227) 172px, rgb(243, 243, 241) 178px, rgb(248, 248, 246) 182px, rgb(255, 255, 255) 183px, rgb(238, 238, 235) 184px, rgb(226, 226, 223) 194px, rgb(189, 189, 185) 196px); }
.drugShelfBoard::-webkit-scrollbar { display: none; }
.drugShelfUnit { margin: 20px 0px 18px; }
.drugShelfUnit::after { content: ""; position: absolute; z-index: -1; left: -3px; right: -3px; bottom: -4px; height: 10px; border-radius: 50%; background: radial-gradient(at 50% 35%, rgba(0, 0, 0, 0.32) 0%, rgba(0, 0, 0, 0.12) 50%, rgba(0, 0, 0, 0) 72%); }
.drugShelfUnit .clipDrugPage { padding: 6px 9px 7px; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) -3px -2px 8px, rgba(0, 0, 0, 0.08) 3px -2px 8px, rgba(0, 0, 0, 0.3) 0px 1px 1px, rgba(255, 255, 255, 0.6) 0px 1px 1px inset, rgba(0, 0, 0, 0.05) 0px -2px 2px inset; }
.drugShelf .drugShelfUnit.clipDrugAdd .clipDrugStripeAdd { background: linear-gradient(rgb(36, 70, 110) 0%, rgb(27, 53, 87) 100%); }
.drugShelfUnit.clipDrugAdd .clipDrugPage { padding: 7px 8px 6px; }
.drugShelfLabel { margin-top: 3px; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(136, 136, 136); }
.drugShelfValue { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 14px; font-weight: bold; line-height: 1.25; color: rgb(17, 17, 17); }
.drugShelfStatus { margin-top: auto; padding-top: 5px; border-top: 1px solid rgb(17, 17, 17); font-size: 10px; font-weight: bold; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; color: rgb(27, 53, 87); }
.drugShelfUnitAvailable .drugShelfStripe { background: linear-gradient(rgb(36, 70, 110) 0%, rgb(27, 53, 87) 100%); }
.drugShelfUnitAvailable .drugShelfStatus { color: rgb(27, 53, 87); }
.drugShelfUnitReserved .drugShelfStripe { background: linear-gradient(rgb(217, 160, 42) 0%, rgb(184, 130, 15) 100%); }
.drugShelfUnitReserved .drugShelfStatus { color: rgb(184, 130, 15); }
.drugShelfUnitDispensed .drugShelfStripe { background: linear-gradient(rgb(142, 142, 142) 0%, rgb(112, 112, 112) 100%); }
.drugShelfUnitDispensed .drugShelfStatus { color: rgb(112, 112, 112); }
.drugShelfUnitQuarantine .drugShelfStripe { background: linear-gradient(rgb(224, 122, 46) 0%, rgb(194, 94, 22) 100%); }
.drugShelfUnitQuarantine .drugShelfStatus { color: rgb(194, 94, 22); }
.drugShelfUnitExpired .drugShelfStripe { background: linear-gradient(rgb(200, 53, 43) 0%, rgb(161, 35, 26) 100%); }
.drugShelfUnitExpired .drugShelfStatus { color: rgb(161, 35, 26); }
.drugShelfUnitDispensed { opacity: 0.6; }
.drugStockAdd { position: absolute; z-index: 4; display: none; perspective: 1800px; transition: left 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), top 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), width 0.65s cubic-bezier(0.2, 0.7, 0.2, 1), height 0.65s cubic-bezier(0.2, 0.7, 0.2, 1); }
.drugStockAddCard { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.65s cubic-bezier(0.3, 0.1, 0.2, 1); }
.drugStockAddFace { position: absolute; inset: 0px; display: flex; flex-direction: column; backface-visibility: hidden; }
.drugStockAddFace .clipDrugPage { box-shadow: rgba(0, 0, 0, 0.24) 0px 14px 28px, rgba(0, 0, 0, 0.14) 0px 4px 10px; }
.drugStockAdd .clipDrugStripe.clipDrugStripeAdd { background: linear-gradient(rgb(36, 70, 110) 0%, rgb(27, 53, 87) 100%); }
.drugStockAddBack { transform: rotateY(180deg); }
.drugStockAdd:not(.drugStockTrace) .drugStockAddFront .clipDrugPage { align-items: center; justify-content: center; text-align: center; }
.drugStockAddBack .clipDrugPage { display: block; padding: 26px 24px 22px; overflow: hidden; }
.drugStockAddForm { width: 520px; max-width: 100%; min-width: 520px; margin: 0px auto; }
.drugStockAddSub { margin-top: 6px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; letter-spacing: 0.06em; color: rgb(27, 53, 87); }
.drugStockAddDate { position: relative; }
.drugStockAddPicker { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; opacity: 0.011; cursor: pointer; border: 0px; z-index: 2; }
.drugStockAddButtons { margin-top: 18px; }
.vademecumAddHead { text-align: center; }
.vademecumAddTitle { font-weight: bold; font-size: 26px; letter-spacing: 1px; line-height: 1.1; color: rgb(17, 17, 17); }
.vademecumAddRule { height: 10px; margin: 14px 0px 10px; background: rgb(17, 17, 17); }
*, ::before, ::after { cursor: default !important; }
.jxhtml, .jxbody { overflow: hidden; height: 100%; max-height: 100%; touch-action: manipulation; }
.formSimple { border-radius: 0px !important; border-width: 0px 0px 1px !important; border-style: none none solid !important; border-color: currentcolor currentcolor rgb(153, 153, 153) !important; border-image: initial !important; background-color: transparent !important; }
.formText { margin-top: 12px; line-height: 42px; border: 1px solid rgb(153, 153, 153); border-radius: 12px; background-color: rgb(255, 255, 255); transition: height 500ms, background-color 500ms linear, border-color 500ms linear, color 500ms linear; }
.formTextHide { display: none; }
.formTextIcon { display: inline-block; vertical-align: top; width: 40px; font-size: 22px; text-align: center; }
.formTextIcon svg path { fill: currentcolor; }
.formTextText { display: inline-block; vertical-align: top; width: calc(100% - 40px); min-height: 1.2em; text-align: left; color: rgb(0, 0, 0); caret-color: rgb(0, 0, 0); }
.formSelect { position: relative; margin-top: 12px; height: 42px; max-height: 300px; line-height: 40px; border: 1px solid rgb(153, 153, 153); border-radius: 12px; background-color: rgb(255, 255, 255); box-sizing: border-box; overflow: hidden; transition: height 500ms, background-color 500ms linear, border-color 500ms linear, color 500ms linear; }
.formSelectDetector { position: absolute; width: 100%; height: 40px; }
.formSelectDetectorArrow { float: right; margin: 18px 14px; border-top: 6px solid rgb(140, 140, 140); border-right: 6px solid transparent; border-left: 6px solid transparent; }
.formSelectOption { padding-left: 40px; width: calc(100% - 40px); border-top: 1px dotted rgb(153, 153, 153); text-align: left; }
.formButton { display: inline-block; vertical-align: top; box-sizing: border-box; margin-top: 12px; width: 100%; height: 44px; line-height: 44px; border-bottom: 2px solid rgb(204, 204, 204); border-radius: 6px; font-size: 13px; font-weight: bold; text-align: center; background-color: var(--button-background-color); color: rgb(255, 255, 255); transition: 0.5s; }
.formButtonGray { background-color: rgb(153, 153, 153) !important; }
.formButtonText { display: inline-block; }
[onmousedown*="moduleStart"] { user-select: none; }
.clipDrug { position: relative; flex: 0 0 auto; display: flex; flex-direction: column; box-sizing: border-box; width: 128px; height: 158px; user-select: none; }
.clipDrugAdd { cursor: pointer; }
.clipDrugStripe.clipDrugStripeAdd { background: linear-gradient(rgb(106, 74, 156) 0%, rgb(78, 52, 120) 100%); }
.clipDrugAdd .clipDrugPage { align-items: center; justify-content: center; text-align: center; }
.clipDrugAddTitle { color: rgb(51, 51, 51); line-height: 1.25; letter-spacing: 0.02em; }
.clipDrugTab { position: relative; flex: 0 0 auto; margin: 0px 4px; height: 20px; border-radius: 4px 4px 0px 0px; background: linear-gradient(rgb(253, 253, 252) 0%, rgb(244, 244, 241) 100%); box-shadow: rgba(0, 0, 0, 0.08) 0px -1px 2px, rgba(0, 0, 0, 0.05) 0px -3px 4px inset; }
.clipDrugSlot { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 38px; height: 6px; border-radius: 3px; background: linear-gradient(rgb(201, 201, 196) 0%, rgb(227, 227, 223) 100%); box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 2px inset, rgba(255, 255, 255, 0.6) 0px -1px 1px inset; }
.clipDrugStripe { flex: 0 0 auto; height: 6px; background: linear-gradient(rgb(36, 70, 110) 0%, rgb(27, 53, 87) 100%); box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 2px; }
.clipDrugPage { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0px; box-sizing: border-box; padding: 7px 8px 6px; border-radius: 0px 0px 3px 3px; background: linear-gradient(rgb(252, 252, 250) 0%, rgb(246, 246, 243) 100%); box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 6px, rgba(0, 0, 0, 0.1) 0px 2px 4px, rgba(255, 255, 255, 0.6) 0px 1px 1px inset; color: rgb(17, 17, 17); overflow: hidden; }
@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; }
#dItemDrugShelf56562 { position: relative; margin: 0; width: 500px; }
#dItemDrugShelf56562 .drugShelfCase { height: calc(var(--jSheet, 640px) - 94px); }
#dItemDrugShelf56562 .drugShelfBoard { overflow: hidden; }