/* Universal styling */
* {
    margin: 0px;
    padding: 0px;
    text-decoration: none;
    list-style: none;
    border-style: none;
	line-height: 1;
    font-family: 'Noto Sans JP', sans-serif;
}


/* Sheet base */
#menuContainer {
    width: 100%;
    display: flex;
    position: relative;
    min-width: 800px;
}

#sheetTitle {
    color: #fee2b0; 
    font-weight: bolder;
    display: flex;
    align-items: center;
    font-size: 15pt;
    height: 20px;
    position: absolute;
    top: 0;
    left: 180px;
    min-width: 600px;
}

#sheetWrapper {
    margin-top: 70px;
    margin-bottom: 30px;
}

.sheetform {
    background-color: #1F1F1F !important; 
    position: relative; 
    min-width: 850px;
}

.title, body, .sheet-body {
    min-width: 800px;
    max-width: 850px;
}


/* Popup messages */
#messagePop {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
}

#messagePop input, #messagePop textarea {
    text-align: center;
}

.messageClose {
    position: absolute;
    top: 5px;
    right: 5px;
    border: 1px rgba(256,256,256, 0.5) solid;
    border-radius: 5px;
    z-index: 900;
    width: 30px;
    height: 30px;
}

.messageClose label {
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.mHeader{
    font-size: 20px;
    color: #fee2b0 !important;
}

.mBody {
    border: none;
    /* border: 1px red solid !important; */
}

.messageContent {
    position: absolute;
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px #fee2b0 solid;
    background-color: rgba(0,0,0,0.8);
    border-radius: 5px;
    color: #fee2b0;
    width: 50%;
    min-width: 350px;
    padding: 5px;
    height: 0px;
    opacity: 0;
    overflow: hidden;
    /* transition: opacity 0.55s, height 1s; */
}

#messageToggle:checked ~ #messagePop .messageContent  {
    height: 100px;
    opacity: 100%;
    /* transition: opacity 0.55s, height 0s; */
}


/* Placeholder text for input fields and textfields */
::placeholder {
    color: #fff;
    opacity: 50%;
}

textarea::placeholder, .CharSmallNotes::placeholder, .CharDetail::placeholder, .egoIdeologyInput::placeholder {
    color: #111;
    opacity: 30%;
}


/* Cusomizable names for equipment, skills, mystery ect. */
.contentName, .viewerName, .skillName, .toolName, .skillSelectionElement .skillSelectionName, input[type=text] {
    text-overflow:ellipsis;
}
.contentName {
    width: 100%;
}
.skillName {
    width: 140px;
    margin-left: 40px;
}
.toolName {
    width: 95px;
}


/* Setting bars that appear when editing weapon/tool uses, outfit resistances ect. */
.editCover {
    position: absolute;
    z-index: 5;
    background-image: linear-gradient(rgba(160,160,160,0.8), rgba(160,160,160,0.9), rgba(160,160,160,0.7));
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding: 5px;
    min-height: 25px;
}
.editCover .settingStyle {
    color: #fff;
}
.helperText:checked ~ .helperTextContainer .helpers b {
    display: none !important;
}
.helperText:checked ~ .damageHelperContainer.helperTextContainer :is(.slash, .pierce) {
    margin-right: 28px;
}
.helperText:checked ~ .damageHelperContainer.helperTextContainer .blunt {
    position: absolute;
    top: 0px;
    left: 28px;
}
.editCover > .rowContainer,
.editCover > .hide-item,
.editCover > .hide-item > .rowContainer {
    position: relative;
    height: 100%;
}
/* Currently unused. Will wrap a fourth ego outfit property down to a second row */
/* If outfits ever gain more than this many properties a change should probably be made
   to a columnAligned rowContainer structure */
.distortionContainer .editCover .rowContainer .rowContainer:nth-child(n+4),
.egoContainer .editCover .rowContainer .rowContainer:nth-child(n+4) {
    position: absolute;
    left: 0;
    bottom: 0;
}


/* Dropdown menues in top right corner of augments and special items */
.topRight {
    width: 140px;
    height: 25px;
    position: absolute;
    right: 5px;
    text-align: center;
    top: 5px;
}


/* Displays for the health, stagger, sanity and light bars as well as the distortion counter */
.banner {
    text-align: left; font-weight: bold; padding: 5px; width: 50%;
    height: 50px; color: #fff;
    text-transform: uppercase;
}
.counter {
    opacity: 100%;
}
.Cstat, .Mstat {
    font-size: 16pt; 
    font-weight: bold;
}
.Cstat, .Tstat {
    color: #111; 
    background-color: transparent !important; 
    width: 125% !important; 
    height: 100% !important;  
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    opacity: 80%;
    padding-left: 5px;
}
.Mstat {
    color: rgba(0,0,0,0.5);
    position: absolute; 
    top: 0; 
    right: 0; 
    width: 50% !important; 
    height: 100% !important; 
    text-align: center; 
    border-radius: 0px 3px 3px 0px;
    z-index: 10;
}
.distortProfile .bars {
    width: 65px !important;
    height: 25px !important; 
    background-color: transparent;
    opacity: 70%;
}
.distortProfile .Cstat {
    width: 130% !important;
    font-size: 14pt;
    opacity: 100%;
}
.distortProfile .Mstat {
    font-size: 14pt;
    border-left: 2px #cc4125 dotted;
    background-color: #000;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 20;
}
.bars {position: relative; background-color: #111; width: 90px !important; height: 37px; border-radius: 5px;}
.contentBlock { width: 100%; display: flex; justify-content: start; align-items: start; }

/* Blue border for Temporary HP and ST */
.bars:has(> .style-toggle-rev:not(:checked)) {
    border: 2px solid #1f9bd9c0 !important;
    top: -3px;
    left: -3px;
    z-index: 1;
}
.bars:has(> .style-toggle-rev:checked) {
    border: 0px !important;
}
.banner:has(.style-toggle-rev:not(:checked)) span {
    position: relative;
    top: -1px;
    z-index: 2;
}

#Counter span {
    font-weight: bold;
}


/* Assorted sizing and positioning of sheet elements. Most are self-explanatory */
.rowContainer {
    display: flex;
    align-items: start;
    justify-content: start;
    width: 100%;
    position: relative;
}

.centerFlex {
    align-items: center;
    justify-content: center;
}

.rowContainer select {
    text-align: center;
}

.settingStyle {
    display: flex;
    align-items: center;
    justify-content: start;
}

.qolButton {
    height: 15px;
    width: 15px;
    text-align: center;
    border: 1px #fee2b0 solid;
    color: #fee2b0;
    padding: 3px;
    border-radius: 5px;
    background-color: rgba(0,0,0,0);
    float: left;
    font-size: 12pt;
    font-weight: bold;
    opacity: 50%;
    margin-right: 5px;
}

.reloadButton {
    height: 15px;
    width: 15px;
    padding: 3px;
    border-radius: 5px;
    border: 1px #fee2b0 solid;
    border-radius: 5px;
    background-color: rgba(0,0,0,0);
    opacity: 40%;
    position: absolute;
    top: 3px;
    right: -5px;
}

.titleHeader {
    height: 30px;
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    opacity: 100%;
}

/* Header of all sections in the sheet (equipment, skills, player profile at the top of the sheet) */
.sectionHeader {
    background-color: #ddd;
    width: 100%;
    padding-top: 3px;
    padding-bottom: 3px;
    text-align: left;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: start;
    flex-basis: 0;
    height: 30px;
}

/* User for sections displayed in pairs (ex. tools), each taking up half of the column */
.half {
    width: 49%;
}
.contentContainer.half {
    width: 49% !important;
}

#TopContainer { width: 100%; text-align: center; display: flex; }
#TopColumnL { min-width: 265px; float: left; padding-left: 0px; padding-right: 0px; margin-right: 5px; }
#TopColumnM { min-width: 180px; padding-left: 10px; padding-right: 10px; }
#TopColumnR { width: 265px; float: right; padding-left: 15px; padding-right: 10px; }

.columnContent { min-width: 180px; max-width: 280px; position: relative;}

.columnAlign {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    position: relative;
}

.contentContainer, .specialBlock, .augmentBlock, .skillBlock {
	width: 100%;
    text-align: center;
    background-color: #c3c3c3; border-radius: 3px;
    position: relative;
    overflow: hidden;
} 

.specialBlock { margin-left: 5px; margin-right: 5px; margin-top: 5px; margin-bottom:5px; }
.augmentBlock { margin-top: 10px; }


/* Player name field at the top of the sheet */
.player { position: absolute; top: 40px; left: 203px; z-index: 4; text-align: left; display: flex; align-items: flex-start; justify-content: flex-start; height: 25px; opacity: 50%; }
.player div { color: #fee2b0; font-weight: bolder; height: 25px; display: flex; align-items: center; justify-content: center; }
#playerName { background-color: transparent; text-decoration-line: underline; text-decoration-color: #fee2b0; color: #fee2b0; }


/* Setting menu (displayed by hovering over cogwheel in top-right corner) */
#settings label {
    color: #fff !important;
    font-size: 10pt !important;
}
#settings {
    width: 27px;
    height: 27px;
    position: absolute;
    top: 2px;
    right: 0px;
    background-color: rgba(0,0,0,0);
    border-radius: 5px;
    border: 1px transparent solid;
    overflow: hidden;
    color: #fee2b0;
    font-weight: bold;
    z-index: 150;
}
/*#settings {*/
#settings:hover {
    height: auto;
    width: 530px;
    border: 1px #fee2b0 solid;
    border-radius: 5px 15px 5px 5px;
    background-color: rgba(0,0,0,0.8);
}
.settingsIcon {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    top:0;
    right: 0;
    width: 25px;
    height: 25px;
    font-size: 20px;
    border-radius: 100px;
    border: 1px #fee2b0 solid;
}
.settingsText {
    width: 220px;
    padding: 35px;
    padding-bottom: 25px;
}
.settingsText input[type="checkbox"] {
    position: absolute;
}
.settingsText span:not(.settingsTitle) {
    position: relative;
    left: 21px;
}
.settingsTitle {
    line-height: 1.8em;
}


/* Credits (displayed by hovering over logo in top-left corner) */
#credits {
    width: 32px;
    height: 32px;
    position: absolute;
    top: -2px;
    left: 60px;
    background-color: rgba(0,0,0,0);
    border-radius: 5px;
    border: 1px transparent solid;
    overflow: hidden;
    color: #fee2b0;
    z-index: 100;
}
#credits:hover{
    width: 500px;
    height: 160px;
    border: 1px #fee2b0 solid;
    border-radius: 15px 5px 5px 5px;
    background-color: rgba(0,0,0,0.8);
}
.creditIcon {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    color: #fee2b0;
    font-size: 20px;
    border-radius: 100px;
    border: 1px rgba(256,256,256, 0.2) solid;
}
.creditText {
    padding: 10px 10px 10px 50px;
}
.creditText input {
    height: 15px !important;
}

#logo {
    height: 75px; width: 150px; min-width: 150px; margin-bottom: 10px;
    position: absolute;
    top: 0; left: 15px;
}
    #logo img {width: 150px; min-width: 150px;
}


/* These do not look like they're used anywhere, but look important enough to keep around */
.sheet-template_Body{width: 240px; height: 360px; 
    background-image: url(https://i.imgur.com/TjGTQ7o.png); background-size: 240px 360px; overflow: hidden;}
.sheet-container{width: 150px; height: 250px; margin-left: 45px; margin-top: 55px; text-shadow: #FC0 0px 0 4px;}
.sheet-template_type{width: 150px; height: 20px; color: #fee2b0; text-align: center; padding-top: 10px;} 
.sheet-template_name{width: 150px; height: 20px; color: #fee2b0; text-align: center; font-family: 'HeirofLightBold';} 
.sheet-template_dice_type{width: 150px; height: 20px; color: #fee2b0; text-align: center;} 
.sheet-template_dice{width: 150px; height: 60px; color: #000000; text-align: center;} 
.sheet-template_effect {width: 150px; height: 60px; color: #fee2b0; text-align: center;} 


/* Default for all icons on the sheet */
.icon {
    position: absolute;
    top: 0;
    left: 0;
}


/* Default styling for different interactive elements */
textarea, input { outline: none; }

input[type="number"]{border-style: none; vertical-align: middle; background-color: #ddd;}
input[type="text"]{border-style: none; outline-style: none; vertical-align: middle; background-color: #ddd;}
input[type="checkbox"]{ width: 21px;  height: 21px; text-align: center; vertical-align: middle; }
input[type='checkbox'] {
    accent-color: #fee2b0;
    opacity: 50%;
}
input[type='checkbox']:checked {
    opacity: 100%;
}

textarea {
    border-style: none; 
    outline-style: none;
    vertical-align: middle; 
    background-color: #ddd; 
    border-left: 2px #ccc solid; 
    border-right: 2px #ccc solid; 
    max-width: 97%;
    width: 100%;
    max-height: 100px;
    resize: none;
}

select {
    border-style: none;
    outline-style: none;
    vertical-align: top; 
    background-color: #ddd;
    margin-bottom: 0px;
}


/* Styling for default, dark and light input elements */
.transpInput {
    background-color: rgba(0,0,0,0) !important;
    color: #fff;
    font-weight: bold;
}
.darkInput, .status_effect_value {
    background-color: rgba(0,0,0,0.2) !important;
    color: #fff;
    font-weight: bold;
}
.whiteInput {
    background-color: rgba(256,256,256,0.1) !important;
    color: #eee;
    font-weight: bold;
}


/* Genuinely have no clue what this does. May be for having the sheet function better on tablets and mobiles */
textarea::-webkit-outer-spin-button,textarea::-webkit-inner-spin-button {
    -webkit-appearance: none;  margin: 0;
}


/* H3 is used for sections on the main character sheet. H4 is used for headers in the Editor tab. viewerName is used for the skill preview */
h3, h4, .viewerName {
    vertical-align: middle; 
    color: #fee2b0 !important; 
    font-weight: bolder;
}
#sheetSettings h3 {
    background-color: #333;
    padding: 5px;
    position: relative;
}


/* Character profile */
.profileData {
    text-align: left;
    display: flex;
    margin-bottom: 1px;
}
.textSection {
    width: 65px !important;
    font-size: 8pt !important;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 5px;
    font-weight: bold;
    overflow: hidden;
}
.CharImage {
    background-color: #555;
    right: 0px;
    margin-top: 0px;
    top: 62px;
    border: 2px #555 solid;
    overflow: hidden;
    position: absolute;
    height: 105px;
    width: 100px;
}
.CharImageText {
    top: 0;
    right: 0;
    position: absolute;
    height: 100%;
    width: 100%;
}
.CharImageText {
    color: #ddd;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#characterDetails .CharImage, #characterDetails .CharImageText {
    top: 0px;
    width: 155px;
    height: 158px;
}
.CharMediumNotes {
    height: 50px !important;
    margin: 0 !important;
}
.CharImage img {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    object-fit: contain !important;
    z-index: 2;
}

.levelBox {
    position: absolute;
    top: 3px;
    left: auto;
    right: 0;
    font-size: 9pt !important;
    align-items: flex-end;
    justify-content: flex-end;
    opacity: 50%;
    width: 90px;
}
.CharAge, .CharHeight, .CharOrigin, .CharJob {
    max-width: 95px;
    margin-left: -3px;;
    text-overflow:ellipsis;
}
#CharExtra, #distortExtra {
    padding-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
}
#CharExtra div {
    color: #333;
}
#CharExtra div, #CharExtra textarea, #distortExtra div, #distortExtra textarea {
    width: 100% !important;
}
#characterDetails .CharSmallNotes {
    width: 175px !important;
}
#DistortionName, #CharacterName {
    width: 150px !important;
}
#characterDetails .CharDetail {
    width: 330px !important;
}

.CharBigNotes {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin-left: 15px;
    overflow: hidden;
    height: 100px !important;
    padding: 5px;
}

#CharExtra .textSection, #distortExtra .textSection {
    margin-left: 10px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.CharBigNotes textarea {
    height: 100% !important;
    width: 100% !important;
    margin: 0px !important;
    padding: 5px !important;
    display: inline-block;
    border-radius: 5px;
}


/* EXP counter / level box */
.levelBox input {
    height: 25px !important;
}


/* Distortion profile */
.distortProfile .CharImage {
    background-color: #111;
    border: 2px #111 solid;
    top: 30px;
}
.distortionDice .dicerollBlock {
    width: 85px;
    margin-left: 2px;
    margin-right: 2px;
}
.distortProfile {
    background-color: #111;
    color: #999 !important;
}
.distortProfile .textSection {
    color: #777;
}
.distortProfile .whiteInput, .distortDescInput, .distortEffectInput {
    color: #bbb;
    border: none;
    scrollbar-color: #555 #333 !important;
    font-weight: normal;
    background-color: #333 !important;
}
.distortEffectInput, .distortDescInput {
    border-left: 2px #111 solid; 
    border-right: 2px #111 solid; 
    border-top: 1px #111 solid;
    border-bottom: 1px #111 solid;
}
.distortProfile ::placeholder {
    color: #999 !important;
    opacity: 50%;
}
.workPref input {
    height: 27px !important;
    width: 27px;
    font-weight: bold !important;
    font-size: 14pt;
    margin: 3px;
}


/* The distort button */
.distortIcon {
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Distort.png');
}
.profileHeader {
    position: absolute;
    top: 3px;
    left: 3px;
    z-index: 5;
}
.profileHeader input[type=checkbox] + label {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 30px !important;
width: 30px !important;
display:inline-block;
padding: 0 0 0 0px;
opacity: 20%;
}
.profileHeader input[type=checkbox]:checked + label {
    opacity: 30%;
}


/* Distortion observation levels */
.observationSelect span {
    font-size: 9px;
}
.observationSelect .columnAlign {
    width: 50%;
}
.observationSelect label {
    color: #888 !important;
}


/* Dice / combat pallette and skill selection */
.combatPaletteName {
    max-width: 100px;
    margin-left: 35px !important;
    font-size: 9pt;
}
.paletteButton input {
    background-color: transparent !important;
}
.paletteDiceContainer {
    justify-content: flex-end; 
    align-items: center; 
    height: 100%; 
    margin: 0; 
    position: relative;
}
.paletteButton {
    height: 30px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 3px;
}
.paletteDice {
    overflow: hidden; 
    width: 60px; 
    height: 30px; 
    position: absolute; 
    right: 30px !important; 
    top: 0px;
    padding-left: 3px;
    padding-right: 3px;
}
.paletteDice * {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 9.5pt !important;
    height: 100% !important;
    width: 17px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center !important;
    color: #fff !important;
    font-weight: bold !important;
}
.paletteDice .plainText { 
    opacity: 70%;
    width: 5px !important;
}
.paletteButton .BDice, .paletteButton .NDice {
    height: 23px !important;
    width: 23px !important;
    position: absolute; top: 3px; right: 0px;
}
.blocker {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 4;
}
.skillSelectionElement .icon, .skillN .icon, .skillE .icon {
    border-radius: 100px;
    overflow: hidden;
    height: 30px;
    width: 30px;
    border: 1px #fff solid;
}
.skillSelectionElement img, .skillIcon, .skillE img {
    height: 30px;
    width: 30px;
}
.toolSelect {
    height: 50%; 
    overflow-y: auto; 
    overflow-x: hidden;
    width: 100%; 
    flex-wrap: wrap; 
    z-index: 90;
    position: absolute;
    width: 125%;
    bottom: 0;
    margin-left: 15px;
}
.declare {
    height: 23px;
    padding: 3px;
    border-radius: 3px;
    color: #fff !important;
    background-color: #222 !important;
    border: 1px #111 solid;
    font-weight: bold;
    min-width: 40px;
}
.noHover{
    cursor: text !important;
    background-color: #ddd !important;
}

/* Skill / tool selection (newer) */
.skillSelectionLabel .icon input[type='checkbox'] {
    display: none !important;
}
.skillSelectionElement .skillSelector {
    opacity: 0% !important;
}
.skillhide {
    overflow: hidden; 
    position: relative; 
    border-radius: 100px;
    border: 1px #555 solid;
    margin-left: 2px;
    margin-right: 2px;
    width: 125px;
    height: 32px;
}
.skillBuffer {
    max-width: 49%;
    overflow: hidden;
}
.skillSelectionLabel {
    background-color: transparent;
    color: #fff;
    position: absolute; left: 0; width: 100%; top: 0; height: 100%; z-index: 10;
    border-radius: 100px 100px 100px 100px;
    opacity: 60%;
    width: 125px;
}
.skillSelectionLabel input {
    color: #fff;
}
.skillSelector:not(:checked) + .skillSelectionLabel:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
}
.skillSelector:checked ~ .skillSelectionLabel {
    background-color: #555;
    opacity: 100%;
}
.toolSelectHolder {
    display: flex; position: relative; width: 30px; height: 30px;
    border: 1px transparent solid; 
    border-radius: 5px; 
    overflow: hidden;
}
.toolSelectHolder type-image {
    position: absolute; left: 0px; top: 0px; height: 100%; width: 100%; z-index: 0;
}
.toolSelectBox {
    text-align: center; 
    font-weight: bold; 
    position: absolute; 
    left: 9px; 
    top: -5px; 
    z-index: 2;
    width: 100%;
    opacity: 80%;
}
.blocker .toolBlocker {
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0));
    border-radius: 5px;
}
.weaponBlocker {
    background-color: rgba(0,0,0,0.5); 
    color: #fff; 
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 25;
}
.skillSelectionElement {
    position: relative;
    display: flex;
    align-items: center;
    height: 32px;
    width: 100%;
}
.skillSelectionElement .skillSelectionName {
    width: 100%;
    height: 100%;
    font-weight: bold;
    margin-left: 30px !important;
    margin-top: 3px;
}
.paletteOverride {
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%;
    height: 1px;
    z-index: 20;
}
.egoDefPalette, .egoEvdPalette, .egoAttPalette {
    background-color: #000;
    overflow: hidden;
}
.egoDefPalette input, .egoDefPalette .plainText {
    color: #6d9eeb !important;
}
.egoEvdPalette input, .egoEvdPalette .plainText {
    color: #f1c232 !important;
}
.egoAttPalette input, .egoAttPalette .plainText {
    color: #cc4125 !important;
}
.paletteOverride .hide-item {
    width: 100%;
}
.hide-item.tool {
    width: 45px;
}
.weaponSlot {
    max-height: 35px;
}
.weaponSlot .paletteButton, .weaponSlot .hide-toggle-rev, .weaponSlot .hide-item-rev {
    height: 30px !important;
    overflow: hidden !important;
}
.paletteRange {
    font-weight: bold;
    color: #fff;
    text-align: center;
    overflow: hidden;
    width: 30px;
    height: 30px;
    position: relative;
    margin-left: 3px;
}
.paletteRange .buffer {
    width: 100% !important;
    position: absolute; top: 0; right: 0;
    width: 30px !important;
    height: 30px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
.weaponPaletteUses {
    width: 30px; 
    height: 30px; 
    position: absolute; 
    top:0px;  
    right: 100px;
    z-index: 24;
    opacity: 70%;
}
.weaponPaletteUses input {
    color: #fff !important;
}


/* Roll buttons around the character sheet. See Dice Roll Blocks for the roll template input fields */
button[type=action].challengeButton {
	font-size: 9pt !important;
	background-color: transparent !important;
	height: 25px;
	overflow:hidden;
	width: 70px;
	background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0));
    font-weight: bolder;
    text-align: center;
	text-decoration: none;
	text-shadow: none;
	border: 1px rgba(256,256,256, 0.3) solid;
	box-shadow: none !important;
	padding: 0px !important;
}
button[type=action].challengeButton:hover{
	opacity: 80%;
}
button[type=action].challengeButton::before {
    display: none;
}

button[type=roll].NDice, button[type=action].NDice{
    background-color: #333;
    font-weight: bolder;
    font-size: 0px;
    width: 23px !important;
    height: 23px !important;
    margin: 0.0;
    padding: 0.0em;
    border: 1px solid #000000;
    border-radius: 5px;
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/buttondice.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
	line-height: 100;
	margin-left: 5px;
	margin-right: 2px;
}


/* Dice roll blocks, aka anything in the format "xdx+x". Not to be confused with the block reaction */
.combatDice{ text-align: center; justify-content: end; align-items: center; margin-right: 3px; }
.dicerollBlock {
    display: flex;
    height: 100%;
    justify-content: end;
    width: 90px;
    align-items: center;
    background-color: rgba(0,0,0,0.2);
    border-radius: 5px;
}
.dicerollBlock .plainText {
    width: 8px;  
    color: #fff;
    text-align: center;
    opacity: 70%;
    font-weight: bold;
}
.dicerollBlock input{
    width: 25px;
    background-color: transparent;
    color: #fff;
    font-weight: bold;
    font-size: 12pt; 
}
.diceNum {
    text-align: right !important;
}
.diceVval {
    text-align: left !important;
}


/* Hide the toggle checkbox */
.expand-toggle, .hide-toggle, .hide-toggle-rev {
    display: none;
}
.expand-btn {
    width: 35px !important;
    height: 35px !important;
    opacity: 30%;
}
.distortProfile .expand-btn {
    padding: 0px;
    margin: 5px;
    height: 25px !important;
    width: 25px !important;
}
.fade-toggle + div {
    opacity: 100%;
}
.fade-toggle:checked + div {
    opacity: 20%;
}
.status_effect_value {
    opacity: 60%;
}
.fade-toggle ~ .status_effect_value {
    opacity: 80%;
}
.fade-toggle:checked ~ .status_effect_value {
    opacity: 40%;
}


/* Reveal/hide content with checkbox is checked */
.expand-toggle:checked ~ .expand-btn,
#weapon1-slash:checked ~ .expand-btn, #weapon1-pierce:checked ~ .expand-btn, #weapon1-blunt:checked ~ .expand-btn,
#weapon2-slash:checked ~ .expand-btn, #weapon2-pierce:checked ~ .expand-btn, #weapon2-blunt:checked ~ .expand-btn {
    opacity: 100% !important;
}
.expand-toggle:checked ~ .type-image {
    opacity: 100% !important;
}
.hide-item-rev {
    display: inline-block;
}
.hide-toggle:checked ~ button, .hide-toggle-rev:checked ~ .hide-item-rev {
    display: none !important;
}
.hide-item {
    width: 100%;
    display: none;
}
.hide-toggle:checked ~ .hide-item {
    display: inline-block;
}



/* General equipment */
/* ALL of these classes were labelled as "outfitRank" before the reformatting */
.weaponRank, .outfitRank, .augmentRank, .toolRank, .specialItemRank, .egoRank,
.characterRank, .characterLevel, .workAmount, .workPref .workPref,
.disadvCounter, .advCounter,
.lightCostInput, .egoLightCostInput {
    width: 25px;
    text-align: center;
    background-color: rgba(0,0,0,0.2) !important;
    color: #fff;
    font-weight: bold;
    height: 25px !important;
    margin-left: 5px;
    margin-right: 5px;
}
.weaponContainer, .outfitContainer, .toolContainer, .egoSkillContainer, .skillContainer {
    width: 100%;
    max-width: 400px;
    display: flex;
    align-items: start;
    justify-content: start;
    position: relative;
    padding: 5px;
    flex-wrap: wrap;
}
.weaponDescriptionInput, .weaponEffectInput, .outfitDescription, .outfitDescriptionInput, .augmentDescriptionInput {
    position: relative;
    margin-bottom: 0px;
}
/* Icons used for equipment and skills */
.iconHolder {
    height: 35px;
    width: 45px;
}
.iconHolder img {
    height: 35px;
    width: 35px;
}
.type-image{ text-align: center; }
.icon .type-image, .resIconRight .type-image, .resIconLeft .type-image {
    opacity: 0;
}


/* Weapons */
.weaponIcons {
    width: 35px;
    min-width: 35px;
    height: 35px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
    position: relative;
}
.weapon_distance, .weapon_type {
	height: 25px;
	width: 50% !important;
	text-align: center;	
}
.weapon_type {width: 90px !important; height: 25px; margin-right: 5px;}
.weaponPropertySelect, .weaponRangeBox{
    color: #fff !important;
    border-radius: 0px 0px 5px 0px;
    padding: 4px;
    height: 25px;
    position: absolute;
    top: 30px;
    left: 0;
    z-index: 1;
}
.weaponPropertySelect {
    width: 190px;
    display: flex;
    align-content: flex-start;
    justify-content: flex-start;
}
.weaponRangeBox {
    width: 190px;
    border-radius: 0px 0px 0px 5px;
    left: auto;
    right: 0;
}
.weaponRangeBox select, .weaponPropertySelect select{
    width: 70px;
    background-color: rgba(0,0,0,0.2) !important;
    color: #fff;
    font-weight: bold;
}
.weaponDescription, .weaponEffect {
    width: 50%;
}
.weaponDescriptionInput {
    height: 70px !important;
}
.weaponDescription span, .weaponEffect span {
    height: 10px;
    padding: 0 !important;
}
.descHead {
    height: 28px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Removes the spacing between weapons if only two weapons are displayed (aka. the hide-toggle for extra weapons is unchecked) */
.weaponContainer .contentContainer:has(+ .hide-toggle):has(+ :not(:checked)) {
    margin-top: 0px !important;
}


/* Outfits */
.outfitDescriptionInput {
    height: 60px !important;
}
.resistanceChart {
    flex-wrap: wrap;
    min-width: 50%;
    max-width: 100%;
}
.resistanceChart img, .resistanceChart select {
    margin: 0; padding: 0;
}
.resistanceChart img {
    height: 30px !important;
    width: 30px !important;
}
.resistanceChart select {
    width: 55px !important;
    appearance: none;
    text-indent: 3px;
    border: 1px solid #c3c3c3;
}
.outfitResistVal { width: 45px; text-align: center; }
.resIconLeft {
    position: absolute;
    top: 0;
    left: 10px;
}
.resIconRight {
    position: absolute;
    top: 0;
    right: 10px;
}
.evadeIcon, .evadeIcon img {
    height: 30px;
    width: 30px;
}
.evadeAdjust {
    height: 25px;
    margin-left: 1px;
}


/* Outfit custom resistance display */
.outfitCustomResistDisplay {
    width: 300px;
}

:is(.outfitContainer, .egoContainer, .distortionContainer) .editCover .hide-toggle:checked ~ .hide-item {
    display: flex;
}
:is(.outfitContainer, .egoContainer, .distortionContainer) .editCover .columnAlign {
    align-items: normal;
    flex-direction: column;
    justify-content: start;
}
:is(.egoContainer, .distortionContainer) .editCover {
    padding-bottom: 35px;
}
.outfitContainer .editCover > .columnAlign > .rowContainer > .rowContainer, 
.egoContainer .editCover .columnAlign > .rowContainer > .rowContainer,
.distortionContainer .editCover > .columnAlign > .rowContainer > .rowContainer,
.outfitCustomResistDisplay .repitem:has(.hide-toggle:checked)  { width: 82.34px; }

:is(.outfitContainer, .egoContainer) .status_effect_value {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border-radius: 5px;
}
:is(.outfitContainer, .egoContainer, .distortionContainer) .ailmentNum {
    text-align: center;
}
:is(.outfitContainer, .egoContainer, .distortionContainer) .status_effect_item {
    width: 25px;
    opacity: 100%;
}
.outfitCustomResistDisplay .repcontainer, .egoContainer .repcontainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}


/* Tools */
.tool input[type=checkbox] + label {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 30px !important;
width: 30px !important;
display:inline-block;
padding: 0 0 0 0px;
margin: 0px;
opacity: 30%;
}
.tool input[type=checkbox] + label:hover {
opacity: 50%;
}
.tool input[type=checkbox]:checked + label {
    opacity: 100%;
}
.toolDescriptionInput {
    height: 65px !important;
    margin-bottom: 2px !important;
}
.tool input[type=checkbox], .profileHeader input[type=checkbox] {
    display:none;
}
/* Hide spinner on Chromium brosers unless selected/hovered over */
.toolMaxInput:not(:hover):not(:focus)::-webkit-inner-spin-button,
.toolMaxInput:not(:hover):not(:focus)::-webkit-outer-spin-button {
    display: none;
}
/* Hide spinner on Firefox */
.toolMaxInput {
    appearance: textfield;
}
.toolMaxInput:focus, .toolMaxInput:hover {
    appearance: auto;
}
.portableIcon {
    background-image: url("https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Portable.png");
}
/* Also used in a lot of other places*/
.reusableIcon {
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/reuse.png'); 
    background-size: contain;
    background-repeat: no-repeat;
}


/* Special items */
.specialDescriptionInput {
margin-bottom: 0px !important;
}
.specialColumn {
    color: rgba(0,0,0,0.5);
    font-weight: bold;
    text-align: left;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 0 !important;
    margin-top: 7px;
    width: 140px;
}
.specialInput {
    width: 140px;
}

.toolDescriptionInput {
height: 65px !important;
margin-bottom: 2px !important;}

.egoDescInput {
    height: 60px;
}
.egoIdeologyInput {
    width: 100% !important; 
    height: 25px !important; 
    margin-bottom: 3px !important;
}
.egoSpecialLabel span {
    width: 150px;
    height: 20px;
    text-align: left;
    padding-left: 10px;
}
.egoSpecialLabel select {
    margin-right: 5px;
}
.resistanceChart.BLACK select {
    border: 1px solid #000;
}
.egoCheck {
    position: absolute !important;  
    top: 10px; 
    right: 5px; 
    height: 20px !important; 
    width: 20px !important; 
}


/* Skills */
.skillType {
    width: 100%;
    margin-right: 5px;
    height: 25px !important;
    color: #fff !important;
}
.skillRank {
    position: absolute;
    top: 3px;
    left: 6px;
    z-index: 20;
    width: 30px;
    height: 30px !important;
    border-radius: 100px;
    text-shadow: rgba(0,0,0,1) 0px 0px 5px;
    background-image: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0));
    background-color: rgba(0,0,0,0) !important;
    color: #fff;
    text-align: center;
    font-size: 14px;
    font-weight: bold;
}
.lightCost {
    color: #fee2b0;
    font-weight: bold;
    float: right;
}
.lightCost input {
    background-color: #fee2b0 !important;
    border-radius: 100px;
    color: rgba(0,0,0,0.5);
}
.skillN .icon, .skillE .icon {
    margin-top: 2px !important;
    margin-left: 5px !important;
}
.skillN select.whiteInput:focus,
.settingStyle select.whiteInput:focus {
    background-color: rgba(0, 0, 0, 0.2) !important;
}
/* Ego skills */
.skillE .icon {
    border: 1px #888 solid !important;
}


/* Damage helpers */
.damageHelperContainer b {
    display: inline-block;
    max-width: 80%;
    opacity: 30%;
    font-size: 9pt;
}
.damageHelperContainer input[type=number] {
    height: 50px !important;
    text-align: center;
    font-size: 16pt;
    font-weight: bold;
    opacity: 80%;
    margin-top: 3px !important;
}
.baseDamageInput {
    width: 55px !important;
    border-top: 2px solid #cc4125 !important;
    border-left: 2px solid #cc4125 !important;
    border-right: 2px solid #dbb748 !important;
    border-bottom: 2px solid #dbb748 !important;
}
.flatDamage input {
    width: 45px !important;
}
.flatHPInput, .flatSTInput {
    text-align: left !important;
    padding-right: 2px;
    padding-left: 8px;
}
.flatHPInput {
    border: 2px solid #cc4125 !important;
}
.flatSTInput {
    border: 2px solid #dbb748 !important;
}
/* Hide spinner on Chromium brosers unless selected/hovered over */
.flatHPInput:not(:hover):not(:focus)::-webkit-inner-spin-button,
.flatHPInput:not(:hover):not(:focus)::-webkit-outer-spin-button,
.flatSTInput:not(:hover):not(:focus)::-webkit-inner-spin-button,
.flatSTInput:not(:hover):not(:focus)::-webkit-outer-spin-button {
    display: none;
}
/* Hide spinner on Firefox */
.flatHPInput, .flatSTInput {
    appearance: textfield;
}
.flatHPInput:focus, .flatHPInput:hover,
.flatSTInput:focus, .flatSTInput:hover {
    appearance: auto;
}

.damageHelperType input[type=radio] {
    display: none;
}
.damageHelperType input[type=radio]:not(:checked) + label:hover {
    opacity: 60% !important;
    cursor: pointer;
}
.damageHelperType input[type=radio]:checked + label {
    opacity: 100%;
}
.damageHelperType input[type=radio] + label {
    opacity: 30%;
}
.damageHelperType label {
    height: 30px;
    width: 30px;
    margin: 0px;
    padding: 0px;
}
/* When no damage type is selected, the button is grayed out and unresponsive to input */
.applyDamageInput {
    opacity: 60%;
    cursor: default;
    height: 50px; 
    min-width: 50px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 2px; 
    background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/damage.png');
    border-radius: 5px;
    background-color: #222 !important;
    border: 1px #111 solid;
    pointer-events: none;
}
.damageHelperType:has(input:checked:not([value="None"])) ~ .applyDamage .applyDamageInput {
    opacity: 100%;
    pointer-events: auto;
}
.damageHelperType:has(input:checked:not([value="None"])) ~ .applyDamage .applyDamageInput:hover {
    background-color: #000 !important;
    cursor: pointer;
}



/* Roll helpers */
.helpers {
    margin-left: 1px;
    margin-right: 1px;
}
.helpers b, .work b {
    font-size: 9pt;
    opacity: 30%;
}
.speed {
    height: 30px;
    width: 30px;
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Speed.png');
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px;
    background-color: #222 !important;
    border: 1px #111 solid;
    margin: 1px;
}
.speed:hover,  button[type=roll].NDice:hover, button[type=action].NDice:hover,
.challengeButton:hover, .declare:hover, .btn:hover, .selectTargetButton:hover, .defenceDice:hover {
    background-color: #000 !important;
}
.expand-toggle:checked ~ .whisper {
    border: 1px #fee2b0 solid;
    opacity: 60%;
}
.difficultyInput {
    height: 50px !important; 
    width: 55px !important; 
    font-size: 12pt; 
    text-align: center; 
    margin-top: 3px !important; 
    margin-bottom: 0px;
}
.updateInput {
    height: 50px; 
    width: 50px; 
    background-size: contain;
    background-position: center;
    margin-top: 2px; 
    margin-right: 3px;
}
.utilitybuttons {
    height: 27px;
    background-size: contain;
    background-position: center;
}
.disadvCounter {
    border: 2px #cc4125 solid !important;
}
.disadvCheck {
    height: 30px !important;
    accent-color: #cc4125 !important;
}
.advCounter {
    border: 2px #93c47d solid !important;
}
.advCheck {
    height: 30px !important;
    accent-color: #93c47d !important;
}
.speedbox {
    text-align: center;
    width: 30px !important;
}
.sideDice {
    color: #fff;
    font-weight: bold;
}
.power {
    text-align: center !important;
    font-weight: bold;
    border: 1px #666 solid !important;
    margin-bottom: 2px !important;
    width: 40px !important;
}


/* Auto Update Indicator */
.autoUpdateIndicator {
    position: absolute;
    top: 6px;
    right: 6px;
    opacity: 80%;
    border-radius: 4px;
    pointer-events: none;
}
.loopEnabledToggle:not(:checked) ~ .autoUpdateIndicator {
    display: none;
}
.loopEnabledToggle:checked ~ .autoUpdateIndicator {
    border: 4px solid #dbb748;
}
.loopEnabledToggle:checked + .loopSearchingToggle:checked ~ .autoUpdateIndicator {
    border: 4px solid #93c47d;
}
.loopEnabledToggle:checked ~ .loopStandbyToggle:checked + .autoUpdateIndicator {
    border: 4px solid #cc4125;
}



/* Character stats */
.statBlock {
    margin: 3px;
    width: 100px;
    overflow: hidden;
    border-radius: 3px;
}
.statHeader {
    background-color: #000;
    font-weight: bold;
    padding: 0px;
    padding-bottom: 5px;
}
.statImage {
    background-color: #000;
    position: relative;
    overflow: hidden;
    height: 60px;
}

#InstinctStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Instinct.png');
}
#WisdomStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Wisdom.png');
}
#JusticeStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Justice.png');
}
#CharmStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Charm.png');
}
#InsightStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Insight.png');
}
#TemperanceStat {
background-image: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0)), url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/stats/Temperance.png');
}

.statInput {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;

	background-size: cover;
	background-repeat: no-repeat;
	background-position: bottom-left;
	background-size: 100%;
}
.statInput input {
	text-align: center;
	height: 100% !important;
	width: 100% !important;
	background-color: rgba(0,0,0,0.6) !important;
	font-weight: bold;
	font-size: 25pt;
}

.wisdom {
    color: #d9d9d9 !important; 
}
.justice {
    color: #46bdc6 !important;
}
.charm {
    color: #9c66c6 !important;
}
.insight {
    color: #ffe599 !important;
}
.temperance {
    color: #ac609d !important;
}


/* Status ailments */
.statusIcon {
    width: 25px;
    height: 25px;
}
.ailmentStates .statusIcon {
    width: 35px;
    height: 35px;
} 
.ailmentStates input[type="checkbox"]{
    display: none;
}
.ailmentStates label {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 3px;
}
.ailmentNum {
    color: #fff;
    font-weight: bold;
    background-color: transparent !important;
    padding-left: 1px;
    text-align: left;
}
.ailmentNumThisTurn {
    width: 30px !important;
    padding-right: 0px;
    position: absolute;
    left: 3px;
}
.ailmentNumNextTurn {
    color: #999;
    width: 28px !important;
    padding-right: 0px;
    position: absolute;
    left: 25px;
}

/* This rule disables the spinner (up and down buttons in number inputs) when not hovering over or selecting an ailment field */
.ailmentNumNextTurn:not(:hover):not(:focus)::-webkit-inner-spin-button,
.ailmentNumNextTurn:not(:hover):not(:focus)::-webkit-outer-spin-button,
.ailmentNumThisTurn:not(:hover):not(:focus)::-webkit-inner-spin-button,
.ailmentNumThisTurn:not(:hover):not(:focus)::-webkit-outer-spin-button {
    display: none;
}
/* This disables the spinner in Firefox! */
.ailmentNumNextTurn, .ailmentNumThisTurn {
    appearance: textfield;
}
.ailmentNumNextTurn:focus, .ailmentNumNextTurn:hover,
.ailmentNumThisTurn:focus, .ailmentNumThisTurn:hover {
    appearance: auto;
}
/* If the next turn field is disabled by a hide toggle (Burn/Bleed/Smoke/Charge individual setting) or by a hide toggle rev (Global setting) the standard field is returned to it's normal styling */
.status_effect_value .hide-toggle:not(:checked) ~ .ailmentNumThisTurn,
.status_effect_value .hide-toggle-rev:checked ~ .ailmentNumThisTurn {
    width: 45.5px !important;
    padding-right: 4px;
}
/* This lengthy boi disables interacting with the next turn field while selecting or hovering over the current turn field (the fields partially overlap) */
:is(.ailmentNumThisTurn:hover, .ailmentNumThisTurn:focus) +
:is(.ailmentNumNextTurn) {
    pointer-events: none;
    z-index:-1;
}
#ailmentBlock .contentContainer {
    padding-top: 10px;
	padding-bottom: 10px;
}
.status_effect_item {
	width: 30px;
}
.status_effect_value {
    width: 52px;
    height: 26px;
    text-align: center;
    border-radius: 5px;
}
.ailmentButton {
    background-color: transparent;
    width: 25px;
}


/* Automated state detection icons */
#state_Stagger, #state_Panic, #state_Defeat, #state_Immobile {
    display: hidden !important;
}
#state_Stagger:checked, #state_Panic:checked, #state_Defeat:checked, #state_Immobile:checked {
    accent-color: #555;
    opacity: 100%;
}


/* Custom ailments display */
.customAilText {
    width: 70px !important;
    text-align: left;
    font-weight: bold;
}
.ailmentIconSelector, .ailmentIconSelector .icon, .ailmentIconSelector .skillIcon {
    height: 25px;
    width: 25px;
}
.ailmentCustomDisplay .repcontainer {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.ailmentCustomDisplay .repcontrol,
.outfitCustomResistDisplay .repcontrol,
.conditionalButtonDisplay .repcontrol {
    display: none;
}
.ailmentCustomDisplay .repitem  {
    display: inline-block !important;
    flex-basis: 33%;
    min-width: 83.33px;
    overflow: hidden;
}
.ailmentCustomEditor {
    height: 280px;
}
.ailmentCustomEditor .repcontrol_move, #globalSettings .repcontrol_move {
    display: none;
}
.ailmentCustomEditor .repcontrol { 
    position: absolute;
    top: -38px;
    right: 0px;
}
.ailmentCustomDisplay .hide-item-rev {
    display: flex;
}


/* Game settings and custom ailment editor */
#globalSettings .repcontrol {
    display: none;
}
#globalSettings ::placeholder {
    color: #555 !important;
}
#globalSettings .transpInput {
    color: #555 !important;
}
.ailmentCustomEditor .repitem { 
    margin: 5px;
    flex-basis: 30%;
    min-width: 250px;
    padding: 5px;
    border-radius: 5px;
    background-color: #999;
    overflow: hidden;
}
.ailmentCustomEditor .repitem textarea {
    width: 205px;
    height: 37px;
    margin-bottom: 0px;
}
.repitemMock {
    margin: 2px;
    width: 160px;
    padding: 5px;
    border-radius: 5px;
    background-color: #999;
    overflow: hidden;
}
.repitemMock .settingStyle select {
    padding-left: 3px; padding-right: 3px;
}
.repitemMock .settingStyle div:has(b) {
    text-align: right;
    padding-right: 4px;
}
.repIconMock .columnAlign .rowContainer {
    align-items: flex-end !important;
}
.ailmentCustomEditor .itemcontrol {
    position: absolute;
    z-index: 10;
    right: 0px;
    top: 0px;
}
.ailmentCustomEditor .repcontainer, .ailmentCustomEditor .repcontainerMock  {
    display: flex;
    flex-wrap: wrap;
    max-height: 280px;
    overflow: auto;
    padding-left: 18px;
}
.hide-toggle-rev + .settingStyle.hide-item-rev {
    display: flex;
}
/* Displays additional options for the WhenHit ailment trigger */
div.settingStyle:has(select[name="attr_ailTrigger"] > option[value="WhenHit"]:checked)
~ div.hide-item {
    display: flex !important;
}



/* Icons! */
.skillAtt {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Attack.png');
}
.skillDef {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/defend.png');
}
.skillEvd {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/evade.png');
}
.skillAct {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Portable.png');
}
.skillMass {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Wide.png');
}
.skillSpecial {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/specialwhite.png');
}

.luck {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/fortunewhite.png');
}
.whisper {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/whisper.png');}
.damageResist {
    background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/DamageResist.png');
}
.damageResist-limbus {
    background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/limbus/DamageResist.png');
}

/* Ailment Icons */
.burn {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Burn.png');
}
.burn-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Burn.png');
}

.bleed {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Bleed.png');
}
.bleed-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Bleed.png');
}

.paralysis {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Paralysis.png');
}
.paralysis-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Paralysis.png');
}

.smoke {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Smoke.png');
}
.smoke-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Smoke.png');
}

.charge {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Charge.png');
}
.charge-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Charge.png');
}

.fortune {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Fortune.png');
}
.fortune-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Fortune.png');
}

.fragile {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Fragile.png');
}
.fragile-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Fragile.png');
}
.fragile-limbus-red {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/FragileRed.png');
}

.protection {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Protection.png');
}
.protection-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Protection.png');
}

.staggerprotection {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/StaggerProtection.png');
}
.staggerprotection-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/limbus/StaggerProtection.png');
}

.strength {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Strength.png');
}
.strength-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Strength.png');
}

.endurance {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Endurance.png');
}
.endurance-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Endurance.png');
}
.endurance-limbus-blue {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/EnduranceBlue.png');
}

.haste {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Haste.png');
}
.haste-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Haste.png');
}

.feeble {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Feeble.png');
}
.feeble-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Feeble.png');
}

.disarm {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Disarm.png');
}
.disarm-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Disarm.png');
}
.disarm-limbus-blue {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/DisarmBlue.png');
}

.bind {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Bind.png');
}
.bind-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Bind.png');
}

.panic {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Panic.png');
}
.panic-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Panic.png');
}
.panic-limbus-blue {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/PanicBlue.png');
}

.hostile {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Hostile.png');
}
.hostile-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Hostile.png');
}

.stagger, .fragilestagger {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/FragileStagger.png');
}
.stagger-limbus, .fragilestagger-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/FragileStagger.png');
}

.seal {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Seal.png');
}
.seal-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Seal.png');
}

.immobile {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Immobile.png');
}
.immobile-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Immobile.png');
}

.defeat {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/ailments/Defeat.png');
}
.defeat-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Defeat.png');
}


/* Limbus specific icons */
.sinking-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Sinking.png');
}

.tremor-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Tremor.png');
}
.tremorchain-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorChain.png');
}
.tremordecay-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorDecay.png');
}
.tremordistribution-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorDistribution.png');
}
.tremoreverlasting-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorEverlasting.png');
}
.tremorfracture-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorFracture.png');
}
.tremorreverb-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorReverb.png');
}
.tremorsuperposition-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TremorSuperposition.png');
}

.rupture-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Rupture.png');
}

.poise-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Poise.png');
}

.critical-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Critical.png');
}

.devastation-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Devastation.png');
}

.ruin-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Ruin.png');
}

.frostbite-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Frostbite.png');
}

.nails-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Nails.png');
}

.poison-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Poison.png');
}

.aggro-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Aggro.png');
}
.bullseye-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Bullseye.png');
}
.ammo-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Ammo.png');
}
.barrier-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Barrier.png');
}
.duel-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Duel.png');
}
.fist-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Fist.png');
}
.fist-limbus-green {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/FistGreen.png');
}
.heal-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Heal.png');
}
.kampule-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/KAmpule.png');
}
.ttime-limbus  {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/TTime.png');
}
.rottingskin-limbus  {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/RottingSkin.png');
}

.blood  {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.6.3/ProjectMoonTRPG/images/ailments/Blood.png');
}

.slashprotection-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/SlashProtection.png');
}
.slashfragility-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/SlashFragility.png');
}
.pierceprotection-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/PierceProtection.png');
}
.piercefragility-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/PierceFragility.png');
}
.bluntprotection-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/BluntProtection.png');
}
.bluntfragility-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/BluntFragility.png');
}

.wrath-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Wrath.png');
}
.lust-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Lust.png');
}
.sloth-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Sloth.png');
}
.gluttony-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Gluttony.png');
}
.gloom-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Gloom.png');
}
.pride-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Pride.png');
}
.envy-limbus {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/images/ailments/limbus/Envy.png');
}

.damageup-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.7/ProjectMoonTRPG/images/ailments/limbus/DamageUp.png');
}
.damagedown-limbus {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.7/ProjectMoonTRPG/images/ailments/limbus/DamageDown.png');
}

/* Community icons */
.style-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/community/Style.png');
}
.thorns-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/community/Thorns.png');
}
.rhythm-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/images/community/Rhythm.png');
}

.frenzy-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.7/ProjectMoonTRPG/images/community/Frenzy.png');
}
.shock-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.7/ProjectMoonTRPG/images/community/Shock.png');
}
.terror-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.7/ProjectMoonTRPG/images/community/Terror.png');
}
.staggerdamageup-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.7/ProjectMoonTRPG/images/community/StaggerDamageUp.png');
}
.staggerdamagedown-community {
background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.7/ProjectMoonTRPG/images/community/StaggerDamageDown.png');
}
/* Ailment Icons END */

.next { /* Aka update */
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/next.png');
}

.egoSkills .skillAtt, .egoAtt {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoAtt.png');
background-color: #000;
}

.egoSkills .skillDef, .egoDef {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoDef.png');
background-color: #000;
}

.egoSkills .skillEvd, .egoEvd {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoEvd.png');
background-color: #000;
}

.egoSkills .skillAct, .egoAct {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoAct.png');
background-color: #000;
}

.egoSpecial {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoSpecial.png');
background-color: #000;
}

.egoSkills .skillMass {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoWide.png');
background-color: #000;
}

.slash {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Slash.png');
}
.pierce {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/pierce.png');
}
.blunt {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/blunt.png');
}
.egoSlash {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoSlash.png');
}
.egoPierce {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoPierce.png');
}
.egoBlunt {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/egoBlunt.png');
}

.question {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/question.png');
}

.defend {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/defend.png');}
.evade {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/evade.png');}


.slashNormal {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResSlash.png');}

.slashNormalSTG {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResSlashStg.png');}

.pierceNormal {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResPierce.png');}

.pierceNormalSTG {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResPierceStg.png');}

.bluntNormal {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResBlunt.png');}

.bluntNormalSTG {
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/def/ResBluntStg.png');}

.skillIcon, .typeIcon, .resistIcon {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.resistIcon {
width: 30px;
height: 30px;}

.typeIcon {
width: 35px;
height: 35px;}


/* This... looks like it's supposed to be some tab changing CSS wizardry? It isn't in use currently */
#infoSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body, 
#infoSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body,
#skillSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#skillSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body,
#equipmentSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#equipmentSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body,
#exportSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#exportSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body,
#editSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#editSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body {
    display: none;
}


/* Rolltemplate styling */
.sheet-rolltemplate-message div {
    color: #fff !important;
    background-color: rgba(0,0,0,0.5) !important;
}

/* Damage helper message styling*/
.sheet-rolltemplate-damagecalculation img {
    height: 25px;
    width: 25px;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer {
    margin-top: 10px;
    border-radius: 5px;
    border: 1px solid #555;
    position: relative;
}


.sheet-rolltemplate-damagecalculation .userscript-calculationContainer div {
    min-height: 25px;
    line-height: 20px;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer > div:nth-child(n+2) div {
    padding-top: 3px;
    padding-bottom: 3px;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer div > img:first-child {
    position: absolute;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer div > img:first-child + div {
    margin-left: 25px;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer > div:nth-child(n+2) {
    border-bottom: 1px solid #555;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer > div:first-child {
    height: 30px;
    border: 2px solid #000;
}
.sheet-rolltemplate-damagecalculation .userscript-damageDisplay {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    text-align: center;
    width: 64%;
    position: absolute;
    left: 0px;
    top: 0px;
}
.sheet-rolltemplate-damagecalculation .userscript-baseDamage, .sheet-rolltemplate-damagecalculation .userscript-flatModifier {
    padding-left: 9px;
    line-height: 25px !important;
}
.sheet-rolltemplate-damagecalculation .userscript-updateStatDisplay {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 30px;
    width: 35%;
    background-color: #000;
    border: 2px solid #000 !important;
    position: absolute;
    right: 0px;
    top: 0px;
    font-size: 16px;
}
.sheet-rolltemplate-damagecalculation .userscript-calculationContainer:has(div:only-child) {
    display: none;
}
.sheet-rolltemplate-damagecalculation .userscript-hpCalculationContainer div:first-child { color: #cc4125; background-color: #111; }
.sheet-rolltemplate-damagecalculation .userscript-stCalculationContainer div:first-child { color: #f1c232; background-color: #111; }
.sheet-rolltemplate-damagecalculation .userscript-spCalculationContainer div:first-child { color: #6d9eeb; background-color: #111; }


/* Description and effect container styling */
.sheet-rolltemplate-baseRoll .userscript-descriptionContainer {
    width: 50%;
    height: auto;
    float: left;
}
/* If only one description is present, expand its width */
.sheet-rolltemplate-baseRoll :nth-child(1 of div.userscript-descriptionContainer):not(:has(+ .userscript-descriptionContainer)) {
    width: 100% !important;
}
.sheet-rolltemplate-baseRoll .userscript-effectDescription {
    max-height: 70px;
    overflow: auto;
    border: 1px #555 solid;
    padding-bottom: 1px;
}


/* AutoEffect message styling */
/* Yes, you have to write them all out like this... */
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer .userscript-autoEffectImage,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer .userscript-autoEffectImage,
.sheet-rolltemplate-message .userscript-autoeffectContainer .userscript-autoEffectImage,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer .userscript-autoEffectImage {
    height: 25px;
    width: 25px;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer a,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer a,
.sheet-rolltemplate-message .userscript-autoeffectContainer a,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer a {
    pointer-events: none;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer,
.sheet-rolltemplate-message .userscript-autoeffectContainer,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer {
    margin-top: 5px;
    border-radius: 5px;
    border: 1px solid #555;
    position: relative;
}
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer {
    float: left;
    width: 99.3%;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer > .userscript-autoeffectEntry,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer > .userscript-autoeffectEntry,
.sheet-rolltemplate-message .userscript-autoeffectContainer > .userscript-autoeffectEntry,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer > .userscript-autoeffectEntry {
    position: relative;
    padding-left: 25px;
    min-height: 25px;
    line-height: 20px;
    border-bottom: 1px solid #555;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer .userscript-autoEffectTitle,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer .userscript-autoEffectTitle,
.sheet-rolltemplate-message .userscript-autoeffectContainer .userscript-autoEffectTitle,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer .userscript-autoEffectTitle {
    width: calc(100% - 40px);
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectEntry div,
.sheet-rolltemplate-autoeffect .userscript-autoeffectEntry div,
.sheet-rolltemplate-message .userscript-autoeffectEntryn div,
.sheet-rolltemplate-baseRoll .userscript-autoeffectEntry div{
    padding-top: 3px;
    padding-bottom: 3px;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectEntry:has(div:first-child),
.sheet-rolltemplate-autoeffect .userscript-autoeffectEntry:has(div:first-child),
.sheet-rolltemplate-message .userscript-autoeffectEntryn:has(div:first-child),
.sheet-rolltemplate-baseRoll .userscript-autoeffectEntry:has(div:first-child){
    padding-left: 9px;
}
.sheet-rolltemplate-damagecalculation .userscript-autoeffectContainer > .userscript-autoeffectEntry > img:first-child,
.sheet-rolltemplate-autoeffect .userscript-autoeffectContainer > .userscript-autoeffectEntry > img:first-child,
.sheet-rolltemplate-message .userscript-autoeffectContainer > .userscript-autoeffectEntry > img:first-child,
.sheet-rolltemplate-baseRoll .userscript-autoeffectContainer > .userscript-autoeffectEntry > img:first-child {
    position: absolute;
    left: 0;
}
/* Collapseable section styling */
.sheet-rolltemplate-damagecalculation .userscript-collapseSection,
.sheet-rolltemplate-message .userscript-collapseSection,
.sheet-rolltemplate-baseRoll .userscript-collapseSection {
    max-height: 29px;
    transition: max-height 10s 0.1s ease-in;
    overflow: hidden;
}
.sheet-rolltemplate-damagecalculation .userscript-collapseSection:hover,
.sheet-rolltemplate-message .userscript-collapseSection:hover,
.sheet-rolltemplate-baseRoll .userscript-collapseSection:hover {
    max-height: 500px;
    transition: max-height 3s 0.1s ease;
}
/* Removed mergin for every section but the first */
.sheet-rolltemplate-damagecalculation .userscript-collapseSection ~ .userscript-collapseSection,
.sheet-rolltemplate-message .userscript-collapseSection ~ .userscript-collapseSection,
.sheet-rolltemplate-baseRoll .userscript-collapseSection ~ .userscript-collapseSection {
    margin-top: 0px;
}
/* Create arrow to indicate if the section is collapsed or expanded */
.sheet-rolltemplate-damagecalculation .userscript-collapseSection .userscript-arrow,
.sheet-rolltemplate-message .userscript-collapseSection .userscript-arrow,
.sheet-rolltemplate-baseRoll .userscript-collapseSection .userscript-arrow {
    position: absolute; top: 10px; right: 10px;   
    width: 0px; 
    height: 0px; 
    border-bottom: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #fff;
    opacity: 50%;
    transition: opacity 10s 0.1s ease;
}
/* Create arrow to indicate if the section is collapsed or expanded */
.sheet-rolltemplate-damagecalculation .userscript-collapseSection:hover .userscript-arrow,
.sheet-rolltemplate-message .userscript-collapseSection:hover .userscript-arrow,
.sheet-rolltemplate-baseRoll .userscript-collapseSection:hover .userscript-arrow {
    opacity: 0%;
    transition: opacity 0.6s 0.1s ease;
}


/* Action buttons below chat messages */
.sheet-rolltemplate-actionbuttons {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    width: 100%;
}
.sheet-rolltemplate-actionbuttons .sheet-actionButtonContainer {
    background-color: #454545;
    position: relative;
    top: -10px;
    left: 2px;
    padding: 5px;
    margin: -2px;
    border-radius: 5px;
    width: calc(50% - 8px);
}
.sheet-rolltemplate-actionbuttons .sheet-button {
    height: 100%;
    background-color: #6f8b60;
    border-radius: 10px;
}
.sheet-rolltemplate-actionbuttons .sheet-actionButtonContainer:not(:has(div)) {
    display: none;
}
.sheet-rolltemplate-actionbuttons .sheet-button a {
    color: #fff;
    background-color: rgba(0, 0, 0, 0);
    border: 0px;
    border-radius: 10px;
    width: 76%;
}
.sheet-rolltemplate-actionbuttons .sheet-button a:hover {
    background-color: rgba(255, 255, 255, 0.15);
}
.sheet-rolltemplate-actionbuttons img {
    width: 20px;
    height: 20px;
    margin-right: 2px;
}
.sheet-rolltemplate-actionbuttons a:has(img) {
    position:absolute;
    pointer-events: none;
    background-color: rgba(0,0,0,0) !important;
    padding: 4px;
    z-index: 1;
}
.sheet-rolltemplate-actionbuttons a:has(img) + a {
    padding-left: 25px !important;
}


/* Chat avatar fix */
/* For the love of all that is holy do not change these styling rules. I cannot describe to you how long it took to get them right */
.sheet-rolltemplate-actionbuttons:not(:first-child) .sheet-actionButtonBlocker,
.sheet-rolltemplate-actionbuttons:not(:first-child) .sheet-actionButtonBlockerWhisper {
    position: absolute;
    height: calc(100% + 16px);
    margin-top: -60px;
    background-color: #d3e5f5;
    top: 25px;
    left: -50px;
    right: -50px;
}
.sheet-rolltemplate-darkmode .sheet-actionButtonBlocker {
    background-color: var(--surface-dark2) !important;
}
.sheet-rolltemplate-darkmode .sheet-actionButtonBlockerWhisper {
    background-color: var(--surface-dark-gamecard) !important;
}
.sheet-rolltemplate-actionbuttons:not(:first-child):has(:nth-child(3):not(:empty)) {
    position: relative;
}
.sheet-rolltemplate-actionbuttons:not(:first-child) {
    position: relative;
    margin-bottom: -25px;
}
.sheet-rolltemplate-actionbuttons:not(:first-child) .sheet-actionButtonContainer {
    top: -35px;
}


/* Alright here's the actual sheet tab switching functionality */
.toggleButtons {
width: 100%;
height: 60px;
min-width: 800px;
max-width: 860px;
display: flex;
align-items: center;
justify-content: center;
}

.sheet-equipment,
.sheet-skills,
.sheet-details,
.sheet-edit,
.sheet-export {
    display: none;
}

/* show the selected tab */
.sheet-tabstoggle[value="equipment"] ~ div.sheet-equipment,
.sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
.sheet-tabstoggle[value="details"] ~ div.sheet-details,
.sheet-tabstoggle[value="export"] ~ div.sheet-export,
.sheet-tabstoggle[value="edit"] ~ div.sheet-edit {
    display: block;
}

.sheet-tabstoggle[value="equipment"] ~ div #equipmentButton, .sheet-tabstoggle[value="skills"] ~ div #skillsButton, .sheet-tabstoggle[value="details"] ~ div #detailsButton, .sheet-tabstoggle[value="export"] ~ div #exportButton, .sheet-tabstoggle[value="edit"] ~ div #editButton {
    color: #fee2b0 !important;
    background-color: #333;
}

.toggleButtons button {
    height: 100%;
    width: 100%;
    display: flex;
    font-size: 16pt;
    font-weight: bold;
    border-radius: 5px 5px 0px 0px;
    align-items: center;
    justify-content: center;
    background-color: #111;
    color: #888 !important;
}


/* Combat options */
.combatOptionsContainer {
    margin-bottom: 6px;
}
.combatOptionsContainer b {
    display: inline-block;
}
.combatOptionsContainer .tokenName {
    display: inline-block;
    width: 100%;
    height: 12px !important;
    padding: 0;
    font-size: 9pt;
    font-weight: bold;
    text-align: center;
    opacity: 30%;
    color: #fff;
    background-color: transparent;
    pointer-events: none;
}
.combatOptionsContainer .tokenName::placeholder {
    opacity: 100% !important;
}
.combatOptionsContainer :is(b, .tokenName) {
    margin-bottom: 2px; 
}
.combatOptionsContainer :is(img[src=""], img:not([src])) {
    display: none;
}
.combatOptionsContainer :is(img[src=""], img:not([src])) + input[type="number"] {
    display: none;
}
.combatOptionsContainer .bars {
    height: 24px;
    background-color: #222;
}
.combatOptionsContainer .bars.bars:not(:first-child) {
    margin-left: 2px;
}
.combatOptionsContainer .Cstat {
    width: 100% !important;
    font-size: 12pt;
    pointer-events: none;
}
.combatOptionsContainer .Cstat::-webkit-inner-spin-button,
.combatOptionsContainer .Cstat::-webkit-outer-spin-button {
    display: none;
}
/* This disables the spinner in Firefox */
.combatOptionsContainer .Cstat {
    appearance: textfield;
}
.hide-toggle-rev ~ .combatOptionsContainer.hide-item-rev {
    display: flex;
}
.selectTargetButton, .targetToken {
    height: 44px; 
    width: 44px;
}
.selectTargetButton {
    padding: 3px;
    border-radius: 5px;
    background-color: #222 !important;
    border: 1px #111 solid;
}
.targetToken {
    opacity: 0.5;
}
.selectTargetIcon {
    height: 50px; 
    width: 50px;
    position: absolute;
    bottom: 0;
    left: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.6.2/ProjectMoonTRPG/imagesResized/icons/target.png');
}
/* Last defence dice display */
.defenceDice {
    height: 52px !important;
    width: 52px !important;
    padding: 4px;
    font-size: 20px;
    text-shadow: #000 0 0 3px, #000 0 0 10px;
    text-align: center;
    border: 1px #111 solid !important;
    border-radius: 5px;
    background-color: #222 !important;
    background-size: 45px;
    background-position: 45% 45%;
    background-repeat: no-repeat;
    background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/Release-v0.6.2/ProjectMoonTRPG/imagesResized/icons/egoDef.png');
}

.defenceDice:not(:hover):not(:focus)::-webkit-inner-spin-button,
.defenceDice:not(:hover):not(:focus)::-webkit-outer-spin-button {
    display: none;
}
/* This disables the spinner in Firefox */
.defenceDice {
    appearance: textfield;
}
.defenceDice:focus, .defenceDice:hover {
    appearance: auto;
}


/* Generic token mode display */
.genericTokenContainer {
    position: fixed;
    bottom: 0px;
    left: 0%;
    width: calc(99% - 14px);
    z-index: 999;
    padding: 5px;
    background-color: #1F1F1F !important;
}
#genericTokenModeToggle + .genericTokenContainer {
    display: none !important;
}
#genericTokenModeToggle:checked + .genericTokenContainer {
    display: flex !important;
}
.genericTokenInstanceContainer {
    resize: vertical;
    max-height: 450px;
    min-height: 150px;
    overflow-y: auto;
}
.genericTokenInstanceContainer .repcontainer {
    display: flex;
    flex-wrap: wrap;
    max-width: calc(99% - 64px);
}
.genericTokenInstanceContainer .repcontrol { 
    display: none;
}
.genericTokenInstanceContainer .hide-toggle-rev + .hide-item-rev {
    display: inline-block !important;
}
.genericTokenInstanceContainer .hide-toggle-rev:checked + .hide-item-rev {
    display: none !important;
}

/* Generic token controls */
.genericTokenSelectButton {
    position: absolute;
    top: -2px;
    left: -2px;
    height: 20%;
    width: calc(100% + 2px);
    background-color: transparent;
}
.genericToken_controls {
    justify-content: space-around;
    width: 50px;
    height: 130px;
    margin: 10px 5px 10px 5px;
}
.genericToken_controls button {
    background-color: transparent;
}

/* Individual generic token*/
.genericToken {
    height: 130px;
    width: 120px;
    margin: 5px;
}
.style-toggle:checked + .genericToken {
    height: 126px;
    border: 2px solid #666;
}
.genericToken .tokenName {
    background-color: transparent;
    color: #999;
    width: 100%;
    padding: 0;
    pointer-events: none;
    overflow: ellipsis;
}
.genericToken .bars {
    width: 100px !important;
    height: 20px;
}
.genericToken .bars:not(:first-child) {
    margin-top: 2px;
}
.genericToken :is(.Cstat, .Mstat, .Tstat) {
    font-size: 12pt;
}
.genericToken .Mstat{
    width: 33% !important;
    padding: 4px 2px 4px 2px;
}
.genericToken .Tstat {
    width: auto !important;
    left: 30px;
    z-index: 3;
}
.tokenAilment, .targetAilment {
    width: 25px;
    height: 25px;
    margin-top: 2px;
}
:is(.tokenAilment, .targetAilment) img {
    position: relative;
    opacity: 90%;
    left: 0;
    width: 25px;
    height: 25px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}
:is(.tokenAilment, .targetAilment) input[type="number"] {
    position: relative;
    top: -25px;
    left: -2px;
    background-color: transparent;
    color: #fff;
    font-weight: bold;
    text-shadow: #000 0 0 3px, #000 0 0 5px, #000 0 0 10px;
    padding-left: 2px;
    text-align: center;
    z-index: 2;
}
.targetAilment {
    pointer-events: none;
}
.tokenAilment input[type="number"]:not(:hover):not(:focus)::-webkit-inner-spin-button,
.tokenAilment input[type="number"]:not(:hover):not(:focus)::-webkit-outer-spin-button {
    display: none;
}
.tokenAilment input[type="number"]:hover, :hover::-webkit-inner-spin-button,
.tokenAilment input[type="number"]:hover, :hover::-webkit-outer-spin-button,
.tokenAilment input[type="number"]:focus, :hover::-webkit-inner-spin-button,
.tokenAilment input[type="number"]:focus, :hover::-webkit-outer-spin-button {
    z-index: 3;
}
.tokenAilment input[type="number"] {
    appearance: textfield;
}
.tokenAilment input[type="number"]:not(:hover):not(:focus) {
    width: 31px !important;
}
.tokenAilment input[type="number"]:focus, .tokenAilment input[type="number"]:hover {
    appearance: auto;
    width: 3.5em;
}


/* AutoScript Editor */
.autoscriptEditorContainer {
    position: fixed;
    top: 0px;
    left: 2%;
    width: 95%;
    z-index: 999;
}
#autoScriptEditorToggle + .autoscriptEditorContainer {
    display:none !important;
}
#autoScriptEditorToggle:checked + .autoscriptEditorContainer {
    display:block !important;
}
.autoScriptEditorTarget {
    position: absolute;
    top: 2px;
    left: 145px;
    color: #999;
    pointer-events: none
}
.autoscriptEditorContainer label {
    color: #B3B3B3;
}
#autoScriptInput {
    resize: vertical;
    overflow: auto;
    min-height:60px;
    height: 120px;
    max-height: 500px;
}


/* AutoEffect conditional buttons */
.conditionalButtonDisplay .repcontainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.conditionalButtonDisplay .repitem {
    width: 49%;
}
.conditionalButton {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 12px;
    border: 1px #555 solid;
    background-color: #85a874;
    margin-left: 2px;
    margin-right: 2px;
    width: 100%;
    height: 30px;
    z-index: 0;
}
.conditionalButtonAct {
    position: absolute;
    top: 0;
    left: 1px;
    width: calc(100% + 2px);
    height: 100%;
    border-radius: 12px;
    background-color: #000;
    opacity: 0.2;
    z-index: 1;
}
.conditionalButtonAct:hover {
    opacity: 0;
}
.conditionalButtonName {
    position: absolute;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    left: 0;
    max-width: calc(95% - 34px);
    padding-left: 34px;
    font-size: 9pt;
    line-height: 1em;
    max-height: 2em;
    font-weight: bold;
    color: #fff;
    z-index: 3;
}
.conditionalButtonIcon {
    position: absolute;
    pointer-events: none;
    left: 1px;
    width: 30px;
    height: 30px;
    z-index: 3;
    border-radius: 12px 0 0 12px;
    border: 1px #555 solid;
}


/* Assorted buttons */
.shareButton, .editButton, .autoScriptButton, .closeAutoScriptButton, .saveAutoScriptButton, .styleAutoScriptButton, .styleAutoScriptDefault, .copyButton, .displayButton, .lockButton {
    position: absolute;
    height: 25px;
    width: 25px;
    border-radius: 5px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

:is(.shareButton, .editButton, .autoScriptButton, .copyButton, .displayButton, .lockButton):hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
}


:is(.closeAutoScriptButton, .saveAutoScriptButton, .styleAutoScriptButton, .styleAutoScriptDefault):hover {
    background-color: #000 !important;
}

.shareButton {
    bottom: 5px;
    right: 5px;
    z-index: 20;
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/share.png');
    
}

.editButton {
    bottom: 5px;
    right: 35px;
    z-index: 20;
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/edit.png');
}

.autoScriptButton {
    bottom: 5px;
    right: 65px;
    z-index: 20;
    background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/script.png');
}

.closeAutoScriptButton {
    top: 4px;
    right: 6px;
    z-index: 20;
    background-image: url('https://raw.githubusercontent.com/beautidemise/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/exit.png');
}

.saveAutoScriptButton {
    top: 4px;
    right: 36px;
    z-index: 20;
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
}

.styleAutoScriptButton {
    top: 4px;
    right: 80px;
    z-index: 20;
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
}
.toggleStylingButton:checked ~ .styleAutoScriptButton {
    display: none !important;
}

.styleAutoScriptDefault {
    top: 4px;
    right: 80px;
    z-index: 20;
    padding-left: 4px;
    padding-right: 4px;
    width: auto;
}
.toggleStylingButton:not(:checked) ~ .styleAutoScriptDefault  {
    display: none !important;
}

:is(.augmentBlock, .specialBlock, .skillBlock) .autoScriptButton {
    right: 35px;
}

.copyButton {
    top: 5px;
    right: 5px;
    z-index: 1;
    background-color: transparent;
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/copy.png');
    opacity: 50%;
}

.displayButton {
    top: 5px;
    right: 35px;
    z-index: 1;
    background-color: transparent;
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/view-hide.png');
    opacity: 50%;
}

.lockButton {
    height: 30px;
    width: 30px;
    top: 3px;
    left: 5px;
    border-radius: 0px;
    background-color: transparent;
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/lock-unlock.png');
    opacity: 50%;
}

.syncIcon {
    height: 5px;
    width: 5px;
    top: 7px;
    left: 29px;
    background-color: #cc4125;
    border-radius: 100px;
}

.arrowholder {
    height: 30px; 
    width: auto !important;
    position: absolute; 
    top: 0px; 
    left: 45px;
    right: 0px; 
    z-index: 1;
}

.arrow {
    position: absolute; top: 12px; right: 10px;   
    width: 0px; 
    height: 0px; 
    border-bottom: none;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 14px solid #fff;
    opacity: 50%;
}

.switch-toggle:checked ~ .arrow {
    position: absolute; top: 10px; right: 13px;  
    width: 0px; 
    height: 0px; 
    border-left: none;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 14px solid #fff;
    opacity: 100%;
}

.smallarrow {
    width: 0px; 
    height: 0px; 
    border-bottom: none;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 12px solid #fff;
    opacity: 50%;
}

.switch-toggle:checked ~ .smallarrow {
    margin-bottom: 2px;
    margin-right: 2px;
    width: 0px; 
    height: 0px; 
    border-left: none;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 12px solid #fff;
    opacity: 100%;
}

.switch-toggle:checked ~ .displayButton {
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/view.png');
}

.switch-toggle:checked ~ .lockButton {
    background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/lock.png');
    opacity: 100%;
}

.btn {
    border-radius: 5px;
    background-image: none;
    background-color: #222 !important;
    border: 1px #111 solid;
    height: 20px;
    padding: 3px;
    border-radius: 3px;
    color: #fff !important;
    background-color: #222 !important;
    border: 1px #111 solid;
    font-weight: bold;
    min-width: 40px;
    background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0));
    text-align: center;
    text-shadow: none;
    box-shadow: none !important;
    margin-right: 5px;
    margin-left: 5px;
}

/* Seem to be used specifically for custom ailments */
.btn-danger {
    width: 45px;
    height: 25px;
}

/* Colors */
.conditioalButtonColorSelection[value="blue"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-yellow { background-color: #7397d1; }
.conditioalButtonColorSelection[value="yellow"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-blue { background-color: #dbb748; }
.conditioalButtonColorSelection[value="orange"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-blue { background-color: #cf8c44; }
.conditioalButtonColorSelection[value="red"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-red { background-color: #c25944; }
.conditioalButtonColorSelection[value="purple"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-purple { background-color: #8e7cc3; }
.conditioalButtonColorSelection[value="green"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-green { background-color: #85a874; }
.conditioalButtonColorSelection[value="black"]:checked ~ .conditioalButtonColor,
.sheet-rolltemplate-actionbuttons .sheet-green { background-color: #000000; }


.WHITE {
    background-color: #eee !important;
}
.BLACK {
    background-color: #000 !important;
}

.HP{
background-color: #cc4125 !important;
}
.HPtext, .instinct, .counterText {
color: #cc4125 !important;
}


.STGR {
    background-color: #dbb748 !important;}
.STGRtext {
    color: #dbb748 !important;}

.egoSTGR {
    background-color: #f1c232 !important;
}

.egoSTGRtext {
    color: #f1c232 !important;
}

.SAN {
    background-color: #6d9eeb !important;}
.SANtext {
    color: #6d9eeb !important;
}

.LIGHT {
    background-color: #fee2b0 !important;}
.LIGHTtext {
    color: #fee2b0 !important;}

.weapon {
    background-color: #c25944 !important;
}

.outfit {
    background-color: #7397d1 !important;
}

/* It's kind of incredible this is only the third mention of the word augment in this file. You'd expect it to come up a lot more */
.augment {
    background-color: #85a874 !important;}

.tool {
    background-color: #8e7cc3 !important;}

.toolText {
    color: #8e7cc3 !important;
}

.special {
    background-color: #cf8c44 !important;
}

.ego, .skillE {
    background-color: #111 !important;
}

.skillN {
    background-color: #555 !important;
}

.darkBG {
    background-color: #333 !important;
    padding: 5px !important;
}

.egoDiceDEF {
    border: 1px #6d9eeb solid;
    color: #6d9eeb !important;
    height: 30px;
    margin-right: 10px !important;
}

.egoDiceEVD {
    border: 1px #f1c232 solid;
    color: #f1c232 !important;
    height: 30px;
}

.egoDiceATK {
    border: 1px #cc4125 solid;
    color: #cc4125 !important;
    height: 30px;
}

.egoDiceATK input, .egoDiceATK .plainText {
    color: #cc4125 !important;
}

.egoDiceDEF input, .egoDiceDEF .plainText {
    color: #6d9eeb !important;
}

.egoDiceEVD input, .egoDiceEVD .plainText {
    color: #f1c232 !important;
}
/* Colors end */