/* <editor-fold desc="Roll Template"> */

/* Smaller margins - remove these if you want the huge default left margin */

.sheet-rolltemplate-custom {
    margin-left: -37px;
    color:rgba(0,0,0,1);
}

.withoutavatars .sheet-rolltemplate-custom {
    margin-left: -7px;
}

.sheet-rolltemplate-custom .sheet-container {
    border: 0px solid;
    /* by default, the border is the same color as the header. You can change this here, e.g. to black */
    border-color: var(--header-bg-color);
}

/* Header formatting - title and subtitle */
.sheet-rolltemplate-custom .sheet-header {
    background-color: var(--header-bg-color);
    /* change text-align to center to center the header text */
    text-align: left;
    color: var(--header-text-color);
    padding: 5px;
    border-bottom: 6px black solid;
    border-radius: 4px 4px 0 0;
}
.sheet-rolltemplate-custom .sheet-title {
    font-size:1.6em;
    font-weight: bold;
    text-align: center;
    margin: auto;
}

.sheet-rolltemplate-custom .sheet-title a:link{
    color: #DDDDDD;
    text-decoration: underline;
}

.sheet-rolltemplate-custom .sheet-title a:visited{
    color: #FFFFFF;
    text-decoration: underline;
}

.sheet-rolltemplate-custom .sheet-title a:active{
    color: #EE00EE;
}

.sheet-rolltemplate-custom .sheet-subtitle {
    font-size:1.1em;
    font-style: italic;
    text-align: center;
    margin: auto;
}

/* example colors */
.sheet-rolltemplate-custom .sheet-container {
    /* this is the default color */
    --header-bg-color: #800020;
    --header-text-color: #FFF;
    color: #000000;
    border: solid 3px black;
    border-radius:  8px;
}

.sheet-rolltemplate-custom .sheet-container.sheet-color-red {
    --header-bg-color: #F00;
}
.sheet-rolltemplate-custom .sheet-container.sheet-color-green {
    --header-bg-color: #0F0;
    --header-text-color: #000;
}

/* Allprops part */
.sheet-rolltemplate-custom .sheet-content {
    display: grid;
    background: rgba(0,0,0,0);
    /* Header formatting - modify the column layout below */
    grid-template-columns: auto auto;
    /* Line height to match default roll template */
    line-height:1.4em;
}
.sheet-rolltemplate-custom .sheet-content > div {
    padding: 5px;
    background-color: #EAD2A8;
}

/* Left column */
.sheet-rolltemplate-custom .sheet-content .sheet-key {
    font-weight: bold;
    padding-right: 10px;
    text-align: right;
}

/* Empty rule, use this if you want to change the right column
.sheet-rolltemplate-custom .sheet-value {
}
*/

/* Make even-numbered rows grey */

.sheet-rolltemplate-custom .sheet-content :nth-child(4n+3),
.sheet-rolltemplate-custom .sheet-content :nth-child(4n){
    background: #f6efe4;
}

.sheet-rolltemplate-custom .sheet-content > div.sheet-key:nth-last-child(2) {
    border-radius: 0 0 0 4px;
}

.sheet-rolltemplate-custom .sheet-content > div.sheet-value:last-child{
    border-radius: 0 0 4px 0;
}

.sheet-rolltemplate-custom .sheet-content > div.sheet-desc:last-child{
    border-radius: 0 0 4px 4px;
}

.sheet-rolltemplate-custom .sheet-content a:link{
    background: rgba(0,0,0,0);
    color: #0000EE;
    font-style: italic;
    text-decoration: underline;
}

.sheet-rolltemplate-custom .sheet-content a:visited{
    background: rgba(0,0,0,0);
    color: #551A8B;
    font-style: italic;
    text-decoration: underline;
}

.sheet-rolltemplate-custom .sheet-content a:active{
    background: rgba(0,0,0,0);
    color: #AA00DD;
    font-style: italic;
}

/* Description field */
.sheet-rolltemplate-custom .sheet-desc {
    grid-column: span 2;
    padding: 5px;
    text-align: center;
}

.sheet-rolltemplate-custom .sheet-key .inlinerollresult,
.sheet-rolltemplate-custom .sheet-desc .inlinerollresult,
.sheet-rolltemplate-custom .sheet-value .inlinerollresult{
    background-color: #f6efe4;
    border-radius: 4px;
}
/*</editor-fold>*/

/*<editor-fold desc="Tab Buttons"*/
/*Configure the tab buttons*/
.charsheet .sheet-main,
.charsheet .sheet-skills,
.charsheet .sheet-gear,
.charsheet .sheet-definitions,
.charsheet .sheet-abilities,
.charsheet .sheet-spells,
.charsheet .sheet-accessories,
.charsheet .sheet-inventory,
.charsheet .sheet-profitloss{
    display: none;
    text-align: center;
}

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="main"] ~ div.sheet-main,
.charsheet .sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
.charsheet .sheet-tabstoggle[value="gear"] ~ div.sheet-gear,
.charsheet .sheet-tabstoggle[value="abilities"] ~ div.sheet-abilities,
.charsheet .sheet-tabstoggle[value="spells"] ~ div.sheet-spells,
.charsheet .sheet-tabstoggle[value="accessories"] ~ div.sheet-accessories,
.charsheet .sheet-tabstoggle[value="inventory"] ~ div.sheet-inventory,
.charsheet .sheet-tabstoggle[value="profitloss"] ~ div.sheet-profitloss{
    display: grid;
    width: 800px;
}

.charsheet .sheet-tabstoggle[value="definitions"] ~ div.sheet-definitions{
    display: inline-block;
}

.SAbutton button{
    background-color: #ffffff;
    color: #000000;
    font-weight: bold;
    border: solid 2px black;
    border-radius: 5px;
    transition-duration: 0.4s;
    box-shadow: 0 2px #909090;
    margin: 4px;
}

.SAbutton button:hover{
    background-color: #323232;
    color: #FFFFFF;
}

.SAbutton button:active{
    background-color: #000000;
    color: #db1c1c;
    box-shadow: 0 0px;
    transform: translateY(2px);
}

/*</editor-fold>*/

/*<editor-fold desc="General Styles"*/

.color{
    display: inline-block;
}

.titleinputhidden[value=""] ~ .color{
    display: None;
}

.shadow{
    display: None;
}

.titleinputhidden[value=""] ~ .shadow{
    display: inline-block;
}

.titleblock {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #000000;
}

.wrapped-div{
    border-radius: 15px 15px 0 0;
    border: 1px solid black;
}

.midline-right-div{
    border-radius: 15px 15px 0 0;
    border-bottom: 1px solid black;
    border-right: 1px solid black;
    border-top: 1px solid black;
}

.bottom-border-div{
    border-bottom: 1px solid black;
}

.column-header {
    background-color: #323232;
    color: #FFFFFF;
    font-weight: bold;
    font-size: medium;
    text-align: center;
    border-radius: 12px 12px 0 0;
    width: 100%;
}

.column-header-dark {
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: medium;
    text-align: center;
    border-radius: 12px 12px 0 0;
    width: 100%;
}

.row-header{
    background-color: #323232;
    color: #FFFFFF;
    font-weight: bold;
    font-size: medium;
    text-align: center;
    border-radius: 10px 10px 0 0;
    width: 100%;
}

.row-footer{
    background-color: #323232;
    color: #FFFFFF;
    font-weight: bold;
    font-size: medium;
    text-align: center;
    border-radius: 0 0 10px 10px;
    width: 100%;
}

.row-header-dark{
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: medium;
    text-align: center;
    border-radius: 10px 10px 0 0;
    width: 100%;
}

.ui-dialog .charsheet .column-header button[type=roll],
.ui-dialog .charsheet .column-header button[type=compendium]{
    height: 16px;
    width: 16px;
    padding: 0;
    margin: 0;
}

.ui-dialog .charsheet .Small-Button{
    width: 16px;
    height: 12px;
    padding: 0 0 1px 0;
    margin: 0;
    border: 1px black solid;
    transition-duration: 0.4s;
    box-shadow: 0 2px #505050;
    background-color: #F0F0F0;
    color: #000000;
    text-align: center;
    font-weight: bold;
    border-radius: 5px;
}

.ui-dialog .charsheet .Small-Button:hover{
    background-color: #323232;
    color: #FFFFFF;
}

.ui-dialog .charsheet .Small-Button:active{
    background-color: #000000;
    color: #db1c1c;
    box-shadow: 0 0;
    transform: translateY(2px);
}

.ui-dialog .charsheet button[type=roll],
.ui-dialog .charsheet button[type=compendium]{
    padding: 0;
    border: 0;
    margin: 0;
    width: 16px;
    height: 16px;
    text-align: center;
    background-color: #F0F0F0;
    color: #000000;
    background-image: none;
    content: "";
    transition-duration: 0.4s;
    box-shadow: 0 2px #909090;
}

.ui-dialog .charsheet button[type=roll]:hover,
.ui-dialog .charsheet button[type=compendium]:hover {
    background-color: #323232;
    color: #FFFFFF;
}

.ui-dialog .charsheet button[type=roll]:active,
.ui-dialog .charsheet button[type=compendium]:active {
    background-color: #000000;
    color: #db1c1c;
    box-shadow: 0 0;
    transform: translateY(2px);
}

.ui-dialog .charsheet input::-webkit-outer-spin-button,
.ui-dialog .charsheet input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ui-dialog .charsheet input[type=number]{
    -moz-appearance: textfield;
    height: 18px;
    padding: 2px;
    border: 1px solid #909090;
    background-color: #FFFFFF;
    color: #000000;
    text-align: center;
}

.ui-dialog .charsheet input[readonly]{
    background-color: #5A5A5A;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
}

.ui-dialog .charsheet select{
    width: 96%;
    height: 18px;
    text-align: center;
    padding: 0;
    font-size: 12px;
    margin: 0;
}

.ui-dialog .charsheet .die-select{
    width: 24px;
    height: 21px;
    font-weight: bold;
    text-align: center;
    padding: 0;
    font-size: 12px;
    margin: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    vertical-align: middle;
}

.ui-dialog .charsheet .fixed-select{
    width: 60px;
    height: 21px;
    text-align: center;
    padding: 0;
    font-size: 12px;
    margin: 0;
    vertical-align: middle;
}

/*General Grid*/

.ggrid{
    display: grid;
    grid-auto-columns: auto;
}

.ggridc{
    display: grid;
    grid-auto-rows: auto;
}

/*End General Grid -- End*/

/*General Columns*/

.grcsa{grid-column: 1/-1;}
.grc1{grid-column: 1;}
.grc2{grid-column: 2;}
.grc3{grid-column: 3;}
.grc4{grid-column: 4;}
.grc5{grid-column: 5;}
.grc6{grid-column: 6;}
.grc7{grid-column: 7;}
.grc8{grid-column: 8;}

.grr1{grid-row: 1;}
.grr2{grid-row: 2;}
.grr3{grid-row: 3;}
.grr4{grid-row: 4;}
.grr5{grid-row: 5;}
.grr6{grid-row: 6;}
.grr7{grid-row: 7;}

/*End General columns -- End*/
.flex-input{
    height: 18px;
    width: 96%;
    border: 0;
    padding: 0;
    text-align: center;
    color: #000000;
}

.flex-bordered-input{
    height: 18px;
    width: 96%;
    border: 1px solid black;
    padding: 0;
    margin: 2px;
    text-align: center;
}

.ui-dialog .charsheet .flex-input[type=number]{
    height: 18px;
    width: 96%;
    border: 0;
    padding: 0;
}

.small-input{
    height: 18px;
    width: 24px;
    padding: 0;
    text-align: center;
}

.ui-dialog .charsheet .small-input[type=number]{
    height: 18px;
    width: 24px;
    border: 0;
    padding: 0;
}

.standard-input{
    height: 18px;
    width: 60px;
    padding: 0;
    text-align: center;
}

.standard-input [type=number]{
    height: 18px;
    width: 60px;
    padding: 0;
    text-align: center;
}

.standard-select {
    width: 60px;
    height: 18px;
    text-align: center;
    padding: 0;
    font-size: 12px;
    margin: 0;
}

/*</editor-fold>*/

/*<editor-fold desc="Main Tab"*/

.sheet-main{
    grid-template-columns: repeat(2,1fr);
    background-color: #000000;
    padding-bottom: 18px;
    border-radius: 12px;
}

.main-full{grid-column: 1/-1;}
.main-left{grid-column: 1;}
.main-right{grid-column: 2;}

/*Shared Main Selector Styles*/
.attribute-block > span,
.hp-armor-block > span,
.saving-throw-block > span{
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: medium;
    text-align: center;
    height: 18px;
    padding-bottom: 3px;
    align-self: start;
}
/*End Shared Main Selector Styles -- End*/

/* Character Info Block Styles */
.character-info-block{
    width: 800px;
    display: grid;
    grid-template-columns: repeat(7,1fr);
}

.character-info-block > span{
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: medium;
    text-align: center;
    border-radius: 6px 6px 0 0;
}

#info-title {grid-column: 1/-1;}
#player-name {grid-column: 1;}
#age-and-height{grid-column: 2;}
#weight-and-gender{grid-column: 3;}
#species-name {grid-column: 4;}
#more-speed {grid-column: 5;}
#religion-name {grid-column: 6;}
#hd-and-size {grid-column: 7;}

#player-name > div,
#age-and-height > div,
#weight-and-gender > div,
#species-name > div,
#more-speed > div,
#religion-name > div,
#hd-and-size > div{
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    padding-bottom: 2px;
}
/*End Character Info Block Styles -- End*/

/* Main Attribute Block Styles*/

.sheet-main textarea{
    vertical-align: top;
    text-align: left;
    height: 232px;
    width: 97%;
    border: 0;
    border-radius: 5px 5px 5px 5px;
    resize: none;
    margin: 3px 0 0;
    padding: 3px;
}

.attribute-block {
    width: 400px;
    display: grid;
    background-color: #000000;
    grid-template-columns: repeat(8, 1fr);
    align-self: start;
    border: 1px #323232;
}

.attribute-block-title{
    grid-column: 1/9;
    background-color: #000000;
}
#name {grid-column: 1;}
#base {
    grid-column:2;
    background-color: #FFFFFF;
}
#enhancement {
    grid-column: 3;
    background-color: #FFFFFF;
}
#bonus {
    grid-column: 4;
    background-color: #FFFFFF;
}
#penalty {
    grid-column: 5;
    background-color: #FFFFFF;
}
#total { grid-column: 6;}
#modifier {grid-column: 7;}
#check  {grid-column: 8;}

#name  > div,
#base > div,
#enhancement  > div,
#bonus  > div,
#penalty  > div,
#total  > div,
#modifier  > div,
#check > div{
    padding-bottom: 3px;
    padding-right: 1px;
    height: 18px;
}

#check > div{
    background-color: #000000;
}

.ui-dialog .charsheet .attribute-block button[type=roll],
.ui-dialog .charsheet .attribute-block button[type=compendium]{
    height: 16px;
    width: 16px;
    padding: 0;
    margin: 0;
}


/* End Attribute Block Styles -- End*/

/*Saving Throw Block*/
.saving-throw-block{
    width: 400px;
    display: grid;
    grid-template-columns: repeat(8,1fr);
    background-color: #000000;
    color: #FFFFFF;
    align-self: start;
}

#save-name {grid-column: 1;}
#save-total {grid-column: 2;}
#save-base {grid-column: 3;}
#save-key {grid-column: 4;}
#save-magic {
    grid-column: 5;
    background-color: #FFFFFF;
    color: #000000;
}
#save-misc {
    grid-column: 6;
    background-color: #FFFFFF;
    color: #000000;
}
#save-temp {
    grid-column: 7;
    background-color: #FFFFFF;
    color: #000000;
}
#save-check {grid-column: 8;}

#save-name > div,
#save-total > div,
#save-base > div,
#save-key > div,
#save-magic > div,
#save-misc > div,
#save-temp > div,
#save-check > div{
    padding-bottom: 3px;
    padding-right: 1px;
    height: 18px;
}

.main-left .ggrid .grc1 > div,
.main-left .ggrid .grc2 > div,
.main-left .ggrid .grc3 > div,
.main-left .ggrid .grc4 > div,
.main-left .ggrid .grc5 > div,
.main-left .ggrid .grc6 > div{
    padding-bottom: 3px;
    padding-right: 1px;
    height: 18px;
}

/*End Saving Throw Block -- End*/

/* HP and Armor Block Styles */

.hp-armor-block{
    width: 400px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-self: start;
}

.hp-column{
    grid-column: 1;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

#hp-names{grid-column: 1;}
#hp-inputs{grid-column: 2;}

.ac-column{
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

#ac-names{grid-column: 1;}
#ac-inputs{grid-column: 2;}

#hp-names > div,
#hp-inputs > div,
#ac-names > div,
#ac-inputs > div{
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    height: 18px;
    padding-bottom: 3px;
    align-self: start;
}

/* End HP and Armor Block Styles -- End*/

/*</editor-fold>*/

/*<editor-fold desc="Definitions and Traits"*/
.sheet-definitions{
    width: 800px;
    border-radius: 12px;
    border: 1px solid;
    padding-bottom: 8px;
}

.ui-dialog .charsheet .sheet-definitions .DTA-name{
    background-color: #323232;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    border: 0;
}

.ui-dialog .charsheet .sheet-definitions .DTA-name-dark{
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    border: 0;
}

.ui-dialog .charsheet .sheet-definitions textarea{
    vertical-align: top;
    text-align: left;
    height: 54px;
    min-height: 54px;
    width: 94%;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    resize: vertical;
    padding: 0;
}

.sheet-definitions .ggrid .grr3.ggrid .dta-toggle[value="1"] ~ .dta-shrink{
    display: none;
}

/*</editor-fold>*/

/*<editor-fold desc="Abilities/Feats"*/

.sheet-abilities{
    width: 800px;
    border-radius: 12px;
    border: 1px solid;
    padding-bottom: 8px;
}

.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc1,
.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc2,
.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc3,
.charsheet .sheet-abilities .repcontainer[data-groupname="repeating_abilities"] .grc4{
    width: auto;
}

.sheet-abilities .grc1 > div,
.sheet-abilities .grc2 > div,
.sheet-abilities .grc3 > div,
.sheet-abilities .grc4 > div{
    align-items: center;
    min-height: 20px;
    height: auto;
}

.ui-dialog .charsheet .sheet-abilities .Ability-name{
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    border: 0;
    font-size: medium;
}

.charsheet .sheet-abilities .ability_description{
    background-color: #D0D0D0;
}

.ui-dialog .charsheet .sheet-abilities textarea{
    vertical-align: top;
    text-align: left;
    height: 54px;
    min-height: 54px;
    width: 96%;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    resize: vertical;
    padding: 2px;
    color: #000000;
}

.sheet-abilities .ggrid .grr4.ggridc .ability-toggle[value="1"] ~ div.ability_description.ggrid{
    display: none;
}

.sheet-abilities .ggrid .grr4.ggridc .feats-toggle[value="1"] ~ div.feats_description{
    display: none;
}

.ui-dialog .charsheet .sheet-abilities .resourceName{
    width: 96%;
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    border: 0;
    font-size: medium;
}

.charsheet .repcontainer[data-groupname="repeating_resources"]{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    justify-content: center;
}

.charsheet .repcontainer[data-groupname="repeating_resources"] > *{
    text-align: center;
    width: 20%;
    border-radius: 12px 12px 0 0;
    overflow: clip;
    background: #D0D0D0;
}

/*</editor-fold>*/

/*<editor-fold desc="Spell Sheet Style">*/

.charsheet .sheet-spells{
    text-align: center;
    vertical-align: top;
}

.charsheet .sheet-spells .gridarea{
    text-align: center;
    justify-content: space-evenly;
    align-content: space-evenly;
    grid-template-columns: auto auto;
    padding: 0;
    display: grid;
    gap: 0 0;
    grid-template-areas:
    "HeaderS HeaderS"
    "Column1 Column2";
}

.charsheet .sheet-spells .gridarea .titleblock{
    grid-area: HeaderS;
    border-radius: 10px 10px 0 0;
}

.charsheet .sheet-spells .Spell-Level{
    width: 396px;
    border: 1px solid black;
    border-top: 1px white solid;
    border-radius: 12px 12px 0 0;
    text-align: center;
}

.Spell-Level-Name {
    width: 100%;
    border-radius: 10px 10px 0 0;
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 14px;
    padding: 0;
    margin: 0;
    border-bottom: 1px solid white;
}

.Spell-Level-Name span{
    font-size: 18px;
}

.Spell-Level-Name input{
    height: 16px;
    width: 48px;
    padding: 0;
    margin: 0;
    border: 0;
    text-align: center;
}

.Spell-Level .sheet-repeating-fields{
    display: none;
}

input.sptoggle[value="1"] ~ .sheet-repeating-fields{
    display: inline-block;
}

/*<editor-fold desc="Spell Repeating Fields">*/

.minimizable-repeat-spells{
    display: inline-block;
    text-align: center;
    width: 390px;
    margin-top: 3px;
}


.minimizable-repeat-spells span{
    background-color: #383838;
    color: #FFFFFF;
    font-weight: bold;
}
.minimizable-repeat-spells .spelltitle{
    width: 388px;
    background-color: #383838;
    border: 1px solid black;
    border-radius: 5px 5px 0 0;
    display: inline-block;
    text-align: center;
}

.minimizable-repeat-spells .spelltitle input[type=text]{
    width: 50%;
    height: 18px;
    font-size: 16px;
    text-align: center;
    background-color: #383838;
    color: #FFFFFF;
    font-weight: bold;
    border: 0;
}

.minimizable-repeat-spells .spells_description{
    width: 388px;
    overflow: clip;
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid black;
    border-radius: 0 0 5px 5px;
    text-align: center;
    justify-content: center;
    display: none;
    grid-template-columns: 50% 50%;
    padding: 0;
    grid-template-rows: auto auto auto;
    gap: 1px 1px;
    grid-template-areas:
    "Details-1 Details-2"
    "Description Description"
    "Advanced Advanced";
}

.minimizable-repeat-spells .spells-toggle[value="1"] ~ div.spells_description{
    display: grid;
    background: #D0D0D0;
}

.minimizable-repeat-spells .spells_description input[type=number]{
    height: 18px;
    text-align: center;
    float: right;
}

.minimizable-repeat-spells .spells_description .Details-1 {
    grid-area: Details-1;
    padding: 3px;
    text-align: left;
}

.minimizable-repeat-spells .spells_description .Details-1 .spellselect{
    padding: 0;
    border: 0;
    text-align: center;
    height: 18px;
    width: 80px;
    margin: 0;
    justify-self: end;
}


.minimizable-repeat-spells .spells_description .Details-1 input{
    justify-self: end;
}

.minimizable-repeat-spells .spells_description .Details-1 select{
    justify-self: end;
}

.minimizable-repeat-spells .spells_description .Details-1 input[type=checkbox]{
    float: right;
}

.minimizable-repeat-spells .spells_description .Details-1 input[type=text]{
    height: 18px;
    width: 56px;
    text-align: center;
    float: right;
}



.minimizable-repeat-spells .spells_description .Details-2 {
    grid-area: Details-2;
    padding: 3px;
    text-align: left;
}

.minimizable-repeat-spells .spells_description .Details-2 .spellselect{
    padding: 0;
    border: 0;
    text-align: center;
    height: 18px;
    width: 80px;
    margin: 0;
    justify-self: end;
}


.minimizable-repeat-spells .spells_description .Details-2 input{
    justify-self: end;
}

.minimizable-repeat-spells .spells_description .Details-2 select{
    justify-self: end;
}

.minimizable-repeat-spells .spells_description .Details-2 input[type=checkbox]{
    float: right;
}

.minimizable-repeat-spells .spells_description .Details-2 input[type=text]{
    height: 18px;
    width: 56px;
    text-align: center;
    float: right;
}

.minimizable-repeat-spells .spells_description .Description {
    grid-area: Description;
}

.minimizable-repeat-spells .spells_description .Description textarea{
    vertical-align: top;
    text-align: left;
    height: 54px;
    min-height: 54px;
    width: 94%;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    resize: vertical;
    padding: 0;
}

.minimizable-repeat-spells .spells_description .Advanced {
    grid-area: Advanced;
}

.minimizable-repeat-spells .spells_description .spells-advanced-toggle[value="1"] ~ div.grr2.ggridc{
    display: none;
}

/*</editor-fold*/

/*</editor-fold>*/

/*<editor-fold desc="Accessories">*/

.sheet-accessories .accessories-grid{
    width: 800px;
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid black;
    border-radius: 12px;
    text-align: center;
    justify-content: center;
    display: grid;
    grid-template-columns: 50% 50%;
    padding: 0;
    grid-template-rows: auto auto;
    gap: 0 0;
    grid-template-areas:
    "HeaderM HeaderM"
    "Column1 Column2";
}

.sheet-accessories .accessories-grid > div{
    border-radius: 10px 10px 0 0;
}
.sheet-accessories .accessories-grid .crown-check{
    height: 24px;
    width: 24px;
}

.sheet-accessories .accessories-grid textarea{
    vertical-align: top;
    text-align: left;
    height: 54px;
    width: 94%;
    border: 1px solid black;
    border-radius: 5px 5px 5px 5px;
    resize: vertical;
    padding: 0;
}

.sheet-accessories .accessories-grid input[type=text]{
    font-weight: bold;
    text-align: center;
    height: 24px;
    width: 240px;
}

.sheet-accessories .accessories-grid h3{
    color: #FFFFFF;
}

.sheet-accessories .accessories-grid .HeaderM {
    grid-area: HeaderM;
    background-color: #000000;
    Color: #FFFFFF;
    font-weight: bold;
    text-align: center;
}

.sheet-accessories .accessories-grid .Column-1 {
    grid-area: Column-1;
}

.sheet-accessories .accessories-grid .Column-2 {
    grid-area: Column-2;
}

/*</editor-fold>*/

/*<editor-fold desc="Inventory Tab"*/

.inventory-grid{
    width: 800px;
    background-color: #FFFFFF;
    color: #000000;
    border: 1px solid black;
    border-radius: 12px;
    text-align: center;
    justify-content: center;
    grid-template-columns: 1fr;
    padding: 0 0 5px 0;
    grid-template-rows: auto auto;
    gap: 0 0;
    grid-template-areas:
    "Header-I"
    "Column-I";
}

.inventory-grid .Header-I{
    grid-area: Header-I;
    background-color: #000000;
    font-weight: bold;
    border-radius: 10px 10px 0 0;
    color: #FFFFFF;
}

.charsheet .sheet-inventory input[type=number]{
    height: 24px;
    width: 64px;
    text-align: center;
}

.inventory-grid .Header-I h3{
    color: #FFFFFF;
}

.inventory-grid .Column-I{
    grid-area: Column-I;
}

.charsheet .repcontainer[data-groupname="repeating_maininventory"] > div:nth-child(odd),
.charsheet .repcontainer[data-groupname="repeating_locationtotals"] > div:nth-child(odd),
.charsheet .repcontainer[data-groupname="repeating_profitloss"] > div:nth-child(odd){
    background-color: #D0D0D0;
}


.bag-grid{
    width: 100%;
    margin: auto;
    display: grid;
    grid-template-columns: auto auto auto auto auto;
    grid-template-rows: auto;
    gap: 0 40px;
    grid-template-areas: "name location quantity piece-weight total-weight";
    justify-content: center;
    align-items: end;
    text-align: center;
    border-bottom: 1px solid black;
}

.ui-dialog .charsheet .name textarea,
.ui-dialog .charsheet .location textarea{
    min-height: 22px;
    height: 22px;
    width: 240px;
    text-align: center;
    resize: vertical;
    margin: auto;
    display: block;
    padding: 0
}

.inventory-location[value="0"] ~ div.location{
    background-color: #920a15;
}

.location input[type=text]{
    height: 24px;
    width: 64px;
    text-align: center;
}

.quantity input[type=text]{
    height: 24px;
    width: 64px;
    text-align: center;
}

.piece-weight input[type=text]{
    height: 24px;
    width: 64px;
    text-align: center;
}

.total-weight input[type=text]{
    height: 24px;
    width: 64px;
    text-align: center;
}

.inventory-weight input{
    height: 24px;
    width: 64px;
    text-align: center;
    margin: 3px;
}

.bag-grid .name{
    grid-area: name;
    display: block
}

.bag-grid .quantity{
    grid-area: quantity;
    display: inline-block;
    vertical-align: bottom
}

.bag-grid .piece-weight{
    grid-area: piece-weight;
    display: inline-block;
    vertical-align: bottom
}

.bag-grid .total-weight{
    grid-area: total-weight;
    display: inline-block;
    vertical-align: bottom
}

/*</editor-fold>*/

/*<editor-fold desc="skill page">*/
.SkillsPage{
    width: 800px;
    border: 1px solid black;
    border-radius: 12px;
    text-align: center;
    overflow: hidden;
}

.ui-dialog .charsheet .SkillsPage button[type=roll],
.ui-dialog .charsheet .SkillsPage button[type=compendium]{
    padding: 0;
    border: #909090 solid 1px;
    margin: 0;
    width: 20px;
    height: 20px;
    text-align: center;
    background-image: none;
    content: "";
    float: right;
    transition-duration: 0.4s;
    box-shadow: 0 2px #909090;
}

.ui-dialog .charsheet .SkillsPage button[type=roll]:hover,
.ui-dialog .charsheet .SkillsPage button[type=compendium]:hover {
    background-color: #323232;
    color: #FFFFFF;
}

.ui-dialog .charsheet .SkillsPage button[type=roll]:active,
.ui-dialog .charsheet .SkillsPage button[type=compendium]:active {
    background-color: #000000;
    color: #db1c1c;
    box-shadow: 0 0;
    transform: translateY(2px);
}

.SkillsPage .skill-desc{
    background-color: #A2A2A2;
    color: #000000;
    font-weight: bold;
    margin: 6px auto;
}

.SkillsPage input[type=text]{
    text-align: left;
    width: 100px;
    height: 20px;
}

.ui-dialog .charsheet .SkillsPage input[type=number]{
    -moz-appearance: textfield;
    text-align: center;
    font-weight: bold;
}

.ui-dialog .charsheet .SkillsPage input::-webkit-outer-spin-button,
.ui-dialog .charsheet .SkillsPage input::-webkit-inner-spin-button {
    display: none;
    -webkit-appearance: none;
    margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}

.ui-dialog .charsheet .SkillsPage input[readonly]{
    background-color: #5A5A5A;
    color: #FFFFFF;
    font-weight: bold;
}

.ui-dialog .charsheet .SkillsPage th{
    text-align: center;
    width: 800px;
    border-radius: 10px 10px 0 0;
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    font-size: medium;
}

.ui-dialog .charsheet .SkillsPage table tr:nth-child(even){
    background-color: #D0D0D0;
}


.ui-dialog .charsheet .SkillsPage td{
    padding: 1px;
}

.ui-dialog .charsheet .hoverskill{
    transition-duration: .05s;
}

.ui-dialog .charsheet .SkillsPage .hoverskill:hover{
    background-color: #323232;
    color: #FFFFFF;
}

/*</editor-fold>*/

/* <editor-fold desc="Weapons/Armor Tab">*/
.sheet-gear{
    width: 800px;
    border-radius: 12px;
    border: 1px solid;
    padding-bottom: 8px;
}

.sheet-gear .weapon-shrink > div{
    padding-bottom: 3px;
    padding-right: 1px;
    height: 18px;
}


.ui-dialog .charsheet .sheet-gear textarea{
    padding: 0;
    border: 1px solid black;
    width: 177px;
    resize: vertical;
    height: 18px;
    min-height: 18px;
}

.ui-dialog .charsheet .sheet-gear .weapon-name{
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    font-size: medium;
    border: 0;
    padding: 3px;
}

.weapon-column-span{
    grid-column: 1/5;
    margin-bottom: 3px;
}

.weapon-repeat-box{
    border: 1px solid black;
    border-radius: 15px 15px 0 0;
    padding-bottom: 3px;
}

.sheet-gear .ggrid .weapon-toggle[value="0"] ~ .weapon-shrink{
    display: none;
}

.sheet-gear .ggridc .grr1.ggrid .critconfirm-toggle[value="0"] ~ .crit-shrink{
    display: none;
}

.sheet-gear .ggridc .grr1.ggrid .advancedweapon-toggle[value="0"] ~ .advancedweapon-shrink,
.sheet-gear .ggridc .grr2.ggrid .advancedweapon-toggle[value="0"] ~ .advancedweapon-shrink{
    display: none;
}

.ui-dialog .charsheet .advancedAttackButton button[type="roll"]::before{
    content: none;
}

.ui-dialog .charsheet .advancedAttackButton button{
    background-color: #ffffff;
    color: #000000;
    border: solid 1px black;
    border-radius: 5px;
    transition-duration: 0.4s;
    box-shadow: 0 2px #909090;
    margin: 1px 1px 6px 1px;
    padding: 1px;
    content: none;
    width: fit-content;
}

.ui-dialog .charsheet .advancedAttackButton button:hover{
    background-color: #323232;
    color: #FFFFFF;
}

.ui-dialog .charsheet .advancedAttackButton button:active{
    background-color: #000000;
    color: #db1c1c;
    box-shadow: 0 0px;
    transform: translateY(2px);
}

.sheet-gear .grr7{
    grid-template-columns: repeat(2,1fr);
}

/*</editor-fold>*/

/*<editor-fold desc="P&L">*/
.sheet-profitloss{
    width: 800px;
    border-radius: 12px;
    border: 1px solid;
    overflow: clip;
}
/*</editor-fold>*/