@import url("https://fonts.googleapis.com/css?family=Material+Icons|Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200|Material+Icons+Outlined&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed&family=Caveat&family=Tilt+Neon&family=Jura&family=Ubuntu+Mono&display=swap"); .tabs__container:not(.k-active-tab) { display: none !important; } .tabs__nav-item { list-style: none; } .tabs__nav-list { display: flex; } .ui-dialog .tab-content .charsheet { position: relative; top: 0; bottom: 0; left: 0; right: 0; } .ui-dialog .tab-content .charsheet .kmodal__button { all: initial; display: flex; margin: 0; padding: 0; cursor: pointer; } .ui-dialog .tab-content .charsheet .kmodal__checkbox { display: none; } .ui-dialog .tab-content .charsheet .kmodal__outer { opacity: 0; visibility: hidden; position: fixed; top: 0; right: 0; bottom: 0; left: 0; text-align: left; background: var(--kmodal-overlay-background); transition: opacity 0.25s ease; z-index: 999; } .ui-dialog .tab-content .charsheet .kmodal__background { all: initial; margin: 0; padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; } .ui-dialog .tab-content .charsheet .kmodal__inner { position: fixed; width: var(--kmodal-width); height: var(--kmodal-height); inset: 0; margin: auto; overflow: auto; background: var(--kmodal-dialog-background); border-radius: 5px; padding: var(--kmodal-close-height) calc(var(--kmodal-close-width) * 3) var(--kmodal-close-height) calc(var(--kmodal-close-width) * 2); max-width: var(--kmodal-max-width); max-height: var(--kmodal-max-height); transition: opacity 0.25s ease; box-shadow: var(--kmodal-box-shadow); } .ui-dialog .tab-content .charsheet .kmodal__close { position: absolute; right: var(--kmodal-close-width); top: var(--kmodal-close-height); width: var(--kmodal-close-width); height: var(--kmodal-close-height); cursor: pointer; } .ui-dialog .tab-content .charsheet .kmodal__close:after, .ui-dialog .tab-content .charsheet .kmodal__close:before { content: ""; position: absolute; width: var(--kmodal-close-line-thickness); height: var(--kmodal-close-line-length); background: var(--kmodal-close-color); display: block; transform: rotate(45deg); left: 50%; margin: -3px 0 0 -1px; top: 0; } .ui-dialog .tab-content .charsheet .kmodal__close:hover:after, .ui-dialog .tab-content .charsheet .kmodal__close:hover:before { background: var(--kmodal-close-hover-color); } .ui-dialog .tab-content .charsheet .kmodal__close:before { transform: rotate(-45deg); } .ui-dialog .tab-content .charsheet .kmodal__checkbox:not(:checked) + .kmodal__outer { display: none; } .ui-dialog .tab-content .charsheet .kmodal__checkbox:checked + .kmodal__outer { opacity: 1; visibility: visible; } .ui-dialog .tab-content .charsheet .kmodal__checkbox:checked + .kmodal__outer .kmodal__inner { top: 0; } .sheet-rolltemplate-walking_dead { --font1:var(--topHeadFont); --font2:var(--topHeadFont); --font3:var(--midHeadFont); --font4:var(--midHeadFont); --font5:var(--midHeadFont); --font6:var(--contentHeadFont); --font7:var(--contentHeadFont); --baseFontSize: 16px; --size1:300%; --size2:250%; --size3:200%; --size4:150%; --size5:125%; --size6:100%; --size7:87.5%; --icon-size:24px; --font-icon: "Material Icons"; --normal-gap-x:1rem; --normal-gap-y:1rem; --normal-gap: var(--normal-gap-x); --half-gap-x:calc(var(--normal-gap-x) / 2); --half-gap-y:calc(var(--normal-gap-y) / 2); --half-gap: var(--half-gap-x); --tiny-gap-x:calc(var(--half-gap-x) / 2); --tiny-gap-y:calc(var(--half-gap-y) / 2); --tiny-gap: var(--tiny-gap-x); --big-gap-x:calc(var(--normal-gap-x) * 2); --big-gap-y:calc(var(--normal-gap-y) * 2); --big-gap: var(--big-gap-x); --lm-backColor:#fff; --dm-backColor:var(--dark-surface1); --backColor:var(--lm-backColor); --lm-selectedColor:#000; --dm-selectedColor:#007476; --selectedColor:var(--lm-selectedColor); --lm-unselectedColor1:lightgrey; --dm-unselectedColor1:#0e0e0e; --unselectedColor1:var(--lm-unselectedColor1); --lm-unselectedColor2:transparent; --dm-unselectedColor2:transparent; --unselectedColor1:var(--lm-unselectedColor2); --lm-checkColor:#000; --dm-checkColor:#ff0000; --checkColor:var(--lm-checkColor); --lm-checkedBackColor:transparent; --dm-checkedBackColor:transparent; --checkedBackColor:var(--lm-checkedBackColor); --lm-borderColor:#000; --dm-borderColor:lightgrey; --borderColor:var(--lm-borderColor); --lm-fontColor:#0f0f0f; --dm-fontColor:var(--dark-primarytext); --fontColor:var(--lm-fontColor); --lm-disabledColor:var(--lm-unselectedColor1); --dm-disabledColor:var(--dm-unselectedColor1); --disabledColor:var(--lm-disabledColor); --checkContent: "✓"; --checkWeight: bold; --checkSize: 150%; --checkLineHeight: calc(var(--checkSize) / 3); --checkboxBorderWidth: var(--borderWidth); --checkboxBorderStyle: var(--borderStyle); --lm-checkboxBorderColor: var(--lm-borderColor); --dm-checkboxBorderColor: var(--dm-borderColor); --checkboxBorderColor: var(--lm-checkBorderColor); --checkboxWidth: 14px; --checkboxHeight: 14px; --inputTopPadding: 2px; --inputRightPadding: 2px; --inputBottomPadding: 2px; --inputLeftPadding: 2px; --inputPadding: var(--inputTopPadding) var(--inputRightPadding) var(--inputBottomPadding) var(--inputLeftPadding); --lm-placeholderColor:#ededed80; --dm-placeholderColor:#3f3f3f80; --placeholderColor: var(--lm-placeholderColor); --textareaResize: vertical; --borderWidth:1px; --borderStyle:solid; --expandedSymbol:"unfold_less"; --collapsedSymbol: "unfold_more"; --collapseHoverOpacity: 1; --collapseBaseOpacity: 0; --lm-collapseExpandedColor:var(--lm-selectedColor); --dm-collapseExpandedColor:var(--dm-selectedColor); --collapseExpandedColor: var(--lm-collapseExpandedColor); --lm-collapseCollapsedColor:var(--lm-unselectedColor); --dm-collapseCollapsedColor:var(--dm-unselectedColor); --collapseCollapsedColor: var(--lm-collapseCollapsedColor); --fillLeftDisplay: flex; --fillLeftAlignment: center; --fillLeftDataTransform: uppercase; --fillLeftDataSize: var(--size6); --lm-fillLeftSelectedColor: var(--lm-selectedColor); --dm-fillLeftSelectedColor: var(--dm-selectedColor); --fillLeftSelectedColor: var(--lm-fillLeftSelectedColor); --lm-fillLeftUnselectedColor: var(--lm-unselectedColor); --dm-fillLeftUnselectedColor: var(--dm-unselectedColor); --fillLeftUnselectedColor: var(--lm-fillLeftUnselectedColor); --lm-fillLeftDataColor: var(--lm-backColor); --dm-fillLeftDataColor: var(--dm-backColor); --fillLeftDataColor: var(--lm-fillLeftDataColor); --lm-selectColor: var(--lm-fontColor); --dm-selectColor: var(--dm-fontColor); --selectColor: var(--lm-fontColor); --selectTextOverflow: var(--textOverflow); --selectTextAlign: center; --selectTextTransform: capitalize; --revealTime:500ms; --revealFunction: ease-in-out; --revealTrans: var(--revealTime) var(--revealFunction); --kmodal-width:fit-content; --kmodal-height:fit-content; --kmodal-max-width:90vw; --kmodal-max-height:90vh; --lm-kmodal-overlay-background:rgba(0,0,0,.9); --dm-kmodal-overlay-background:rgba(0,0,0,.9); --kmodal-overlay-background: var(--lm-kmodal-overlay-background); --lm-kmodal-dialog-background:var(--lm-backColor); --dm-kmodal-dialog-background:var(--dm-backColor); --kmodal-dialog-background: var(--lm-kmodal-dialog-background); --kmodal-border-width:0px; --kmodal-border-color:transparent; --lm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25); --dm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25); --kmodal-box-shadow-color1:var(--lm-kmodal-box-shadow-color1); --kmodal-box-shadow-blur1:28px; --kmodal-box-shadow-x1:0px; --kmodal-box-shadow-y1:14px; --kmodal-box-shadow-spread1:0px; --lm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22); --dm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22); --kmodal-box-shadow-color2:var(--lm-kmodal-box-shadow-color2); --kmodal-box-shadow-blur2:10px; --kmodal-box-shadow-x2:0px; --kmodal-box-shadow-y2:10px; --kmodal-box-shadow-spread2:0px; --kmodal-box-shadow: var(--kmodal-box-shadow-x1) var(--kmodal-box-shadow-y1) var(--kmodal-box-shadow-blur1) var(--kmodal-box-shadow-spread1) var(--kmodal-box-shadow-color1), var(--kmodal-box-shadow-x2) var(--kmodal-box-shadow-y2) var(--kmodal-box-shadow-blur2) var(--kmodal-box-shadow-spread2) var(--kmodal-box-shadow-color2); --kmodal-close-width:1rem; --kmodal-close-height:1rem; --lm-kmodal-close-color:#ccc; --dm-kmodal-close-color:#aaa; --kmodal-close-color:var(--lm-kmodal-close-color); --lm-kmodal-close-hover-color:#aaa; --dm-kmodal-close-hover-color:#aaa; --kmodal-close-hover-color:var(--lm-kmodal-close-hover-color); --kmodal-close-line-thickness:2px; --kmodal-close-line-length:calc(var(--kmodal-close-width) * 1.5); --paper-background: url("https://files.d20.io/images/367925829/eMSWRz7RivrjvH4PVC9NVg/original.webp"); --redColor: #6a2529; --highlightColor: hsla(60, 100%, 50%, 0.5); --pinkColor: hsl(350, 100%, 75%); --redBorder: url("https://files.d20.io/images/367946680/Gd_Fj02Pn0T-XqgfY7dyTQ/original.png"); --dieBlack: black; --border_bg_sm: url("https://s3.amazonaws.com/files.d20.io/images/370703674/Ygc8pSpM2Q-AecerjIX35w/original.png?1701999902"); --border_bg_lg: url("https://s3.amazonaws.com/files.d20.io/images/370703589/Q7GwrwThO3WQaT_QHaMwnw/original.png?1701999869"); --paper_texture: url("https://s3.amazonaws.com/files.d20.io/images/370494718/yrFUm6X--VoUwJh7ro7KCg/original.jpg?1701837809"); --border-scratches: url("https://s3.amazonaws.com/files.d20.io/images/382625407/sVgLBFttvaKc9YiCVAtSQw/original.png?1709333967"); --parchmentColor: #e9e3dc; --bgColor: var(--parchmentColor); --img-dice-success: var(--redColor); --img-dice-panic: var(--redColor); --img-stress-dice: var(--redColor); --dieTextColor: white; --walkerSign: url("https://files.d20.io/images/372539015/Xzq32j3zg117kwF5ipPBRw/original.png"); --lm-fontColor: hsl(50, 20%, 20%); --dm-fontColor: var(--parchmentColor); --fontColor: var(--lm-fontColor); --dm-backColor: var(--dark-surface2); --colPen: hsl(220, 50%, 50%); --checkColor: var(--colPen); --colHeaderBack: hsl(50, 10%, 50%); --size1: 200%; --size2: 175%; --size3: 150%; --size4: 125%; --size5: 100%; --size6: 85%; --input-label-gap: var(--tiny-gap); --border-width: 2px; color: var(--fontColor); padding: var(--normal-gap); margin: 0 -20px 0 -50px; filter: drop-shadow(0.2em 0.2em 0px hsla(219, 39%, 29%, 0.5)); } .sheet-rolltemplate-walking_dead .sheet-template { background: radial-gradient(ellipse at center, hsl(30, 60%, 95%) 0%, hsl(17, 3%, 65%) 100%), var(--paper_texture), var(--dieBlack); background-blend-mode: overlay, overlay, normal; mask-image: var(--border-scratches); mask-size: 100% 100%; padding-bottom: 1em; } .sheet-rolltemplate-walking_dead:not(:first-child) { margin-top: 10px; } .sheet-rolltemplate-walking_dead.sheet-rolltemplate-darkmode { --backColor:var(--dm-backColor); --selectedColor:var(--dm-selectedColor); --unselectedColor1:var(--dm-unselectedColor1); --unselectedColor1:var(--dm-unselectedColor2); --checkColor:var(--dm-checkColor); --borderColor:var(--dm-borderColor); --fontColor:var(--dm-fontColor); --disabledColor:var(--dm-disabledColor); --redColor: hsl(357, 58%, 48%); --col-alt: hsl(357, 58%, 48%); --colPen: hsl(220, 100%, 79%); --fontColor: var(--dm-fontColor); --bgColor: var(--dark-surface2); color: var(--fontColor); --_toggle: 1; } .sheet-rolltemplate-walking_dead.sheet-rolltemplate-darkmode .tab-content .charsheet .repitem { background-color: unset; } .sheet-rolltemplate-walking_dead.sheet-rolltemplate-darkmode .tab-content .charsheet .tabs__nav-list { background: var(--dark-surface2); } .sheet-rolltemplate-walking_dead.sheet-rolltemplate-darkmode .talent-section-content [class^=repcontrol] { color: var(--redColor); } .sheet-rolltemplate-walking_dead .sheet-template { --topHeadFont: "Barlow Semi Condensed", sans-serif; --midHeadFont: "Ubuntu Mono", monospace; --contentHeadFont: "Caveat", cursive; --embossedFont: "Jura", sans-serif; --fontHeader: "impact", "Roboto Black", "Helvetica Neue"; --fontSystem: "Tilt Neon", sans-serif; font-family: var(--midHeadFont); } .sheet-rolltemplate-walking_dead .sheet-template select, .sheet-rolltemplate-walking_dead .sheet-template textarea, .sheet-rolltemplate-walking_dead .sheet-template input, .sheet-rolltemplate-walking_dead .sheet-template .uneditable-input, .sheet-rolltemplate-walking_dead .sheet-template label, .sheet-rolltemplate-walking_dead .sheet-template button { all: initial; } .sheet-rolltemplate-walking_dead .sheet-template .flex-box, .sheet-rolltemplate-walking_dead .sheet-template .sheet-flex-box { display: flex; } .sheet-rolltemplate-walking_dead .sheet-template .flex-wrap, .sheet-rolltemplate-walking_dead .sheet-template .sheet-flex-wrap { flex-wrap: wrap; } .sheet-rolltemplate-walking_dead .sheet-template .justify-space-around, .sheet-rolltemplate-walking_dead .sheet-template .sheet-justify-space-around { justify-content: space-around; } .sheet-rolltemplate-walking_dead .sheet-template .justify-space-between, .sheet-rolltemplate-walking_dead .sheet-template .sheet-justify-space-between { justify-content: space-between; } .sheet-rolltemplate-walking_dead .sheet-template .justify-center, .sheet-rolltemplate-walking_dead .sheet-template .sheet-justify-center { justify-content: center; } .sheet-rolltemplate-walking_dead .sheet-template .flex-min-content, .sheet-rolltemplate-walking_dead .sheet-template .sheet-flex-min-content { flex: 1 0 min-content; } .sheet-rolltemplate-walking_dead .sheet-template .stacked { flex-direction: column; } .sheet-rolltemplate-walking_dead .sheet-template .stacked.center > * { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template .stacked:not(.center) { align-items: start; } .sheet-rolltemplate-walking_dead .sheet-template .stacked > [name]:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } .sheet-rolltemplate-walking_dead .sheet-template .flex-column, .sheet-rolltemplate-walking_dead .sheet-template .sheet-flex-column { flex-direction: column; } .sheet-rolltemplate-walking_dead .sheet-template .flex-row-reverse, .sheet-rolltemplate-walking_dead .sheet-template .sheet-flex-row-revers { flex-direction: row-reverse; } .sheet-rolltemplate-walking_dead .sheet-template .flex-column-reverse, .sheet-rolltemplate-walking_dead .sheet-template .sheet-flex-column-reverse { flex-direction: column-reverse; } .sheet-rolltemplate-walking_dead .sheet-template .normal-gap, .sheet-rolltemplate-walking_dead .sheet-template .sheet-normal-gap { gap: var(--normal-gap); } .sheet-rolltemplate-walking_dead .sheet-template .normal-gap-x, .sheet-rolltemplate-walking_dead .sheet-template .sheet-normal-gap-x { column-gap: var(--normal-gap-x); } .sheet-rolltemplate-walking_dead .sheet-template .normal-gap-y, .sheet-rolltemplate-walking_dead .sheet-template .sheet-normal-gap-y { row-gap: var(--normal-gap-y); } .sheet-rolltemplate-walking_dead .sheet-template .half-gap, .sheet-rolltemplate-walking_dead .sheet-template .sheet-half-gap { gap: var(--half-gap); } .sheet-rolltemplate-walking_dead .sheet-template .half-gap-x, .sheet-rolltemplate-walking_dead .sheet-template .sheet-half-gap-x { column-gap: var(--half-gap-x); } .sheet-rolltemplate-walking_dead .sheet-template .half-gap-y, .sheet-rolltemplate-walking_dead .sheet-template .sheet-half-gap-y { row-gap: var(--half-gap-y); } .sheet-rolltemplate-walking_dead .sheet-template .tiny-gap, .sheet-rolltemplate-walking_dead .sheet-template .sheet-tiny-gap { gap: var(--tiny-gap); } .sheet-rolltemplate-walking_dead .sheet-template .tiny-gap-x, .sheet-rolltemplate-walking_dead .sheet-template .sheet-tiny-gap-x { column-gap: var(--tiny-gap-x); } .sheet-rolltemplate-walking_dead .sheet-template .tiny-gap-y, .sheet-rolltemplate-walking_dead .sheet-template .sheet-tiny-gap-y { row-gap: var(--tiny-gap-y); } .sheet-rolltemplate-walking_dead .sheet-template .big-gap, .sheet-rolltemplate-walking_dead .sheet-template .sheet-big-gap { gap: var(--big-gap); } .sheet-rolltemplate-walking_dead .sheet-template .big-gap-x, .sheet-rolltemplate-walking_dead .sheet-template .sheet-big-gap-x { column-gap: var(--big-gap-x); } .sheet-rolltemplate-walking_dead .sheet-template .big-gap-y, .sheet-rolltemplate-walking_dead .sheet-template .sheet-big-gap-y { row-gap: var(--big-gap-y); } .sheet-rolltemplate-walking_dead .sheet-template .grid, .sheet-rolltemplate-walking_dead .sheet-template .sheet-grid { display: grid; } .sheet-rolltemplate-walking_dead .sheet-template .grid-span-2, .sheet-rolltemplate-walking_dead .sheet-template .sheet-grid-span-2 { grid-column: span 2; } .sheet-rolltemplate-walking_dead .sheet-template .grid-span-all, .sheet-rolltemplate-walking_dead .sheet-template .sheet-grid-span-all { grid-column: 1/-1; } .sheet-rolltemplate-walking_dead .sheet-template .grid-column, .sheet-rolltemplate-walking_dead .sheet-template .sheet-grid-column { grid-auto-flow: column; } .sheet-rolltemplate-walking_dead .sheet-template .grid-dense, .sheet-rolltemplate-walking_dead .sheet-template .sheet-grid-dense { grid-auto-flow: dense; } .sheet-rolltemplate-walking_dead .sheet-template .boxed, .sheet-rolltemplate-walking_dead .sheet-template .sheet-boxed { border: 2px solid var(--borderColor); border-radius: 0; box-sizing: border-box; } .sheet-rolltemplate-walking_dead .sheet-template .boxed.thick-left, .sheet-rolltemplate-walking_dead .sheet-template .sheet-boxed.thick-left { border-left-width: 5px; } .sheet-rolltemplate-walking_dead .sheet-template .boxed.thick-bottom, .sheet-rolltemplate-walking_dead .sheet-template .sheet-boxed.thick-bottom { border-bottom-width: 5px; } .sheet-rolltemplate-walking_dead .sheet-template .boxed.thick-right, .sheet-rolltemplate-walking_dead .sheet-template .sheet-boxed.thick-right { border-right-width: 5px; } .sheet-rolltemplate-walking_dead .sheet-template .boxed.thick-top, .sheet-rolltemplate-walking_dead .sheet-template .sheet-boxed.thick-top { border-top-width: 5px; } .sheet-rolltemplate-walking_dead .sheet-template .underlined, .sheet-rolltemplate-walking_dead .sheet-template .sheet-underlined { border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; border-radius: 0; border-bottom: 1px solid var(--borderColor); transition: border-radius border var(--revealTrans); } .sheet-rolltemplate-walking_dead .sheet-template :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:hover, :focus, :focus-within) { border-width: 1px 3px; border-style: solid; border-color: var(--borderColor); border-radius: 5px; box-sizing: border-box; } .sheet-rolltemplate-walking_dead .sheet-template :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:focus, :focus-within) { background-color: var(--disabledColor); } .sheet-rolltemplate-walking_dead .sheet-template .underlined--invisible { border-color: transparent !important; } .sheet-rolltemplate-walking_dead .sheet-template .ratio1-1, .sheet-rolltemplate-walking_dead .sheet-template .sheet-ratio1-1 { aspect-ratio: 1/1; } .sheet-rolltemplate-walking_dead .sheet-template span, .sheet-rolltemplate-walking_dead .sheet-template input, .sheet-rolltemplate-walking_dead .sheet-template textarea, .sheet-rolltemplate-walking_dead .sheet-template button, .sheet-rolltemplate-walking_dead .sheet-template select { line-height: normal; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; } .sheet-rolltemplate-walking_dead .sheet-template .text-1, .sheet-rolltemplate-walking_dead .sheet-template .sheet-text-1 { font-size: var(--size1); } .sheet-rolltemplate-walking_dead .sheet-template .text-2, .sheet-rolltemplate-walking_dead .sheet-template .sheet-text-2 { font-size: var(--size2); } .sheet-rolltemplate-walking_dead .sheet-template .text-3, .sheet-rolltemplate-walking_dead .sheet-template .sheet-text-3 { font-size: var(--size3); } .sheet-rolltemplate-walking_dead .sheet-template .text-4, .sheet-rolltemplate-walking_dead .sheet-template .sheet-text-4 { font-size: var(--size4); } .sheet-rolltemplate-walking_dead .sheet-template .text-5, .sheet-rolltemplate-walking_dead .sheet-template .sheet-text-5 { font-size: var(--size5); } .sheet-rolltemplate-walking_dead .sheet-template .text-6, .sheet-rolltemplate-walking_dead .sheet-template .sheet-text-6 { font-size: var(--size6); } .sheet-rolltemplate-walking_dead .sheet-template .text-7, .sheet-rolltemplate-walking_dead .sheet-template .sheet-text-7 { font-size: var(--size7); } .sheet-rolltemplate-walking_dead .sheet-template .capitalize, .sheet-rolltemplate-walking_dead .sheet-template .sheet-capitalize { text-transform: capitalize !important; } .sheet-rolltemplate-walking_dead .sheet-template .lowercase, .sheet-rolltemplate-walking_dead .sheet-template .sheet-lowercase { text-transform: lowercase !important; } .sheet-rolltemplate-walking_dead .sheet-template .uppercase, .sheet-rolltemplate-walking_dead .sheet-template .sheet-uppercase { text-transform: uppercase !important; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-material-icons, .sheet-rolltemplate-walking_dead .sheet-template .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: var(--icon-size); /* Preferred icon size */ } .sheet-rolltemplate-walking_dead .sheet-template .material-symbol, .sheet-rolltemplate-walking_dead .sheet-template .sheet-material-symbol { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; font-variation-settings: "FILL" 1; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-italics, .sheet-rolltemplate-walking_dead .sheet-template .italics { font-style: italic; } .sheet-rolltemplate-walking_dead .sheet-template h1, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="1"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size1); font-family: var(--font1); } .sheet-rolltemplate-walking_dead .sheet-template h1:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="1"]:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h1 *, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="1"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size1); font-family: var(--font1); } .sheet-rolltemplate-walking_dead .sheet-template h1 *:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="1"] *:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h2, .sheet-rolltemplate-walking_dead .sheet-template body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-walking_dead .sheet-template .input-label:not(.stacked).large > [name], .sheet-rolltemplate-walking_dead .sheet-template .input-label:not(.stacked).large > [name], .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="2"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size2); font-family: var(--font2); } .sheet-rolltemplate-walking_dead .sheet-template h2:not(input), .sheet-rolltemplate-walking_dead .sheet-template body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]:not(input), body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-walking_dead .sheet-template .input-label:not(.stacked).large > [name]:not(input), .sheet-rolltemplate-walking_dead .sheet-template .input-label:not(.stacked).large > [name]:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="2"]:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h2 *, .sheet-rolltemplate-walking_dead .sheet-template body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-walking_dead .sheet-template .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-walking_dead .sheet-template .input-label:not(.stacked).large > [name] *, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="2"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size2); font-family: var(--font2); } .sheet-rolltemplate-walking_dead .sheet-template h2 *:not(input), .sheet-rolltemplate-walking_dead .sheet-template body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *:not(input), body .ui-dialog .tab-content .charsheet .sheet-rolltemplate-walking_dead .sheet-template .input-label:not(.stacked).large > [name] *:not(input), .sheet-rolltemplate-walking_dead .sheet-template .input-label:not(.stacked).large > [name] *:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="2"] *:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h3, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="3"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size3); font-family: var(--font3); } .sheet-rolltemplate-walking_dead .sheet-template h3:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="3"]:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h3 *, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="3"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size3); font-family: var(--font3); } .sheet-rolltemplate-walking_dead .sheet-template h3 *:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="3"] *:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h4, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="4"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size4); font-family: var(--font4); } .sheet-rolltemplate-walking_dead .sheet-template h4:not(:where(input)), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="4"]:not(:where(input)) { text-transform: capitalize; } .sheet-rolltemplate-walking_dead .sheet-template h4:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="4"]:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h4 *, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="4"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size4); font-family: var(--font4); } .sheet-rolltemplate-walking_dead .sheet-template h4 *:not(:where(input)), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="4"] *:not(:where(input)) { text-transform: capitalize; } .sheet-rolltemplate-walking_dead .sheet-template h4 *:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="4"] *:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h5, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="5"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } .sheet-rolltemplate-walking_dead .sheet-template h5:not(:where(input)), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="5"]:not(:where(input)) { text-transform: capitalize; } .sheet-rolltemplate-walking_dead .sheet-template h5:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="5"]:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h5 *, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="5"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } .sheet-rolltemplate-walking_dead .sheet-template h5 *:not(:where(input)), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="5"] *:not(:where(input)) { text-transform: capitalize; } .sheet-rolltemplate-walking_dead .sheet-template h5 *:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="5"] *:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h6, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="6"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } .sheet-rolltemplate-walking_dead .sheet-template h6:not(:where(input)), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="6"]:not(:where(input)) { text-transform: capitalize; } .sheet-rolltemplate-walking_dead .sheet-template h6:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="6"]:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template h6 *, .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="6"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } .sheet-rolltemplate-walking_dead .sheet-template h6 *:not(:where(input)), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="6"] *:not(:where(input)) { text-transform: capitalize; } .sheet-rolltemplate-walking_dead .sheet-template h6 *:not(input), .sheet-rolltemplate-walking_dead .sheet-template *[aria-level="6"] *:not(input) { text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-pictos, .sheet-rolltemplate-walking_dead .sheet-template .pictos { font-family: pictos; text-transform: none; } .sheet-rolltemplate-walking_dead .sheet-template .pictos3, .sheet-rolltemplate-walking_dead .sheet-template .sheet-pictos3 { font-family: pictos three; text-transform: none; } .sheet-rolltemplate-walking_dead .sheet-template .pictoscustom, .sheet-rolltemplate-walking_dead .sheet-template .sheet-pictoscustom { font-family: pictos custom; text-transform: none; } .sheet-rolltemplate-walking_dead .sheet-template .d4, .sheet-rolltemplate-walking_dead .sheet-template .sheet-d4 { font-family: dicefontd4 !important; text-transform: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .d6, .sheet-rolltemplate-walking_dead .sheet-template .sheet-d6 { font-family: dicefontd6 !important; text-transform: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .d8, .sheet-rolltemplate-walking_dead .sheet-template .sheet-d8 { font-family: dicefontd8 !important; text-transform: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .d10, .sheet-rolltemplate-walking_dead .sheet-template .sheet-d10 { font-family: dicefontd10 !important; text-transform: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .d12, .sheet-rolltemplate-walking_dead .sheet-template .sheet-d12 { font-family: dicefontd12 !important; text-transform: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .d20, .sheet-rolltemplate-walking_dead .sheet-template .sheet-d20 { font-family: dicefontd20 !important; text-transform: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .d30, .sheet-rolltemplate-walking_dead .sheet-template .sheet-d30 { font-family: dicefontd30 !important; text-transform: none !important; } .sheet-rolltemplate-walking_dead .sheet-template input[type=checkbox] { border: 1px solid var(--checkboxBorderColor); cursor: pointer; -webkit-appearance: none; appearance: none; width: var(--checkboxWidth); min-width: var(--checkboxWidth); height: var(--checkboxHeight); min-height: var(--checkboxHeight); display: grid; grid-template-columns: 1fr; grid-template-areas: "content"; } .sheet-rolltemplate-walking_dead .sheet-template input[type=checkbox]:not(.collapse):not(.fill-left__radio):checked { background-color: var(--checkedBackColor); } .sheet-rolltemplate-walking_dead .sheet-template input[type=checkbox]:not(.collapse):not(.fill-left__radio):checked:before { content: var(--checkContent); grid-area: content; font-weight: var(--checkWeight); place-self: start center; color: var(--checkColor); font-size: var(--checkSize); line-height: var(--checkLineHeight); } .sheet-rolltemplate-walking_dead .sheet-template input[type=number] { width: 3rem; -moz-appearance: textfield !important; text-align: center; } .sheet-rolltemplate-walking_dead .sheet-template input[type=number]::-webkit-inner-spin-button, .sheet-rolltemplate-walking_dead .sheet-template input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } .sheet-rolltemplate-walking_dead .sheet-template select, .sheet-rolltemplate-walking_dead .sheet-template .pseudo-select span, .sheet-rolltemplate-walking_dead .sheet-template .sheet-pseudo-select span, .sheet-rolltemplate-walking_dead .sheet-template textarea, .sheet-rolltemplate-walking_dead .sheet-template input:not(:is([type=radio], [type=checkbox])), .sheet-rolltemplate-walking_dead .sheet-template .uneditable-input { padding: var(--inputPadding); } .sheet-rolltemplate-walking_dead .sheet-template input:is([type=text], [type=number]), .sheet-rolltemplate-walking_dead .sheet-template textarea { cursor: auto; } .sheet-rolltemplate-walking_dead .sheet-template select, .sheet-rolltemplate-walking_dead .sheet-template .pseudo-select span, .sheet-rolltemplate-walking_dead .sheet-template .sheet-pseudo-select span, .sheet-rolltemplate-walking_dead .sheet-template input:not(:where([type=checkbox], [type=radio])), .sheet-rolltemplate-walking_dead .sheet-template .uneditable-input, .sheet-rolltemplate-walking_dead .sheet-template textarea { border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; } .sheet-rolltemplate-walking_dead .sheet-template select, .sheet-rolltemplate-walking_dead .sheet-template .sheet-pseudo-select span, .sheet-rolltemplate-walking_dead .sheet-template .pseudo-select span { -webkit-apperance: none; appearance: none; text-transform: var(--selectTextTransform); overflow: hidden !important; white-space: nowrap; text-overflow: var(--selectTextOverflow); text-align: var(--selectTextAlign); color: var(--selectColor); } .sheet-rolltemplate-walking_dead .sheet-template input { width: auto; } .sheet-rolltemplate-walking_dead .sheet-template input:placeholder { color: var(--placeholderColor); } .sheet-rolltemplate-walking_dead .sheet-template input.plus-control:not([value*="-"]) + span:before { content: "+"; } .sheet-rolltemplate-walking_dead .sheet-template textarea { resize: var(--textareaResize); white-space: pre-wrap; } .sheet-rolltemplate-walking_dead .sheet-template textarea.fixed { resize: none; overflow: auto; } .sheet-rolltemplate-walking_dead .sheet-template button { cursor: pointer; } .sheet-rolltemplate-walking_dead .sheet-template .roller { display: flex; align-items: center; gap: var(--half-gap); } .sheet-rolltemplate-walking_dead .sheet-template .roller:before { content: "T"; font-family: dicefontd20; } .sheet-rolltemplate-walking_dead .sheet-template .collapse-container { display: grid; position: relative; } .sheet-rolltemplate-walking_dead .sheet-template .text-collapse { cursor: pointer; display: flex; justify-content: flex-start; align-items: center; } .sheet-rolltemplate-walking_dead .sheet-template .text-collapse:before { content: var(--expandedSymbol); font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: var(--icon-size); /* Preferred icon size */ } .sheet-rolltemplate-walking_dead .sheet-template .text-collapse__text { display: inline; } .sheet-rolltemplate-walking_dead .sheet-template .text-collapse__check:not(:checked) + .text-collapse { border-width: 1px 3px; border-style: solid; border-color: var(--borderColor); border-radius: 5px; box-sizing: border-box; } .sheet-rolltemplate-walking_dead .sheet-template .text-collapse__check:checked + .text-collapse:before { content: var(--collapsedSymbol); } .sheet-rolltemplate-walking_dead .sheet-template .repitem:hover > .collapse, .sheet-rolltemplate-walking_dead .sheet-template .repitem:hover .roll-container, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container:hover > .collapse, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container:hover .roll-container { opacity: var(--collapseHoverOpacity); } .sheet-rolltemplate-walking_dead .sheet-template .repitem > .collapse, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container > .collapse { opacity: var(--collapseBaseOpacity); position: absolute; right: -10px; top: 0px; border: 0px solid black; border-radius: 0; color: var(--collapseExpandedColor); text-transform: none; background-color: transparent; } .sheet-rolltemplate-walking_dead .sheet-template .repitem > .collapse:before, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container > .collapse:before { content: "y"; font-family: pictos; } .sheet-rolltemplate-walking_dead .sheet-template .repitem > .collapse:checked, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container > .collapse:checked { color: var(--collapseCollapsedColor); background-color: transparent; } .sheet-rolltemplate-walking_dead .sheet-template .repitem > .collapse:checked ~ .expanded, .sheet-rolltemplate-walking_dead .sheet-template .repitem > .collapse:checked ~ .collapse-container .expanded, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container > .collapse:checked ~ .expanded, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container > .collapse:checked ~ .collapse-container .expanded { display: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .repitem > .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .sheet-rolltemplate-walking_dead .sheet-template .repitem > .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container > .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container > .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + * { display: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .repitem > .collapse:not(:checked) ~ .collapsed, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container > .collapse:not(:checked) ~ .collapsed { display: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .repitem > .collapse:hover, .sheet-rolltemplate-walking_dead .sheet-template .collapse-container > .collapse:hover { color: var(--collapseExpandedColor); } .sheet-rolltemplate-walking_dead .sheet-template .repcontainer.editmode .collapse { display: none; } .sheet-rolltemplate-walking_dead .sheet-template .fill-left { display: var(--fillLeftDisplay); align-self: var(--fillLeftAlignment); box-sizing: border-box; } .sheet-rolltemplate-walking_dead .sheet-template .fill-left__radio { appearance: none; -webkit-appearance: none; background-color: var(--fillLeftSelectedColor); width: 100%; height: 100%; cursor: pointer; } .sheet-rolltemplate-walking_dead .sheet-template .fill-left__radio[data-value]:checked:before { content: attr(data-value); color: var(--fillLeftDataColor); font-size: var(--fillLeftDataSize); place-self: center; text-transform: var(--fillLeftDataTransform); } .sheet-rolltemplate-walking_dead .sheet-template .fill-left__radio:checked ~ .fill-left__radio { background-color: var(--fillLeftUnselectedColor); } .sheet-rolltemplate-walking_dead .sheet-template .input-label { display: inline-flex; gap: var(--input-label-gap); align-items: center; } .sheet-rolltemplate-walking_dead .sheet-template .input-label:not(.stacked) > input[type=text] { flex: 1 1 0; } .sheet-rolltemplate-walking_dead .sheet-template .input-label:not(.stacked) > :not([name]) { flex: 0 0 auto; } .sheet-rolltemplate-walking_dead .sheet-template .input-label > :is(span, button) { text-transform: var(--input-label-text-transform); } .sheet-rolltemplate-walking_dead .sheet-template .input-label--dual { grid-template-columns: 1fr auto 1fr; grid-template-areas: "over over over" "under under under"; } .sheet-rolltemplate-walking_dead .sheet-template .input-label--dual > span:last-of-type { grid-column: 1/-1; } .sheet-rolltemplate-walking_dead .sheet-template .input-label--dual > input:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } .sheet-rolltemplate-walking_dead .sheet-template .input-label--dual > .slash { line-height: 0rem; font-weight: normal; } .sheet-rolltemplate-walking_dead .sheet-template .headed-textarea { display: grid; grid-template-rows: auto 1fr; grid-template-columns: auto; grid-column: 1/-1; } .sheet-rolltemplate-walking_dead .sheet-template .headed-textarea :not(textarea):not(.adaptive) { justify-self: start; } .sheet-rolltemplate-walking_dead .sheet-template .headed-textarea .headed-textarea__header { grid-area: initial; } .sheet-rolltemplate-walking_dead .sheet-template .adaptive { display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-template-areas: "content"; position: relative; } .sheet-rolltemplate-walking_dead .sheet-template .adaptive > * { grid-area: content; } .sheet-rolltemplate-walking_dead .sheet-template .adaptive > span { opacity: 0; z-index: -10; border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; text-transform: initial; border-radius: 0px; } .sheet-rolltemplate-walking_dead .sheet-template .adaptive--text { min-height: 4rem; } .sheet-rolltemplate-walking_dead .sheet-template .adaptive--text__span { white-space: pre-wrap; padding: 2px; } .sheet-rolltemplate-walking_dead .sheet-template .adaptive--text__textarea { width: 100%; height: 100%; resize: none; } .sheet-rolltemplate-walking_dead .sheet-template .adaptive--text__textarea, .sheet-rolltemplate-walking_dead .sheet-template .adaptive--input__input { position: absolute; } .sheet-rolltemplate-walking_dead .sheet-template .adaptive--input__input { width: 100%; } .sheet-rolltemplate-walking_dead .sheet-template .adaptive--input__span { padding: 2px; min-height: 1.5rem; } .sheet-rolltemplate-walking_dead .sheet-template .repitem > input:not([type=checkbox]) { width: 100%; } .sheet-rolltemplate-walking_dead .sheet-template .repitem .headed-textarea, .sheet-rolltemplate-walking_dead .sheet-template .repitem .description { grid-column: 1/-1; } .sheet-rolltemplate-walking_dead .sheet-template .repcontainer { display: grid; gap: var(--normal-gap); } .sheet-rolltemplate-walking_dead .sheet-template .repeating-container { display: grid; grid-template-areas: "header"; align-self: start; } .sheet-rolltemplate-walking_dead .sheet-template .repeating-container > .header { grid-area: header; } .sheet-rolltemplate-walking_dead .sheet-template .repeating-container :is(.repcontrol-button, .repcontrol_edit) { opacity: 0; transition: var(--revealTrans); } .sheet-rolltemplate-walking_dead .sheet-template .repeating-container:is(:hover, :focus-within, :focus) :is(.repcontrol-button, .repcontrol_edit) { opacity: 1; } .sheet-rolltemplate-walking_dead .sheet-template .repcontrol-button { align-self: start; } .sheet-rolltemplate-walking_dead .sheet-template .repcontrol-button ~ .repcontrol { justify-self: end; z-index: 100; } .sheet-rolltemplate-walking_dead .sheet-template .repcontrol-button ~ .repcontrol > .repcontrol_add { display: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .repcontrol-button--add { justify-self: start; width: 15px; height: 15px; padding: 4px; font-size: 0; color: var(--col-alt); border: 1px solid var(--col-alt); } .sheet-rolltemplate-walking_dead .sheet-template .repcontrol-button--add::before { inset: 0; place-self: center; font-family: var(--font-icon); font-size: 12px; content: "add"; } .sheet-rolltemplate-walking_dead .sheet-template :where(.border-back, .sheet-border-back) { background-image: var(--border_bg_sm), var(--border_bg_lg); background-repeat: repeat; background-color: var(--backColor); } .sheet-rolltemplate-walking_dead .sheet-template :where(.border-back, .sheet-border-back) > :where(*) { background: var(--backColor); } .sheet-rolltemplate-walking_dead .sheet-template .border-back-container { background-color: var(--backColor); } .sheet-rolltemplate-walking_dead .sheet-template .border-back-interior, .sheet-rolltemplate-walking_dead .sheet-template .sheet-border-back-interior, .sheet-rolltemplate-walking_dead .sheet-template span.border-back-interior ~ .repcontainer { position: relative; background-color: var(--backColor); z-index: 1; gap: 2px; } .sheet-rolltemplate-walking_dead .sheet-template .border-back-interior::before, .sheet-rolltemplate-walking_dead .sheet-template .sheet-border-back-interior::before, .sheet-rolltemplate-walking_dead .sheet-template span.border-back-interior ~ .repcontainer::before { content: ""; position: absolute; inset: 0; background-image: var(--border_bg_sm), var(--border_bg_lg); background-repeat: repeat; background-color: var(--backColor); opacity: 0.4; z-index: -1; } .sheet-rolltemplate-walking_dead .sheet-template .border-back-interior > *, .sheet-rolltemplate-walking_dead .sheet-template .sheet-border-back-interior > *, .sheet-rolltemplate-walking_dead .sheet-template span.border-back-interior ~ .repcontainer > * { z-index: 1; } .sheet-rolltemplate-walking_dead .sheet-template .border-back-interior .repitem, .sheet-rolltemplate-walking_dead .sheet-template .sheet-border-back-interior .repitem, .sheet-rolltemplate-walking_dead .sheet-template span.border-back-interior ~ .repcontainer .repitem { position: relative; background-color: var(--backColor); z-index: 1; } .sheet-rolltemplate-walking_dead .sheet-template .border-back-interior .repitem::before, .sheet-rolltemplate-walking_dead .sheet-template .sheet-border-back-interior .repitem::before, .sheet-rolltemplate-walking_dead .sheet-template span.border-back-interior ~ .repcontainer .repitem::before { content: ""; position: absolute; inset: 0; background-image: var(--border_bg_sm), var(--border_bg_lg); background-repeat: repeat; background-color: var(--backColor); opacity: 0.4; z-index: -1; } .sheet-rolltemplate-walking_dead .sheet-template .border-back-interior .repitem > *, .sheet-rolltemplate-walking_dead .sheet-template .sheet-border-back-interior .repitem > *, .sheet-rolltemplate-walking_dead .sheet-template span.border-back-interior ~ .repcontainer .repitem > * { z-index: 1; } .sheet-rolltemplate-walking_dead .sheet-template .border-back-interior .repitem > *:not(.expanded), .sheet-rolltemplate-walking_dead .sheet-template .sheet-border-back-interior .repitem > *:not(.expanded), .sheet-rolltemplate-walking_dead .sheet-template span.border-back-interior ~ .repcontainer .repitem > *:not(.expanded) { background-color: var(--backColor); } .sheet-rolltemplate-walking_dead .sheet-template h3, .sheet-rolltemplate-walking_dead .sheet-template h4 { font-family: var(--topHeadFont); font-weight: bold; color: var(--fontColor); display: flex; align-items: center; padding: 0 var(--half-gap); } .sheet-rolltemplate-walking_dead .sheet-template h3 { text-shadow: 2px 1px var(--backColor); } .sheet-rolltemplate-walking_dead .sheet-template h4 { font-size: 1em; text-transform: uppercase; } .sheet-rolltemplate-walking_dead .sheet-template textarea { font-family: var(--contentHeadFont); font-size: 1.25em; line-height: 1; color: var(--colPen); } .sheet-rolltemplate-walking_dead .sheet-template section:hover button, .sheet-rolltemplate-walking_dead .sheet-template input:hover, .sheet-rolltemplate-walking_dead .sheet-template textarea:hover { background: var(--highlightColor); } .sheet-rolltemplate-walking_dead .sheet-template select { padding: 2px 8px; } .sheet-rolltemplate-walking_dead .sheet-template input:where(:not([class*=clock])) { font-family: var(--contentHeadFont); font-size: 1.25em; line-height: 1; color: var(--colPen); } .sheet-rolltemplate-walking_dead .sheet-template input:where(:not([class*=clock]))[type=number], .sheet-rolltemplate-walking_dead .sheet-template input:where(:not([class*=clock])).number { font-size: 1.5em; font-weight: bolder; padding: 0; } .sheet-rolltemplate-walking_dead .sheet-template input:where(:not([class*=clock])):placeholder-shown { font-family: var(--midHeadFont); font-size: 1em; font-weight: normal; font-style: italic; height: unset; } .sheet-rolltemplate-walking_dead .sheet-template input:where(:not([class*=clock])):not(.equip-checkbox)[type=checkbox], .sheet-rolltemplate-walking_dead .sheet-template input:where(:not([class*=clock]))[type=radio] { display: grid; place-content: center; } .sheet-rolltemplate-walking_dead .sheet-template select { background: var(--bgColor); color: var(--colPen); font-family: var(--midHeadFont); } .sheet-rolltemplate-walking_dead .sheet-template input:is([readonly], [disabled]) { background: color-mix(in lch, var(--colHeaderBack) 30%, var(--backColor)); color: var(--fontColor); font-family: var(--topHeadFont); font-size: 1em; height: unset; border-radius: unset; } .sheet-rolltemplate-walking_dead .sheet-template .input-label > span { --input-label-text-transform: uppercase; font-family: var(--midHeadFont); color: var(--redColor); padding-left: var(--inputLeftPadding); } .sheet-rolltemplate-walking_dead .sheet-template .adaptive--text { height: 100%; } .sheet-rolltemplate-walking_dead .sheet-template .adaptive .adaptive--text__span { font-family: var(--contentHeadFont); font-size: 1.25em; font-weight: bold; line-height: 1; } .sheet-rolltemplate-walking_dead .sheet-template .header, .sheet-rolltemplate-walking_dead .sheet-template .sheet-header { display: flex; flex-wrap: wrap; position: relative; } .sheet-rolltemplate-walking_dead .sheet-template .header::before, .sheet-rolltemplate-walking_dead .sheet-template .sheet-header::before { content: ""; position: absolute; inset: 0; background-color: color-mix(in lch, var(--colHeaderBack) 30%, var(--backColor)); z-index: -1; } .sheet-rolltemplate-walking_dead .sheet-template .head-section, .sheet-rolltemplate-walking_dead .sheet-template .sheet-head-section { display: grid; grid-template-rows: auto 1fr; gap: 2px; } .sheet-rolltemplate-walking_dead .sheet-template .section-content { background: var(--backColor); display: grid; align-content: start; } .sheet-rolltemplate-walking_dead .sheet-template .sub-header { flex: 1; justify-content: end; } .sheet-rolltemplate-walking_dead .sheet-template .red-border.red-border, .sheet-rolltemplate-walking_dead .sheet-template .rep-red-border.rep-red-border + fieldset + .repcontainer, .sheet-rolltemplate-walking_dead .sheet-template .conditional-red-control:checked + .conditional-red-border, .sheet-rolltemplate-walking_dead .sheet-template .sheet-red-border { --_borderWidth: 2px; --_redSlice: 15; border-color: var(--redColor); border-width: 0; border-image-source: var(--redBorder); border-image-slice: var(--_redSlice); border-image-width: var(--_borderWidth); border-image-repeat: repeat; border-style: solid; box-sizing: border-box; } .sheet-rolltemplate-walking_dead .sheet-template .red-border.red-border--mid, .sheet-rolltemplate-walking_dead .sheet-template .rep-red-border.rep-red-border + fieldset + .repcontainer--mid, .sheet-rolltemplate-walking_dead .sheet-template .conditional-red-control:checked + .conditional-red-border--mid, .sheet-rolltemplate-walking_dead .sheet-template .sheet-red-border--mid { --_borderWidth: 2px; } .sheet-rolltemplate-walking_dead .sheet-template .red-border.red-border--thick, .sheet-rolltemplate-walking_dead .sheet-template .rep-red-border.rep-red-border + fieldset + .repcontainer--thick, .sheet-rolltemplate-walking_dead .sheet-template .conditional-red-control:checked + .conditional-red-border--thick, .sheet-rolltemplate-walking_dead .sheet-template .sheet-red-border--thick { --_borderWidth: 4px; } .sheet-rolltemplate-walking_dead .sheet-template .red-border.red-border:is([type=radio], [type=checkbox]), .sheet-rolltemplate-walking_dead .sheet-template .rep-red-border.rep-red-border + fieldset + .repcontainer:is([type=radio], [type=checkbox]), .sheet-rolltemplate-walking_dead .sheet-template .conditional-red-control:checked + .conditional-red-border:is([type=radio], [type=checkbox]), .sheet-rolltemplate-walking_dead .sheet-template .sheet-red-border:is([type=radio], [type=checkbox]) { cursor: pointer; --_size: 30px; box-sizing: border-box; width: var(--_size); height: var(--_size); } .sheet-rolltemplate-walking_dead .sheet-template .red-border.red-border:is([type=radio], [type=checkbox]):checked::before, .sheet-rolltemplate-walking_dead .sheet-template .rep-red-border.rep-red-border + fieldset + .repcontainer:is([type=radio], [type=checkbox]):checked::before, .sheet-rolltemplate-walking_dead .sheet-template .conditional-red-control:checked + .conditional-red-border:is([type=radio], [type=checkbox]):checked::before, .sheet-rolltemplate-walking_dead .sheet-template .sheet-red-border:is([type=radio], [type=checkbox]):checked::before { content: var(--checkContent); grid-area: content; font-weight: var(--checkWeight); place-self: start center; color: var(--checkColor); font-size: var(--checkSize); line-height: var(--checkLineHeight); } .sheet-rolltemplate-walking_dead .sheet-template .red-box.red-box, .sheet-rolltemplate-walking_dead .sheet-template .sheet-red-box, .sheet-rolltemplate-walking_dead .sheet-template .conditional-red-control:checked + .conditional-red-box { --_trans: 45%; --_color: color-mix(in lch, var(--redColor) var(--_trans), transparent); border-image-slice: var(--_redSlice); background-image: var(--border_bg_sm), var(--border_bg_lg), linear-gradient(var(--_color), var(--_color)); background-repeat: repeat; background-attachment: fixed; } .sheet-rolltemplate-walking_dead .sheet-template .inlinerollresult { display: grid; place-content: center; font-size: 1em; line-height: 0.9; position: relative; padding: 2px; color: var(--dieTextColor); height: 24px; aspect-ratio: 1; border: none; border-radius: 6px; background: var(--dieBlack); text-align: center; font-family: var(--font-thick-header); font-weight: normal; } .sheet-rolltemplate-walking_dead .sheet-template .inlinerollresult::after { position: absolute; inset: 2px; content: ""; } .sheet-rolltemplate-walking_dead .sheet-template .inlinerollresult.fullcrit, .sheet-rolltemplate-walking_dead .sheet-template .inlinerollresult[original-title="Rolling 6 = 6"], .sheet-rolltemplate-walking_dead .sheet-template .inlinerollresult[title="Rolling 6 = 6"] { order: 1; color: transparent; } .sheet-rolltemplate-walking_dead .sheet-template .inlinerollresult.fullcrit::after, .sheet-rolltemplate-walking_dead .sheet-template .inlinerollresult[original-title="Rolling 6 = 6"]::after, .sheet-rolltemplate-walking_dead .sheet-template .inlinerollresult[title="Rolling 6 = 6"]::after { --circle-size: 10%; background-image: radial-gradient(circle at center, var(--_circle-color) 10%, var(--_circle-color), transparent calc(var(--circle-size) * 2), transparent, var(--_circle-color) calc(var(--circle-size) * 3), var(--_circle-color), transparent calc(var(--circle-size) * 4), transparent, var(--_circle-color) calc(var(--circle-size) * 5), var(--_circle-color), transparent calc(var(--circle-size) * 6)); background-size: contain; } .sheet-rolltemplate-walking_dead .sheet-template .inlinerollresult[original-title*="computed value"], .sheet-rolltemplate-walking_dead .sheet-template .inlinerollresult[title*="computed value"] { pointer-events: none; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-results { margin: var(--normal-gap); background-color: color-mix(in lch, gray 50%, transparent); display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; gap: var(--half-gap); padding: 0.2em 2em; padding-left: 2.5em; color: var(--parchmentColor); } .sheet-rolltemplate-walking_dead .sheet-template .sheet-results h5 { --size5: 2em; --font5: var(--fontHeader); --fontColor: hsl(357, 58%, 48%); text-transform: uppercase; line-height: 1; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-results:first-child span.inlinerollresult { background: color-mix(in lch, var(--parchmentColor) 10%, transparent); border: 2px solid transparent; border-image-source: var(--redBorder); border-image-slice: 15; border-image-width: 2px; border-image-repeat: repeat; font-size: 2em; color: var(--parchmentColor); } .sheet-rolltemplate-walking_dead .sheet-template .sheet-stress, .sheet-rolltemplate-walking_dead .sheet-template .sheet-base { display: contents; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-base { --_circle-color: white; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-base .inlinerollresult:not(.fullcrit):not([original-title="Rolling 6 = 6"]):not([title="Rolling 6 = 6"]) { order: 2; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-stress { --_circle-color: black; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-stress .inlinerollresult { background: var(--img-stress-dice); } .sheet-rolltemplate-walking_dead .sheet-template .sheet-stress .inlinerollresult.fullfail, .sheet-rolltemplate-walking_dead .sheet-template .sheet-stress .inlinerollresult[original-title="Rolling 1 = 1"], .sheet-rolltemplate-walking_dead .sheet-template .sheet-stress .inlinerollresult[title="Rolling 1 = 1"] { order: 3; color: transparent; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-stress .inlinerollresult.fullfail::after, .sheet-rolltemplate-walking_dead .sheet-template .sheet-stress .inlinerollresult[original-title="Rolling 1 = 1"]::after, .sheet-rolltemplate-walking_dead .sheet-template .sheet-stress .inlinerollresult[title="Rolling 1 = 1"]::after { background: var(--walkerSign); background-size: contain; background-repeat: no-repeat; background-position: center; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-stress .inlinerollresult:not(.fullfail):not(.fullcrit):not([original-title="Rolling 6 = 6"]):not([title="Rolling 6 = 6"]):not([original-title="Rolling 1 = 1"]):not([title="Rolling 1 = 1"]) { order: 2; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-template { padding-bottom: 1em; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-template-header { display: grid; padding: 1em 2em; padding-bottom: 0; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-template-header h3 { justify-self: center; --redBorder: url("https://s3.amazonaws.com/files.d20.io/images/381595464/tP3wEzNsIcSmxlzs0rkCAw/original.png?1708731862"); border: 2px solid transparent; border-image-source: var(--redBorder); border-image-slice: 15; border-image-width: 0 0 2px 0; border-image-repeat: repeat; margin: 0; min-width: 50%; justify-content: center; font-family: var(--fontHeader); color: var(--redColor); } .sheet-rolltemplate-walking_dead .sheet-template .sheet-template-header h4 { justify-self: center; font-family: var(--fontHeader); font-size: 2em; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-template-header h4 a { color: var(--redColor); } .sheet-rolltemplate-walking_dead .sheet-template .sheet-computed-label .inlinerollresult { background-color: transparent; border-radius: 0; padding: 0; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-computed-control + .sheet-hide-if-computed { display: none !important; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-push-container a { border: none; background: var(--redColor); } .sheet-rolltemplate-walking_dead .sheet-template .sheet-textarea { max-height: 10rem; overflow: auto; } .sheet-rolltemplate-walking_dead .sheet-template .sheet-textarea > span { flex: 1; } html { font-size: 16px; } html .sheetform { background-color: unset !important; } body { --font1:var(--topHeadFont); --font2:var(--topHeadFont); --font3:var(--midHeadFont); --font4:var(--midHeadFont); --font5:var(--midHeadFont); --font6:var(--contentHeadFont); --font7:var(--contentHeadFont); --baseFontSize: 16px; --size1:300%; --size2:250%; --size3:200%; --size4:150%; --size5:125%; --size6:100%; --size7:87.5%; --icon-size:24px; --font-icon: "Material Icons"; --normal-gap-x:1rem; --normal-gap-y:1rem; --normal-gap: var(--normal-gap-x); --half-gap-x:calc(var(--normal-gap-x) / 2); --half-gap-y:calc(var(--normal-gap-y) / 2); --half-gap: var(--half-gap-x); --tiny-gap-x:calc(var(--half-gap-x) / 2); --tiny-gap-y:calc(var(--half-gap-y) / 2); --tiny-gap: var(--tiny-gap-x); --big-gap-x:calc(var(--normal-gap-x) * 2); --big-gap-y:calc(var(--normal-gap-y) * 2); --big-gap: var(--big-gap-x); --lm-backColor:#fff; --dm-backColor:var(--dark-surface1); --backColor:var(--lm-backColor); --lm-selectedColor:#000; --dm-selectedColor:#007476; --selectedColor:var(--lm-selectedColor); --lm-unselectedColor1:lightgrey; --dm-unselectedColor1:#0e0e0e; --unselectedColor1:var(--lm-unselectedColor1); --lm-unselectedColor2:transparent; --dm-unselectedColor2:transparent; --unselectedColor1:var(--lm-unselectedColor2); --lm-checkColor:#000; --dm-checkColor:#ff0000; --checkColor:var(--lm-checkColor); --lm-checkedBackColor:transparent; --dm-checkedBackColor:transparent; --checkedBackColor:var(--lm-checkedBackColor); --lm-borderColor:#000; --dm-borderColor:lightgrey; --borderColor:var(--lm-borderColor); --lm-fontColor:#0f0f0f; --dm-fontColor:var(--dark-primarytext); --fontColor:var(--lm-fontColor); --lm-disabledColor:var(--lm-unselectedColor1); --dm-disabledColor:var(--dm-unselectedColor1); --disabledColor:var(--lm-disabledColor); --checkContent: "✓"; --checkWeight: bold; --checkSize: 150%; --checkLineHeight: calc(var(--checkSize) / 3); --checkboxBorderWidth: var(--borderWidth); --checkboxBorderStyle: var(--borderStyle); --lm-checkboxBorderColor: var(--lm-borderColor); --dm-checkboxBorderColor: var(--dm-borderColor); --checkboxBorderColor: var(--lm-checkBorderColor); --checkboxWidth: 14px; --checkboxHeight: 14px; --inputTopPadding: 2px; --inputRightPadding: 2px; --inputBottomPadding: 2px; --inputLeftPadding: 2px; --inputPadding: var(--inputTopPadding) var(--inputRightPadding) var(--inputBottomPadding) var(--inputLeftPadding); --lm-placeholderColor:#ededed80; --dm-placeholderColor:#3f3f3f80; --placeholderColor: var(--lm-placeholderColor); --textareaResize: vertical; --borderWidth:1px; --borderStyle:solid; --expandedSymbol:"unfold_less"; --collapsedSymbol: "unfold_more"; --collapseHoverOpacity: 1; --collapseBaseOpacity: 0; --lm-collapseExpandedColor:var(--lm-selectedColor); --dm-collapseExpandedColor:var(--dm-selectedColor); --collapseExpandedColor: var(--lm-collapseExpandedColor); --lm-collapseCollapsedColor:var(--lm-unselectedColor); --dm-collapseCollapsedColor:var(--dm-unselectedColor); --collapseCollapsedColor: var(--lm-collapseCollapsedColor); --fillLeftDisplay: flex; --fillLeftAlignment: center; --fillLeftDataTransform: uppercase; --fillLeftDataSize: var(--size6); --lm-fillLeftSelectedColor: var(--lm-selectedColor); --dm-fillLeftSelectedColor: var(--dm-selectedColor); --fillLeftSelectedColor: var(--lm-fillLeftSelectedColor); --lm-fillLeftUnselectedColor: var(--lm-unselectedColor); --dm-fillLeftUnselectedColor: var(--dm-unselectedColor); --fillLeftUnselectedColor: var(--lm-fillLeftUnselectedColor); --lm-fillLeftDataColor: var(--lm-backColor); --dm-fillLeftDataColor: var(--dm-backColor); --fillLeftDataColor: var(--lm-fillLeftDataColor); --lm-selectColor: var(--lm-fontColor); --dm-selectColor: var(--dm-fontColor); --selectColor: var(--lm-fontColor); --selectTextOverflow: var(--textOverflow); --selectTextAlign: center; --selectTextTransform: capitalize; --revealTime:500ms; --revealFunction: ease-in-out; --revealTrans: var(--revealTime) var(--revealFunction); --kmodal-width:fit-content; --kmodal-height:fit-content; --kmodal-max-width:90vw; --kmodal-max-height:90vh; --lm-kmodal-overlay-background:rgba(0,0,0,.9); --dm-kmodal-overlay-background:rgba(0,0,0,.9); --kmodal-overlay-background: var(--lm-kmodal-overlay-background); --lm-kmodal-dialog-background:var(--lm-backColor); --dm-kmodal-dialog-background:var(--dm-backColor); --kmodal-dialog-background: var(--lm-kmodal-dialog-background); --kmodal-border-width:0px; --kmodal-border-color:transparent; --lm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25); --dm-kmodal-box-shadow-color1:rgba(0, 0, 0, 0.25); --kmodal-box-shadow-color1:var(--lm-kmodal-box-shadow-color1); --kmodal-box-shadow-blur1:28px; --kmodal-box-shadow-x1:0px; --kmodal-box-shadow-y1:14px; --kmodal-box-shadow-spread1:0px; --lm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22); --dm-kmodal-box-shadow-color2:rgba(0, 0, 0, 0.22); --kmodal-box-shadow-color2:var(--lm-kmodal-box-shadow-color2); --kmodal-box-shadow-blur2:10px; --kmodal-box-shadow-x2:0px; --kmodal-box-shadow-y2:10px; --kmodal-box-shadow-spread2:0px; --kmodal-box-shadow: var(--kmodal-box-shadow-x1) var(--kmodal-box-shadow-y1) var(--kmodal-box-shadow-blur1) var(--kmodal-box-shadow-spread1) var(--kmodal-box-shadow-color1), var(--kmodal-box-shadow-x2) var(--kmodal-box-shadow-y2) var(--kmodal-box-shadow-blur2) var(--kmodal-box-shadow-spread2) var(--kmodal-box-shadow-color2); --kmodal-close-width:1rem; --kmodal-close-height:1rem; --lm-kmodal-close-color:#ccc; --dm-kmodal-close-color:#aaa; --kmodal-close-color:var(--lm-kmodal-close-color); --lm-kmodal-close-hover-color:#aaa; --dm-kmodal-close-hover-color:#aaa; --kmodal-close-hover-color:var(--lm-kmodal-close-hover-color); --kmodal-close-line-thickness:2px; --kmodal-close-line-length:calc(var(--kmodal-close-width) * 1.5); --paper-background: url("https://files.d20.io/images/367925829/eMSWRz7RivrjvH4PVC9NVg/original.webp"); --redColor: #6a2529; --highlightColor: hsla(60, 100%, 50%, 0.5); --pinkColor: hsl(350, 100%, 75%); --redBorder: url("https://files.d20.io/images/367946680/Gd_Fj02Pn0T-XqgfY7dyTQ/original.png"); --dieBlack: black; --border_bg_sm: url("https://s3.amazonaws.com/files.d20.io/images/370703674/Ygc8pSpM2Q-AecerjIX35w/original.png?1701999902"); --border_bg_lg: url("https://s3.amazonaws.com/files.d20.io/images/370703589/Q7GwrwThO3WQaT_QHaMwnw/original.png?1701999869"); --paper_texture: url("https://s3.amazonaws.com/files.d20.io/images/370494718/yrFUm6X--VoUwJh7ro7KCg/original.jpg?1701837809"); --border-scratches: url("https://s3.amazonaws.com/files.d20.io/images/382625407/sVgLBFttvaKc9YiCVAtSQw/original.png?1709333967"); --parchmentColor: #e9e3dc; --bgColor: var(--parchmentColor); --img-dice-success: var(--redColor); --img-dice-panic: var(--redColor); --img-stress-dice: var(--redColor); --dieTextColor: white; --walkerSign: url("https://files.d20.io/images/372539015/Xzq32j3zg117kwF5ipPBRw/original.png"); --lm-fontColor: hsl(50, 20%, 20%); --dm-fontColor: var(--parchmentColor); --fontColor: var(--lm-fontColor); --dm-backColor: var(--dark-surface2); --colPen: hsl(220, 50%, 50%); --checkColor: var(--colPen); --colHeaderBack: hsl(50, 10%, 50%); --size1: 200%; --size2: 175%; --size3: 150%; --size4: 125%; --size5: 100%; --size6: 85%; --input-label-gap: var(--tiny-gap); --border-width: 2px; color: var(--fontColor); color: var(--fontColor); font-size: 1rem; } body .ui-dialog { scrollbar-gutter: stable; } body .ui-dialog .nav-tabs { position: sticky; top: 0; z-index: 1000; background-color: var(--backColor); } body .ui-dialog .nav-tabs a { font-family: var(--font3); } body .ui-dialog .tab-content .charsheet { padding: 2px; --_margin: 1rem; margin: var(--_margin); background-image: var(--border_bg_sm), var(--border_bg_lg); background-repeat: repeat; background-color: var(--backColor); --topHeadFont: "Barlow Semi Condensed", sans-serif; --midHeadFont: "Ubuntu Mono", monospace; --contentHeadFont: "Caveat", cursive; --embossedFont: "Jura", sans-serif; --fontHeader: "impact", "Roboto Black", "Helvetica Neue"; --fontSystem: "Tilt Neon", sans-serif; font-family: var(--midHeadFont); } body .ui-dialog .tab-content .charsheet select, body .ui-dialog .tab-content .charsheet textarea, body .ui-dialog .tab-content .charsheet input, body .ui-dialog .tab-content .charsheet .uneditable-input, body .ui-dialog .tab-content .charsheet label, body .ui-dialog .tab-content .charsheet button { all: initial; } body .ui-dialog .tab-content .charsheet .flex-box, body .ui-dialog .tab-content .charsheet .sheet-flex-box { display: flex; } body .ui-dialog .tab-content .charsheet .flex-wrap, body .ui-dialog .tab-content .charsheet .sheet-flex-wrap { flex-wrap: wrap; } body .ui-dialog .tab-content .charsheet .justify-space-around, body .ui-dialog .tab-content .charsheet .sheet-justify-space-around { justify-content: space-around; } body .ui-dialog .tab-content .charsheet .justify-space-between, body .ui-dialog .tab-content .charsheet .sheet-justify-space-between { justify-content: space-between; } body .ui-dialog .tab-content .charsheet .justify-center, body .ui-dialog .tab-content .charsheet .sheet-justify-center { justify-content: center; } body .ui-dialog .tab-content .charsheet .flex-min-content, body .ui-dialog .tab-content .charsheet .sheet-flex-min-content { flex: 1 0 min-content; } body .ui-dialog .tab-content .charsheet .stacked { flex-direction: column; } body .ui-dialog .tab-content .charsheet .stacked.center > * { text-align: center; } body .ui-dialog .tab-content .charsheet .stacked:not(.center) { align-items: start; } body .ui-dialog .tab-content .charsheet .stacked > [name]:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } body .ui-dialog .tab-content .charsheet .flex-column, body .ui-dialog .tab-content .charsheet .sheet-flex-column { flex-direction: column; } body .ui-dialog .tab-content .charsheet .flex-row-reverse, body .ui-dialog .tab-content .charsheet .sheet-flex-row-revers { flex-direction: row-reverse; } body .ui-dialog .tab-content .charsheet .flex-column-reverse, body .ui-dialog .tab-content .charsheet .sheet-flex-column-reverse { flex-direction: column-reverse; } body .ui-dialog .tab-content .charsheet .normal-gap, body .ui-dialog .tab-content .charsheet .sheet-normal-gap { gap: var(--normal-gap); } body .ui-dialog .tab-content .charsheet .normal-gap-x, body .ui-dialog .tab-content .charsheet .sheet-normal-gap-x { column-gap: var(--normal-gap-x); } body .ui-dialog .tab-content .charsheet .normal-gap-y, body .ui-dialog .tab-content .charsheet .sheet-normal-gap-y { row-gap: var(--normal-gap-y); } body .ui-dialog .tab-content .charsheet .half-gap, body .ui-dialog .tab-content .charsheet .sheet-half-gap { gap: var(--half-gap); } body .ui-dialog .tab-content .charsheet .half-gap-x, body .ui-dialog .tab-content .charsheet .sheet-half-gap-x { column-gap: var(--half-gap-x); } body .ui-dialog .tab-content .charsheet .half-gap-y, body .ui-dialog .tab-content .charsheet .sheet-half-gap-y { row-gap: var(--half-gap-y); } body .ui-dialog .tab-content .charsheet .tiny-gap, body .ui-dialog .tab-content .charsheet .sheet-tiny-gap { gap: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .tiny-gap-x, body .ui-dialog .tab-content .charsheet .sheet-tiny-gap-x { column-gap: var(--tiny-gap-x); } body .ui-dialog .tab-content .charsheet .tiny-gap-y, body .ui-dialog .tab-content .charsheet .sheet-tiny-gap-y { row-gap: var(--tiny-gap-y); } body .ui-dialog .tab-content .charsheet .big-gap, body .ui-dialog .tab-content .charsheet .sheet-big-gap { gap: var(--big-gap); } body .ui-dialog .tab-content .charsheet .big-gap-x, body .ui-dialog .tab-content .charsheet .sheet-big-gap-x { column-gap: var(--big-gap-x); } body .ui-dialog .tab-content .charsheet .big-gap-y, body .ui-dialog .tab-content .charsheet .sheet-big-gap-y { row-gap: var(--big-gap-y); } body .ui-dialog .tab-content .charsheet .grid, body .ui-dialog .tab-content .charsheet .sheet-grid { display: grid; } body .ui-dialog .tab-content .charsheet .grid-span-2, body .ui-dialog .tab-content .charsheet .sheet-grid-span-2 { grid-column: span 2; } body .ui-dialog .tab-content .charsheet .grid-span-all, body .ui-dialog .tab-content .charsheet .sheet-grid-span-all { grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .grid-column, body .ui-dialog .tab-content .charsheet .sheet-grid-column { grid-auto-flow: column; } body .ui-dialog .tab-content .charsheet .grid-dense, body .ui-dialog .tab-content .charsheet .sheet-grid-dense { grid-auto-flow: dense; } body .ui-dialog .tab-content .charsheet .boxed, body .ui-dialog .tab-content .charsheet .sheet-boxed { border: 2px solid var(--borderColor); border-radius: 0; box-sizing: border-box; } body .ui-dialog .tab-content .charsheet .boxed.thick-left, body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-left { border-left-width: 5px; } body .ui-dialog .tab-content .charsheet .boxed.thick-bottom, body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-bottom { border-bottom-width: 5px; } body .ui-dialog .tab-content .charsheet .boxed.thick-right, body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-right { border-right-width: 5px; } body .ui-dialog .tab-content .charsheet .boxed.thick-top, body .ui-dialog .tab-content .charsheet .sheet-boxed.thick-top { border-top-width: 5px; } body .ui-dialog .tab-content .charsheet .underlined, body .ui-dialog .tab-content .charsheet .sheet-underlined { border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; border-radius: 0; border-bottom: 1px solid var(--borderColor); transition: border-radius border var(--revealTrans); } body .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:hover, :focus, :focus-within) { border-width: 1px 3px; border-style: solid; border-color: var(--borderColor); border-radius: 5px; box-sizing: border-box; } body .ui-dialog .tab-content .charsheet :is(.underlined, .boxed):not([readonly]):not([type=checkbox]):not([type=radio]):is(:focus, :focus-within) { background-color: var(--disabledColor); } body .ui-dialog .tab-content .charsheet .underlined--invisible { border-color: transparent !important; } body .ui-dialog .tab-content .charsheet .ratio1-1, body .ui-dialog .tab-content .charsheet .sheet-ratio1-1 { aspect-ratio: 1/1; } body .ui-dialog .tab-content .charsheet span, body .ui-dialog .tab-content .charsheet input, body .ui-dialog .tab-content .charsheet textarea, body .ui-dialog .tab-content .charsheet button, body .ui-dialog .tab-content .charsheet select { line-height: normal; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; } body .ui-dialog .tab-content .charsheet .text-1, body .ui-dialog .tab-content .charsheet .sheet-text-1 { font-size: var(--size1); } body .ui-dialog .tab-content .charsheet .text-2, body .ui-dialog .tab-content .charsheet .sheet-text-2 { font-size: var(--size2); } body .ui-dialog .tab-content .charsheet .text-3, body .ui-dialog .tab-content .charsheet .sheet-text-3 { font-size: var(--size3); } body .ui-dialog .tab-content .charsheet .text-4, body .ui-dialog .tab-content .charsheet .sheet-text-4 { font-size: var(--size4); } body .ui-dialog .tab-content .charsheet .text-5, body .ui-dialog .tab-content .charsheet .sheet-text-5 { font-size: var(--size5); } body .ui-dialog .tab-content .charsheet .text-6, body .ui-dialog .tab-content .charsheet .sheet-text-6 { font-size: var(--size6); } body .ui-dialog .tab-content .charsheet .text-7, body .ui-dialog .tab-content .charsheet .sheet-text-7 { font-size: var(--size7); } body .ui-dialog .tab-content .charsheet .capitalize, body .ui-dialog .tab-content .charsheet .sheet-capitalize { text-transform: capitalize !important; } body .ui-dialog .tab-content .charsheet .lowercase, body .ui-dialog .tab-content .charsheet .sheet-lowercase { text-transform: lowercase !important; } body .ui-dialog .tab-content .charsheet .uppercase, body .ui-dialog .tab-content .charsheet .sheet-uppercase { text-transform: uppercase !important; } body .ui-dialog .tab-content .charsheet .sheet-material-icons, body .ui-dialog .tab-content .charsheet .material-icons { font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: var(--icon-size); /* Preferred icon size */ } body .ui-dialog .tab-content .charsheet .material-symbol, body .ui-dialog .tab-content .charsheet .sheet-material-symbol { font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; font-variation-settings: "FILL" 1; } body .ui-dialog .tab-content .charsheet .sheet-italics, body .ui-dialog .tab-content .charsheet .italics { font-style: italic; } body .ui-dialog .tab-content .charsheet h1, body .ui-dialog .tab-content .charsheet *[aria-level="1"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size1); font-family: var(--font1); } body .ui-dialog .tab-content .charsheet h1:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="1"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h1 *, body .ui-dialog .tab-content .charsheet *[aria-level="1"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size1); font-family: var(--font1); } body .ui-dialog .tab-content .charsheet h1 *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="1"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h2, body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], body .ui-dialog .tab-content .charsheet *[aria-level="2"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size2); font-family: var(--font2); } body .ui-dialog .tab-content .charsheet h2:not(input), body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name]:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="2"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h2 *, body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *, body .ui-dialog .tab-content .charsheet *[aria-level="2"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size2); font-family: var(--font2); } body .ui-dialog .tab-content .charsheet h2 *:not(input), body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name] *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="2"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h3, body .ui-dialog .tab-content .charsheet *[aria-level="3"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size3); font-family: var(--font3); } body .ui-dialog .tab-content .charsheet h3:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="3"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h3 *, body .ui-dialog .tab-content .charsheet *[aria-level="3"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; text-transform: uppercase; font-size: var(--size3); font-family: var(--font3); } body .ui-dialog .tab-content .charsheet h3 *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="3"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h4, body .ui-dialog .tab-content .charsheet *[aria-level="4"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size4); font-family: var(--font4); } body .ui-dialog .tab-content .charsheet h4:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="4"]:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h4:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="4"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h4 *, body .ui-dialog .tab-content .charsheet *[aria-level="4"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size4); font-family: var(--font4); } body .ui-dialog .tab-content .charsheet h4 *:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="4"] *:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h4 *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="4"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h5, body .ui-dialog .tab-content .charsheet *[aria-level="5"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } body .ui-dialog .tab-content .charsheet h5:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="5"]:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h5:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="5"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h5 *, body .ui-dialog .tab-content .charsheet *[aria-level="5"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } body .ui-dialog .tab-content .charsheet h5 *:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="5"] *:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h5 *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="5"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h6, body .ui-dialog .tab-content .charsheet *[aria-level="6"] { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } body .ui-dialog .tab-content .charsheet h6:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="6"]:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h6:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="6"]:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet h6 *, body .ui-dialog .tab-content .charsheet *[aria-level="6"] * { line-height: normal; color: var(--fontColor); display: block; white-space: nowrap; margin-top: 0px; margin-bottom: 0px; font-weight: normal; font-size: var(--size5); font-style: normal; font-family: var(--font5); } body .ui-dialog .tab-content .charsheet h6 *:not(:where(input)), body .ui-dialog .tab-content .charsheet *[aria-level="6"] *:not(:where(input)) { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet h6 *:not(input), body .ui-dialog .tab-content .charsheet *[aria-level="6"] *:not(input) { text-align: center; } body .ui-dialog .tab-content .charsheet .sheet-pictos, body .ui-dialog .tab-content .charsheet .pictos { font-family: pictos; text-transform: none; } body .ui-dialog .tab-content .charsheet .pictos3, body .ui-dialog .tab-content .charsheet .sheet-pictos3 { font-family: pictos three; text-transform: none; } body .ui-dialog .tab-content .charsheet .pictoscustom, body .ui-dialog .tab-content .charsheet .sheet-pictoscustom { font-family: pictos custom; text-transform: none; } body .ui-dialog .tab-content .charsheet .d4, body .ui-dialog .tab-content .charsheet .sheet-d4 { font-family: dicefontd4 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d6, body .ui-dialog .tab-content .charsheet .sheet-d6 { font-family: dicefontd6 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d8, body .ui-dialog .tab-content .charsheet .sheet-d8 { font-family: dicefontd8 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d10, body .ui-dialog .tab-content .charsheet .sheet-d10 { font-family: dicefontd10 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d12, body .ui-dialog .tab-content .charsheet .sheet-d12 { font-family: dicefontd12 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d20, body .ui-dialog .tab-content .charsheet .sheet-d20 { font-family: dicefontd20 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet .d30, body .ui-dialog .tab-content .charsheet .sheet-d30 { font-family: dicefontd30 !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet input[type=checkbox] { border: 1px solid var(--checkboxBorderColor); cursor: pointer; -webkit-appearance: none; appearance: none; width: var(--checkboxWidth); min-width: var(--checkboxWidth); height: var(--checkboxHeight); min-height: var(--checkboxHeight); display: grid; grid-template-columns: 1fr; grid-template-areas: "content"; } body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio):checked { background-color: var(--checkedBackColor); } body .ui-dialog .tab-content .charsheet input[type=checkbox]:not(.collapse):not(.fill-left__radio):checked:before { content: var(--checkContent); grid-area: content; font-weight: var(--checkWeight); place-self: start center; color: var(--checkColor); font-size: var(--checkSize); line-height: var(--checkLineHeight); } body .ui-dialog .tab-content .charsheet input[type=number] { width: 3rem; -moz-appearance: textfield !important; text-align: center; } body .ui-dialog .tab-content .charsheet input[type=number]::-webkit-inner-spin-button, body .ui-dialog .tab-content .charsheet input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } body .ui-dialog .tab-content .charsheet select, body .ui-dialog .tab-content .charsheet .pseudo-select span, body .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, body .ui-dialog .tab-content .charsheet textarea, body .ui-dialog .tab-content .charsheet input:not(:is([type=radio], [type=checkbox])), body .ui-dialog .tab-content .charsheet .uneditable-input { padding: var(--inputPadding); } body .ui-dialog .tab-content .charsheet input:is([type=text], [type=number]), body .ui-dialog .tab-content .charsheet textarea { cursor: auto; } body .ui-dialog .tab-content .charsheet select, body .ui-dialog .tab-content .charsheet .pseudo-select span, body .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, body .ui-dialog .tab-content .charsheet input:not(:where([type=checkbox], [type=radio])), body .ui-dialog .tab-content .charsheet .uneditable-input, body .ui-dialog .tab-content .charsheet textarea { border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; } body .ui-dialog .tab-content .charsheet select, body .ui-dialog .tab-content .charsheet .sheet-pseudo-select span, body .ui-dialog .tab-content .charsheet .pseudo-select span { -webkit-apperance: none; appearance: none; text-transform: var(--selectTextTransform); overflow: hidden !important; white-space: nowrap; text-overflow: var(--selectTextOverflow); text-align: var(--selectTextAlign); color: var(--selectColor); } body .ui-dialog .tab-content .charsheet input { width: auto; } body .ui-dialog .tab-content .charsheet input:placeholder { color: var(--placeholderColor); } body .ui-dialog .tab-content .charsheet input.plus-control:not([value*="-"]) + span:before { content: "+"; } body .ui-dialog .tab-content .charsheet textarea { resize: var(--textareaResize); white-space: pre-wrap; } body .ui-dialog .tab-content .charsheet textarea.fixed { resize: none; overflow: auto; } body .ui-dialog .tab-content .charsheet button { cursor: pointer; } body .ui-dialog .tab-content .charsheet .roller { display: flex; align-items: center; gap: var(--half-gap); } body .ui-dialog .tab-content .charsheet .roller:before { content: "T"; font-family: dicefontd20; } body .ui-dialog .tab-content .charsheet .collapse-container { display: grid; position: relative; } body .ui-dialog .tab-content .charsheet .text-collapse { cursor: pointer; display: flex; justify-content: flex-start; align-items: center; } body .ui-dialog .tab-content .charsheet .text-collapse:before { content: var(--expandedSymbol); font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: var(--icon-size); /* Preferred icon size */ } body .ui-dialog .tab-content .charsheet .text-collapse__text { display: inline; } body .ui-dialog .tab-content .charsheet .text-collapse__check:not(:checked) + .text-collapse { border-width: 1px 3px; border-style: solid; border-color: var(--borderColor); border-radius: 5px; box-sizing: border-box; } body .ui-dialog .tab-content .charsheet .text-collapse__check:checked + .text-collapse:before { content: var(--collapsedSymbol); } body .ui-dialog .tab-content .charsheet .repitem:hover > .collapse, body .ui-dialog .tab-content .charsheet .repitem:hover .roll-container, body .ui-dialog .tab-content .charsheet .collapse-container:hover > .collapse, body .ui-dialog .tab-content .charsheet .collapse-container:hover .roll-container { opacity: var(--collapseHoverOpacity); } body .ui-dialog .tab-content .charsheet .repitem > .collapse, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse { opacity: var(--collapseBaseOpacity); position: absolute; right: -10px; top: 0px; border: 0px solid black; border-radius: 0; color: var(--collapseExpandedColor); text-transform: none; background-color: transparent; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:before, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:before { content: "y"; font-family: pictos; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:checked, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked { color: var(--collapseCollapsedColor); background-color: transparent; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .expanded, body .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .collapse-container .expanded, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .expanded, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .collapse-container .expanded { display: none !important; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, body .ui-dialog .tab-content .charsheet .repitem > .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + *, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .expanded--empty:is(:not([value]), [value=""]) + *, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:checked ~ .collapse-container ~ .expanded--empty:is(:not([value]), [value=""]) + * { display: none !important; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:not(:checked) ~ .collapsed, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:not(:checked) ~ .collapsed { display: none !important; } body .ui-dialog .tab-content .charsheet .repitem > .collapse:hover, body .ui-dialog .tab-content .charsheet .collapse-container > .collapse:hover { color: var(--collapseExpandedColor); } body .ui-dialog .tab-content .charsheet .repcontainer.editmode .collapse { display: none; } body .ui-dialog .tab-content .charsheet .fill-left { display: var(--fillLeftDisplay); align-self: var(--fillLeftAlignment); box-sizing: border-box; } body .ui-dialog .tab-content .charsheet .fill-left__radio { appearance: none; -webkit-appearance: none; background-color: var(--fillLeftSelectedColor); width: 100%; height: 100%; cursor: pointer; } body .ui-dialog .tab-content .charsheet .fill-left__radio[data-value]:checked:before { content: attr(data-value); color: var(--fillLeftDataColor); font-size: var(--fillLeftDataSize); place-self: center; text-transform: var(--fillLeftDataTransform); } body .ui-dialog .tab-content .charsheet .fill-left__radio:checked ~ .fill-left__radio { background-color: var(--fillLeftUnselectedColor); } body .ui-dialog .tab-content .charsheet .input-label { display: inline-flex; gap: var(--input-label-gap); align-items: center; } body .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > input[type=text] { flex: 1 1 0; } body .ui-dialog .tab-content .charsheet .input-label:not(.stacked) > :not([name]) { flex: 0 0 auto; } body .ui-dialog .tab-content .charsheet .input-label > :is(span, button) { text-transform: var(--input-label-text-transform); } body .ui-dialog .tab-content .charsheet .input-label--dual { grid-template-columns: 1fr auto 1fr; grid-template-areas: "over over over" "under under under"; } body .ui-dialog .tab-content .charsheet .input-label--dual > span:last-of-type { grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .input-label--dual > input:not([type=number]):not([type=checkbox]):not([type=radio]) { width: 100%; } body .ui-dialog .tab-content .charsheet .input-label--dual > .slash { line-height: 0rem; font-weight: normal; } body .ui-dialog .tab-content .charsheet .headed-textarea { display: grid; grid-template-rows: auto 1fr; grid-template-columns: auto; grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .headed-textarea :not(textarea):not(.adaptive) { justify-self: start; } body .ui-dialog .tab-content .charsheet .headed-textarea .headed-textarea__header { grid-area: initial; } body .ui-dialog .tab-content .charsheet .adaptive { display: grid; grid-template-columns: auto; grid-template-rows: auto; grid-template-areas: "content"; position: relative; } body .ui-dialog .tab-content .charsheet .adaptive > * { grid-area: content; } body .ui-dialog .tab-content .charsheet .adaptive > span { opacity: 0; z-index: -10; border-width: 1px 3px; border-style: solid; border-radius: 5px; border-color: transparent; box-sizing: border-box; text-transform: initial; border-radius: 0px; } body .ui-dialog .tab-content .charsheet .adaptive--text { min-height: 4rem; } body .ui-dialog .tab-content .charsheet .adaptive--text__span { white-space: pre-wrap; padding: 2px; } body .ui-dialog .tab-content .charsheet .adaptive--text__textarea { width: 100%; height: 100%; resize: none; } body .ui-dialog .tab-content .charsheet .adaptive--text__textarea, body .ui-dialog .tab-content .charsheet .adaptive--input__input { position: absolute; } body .ui-dialog .tab-content .charsheet .adaptive--input__input { width: 100%; } body .ui-dialog .tab-content .charsheet .adaptive--input__span { padding: 2px; min-height: 1.5rem; } body .ui-dialog .tab-content .charsheet .repitem > input:not([type=checkbox]) { width: 100%; } body .ui-dialog .tab-content .charsheet .repitem .headed-textarea, body .ui-dialog .tab-content .charsheet .repitem .description { grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .repcontainer { display: grid; gap: var(--normal-gap); } body .ui-dialog .tab-content .charsheet .repeating-container { display: grid; grid-template-areas: "header"; align-self: start; } body .ui-dialog .tab-content .charsheet .repeating-container > .header { grid-area: header; } body .ui-dialog .tab-content .charsheet .repeating-container :is(.repcontrol-button, .repcontrol_edit) { opacity: 0; transition: var(--revealTrans); } body .ui-dialog .tab-content .charsheet .repeating-container:is(:hover, :focus-within, :focus) :is(.repcontrol-button, .repcontrol_edit) { opacity: 1; } body .ui-dialog .tab-content .charsheet .repcontrol-button { align-self: start; } body .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol { justify-self: end; z-index: 100; } body .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol > .repcontrol_add { display: none !important; } body .ui-dialog .tab-content .charsheet .repcontrol-button--add { justify-self: start; width: 15px; height: 15px; padding: 4px; font-size: 0; color: var(--col-alt); border: 1px solid var(--col-alt); } body .ui-dialog .tab-content .charsheet .repcontrol-button--add::before { inset: 0; place-self: center; font-family: var(--font-icon); font-size: 12px; content: "add"; } body .ui-dialog .tab-content .charsheet::after { position: absolute; content: ""; inset: calc(var(--_margin) * -1); background: radial-gradient(ellipse at center, hsl(30, 60%, 95%) 0%, hsl(17, 3%, 65%) 100%), var(--paper_texture); background-blend-mode: overlay, normal; mix-blend-mode: multiply; pointer-events: none; } body .ui-dialog .tab-content .charsheet .material-icons { font-family: "Material Icons" !important; text-transform: none !important; } body .ui-dialog .tab-content .charsheet [hidden] { display: none !important; } body .ui-dialog .tab-content .charsheet .justify-self-center { justify-self: center; } body .ui-dialog .tab-content .charsheet .justify-end { justify-content: end; } body .ui-dialog .tab-content .charsheet .size1 { font-size: var(--size1); } body .ui-dialog .tab-content .charsheet .size2 { font-size: var(--size2); } body .ui-dialog .tab-content .charsheet .size3 { font-size: var(--size3); } body .ui-dialog .tab-content .charsheet .size4 { font-size: var(--size4); } body .ui-dialog .tab-content .charsheet .size5 { font-size: var(--size5); } body .ui-dialog .tab-content .charsheet .size6 { font-size: var(--size6); } body .ui-dialog .tab-content .charsheet .size7 { font-size: var(--size7); } body .ui-dialog .tab-content .charsheet h1, body .ui-dialog .tab-content .charsheet h2, body .ui-dialog .tab-content .charsheet .input-label:not(.stacked).large > [name], body .ui-dialog .tab-content .charsheet h3, body .ui-dialog .tab-content .charsheet h4, body .ui-dialog .tab-content .charsheet h5, body .ui-dialog .tab-content .charsheet h6, body .ui-dialog .tab-content .charsheet [aria-level="1"], body .ui-dialog .tab-content .charsheet [aria-level="2"], body .ui-dialog .tab-content .charsheet [aria-level="3"], body .ui-dialog .tab-content .charsheet [aria-level="4"], body .ui-dialog .tab-content .charsheet [aria-level="5"], body .ui-dialog .tab-content .charsheet [aria-level="6"] { color: inherit; } body .ui-dialog .tab-content .charsheet .number { width: 3rem !important; text-align: center; } body .ui-dialog .tab-content .charsheet .disabled { display: none !important; } body .ui-dialog .tab-content .charsheet .column-subgrid { display: grid !important; grid-template-columns: subgrid; } body .ui-dialog .tab-content .charsheet .column-section { grid-row: span 2; } body .ui-dialog .tab-content .charsheet .full-width-number.full-width-number { box-sizing: border-box; min-width: 100%; } body .ui-dialog .tab-content .charsheet .icon-roller:before { content: "t" !important; } body .ui-dialog .tab-content .charsheet .colon:after { content: ":"; } body .ui-dialog .tab-content .charsheet .bold { font-weight: bold; } body .ui-dialog .tab-content .charsheet .collapse.collapse { right: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet textarea { border-radius: 0; } body .ui-dialog .tab-content .charsheet .avoid-break-inside { break-inside: avoid; } body .ui-dialog .tab-content .charsheet .paragraph { white-space: pre-wrap; } body .ui-dialog .tab-content .charsheet .view-only .repcontrol-button, body .ui-dialog .tab-content .charsheet .view-only .repcontrol_edit, body .ui-dialog .tab-content .charsheet .view-only .repcontrol_add { display: none; } body .ui-dialog .tab-content .charsheet .repcontrol-button--add { grid-area: add; place-self: center start; } body .ui-dialog .tab-content .charsheet .repcontrol-button--add ~ .repcontrol { grid-area: edit; place-self: center end; } body .ui-dialog .tab-content .charsheet :where(.border-back, .sheet-border-back) { background-image: var(--border_bg_sm), var(--border_bg_lg); background-repeat: repeat; background-color: var(--backColor); } body .ui-dialog .tab-content .charsheet :where(.border-back, .sheet-border-back) > :where(*) { background: var(--backColor); } body .ui-dialog .tab-content .charsheet .border-back-container { background-color: var(--backColor); } body .ui-dialog .tab-content .charsheet .border-back-interior, body .ui-dialog .tab-content .charsheet .sheet-border-back-interior, body .ui-dialog .tab-content .charsheet span.border-back-interior ~ .repcontainer { position: relative; background-color: var(--backColor); z-index: 1; gap: 2px; } body .ui-dialog .tab-content .charsheet .border-back-interior::before, body .ui-dialog .tab-content .charsheet .sheet-border-back-interior::before, body .ui-dialog .tab-content .charsheet span.border-back-interior ~ .repcontainer::before { content: ""; position: absolute; inset: 0; background-image: var(--border_bg_sm), var(--border_bg_lg); background-repeat: repeat; background-color: var(--backColor); opacity: 0.4; z-index: -1; } body .ui-dialog .tab-content .charsheet .border-back-interior > *, body .ui-dialog .tab-content .charsheet .sheet-border-back-interior > *, body .ui-dialog .tab-content .charsheet span.border-back-interior ~ .repcontainer > * { z-index: 1; } body .ui-dialog .tab-content .charsheet .border-back-interior .repitem, body .ui-dialog .tab-content .charsheet .sheet-border-back-interior .repitem, body .ui-dialog .tab-content .charsheet span.border-back-interior ~ .repcontainer .repitem { position: relative; background-color: var(--backColor); z-index: 1; } body .ui-dialog .tab-content .charsheet .border-back-interior .repitem::before, body .ui-dialog .tab-content .charsheet .sheet-border-back-interior .repitem::before, body .ui-dialog .tab-content .charsheet span.border-back-interior ~ .repcontainer .repitem::before { content: ""; position: absolute; inset: 0; background-image: var(--border_bg_sm), var(--border_bg_lg); background-repeat: repeat; background-color: var(--backColor); opacity: 0.4; z-index: -1; } body .ui-dialog .tab-content .charsheet .border-back-interior .repitem > *, body .ui-dialog .tab-content .charsheet .sheet-border-back-interior .repitem > *, body .ui-dialog .tab-content .charsheet span.border-back-interior ~ .repcontainer .repitem > * { z-index: 1; } body .ui-dialog .tab-content .charsheet .border-back-interior .repitem > *:not(.expanded), body .ui-dialog .tab-content .charsheet .sheet-border-back-interior .repitem > *:not(.expanded), body .ui-dialog .tab-content .charsheet span.border-back-interior ~ .repcontainer .repitem > *:not(.expanded) { background-color: var(--backColor); } body .ui-dialog .tab-content .charsheet h3, body .ui-dialog .tab-content .charsheet h4 { font-family: var(--topHeadFont); font-weight: bold; color: var(--fontColor); display: flex; align-items: center; padding: 0 var(--half-gap); } body .ui-dialog .tab-content .charsheet h3 { text-shadow: 2px 1px var(--backColor); } body .ui-dialog .tab-content .charsheet h4 { font-size: 1em; text-transform: uppercase; } body .ui-dialog .tab-content .charsheet textarea { font-family: var(--contentHeadFont); font-size: 1.25em; line-height: 1; color: var(--colPen); } body .ui-dialog .tab-content .charsheet section:hover button, body .ui-dialog .tab-content .charsheet input:hover, body .ui-dialog .tab-content .charsheet textarea:hover { background: var(--highlightColor); } body .ui-dialog .tab-content .charsheet select { padding: 2px 8px; } body .ui-dialog .tab-content .charsheet input:where(:not([class*=clock])) { font-family: var(--contentHeadFont); font-size: 1.25em; line-height: 1; color: var(--colPen); } body .ui-dialog .tab-content .charsheet input:where(:not([class*=clock]))[type=number], body .ui-dialog .tab-content .charsheet input:where(:not([class*=clock])).number { font-size: 1.5em; font-weight: bolder; padding: 0; } body .ui-dialog .tab-content .charsheet input:where(:not([class*=clock])):placeholder-shown { font-family: var(--midHeadFont); font-size: 1em; font-weight: normal; font-style: italic; height: unset; } body .ui-dialog .tab-content .charsheet input:where(:not([class*=clock])):not(.equip-checkbox)[type=checkbox], body .ui-dialog .tab-content .charsheet input:where(:not([class*=clock]))[type=radio] { display: grid; place-content: center; } body .ui-dialog .tab-content .charsheet select { background: var(--bgColor); color: var(--colPen); font-family: var(--midHeadFont); } body .ui-dialog .tab-content .charsheet input:is([readonly], [disabled]) { background: color-mix(in lch, var(--colHeaderBack) 30%, var(--backColor)); color: var(--fontColor); font-family: var(--topHeadFont); font-size: 1em; height: unset; border-radius: unset; } body .ui-dialog .tab-content .charsheet .input-label > span { --input-label-text-transform: uppercase; font-family: var(--midHeadFont); color: var(--redColor); padding-left: var(--inputLeftPadding); } body .ui-dialog .tab-content .charsheet .adaptive--text { height: 100%; } body .ui-dialog .tab-content .charsheet .adaptive .adaptive--text__span { font-family: var(--contentHeadFont); font-size: 1.25em; font-weight: bold; line-height: 1; } body .ui-dialog .tab-content .charsheet .repitem { background-color: white; } body .ui-dialog .tab-content .charsheet .repitem .itemcontrol { z-index: 99 !important; background: unset !important; } body .ui-dialog .tab-content .charsheet .repitem > input[type=checkbox].collapse.collapse { --collapse-expanded-color: var(--fontColor); visibility: hidden; background: hsl(350, 100%, 75%); border: 2px solid var(--redColor); border-width: 0 0 0 2px; right: 2px; translate: calc(100% + var(--inputLeftPadding)); width: 0; min-width: 0; height: 1.5rem; border-radius: 0 1em 1em 0; padding: 0 var(--tiny-gap); transition: width 0.2s ease-out, opacity 0.1s linear; z-index: 10; } body .ui-dialog .tab-content .charsheet .repitem > input[type=checkbox].collapse.collapse::before { position: static; text-align: right; font-family: "material icons"; font-size: 1.25em; color: var(--redColor); font-weight: normal; content: "visibility_off"; } body .ui-dialog .tab-content .charsheet .repitem > input[type=checkbox].collapse.collapse:checked::before { content: "visibility"; } body .ui-dialog .tab-content .charsheet .repitem:is(:hover, :focus-within) > input[type=checkbox].collapse.collapse { visibility: visible; width: 1.75rem; } body .ui-dialog .tab-content .charsheet .repitem > input[type=checkbox].collapse.collapse:is(:hover, :focus-visible) { visibility: visible; width: 1.75rem; opacity: 1; } body .ui-dialog .tab-content .charsheet .repcontrol .repcontrol_edit { padding: 0 4px; } body .ui-dialog .tab-content .charsheet .repcontrol-button { display: grid; width: auto; height: auto; } body .ui-dialog .tab-content .charsheet .repcontrol-button:before { font-size: 16px; } body .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol .repcontrol_edit { display: grid; grid-template-columns: 0 auto; color: transparent; overflow: hidden; padding: 4px; } body .ui-dialog .tab-content .charsheet .repcontrol-button ~ .repcontrol .repcontrol_edit:after { content: "edit"; font-family: "Material Icons"; color: var(--fontColor); } body .ui-dialog .tab-content .charsheet .repcontrol_del { color: color-mix(in lch, var(--redColor) 80%, white); } body .ui-dialog .tab-content .charsheet button[type=roll]:before { content: none; } body .ui-dialog .tab-content .charsheet button:hover { background: var(--pinkColor); } body .ui-dialog .tab-content .charsheet .embossed.embossed { clip-path: polygon(0% 0%, 19% 0%, 46% 3%, 77% 0%, 100% 0%, 100% 100%, 81% 99%, 70% 100%, 54% 98%, 28% 100%, 13% 98%, 1% 100%, 2px 72%, 1px 25%); border-radius: 0.2em; padding: 2px 8px; height: 100%; text-transform: uppercase !important; color: white; background: linear-gradient(to right, color-mix(in lch, var(--dieBlack) 80%, var(--parchmentColor)) 20%, var(--dieBlack), color-mix(in lch, var(--dieBlack) 80%, var(--parchmentColor)) 100%); font-family: var(--embossedFont); text-shadow: -1px 1px 1px var(--dieBlack), -2px 2px 2px var(--parchmentColor), 2px 2px 2px var(--parchmentColor); } body .ui-dialog .tab-content .charsheet .embossed.embossed:hover { color: var(--pinkColor); text-shadow: -1px 1px 1px var(--dieBlack), -2px 2px 2px var(--pinkColor), 2px 2px 2px var(--pinkColor); } body .ui-dialog .tab-content .charsheet .embossed.embossed span:empty:after { content: "????"; } body .ui-dialog .tab-content .charsheet .display-control:not(:checked) + .controlled-display { display: none; } body .ui-dialog .tab-content .charsheet .display-control--inverted:checked + .controlled-display { display: none; } body .ui-dialog .tab-content .charsheet .display-control--non-zero:is([value="0"], :not([value]), [value=""]) + .controlled-display { display: none; } body .ui-dialog .tab-content .charsheet .display-control--zero:not([value="0"], :not([value]), [value=""]) + .controlled-display { display: none; } body .ui-dialog .tab-content .charsheet .inline-fieldset-container { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--half-gap); } body .ui-dialog .tab-content .charsheet .inline-fieldset-container .repcontainer { order: 2; display: inline-flex; flex-wrap: wrap; gap: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .inline-fieldset-container .repcontainer .repitem { display: flex; } body .ui-dialog .tab-content .charsheet .inline-fieldset-container .repcontrol-button, body .ui-dialog .tab-content .charsheet .inline-fieldset-container .repcontrol { align-self: start; } body .ui-dialog .tab-content .charsheet .collapsed .inline-fieldset-container .repitem:not(:last-child):after { content: ","; } body .ui-dialog .tab-content .charsheet .tabs__nav-list { background: white; margin: unset; margin-bottom: 2px; justify-content: flex-start; flex-wrap: wrap; align-items: center; } body .ui-dialog .tab-content .charsheet .tabs__nav-list .tabs__nav-item button { font-family: var(--topHeadFont); text-transform: uppercase; font-weight: bold; padding: 0 1em; font-size: inherit; border: 2px solid transparent; border-width: 2px 0 0 0; } body .ui-dialog .tab-content .charsheet .tabs__nav-list .tabs__nav-item button:hover { border: 2px solid var(--redColor); border-width: 2px 0 0 0; } body .ui-dialog .tab-content .charsheet .header, body .ui-dialog .tab-content .charsheet .sheet-header { display: flex; flex-wrap: wrap; position: relative; } body .ui-dialog .tab-content .charsheet .header::before, body .ui-dialog .tab-content .charsheet .sheet-header::before { content: ""; position: absolute; inset: 0; background-color: color-mix(in lch, var(--colHeaderBack) 30%, var(--backColor)); z-index: -1; } body .ui-dialog .tab-content .charsheet .head-section, body .ui-dialog .tab-content .charsheet .sheet-head-section { display: grid; grid-template-rows: auto 1fr; gap: 2px; } body .ui-dialog .tab-content .charsheet .section-content { background: var(--backColor); display: grid; align-content: start; } body .ui-dialog .tab-content .charsheet .sub-header { flex: 1; justify-content: end; } body .ui-dialog .tab-content .charsheet .red-border.red-border, body .ui-dialog .tab-content .charsheet .rep-red-border.rep-red-border + fieldset + .repcontainer, body .ui-dialog .tab-content .charsheet .conditional-red-control:checked + .conditional-red-border, body .ui-dialog .tab-content .charsheet .sheet-red-border { --_borderWidth: 2px; --_redSlice: 15; border-color: var(--redColor); border-width: 0; border-image-source: var(--redBorder); border-image-slice: var(--_redSlice); border-image-width: var(--_borderWidth); border-image-repeat: repeat; border-style: solid; box-sizing: border-box; } body .ui-dialog .tab-content .charsheet .red-border.red-border--mid, body .ui-dialog .tab-content .charsheet .rep-red-border.rep-red-border + fieldset + .repcontainer--mid, body .ui-dialog .tab-content .charsheet .conditional-red-control:checked + .conditional-red-border--mid, body .ui-dialog .tab-content .charsheet .sheet-red-border--mid { --_borderWidth: 2px; } body .ui-dialog .tab-content .charsheet .red-border.red-border--thick, body .ui-dialog .tab-content .charsheet .rep-red-border.rep-red-border + fieldset + .repcontainer--thick, body .ui-dialog .tab-content .charsheet .conditional-red-control:checked + .conditional-red-border--thick, body .ui-dialog .tab-content .charsheet .sheet-red-border--thick { --_borderWidth: 4px; } body .ui-dialog .tab-content .charsheet .red-border.red-border:is([type=radio], [type=checkbox]), body .ui-dialog .tab-content .charsheet .rep-red-border.rep-red-border + fieldset + .repcontainer:is([type=radio], [type=checkbox]), body .ui-dialog .tab-content .charsheet .conditional-red-control:checked + .conditional-red-border:is([type=radio], [type=checkbox]), body .ui-dialog .tab-content .charsheet .sheet-red-border:is([type=radio], [type=checkbox]) { cursor: pointer; --_size: 30px; box-sizing: border-box; width: var(--_size); height: var(--_size); } body .ui-dialog .tab-content .charsheet .red-border.red-border:is([type=radio], [type=checkbox]):checked::before, body .ui-dialog .tab-content .charsheet .rep-red-border.rep-red-border + fieldset + .repcontainer:is([type=radio], [type=checkbox]):checked::before, body .ui-dialog .tab-content .charsheet .conditional-red-control:checked + .conditional-red-border:is([type=radio], [type=checkbox]):checked::before, body .ui-dialog .tab-content .charsheet .sheet-red-border:is([type=radio], [type=checkbox]):checked::before { content: var(--checkContent); grid-area: content; font-weight: var(--checkWeight); place-self: start center; color: var(--checkColor); font-size: var(--checkSize); line-height: var(--checkLineHeight); } body .ui-dialog .tab-content .charsheet .red-box.red-box, body .ui-dialog .tab-content .charsheet .sheet-red-box, body .ui-dialog .tab-content .charsheet .conditional-red-control:checked + .conditional-red-box { --_trans: 45%; --_color: color-mix(in lch, var(--redColor) var(--_trans), transparent); border-image-slice: var(--_redSlice); background-image: var(--border_bg_sm), var(--border_bg_lg), linear-gradient(var(--_color), var(--_color)); background-repeat: repeat; background-attachment: fixed; } body .ui-dialog .tab-content .charsheet .input-label.stacked { width: 100%; } body .ui-dialog .tab-content .charsheet .input-label.stacked > .adaptive { align-self: stretch; } body .ui-dialog .tab-content .charsheet .input-label { background: var(--backColor); gap: 0 var(--input-label-gap); } body .ui-dialog .tab-content .charsheet .ability-skill-entry { padding: var(--tiny-gap); justify-content: start; gap: var(--half-gap); } body .ui-dialog .tab-content .charsheet .clock { display: inline-grid; grid-template-areas: "content"; place-items: center; border: 2px dashed var(--redColor); border-radius: 100%; width: var(--_clockSize); height: var(--_clockSize); overflow: hidden; box-sizing: border-box; background-color: var(--redColor); } body .ui-dialog .tab-content .charsheet .clock:not(:hover, :focus-within) .clock__number { opacity: 0; } body .ui-dialog .tab-content .charsheet .clock > * { grid-area: content; } body .ui-dialog .tab-content .charsheet .clock:not(:has(.clock__control:checked)) .clock__segment:before { background-color: var(--parchmentColor) !important; } body .ui-dialog .tab-content .charsheet .clock__segment { --_segHeight: calc(var(--_clockSize) / 2); grid-area: content; position: relative; top: calc(var(--_segHeight) / 2 * -1); margin-left: auto; margin-right: auto; height: var(--_segHeight); width: var(--_sectionBase); rotate: var(--_rotation); transform-origin: bottom center; filter: drop-shadow(0 0 0 1px var(--redColor)); display: grid; } body .ui-dialog .tab-content .charsheet .clock__segment:before { content: "" !important; clip-path: polygon(0 0, 100% 0, 50% 100%); background-color: var(--redColor); width: var(--_sectionBase); place-self: stretch !important; } body .ui-dialog .tab-content .charsheet .clock__control:checked + .clock__segment ~ .clock__segment:before { background-color: var(--parchmentColor); } body .ui-dialog .tab-content .charsheet .clock__number.clock__number { width: 100%; height: 100%; color: gray; z-index: 10; } body .ui-dialog .tab-content .charsheet .repcontainer[data-groupname=repeating_npcs] .repitem button, body .ui-dialog .tab-content .charsheet .repcontainer[data-groupname=repeating_npcs] .npc-skill-edit button { text-align: end; text-transform: capitalize; font-weight: bold; } body .ui-dialog .tab-content .charsheet .no-gap { gap: 0; } body .ui-dialog .tab-content .charsheet .qty-span:not(:empty):after { content: "x"; } body .ui-dialog .tab-content .charsheet .equip-checkbox { display: grid; place-items: center; place-self: start center; margin: 0 var(--tiny-gap); width: 24px !important; height: 24px !important; } body .ui-dialog .tab-content .charsheet .equip-checkbox:before { content: "warehouse" !important; font-family: "Material Icons"; font-weight: normal; font-style: normal; font-size: var(--icon-size); /* Preferred icon size */ line-height: normal !important; font-weight: normal !important; color: var(--checkColor); } body .ui-dialog .tab-content .charsheet .equip-checkbox[title*=repeating_gear]:before { content: "front_hand" !important; font-size: 1.2em !important; } body .ui-dialog .tab-content .charsheet .equip-checkbox[title*=repeating_stored]:before { content: "inventory" !important; } body .ui-dialog .tab-content .charsheet .gear-display { grid-column: 2/-1; padding: 1px; gap: 1px; } body .ui-dialog .tab-content .charsheet .gear-display.expanded { display: grid; grid-template-columns: auto 1fr auto; } body .ui-dialog .tab-content .charsheet .gear-display > input { border-radius: 0; } body .ui-dialog .tab-content .charsheet .gear-display .gear-slots { align-items: center; } body .ui-dialog .tab-content .charsheet .equip-repeat { z-index: 1; } body .ui-dialog .tab-content .charsheet .equip-repeat:first-child { z-index: 2; } body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) { z-index: 2; rotate: 0deg; animation: rotateIn 0.1s ease-out forwards; } body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) input[type=text], body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) input[type=number], body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) select, body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) textarea { border-radius: 0; border: 2px solid var(--redColor); border-width: 0 0 2px 0; font-family: var(--contentHeadFont); font-weight: normal; font-size: 1.5em; color: var(--colPen); height: inherit; width: 100%; } body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) input[type=text]:hover, body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) input[type=text]:focus, body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) input[type=number]:hover, body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) input[type=number]:focus, body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) select:hover, body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) select:focus, body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) textarea:hover, body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) textarea:focus { background: unset; box-shadow: inset 0 0 2em var(--backColor), 0 0 1em var(--backColor); border-radius: 0; border: 2px solid var(--redColor); border-width: 0 0 2px 0; } body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded)) > *:not(.collapse) { background: unset; background-color: unset !important; } body .ui-dialog .tab-content .charsheet .repitem:where(:has(input.collapse:not(:checked)):has(.cardExpanded))::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: multiply; background: hsl(45, 95%, 50%); box-shadow: 4px 4px 5px hsl(25, 50%, 20%); } @keyframes rotateIn { 0% { rotate: 0deg; translate: -5px -5px; } 100% { rotate: -1deg; translate: 0px 0px; } } body .ui-dialog .tab-content .charsheet .cardExpanded { order: 1; grid-column: 0/-1; grid-row: 0/-1; background: #f1d689 !important; box-shadow: 4px 5px 5px rgba(0, 0, 0, 0.25); } body .ui-dialog .tab-content .charsheet input.collapse:not(:checked) ~ .cardExpanded ~ *, body .ui-dialog .tab-content .charsheet input.collapse:not(:checked) ~ .cardExpanded ~ * > * { background: unset !important; } body .ui-dialog .tab-content .charsheet .npc-gear .equip-checkbox { display: none; } body .ui-dialog .tab-content .charsheet .npc-gear .gear-display { background-image: unset; } body .ui-dialog .tab-content .charsheet .npc-gear .gear-display span { white-space: nowrap; } body .ui-dialog .tab-content .charsheet .npc-gear .gear-display.collapsed { display: flex; } body .ui-dialog .tab-content .charsheet .npc-gear .gear-display::after { content: unset; } body .ui-dialog .tab-content .charsheet .npc-gear .slots, body .ui-dialog .tab-content .charsheet .npc-gear .bonus { display: none; } body .ui-dialog .tab-content .charsheet .npc-gear .collapsed { display: flex; break-inside: avoid; } body .ui-dialog .tab-content .charsheet .npc-gear .expanded { display: grid; gap: 0; padding: var(--tiny-gap); grid-template-columns: auto auto 1fr auto; } body .ui-dialog .tab-content .charsheet .npc-skill-row { gap: var(--tiny-gap) var(--half-gap); align-items: center; } body .ui-dialog .tab-content .charsheet .npc-skill-row button { text-transform: capitalize; } body .ui-dialog .tab-content .charsheet .npc-skill-row button:hover { background-color: var(--pinkColor); } body .ui-dialog .tab-content .charsheet .npc-skill-edit { column-width: 200px; column-gap: var(--border-width); } body .ui-dialog .tab-content .charsheet .npc-skill-edit > .input-label { break-inside: avoid; width: 100%; margin-bottom: var(--border-width); } body .ui-dialog .tab-content .charsheet .npc-skill-display .roller { gap: 0; } body .ui-dialog .tab-content .charsheet .npc-skill-display .roller:has(~ .display-control:checked):after { content: ","; } body .ui-dialog .tab-content .charsheet .npc-weapon-section .repcontainer { align-items: start; } body .ui-dialog .tab-content .charsheet .npc-weapon-section .repitem, body .ui-dialog .tab-content .charsheet .npc-weapon-section .weapon-details { display: grid; } body .ui-dialog .tab-content .charsheet .npc-weapon-section .collapsed.red-border { border-image-source: initial; border-image-slice: initial; border-image-width: initial; border-image-repeat: initial; } body .ui-dialog .tab-content .charsheet .npc-weapon-section .view-only input.collapse { display: none; } body .ui-dialog .tab-content .charsheet .npc-weapon-section:not(.view-only) .repcontainer { gap: var(--big-gap); } body .ui-dialog .tab-content .charsheet .npc-weapon-section .repitem:has(.collapse:not(:checked)) { display: grid; grid-template-columns: 1fr repeat(3, 40px); column-gap: var(--normal-gap); } body .ui-dialog .tab-content .charsheet .npcDescriptionEdit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--tiny-gap); margin: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .npcDescriptionView { display: grid; grid-template-rows: auto 1fr; grid-template-columns: 1fr 1fr; grid-auto-flow: column; gap: var(--tiny-gap); margin: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .npcDescriptionView h4 { margin: 0; padding: 0; } body .ui-dialog .tab-content .charsheet .npcDescriptionView span { margin-right: var(--normal-gap); } @container walking-dead (max-width: 500px) { body .ui-dialog .tab-content .charsheet .npcDescriptionEdit { display: grid; grid-template-columns: 1fr; gap: var(--tiny-gap); margin: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .npcDescriptionView { display: grid; grid-template-rows: auto; grid-template-columns: 1fr; grid-auto-flow: row; } } body .ui-dialog .tab-content .charsheet .haven-npc-content { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "rep rep rep" "add . edit"; } body .ui-dialog .tab-content .charsheet .haven-npc-content .repcontainer { display: block; grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .haven-npc-content .repcontainer .repitem { display: grid; grid-template-columns: 1fr auto; break-inside: avoid; } body .ui-dialog .tab-content .charsheet .haven-npc-content .expanded { display: grid; grid-template-columns: 1fr 1fr; } body .ui-dialog .tab-content .charsheet .haven-npc-content .npc-skill-container { grid-column: 1/-1; gap: var(--border-width); } body .ui-dialog .tab-content .charsheet .haven-npc-content .collapse { right: auto; } body .ui-dialog .tab-content .charsheet .haven-npc-content .repcontrol-button--add { grid-area: add; } body .ui-dialog .tab-content .charsheet .haven-npc-content .repcontrol { grid-area: edit; } body .ui-dialog .tab-content .charsheet .haven-info-section { display: grid; gap: var(--border-width); grid-template-areas: "logo description" "name description" "faction description" "capacity projects" "defense projects" "issues projects" "npc npc"; } body .ui-dialog .tab-content .charsheet .haven-info-section .logo { grid-area: logo; } body .ui-dialog .tab-content .charsheet .haven-info-section .name { grid-area: name; } body .ui-dialog .tab-content .charsheet .haven-info-section .capacity { grid-area: capacity; } body .ui-dialog .tab-content .charsheet .haven-info-section .defense { grid-area: defense; } body .ui-dialog .tab-content .charsheet .haven-info-section .issues { grid-area: issues; } body .ui-dialog .tab-content .charsheet .haven-info-section .haven-info-description { grid-area: description; } body .ui-dialog .tab-content .charsheet .haven-info-section .haven-project-section { grid-area: projects; } @container walking-dead (min-width: 450px) { body .ui-dialog .tab-content .charsheet .haven-info-section { grid-template-columns: 1fr; grid-template-columns: minmax(200px, 1fr) 2fr; grid-template-rows: repeat(5, auto) 1fr; grid-template-areas: "logo description" "name description" "capacity description" "defense description" "issues description" "issues projects"; } } body .ui-dialog .tab-content .charsheet .haven-description-content .adaptive--text { min-height: 1.75rem; } body .ui-dialog .tab-content .charsheet .haven-project-content { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "rep rep rep" "add . edit"; background: white; } body .ui-dialog .tab-content .charsheet .haven-project-content .repcontrol-button--add { grid-area: add; } body .ui-dialog .tab-content .charsheet .haven-project-content .repcontrol { grid-area: edit; } body .ui-dialog .tab-content .charsheet .haven-project-content .repcontainer { display: block; grid-column: 1/-1; gap: var(--border-width); } body .ui-dialog .tab-content .charsheet .haven-project-content .repitem { break-inside: avoid; display: grid; grid-template-columns: 1fr 2fr; margin-bottom: var(--border-width); } body .ui-dialog .tab-content .charsheet .haven-project-content .repitem::before { background: hsl(202, 100%, 80%) !important; } body .ui-dialog .tab-content .charsheet .stored-gear-section.stored-gear-section, body .ui-dialog .tab-content .charsheet .haven-stored-gear.haven-stored-gear { padding: 0; } body .ui-dialog .tab-content .charsheet .haven-stored-gear { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: ". . ." "rep rep rep" "add . edit"; } body .ui-dialog .tab-content .charsheet .haven-stored-gear .repcontainer { grid-area: rep; } body .ui-dialog .tab-content .charsheet .haven-stored-gear .repcontrol-button--add { grid-area: add; } body .ui-dialog .tab-content .charsheet .haven-stored-gear .repcontrol { grid-area: edit; } body .ui-dialog .tab-content .charsheet .haven-stored-gear .repcontainer { grid-area: rep; display: block; column-width: 250px; column-gap: 0; } body .ui-dialog .tab-content .charsheet .haven-stored-gear .repitem { display: grid; grid-template-columns: auto auto auto 1fr auto; grid-column: 1/-1; break-inside: avoid; gap: 0; } body .ui-dialog .tab-content .charsheet .haven-stored-gear .repitem .equip-checkbox { padding-inline: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .haven-stored-gear .repitem .collapsed, body .ui-dialog .tab-content .charsheet .haven-stored-gear .repitem .expanded { gap: var(--border-width); } body .ui-dialog .tab-content .charsheet .haven-stored-gear .repitem .collapsed .gear-name-span { grid-column: span 2; } body .ui-dialog .tab-content .charsheet .challenge-section { display: grid; grid-template-columns: 1fr; } body .ui-dialog .tab-content .charsheet .challenge-section .repcontainer, body .ui-dialog .tab-content .charsheet .challenge-section .repitem { display: grid; grid-template-columns: subgrid; grid-column: 1/-1; gap: 0; } body .ui-dialog .tab-content .charsheet .challenge-content { grid-template-rows: auto auto; grid-template-areas: "rep rep" "add edit"; } body .ui-dialog .tab-content .charsheet .challenge-content .repcontrol-button--add { grid-area: add; place-self: center start; } body .ui-dialog .tab-content .charsheet .challenge-content .repcontrol { grid-area: edit; } body .ui-dialog .tab-content .charsheet .faction-endgame-section { display: grid; grid-template-columns: 1fr auto; } body .ui-dialog .tab-content .charsheet .faction-endgame-section .section-content { padding: var(--half-gap); } body .ui-dialog .tab-content .charsheet .faction-endgame-section .clock-container { display: grid; place-items: center; place-self: center; } body .ui-dialog .tab-content .charsheet .endgame-section { display: grid; grid-template-columns: 1fr auto; } body .ui-dialog .tab-content .charsheet .faction-section .repcontainer, body .ui-dialog .tab-content .charsheet .faction-section .repitem { display: grid; grid-template-columns: subgrid; grid-column: 1/-1; gap: 0; } body .ui-dialog .tab-content .charsheet .faction-content { grid-template-rows: auto auto; grid-template-areas: "rep rep" "add edit"; } body .ui-dialog .tab-content .charsheet .faction-content .repcontrol-button--add { grid-area: add; place-self: center start; } body .ui-dialog .tab-content .charsheet .faction-content .repcontrol { grid-area: edit; } body .ui-dialog .tab-content .charsheet .issue-section { display: grid; grid-template-columns: 1fr auto; } body .ui-dialog .tab-content .charsheet .issue-section .repcontainer, body .ui-dialog .tab-content .charsheet .issue-section .repitem { display: grid; grid-template-columns: subgrid; grid-column: 1/-1; gap: 0; } body .ui-dialog .tab-content .charsheet .issue-content { grid-template-rows: auto auto; grid-template-areas: "rep rep" "add edit"; } body .ui-dialog .tab-content .charsheet .issue-content .source { max-width: 100px; } body .ui-dialog .tab-content .charsheet .issue-content .repcontrol-button--add { grid-area: add; place-self: center start; } body .ui-dialog .tab-content .charsheet .issue-content .repcontrol { grid-area: edit; } body .ui-dialog .tab-content .charsheet .issue-content .clock-container { display: grid; place-items: center; } body .ui-dialog .tab-content .charsheet .npc-section { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto 1fr; grid-row: span 4; } body .ui-dialog .tab-content .charsheet .npc-section .logo { width: 100%; max-width: 300px; justify-self: center; } body .ui-dialog .tab-content .charsheet .npc-section .repcontainer, body .ui-dialog .tab-content .charsheet .npc-section .repitem { display: grid; grid-template-columns: subgrid; grid-column: 1/-1; gap: 0; } body .ui-dialog .tab-content .charsheet .npc-content { grid-template-rows: auto auto; grid-template-areas: "rep rep" "add edit"; } body .ui-dialog .tab-content .charsheet .npc-content .repcontrol-button--add { grid-area: add; place-self: center start; } body .ui-dialog .tab-content .charsheet .npc-content .repcontrol { grid-area: edit; } body .ui-dialog .tab-content .charsheet .rumors-section { display: grid; grid-template-columns: 1fr auto; } body .ui-dialog .tab-content .charsheet .rumors-section .repcontainer, body .ui-dialog .tab-content .charsheet .rumors-section .repitem { display: grid; grid-template-columns: subgrid; grid-column: 1/-1; gap: 0; } body .ui-dialog .tab-content .charsheet .rumors-content { grid-template-rows: auto auto; grid-template-areas: "rep rep" "add edit"; } body .ui-dialog .tab-content .charsheet .rumors-content .repcontrol-button--add { grid-area: add; place-self: center start; } body .ui-dialog .tab-content .charsheet .rumors-content .repcontrol { grid-area: edit; } body .ui-dialog .tab-content .charsheet .rumors-content .clock-container { display: grid; place-items: center; } body .ui-dialog .tab-content .charsheet .attributes-skills--section { container: attribute-skill/inline-size; grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .attributes-skills--content { display: grid; grid-template-columns: repeat(4, 1fr); } @container attribute-skill (max-width: 800px) { body .ui-dialog .tab-content .charsheet .attributes-skills--content { grid-template-columns: repeat(2, 1fr); } } @container attribute-skill (max-width: 460px) { body .ui-dialog .tab-content .charsheet .attributes-skills--content { grid-template-columns: 1fr; } } body .ui-dialog .tab-content .charsheet .ability-column { flex: 1; display: grid; } body .ui-dialog .tab-content .charsheet .ability-column > :first-child { background-color: color-mix(in lch, gray 20%, transparent); } body .ui-dialog .tab-content .charsheet .ability-column .input-label > :first-child { font-size: var(--size5); text-transform: capitalize; } body .ui-dialog .tab-content .charsheet .stored-repeat .location-input { grid-column: span 3; } body .ui-dialog .tab-content .charsheet .stored-repeat .collapsed .bonus { display: none; } body .ui-dialog .tab-content .charsheet .encumbrance-container { padding: var(--tiny-gap); text-transform: uppercase; } body .ui-dialog .tab-content .charsheet .pc-gear-header :first-child { justify-self: start; grid-column: 1/5; } body .ui-dialog .tab-content .charsheet .pc-gear-section { grid-column: span 2; grid-template-rows: auto auto 1fr; } @container walking-dead (max-width: 400px) { body .ui-dialog .tab-content .charsheet .pc-gear-section { grid-column: 1/-1; } } body .ui-dialog .tab-content .charsheet .pc-gear-content { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--half-gap); } @container walking-dead (max-width: 400px) { body .ui-dialog .tab-content .charsheet .pc-gear-content { grid-template-columns: 1fr; } } body .ui-dialog .tab-content .charsheet .equip-repeat { display: grid; align-content: start; grid-template-columns: auto minmax(2rem, auto) minmax(2rem, auto) 1fr auto; grid-template-rows: auto auto auto auto; grid-template-areas: "header header header header header" "encumb encumb encumb encumb encumb" "equiph equiph equiph equiph equiph" "equipped equipped equipped equipped equipped" "equipa . . . equipe"; } body .ui-dialog .tab-content .charsheet .equip-repeat .repcontrol-button { place-self: center; grid-area: equipa; } body .ui-dialog .tab-content .charsheet .equip-repeat .collapsed span { text-align: center; } body .ui-dialog .tab-content .charsheet .equip-repeat .gear-name-span { grid-column: span 2; } body .ui-dialog .tab-content .charsheet .equip-repeat .collapsed > :not(input) { padding: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .equip-repeat .collapsed > input { place-self: stretch; min-width: 100%; } body .ui-dialog .tab-content .charsheet .equip-repeat .repcontrol { place-self: center; grid-area: equipe; } body .ui-dialog .tab-content .charsheet .equip-repeat .input-label { padding: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .equip-repeat .repcontainer, body .ui-dialog .tab-content .charsheet .equip-repeat .repitem { display: grid; grid-template-columns: subgrid; grid-column: 1/-1; gap: 0; } body .ui-dialog .tab-content .charsheet .equip-repeat .repitem:not(:first-child) { margin-top: -1px; } body .ui-dialog .tab-content .charsheet .pc-info-section { display: grid; grid-column: 1/-1; grid-template-columns: 380px 1fr; gap: var(--border-width); grid-template-rows: auto auto auto auto auto 1fr; grid-template-areas: "logo name" "logo archetype" "logo description" "pc-anchor drive" "npc-anchor issues" "notes issues"; } body .ui-dialog .tab-content .charsheet .pc-info-section .logo { grid-area: logo; } body .ui-dialog .tab-content .charsheet .pc-info-section .name { grid-area: name; } body .ui-dialog .tab-content .charsheet .pc-info-section .archetype { grid-area: archetype; } body .ui-dialog .tab-content .charsheet .pc-info-section .drive { grid-area: drive; align-items: center; background: var(--backColor); } body .ui-dialog .tab-content .charsheet .pc-info-section .drive > label { flex: 1; } body .ui-dialog .tab-content .charsheet .pc-info-section .drive > input { margin: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .pc-info-section .pc-anchor { grid-area: pc-anchor; } body .ui-dialog .tab-content .charsheet .pc-info-section .npc-anchor { grid-area: npc-anchor; } body .ui-dialog .tab-content .charsheet .pc-info-section .description { grid-area: description; } body .ui-dialog .tab-content .charsheet .pc-info-section .issues { grid-area: issues; } body .ui-dialog .tab-content .charsheet .pc-info-section .notes { grid-area: notes; } @container walking-dead (min-width:600px) { body .ui-dialog .tab-content .charsheet .pc-info-section .description .adaptive > span { max-height: 6rem; } } @container walking-dead (max-width: 600px) { body .ui-dialog .tab-content .charsheet .pc-info-section { grid-template-columns: 1fr; grid-template-rows: auto; grid-template-areas: "logo" "name" "archetype" "drive" "pc-anchor" "npc-anchor" "description" "issues" "notes"; } } body .ui-dialog .tab-content .charsheet .critical-roller { place-self: center; } body .ui-dialog .tab-content .charsheet .pc-health-section { grid-template-rows: repeat(5, auto) 1fr; } body .ui-dialog .tab-content .charsheet .pc-health-section .section-content { display: grid; padding: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .pc-health-section .expanded { display: grid; grid-template-columns: 3fr 2fr auto; gap: var(--tiny-gap); grid-template-areas: "name name penalty" "limit recovery recovery"; } body .ui-dialog .tab-content .charsheet .pc-health-section .expanded .name { grid-area: name; } body .ui-dialog .tab-content .charsheet .pc-health-section .expanded .penalty { grid-area: penalty; } body .ui-dialog .tab-content .charsheet .pc-health-section .expanded .limit { grid-area: limit; } body .ui-dialog .tab-content .charsheet .pc-health-section .expanded .recovery { grid-area: recovery; } body .ui-dialog .tab-content .charsheet .injury-section { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; grid-template-areas: "repcontainer repcontainer repcontainer" "add . edit"; } body .ui-dialog .tab-content .charsheet .injury-section .repcontainer { grid-area: repcontainer; } body .ui-dialog .tab-content .charsheet .injury-section .repcontrol { grid-area: edit; } body .ui-dialog .tab-content .charsheet .injury-section .repcontrol-add { grid-area: add; } body .ui-dialog .tab-content .charsheet .talent-display { display: grid; gap: var(--tiny-gap); grid-area: display; padding: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .talent-section-content { --colPen: hsl(220, 50%, 50%); padding: var(--tiny-gap); display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto 1fr; grid-template-areas: "display display display" "add . edit" "rep rep rep"; background: #ecffb4; box-shadow: -4px 6px 5px hsla(25, 50%, 20%, 0.5); rotate: -1deg; translate: 2px 0; } body .ui-dialog .tab-content .charsheet .talent-section-content label { background: unset; } body .ui-dialog .tab-content .charsheet .talent-section-content .repcontainer { padding: var(--tiny-gap); grid-area: rep; min-height: 1rem; display: flex; flex-wrap: wrap; gap: var(--half-gap); align-content: baseline; } body .ui-dialog .tab-content .charsheet .talent-section-content .repcontainer button { padding-inline: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .talent-section-content .repcontrol-button--add { place-self: center; grid-area: add; } body .ui-dialog .tab-content .charsheet .talent-section-content .repcontrol_add { display: none !important; } body .ui-dialog .tab-content .charsheet .talent-section-content .repcontrol { place-self: center; grid-area: edit; } body .ui-dialog .tab-content .charsheet .pc-weapon-section, body .ui-dialog .tab-content .charsheet .pc-armor-section { display: grid; } body .ui-dialog .tab-content .charsheet .pc-armor-section { grid-template-columns: 1fr auto auto; } body .ui-dialog .tab-content .charsheet .pc-weapon-section { grid-template-columns: 1fr repeat(3, auto); } body .ui-dialog .tab-content .charsheet .pc-weapon-armor-container { grid-column: span 2; gap: var(--border-width); display: grid; grid-template-rows: auto 1fr; } @container walking-dead (max-width: 400px) { body .ui-dialog .tab-content .charsheet .pc-weapon-armor-container { grid-column: 1/-1; } } body .ui-dialog .tab-content .charsheet .pc-weapon-armor-container .header > :first-child { justify-self: start; } body .ui-dialog .tab-content .charsheet .pc-weapon-armor-container .header > * { padding-inline: var(--half-gap); } body .ui-dialog .tab-content .charsheet .pc-weapon-content .repcontainer, body .ui-dialog .tab-content .charsheet .pc-weapon-content .repitem { display: grid; grid-template-columns: subgrid; grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .pc-weapon-content .repcontainer > input:not([type=checkbox]), body .ui-dialog .tab-content .charsheet .pc-weapon-content .repitem > input:not([type=checkbox]) { width: 0; min-width: 100%; } body .ui-dialog .tab-content .charsheet .pc-weapon-content .repcontainer > span, body .ui-dialog .tab-content .charsheet .pc-weapon-content .repitem > span { padding: var(--inputPadding); box-sizing: border-box; vertical-align: middle; min-height: 26.85px; } body .ui-dialog .tab-content .charsheet .pc-weapon-content { grid-template-areas: "repcontainer repcontainer repcontainer repcontainer" "add . . edit"; z-index: 1; } body .ui-dialog .tab-content .charsheet .pc-weapon-content .repcontrol-button--add { grid-area: add; justify-self: center start; } body .ui-dialog .tab-content .charsheet .pc-weapon-content .repcontrol { grid-area: edit; place-self: center end; } body .ui-dialog .tab-content .charsheet .pc-weapon-content .repcontrol, body .ui-dialog .tab-content .charsheet .pc-weapon-content .repcontrol-button--add { padding-inline: var(--half-gap); } body .ui-dialog .tab-content .charsheet .pc-weapon-content .weapon-details { display: grid; grid-template-columns: auto 1fr; padding: var(--half-gap); } body .ui-dialog .tab-content .charsheet .pc-weapon-content .weapon-details .input-label:not(:first-child, :last-child) { justify-self: end; } body .ui-dialog .tab-content .charsheet .pc-weapon-content .summary-details { text-align: center; } body .ui-dialog .tab-content .charsheet .pc-weapon-content .expanded .icon-roller { margin-left: var(--half-gap); } body .ui-dialog .tab-content .charsheet .faction-page > :is(.collapsed, .expanded) { display: contents; } body .ui-dialog .tab-content .charsheet .faction-haven-container { display: grid; align-content: start; } body .ui-dialog .tab-content .charsheet .faction-haven-container .input-label { justify-self: start; } body .ui-dialog .tab-content .charsheet .faction-spacer { margin-bottom: var(--half-gap); } body .ui-dialog .tab-content .charsheet .brawl-table { grid-area: brawl; padding: var(--tiny-gap); margin: 0; display: block; column-width: 140px; --_rowBack: color-mix(in lch, var(--redColor) 20%, transparent); --_rowHeight: 22.85px; background: repeating-linear-gradient(180deg, var(--_rowBack), var(--_rowBack) var(--_rowHeight), transparent var(--_rowHeight), transparent calc(var(--_rowHeight) * 2)); background-position: top calc(var(--tiny-gap) + var(--_borderWidth)) right 0; } body .ui-dialog .tab-content .charsheet .brawl-table li { margin-left: 25px; text-transform: Uppercase; color: var(--redColor); } body .ui-dialog .tab-content .charsheet .swarm-situation { grid-area: situation; } body .ui-dialog .tab-content .charsheet .swarm-details { grid-area: size; display: grid; gap: var(--border-width); padding: var(--border-width); grid-template-columns: auto auto; grid-template-rows: auto auto; grid-template-areas: "threat walkers" "threat size"; } body .ui-dialog .tab-content .charsheet .swarm-details input:is([type=text], [type=number]) { background: white; border-image: unset; border: unset; } body .ui-dialog .tab-content .charsheet .swarm-details .swarm-size { grid-area: size; } body .ui-dialog .tab-content .charsheet .swarm-details .swarm-size:hover input { background: var(--highlightColor); } body .ui-dialog .tab-content .charsheet .swarm-details .swarm-threat { grid-area: threat; background: unset; isolation: isolate; } body .ui-dialog .tab-content .charsheet .swarm-details .swarm-threat span { align-self: self-start; } body .ui-dialog .tab-content .charsheet .swarm-details .swarm-threat input { font-size: 2.5em; color: var(--redColor); background: unset; } body .ui-dialog .tab-content .charsheet .swarm-details .swarm-walkers { grid-area: walkers; } body .ui-dialog .tab-content .charsheet .swarm-details .swarm-walkers input { color: var(--redColor); } body .ui-dialog .tab-content .charsheet .swarm-details .input-label.swarm-walkers, body .ui-dialog .tab-content .charsheet .swarm-details .input-label.swarm-size { padding: 0 var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .swarm-details .input-label.swarm-walkers input, body .ui-dialog .tab-content .charsheet .swarm-details .input-label.swarm-size input { text-align: center; width: 2.5em; flex: unset; font-size: 1.2em; } body .ui-dialog .tab-content .charsheet .swarm-info { grid-area: info; display: grid; grid-template-columns: auto auto; place-items: start center; text-align: center; } body .ui-dialog .tab-content .charsheet .threat-container { grid-area: threat; color: var(--dm-fontColor); border: 1em solid var(--lm-fontColor); border-radius: 100%; overflow: clip; width: 300px; aspect-ratio: 1/1; display: grid; filter: drop-shadow(0.2em 0.2em 0.3em hsla(0, 0%, 0%, 0.6)); grid-template-columns: auto auto auto; grid-template-rows: auto 0.25fr auto auto; grid-template-areas: ". attack ." ". . ." "minus number add" "head head head"; gap: var(--tiny-gap); place-content: start center; place-items: center; padding: var(--big-gap); box-sizing: border-box; background-color: #a81430; background-image: var(--walkerSign); background-repeat: no-repeat; background-position: 30% 10px; background-size: contain; } body .ui-dialog .tab-content .charsheet .threat-add { grid-area: add; line-height: normal; } body .ui-dialog .tab-content .charsheet .threat-attack { grid-area: attack; clip-path: polygon(0% 0%, 19% 0%, 46% 3%, 77% 0%, 100% 0%, 100% 100%, 81% 99%, 70% 100%, 54% 98%, 28% 100%, 13% 98%, 1% 100%, 2px 72%, 1px 25%); background: var(--pinkColor); padding: 2px 8px; } body .ui-dialog .tab-content .charsheet .threat-attack:hover { background: var(--highlightColor); } body .ui-dialog .tab-content .charsheet .threat-minus { grid-area: minus; line-height: normal; } body .ui-dialog .tab-content .charsheet .threat-number { grid-area: number; font-size: 6em; text-align: center; font-family: var(--contentHeadFont); line-height: 1; width: 100%; } body .ui-dialog .tab-content .charsheet .threat-head { grid-area: head; } body .ui-dialog .tab-content .charsheet .vehicle-attribute-section > .header { display: grid; } body .ui-dialog .tab-content .charsheet .vehicle-attribute-section > .header .sub-header { display: grid; background-color: color-mix(in lch, gray 30%, var(--backColor)); } body .ui-dialog .tab-content .charsheet .vehicle-attribute-section > .header .sub-header .input-label { background: none; } body .ui-dialog .tab-content .charsheet .vehicle-attribute-section > .section-content { display: flex; flex-wrap: wrap; gap: var(--tiny-gap) var(--half-gap); justify-content: space-around; padding: var(--half-gap); } body .ui-dialog .tab-content .charsheet .vehicle-attribute-section > .section-content > .issues { min-width: 300px; flex: 1; } body .ui-dialog .tab-content .charsheet .vehicle-weapons .weapon-details { display: grid; grid-template-columns: auto 1fr; gap: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .vehicle-weapons .weapon-details .adaptive { grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .pc-page { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: var(--border-width); } @container walking-dead (max-width: 600px) { body .ui-dialog .tab-content .charsheet .pc-page { grid-template-columns: 1fr 1fr; } } @container walking-dead (max-width: 400px) { body .ui-dialog .tab-content .charsheet .pc-page { grid-template-columns: 1fr; } } body .ui-dialog .tab-content .charsheet .inline-npc-view { gap: var(--tiny-gap) var(--normal-gap); padding: var(--tiny-gap); align-items: end; } body .ui-dialog .tab-content .charsheet .inline-npc-view h4, body .ui-dialog .tab-content .charsheet .inline-npc-view h3 { padding: 0; } body .ui-dialog .tab-content .charsheet .challenge-page { display: grid; grid-auto-flow: dense; gap: var(--border-width); } @container walking-dead (min-width: 600px) { body .ui-dialog .tab-content .charsheet .challenge-page { grid-template-columns: 2fr minmax(250px, 1fr); } } body .ui-dialog .tab-content .charsheet .faction-page { display: block; column-width: 300px; column-gap: var(--normal-gap); padding: var(--normal-gap); } body .ui-dialog .tab-content .charsheet .faction-page h2, body .ui-dialog .tab-content .charsheet .faction-page .input-label:not(.stacked).large > [name], body .ui-dialog .tab-content .charsheet .faction-page [aria-level="2"], body .ui-dialog .tab-content .charsheet .faction-page h3, body .ui-dialog .tab-content .charsheet .faction-page [aria-level="3"] { text-align: left; } body .ui-dialog .tab-content .charsheet .faction-page .faction-npc-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "head head" "rep rep" "add edit"; } body .ui-dialog .tab-content .charsheet .faction-page .faction-npc-container h3, body .ui-dialog .tab-content .charsheet .faction-page .faction-npc-container .repcontainer { grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .faction-page .faction-npc-container .repcontrol-button--add { grid-area: add; place-self: center start; } body .ui-dialog .tab-content .charsheet .faction-page .faction-npc-container .repcontrol { grid-area: edit; place-self: center end; } body .ui-dialog .tab-content .charsheet .faction-page .faction-npc-container .repitem .expanded { display: grid; grid-template-columns: 1fr 1fr; } body .ui-dialog .tab-content .charsheet .faction-page .faction-npc-container .repitem .expanded .npc-skill-container { grid-column: 1/-1; } body .ui-dialog .tab-content .charsheet .gm-section { padding: var(--normal-gap); display: grid; gap: var(--normal-gap); grid-template-columns: auto 1fr; grid-template-rows: repeat(3, auto) 1fr; grid-template-areas: "threat brawl" "threat situation" "threat size" "threat info"; align-items: start; } @container walking-dead (max-width: 600px) { body .ui-dialog .tab-content .charsheet .gm-section { grid-template-columns: 1fr; grid-template-areas: "threat" "situation" "info" "size"; } body .ui-dialog .tab-content .charsheet .gm-section .threat-container { place-self: center; } } body .ui-dialog .tab-content .charsheet .travel-page { display: grid; grid-template-columns: 1fr 2fr 2fr 3fr; grid-auto-flow: dense; gap: var(--border-width); } @container walking-dead (max-width: 700px) { body .ui-dialog .tab-content .charsheet .travel-page { grid-template-columns: 1fr 2fr 2fr; } } body .ui-dialog .tab-content .charsheet .tabs--walking-dead__container--vehicle { display: grid; gap: var(--border-width); } @container walking-dead (min-width: 500px) { body .ui-dialog .tab-content .charsheet .tabs--walking-dead__container--vehicle { grid-template-columns: 1fr auto; } body .ui-dialog .tab-content .charsheet .tabs--walking-dead__container--vehicle .vehicle-attribute-section { grid-column: 1/-1; } } body .ui-dialog .tab-content .charsheet .vehicle-crew .section-content { grid-template-columns: 1fr 1fr; grid-template-areas: ". ." "add edit"; } body .ui-dialog .tab-content .charsheet .vehicle-crew .section-content .repcontainer { grid-column: 1/-1; gap: var(--tiny-gap); } body .ui-dialog .tab-content .charsheet .setting-page { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } body .ui-dialog .tab-content .charsheet .logo { background: var(--_toggle, var(--backColor)); filter: invert(var(--_toggle, 0)); } body .ui-dialog .tab-content .charsheet .logo { background: var(--_toggle, var(--backColor)); filter: invert(var(--_toggle, 0)); } body .ui-dialog .tab-content .charsheet .logo { background: var(--_toggle, var(--backColor)); filter: invert(var(--_toggle, 0)); } body .ui-dialog .tab-content .charsheet .logo { background: var(--_toggle, var(--backColor)); filter: invert(var(--_toggle, 0)); } body .ui-dialog .tab-content .charsheet .travelInfo { grid-column: 1/-1; display: grid; grid-template-columns: 1fr 2fr; grid-auto-flow: dense; gap: var(--border-width); } body .ui-dialog .tab-content .charsheet .travel-log { background: var(--backColor); display: grid; grid-column: 1/-1; grid-template-columns: subgrid; grid-auto-flow: dense; gap: var(--border-width); } body .ui-dialog .tab-content .charsheet .travel-log [data-i18n=terrain] { grid-column: 2; } body .ui-dialog .tab-content .charsheet .travel-log [data-i18n=threat] { grid-column: 3; } body .ui-dialog .tab-content .charsheet .travel-log [data-i18n=comments] { grid-column: 4; } body .ui-dialog .tab-content .charsheet .travel-log .repcontainer, body .ui-dialog .tab-content .charsheet .travel-log .repcontrol, body .ui-dialog .tab-content .charsheet .travel-log .repitem { display: grid; grid-template-columns: subgrid; grid-column: 1/-1; gap: var(--border-width); } body .ui-dialog .tab-content .charsheet .travel-log .label-coordinates, body .ui-dialog .tab-content .charsheet .travel-log .label-date { grid-column: 1; } body .ui-dialog .tab-content .charsheet .travel-log textarea { grid-row: 1/span 2; } body .ui-dialog .tab-content .charsheet .travel-log textarea._terrain { grid-column: 2; } body .ui-dialog .tab-content .charsheet .travel-log textarea._threat { grid-column: 3; } body .ui-dialog .tab-content .charsheet .travel-log textarea._comments { grid-column: 4; } body .ui-dialog .tab-content .charsheet .travel-log .head-section.dynamic { grid-template-rows: auto; grid-row: 1/span 2; grid-column: 4; } body .ui-dialog .tab-content .charsheet .travel-log .head-section.dynamic > .header { grid-row: 1; grid-column: 1; } body .ui-dialog .tab-content .charsheet .travel-log .head-section.dynamic textarea { grid-row: 1; grid-column: 1; } body .ui-dialog .tab-content .charsheet .travel-log .dynamic > .header { display: none; } @container walking-dead (max-width: 700px) { body .ui-dialog .tab-content .charsheet .travel-log .head-section.dynamic { grid-template-rows: auto 1fr; grid-column: 1/-1; grid-row: 3; } body .ui-dialog .tab-content .charsheet .travel-log .head-section.dynamic > .header { display: block; } body .ui-dialog .tab-content .charsheet .travel-log .head-section.dynamic textarea { grid-row: 2; } body .ui-dialog .tab-content .charsheet .travel-log > [data-i18n=comments].header { display: none; } } body .ui-dialog .tab-content .charsheet .tabs--walking-dead { container: walking-dead/inline-size; } body.sheet-darkmode { --backColor:var(--dm-backColor); --selectedColor:var(--dm-selectedColor); --unselectedColor1:var(--dm-unselectedColor1); --unselectedColor1:var(--dm-unselectedColor2); --checkColor:var(--dm-checkColor); --borderColor:var(--dm-borderColor); --fontColor:var(--dm-fontColor); --disabledColor:var(--dm-disabledColor); --redColor: hsl(357, 58%, 48%); --col-alt: hsl(357, 58%, 48%); --colPen: hsl(220, 100%, 79%); --fontColor: var(--dm-fontColor); --bgColor: var(--dark-surface2); color: var(--fontColor); --_toggle: 1; } body.sheet-darkmode .tab-content .charsheet .repitem { background-color: unset; } body.sheet-darkmode .tab-content .charsheet .tabs__nav-list { background: var(--dark-surface2); } body.sheet-darkmode .talent-section-content [class^=repcontrol] { color: var(--redColor); }