/* Set the min-width so that when the window is resized the look will stay consistant */
.charsheet {
	background-color: #f6f0df;
	min-width: 800px;
}

.sheet-detail-head {font-weight: bold; color: #f2a61d;}
.sheet-typed-head {font-weight: bold; font-size: large;}
.sheet-gfill {background-color: #46e35e;}
.sheet-yfill {background-color: #ffff99;}
.sheet-rfill {background-color: #f9beac;}

/* --------------------------------Flex & Grid Layouts-------------------------------- */
.sheet-flexrow {display: flex; align-items: flex-start; gap: 2px;}
.sheet-flexspace {flex-grow: 1;}
.sheet-morespace {flex-grow: 4;}

.sheet-statusgrid {display: grid; grid-template-columns: 30px 65px auto 50px 50px;}
.sheet-dividedgrid {display: grid; grid-template-columns: 15px auto 25px auto 65px 65px 65px;}
.sheet-othergrid {display: grid; grid-template-columns: 25px auto;}
.sheet-envirostatusgrid {display: grid; grid-template-columns: auto 95px 95px 95px 95px auto;}
.sheet-envirostatuscolor {display: grid; grid-template-columns: 30px 65px;}

.sheet-shead {display: inline-grid; place-items: center;}
.sheet-sgreen {background-color: #41b23b; display: inline-grid; place-items: center;}
.sheet-syellow {background-color: #f8df1b; display: inline-grid; place-items: center;}
.sheet-sred {background-color: #dc2f34; display: inline-grid; place-items: center;}
.sheet-sgrey {background-color: #bfbfbf; display: inline-grid; place-items: center;}
.sheet-sblack {color: white; background-color: #171711; display: inline-grid; place-items: center;}

/* Border the current status*/
.sheet-health-range[value="3"] ~ div.sheet-statusgrid > .sheet-sgreen-right,
.sheet-health-range[value="2"] ~ div.sheet-statusgrid > .sheet-syellow-right,
.sheet-health-range[value="1"] ~ div.sheet-statusgrid > .sheet-sred-right {border-right: double; border-bottom: double; border-top: double;}
.sheet-health-range[value="3"] ~ div.sheet-statusgrid > .sheet-sgreen-left,
.sheet-health-range[value="2"] ~ div.sheet-statusgrid > .sheet-syellow-left,
.sheet-health-range[value="1"] ~ div.sheet-statusgrid > .sheet-sred-left {border-left: double; border-bottom: double; border-top: double;}

/* Color the Environment*/
div.sheet-envirotitle {background-color: #bfbfbf;}
.sheet-envirocolor[value="Green"] ~ div.sheet-envirotitle {background-color: #41b23b;}
.sheet-envirocolor[value="Yellow"] ~ div.sheet-envirotitle {background-color: #f8df1b;}
.sheet-envirocolor[value="Red"] ~ div.sheet-envirotitle {background-color: #dc2f34;}
.sheet-envirocolor[value="Green"] ~ div.sheet-envirostatusgrid > div.sheet-sgreen,
.sheet-envirocolor[value="Yellow"] ~ div.sheet-envirostatusgrid > div.sheet-syellow,
.sheet-envirocolor[value="Red"] ~ div.sheet-envirostatusgrid > div.sheet-sred,
.sheet-envirocolor[value="Out"] ~ div.sheet-envirostatusgrid > div.sheet-sgrey {font-weight: bold; border: 2px solid black; font-size: 16px;}

.sheet-descgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
	column-gap: 5px;
}
.sheet-descinline {
    display: grid;
    grid-template-columns: auto 1fr;
	column-gap: 5px;
}

.sheet-vhealth {display: grid; grid-template-columns: 200px 170px 170px; place-items: center; column-gap: 1fr; justify-content: space-around;}
.sheet-vlogo {grid-area: 1/1/3/2}
.sheet-hhead {grid-area: 1 / 2; justify-self: start}
.sheet-hchead {grid-area: 1 / 3; justify-self: start}
.sheet-hmax {grid-area: 2 / 2;}
.sheet-hcur {grid-area: 2 / 3;}

/* --------------------------------Hide and Display section of Code-------------------------------- */
/* Configure the tab buttons*/
.sheet-tabstoggle[value="hero"] ~ button.sheet-herobutton,
.sheet-tabstoggle[value="abilities"] ~ button.sheet-abilbutton,
.sheet-tabstoggle[value="auxiliary"] ~ button.sheet-formbutton,
.sheet-tabstoggle[value="notes"] ~ button.sheet-notebutton,
.sheet-tabstoggle[value="villain"] ~ button.sheet-villbutton,
.sheet-tabstoggle[value="mlt"] ~ button.sheet-mltbutton,
.sheet-tabstoggle[value="environment"] ~ button.sheet-envibutton,
.sheet-tabs2toggle[value="abilities2"] ~ button.sheet-abil2button,
.sheet-tabs2toggle[value="actions2"] ~ button.sheet-acti2button {
	background-image: url("https://imgur.com/Sa0nqts.jpg");
	font-weight: bold;
	border: 2px solid black;
	padding: 10px 10px;
	font-size: 20px;
}

/* Hide all tabs */
.sheet-hero,
.sheet-aux,
.sheet-notes,
.sheet-villain,
.sheet-mlt,
.sheet-environment,
.sheet-abilities,
.sheet-abilities2,
.sheet-actions2 {display: none;}

/* show the selected tab */
.sheet-tabstoggle[value="hero"] ~ div.sheet-hero,
.sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities,
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-aux,
.sheet-tabstoggle[value="notes"] ~ div.sheet-notes,
.sheet-tabstoggle[value="villain"] ~ div.sheet-villain,
.sheet-tabstoggle[value="mlt"] ~ div.sheet-mlt,
.sheet-tabstoggle[value="environment"] ~ div.sheet-environment,
.sheet-tabs2toggle[value="abilities2"] ~ div.sheet-abilities2,
.sheet-tabs2toggle[value="actions2"] ~ div.sheet-actions2 {display: block;}

.sheet-tabstoggle[value="villain"] ~ div.sheet-villain > div.sheet-abilities2,
.sheet-tabstoggle[value="villain"] ~ div.sheet-villain > div.sheet-actions2 {background-color: #eaeae9;}
.sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities > div.sheet-abilities2 > div.sheet-green-abilities,
.sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities > div.sheet-actions2 > div.sheet-green-abilities {background-color: #46e35e;}

/* hide modes based on radio */
.sheet-auxonly,
.sheet-modeselect:not([value="1"]) ~ div.sheet-modeg1,
.sheet-modeselect:not([value="2"]) ~ div.sheet-modeg2,
.sheet-modeselect:not([value="3"]) ~ div.sheet-modeg3,
.sheet-modeselect:not([value="4"]) ~ div.sheet-modey1,
.sheet-modeselect:not([value="5"]) ~ div.sheet-modey2,
.sheet-modeselect:not([value="6"]) ~ div.sheet-moder1 {display: none;}
/* show all modes on aux tab */
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-auxonly,
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-modeg1,
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-modeg2,
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-modeg3,
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-modey1,
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-modey2,
.sheet-tabstoggle[value="auxiliary"] ~ div.sheet-moder1 {display: block;}

/* Hide Powers, Qualities, or Modes from ability and villain tabs */
.sheet-modeselect[value="0"] ~ div.sheet-modebase,
.sheet-tabstoggle[value="villain"] ~ div.sheet-modebase,
.sheet-tabstoggle:not([value="villain"]) + .sheet-modeselect:not([value="0"]) ~ div.sheet-powerbase,
.sheet-dividedselect[value="1"] + .sheet-divideddouble[value="on"] ~ div.sheet-powerbase,
.sheet-dividedselect[value="0"] ~ div.sheet-dividedeither,
.sheet-dividedselect[value="2"] ~ div.sheet-dividedcivilian,
.sheet-dividedselect:not([value="2"]) ~ div.sheet-dividedheroic,
.sheet-dividedselect[value="2"] + .sheet-divideddouble[value="on"] ~ div.sheet-rightquality,
.sheet-leftquality,
.sheet-rightpower {display: none;}

.sheet-dividedselect[value="2"] + .sheet-divideddouble[value="on"] ~ div.sheet-rightpower,
.sheet-dividedselect[value="1"] + .sheet-divideddouble[value="on"] ~ div.sheet-leftquality {display: block;}
.sheet-dividedselect[value="1"] ~ div.sheet-divideleft,
.sheet-dividedselect[value="2"] ~ div.sheet-divideright {border-style: solid; border-width: 1%;}

/* change font of die in roll buttons */
button[type=roll].sheet-rolldice::before { content: ''; font-family: 'dicefontd4'; }

/* Clear default cycle button styling */
button.sheet-icon-cycle {
    margin: 0;
    overflow: visible;
    text-transform: none;
    padding: 0;
    background: transparent;
}
/* Hide the icons that do not match the attribute value */
input.sheet-icon-cycle:not([value="1"]) ~ span.sheet-attack,
input.sheet-icon-cycle:not([value="2"]) ~ span.sheet-defend,
input.sheet-icon-cycle:not([value="3"]) ~ span.sheet-overcome,
input.sheet-icon-cycle:not([value="4"]) ~ span.sheet-boost,
input.sheet-icon-cycle:not([value="5"]) ~ span.sheet-hinder,
input.sheet-icon-cycle:not([value="6"]) ~ span.sheet-recover {display: none;}

/* Clear default open/close button styling */
button.sheet-direction,
button.sheet-lock {
    margin: 0;
    overflow: visible;
    text-transform: none;
    border-style: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
/* Hide the section(s) that do not match the attribute value */
input.sheet-direction:not([value="down"]) + button.sheet-direction > .sheet-down,
input.sheet-direction:not([value="right"]) + button.sheet-direction > .sheet-right,
input.sheet-direction:not([value="down"]) ~ div.sheet-underarrow,

input.sheet-lock:not([value="hide"]) + button.sheet-lock > span.sheet-hide,
input.sheet-lock:not([value="show"]) + button.sheet-lock > span.sheet-show,
input.sheet-lock:not([value="hide"]) ~ div.sheet-nonsource,
input.sheet-lock:not([value="show"]) ~ div.sheet-sourceinput {display: none;}

/* ROLL TEMPLATES */
.sheet-rolltemplate-default table {
	border: 2px solid black;
}

.sheet-rolltemplate-default caption {
	background-image: url("https://imgur.com/Sa0nqts.jpg");
	color: black;
	font-weight: bold;
	border-top: 2px solid black;
	border-bottom: 0px;
	border-left: 2px solid black;
	border-right: 2px solid black;
}

.sheet-rolltemplate-scrpg .sheet-scrpg-container { width: 225px; border: 1px solid black; padding: 0; margin: 0; background-color: #f6f0df; }
.sheet-rolltemplate-scrpg .inlinerollresult {background-color: transparent; border: none;}
/*.sheet-rolltemplate-test .inlinerollresult {pointer-events: none}*/
.sheet-rolltemplate-scrpg .inlinerollresult.fullcrit {border: none;}
.sheet-rolltemplate-scrpg .inlinerollresult.fullfail {border: none;}
.sheet-rolltemplate-scrpg .inlinerollresult.fullcrit::after {content: "+1";}
.sheet-rolltemplate-scrpg .inlinerollresult.fullfail::after {content: "-1";}
.sheet-rolltemplate-scrpg .sheet-scrpg-title {font-weight: bold; font-size: 14px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; padding-top: 2px; margin-bottom: 3px;}
.sheet-rolltemplate-scrpg .sheet-gfill {background-color: #46e35e;}
.sheet-rolltemplate-scrpg .sheet-yfill {background-color: #ffff99;}
.sheet-rolltemplate-scrpg .sheet-rfill {background-color: #f9beac;}
.sheet-rolltemplate-scrpg .sheet-outfill {background-color: #bfbfbf;}
.sheet-rolltemplate-scrpg .sheet-scrpg-icons {text-align: center; padding-left: 5px; padding-right: 5px; padding-top: 2px;}
.sheet-rolltemplate-scrpg .sheet-scrpg-type {text-align: center; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; margin-bottom: 3px;}
.sheet-rolltemplate-scrpg .sheet-scrpg-reroll {text-align: center; background-color: #666666; color: #f6f0df; padding-left: 5px; padding-right: 5px;}
.sheet-rolltemplate-scrpg .sheet-scrpg-desc {text-align: right; font-weight: bold; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; padding-top: 2px; margin-bottom: 3px;}
.sheet-rolltemplate-scrpg .sheet-scrpg-desc td:first-child {width: 87%}
.sheet-rolltemplate-scrpg .sheet-scrpg-desc td:last-child {width: 13%}