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

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

.sheet-rolltemplate-custom .sheet-content a[href^="~"],
.sheet-rolltemplate-custom .sheet-content a[href*="fullattack"],
.sheet-rolltemplate-custom .sheet-content a[href*="fullattackdamage"],
.sheet-rolltemplate-custom .sheet-content a[href*="fullattackcritdamage"],
.sheet-rolltemplate-custom .sheet-content a[href*="fullattackconfirm"] {
    display: inline-block;
    transition-duration: 0.2s;
    min-width: fit-content;
    margin: 1px;
    padding: 0 4px 0 4px;
    background-color: #F0F0F0;
    color: #000000 !important;
    border: 1px solid #000000;
    border-radius: 5px;
    box-shadow: 0 2px #909090;
    font-style: normal;
    font-weight: bold;
    text-align: center;
    text-decoration: none !important;
    cursor: pointer;
}

.sheet-rolltemplate-custom .sheet-content a[href^="~"]:hover,
.sheet-rolltemplate-custom .sheet-content a[href*="fullattack"]:hover {
    background-color: #323232;
    color: #FFFFFF !important;
}

.sheet-rolltemplate-custom .sheet-content a[href^="~"]:active,
.sheet-rolltemplate-custom .sheet-content a[href*="fullattack"]:active {
    background-color: #000000;
    color: #db1c1c !important;
    box-shadow: 0 0;
    transform: translateY(2px);
}

.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: 0 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);
    width: fit-content;
    min-width: 220px;
    max-width: 100%;
}

/* 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);
    border-bottom: 1px black solid;
    border-radius: 4px 4px 0 0;
}
.sheet-rolltemplate-custom .sheet-title {
    font-family: Georgia, "Times New Roman", serif;
    font-size:1.6em;
    font-weight: bold;
    text-align: center;
    margin: auto;
    padding-top: 4px;
    padding-bottom: 5px;
}

.sheet-rolltemplate-custom .sheet-title::after {
    content: "꧁✧━━━━━━❖━━━━━━✧꧂";
    display: block;
    font-size: 14px;
    line-height: 1;
    margin-top: 2px;
    opacity: 0.75;
    letter-spacing: -1px;
}

.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 {
    width: 100%;
    box-sizing: border-box;
    background-color: #323232;
    font-size: 1.1em;
    font-style: italic;
    text-align: center;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    column-gap: 8px;
    padding: 5px 8px;
    min-height: 26px;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.sheet-rolltemplate-custom .sheet-subtitle::before,
.sheet-rolltemplate-custom .sheet-subtitle::after {
    content: "━━❖✧";
    font-family: "Noto Sans Symbols 2", "Noto Sans Symbols", "Segoe UI Symbol", "DejaVu Sans", serif;
    font-size: 10px;
    font-style: normal;
    opacity: 0.7;
    letter-spacing: -1px;
    white-space: nowrap;
    align-self: end;
}

.sheet-rolltemplate-custom .sheet-subtitle::before {
    grid-column: 1;
    direction: rtl;
    unicode-bidi: bidi-override;
}

.sheet-rolltemplate-custom .sheet-subtitle::after {
    grid-column: 3;
    direction: ltr;
}

.sheet-rolltemplate-custom .sheet-container {
    /* this is the default color */
    /*--header-bg-color: #800020;*/
    --header-bg-color: #000000;
    --header-text-color: #FFFFFF;
    color: #000000;
    border: solid 1px black;
    border-radius:  8px;
    overflow: hidden;
}

.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;*/
    background-color: #FFFFFF;
}

/* 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;*/
    background-color: #D0D0D0;
}

.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;*/
    background-color: #FFFFFF;
    border-radius: 4px;
}
/*</editor-fold>*/

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

/* show the selected tab */
.charsheet .sheet-tabstoggle[value="main"] ~ div.sheet-main,
.charsheet .sheet-tabstoggle[value="bio"] ~ div.sheet-bio,
.charsheet .sheet-tabstoggle[value="skills"] ~ div.sheet-skills,
.charsheet .sheet-tabstoggle[value="definitions"] ~ div.sheet-definitions,
.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,
.charsheet .sheet-tabstoggle[value="settings"] ~ div.sheet-settings {
    display: grid;
    width: 800px;
    z-index: 2;
}

.ui-dialog .charsheet .SAbutton {
    position: relative;
    width: 800px;
    text-align: left !important;
    padding-left: 10px;
    padding-top: 4px;
    white-space: nowrap;
    margin-bottom: -1px;
}

.ui-dialog .charsheet .SAbutton button{
    position: relative;
    z-index: 1;
    background-color: #ffffff;
    color: #000000;
    padding: 0 8px 0 8px;
    margin: 0 -6px 0 0;
    font-weight: bold;
    border: solid 1px black;
    border-radius: 5px 5px 0 0;
    border-bottom: 1px #323232 solid;
    transform: skewX(-8deg);
    transform-origin: bottom left;
    transition-duration: 0.1s;
    border-bottom: 1px solid #323232;
    background-image: none;
    box-shadow: none;
}

.ui-dialog .charsheet .SAbutton button:hover{
    z-index: 2;
    background-color: #323232;
    color: #FFFFFF;
}

.ui-dialog .charsheet .SAbutton button:active{
    background-color: #000000;
    color: #db1c1c;
    box-shadow: 0 0;
}

.ui-dialog .charsheet .SAbutton button::after{
    content: "";
    position: absolute;
    right: -7px;
    top: -1px;
    bottom: 0;
    width: 12px;
    height: auto;

    background-color: inherit;
    background-image: none;

    border-top: 1px solid black;
    border-right: 1px solid black;
    border-bottom: 0;
    border-left: 0;

    border-radius: 0 12px 0 0;
    box-sizing: border-box;
    z-index: 0;
    pointer-events: none;
    box-shadow: none;
}

.ui-dialog .charsheet .SAbutton .sheet-tab-button-settings::after {
    bottom: -1px;
    border-bottom: inherit;
}

.ui-dialog .charsheet .sheet-tabstoggle[value="main"] ~ .SAbutton .sheet-tab-button-main,
.ui-dialog .charsheet .sheet-tabstoggle[value="bio"] ~ .SAbutton .sheet-tab-button-bio,
.ui-dialog .charsheet .sheet-tabstoggle[value="definitions"] ~ .SAbutton .sheet-tab-button-definitions,
.ui-dialog .charsheet .sheet-tabstoggle[value="abilities"] ~ .SAbutton .sheet-tab-button-abilities,
.ui-dialog .charsheet .sheet-tabstoggle[value="spells"] ~ .SAbutton .sheet-tab-button-spells,
.ui-dialog .charsheet .sheet-tabstoggle[value="skills"] ~ .SAbutton .sheet-tab-button-skills,
.ui-dialog .charsheet .sheet-tabstoggle[value="gear"] ~ .SAbutton .sheet-tab-button-gear,
.ui-dialog .charsheet .sheet-tabstoggle[value="accessories"] ~ .SAbutton .sheet-tab-button-accessories,
.ui-dialog .charsheet .sheet-tabstoggle[value="inventory"] ~ .SAbutton .sheet-tab-button-inventory,
.ui-dialog .charsheet .sheet-tabstoggle[value="profitloss"] ~ .SAbutton .sheet-tab-button-profitloss,
.ui-dialog .charsheet .sheet-tabstoggle[value="settings"] ~ .SAbutton .sheet-tab-button-settings{
    background-color: #323232;
    color: #FFFFFF;
    position: relative;
    z-index: 3;
}

/*</editor-fold>*/

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

.ui-dialog .charsheet .SAbutton .rollAction button[type=action] {
    background-color: #000000;
    color: #FFFFFF;
}

.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: #323232;
    overflow: hidden;
}

.titleblock_stat {
    font-weight: bold;
    color: #FFFFFF;
    background-color: #000000;
    overflow: hidden;
}

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

.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;
    vertical-align: middle;
    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 .CRP_Button{
    margin: 0;
    border: 1px black solid;
    transition-duration: 0.2s;
    box-shadow: 0 2px #505050;
    background-color: #F0F0F0;
    color: #000000;
    text-align: center;
    vertical-align: center;
    border-radius: 5px;
    font-size: medium;
    width: 17px;
    height: 17px;
    font-family: dicefontd20,serif;
    font-weight: normal;
    padding: 0;
}

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

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

/* Firefox does not reliably apply :active to Roll20 type="roll" buttons.
   Chromium works. Do not waste another afternoon on this unless refactoring
   roll buttons into action buttons. */

.ui-dialog .charsheet button[type=roll],
.ui-dialog .charsheet button[type=compendium]{
    padding: 0;
    border: 0;
    margin: 0;
    transition-duration: 0.2s;
    width: 16px;
    height: 16px;
    text-align: center;
    background-color: #F0F0F0;
    color: #000000;
    background-image: none;
    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;
}

/* Roll20 generated repeating-section controls: +Add / Modify */
.ui-dialog .charsheet .repcontrol {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin: 4px 0 8px 0;
    padding: 2px 0;
}

.ui-dialog .charsheet .repcontrol button {
    width: auto;
    min-width: 16px;
    height: 18px;
    padding: 0 8px;
    margin: 0;
    border: 1px solid black;
    border-radius: 5px;
    background-color: #F0F0F0;
    background-image: none;
    color: #000000;
    box-shadow: 0 2px #505050;
    font-size: 11px;
    font-weight: bold;
    line-height: 16px;
    text-align: center;
    text-shadow: none;
    transition-duration: 0.2s;
}

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

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

/* Replace Roll20's generated button text */
.ui-dialog .charsheet .repcontrol .repcontrol_add,
.ui-dialog .charsheet .repcontrol .repcontrol_edit {
    font-size: 0;
}

.ui-dialog .charsheet .repcontrol .repcontrol_add::after {
    content: "+";
    font-size: 11px;
}

.ui-dialog .charsheet .repcontrol .repcontrol_edit::after {
    content: "Move/Delete";
    font-size: 11px;
}

.ui-dialog .charsheet .repcontainer.editmode + .repcontrol .repcontrol_edit::after {
    content: "End";
    font-size: 11px;
}

/*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;
    overflow: hidden;
    z-index: 5;
}

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

.ui-dialog .charsheet .sheet-main .main-right {
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.ui-dialog .charsheet .sheet-main .main-notes-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.ui-dialog .charsheet .sheet-main .main-notes-body textarea {
    flex: 1 1 auto;
    min-height: 120px;
    width: auto;
    box-sizing: border-box;
    vertical-align: top;
    text-align: left;
    border: 0;
    border-radius: 5px;
    resize: none;
    margin: 3px 3px -10px 3px;
    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 input[type=text]{
    height: 18px;
    width: 100%;
    box-sizing: border-box;
    padding: 2px;
    border: 1px solid #909090;
    background-color: #FFFFFF;
    color: #000000;
    text-align: center;
}

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

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

.ui-dialog .charsheet .conditions-effects-block .conditions-subheader{
    color: #FFFFFF;
    font-weight: bold;
    padding: 2px;
}

.ui-dialog .charsheet .conditions-effects-block .condition-select{
    width: 84px;
}

.ui-dialog .charsheet .conditions-effects-block .condition-duration-input{
    height: 18px;
    width: 60px;
    padding: 0;
    text-align: center;
}

.ui-dialog .charsheet .conditions-effects-block .condition-effect-display{
    background-color: #323232;
    border-radius: 5px;
    padding: 1px;
    margin: 4px;
    color: #FFFFFF;
}

.ui-dialog .charsheet .sheet-main .temporary-effects-strip {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.ui-dialog .charsheet .sheet-main .temporary-effects-strip label {
    width: auto;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

/* Vitals and Resistances */

.vitals-resistances-block{
    width: 400px;
    display: grid;
    grid-template-columns: 1fr;
    background-color: #000000;
    align-self: start;
}

.vitals-resistances-content{
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    box-sizing: border-box;
    width: 400px;
    padding: 4px;
    background-color: #000000;
    color: #FFFFFF;
}

.vitals-rest-row,
.vitals-death-save-row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 22px;
    font-weight: bold;
}

.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
}

.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row span{
    font-size: medium;
    line-height: 18px;
}

.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row label{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-weight: bold;
    font-size: small;
    width: auto;
    height: 18px;
    line-height: 18px;
    margin: 0;
    padding: 0;
}


.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row input.death-save-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1px solid #000000;
    border-radius: 4px;
    background: #FFFFFF;
    cursor: pointer;
    position: relative;
    vertical-align: middle;
}

.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row input.death-save-checkbox:checked {
    background: #000000;
    border-color: #000000;
}

.ui-dialog .charsheet .sheet-main .main-right .vitals-death-save-row input.death-save-checkbox:checked::after {
    content: "☠";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -52%);
    color: #FFFFFF;
    font-size: 18px;
    line-height: 1;
}

.ui-dialog .charsheet .vitals-rest-button,
.ui-dialog .charsheet .vitals-death-save-button{
    width: 42px;
    height: 18px;
    padding: 0 4px;
}

.vitals-repeat-columns{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    align-items: start;
}

.vitals-repeat-section{
    min-width: 0;
    background-color: #000000;
    border: 0;
    border-radius: 8px 8px 0 0;
    overflow: hidden;
}

.vitals-subheader{
    background-color: #323232;
    color: #FFFFFF;
    font-weight: bold;
    font-size: 12px;
    text-align: center;
    min-height: 18px;
    line-height: 18px;
    border: 0;
    overflow: hidden;
}

.damage-reduction-row,
.resistance-row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 22px;
    padding: 2px;
    box-sizing: border-box;
}

.ui-dialog .charsheet .damage-reduction-row input[type=number],
.ui-dialog .charsheet .resistance-row input[type=number],
.ui-dialog .charsheet input.vitals-small-number[type=number]{
    width: 34px;
    height: 18px;
    padding: 0;
}

.ui-dialog .charsheet .vitals-bypass-input[type=text]{
    width: 104px;
    height: 18px;
    padding: 0 2px;
    box-sizing: border-box;
    text-align: center;
}

.ui-dialog .charsheet .vitals-element-select{
    width: 112px;
    height: 18px;
    padding: 0;
    margin: 0;
    font-size: 11px;
    text-align: center;
}

.ui-dialog .charsheet .vitals-repeat-section .repcontrol{
    margin: 2px 0 4px 0;
}

.ui-dialog .charsheet .vitals-repeat-section .repcontrol button{
    height: 16px;
    padding: 0 5px;
    line-height: 14px;
}

/*</editor-fold>*/

/*<editor-fold desc="Bio Tab">*/
.ui-dialog .charsheet .sheet-bio .bio-text-box {
    width: 1fr;
}

.ui-dialog .charsheet .sheet-bio .main-bio-right,
.ui-dialog .charsheet .sheet-bio .main-bio-left{
    display: flex;
    flex-direction: column;
    align-self: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

.ui-dialog .charsheet .sheet-bio .main-bio-right{
    border-top: 0;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    border-left: 0;
}
.ui-dialog .charsheet .sheet-bio .main-bio-left{
    border-top: 0;
    border-right: 0;
    border-bottom: 1px solid black;
    border-left: 1px solid black;
}

.ui-dialog .charsheet .sheet-bio .main-bio-right textarea,
.ui-dialog .charsheet .sheet-bio .main-bio-left textarea {
    flex: 1 1 auto;
    background: #F0F0F0;
    min-height: 120px;
    width: 97%;
    box-sizing: border-box;
    vertical-align: top;
    text-align: left;
    border: 1px solid #323232;
    border-radius: 5px;
    resize: vertical;
    margin: 6px 6px 6px 6px;
    padding: 3px;
}

/*</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;
}

.sheet-definitions .definition-flag{
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
    padding: 2px;
}

/*</editor-fold>*/

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

.sheet-abilities .ability-title-row,
.sheet-abilities .feat-title-row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex-wrap: nowrap;
    padding: 0 2px 0 2px;
    width: auto;
    overflow: hidden;
}

.sheet-abilities .ability-title-row .Ability-name,
.sheet-abilities .feat-title-row .feat-name{
    flex: 1 1 auto;
    min-width: 80px;
}

.sheet-abilities .grant-meta{
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
    font-size: 10px;
    font-weight: normal;
    color: #FFFFFF;
}

.ui-dialog .charsheet .sheet-abilities .grant-level-input[type=number]{
    width: 28px;
    height: 14px;
    padding: 0;
    font-size: 10px;
    text-align: center;
}

.ui-dialog .charsheet .sheet-abilities .grant-source-input[type=text]{
    width: 116px;
    height: 14px;
    padding: 0;
    font-size: 10px;
    text-align: center;
}

.sheet-abilities .grant-available[value="0"] ~ .Ability-name,
.sheet-abilities .grant-available[value="0"] ~ .feat-name{
    color: #db1c1c !important;
}

.sheet-abilities .grant-hidden[value="1"] ~ .grant-row{
    display: none !important;
}

.ui-dialog .charsheet .sheet-abilities .grant-level-input[readonly],
.ui-dialog .charsheet .sheet-abilities .grant-source-input[readonly]{
    background-color: #5A5A5A;
    color: #FFFFFF;
    font-weight: bold;
}

.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 !important;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    font-size: medium;
    border: 0;
}

.ui-dialog .charsheet .sheet-abilities .feat-name{
    background-color: inherit !important;
    color: #FFFFFF;
    border: none;
    width: 100%;
    height: 16px;
    font-size: 14px;
    margin: 2px 0 0 0;
    font-weight: bold;
    text-align: center;
}

.ui-dialog .charsheet .sheet-abilities .feat-name input{
    background-color: #000000;
    color: #FFFFFF;
    text-align: center;
    margin: 2px 0 0 0;
    font-size: small;
}

.ui-dialog .charsheet .sheet-abilities .ability-title-row button[type="roll"] {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
}

.ui-dialog .charsheet .sheet-abilities .ability-title-row button[type="roll"]::before {
    content: "t";
    font-family: dicefontd20, serif;
    font-size: 14px;
    line-height: 16px;
    text-align: center;
}

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

/* Abilities / Feats column split */
.sheet-abilities .grr4.ggridc {
    grid-template-columns: 1fr 1fr;
}

.sheet-abilities .grr4.ggridc > .grc1,
.sheet-abilities .grr4.ggridc > .grc2 {
    min-width: 0;
}

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

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

.ui-dialog .charsheet .sheet-abilities .resourceName,
.ui-dialog .charsheet .sheet-abilities .resource_name {
    width: 96%;
    background-color: #000000 !important;
    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-top: none;
    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: #323232;
    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;
    overflow: hidden;
    color: #000000;
    border: 1px solid black;
    border-top: none;
    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-top: none;
    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 margins are still there even though they're 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: #323232;
    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 !important;
    color: #FFFFFF;
    text-align: center;
    font-weight: bold;
    font-size: small;
    border: 0 !important;
    padding: 3px;
    width: 350px;
}

.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;
    font-size: small;
    transition-duration: 0.4s;
    box-shadow: 0 2px #909090;
    margin: 1px;
    padding: 1px;
    content: none;
    width: fit-content;
    height: 16px;
}

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

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

.settings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 800px;
}

.settings-left,
.settings-right {
    width: 400px;
    box-sizing: border-box;
}

.settings-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    min-height: 24px;
}

.settings-left .settings-row:nth-child(even),
.settings-right .settings-row:nth-child(even) {
    background-color: #D0D0D0;
}

.settings-left .settings-row:nth-child(odd),
.settings-right .settings-row:nth-child(odd) {
    background-color: #FFFFFF;
}

.settings-label {
    background-color: #000000;
    color: #FFFFFF;
    font-weight: bold;
    text-align: right;
    padding: 4px 8px 4px 4px;
    min-height: 18px;
}

.settings-value {
    background-color: #FFFFFF;
    padding: 2px 6px;
    text-align: left;
}

.settings-value input[type=number] {
    background-color: #FFFFFF;
    color: #000000;
}
/*</editor-fold>*/

/*<editor-fold desc="Dark Mode">*/

/*
 * The hidden attr_dark_mode input precedes every top-level sheet panel.
 * The visible checkbox in Settings shares the same Roll20 attribute.
 */

.charsheet .sheet-dark-mode-toggle[value="1"] ~ div {
    --ttd-dark-page: #181818;
    --ttd-dark-panel: #222222;
    --ttd-dark-panel-alt: #2B2B2B;
    --ttd-dark-control: #303030;
    --ttd-dark-control-hover: #464646;
    --ttd-dark-readonly: #4A4A4A;
    --ttd-dark-border: #777777;
    --ttd-dark-text: #F2F2F2;
    --ttd-dark-placeholder: #AFAFAF;

    color: var(--ttd-dark-text);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~ div:not(.SAbutton) {
    background-color: var(--ttd-dark-page);
    border-color: var(--ttd-dark-border);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~ .SAbutton {
    background-color: var(--ttd-dark-page);
}

/* Form controls */

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div
input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div textarea,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div select {
    background-color: var(--ttd-dark-control);
    color: var(--ttd-dark-text);
    border-color: var(--ttd-dark-border);
    caret-color: var(--ttd-dark-text);
}

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div input[readonly],

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div textarea[readonly],

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div select[disabled] {
    background-color: var(--ttd-dark-readonly);
    color: #FFFFFF;
}

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div input::placeholder,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div textarea::placeholder {
    color: var(--ttd-dark-placeholder);
    opacity: 1;
}

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div select option {
    background-color: var(--ttd-dark-control);
    color: var(--ttd-dark-text);
}

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div input[type="checkbox"],

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div input[type="radio"] {
    accent-color: #777777;
}

/* Buttons */

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ .SAbutton button,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .Small-Button,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .CRP_Button,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div button[type="roll"],

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div button[type="compendium"],

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .repcontrol button,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .advancedAttackButton button {
    background-color: var(--ttd-dark-control);
    color: var(--ttd-dark-text);
    border-color: var(--ttd-dark-border);
    box-shadow: 0 2px #101010;
    text-shadow: none;
}

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ .SAbutton button:hover,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .Small-Button:hover,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .CRP_Button:hover,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div button[type="roll"]:hover,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div button[type="compendium"]:hover,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .repcontrol button:hover,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .advancedAttackButton button:hover {
    background-color: var(--ttd-dark-control-hover);
    color: #FFFFFF;
}

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ .SAbutton button:active,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .Small-Button:active,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .CRP_Button:active,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div button[type="roll"]:active,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div button[type="compendium"]:active,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .repcontrol button:active,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ div .advancedAttackButton button:active {
    background-color: #080808;
    color: #FF5555;
    box-shadow: none;
}

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ .SAbutton button::after {
    border-color: var(--ttd-dark-border);
}

/* Preserve a visible selected-tab state */

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="main"] ~ .SAbutton .sheet-tab-button-main,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="bio"] ~ .SAbutton .sheet-tab-button-bio,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="definitions"] ~ .SAbutton .sheet-tab-button-definitions,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="abilities"] ~ .SAbutton .sheet-tab-button-abilities,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="spells"] ~ .SAbutton .sheet-tab-button-spells,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="skills"] ~ .SAbutton .sheet-tab-button-skills,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="gear"] ~ .SAbutton .sheet-tab-button-gear,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="accessories"] ~ .SAbutton .sheet-tab-button-accessories,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="inventory"] ~ .SAbutton .sheet-tab-button-inventory,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="profitloss"] ~ .SAbutton .sheet-tab-button-profitloss,

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~
.sheet-tabstoggle[value="settings"] ~ .SAbutton .sheet-tab-button-settings {
    background-color: #505050;
    color: #FFFFFF;
}

/* Borders */

.charsheet .sheet-dark-mode-toggle[value="1"] ~ div .wrapped-div,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ div .midline-right-div,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ div .bottom-border-div,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ div .Spell-Level,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ div .weapon-repeat-box,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ div .accessories-grid,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ div .inventory-grid,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ div .SkillsPage,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ div .bag-grid {
    border-color: var(--ttd-dark-border);
}

/* Main sheet */

.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-main #base,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-main #enhancement,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-main #bonus,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-main #penalty,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-main #save-magic,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-main #save-misc,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-main #save-temp {
    background-color: var(--ttd-dark-panel);
    color: var(--ttd-dark-text);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-main .main-notes-body,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-main .conditions-effects-content {
    background-color: var(--ttd-dark-panel);
}

/* Custom death-save checkboxes */

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ .sheet-main
input.death-save-checkbox {
    background: var(--ttd-dark-control);
    border-color: var(--ttd-dark-border);
}

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ .sheet-main
input.death-save-checkbox:checked {
    background: #080808;
    border-color: #AAAAAA;
}

/* Biography */

.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-bio .main-bio-left,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-bio .main-bio-right,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-bio .bio-text-box {
    background-color: var(--ttd-dark-panel);
    border-color: var(--ttd-dark-border);
}

/* Definitions, abilities, feats, and resources */

.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-definitions .grr3,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-abilities .ability_description,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-abilities .feats_description {
    background-color: var(--ttd-dark-panel);
    color: var(--ttd-dark-text);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-abilities .repcontainer[data-groupname="repeating_resources"] > * {
    background-color: var(--ttd-dark-panel-alt);
    color: var(--ttd-dark-text);
}

/* Spells */

.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-spells .gridarea,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-spells .Column1,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-spells .Column2,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-spells .Spell-Level,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-spells .sheet-repeating-fields {
    background-color: var(--ttd-dark-page);
    color: var(--ttd-dark-text);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-spells .minimizable-repeat-spells .spells_description,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-spells .minimizable-repeat-spells
.spells-toggle[value="1"] ~ .spells_description {
    background-color: var(--ttd-dark-panel-alt);
    color: var(--ttd-dark-text);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-spells .spells_description .Details-1,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-spells .spells_description .Details-2,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-spells .spells_description .Description,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-spells .spells_description .Advanced,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-spells .spells_description span {
    background-color: var(--ttd-dark-panel-alt);
    color: var(--ttd-dark-text);
}

/* Accessories */

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-accessories .accessories-grid,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-accessories .Column1,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-accessories .Column2 {
    background-color: var(--ttd-dark-panel);
    color: var(--ttd-dark-text);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-accessories h3,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-accessories h4 {
    color: var(--ttd-dark-text);
}

/* Inventory and profit/loss */

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-inventory .inventory-grid,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-inventory .Column-I,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-profitloss {
    background-color: var(--ttd-dark-panel);
    color: var(--ttd-dark-text);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-inventory
.repcontainer[data-groupname="repeating_maininventory"] > div:nth-child(odd),

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-inventory
.repcontainer[data-groupname="repeating_locationtotals"] > div:nth-child(odd),

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-profitloss
.repcontainer[data-groupname="repeating_profitloss"] > div:nth-child(odd) {
    background-color: var(--ttd-dark-panel-alt);
    color: var(--ttd-dark-text);
}

/* Skills */

.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-skills .SkillsPage,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-skills table,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-skills tr,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-skills td {
    background-color: var(--ttd-dark-panel);
    color: var(--ttd-dark-text);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-skills .SkillsPage .skill-desc {
    background-color: #3A3A3A;
    color: #FFFFFF;
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-skills .SkillsPage table tr:nth-child(even) {
    background-color: var(--ttd-dark-panel-alt);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-skills .SkillsPage .hoverskill:hover {
    background-color: var(--ttd-dark-control-hover);
    color: #FFFFFF;
}

/* Weapons and armor */

.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-gear,
.charsheet .sheet-dark-mode-toggle[value="1"] ~ .sheet-gear .weapon-repeat-box {
    background-color: var(--ttd-dark-panel);
    color: var(--ttd-dark-text);
}


/* Settings */

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-settings .settings-grid,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-settings .settings-left,

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-settings .settings-right {
    background-color: var(--ttd-dark-page);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-settings .settings-left .settings-row:nth-child(odd),

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-settings .settings-right .settings-row:nth-child(odd),

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-settings .settings-value {
    background-color: var(--ttd-dark-panel);
    color: var(--ttd-dark-text);
}

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-settings .settings-left .settings-row:nth-child(even),

.charsheet .sheet-dark-mode-toggle[value="1"] ~
.sheet-settings .settings-right .settings-row:nth-child(even) {
    background-color: var(--ttd-dark-panel-alt);
}

.ui-dialog .charsheet:has(
    > input.sheet-dark-mode-toggle[value="1"]
) {
    background: #181818 none;
}

/* Dark-mode skill table zebra striping */
.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ .sheet-skills
.SkillsPage table tr.hoverskill:nth-child(odd) > td {
    background-color: #222222;
    color: #F2F2F2;
}

.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ .sheet-skills
.SkillsPage table tr.hoverskill:nth-child(even) > td {
    background-color: #303030;
    color: #F2F2F2;
}

/* Dark-mode skill row highlighting */
.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ .sheet-skills
.SkillsPage table tr.hoverskill:hover > td {
    background-color: #4A4A4A;
    color: #FFFFFF;
}

/* Apply the short transition to the visible cells */
.ui-dialog .charsheet
.sheet-dark-mode-toggle[value="1"] ~ .sheet-skills
.SkillsPage table tr.hoverskill > td {
    transition:
            background-color 0.05s,
            color 0.05s;
}

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

/* Outer card */
.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1 {
    color: #F2F2F2;
    border-color: #777777;
}

/* Header separation */
.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1 .sheet-header {
    border-bottom-color: #777777;
}

/* Normal rows */
.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content > div {
    background-color: #222222;
    color: #F2F2F2;
}

/* Zebra rows */
.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content > div:nth-child(4n+3),

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content > div:nth-child(4n) {
    background-color: #303030;
    color: #F2F2F2;
}

/* Inline-roll results */
.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-key .inlinerollresult,

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-value .inlinerollresult,

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-desc .inlinerollresult {
    background-color: #3A3A3A;
    color: #FFFFFF !Important;
    border-color: #777777;
}

/* Action links: damage, confirmation rolls, etc. */
.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a[href^="~"],

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a[href*="fullattack"],

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a[href*="fullattackdamage"],

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a[href*="fullattackcritdamage"],

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a[href*="fullattackconfirm"] {
    background-color: #303030;
    color: #FFFFFF !important;
    border-color: #888888;
    box-shadow: 0 2px #111111;
}

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a[href^="~"]:hover,

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a[href*="fullattack"]:hover {
    background-color: #505050;
    color: #FFFFFF;
}

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a[href^="~"]:active,

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a[href*="fullattack"]:active {
    background-color: #080808;
    color: #FF5555;
    box-shadow: none;
}

/* Ordinary links inside descriptions */
.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a:link {
    color: #8AB4FF;
}

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a:visited {
    color: #C7A0FF;
}

.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.sheet-content a:active {
    color: #FF79FF;
}

/* Critical success */
.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.inlinerollresult.fullcrit {
    border: 2px solid #3FAE5A;
    background-color: #243A29;
    color: #FFFFFF;
}

/* Critical failure */
.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.inlinerollresult.fullfail {
    border: 2px solid #D14A4A;
    background-color: #3A2424;
    color: #FFFFFF;
}

/* Mixed result: both a critical success and failure occurred */
.sheet-rolltemplate-custom
.sheet-container.sheet-darkmode-1
.inlinerollresult.importantroll {
    border: 2px solid #4A90D9;
    background-color: #24303A;
    color: #FFFFFF;
}

/*</editor-fold>*/

/*</editor-fold>*/