roll20-character-sheets/Outgunned Adventure/Outgunned Adventure.css

.charsheet,
.sheet-rolltemplate-diceroller {
    --primary-color: #a33225;
}

.sheet-rolltemplate-diceroller-adventure {
    --primary-color: #6f4700;
}

.charsheet {
    min-width: 830px;
}

.outgunned-nodisplay {
    display: none;
}

.outgunned-main-grid-var-adventure {
    --primary-color: #6f4700;
    background-image: url(https://files.d20.io/images/472892235/CJRY8osJ02hp1fyFXI9Mcw/original.png) !important;
    background-size: unset !important;
}

.outgunned-logo,
.outgunned-logo-adventure {
    margin-top: 15px !important;
    width: 50%;
    margin: 0 auto;
    display: block;
}

.outgunned-logo-adventure {
    margin-top: 15px;
}

.outgunned-adventure-margin {
    margin-left: 5px !important;
}

span.paper-clip {
    background: transparent;
    height: 70px;
    width: 20px;
    border-radius: 32px;
    border: 2px solid var(--primary-color);
    display: inline-block;
    position: absolute;
    clip-path: rect(10px 148px 158px 0px);
    margin-left: -2px;
    margin-top: -8px;
    transform: rotate(20deg);
}

span.paper-clip-mask {
    background-color: white;
    width: 10px;
    height: 10px;
    position: absolute;
    margin-top: 27px;
    margin-left: -5px;
    transform: rotate(-7deg);
    border-left: 1px solid black;
}

/* Turn red images brown for adventure mode */
.outgunned-image-adventure {
    filter: hue-rotate(45deg);
}

input[type="checkbox"] {
    accent-color: var(--primary-color);
}

.outgunned-nodisplay {
    display: none !important;
}

.outgunned-adrenalin {
    color: transparent !important;
    text-shadow: 0 0 0 var(--primary-color);
}

.outgunned-dice-roller {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

.outgunned-main-grid {
    display: grid;
    grid-template-areas:
    "avatar tooltips tooltips"
    "avatar details details"
    "statistics grit grit"
    "statistics adrenaline feats"
    "statistics spotlight feats"
    "statistics roulette feats"
    "youlook youlook mission"
    "gunsngear gunsngear gunsngear"
    "cashstorageride cashstorageride cashstorageride"
    "notes notes notes";
    grid-template-columns: fit-content(275px) fit-content(250px) 1fr;
    grid-template-rows: 20px;
    background-image: url(https://files.d20.io/images/472892236/SBQ91GqOtof5PcwrU2QoKQ/original.png);
    background-size: cover;
    min-width: 830px;
}

.outgunned-box {
    border: 2px solid var(--primary-color);
}

.outgunned-tooltips {
    height: fit-content;
    display: block !important;
}

.outgunned-tooltips > span {
    display: flex;
    margin-top: 3px;
    color: black;
    font-size: 12px;
    font-weight: bold;
}

.outgunned-tooltips > span > input {
    margin-left: 3px;
    accent-color: black;
}

.outgunned-avatar {
    grid-area: avatar;
    border: 1px solid black;
    margin: 10px;
    transform: rotate(-7deg);
    background-color: white;
    box-shadow: -5px 5px 5px gray;
}

.outgunned-avatar > div {
    text-align: center;
}

.outgunned-avatar > img:first-child {
    border: 1px solid black;
    margin: 0 auto;
    border-radius: 5px;
    margin: 10px;
    width: -webkit-fill-available;
}

.outgunned-avatar > img:nth-child(2) {
    width: 50%;
    margin: 0 auto;
    display: block;
}

.outgunned-details {
    grid-area: details;
    display: grid;
    grid-template-columns: 1fr;
    column-span: 2;
}

.outgunned-details > div,
.outgunned-mission > div:first-of-type,
.outgunned-ride > div:first-of-type {
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: end;
}

.outgunned-details > div > span,
.outgunned-mission > div:first-of-type > span {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: bold;
    align-content: end;
    margin-left: 5px;
    padding-right: 10px;
    width: 22%;
}

.outgunned-details > div > span.outgunned-job-label,
.outgunned-details > div > span.outgunned-background-label {
    width: 52%;
}

.outgunned-details > div > input,
.outgunned-mission > div > input {
    border: 0;
    background-color: white;
    height: 40% !important;
    width: 100% !important;
    margin-top: 4px;
    border-radius: 0;
    margin-bottom: 1px;
    padding: 4px;
    outline-color: var(--primary-color);
    color: black;
    padding-left: 10px;
}

.outgunned-statistics {
    grid-area: statistics;
    border: 1px solid var(--primary-color);
    margin-top: 30px;
    max-width: 275px;
    min-width: 275px;
}

.outgunned-statistics-block {
    margin-top: 30px;
}

.outgunned-statistics-block > div:first-child > span:first-child > span:first-child {
    color: white;
    background-color: var(--primary-color);
    font-weight: bold;
    font-size: 20px;
    clip-path: polygon(
    20% 0%,
    100% 0%,
    100% 100%,
    0% 100%
    );
    fill: none;
    padding-left: 20px;;
    padding-right: 5px;
    display: inline-block;
    margin: 5px;
    width: 90px;
    text-align: right;
    position: relative;
}

.outgunned-statistics-block > div:not(:first-child) {
    margin-left: 90px;
    text-align: right;
}

.outgunned-statistics-block > div:not(:first-child) > span {
    display: inline-block;
    color: black;
    font-weight: bold;
    width: 100px;
    font-size: 15px;
}

.outgunned-statistics-block > div > input {
    margin-bottom: 5px;
}

.outgunned-statistics-block > div {
    display: inline-flex;
}

.outgunned-statistics-block > div > div {
    display: inline-flex;
    margin-top: -12px;
}

.outgunned-statistics-block > div > div > input.outgunned-attr[type="checkbox"] + span::before {
    color: black;
}

.outgunned-centre-checkbox {
    margin-left: -5px !important;
    display: inline-grid;
    width: 16px;
    min-width: 16px;
    max-width: 16px;
    height: 35px;
}

input.outgunned-attr[type="checkbox"] {
    opacity: 0;
    position: relative;
    left: 15px;
    top: 15px;
    cursor: pointer;
    z-index: 1;
    width: 15px;
    margin-left: -8px !important;
    height: 16px;
}

input.outgunned-attr[type="checkbox"] + span::before {
    position: relative;
    top: 0px;
    color: var(--primary-color);
    text-shadow: none;
    text-align: center;
    content: "◇";
    font-size: 30px;;
    box-shadow: none;
}

input.outgunned-attr[type="checkbox"]:checked + span::before {
    content: "◆";
    font-size: 27px;
}

/* Grit images*/
/*
Normal https://files.d20.io/images/447651817/TVo4h0DUk4FU-nMJLT-P5g/original.png
Bad    https://files.d20.io/images/447651818/svVo0FS3eklsdKRtdgYG2A/original.png
Hot    https://files.d20.io/images/447651819/0rnMk29Fz6xii0iJLDHeZg/original.png
*/

.outgunned-grit {
    grid-area: grit;
    margin-top: 30px;
    margin-left: 20px;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 20px;
    border: 1px solid var(--primary-color);
    padding: 3px;
    min-width: 525px;
}

.outgunned-grit > div:first-of-type {
    display: grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px 40px;
    grid-template-rows: 60px;
}

.outgunned-gritnormal {
    display: block;
    background-image: url(https://files.d20.io/images/447651817/TVo4h0DUk4FU-nMJLT-P5g/original.png);
    background-repeat: no-repeat;
    background-size: 40px;
}

.outgunned-gritnormal.outgunned-image-adventure > input[type="checkbox"],
.outgunned-grithot.outgunned-image-adventure > input[type="checkbox"] {
    filter: hue-rotate(-45deg);
}

.outgunned-gritbad {
    display: block;
    background-image: url(https://files.d20.io/images/447651819/0rnMk29Fz6xii0iJLDHeZg/original.png);
    background-repeat: no-repeat;
    background-size: 40px;
}

.outgunned-grithot {
    display: block;
    background-image: url(https://files.d20.io/images/447651818/svVo0FS3eklsdKRtdgYG2A/original.png);
    background-repeat: no-repeat;
    background-size: 40px;
    margin-top: -2px;
}

.outgunned-grit > div > span > input {
    margin-top: 21px;
    margin-left: 14px;
    transform: scale(1.9);
    clip-path: circle(42% at 50% 50%);
}

.outgunned-grit > div > span > span:first-of-type {
    color: black;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.outgunned-grit > div > span:nth-of-type(12) > span:first-of-type {
    color: var(--primary-color);
}

.outgunned-grit > div:nth-of-type(2) {
    display: grid;

}

.outgunned-grit-hot {
    border: 2px solid var(--primary-color) !important;
}

.outgunned-grit-text {
    color: black;
    font-size: 12px;
    font-weight: bold;
}

.outgunned-grit-text-hot,
.outgunned-grit-text-hot-luck {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: bold;
    margin-bottom: 5px;
}

.outgunned-feats {
    grid-area: feats;
    margin-left: 10px;
    border: 1px solid var(--primary-color);
    padding: 3px;
    margin-top: 15px;
}

.outgunned-feats > span {
    border: 0 !important;
    width: 95%;
    text-align: right;
    margin-right: 10px;
    font-weight: bold;
    font-size: 20px;
    color: var(--primary-color);
}

.outgunned-feats > div {
    width: 100%;
}

.outgunned-feats  input {
    width: 99.5%;
    background-color: white;
    font-weight: bold;
}

.outgunned-feats  textarea {
    width: calc(100% - 13px);
    height: fit-content;
    height:
    resize: vertical;
    background-color: white;
    field-sizing: content;
}

.outgunned-spotlight {
    grid-area: spotlight;
    text-align: center;
    position: relative;
/*    margin-top: -50px;*/
    max-width: 245px;
    min-width: 245px;
}

/* Undo the radial filter we use for the image colour shift for the label */
.outgunned-spotlight span,
.outgunned-roulette span {
    margin-top: 30px;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 20px;
}

.outgunned-spotlight.outgunned-image-adventure > span,
.outgunned-roulette.outgunned-image-adventure > span {
    filter: hue-rotate(-45deg);
}

.outgunned-spotlight span:nth-of-type(2) {
    font-size: 12px;
}

.outgunned-spotlight > img {
    width: 80%;
}

.outgunned-spotlight >  input {
    position: absolute;
    transform: scale(1.6);
    clip-path: circle(40% at 50% 50%);
}

.outgunned-spotlight > input:first-of-type {
    left: 155px;
    top: 48.5px;
}

.outgunned-spotlight  input:nth-of-type(2) {
    left: 178px;
    top: 70px;
}

.outgunned-spotlight  input:nth-of-type(3) {
    left: 190px;
    top: 97.5px;
}

.outgunned-spotlight-image-adventure {
    filter: hue-rotate(-45deg) brightness(1.2);
}

.outgunned-spotlight-image.outgunned-nodisplay ~ input[type="checkbox"] {
    filter: hue-rotate(-45deg);
}

/*
Icon: https://files.d20.io/images/447657537/-fY4DtclMXmG0gV4_khZDA/original.png
*/
.outgunned-adrenaline {
    grid-area: adrenaline;
    text-align: center;
    margin-top: 30px;
    max-width: 245px;
    min-width: 245px;
}

.outgunned-adrenaline > div:first-of-type {
    display: grid;
    grid-template-columns: 40px 40px 40px 40px 40px 40px;
    grid-template-rows: 20px 60px;
    justify-items: center;
    margin-bottom: 10px;
}

.outgunned-adrenaline input {
    margin-bottom: -130px;
    width: 16px;
}

.outgunned-adrenaline-icon1,
.outgunned-adrenaline-icon2,
.outgunned-adrenaline-icon3,
.outgunned-adrenaline-icon4,
.outgunned-adrenaline-icon5,
.outgunned-adrenaline-icon6 {
    display: block;
    background-image: url(https://files.d20.io/images/447657537/-fY4DtclMXmG0gV4_khZDA/original.png);
    background-repeat: no-repeat;
    background-size: 40px;
    height: 60px;
    width: 40px;
    margin-top: -15px;
}

.outgunned-adrenaline-check1:checked ~ .outgunned-adrenaline-icon1,
.outgunned-adrenaline-check2:checked ~ .outgunned-adrenaline-icon2,
.outgunned-adrenaline-check3:checked ~ .outgunned-adrenaline-icon3,
.outgunned-adrenaline-check4:checked ~ .outgunned-adrenaline-icon4,
.outgunned-adrenaline-check5:checked ~ .outgunned-adrenaline-icon5,
.outgunned-adrenaline-check6:checked ~ .outgunned-adrenaline-icon6 {
    background-image: url(https://files.d20.io/images/447912548/EWIH5QgtpBdcnE7TEMhupw/original.png);
}

.outgunned-adrenaline > span {
    font-size: 20px;
    font-weight: bold;
    color: var(--primary-color);
}

.outgunned-adrenaline > span:nth-of-type(3) {
    font-size: 12px;
    font-weight: bold;
    color: var(--primary-color);
}

.outgunned-mission {
    grid-area: mission;
    margin-left: 10px;
    border: 1px solid var(--primary-color);
    padding: 3px;
    margin-top: 5px;
}

.outgunned-mission > div > span {
    margin-top: 30px;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 20px;
}

.outgunned-mission > div:nth-of-type(2) {
    text-align: center;
}

.outgunned-mission > div:nth-of-type(2) > span {
    display: inline-block;
}

.outgunned-mission > div:nth-of-type(2) > input {
    border-bottom: 2px solid var(--primary-color);
}

.outgunned-mission > div:nth-of-type(2) > span:nth-of-type(2) {
    color: black;
    font-weight: bold;
    font-size: 10px;
    margin-top: 10px;
}

.outgunned-youlook {
    grid-area: youlook;
    width: 100%;
    margin-top: 30px;
}

.outgunned-youlook > span:first-child {
    color: white;
    background-color: var(--primary-color);
    font-weight: bold;
    font-size: 20px;
    clip-path: polygon(
    calc(100% - 30px) 0%,
    100% 100%,
    0% 100%,
    0% 0%
    );
    padding-right: 10%;
    padding-left: 5px;
    display: block;
    /*    width: 100%;*/
    text-align: center ;
}

.outgunned-youlook > div div {
    display: grid;
    grid-template-columns: 1.75fr 0.1fr 1.5fr 3.5fr 0.1fr 0.5fr;
}

.outgunned-youlook span {
    font-weight: bold;
    font-size: 15px;
    text-align: right;
}

.outgunned-youlook > span:nth-of-type(3) {
    text-align: left !important;
}

.outgunned-youlook > div div span:nth-child(3n) {
    text-align: left !important;
    color: gray !important;
}

.outgunned-youlook > div div span input {
    margin-left: 3px;
}

.outgunned-youlook > span {
    font-size: 12px;
    margin-left: 5px;
}

.outgunned-youlook span.outgunned-all {
    color: #cd957d;
}

.outgunned-roulette {
    grid-area: roulette;
    position: relative;
    max-width: 245px;
    min-width: 245px;
    text-align: center;
}

.outgunned-roulette > input {
    transform: scale(1.5);
}

.outgunned-roulette > input:nth-of-type(1) {
    left: 176px;
    top: 75px;
}

.outgunned-roulette > input:nth-of-type(2) {
    left: 176px;
    top: 154px;
}

.outgunned-roulette > input:nth-of-type(3) {
    left: 106px;
    top: 202px;
}

.outgunned-roulette > input:nth-of-type(4) {
    left: 33px;
    top: 154px;
}

.outgunned-roulette > input:nth-of-type(5) {
    left: 33px;
    top: 75px;
}

.outgunned-roulette > input:nth-of-type(6) {
    left: 106px;
    top: 30px;
}

.outgunned-roulette > input {
    position: absolute;
}

.outgunned-roulette > img {
    width: 200px;
    display: block;
    margin: 0 auto;
}

.outgunned-roulette > button {
    color: var(--primary-color);
    font-weight: bold;
    font-size: 3em;
    position: absolute;
    top: 190px;
    left: 148px;
    border: 0;
    padding: 0;
    background: transparent;
}

.outgunned-roulette.outgunned-image-adventure > input[type="checkbox"],
.outgunned-cash.outgunned-image-adventure > div > input[type="checkbox"],
.outgunned-roulette.outgunned-image-adventure > button {
    filter: hue-rotate(-45deg);
}

.outgunned-gunsngear {
    grid-area: gunsngear;
}

.outgunned-gunsngear > span:first-child {
    color: white;
    background-color: var(--primary-color);
    font-weight: bold;
    font-size: 20px;
    clip-path: polygon(
    calc(100% - 30px) 0%,
    100% 100%,
    0% 100%,
    0% 0%
    );
    padding-right: 10%;
    padding-left: 5px;
    display: block;
    text-align: center;
    margin-top: 30px;
}

.outgunned-gunsngear-guns {
    display: grid;
    grid-template-columns: 7fr 1fr 1fr 1fr 1fr 1.5fr;
    margin-top: -2px;
    margin-bottom: 5px;
}

.outgunned-gunsngear-guns-adventure {
    grid-template-columns: 7fr 1.5fr;
}

.outgunned-gunsngear-guns > span {
    color: white;
    background-color: var(--primary-color);
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    margin-bottom: 3px;
}

.outgunned-gunsngear-guns > span:first-child {
    text-align: left;
    padding-left: 5px;
}

.outgunned-gunsngear-guns > div {
    display: flex;
}

.outgunned-gunsngear-guns > input:nth-child(8),
.outgunned-gunsngear-guns > input:nth-child(10),
.outgunned-gunsngear-guns > input:nth-child(12n + 1),
.outgunned-gunsngear-guns > input:nth-child(12n + 3),
.outgunned-gunsngear-guns > input:nth-child(12n + 5),
.outgunned-gunsngear-guns > div:nth-child(12n + 6),
.outgunned-gunsngear-guns > input:nth-child(18n+2),
.outgunned-gunsngear-guns > input:nth-child(18n+4) {
    background-color: white;
}


.outgunned-gunsngear-guns > div:nth-child(12n + 6),
.outgunned-gunsngear-guns > input:nth-child(12n + 1),
/*.outgunned-gunsngear-guns > input:nth-child(12n + 2),*/
.outgunned-gunsngear-guns > input:nth-child(12n + 3),
/*.outgunned-gunsngear-guns > input:nth-child(12n + 4),*/
.outgunned-gunsngear-guns > input:nth-child(12n + 5) {
    background-color: white;
}

.outgunned-gunsngear input {
    width: 100% !important;
}

.outgunned-gunsngear-gear > div {
    display: flex;
}

.outgunned-gunsngear-gear > div > span {
    font-family: Pictos;
    font-size: 3em;
    margin-top: -13px;
    margin-bottom: -13px;
    color: var(--primary-color);
}

.outgunned-cash-storage-ride {
    grid-area: cashstorageride;
    display: grid;
    grid-template-columns: 0.75fr 1.75fr 2fr;
}

.outgunned-cash {
    text-align: center;
    z-index: 1;
}

.outgunned-cash > img {
    display: block;
    align-content: center;
    margin-top: 30px;
}

.outgunned-cash > div {
    align-items: center;
    margin-left: -20px;
}

.outgunned-cash-label {
    display: block;
    margin-top: 30px;
    color: var(--primary-color);
    font-weight: bold;
    font-size: 20px;
    filter: hue-rotate(-45deg);
    margin-left: -20px;
}

.outgunned-storage {
    margin-top: 30px;
    margin-right: 15px;
    z-index: 0;
}

.outgunned-storage > span {
    color: white;
    background-color: var(--primary-color);
    font-weight: bold;
    font-size: 20px;
    padding-right: 10%;
    padding-left: 5px;
    display: block;
    text-align: center;
}

.outgunned-storage > input {
    width: 100%;
    background-color: white;
}

.outgunned-ride,
.outgunned-bag {
    margin-top: 30px;
}

.outgunned-ridetype {
    display: flex;
    margin-top: -5px;
    margin-left: -10px;
}

.outgunned-backpack-image {
    position: absolute;
    width: 210px;
    margin-left: -90px;
    z-index: -1;
    margin-top: -30px;
}

.outgunned-ride-hits {
    display: block;
    background-image: url(https://files.d20.io/images/447651817/TVo4h0DUk4FU-nMJLT-P5g/original.png);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center;
    height: 40px;
}

.outgunned-ride-speed {
    display: block;
    background-image: url(https://files.d20.io/images/447915786/Y6ORl6g5ENF274zGmBs70g/original.png);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center;
    height: 40px;
}

.outgunned-ride-armour > input {
    accent-color: #545454;
}

.outgunned-ride-armour {
    display: block;
    background-image: url(https://files.d20.io/images/447915661/QP4vVW-_jvom8D58l00vew/original.png?17519678905);
    background-repeat: no-repeat;
    background-size: 40px;
    background-position: center;
    height: 40px;
}

.outgunned-ride > div input,
.outgunned-bag > input {
    width: 100%;
    background-color: white;
    filter: brightness(100%);
}

.outgunned-ride > div > img {
    width: 100%;
}

.outgunned-ride > div > span > input[type="checkbox"] {
    margin-left: 5.5px;
    transform: scale(1.9);
    clip-path: circle(19% at 50% 50%);
}

.outgunned-ride > div > span > input[type="text"] {
    margin-left: 15px;
    width: 25px !important;
    background: transparent;
    appearance: none;
    border: 0;
    font-weight: bold;
    font-size: 20px;
    color: var(--primary-color);
}

.outgunned-ride > div > input[type="checkbox"]:nth-of-type(4),
.outgunned-ride > div > input[type="checkbox"]:nth-of-type(5),
.outgunned-ride > div > input[type="checkbox"]:nth-of-type(6) {
    accent-color: black
}

.outgunned-ride > span:first-child,
.outgunned-bag > span:first-child {
    color: white;
    background-color: var(--primary-color);
    font-weight: bold;
    font-size: 20px;
    clip-path: polygon(
    calc(100% - 30px) 0%,
    100% 100%,
    0% 100%,
    0% 0%
    );
    padding-right: 10%;
    padding-left: 5px;
    display: block;
    text-align: center;
    margin-bottom: 10px;
}

.outgunned-bag > span:first-child {
    margin-bottom: 0;
}

.outgunned-ride > div > span {
    color: var(--primary-color);
    font-size: 12px;
    font-weight: bold;
    align-content: center;
    margin-left: 5px;
    padding-right: 10px;
    width: 22%;
}

.outgunned-ride > div:nth-of-type(2) {
    margin-top: 10px;
    display: flex;
    margin-bottom: 10px;
}

.sheet-rolltemplate-diceroller {
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    padding: 5px;
    background-image: url("https://files.d20.io/images/446731385/1vBgVUdgKdxYN0Bb1js_WQ/original.png?175113464855");
    background-repeat: no-repeat;
    background-position: center center;
    background-blend-mode: lighten;
    background-color: #eeeeeedd;
}

.sheet-rolltemplate-diceroller-adventure {
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    padding: 5px;
    background-image: url("https://files.d20.io/images/448140728/YJBLWCNwEnEDnnpiBj8VYg/original.png?175214131455");
    background-repeat: no-repeat;
    background-position: center center;
    background-blend-mode: lighten;
    background-color: #eeeeeedd;
}

.sheet-rolltemplate-diceroller > div > div,
.sheet-rolltemplate-diceroller-adventure > div > div {
    display: grid;
    grid-template-columns: 1fr;
}

.sheet-rolltemplate-diceroller > div > div > span:first-of-type,
.sheet-rolltemplate-diceroller-adventure > div > div > span:first-of-type {
    margin-bottom: 15px;
}

.sheet-rolltemplate-diceroller > div > div > span,
.sheet-rolltemplate-diceroller-adventure > div > div > span {
    color: var(--primary-color);
    font-weight: bold;
    font-style: italic;
    font-size: 2em;
    text-shadow: 2px 2px 2px white;

}

.sheet-rolltemplate-diceroller > div > div > span:nth-of-type(2),
.sheet-rolltemplate-diceroller-adventure > div > div > span:nth-of-type(2) {
    font-size: 1.5em;
    padding: 5px;
    line-height: 1em;
}

.sheet-rolltemplate-diceroller > div > div > div,
.sheet-rolltemplate-diceroller-adventure > div > div > div {
    color: var(--primary-color);
    font-weight: bold;
    display: inline-flex;
    font-size: 0.75em;
}

.sheet-rolltemplate-diceroller > div > div > div:empty,
.sheet-rolltemplate-diceroller-adventure > div > div > div:empty {
    display: none;
}
.sheet-rolltemplate-diceroller img {
    width: 35px;
    height: 35px;
    margin-bottom: 10px;
    margin-right: 5px;
}

.sheet-rolltemplate-diceroller-adventure img {
    width: 35px;
    height: 35px;
    margin-bottom: 10px;
    margin-right: 5px;
/*    filter: hue-rotate(45deg);*/
}

.outgunned-notes {
    grid-area: notes;
}

.outgunned-notes > textarea {
    box-sizing: border-box;
    background-color: white;
    resize: vertical;
}

.outgunned-tooltiptext {
    display: none;
    font-family: "Helvetica Neue", serif !important;
    width: 200px;
    text-align: left;
    background-color: whitesmoke;
    color: black !important;
    font-size: 10px !important;
    font-weight: bold !important;
    padding: 5px;
    border: 1px black solid;
    border-radius: 3px;
    position: absolute;
    z-index: 10000;
    height: fit-content !important;
    line-height: normal;
}

.outgunned-tooltiptext-wide {
    width: 400px;
    margin-top: -50px !important;
}

.outgunned-tooltiptext-wideup {
    width: 400px;
    margin-top: -160px !important;
}

.outgunned-tooltiptext-wideup2 {
    width: 400px;
    margin-top: -250px !important;
}

.outgunned-tooltips:has(.outgunned-tooltips-cb:checked) .outgunned-tooltip:hover ~ .outgunned-tooltiptext {
    display: block;
    pointer-events: none;
    margin-top:35px;
}
.outgunned-tooltips:has(.outgunned-tooltips-cb:checked) .outgunned-tooltip:hover .outgunned-tooltiptext {
    display: block;
}

.outgunned-tooltips:has(.outgunned-tooltips-cb:checked) .outgunned-tooltip .outgunned-tooltiptext:hover {
    display: none;
}