/* Beacon: Tabbed Character Sheet CSS */
/* Version 2 */

/* overall wrapper to fix moving width issues with overflow on hidden sections */
.charsheet .sheet-overall-wrapper {
    max-width: 830px;
	min-width: 830px;
}

/* Tweak repeating section buttons so they have a bottom margin and dont overflow when in edit mode. */
.charsheet div[class^="repcontrol"] {
	margin-bottom: 5px;
}

.charsheet div[class="repcontainer editmode"] ~ div[class^="repcontrol"] button[class="btn repcontrol_add"] {
	display: inline-block!important;
	visibility: hidden;
}

/* ALTER repeating section controls */
.charsheet .repcontrol_add,
.charsheet .repcontrol_edit,
.charsheet .repcontrol_del {
 	font-size: 9px;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 5px;
	color:#ffffff;
	background-color:#000000;
	background-image: -moz-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
	background-image: -webkit-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
	background-image: -o-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
	background-image: -ms-repeating-radial-gradient(center center, circle cover, #000000, #ce0632100%);
	background-image: repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
	margin-top: 10px;
	border-radius: 10px; 
}

/* Fake tabs style1 (reskinned radio button; fixed to work properly in firefox */
div.sheet-maintab-content 
{ 
  display: none;
}
input.sheet-player:checked ~ div.sheet-player,
input.sheet-update:checked ~ div.sheet-update,
input.sheet-monster:checked ~ div.sheet-monster
{
  display: block;
}

input.sheet-maintab
{
    width: 15%;
    height: 16px;
    cursor: pointer;	
    position: relative;
    opacity: 0;
    z-index: 9999;
}

span.sheet-maintab 
{
  	text-align: center;
    display: inline-block;    
    width: 15%;
    height: 16px;
    font-size: 10px;
	background: #ce0632;  /*REDish*/
	color: white;
	font-weight: bold;
	border-radius: 4px;
	margin-left: -15% 
}

.charsheet input.sheet-maintab:checked + span.sheet-player,
.charsheet input.sheet-maintab:checked + span.sheet-update,
.charsheet input.sheet-maintab:checked + span.sheet-monster
{
    background: #009e73;    /*GREEN*/
    color: white;
	border-radius: 4px;
}

div.sheet-maintab-content
{
    border: 1px solid #a8a8a8;  /*GREY*/
    border-top-color: #000;
    margin: 2px 0 0 5px;
    padding: 5px;
}

label,
label div
{
    font-size: 12px;
    font-weight: normal;
}

/* Player Sheet Tabs */
.charsheet div[class^="sheet-section"] { 	
	visibility: hidden;
	opacity: 0;
	max-height:0;
	overflow: hidden;
}

.charsheet input.sheet-tab1:checked ~ div.sheet-section-core,
.charsheet input.sheet-tab2:checked ~ div.sheet-section-combat,
.charsheet input.sheet-tab3:checked ~ div.sheet-section-inventory,
.charsheet input.sheet-tab4:checked ~ div.sheet-section-notes, 
.charsheet input.sheet-tab5:checked ~ div.sheet-section-magic {
	max-height: 999999px;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s linear 0s;
	overflow: auto;
}

.charsheet input.sheet-tab99:checked ~ div[class^="sheet-section"] 
{ 	
	max-height: 999999px;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s linear 0s;
}

.charsheet input.sheet-tab 
{
    width: 87px;
    height: 20px;
    cursor: pointer;	
	position: relative;
	opacity: 0;
	z-index: 9999;
}

.charsheet span.sheet-tab 
{
	text-align: center;
    display: inline-block;   
	font-size: 13px;	
	background: #ce0632;
	color: white;
	font-weight: bold;
	border-radius: 4px;
	width: 87px;
    height: 20px;
    cursor: pointer;	
	position: relative;
	margin-left: -91px;
}

.charsheet input.sheet-tab1:checked + span.sheet-tab1,
.charsheet input.sheet-tab2:checked + span.sheet-tab2,
.charsheet input.sheet-tab3:checked + span.sheet-tab3,
.charsheet input.sheet-tab4:checked + span.sheet-tab4,
.charsheet input.sheet-tab5:checked + span.sheet-tab5,
.charsheet input.sheet-tab99:checked + span.sheet-tab99 
{
    background: #009e73;    
    color: white;
	border-radius: 4px;
}
/* END Player sheet tabs */

/* Graphic Boxes */
.charsheet .sheet-2colrow .sheet-col 
{
	width: calc(50% - 3px) !important;
	height: 32px;
	margin-right: 2px !important;
}

.charsheet .sheet-2colrow .sheet-col:last-child 
{
	margin-right: 0 !important;
}

.charsheet input.sheet-AC,
.charsheet input.sheet-HP 
{
	margin-top: 16px;
	margin-bottom: 34px;
	padding: 0px;
	height: 44px;
	width: 48px;
	font-size: 21px;
	line-height: 48px;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	border: 0;
}

.charsheet input.sheet-HP2 
{
	margin-top: 16px;
	margin-bottom: 34px;
	padding: 0px;
	height: 44px;
	width: 50px;
	font-size: 21px;
	line-height: 48px;
	font-weight: bold;
	vertical-align: middle;
	text-align: center;
	border: 1;
}
.charsheet .sheet-ACBG 
{
	background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Beacon/Assets/shield.png') no-repeat 20% 0% / 6.6em auto;
}

.charsheet .sheet-HPBG 
{
	background: url('https://raw.githubusercontent.com/Roll20/roll20-character-sheets/master/Beacon/Assets/hp.png') no-repeat 20% 0% / 6.6em auto;
}

/* Spell Page Settings */
.charsheet div[class^="sheet-spell-page"] 
{ 	
	visibility: hidden;
	opacity: 0;
	max-height:0;
	overflow: hidden;
}

.charsheet input.sheet-spelltab0:checked ~ div.sheet-spell-page0,
.charsheet input.sheet-spelltab1:checked ~ div.sheet-spell-page1,
.charsheet input.sheet-spelltab2:checked ~ div.sheet-spell-page2,
.charsheet input.sheet-spelltab3:checked ~ div.sheet-spell-page3,
.charsheet input.sheet-spelltab4:checked ~ div.sheet-spell-page4,
.charsheet input.sheet-spelltab5:checked ~ div.sheet-spell-page5,
.charsheet input.sheet-spelltab6:checked ~ div.sheet-spell-page6 
{
	max-height: 999999px;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s linear 0s;
}

.charsheet input.sheet-spelltab99:checked ~ div[class^="sheet-spell-page"] 
{ 	
	max-height: 999999px;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s linear 0s;
}

.charsheet input.sheet-spelltab0:checked ~ span.sheet-spelltab0,
.charsheet input.sheet-spelltab1:checked ~ span.sheet-spelltab1,
.charsheet input.sheet-spelltab2:checked ~ span.sheet-spelltab2,
.charsheet input.sheet-spelltab3:checked ~ span.sheet-spelltab3,
.charsheet input.sheet-spelltab4:checked ~ span.sheet-spelltab4,
.charsheet input.sheet-spelltab5:checked ~ span.sheet-spelltab5,
.charsheet input.sheet-spelltab6:checked ~ span.sheet-spelltab6,
.charsheet input.sheet-spelltab99:checked ~ span.sheet-spelltab99
 {
    background: #009e73;    
    color: white;
	border-radius: 4px;
}

.charsheet input.sheet-spellpagetab 
{
    width: 70px;
    height: 20px;
    cursor: pointer;
	position: relative;
	opacity: 0;
    z-index: 9999;
}

.charsheet span.sheet-spellpagetab 
{
    text-align: center;
    display: inline-block;    
    font-size: 13px;
	background: #ce0632; 
	color: white;
	font-weight: bold;
	border-radius: 4px;
	width: 70px;
    height: 20px;
	cursor: pointer;
	position: relative;
	margin-left: -73px;
}
/* END Spell Page Settings */

/* Borders for spell page and class action repeating section rows */
div[data-groupname^="repeating_items"] .repitem,
.sheet-zero-row {
    border: 1px solid #000000;
	border-radius: 12px;
	margin-left: 1px;
	margin-bottom: 5px;
	background: #eee;
}

div[data-groupname^="repeating_"] .repitem,
.sheet-zero-row 
{
    border: 1px solid #000000;
	border-radius: 12px;
	margin-left: 1px;
	margin-bottom: 5px;
	background: #eee;
}

div[data-groupname^="repeating_spellbook"] .repitem,
.sheet-zero-row 
{
    border: 1px solid #000000;
	border-radius: 12px;
	margin-left: 1px;
	margin-bottom: 5px;
	background: #eee;
}

/* spell type tab Settings */

.charsheet div[class^="sheet-spell-type"] 
{ 	
	visibility: hidden;
	opacity: 0;
	max-height:0;
	overflow: hidden;
}

.charsheet input.sheet-spelltypeDescription:checked ~ div.sheet-spell-type-Description 
{
	max-height: 999999px;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.5s linear 0s;
}

.charsheet input.sheet-spelltypeDescription:checked ~ span.sheet-spelltypeDescription 
{
    background: rgb(0,158,115);     
    color: white;
	border-radius: 4px;
}

.charsheet input.sheet-spelltypetab {
    width: 100px;
    height: 20px;
    cursor: pointer;
	position: relative;
	opacity: 0;
    z-index: 999;
}

.charsheet span.sheet-spelltypetab {
    text-align: center;
    display: inline-block;    
    font-size: 13px;
	background: #7d160f;
	color: white;
	font-weight: bold;
	border-radius: 4px;
	
	width: 100px;
    height: 20px;
	cursor: pointer;
	position: relative;
	margin-left: -73px;
}

/* END spell type tab Settings */


/* Table Settings */
.charsheet table {
	border-collapse: collapse;
	border-spacing: 0;
	border: 2px solid #404040;
}

.charsheet td,
.charsheet th,
.charsheet tr,
.charsheet tbody,
.charsheet thead {
	border: 1px solid #404040;
	padding: 5px;
}

/* END Table settings */

/* General sheet wide Styles */

.charsheet {
	background-color: white;
}

.charsheet button, input, select, textarea,
.charsheet .sheet-row [class *= "sheet-col"],
.charsheet  [class *= "sheet-col"] {
    font-size: 12px;
}

.charsheet .sheet-spell-row-number,
.charsheet .sheet-inventory-row-number {
	text-align: center;
	font-weight: bold;
}

.charsheet .sheet-large-label {
	font-size: 90%!important;
	font-style: italic;
	font-weight: bold;
}

.charsheet .sheet-last-updated {
	font-size: 90%!important;
	font-style: italic;
	font-weight: bold;
	margin: 0;
}

.charsheet .sheet-checkbox-row {
	line-height: 28px;
	text-align: center;
}

.charsheet .sheet-padl,
.sheet-rolltemplate-DccTabbed .sheet-padl {
	padding-left:10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.charsheet .sheet-padr,
.sheet-rolltemplate-DccTabbed .sheet-padr {
	padding-right:10px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.charsheet .sheet-padt,
.sheet-rolltemplate-DccTabbed .sheet-padt{
	padding-top:12px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.charsheet .sheet-padb,
.sheet-rolltemplate-DccTabbed .sheet-padb {
	padding-bottom:5px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.charsheet .sheet-border-right {
	border-right: 1px solid #000;
}

.charsheet .sheet-border-left {
	border-left: 1px solid #000;
}

.charsheet input[type=number], .charsheet input[type=text], .charsheet select {
	width: 100%!important;
	margin-bottom:2px!important;
}

.charsheet input[type=number] {
	text-align: center;
}

.charsheet input[type=text].sheet-underlined {
	box-shadow: 0px -2px 0px 0px #000000 inset;
}

.charsheet input[type=number].sheet-underlined {
	box-shadow: 0px -2px 0px 0px #000000 inset;
}

.charsheet hr 
{
    border: 0;
    height: 1px;
    background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,75.75), rgba(0,0,0,0)); 
    background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,75.75), rgba(0,0,0,0)); 
    background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,75.75), rgba(0,0,0,0)); 
    background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,75.75), rgba(0,0,0,0)); 
	margin: 5px 0;
}

.charsheet span.sheet-spacer 
{
	display: block;
	margin-top: 5px;
}

.charsheet .sheet-heading-row 
{
	text-align: center;
	font-weight: bold;
}

.charsheet .sheet-footer-row 
{
	text-align: center;
	font-weight: bold;
	border-bottom: 1px solid #dddddd;
	margin-bottom: 5px;
}

.charsheet .sheet-vert-middle 
{
	vertical-align: middle!important;
}

.charsheet .sheet-vert-bottom 
{
	vertical-align: bottom!important;
}

.charsheet .sheet-center
{
	text-align: center;
}

.charsheet .sheet-left
{
	text-align: left;
}

.charsheet .sheet-right
{
	text-align: right;
}

.charsheet .sheet-centerselect 
{
    margin-left: auto;
    margin-right: auto;
    display: block!important;
}

.charsheet textarea {
	width: calc(100% - 10px);
	height: 150px;
    resize:none;
}

.charsheet textarea.sheet-fluid {
    width: calc(100% - 10px);
    height: 100%;
}

.charsheet textarea.sheet-small {
    width: calc(100% - 150px);
    height: 50px;
}

.charsheet textarea.sheet-medium {
    width: calc(100% - 10px);
    height: 100px;
}

.charsheet textarea.sheet-large {
    width: calc(100% - 10px);
    height: 300px;
}

.charsheet textarea.sheet-extralarge {
    width: calc(100% - 10px);
    height: 700px;
}

.charsheet h3 {
	font-size: 12px;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 5px;
	color:#ffffff;
	background-color:#000000;
	background-image: -moz-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
	background-image: -webkit-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
	background-image: -o-repeating-radial-gradient(center center, circle cover, #000000, ##ce0632 100%);
	background-image: -ms-repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
	background-image: repeating-radial-gradient(center center, circle cover, #000000, #ce0632 100%);
	margin-top: 10px;
	border-radius: 12px;
	
}

.charsheet h4 {
    background-color: #000000;
    color: #ffffff;
	font-size: 12px;
	border-radius: 12px;
	padding-left: 5px;
	margin-bottom: 5px;
}

.charsheet h5 {
    background-color: #93537c;
    color: #ffffff;
	font-size: 12px;
	border-radius: 12px;
	padding-left: 5px;
	margin-bottom: 5px;
}

.charsheet input[disabled] {
    background-color: #eaffef;
    border-color: #ddd;
    cursor: not-allowed;
	-moz-appearance: textfield;
}

/* .charsheet input[disabled].sheet-passive-skill-score {
    background-color: #def6fc;
    border-color: #ddd;
    cursor: not-allowed;
	-moz-appearance: textfield;
} */

.charsheet input[disabled]::-webkit-inner-spin-button, 
.charsheet input[disabled]::-webkit-outer-spin-button { 
	-webkit-appearance: none; 
	margin: 0; 
}

.charsheet .sheet-small-note 
{
	text-align: center;
	font-family: Arial;
	font-size: 10px;
}

.charsheet select 
{
	font-size: 90%;
}

.charsheet .sheet-important-text 
{
	text-decoration: underline;
	color: #ff0000;
}

.charsheet .sheet-sub-header { 
	background-color: #cecece;
	vertical-align: bottom;
	border-radius: 12px;
	margin-bottom: 3px;
}

.charsheet .sheet-footer { 
	background-color: rgba(250, 202, 78, 0.2);
	vertical-align: bottom;
	border-radius: 12px;
	margin-top: 3px;
}

.charsheet .sheet-spell-header { 
	background-color: #c7d1bf;
	vertical-align: bottom;
	border-radius: 12px;
	margin-bottom: 3px;
}

.charsheet input.sheet-BoldText {
    font-size: 1.0em;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
}

.charsheet input.sheet-highlight {
    background-color: #ccffff;
}

/* Conditional formatting */

.charsheet input.sheet-redbox {
     background-color: #ccffff;
}

input.sheet-enccheck[value="1"] ~ input.sheet-redbox {
     background-color: #ce0632;
	 color: #ffffff;
	 font-weight: bold;
}
	
/* Header section */

.charsheet img.sheet-icon {
	width: 100px;
	height: 100px;
}

/* Core stat section */

.charsheet .sheet-core-stat-label { 
	background-color: #000000;
	color: #ffffff;
	font-size: 14px!important;
	font-weight: bold;
	text-transform: uppercase;
	vertical-align: middle;
	line-height: 28px;
	text-align: center;
}

/* Skills section */

.charsheet .sheet-skill-row {
	margin: 1px 0;
}

.charsheet .sheet-skill-roll {
	padding: 0 5px!important;
	height:29px;
}
.charsheet .sheet-skill-name {
	margin-top: 5px;
	font-size: 11px!important;
}
.charsheet .sheet-skill-checkbox {
	margin-top: 5px;
}

.charsheet .sheet-margin-top {
	margin-top: 5px;
}

.charsheet .sheet-margin-bottom {
	margin-bottom: 5px;
}

/* Custom Pure Grid CSS (24 cols) DO NOT EDIT BELOW THIS LINE OR RISK BREAKING FORMATTING */
.sheet-row
{
    letter-spacing: -0.31em;
    *letter-spacing: normal;
    *word-spacing: -0.43em;
    text-rendering: optimizespeed;
}

 .sheet-opera-only :-o-prefocus,  .sheet-row
{
    word-spacing: -0.43em;
}

 .sheet-col
 {
    display: inline-block;
    zoom: 1; *display: inline;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.sheet-col-1, .sheet-col-1-2, .sheet-col-1-3,.sheet-col-1-4, .sheet-col-1-5,.sheet-col-1-6, .sheet-col-1-7,
.sheet-col-1-8, .sheet-col-1-9,.sheet-col-1-10, .sheet-col-1-11, .sheet-col-1-12, .sheet-col-1-13,
.sheet-col-1-14, .sheet-col-1-15,.sheet-col-1-16, .sheet-col-1-17, .sheet-col-1-19
{
    display: inline-block;
    zoom: 1; 
    *display: inline; 
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.sheet-col-1 {
    display:block;
}
.sheet-col-1-2 {
    width: 50%;
}
 .sheet-offset-1-2 {
    margin-left: 50%;
}

.sheet-col-1-3 {
    width: 33.33333%;
}

.sheet-offset-1-3 {
    margin-left: 33.33333%;
}

.sheet-col-1-4 {
    width: 25%;
}

.sheet-offset-1-4 {
    margin-left: 25%;
}

.sheet-col-1-5 {
    width: 20%;
}

.sheet-offset-1-5 {
    margin-left: 20%;
}

.sheet-col-1-6 {
    width: 16.66667%;
}

.sheet-offset-1-6 {
    margin-left: 16.66667%;
}

.sheet-col-1-7 {
    width: 14.28571%;
}

.sheet-offset-1-7 {
    margin-left: 14.28571%;
}

.sheet-col-1-8 {
    width: 12.5%;
}

.sheet-offset-1-8 {
    margin-left: 12.5%;
}

.sheet-col-1-9 {
    width: 11.11111%;
}

.sheet-offset-1-9 {
    margin-left: 11.11111%;
}

.sheet-col-1-10 {
    width: 10%;
}

.sheet-offset-1-10 {
    margin-left: 10%;
}

.sheet-col-1-11 {
    width: 9.09091%;
}

.sheet-offset-1-11 {
    margin-left: 9.09091%;
}

.sheet-col-1-12 {
    width: 8.33333%;
}

.sheet-offset-1-12 {
    margin-left: 8.33333%;
}

 .sheet-col-1-13 {
    width: 7.69231%;
}

.sheet-offset-1-13 {
    margin-left: 7.69231%;
}

.sheet-col-1-14 {
    width: 7.14286%;
}

.sheet-offset-1-14 {
    margin-left: 7.14286%;
}

.sheet-col-1-15 {
    width: 6.66667%;
}

.sheet-offset-1-15 {
    margin-left: 6.66667%;
}

.sheet-col-1-16 {
    width: 6.25%;
}

.sheet-offset-1-16 {
    margin-left: 6.25%;
}
.sheet-col-1-17 {
    width: 5.88235%;
}

.sheet-offset-1-17 {
    margin-left: 5.88235%;
}

.sheet-col-1-18 {
    width: 5.55556%;
}

.sheet-offset-1-18 {
    margin-left: 5.55556%;
}

.sheet-col-1-19 {
    width: 5.26316%;
}

.sheet-offset-1-19 {
    margin-left: 5.26316%;
}
        
.sheet-row-r {
    letter-spacing: -0.31em; 
    *letter-spacing: normal; 
    word-spacing: -0.43em; 
}

 .sheet-opera-only :-o-prefocus,  .sheet-row-r
{
    word-spacing: -0.43em;
}

 .sheet-row-r img
 img {
    max-width: 100%;
}

/* End custom Pure grid css (24 cols) */