*{
        margin: 0px;
        padding: 0px;
        text-decoration: none;
        list-style: none;
        border-style: none;
	line-height: 1;
    }

body {
    font-family: 'Noto Sans JP', sans-serif;
    }

::placeholder {
color: #fff;
opacity: 50%;
}

textarea::placeholder, .CharName::placeholder, .CharResidence::placeholder, .egoIdeologyInput::placeholder {
color: #111;
opacity: 30%;
}

.contentName, .viewerName, .skillName, .headerName, .skillSelectionElement .skillSelectionName, input[type=text] {
text-overflow:ellipsis;
}

.editCover {
position: absolute;
z-index: 5px;
background-color: rgba(0,0,0,0.6);
top: 36px;
left: 0px;
bottom: 0px;
right: 0px;
}

.resistBox {
position: absolute; 
bottom: 35px; 
right: 5px; 
background-color: #888; 
border-radius: 5px; 
padding: 3px;
z-index: 20;
}

.resistBox div {
margin: 2px;
}

.skillName, .topRight {
width: 140px !important;
margin-left: 40px;}

.topRight {
height: 25px;
position: absolute;
right: 5px;
text-align: center;
top: 5px;}

a, a:hover {
text-decoration: none !important;}

#mainContainer {
width: 100%;
display: flex;
position: relative;
min-width: 800px;

}

.banner {
text-align: left; font-weight: bold; padding: 5px; width: 50%;
height: 50px; color: #fff;
text-transform: uppercase;
}

.rowContainer {
display: flex;
align-items: start;
justify-content: start;
width: 100%;
position: relative;
}

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

.rowContainer select {
width: 100%;
text-align: center;}

#credits, #settings {
border: 1px transparent solid;
}

#settings label {
color: #fff !important;
font-size: 10pt !important;
}

.qolButton {
height: 15px;
width: 15px;
align-text: 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;
}

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



#credits {
width: 27px;
height: 27px;
position: absolute;
top: 2px;
left: 63px;
background-color: rgba(0,0,0,0);
border-radius: 5px;
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);

}

#settings {
width: 27px;
height: 27px;
position: absolute;
top: 2px;
right: 0px;
background-color: rgba(0,0,0,0);
border-radius: 5px;
overflow: hidden;
color: #fee2b0;
font-weight: bold;
z-index: 90;
}

#settings:hover {
height: 450px;
width: 300px;
border: 1px #fee2b0 solid;
border-radius: 5px 15px 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: 25px;
height: 25px;
color: #fee2b0;
font-size: 20px;
border-radius: 100px;
border: 1px #fee2b0 solid;}

.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;

}

.statusIcon {
width: 25px;
height: 25px;
}

.ailmentStates .statusIcon {
width: 35px;
height: 35px;
}

.creditText {
padding: 10px 10px 10px 50px;
}

.creditText input {
height: 15px !important;}

.settingsText {
padding: 35px;
}

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

#logo img {width: 150px; min-width: 150px;}

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

.titleSheet {
color: #fee2b0; 
font-weight: bolder;
display: flex;
align-items: center;
font-size: 15pt;
height: 20px;
position: absolute;
top: 0;
left: 180px;
min-width: 600px;
}
.sheetform, .sheet_bg {background-color: #1F1F1F !important; position: relative; min-width: 850px;}

.rankTab {
position: absolute;
top: 0;
left: 0;
border-radius: 5px 5px 0px 0px;
}  
    
    input[type="number"]{border-style: none; padding:none; margin: none; vertical-align: middle; background-color: #ddd;}
    input[type="text"]{border-style: none; outline-style: none; padding:none; margin: none; vertical-align: middle; background-color: #ddd;}

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

    textarea::-webkit-outer-spin-button,textarea::-webkit-inner-spin-button {
-webkit-appearance: none;  margin: 0;
}

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

h3,h4, .viewerName {
vertical-align: middle; 
color: #fee2b0 !important; 
font-weight: bolder;}

.sheet_bg{
            width: 100%;
            overflow: hidden;
            text-align: center;
            }
            
        /* 주사위 */
	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;
	font-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{
            //color: #ff7b00;
            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;
          }

        .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;}

          #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;}

        .title {
            height: 30px;
	    width: 100%;
            color: #fee2b0 !important;
        }

	.toggleContainer .title {
	background-color: #888 !important;
	}

        .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;}

textarea, input { outline: none; }

.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;}

.distortProfile .CharImage {
background-color: #111;
border: 2px #111 solid;
top: 30px;
}

.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: 155px;}

.CharImage img {
position: absolute;
top: 0;
right: 0;
height: 100%;
object-fit: contain !important;
z-index: 2;
}

.CharTopNotes {
height: 50px !important;
margin: 0 !important;
}

.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;
}

.levelBox input {
height: 25px !important;}

.counter {
opacity: 100%;
}

.bars {position: relative; background-color: #111; width: 90px !important; height: 25px; height: 37px; border-radius: 5px;}

.Cstat, .Mstat {
font-size: 16pt; 
font-weight: bold;}	

.Cstat{
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%;
}

#Counter span {
font-weight: bold;
}

.observationSelect span {
font-size: 9px;
}

.observationSelect .columnAlign {
width: 50%;
}

.distortProfile .Mstat {
font-size: 14pt;
border-left: 2px #cc4125 dotted;
background-color: #000;
position: absolute;
top: 0;
right: 0;
z-index: 20;
}

.contentBlock {width: 100%; display: flex; justify-content: start; align-items: start;}

.sectionHeader {
background-color: #ddd;
font-color: #fff;
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;
}

.skillType {
margin-top: 8px !important;
margin-right: 5px;
height: 25px !important;
}

.headerName {
width: 95px;}

.weaponRankBox, .weaponRangeBox{
color: #fff !important;
border-radius: 0px 0px 5px 0px;
padding: 4px;
height: 25px;
position: absolute;
top: 30px;
left: 0;
z-index: 5;
}

.weaponRankBox {
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;
}

.weaponType {
position: absolute;
top: 38px;
left: 70px;
z-index: 4;
width: 100px;
justify-content: start;
}

.weaponRankBox input, .outfitRank {
width: 25px;
text-align: center;
background-color: rgba(0,0,0,0.2) !important;
color: #fff;
font-weight: bold;
height: 25px !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;}

.outfitRank {
margin-left: 5px;
margin-right: 5px;}

.outfitText {
color: #fff;
font-weight: bold;
}

.weaponRangeBox select, .weaponRankBox select{
width: 70px;
background-color: rgba(0,0,0,0.2) !important;
color: #fff;
font-weight: bold;
}

.darkInput, .ailmentNum {
background-color: rgba(0,0,0,0.2) !important;
color: #fff;
font-weight: bold;
}

.transpInput {
background-color: rgba(0,0,0,0) !important;
color: #fff;
font-weight: bold;
}

.whiteInput {
background-color: rgba(256,256,256,0.1) !important;
color: #eee;
font-weight: bold;
}

.iconHolder {
height: 35px;
width: 45px;
}

.iconHolder img {
height: 35px;
width: 35px;}

.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;

}

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


        .type-image{width: 40px; height: auto; text-align: center;}
        input[type="checkbox"]{ width: 21px;  height: 21px; text-align: center; vertical-align: middle;}
        .combatDice{text-align: center; justify-content: end; align-items: center; margin-right: 3px;}
        /* 무기 */
        .weaponContainer {width: 100%; max-width: 400px; display: flex; align-items: start; justify-content: start; position: relative; padding: 5px; flex-wrap: wrap;}

	.weapon_distance, .weapon_type {
	height: 25px;
	width: 50% !important;
	text-align: center;	
	}

	.weapon_type {width: 90px !important; height: 25px; margin-right: 5px;}


        .outfitResistVal {width: 45px; text-align: center;}


	#ailmentBlock .contentContainer {
            	padding-top: 10px;
		padding-bottom: 10px;
	}	

	 .status_effect_item {
	width: 35px;}

       .status_effect_value {width:50px; height: 15px; text-align: center;}

        .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;} 

.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;}
.diceVal {
text-align: left !important;}

.template_icon, .weaponIcons, .weapon2_icon {
width: 35px;
min-width: 35px;
height: 35px;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
overflow-hidden;
position: relative;
}

.attackIcon {
position: absolute;
top: 0;
left: 0;
}

.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;
}

.rankText {
display: none;
position: absolute;
top: -5px;
left: 3px;
}

.attackIcon .type-image, .resIconRight .type-image, .resIconLeft .type-image {
opacity: 0;}

/* Hide the toggle checkbox */
.expand-toggle, .hide-toggle, .hide-toggle-rev {
display: none;}

/* Style the button */

.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%;
}

.ailmentNum {
opacity: 60%;}

.fade-toggle ~ div .ailmentNum {
opacity: 80%;
}

.fade-toggle:checked ~ div .ailmentNum {
opacity: 40%;
}


/* Style the button when the 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 !important;
}

.tool input[type=checkbox], .profileHeader input[type=checkbox] {
display:none;
}
 
.portableIcon {
background-image: url("https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/Portable.png");
}

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

.profileHeader {
position: absolute;
top: 3px;
left: 3px;
z-index: 5;
}

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

.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%;
}

.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;
margin: 0px;
opacity: 20%;
}



.tool input[type=checkbox]:checked + label
{
opacity: 100%;
}

.profileHeader input[type=checkbox]:checked + label {
opacity: 30%;
}

.half {
width: 49%;}

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

.egoDescInput {
height: 60px;

}

.egoIdeologyInput {
width: 100% !important; 
height: 25px !important; 
margin-bottom: 3px !important;
}


textarea {
width: 100%;
max-height: 100px;
resize: none;
}

.weaponDescription, .weaponEffect {
width: 50%;
}

.outfitDescriptionInput {
height: 60px !important;}

.weaponDescriptionInput, .weaponEffectInput, .outfitDescription, .outfitDescriptionInput, .augmentDescriptionInput {
position: relative;
margin-bottom: 0px;
}

.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;}

.specialColumn select {
height: 25px !important;
text-align: left !important;}


.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;
}

.resistanceChart {
flex-wrap: wrap;
min-width: 50%;
max-width: 100%;
}

.ailmentNum {
width: 50px; text-align: center;
}

.ailmentStates label {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 3px;
}


#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%;
}

.resistanceChart select {
width: 55px !important;
justify-content: start;
align-items: center;

}

.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;
}
.declare {
height: 25px;
padding: 3px;
border-radius: 3px;
color: #fff !important;
background-color: #222 !important;
border: 1px #111 solid;
font-weight: bold;
min-width: 40px;
}

.speed:hover,  button[type=roll].NDice:hover, button[type=action].NDice:hover, .challengeButton:hover, .declare:hover {
background-color: #000 !important;
}

.resistanceChart img, .resistanceChart select {
margin: 0; padding: 0;}

.resistanceChart select{
  -webkit-appearance: none;
  -moz-appearance: none;
  text-indent: 1px;
  text-overflow: '';
}

.resistanceChart img {
height: 30px !important;
width: 30px !important;
}

.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;
}

.lightCost {
color: #fee2b0;
font-weight: bold;
float: right;

}

.helpers {
margin-left: 1px;
margin-right: 1px;}

.helpers b, .work b {
font-size: 9pt;
opacity: 30%;
}


.noHover{
 cursor: text !important;
 background-color: #ddd !important;
}

.lightCost input {
background-color: #fee2b0 !important;
border-radius: 100px;
color: rgba(0,0,0,0.5);
}


.skillSelectionElement {
position: relative;

}

.blocker {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
}

.skillSelectionElement .attackIcon, .skillN .attackIcon, .skillE .attackIcon {
border-radius: 100px;
overflow: hidden;
height: 30px;
width: 30px;
border: 1px #fff solid;
}

.skillE .attackIcon {
border: 1px #888 solid !important;}



.skillSelectionElement img, .skillIcon, .skillE img {
height: 30px;
width: 30px;
}




.skillNone {}

.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');
}

.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');}

.expand-toggle:checked ~ .whisper {
border: 1px #fee2b0 solid;
opacity: 60%;
}

.next {
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;}

input[type='checkbox'] {
accent-color: #fee2b0;
opacity: 50%;
}

input[type='checkbox']:checked {
opacity: 100%;
}

.skillSelectionLabel .attackIcon 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 !important;
}

.skillSelector:checked ~ .skillSelectionLabel {
background-color: #555;
opacity: 100%;
}

.skillSelector:checked ~ .skillSelectionLabel {
background-color: #555;
opacity: 100%;
}

.helperText:checked ~ .helperTextContainer .helpers b {
display: none !important;
}


.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;
}

.skillN .attackIcon, .skillE .attackIcon {
margin-top: 2px !important;
margin-left: 5px !important;
}

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

#infoSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#infoSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body {
    display: none;
}

#skillSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#skillSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body {
    display: none;
}

#equipmentSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#equipmentSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body {
    display: none;
}

#editorSectionToggle.sheet-toggle-show:not(:checked) ~ div.sheet-body,
#editorSectionToggle.sheet-toggle-hide:checked ~ div.sheet-body {
    display: none;
}

.skillType {
color: #fff !important;}

.CharAge, .CharHeight, .CharOrigin, .CharJob {
max-width: 95px;
margin-left: -3px;;
text-overflow:ellipsis;
}

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

.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;
}

.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-editor {
    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="editor"] ~ div.sheet-editor
 {
    display: block;
}

.sheet-tabstoggle[value="equipment"] ~ div #equipmentButton, .sheet-tabstoggle[value="skills"] ~ div #skillsButton, .sheet-tabstoggle[value="details"] ~ div #detailsButton, .sheet-tabstoggle[value="editor"] ~ div #editorButton {
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;
}

.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;
}

#characterExtra, #distortExtra {
padding-top: 10px;
margin-left: 5px;
margin-right: 5px;
}

#characterExtra div {
color: #333;
}

#characterExtra div, #characterExtra textarea, #distortExtra div, #distortExtra textarea {
width: 100% !important;

}

#characterDetails .CharName {
width: 140px !important;
}

#DistortionName, #CharacterName {
width: 150px !important;
}

#characterDetails .CharResidence {
width: 330px !important;
}

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

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

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

.shareButton {
position: absolute;
bottom: 5px;
right: 5px;
z-index: 20;
height: 25px;
width: 25px;
border-radius: 5px;
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/share.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.editButton {
position: absolute;
bottom: 5px;
right: 40px;
z-index: 20;
height: 25px;
width: 25px;
border-radius: 5px;
background-image: url('https://raw.githubusercontent.com/punibird/roll20-character-sheets/master/ProjectMoonTRPG/imagesResized/icons/edit.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}

.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;
opacity: 65%;
text-align: center;
overflow: hidden;
width: 30px !important;
height: 30px !important;
position: relative;
margin-left: 5px;
}

.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;
}

.egoCheck {
position: absolute !important;  
top: 10px; 
right: 5px; 
height: 20px !important; 
width: 20px !important; 
}

.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;

}

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

.HP{
background-color: #cc4125 !important;
}
.HPtext, .instinct {
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;
}

.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 */